#main {
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 759px;
    min-width: 1024px;
    width: 100%;
    height: auto;
}

.one {
    background-image: url("/static/img/landing1.jpg");
}

.two {
    background-image: url("/static/img/landing1.jpg");
}

.three {
    background-image: url("/static/img/landing2.jpg");
}

.four {
    background-image: url("/static/img/landing8b.jpg");
}

.errorlist {
    color: red;
}


.watermark {
    position: absolute;
    float: center;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-25%) translateY(-50%);
    text-align: center;
    vertical-align: middle;
    z-index: 1000;
}

.invisible {
    display: none
}

html {
    font-size: 62.5%;
    margin: 0px;
    height: 100%;
    width: 100%;
    min-height: 100%;
}

body {
/*  background: #edc; */
  color: #333;
  font-size: 1.2em;
  width: 100%;
  min-height: 100%;
  margin: 0px;
  box-sizing: border-box;
/*  padding-bottom: 20px; */
}

.notyellow {
    font-size: 1.2em;
    height: auto;
    padding: 0px;
}

.yellow {
    color: #1c75bc;
    font-size: 1.2em;
    height: auto;
    padding: 0px;
}




cox {
/*  font-family: Georgia, serif; */
  font-weight: normal;
/* padding-top: 20px; */
  text-align: center;
  font-size: 2em;
}

/* `Tables
-------------------------------------------------------------------------------
*/

th {
    font-weight: bold;
    align: left;
 }

