body{
   display: flex;
   flex-direction: column;
}
a {
    color: var(--linkColor);
}

.racesBlock{
   flex-grow:1;
   overflow-y:scroll;
}
#racesListHeader{
   background-color: var(--backColor);
   color:var(--textColor);
}
div{
   /*text-transform: uppercase;*/
}
div.racesInfo,div.raceName{
   text-align: center;
   padding: 0.2em;

}

div.raceName{
   color: var(--brandColor);
   font-weight: bold;
   text-shadow:none;
}
div.raceComment{
   color: var(--raceCommentColor);
   text-align: center;
   font-weight: normal;
   font-size:0.75em;
   text-shadow:none;
}

div.raceDate{
   color:var(--raceHeaderTextColor);
   font-weight: bold;
   text-align: center;
   text-shadow:none;
}

div.raceButtonContainer{
   width: 100%;
   display: block;
   text-align: center;
   margin: 0;

}
a.buttonRef,a.buttonRefWhite,input.form-submit-button{
   color: var(--textOnBrandColor);
   background-color: var(--brandColor);
   display: block;
   text-decoration: none;
   width:16em;
   text-align: center;
   margin: 0 auto;
   margin-top:0.5em;
   padding: 0.75em 0;
   text-shadow:0.1em 0.1em 0.4em var(--textShadowColor);
   font-size: inherit;
}
a.buttonRefWhite{
   color: var(--brandColor);
   background-color: var(--textColor);
   text-shadow: 0.04em 0.04em 0.2em var(--textShadowColor);
}
a.buttonRef.form-submit-button {
   background-color: var(--cancelButtonBkColor);
}
div.raceBlock{
   padding-bottom: 1.5em;
   text-shadow:0.1em 0.1em 0.4em var(--textShadowColor);
}
div.raceHeader{
  font-size: 0.8em;
   background-color: var(--raceHeaderBkColor);
   position:relative;
}

div.raceHeader .regLink{
  position: absolute;
  right:0;
  bottom:0;
  padding:0.25em;
  font-size:0.75em;
  text-align: right;
}
div.raceHeader .teamRace{
  position:absolute;
  left:0;
  bottom:0;
  font-size:0.75em;
  padding:0.25em;
  color:var(--raceCommentColor);
}
input#regnum {
   text-transform: uppercase;
}
input:invalid{
   background-color: var(--invalidInputBkColor);
   color: var(--invalidInputTextColor);
}
input{
}
div.racersCount{
   text-align: center;
   border-bottom:0.1em solid var(--brandColor);

}
div.raceSummary{
   display: flex;
   flex-direction: row;
}
div.raceSummaryBlock{
   flex-grow:1;
   flex-basis: 0;

}
div.raceBlockHeader{
   color: var(--nameColor);
   border-bottom:0.1em solid var(--brandColor);
   padding-left:0.25em;
   text-align: center;
}
div.raceWinners{
   border-right:0.1em solid var(--brandColor);
}
div.raceRunName,div.raceWinner{
   padding-left:0.25em;
   text-align:left;
   text-overflow: ellipsis;
   white-space: nowrap;

}
div.raceRunName{
   cursor: pointer;
   flex-grow: 1;
}

