body{
   font-family: sans-serif;
   position: relative;
   /* font-size:2.2vh !important;*/
   font-size: 16px;
   text-size-adjust: none !important;
   background-color: var(--backColor);
   color: var(--commonColor);
   user-select: none;
   margin: 0;
   padding:0;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   width: 100%;
   height:100%;
   text-shadow: 0.1em 0.1em 0.2em #111;
}
body.nopullreload{
   overscroll-behavior-y: contain;
}
#installInfo{
   display: none;
   text-align: center;
   color:#aaa;
}
#installInfo.visible{
   display: block;
}
#splashScreen{
   display: none;
   background-color:var(--backColor);
   position: absolute;
   left:0;
   top:0;
   right:0;
   bottom:0;
   z-index:10;
   display: flex;
   align-items: center;
   justify-content: center;
}
#splashLogo{
   width: 80%;
}
#splashScreen.hidden{
   display: none;
}
#cancelArea{
   position: absolute;
   background:transparent;
   opacity: 0.85;
   top:0;
   left:0;
   right:0;
   bottom:0;
   display: none;
}
#cancelArea.visible{
   display: block;
   z-index:100;
}
#kioskHeader{
   height:4em;
   position:relative;
   display: flex;
   flex-direction: row;
}
#kioskHeader img{
   max-width: 100%;
   max-height:100%;
}
#kioskHeader > div{
   height: inherit;
   position: relative;
}
#racerInfo{
   flex-grow: 1;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   z-index:2;
}
#photoDiv{
   height:4em;
   width:4em;
   border-radius: 2em;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
#photoDiv img{
   image-orientation: from-image;
}
#racerDetails{
   cursor: pointer;
   margin-left: 0.5em;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;

}
#racerNameDiv{
   max-width: 30%;
   color:var(--nameColor);
}
#racerSwsNumDiv,
#racerNrskNumDiv{
   color:var(--brandColor);
   font-size: 0.8em;
}
#sideMenuButton{
   cursor: pointer;
   z-index:2;
}
#sideMenuButton img{
   height: 100%;
}
#trackSelection{
   height:3em;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
.activated{
   z-index:101;
}
#currentTrack{
   color:var(--commonColor);
   background-color: var(--brandColor);
   height:2em;
   line-height: 2em;
   margin:0.25em;
   min-width: 6em;
   padding:0 0.25em;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;
}
#trackSelector{
   height: 2em;
   margin: 0.25em;
   line-height: 2em;
   position: relative;
   width: 14em;
   vertical-align: middle;
   background: var(--secondaryBackground);
   color:var(--commonColor);
}
#tracksList{
   display: none;
   background-color: var(--selectorBackground);
   box-shadow: 0 0 0.5em 0.5em black;
}
#selectorButton{
   text-align: center;
   cursor: pointer;
}

#tracksList.visible{
   display:block;
   z-index: -1;
   position: relative;
}
.tracksListItem{
   padding-left:0.5em;
   cursor:pointer;
}
.tracksListItem:hover{
   background-color: var(--hoveredColor);
}
#applicationMainArea{
   flex-grow: 1;
   position: relative;
   width: unset;
   height: unset;
   z-index: unset;
}
#applicationMainArea iframe{
   position: absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   border:none;
   margin:0;
   padding:0;
}

#sideMenuFlex{
   position: absolute;
   right:0;
   top:0;
   bottom:0;
   left:0;
   flex-direction: row;
   display:none;
}
#sideMenuFlex.visible{
   display:flex;
}
#sideMenuHideClick{
   flex-grow: 1;
   z-index:1;
}
#sideMenu{
   display: flex;
   flex-direction: column;
   width: 20em;
   background-color: var(--selectorBackground);
   padding-top:4em;
   padding-left:0.5em;
   padding-right: 0.5em;
   z-index:1;
   box-shadow: 0 0 0.5em 0.5em black;
}
#fastRacerStats{
   display: flex;
   flex-direction: row;
   border-bottom:0.1em solid var(--commonColor);
   border-top:0.1em solid var(--commonColor);
}
#fastRacerStats #runsCountInfo{
   cursor: pointer;
}
#fastRacerStats #runsCountInfo,#fastRacerStats #racesCountInfo{
   color: var(--brandColor);
   flex-grow:1;
   flex-basis: 0;
   text-align: center;
   margin:0.25em auto;
}
#racesInfo{
   display:flex;
   flex-direction:row;
}
#racesCount{
   flex-grow: 1;
}
#newRacesInfo{
   text-align: left;
   color:var(--nameColor);
   cursor: pointer;
}
#fastRacerStats #runsCountInfo{
   border-right: 0.1em solid var(--brandColor);
}
#fastRacerStats #runsCount,#fastRacerStats #racesCount{
   font-size:2em;
}
#sideMenuBlock{
   flex-grow:1;
}
.sideMenuItem{
   height:2em;
   line-height: 2em;
   vertical-align: middle;
   padding-left:1em;
   cursor: pointer;
}
.sideMenuItem a{
   text-decoration: none;
   color:var(--commonColor);
}
.sideMenuItem:hover{
   background-color: var(--hoveredColor);
}
#sideMenu #trackInfoBlock{
}
#sideMenu #trackInfoBlock a{
   text-decoration: none;
   color:var(--commonColor);
}
#sideMenu #trackInfoBlock .trackInfoItem{
   text-align: center;
   margin-bottom:0.25em;
}

#loginForm{
   position:absolute;
   background-color: var(--backColor);
   top:0;
   left:0;
   right:0;
   bottom:0;
   z-index:100;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   display: none;
}
#loginForm.visible{
   display: flex;
}
#loginForm img{
   max-width: 90%;
   max-height:33%;
}
form{
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   max-width: 15em;
   margin:0 auto;
}