.listtable tbody tr:nth-of-type(even) {  background-color: #DDD; }
.listtable thead th {
    font-weight: bold;
    align: left;
}


.shortpadded td { padding: 3px 3px }

.paddedtable td { padding: 1px 20px }

.shortpadded th { padding: 3px 3px }

.paddedtable th { padding: 1px 20px }

.cortable {
    border-collapse: collapse;
}

.cortable td {
    border: 1px solid #999;
    text-align: center;
}


th.rotate {
  /* Something you can count on */
  height: 120px;
  white-space: nowrap;
}

th.rotate > div {
  transform:
    /* Magic Numbers */
    translate(28px, 91px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 5px;
}

.fixtable table {
  table-layout: fixed;
  width: 60%;
 }

.message {
  border: 1px solid #000;
  background-color: #f88;
  font-weight: bold;
  color: #000;
  text-align: center;
 }

.midden { text-align: center }

.poscor {
    background-color: #8f8;
}

.weakposcor {
    background-color: #efe;
}

.negcor {
    background-color:#f88;
}

.weaknegcor {
    background-color: #fee;
}

.successmessage {
  border: 1px solid #000;
  background-color: #8f8;
  color: #000;
  text-align: center;
  font-weight: bold;
 }

.deletelink {
  border: 1px solid #000;
  background-color: #f88;
  color: #000;
  text-align: center;
  font-weight: bold;
 }

.navbar {
  border: 1px solid #666;
  color: #000;


  overflow: hidden;
  background-color: #ddd;
/*  padding: 10px 0; */
  text-align: center;
}

.navbutton {
  background-color: #ddd;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 2px solid #666;
  padding: 5px;
  text-align: center;
 }

.transparentbutton {
    padding: 1px;
    text-align: center;
}

.tooltip {
    position: relative;
    display: inline-block;
    color: #000;
}

.tooltip a {
    color: black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #ffff66;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 999;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
  transition-delay:1s;
}

.caption {
  text-align: center;
 }

.site-announcement-box {
    padding: .2em .5em .2em 0em;
    width: 100%;
    max-width: 200px;
}

@media only screen and (max-width: 450px) {
    .site-announcement-box {
        max-width: 100%;
    }
}


.site-announcement {
    font: 1.0em/1.2em sans-serif;
    text-decoration: none;
    display: block;
    padding: .2em .5em .2em .5em;
    zoom: 1;
/*    border-radius: .5em; */
/*    -moz-border-radius: .5em; */
/*    -webkit-border-radius: .5em; */
    text-align: left;
    border: solid 1px #333;
}

.site-announcement-white {
    font: 1.0em/1.2em sans-serif;
    text-decoration: none;
    display: block;
    padding: .2em .5em .2em .5em;
    zoom: 1;
/*    border-radius: .5em; */
/*    -moz-border-radius: .5em; */
/*    -webkit-border-radius: .5em; */
    text-align: left;
    border: solid 1px #fff;
}



.contentli {
    margin-left: 30px;
    display: list-item;
    list-style-type: circle;
}


.dot {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 25px;
    height: 25px;
    border: solid 1px #333;
}

.dot:hover {
    text-decoration: none;
}

.rounder {
    border-radius: 10px;
    display: block;
    overflow-x: hidden;
    border: solid 1px #333;
    padding: 5px;
    margin: 2px;
}


.stepcontainer {
  display: grid;
  grid-template-columns: 4fr 1fr 4fr;
  gap: 10px;
}

.trainingstep {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

.trainingstep.over {
  border: 3px dotted #666;
}

.trainingstep.Warmup {
    background-color: #ffcccb;
}

.trainingstep.Cooldown {
    background-color: #90ee90;
}

.trainingstep.Rest {
    background-color: #add8e6;
}

.RepeatUntilStepsCmplt {
    background-color: #ffffa7;
}

.drop-zone {
  position: relative;
  overflow: hidden;
  background-color: #D7D7D7;
  /* color: white; */
  padding: 10px;
  padding-bottom: 40px;
}

.allcentered {
  /* Center vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

.allcenteredchild {
    margin-top: 50%;
}

.buttoncontainer input {
   float: left;
   margin: 5px;
}

.divlines {
    display: block;
    overflow-x: hidden;
    border-width: 1px 0 0 0;
    border-color: #333 #333 #333 #333;
    border-style: solid;
    padding: 0px;
    margin: 0px;
}

.workoutcontainer {
    display: grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/5), 1fr));
      /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
      padding: 5px;
      margin: 0px;
}

.analysiscontainer {
    display: grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/7), 1fr));
      /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
      padding: 5px;
      margin: 0px;
}

.workoutelement {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin: 0px;
}

.icondiv {
    padding: 0px;
    margin: 0px;
}

.divlines h3 {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}


.whiteborder {
    border: solid 2px #aaa;
}

.frontitem {
    background-color: rgba(255,255,255,0.7);
    border: solid 1px wite;
    padding: 5px;
    margin: 5px;
    color: black;
}

.frontitem label {
    color: black;
}

.frontitem a {
    color: #1c75bc;
}

.vignet {
    border-radius: 50%;
    display: block;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
    -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.4);
    box-shadow:         inset 0px 0px 85px rgba(0,0,0,0.4);

    line-height: 0;         /* ensure no space between bottom */

}

.vignet img {
    position: relative;
    transform: scale(1.5);
    z-index: -1;
}

.vignet2 {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: block;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
    -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.4);
    box-shadow:         inset 0px 0px 85px rgba(0,0,0,0.4);

    line-height: 0;         /* ensure no space between bottom */

}

.vignet2 img {
    position: center;
    z-index: -1;
}


.button {
  font: 1.1em/1.5em sans-serif;
  text-decoration: none;
  display: block;
  margin: 0;
  /* color: white; */
  padding: 0;
  zoom: 1;
  text-align: center;
}

.button:active {
    position: relative;
    top: 1px;
}


/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
}
.red:hover {
	background: #b61318;
}
.red:active {
	color: #de898c;
}

/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
}
.green:hover {
    background: #538018;
}
.green:active {
    color: #a9c08c;
}

.lightgreen {
    background: #e2f0da;
    color: #fdffc;
    border: solid 1px #b2bfaa;
}

.lightgreen:active {
    color: #f5faf2;
}

.lightgreen:hover {
    background: #b2bfaa;
}

.mediumgreen {
    background: #aad090;
    color: #fafff7;
    border: solid 1px #8db374;
}

.mediumgreen:active {
    color: #d8e6cf;
}

.mediumgreen:hover {
    background: #8db374;
}

.purple {
    background: #8c1ec1;
    color: #e9ddf0;
    border: solid 1px #6b0f99;
}

.purple:active {
    color: #cfa160;
}

.purple:hover {
    background: #6b0f99;
}

.violet {
    background: #c20d60;
    color: #f0dae5;
    border: solid 1px #99034e;
}

.violet:active {
    color: #e595bd;
}

.violet:hover {
    background: #99034e;
}

.blue {
	color: #fae7e9;
	border: solid 1px #27aae2;
	background: #27aae2;
}
.blue:hover {
    background: #1c74bb;
    border: solid 1px #27aae2;
}
.blue:active {
	color: #ffffff;
}

.leafletmap {
    padding:0;
    margin:0;
    display: grid;
    grid-gap: 0;
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
}
.orange:hover {
	background: #f47c20;
}
.orange:active {
	color: #fcd3a5;
}

