:root {
    --main-color: #D93830;
    --second-color: #4CAF50;
    --odd-color: rgba(0,0,0,0.24);
}



body {
    margin: 0;
    padding: 0;
}


/* Global settings */

.headerlogo {
    max-width: 100%;
    max-height: 100px;
    opacity:1;
}

header {
    background-color: var(--main-color);
    position: relative;
    height: 100px;
}

.help {
    font-size: 48px;
    color: white;
    cursor: pointer;
    line-height:100px;
}
.helppart{
    text-align:center;
}

.helpmodalbody video{
    max-width:100%;
}
.helpmodalbody article {
    margin-top: 50px;
    border-bottom: 1px solid #e9ecef;
}
.helpmodalbody .title {
    background-color: var(--second-color);
    color: white;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
}

.mybuttons {
    background-color: var(--second-color);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

    .mybuttons:hover {
        opacity: 0.8;
    }

.headerbutton{
    margin-top:25px;
    height:50px;
}
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

.indexfooter {
    position: fixed;
    bottom: 0;
    background-color: var(--main-color);
    width: 100%;
    text-align: center;
    color: white;
}

    .indexfooter h4 {
        width: 100%;
    }

main{
    margin-bottom:50px;
}

/* Login (index) Page*/

#message {
    background: white;
    max-width: 360px;
    margin: 100px auto 16px;
    padding: 32px 24px;
    border-radius: 3px;
}


#message h2 {
    color: #ffa100;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 8px;
}

    #message h1 {
        font-size: 22px;
        font-weight: 300;
        color: rgb(0,0,0);
        color: rgba(0,0,0,0.6);
        margin: 0 0 16px;
    }

#message p {
    line-height: 140%;
    margin: 16px 0 24px;
    font-size: 14px;
}

#message a {
    display: block;
    text-align: center;
    background: #039be5;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    padding: 16px;
    border-radius: 4px;
}

#message, #message a {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#load {
    color:rgb(0,0,0);
    color: rgba(0,0,0,0.4);
    text-align: center;
    font-size: 13px;
}
.indexheader{
    height:150px;
}
.indexmain{
    margin-top:1em;
}


.welcomelogo img{
    max-height:150px;
}
.welcometitle {
    position:absolute;
    top:0;
    color: white;
    text-align:center;
    width:100%;
    padding-top:32px;
}
.demoinfo{
    margin:auto;
}
.Googleplay{
    text-align:center;
}
.Googleplay img{
    max-width:60%;
}
.promo video {
    max-width: 100%;
}
/*
    Welcome page
*/


.boardselect, .heatfillselect{
    background-color: var(--second-color);
    color: white;
    padding: 14px 20px;
    margin: 8px;
    cursor: pointer;
}

    .boardselect > option, .heatfillselect > option {
        background-color: var(--main-color);
    }


/*
    Live Heat page
*/
.timerpart {
    text-align: center;
}
#btnStart {
    margin-top: 5px;
    height: 90px;
    background-color: var(--second-color);
    color: white;
    font-size: 3rem;
    line-height: 90px;
    font-weight: bold;
}

#data {
    position: absolute;
    margin: 100px 0 8vh 0;
    transition-duration: 3s;
}

.leader {
    background-color: var(--second-color);
    color:white;
}

.even {
    background-color: darkgrey;
    /*color: white;*/
}

.odd {
    background-color: white;
    /*color: black;*/
}

.Card {
    line-height: 10vh;
    height: 10vh;
    font-size: 9.5vh;
    position: absolute;
    transition-duration: 1s;
    display: flex;
    align-items: flex-start;
}


.AthleteCard {
    padding-left: 10px;
    width: 60vw;
    display: flex;
}

.AthleteAffiliate {
    margin-left: 10px;
    font-size: 4vh;
    white-space: nowrap;
    overflow: hidden;
}

.AthleteName {
    line-height: 10vh;
    white-space: nowrap;
    overflow: hidden;
}