div.raceRunName:hover{
   background-color: var(--hoveredColor);
}
.form-input{
   background-color:var(--backColor);
   outline: none;
   color:var(--textColor);
   width: 16em;
   border: 1px solid var(--formBorderColor);
   font-size: inherit;
   font-family: inherit;
   margin-bottom: 0.5em;
   padding: 0.2em;
}
#birthdate.form-input{
   min-height: 1.5em;
}
.groupComment{
   color: var(--brandColor);
   margin-left: 0.5em;
}
form{
   padding: 0.5em 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
form label{
   display: block;
}

div.warning{
   text-transform: none;
   font-size:0.9em;
   padding:0.5em 0.5em;
   color: var(--brandColor);
}
div.success,div.error{
   text-transform: none;
   text-align: center;
}
div#groups{
   width: 16em;
   text-transform: none;
   display: block;
}
div#groups label.radio-label{
   display: block;
   text-transform: none;
   width: unset;
   position: relative;
   cursor:pointer;
   padding-left:1.2em;
   margin-bottom: 0.125em;
   margin-top:0.125em;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
}
div.groupName{
   width: 2em;
   display: inline-block;
   text-align: left;
}
div.groupComment{
  white-space: nowrap;
  text-align: left;
}
div.group-selector{
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

div.groupChecker{
  position: relative;
  width: 1.5em;
  max-height: 1.5em;
  display: flex;
}
div.groupChecker input{
  position: absolute;
  width: 80%;
  height: 80%;
  pointer-events: none;
}
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 1em;
   width: 1em;
   background-color: var(--raceCheckMarkBkColor);
   border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.radio-label:hover input ~ .checkmark {
   background-color: var(--raceCheckMarkHoveredBkColor);
}

/* When the radio button is checked, add a blue background */
.radio-label input:checked ~ .checkmark {
   background-color: var(--brandColor);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-label input:checked ~ .checkmark:after {
   display: block;
}

/* Style the indicator (dot/circle) */
.radio-label .checkmark:after {
   top: 0.24em;
   left: 0.24em;
   width: 0.5em;
   height: 0.5em;
   border-radius: 50%;
   background-color: var(--raceCheckMarkBkColor);
}
div.racersList{
   display: table;
   width: 100%;
}
div.racersListRow{
   display:table-row;
   font-size:0.8em;
}
div.racersListRow div{
   text-transform: none;
   display:table-cell;
   text-align: left;
   white-space: nowrap;
   overflow:hidden;
   /*max-width: 0;*/
}
div.racersListHeader div{
   border-bottom: 0.1em solid var(--formBorderColor);
}
div.racersListHeader #pos{
   width:1.5em;
}
div.racersListRow div#regnumdata{
   text-transform: uppercase;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 0px;
}

div.racersListHeader #regnum{
   width:9em;
   max-width: 9em;
   text-transform: none;
}
div.racersListHeader #group{
   width:3.8em;
}
#popupRunArchive{
   position: fixed;
   width: 100%;
   height: 100%;
   display: none;
   flex-direction: column;
   border:none;
   background-color: var(--backColor);
}
#popupRunArchive div#closeIcon{
   cursor:pointer;
   height:2em;
   width: 2em;
   background-repeat: no-repeat;
   background: url("/Images/icons/close.svg");
   background-size: 100% 100%;
   float:right;
}
#popupRunIframe{
   width: 100%;
   height:100%;
   border:none;
   flex-grow: 1;
}
.raceRunBlock{
   width: 100%;
   display: inline-flex;
}

div#teamRacers{
  width: 100%;
}
#teamPilotsList{
  display: table;
  border-collapse: collapse;
  width:100%;
}
.teamPilotRow{
  display: table-row;
}
.teamPilotCell{
  display: table-cell;
  border:1px solid white;
}
.teamPilotCell#teamPilotName{
  width:100%;
  padding-left: 0.5em;
  text-align: left;
}
.teamPilotCell#teamPilotDelete{
  width:1em;
  min-width: 1em;
  background: url("/Images/icons/close.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  padding-left:0.5em;
  cursor:pointer;
}
.infoRemark{
  color: var(--nameColor);
  font-size:0.75em;
  text-align: center;
}
#addTeamRacerData{
  padding:0.5em;
}
@media (orientation: portrait)
{
   div.raceArchiveBlock{
      font-size:3vw;
   }
   div.raceSummary{
      flex-direction: column;
   }
   .raceRuns{
      border-top: 0.1em solid var(--brandColor);
      padding-bottom:0.5em;
   }
   div.raceWinners{
      border-right: none;
   }

}
@media (orientation: landscape)
{
  #teamPilotsList{
    max-width: 24em;
    margin:0 auto;
  }
  #addTeamRacerData{
    width:24em;
  }
   div.raceArchiveBlock{
      max-width: 50%;
      width:25em;
      margin:0 auto;
   }
   div.raceHeader{
      background-color: var(--raceHeaderBkColor);
      max-width: 40%;
      margin:0 auto;
   }
   div.raceArchiveBlock .raceHeader{
      max-width: unset;
   }
}

#messageText{
  text-align: center;
}