input{
   padding:0.25em;
   background-color: var(--backColor);
   border: 0.1em solid var(--commonColor);
   color:var(--commonColor);
   font-size:16px;
   width:100%;
}
input:focus{
   font-size: 16px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
}
#loginForm label{
   margin-top:0.5em;
}

#submitButton, #newAccountButton, #cancelButton,.buttonPositive,.buttonNegative,
form#racerData label.buttonPositive{
   margin-top:1em;
   background-color: var(--brandColor);
   display: button;
   border-color: var(--brandColor);
   height:3em;
   width: 12em;
   max-width: 12em;
   margin-left:auto;
   margin-right: auto;
   color:var(--commontColor);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding:0;
}
#newAccountButton,#cancelButton,.buttonNegative{
   background-color: var(--secondaryButtonColor);
   border-color: var(--secondaryButtonColor);
}
.popupWindow{
   z-index:100;
   position: absolute;
   left:0;
   top:0;
   right:0;
   bottom:0;
   background-color: var(--backColor);
   align-items: center;
   justify-content: center;
   display: none;
}
.popupWindow.visible{
   display:flex;
}
.popupWindow#infoMessage,
.popupWindow#confirmMessage{
   z-index: 101;
}
.popupWindow #messageBody{
   opacity: 1;
   min-width: 15em;
   display: flex;
   flex-direction: column;
   border: 0.05em solid var(--commonColor);
   min-height: 10em;
   padding-bottom:0.5em;
   max-width: 80%;
}
.popupWindow #messageCaption{
   background-color: var(--brandColor);
   text-align: center;
   border: 0.05em solid var(--secondaryBackground);
}
.popupWindow #messageText{
   flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   padding:0.5em;
}


#logoutMenu{
   height:2em;
   line-height: 2em;
   vertical-align: middle;
   padding-left:1em;
   cursor: pointer;
   margin-bottom:1em;
   background: url('./../images/exit.svg?v=2') no-repeat;
   background-position: right center;
   background-size: contain;
}
#logoutMenu:hover{
   background-color: var(--hoveredColor);
}

#QRpage{
   text-align: center;
}
#racerQR {
   box-sizing: border-box;
   width: 100vw;
   /*  max-width: 600px;*/
   padding:0 10vw;
}
#trackInfo{
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 30vw;
}
#futureRaces{
   flex-direction: column;
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height:100%;
   display: none;
}
#applicationMainArea #futureRaces{
   display: flex;
}
#futureRaces #caption{
   background-color: var(--brandColor);
   color:var(--commonColor);
   text-align: center;
}
#futureRaces #content{
   flex-grow: 1;
   position: relative;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
}
#futureRaces .racesTable{
   display: table;
   table-layout: fixed;
   width: 100%;
}
#futureRaces #racesTableTemplate{
   display: none;
}
#futureRaces .racesTable .caption{
   display: table-caption;
   text-align: center;
   color: var(--brandColor);
   margin-top:2em;
}
#futureRaces .racesTable #dataRowTemplate{
   display: none;
}
#futureRaces .racesTable .row{
   display: table-row;
}
#futureRaces .racesTable .cell{
   display: table-cell;
}
#futureRaces .racesTable #headerRow .cell{
   color:#aaa;
}
#futureRaces .racesTable #headerRow #date{
   width:6em;
}
#futureRaces .racesTable .dataRow .cell{
   vertical-align: middle;
}
#futureRaces .racesTable .dataRow #name{
   text-overflow: ellipsis;
}
#futureRaces .racesTable .dataRow .regButton{
   background-color: var(--brandColor);
   height:2em;
   margin:0.25em;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;   
}
#futureRaces .racesTable .dataRow .regButton.regDone{
   background-color: green;
   cursor: inherit;
   padding:0.25em 0;
}
#futureRaces .racesTable #headerRow #reg{
   width:7em;
}
#futureRaces .racesTable .dataRow .cell{
   border-top:0.05em solid var(--brandColor);
   max-width: 0px;
}
@media(orientation:landscape)
{
   #QRpage img{
      width: unset;
      /*    max-height:50vh;*/
   }
}
#applicationMainArea.fullScreen{
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 100;
}

#loginForm form.hidden{
   display: none;
}

input:invalid{
   background-color: red;
   color:white;
}

form#racerData label{
   padding-top:0.5em;
   color:var(--brandColor);
}

#raceRegistration #raceName{
   text-align: center;
   color:var(--brandColor);
}
#raceRegistration form{
   max-width: 90%;
}
#raceRegistration .inputGroup{
   display: flex;
   flex-direction: row;
   height:2em;
   vertical-align: middle;
   line-height: 2em;
   margin-top:0.5em;
   white-space: nowrap;
   overflow: hidden;
}
#raceRegistration #groupSelector{
   border: 0.05em solid var(--commonColor);
   padding-bottom:0.5em;
   padding-left:0.5em;
   padding-right:0.5em;
}
#raceRegistration .inputGroup input{
   width: 1.5em;
   height:1.5em;
   min-width: 1.5em;
   min-height: 1.5em;
   pointer-events: none;
}
#raceRegistration #groupLabel{
   text-align: center;
}
#raceRegistration .inputGroup #groupName{
   color:var(--brandColor);
   margin-left:0.5em;
   margin-right:0.5em;
   width: 2em;
}
form#racerData label.formButton{
   margin-top:1em;
   padding:0;
   background-color: var(--brandColor);
   color:white;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}