.RepsCard, .LaneCard {
    width: 20vw;
    font-weight: bold;
    text-align: center;
}

#leaderboardfooter, #leaderboardheader {
    position: fixed;
    z-index: 99;
    transition-duration: 3s;
    font-size: 3vh;
    text-align: center;
    width: 100%;
    background-color: var(--main-color);
    color:white;
}

#leaderboardfooter {
    bottom: 0;
    height: 8vh;
    line-height: 8vh;
}
#leaderboardheader {
    top: 0;
    height: 100px;
    line-height: 100px;
}



/*
    Setup page
*/
.setupmain {
    margin-top: 3rem;
}
.card-header {
    background-color: var(--main-color);
}

.mb-0 button {
    color: white;
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.btn-link:hover, .btn-link:focus {
    text-decoration: none;
}


.card-header:hover > .mb-0 button {
    color: var(--main-color);
}

.card-header:hover{
    background-color: white;
}

.fa {
    margin-left: 10px;
}

.fa-trash:hover{
    cursor:pointer;
}

.settinginput{
    margin-right:10px;
}
.laneinput{
    width:100px !important;
    height:30px;
}

.tdinput {
    width: 200px !important;
    height: 30px;
}
.list {
    padding: 0;
    border: 1px solid #4fc3fc;
}

.list li {
    padding: 5px 10px;
    border-top: 1px solid #4fc3fc;
    cursor: pointer;
    color: var(--main-color);
    font-style: italic;
    list-style: none;
}

.pagination li {
    padding-right:5px;
}

.pagination li a {
    color: var(--main-color);
    font-style: italic;
}

.list li:hover {
    background-color: #4fc3fc;
}

.detail {
    padding: 10px;
    border: 1px solid #4fc3fc;
    color: var(--main-color);
}

#Addtiebreakreps{
    display:none;
}

/* Modals */
input[type=text], input[type=password], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#tableimportcheck{
    width:100%;
    border:1px solid var(--main-color);
    text-align:center;
    margin-top:10px;
}

.headerrow{
    font-weight:bold;
    padding-bottom:5px;
}

#tableimportcheck td {
    border: 1px solid var(--main-color);
}

#importbutton:disabled, #tableimportcheck {
    display: none;
}


.info{
    color:var(--main-color);
    font-size:0.8em;
    font-style:italic;
}


/*
    HeatFiller Part

*/
.deleterepcounticon {
    cursor: pointer;
}

.wodchecks {
    width: 20px;
    height: 20px;
    margin: 0 8px;
    vertical-align: text-bottom;
}
#SaveHeatLaneAthletes{
    display:none;
}

#Athleteforheatlane{
    padding-left:0;
}

#lanesforheat{
    padding-right:0;
}
#HeatWodSelect{
    align-items:center;
}


.LanesForAths {
    height: 30px;
}
.athselect{
    width:250px;
    display:block;
    margin-top:0;
    border-color:var(--main-color);
    padding:0;
}
.lbllane {
    display:block;
}

.evenlane{
    background-color:lightgrey;
}

@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }

    .cancelbtn {
        width: 100%;
    }
}


@media (max-width: 600px) {
    body, #message {
        margin-top: 0;
        background: white;
        box-shadow: none;
    }

    .welcometitle{
        display:none;
    }
    .welcomelogo{
        margin:auto;
    }
}

@media (max-width: 900px) {
    .LaneCard {
        display: none;
    }
    .AthleteCard{
        width:80vw;
    }

    .AthleteName {
        width: 100%;
    }
}

@media (max-width: 1399px) {
    .AthleteAffiliate {
        display: none;
    }

    .AthleteName {
        width: 100%;
    }
}


/*
    Leaderboardpart
*/

#leaderboarddata{
    width:50%;
    margin:auto;
    margin-top:100px;
}

.tblleaderheader{
    background-color: var(--main-color);
}

.mytable {
    background-color: var(--second-color);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    width: 100%;
}

.mytable > tbody > tr, .mytable > thead > tr{
    border:2px solid var(--main-color);
}