/* CSS talk bubble */
.talk-bubble {
	margin: 40px;
        display: inline-block;
        position: relative;
	width: 200px;
	height: auto;
	background-color: lightyellow;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}
/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
    word-wrap: break-word;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

.drop-files {
  border: 1px solid #000;
  color: #000;

}


/* palegreen */
.palegreen {
    background: palegreen;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* paleblue */
.paleblue {
#    padding: 8px;
    background: aliceblue;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* lightsalmon */
.lightsalmon {
#    padding: 4px;
    background: lightsalmon;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* filler */
.filler {
    background: darkgray;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

.padded {
    padding: 10px;
}


.input {
  font: 1.1em/1.5em sans-serif;
  text-decoration: none;
  display: block;
  /* width: 100%; */
  color: white;
  padding: 0.2em 0.0em 0.2em 0.0em;
  zoom: 1;
  border-radius: .5em;
  -moz-border-radius: .5em;
  -webkit-border-radius: .5em;
/*  -box-shadow: 0 1px 3px  rgba(0,0,0,0.5); */
/*  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/*  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  */
  text-align: center;
}

.blueicon {
  text-decoration: none;
  display: block;
  /* width: 100%; */
  color: #1c75bc;
  padding: 0.2em 0.0em 0.2em 0.0em;
  zoom: 1;
}




.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
        border: solid 1px white;
}
.medium {
	font-size: 1.2em;
}
.small {
	font-size: 1.0em;
}

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
}
.black:hover {
	background: #000;
}
.black:active {
	color: #666;
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
}
.gray:hover {
	background: #616161;
}
.gray:active {
	color: #afafaf;
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
}
.white:hover {
	background: #ededed;
}
.white:active {
	color: #999;
}



/* blue */
.bluetext {
    color: #27aae2;
}


.rbluetext {
    color: #27aae1;
}

.rdarkbluetext {
    color: #1c75bc;
}

.rblue {
    color: #fae7e9;
    border: solid 1px #27aae1;
    background: #27aae1;
}

.rblue:active {
    color: #ffffff;
}

.rblue:hover {
    background: #1c75bc;
    border: solid 1px #27aae1;
}


/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
}
.rosy:hover {
	background: #ba4b58;
}
.rosy:active {
	color: #dca4ab;
}


/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
}
.pink:hover {
	background: #d57ea5;
}
.pink:active {
	color: #f3c3d9;
}


.greenbar {
  border: 1px solid #666;
  color: #000;


  overflow: hidden;
  background-color: #8f8;
/*  padding: 10px 0; */
  text-align: center;
}


#footer {
  text-align:center;
 }

.container_12,
.container_16,
.container_24 {
  background-color: #fff;
  background-repeat: repeat-y;
/*  margin-bottom: 20px; */
}

.container_12 {
/*    background-image: url(../img/12_col.gif);  */
}


/* Style The Dropdown Button */
.dropbtn {
  color: white;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
/*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 999;
}

/* Links inside the dropdown */
.dropdown-content a {
  text-decoration: none;
  display: block;
  z-index: 999;
}

/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {background-color: #f1f1f1} */

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.flexplot {
  position: relative;
  z-index: 10;
}


a.wh:link {
    color: #e9e9e9;
}

a.wh:visited {
    color: #e9e9e9;
}

a.wh:hover {
    color: #e9e9e9;
}


.bk-canvas-map {
    overflow: hidden;
    }


/* container */
.container {
  padding: 5% 5%;
}


.wrapwords{
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

}

.icon-link a {
    text-decoration: none;
/*    color: #27aae1; */
}

.icon-link a:hover, a:active, a:visited, a:link {
    /* color: #1c75bc; */
    text-decoration: none;
}


.mapdiv {
    padding: 0 !important;
}

.mapdiv img {
    float: left !important;
    padding: 0 !important;
}

.paypalpix {
    width: auto !important;
    max-width: 1px;
}

.mystyle {
    font-size: 11pt;
    font-family: Arial;
    border-collapse: collapse;
    border: 1px solid silver;

}

.pandastable tr {
    display: block;
}

.pandastable th, .pandastable td {
    width: 100px;
}

.pandastable tbody {
    display: block;
    height: 1200px;
    overflow: auto;
}

.pandastable td, .pandastable th {
    padding: 5px;
}

.pandastable tr:nth-child(even) {
    background: #E0E0E0;
}

.pandastable tr:hover {
    background: silver;
    cursor: pointer;
}

table.djangoform tbody > tr > th {
    vertical-align: top;
}