@font-face {
   font-family: "roboto condensed";
   src: url("fonts/RobotoCondensed-Regular.ttf");
}
::-webkit-scrollbar {
   display: none;
}

html,body,div{
   -ms-overflow-style: -ms-autohiding-scrollbar;
}

body{
   width: 100%;
   height:100%;
   background-color:var(--backColor);
   margin: 0;
   font-family: "roboto condensed";
   font-size:4vw;
   display: flex;
   flex-direction: column;
   color:var(--textColor);
   text-shadow: 0.02em 0.02em 0.08em var(--textShadowColor);

   --inRowCount:1000;

   --datarow-border-height: 0.01em;
   --dataRowHeight:8vw;
   --dataRowWidth:100%;
   --headerRowHeight:8vw;

   --dataRowDisplay:inline-flex;
   --posWidth: 8vw;
   --numWidth: 10vw;
   --lapTimeWidth: 19.0vw;
   --sectorTimeWidth: 12vw;
   --lapTimePadding: 1vw;
   --lapsPadding: 1vw;
   --addWeightPadding: 0.25em;
   --lapsCountWidth: 8vw;
   --pitsCountWidth: 8vw;
   --diffTimeWidth: 14vw;
   --kartTypeWidth: 9vw;
   --addWeightWidth: 5.5vw;

   --posDisplay:flex;
   --numDisplay:flex;
   --kartTypeDisplay:flex;
   --nameDisplay:flex;
   --teamDisplay:none;
   --bestLapTimeDisplay:flex;
   --sessionTimeDisplay:none;
   --lapsDisplay:flex;
   --lastSectorNDisplay:none;
   --sectorsSetDisaply:none;
   --maxLastSectorNDisplay:flex;
   --lastLapTimeDisplay:flex;
   --lastLapsTimesDisplay:none;
   --currentLapTimeDisplay:none;
   --avgSessionLapDisplay:none;
   --diffDisplay:none;
   --totalTimeDisplay:none;
   --gapDisplay:flex;
   --pitsCountDisplay:none;
   --pitTimeDisplay:none;
   --bestSectorNDisplay:none;
   --theorLapDisplay:flex;
   --addWeightDisplay:none;
}
#resultsTable .headerCell{
   justify-content: center;
}
#resultsTable #pos{
   display: var(--posDisplay);
}
#resultsTable #num{
   display: var(--numDisplay);
}
#resultsTable #kart_type{
   display: var(--kartTypeDisplay);
}

#resultsTable .resultsCell #nameContainer{
   display: var(--nameDisplay);
}
#resultsTable .resultsCell.compositeNameSectors
{
   display: var(--nameDisplay);
}

#resultsTable #add_weight{
   display: var(--addWeightDisplay);
   width: var(--addWeightWidth);
   background-color: yellow;
   color: black;
   text-shadow: 0.02em 0.02em 0.1em var(--textShadowColor);
}
.resultsCell#add_weight{
   justify-content:flex-end;
   padding-right: var(--addWeightPadding);
}


#resultsTable #teamContainer{
   display: var(--teamDisplay)
}
#resultsTable #best_lap_time{
   display: var(--bestLapTimeDisplay);
}
#resultsTable #session_time{
   display: var(--sessionTimeDisplay);
}
#resultsTable #laps{
   display: var(--lapsDisplay);
}
#resultsTable .sectorsSet{
   display: var(--sectorsSetDisaply);
}


#resultsTable .innerNameValue{
   position: absolute;
   left:0;
   right:0;
   overflow: hidden;
   text-overflow: ellipsis;
}
#resultsTable #team.innerNameValue{
   color:var(--nameColor);
}
/*
#resultsTable #last_sector_1,
#resultsTable #last_sector_2,
#resultsTable #last_sector_3,
#resultsTable #last_sector_4{
   display: var(--lastSectorNDisplay);
}*/
#resultsTable #max_last_sector_1,
#resultsTable #max_last_sector_2,
#resultsTable #max_last_sector_3,
#resultsTable #max_last_sector_4{
   display: var(--maxLastSectorNDisplay);
}

#resultsTable #last_lap_time_1{
   display: var(--lastLapTimeDisplay);
}
#resultsTable #last_lap_time_2,
#resultsTable #last_lap_time_3{
   display: var(--lastLapsTimesDisplay);
}
#resultsTable #current_lap_time{
   display: var(--currentLapTimeDisplay);
}
#resultsTable #avg_session_lap{
   display: var(--avgSessionLapDisplay);
}
#resultsTable #diff{
   display: var(--diffDisplay);
}
#resultsTable #total_time{
   display: var(--totalTimeDisplay);
}
#resultsTable #gap{
   display: var(--gapDisplay);
}
#resultsTable #pits_count{
   display: var(--pitsCountDisplay);
}
#resultsTable .resultsCell#pits_count{
   justify-content: flex-end;
   padding-right: var(--lapsPadding);
}
#resultsTable #pit_time{
   display: var(--pitTimeDisplay);
}
#resultsTable #best_sector_1,
#resultsTable #best_sector_2,
#resultsTable #best_sector_3,
#resultsTable #best_sector_4{
   display: var(--bestSectorNDisplay);
}
#resultsTable #theor_lap_time{
   display: var(--theorLapDisplay);
}
.resultsCell,
.headerCell{
   box-sizing: border-box;
}

div#pilotChangesContainer{
   display: none;
}
.advertBlock{
   display: flex;
   flex-direction: column;
   width:100%;
   /*height: 100%;*/
   overflow: scroll;
}
#chronoContainer{
   position: relative;
   flex-grow: 1;

}
#chronoBlock{
   position:absolute;
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 80%;
   width: 100%;
}

.runInfoContainer{
   font-size: 1.6em;
   height: 1.8em;
   min-height: 1.8em;
   display: inline-flex;
   width: 100%;
   text-shadow: 0.05em 0.05em 0.2em  var(--textShadowColor);
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   align-items: center;
}
.runInfoContainer div{
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
}
#runsArchiveHeader{
   background-color: var(--backColor);
   color: var(--textColor);
}
#chronoBlock #runsArchiveHeader #homeButtonSvg{
   background-image: var(--homeButtonSvg);
}
#chronoBlock #runsArchiveHeader #currentButtonSvg{
   background-image: var(--currentButtonSvg);
}
#chronoBlock #runsArchiveHeader #archiveButtonSvg{
   background-image: var(--archiveButtonSvg);
}

div#run_name{
   width:10em;
   padding-left: 0.25em;
   flex-grow:1;
}
div#race_name{
   padding-left: 1em;
   flex-grow:1;
}
div#run_param{
   width:4.2em;
   background-color: var(--runTimeBackgroundColor);
   color:var(--runTimeTextColor);
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-shadow: 0.02em 0.02em 0.08em  var(--textShadowColor);
}
div#run_param.finished{
   background: url("/Images/icons/finishflag.png");
   background-size: 100% 100%;
   color: var(--finishedRunTextColor);
   text-shadow: inherit;
}
div#run_param.redFlag{
   background: none;
   background-color: var(--redFlagBkColor);
   color:var(--redFlagTextColor);
}
div#run_param.warmupFlag{
   background: none;
   background-color: var(--warmupFlagBkColor);
   color:var(--warmupFlagTextColor);
}

#runResultsBlock{
   overflow: scroll;
   flex: 1;
   position: relative;
}

#resultsTable{
   width: 100%;
   display: block;
   text-shadow: 0.05em 0.05em 0.2em var(--textShadowColor);
   position: relative;
}
.headerRow{
   background-color: var(--scoreboardHdrBackColor);
   display: inline-flex;
   width:100%;
   font-size:0.75em;
   height: var(--headerRowHeight);
   overflow: hidden;
}
.headerCell{
   padding-top:0.4em;
   text-align: center;
}
#dataRowTemplate{
   display: none;
}
.dataRow{
   transition: top 1.5s;
   position: absolute;
   left:0px;
   display: none;
   height:var(--dataRowHeight);
   width:var(--dataRowWidth);
}
.dataRow{
   background-color: var(--scoreboardBkColor);
}
.dataRow.oddRow{
   background-color: var(--scoreboardOddRowColor);
}
.dataRow:hover{
   background-color:var(--scoreboardHoveredColor);
   cursor: pointer;
}

.resultsCell{
   border-top:var(--datarow-border-height) solid var(--dataRowTopBorderColor);
   overflow: hidden;
   color:var(--textColor);
   align-items: center;
   flex-direction: row;
}
.headerCell{
   vertical-align: bottom;
}
#pos{
   width: var(--posWidth);
}
.headerCell#name,
.resultsCell.compositeNameSectors{
   flex-grow:1;
   position: relative;
}
.resultsCell .compositeNameSectorsInner{
   position: absolute;
   top:0;
   bottom:0;
   left: var(--lapTimePadding);
   right:var(--lapTimePadding);
   display: flex;
}
.resultsCell .innerNameSectorsCell{
   display: flex;
   /*flex-basis: 0;*/
   align-items: center;
   display: flex;
   flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
/*   text-transform: uppercase;*/

}
#num
{
   width: var(--numWidth);
}
#kart_type{
   width: var(--kartTypeWidth);
   overflow: hidden;
}
.resultsCell#kart_type{
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   padding-left:var(--lapsPadding);
   white-space: nowrap;
   overflow: hidden;
}
#resultsTable #laps{
   width:var(--lapsCountWidth);
}
.resultsCell#laps{
   justify-content:flex-end;
   padding-right: var(--lapsPadding);
}
.pitsCount{
   width: var(--pitsCountWidth);
}
.resultsCell.pitsCount{
   padding-right: var(--lapsPadding);
}
.lapTime{
   width: var(--lapTimeWidth);
}
.resultsCell.lapTime{
   padding-right: var(--lapTimePadding);
}
.sectorLapTime{
   width: var(--sectorTimeWidth);
}
.resultsCell.sectorLapTime{
   padding-right: var(--lapTimePadding);
}
.diffTime{
   width: var(--diffTimeWidth);
}
.resultsCell.diffTime{
   justify-content: flex-end;
   padding-right: var(--lapTimePadding);
}
.resultsCell#pos{
   justify-content: center;
   background-color: var(--scoreboardPosBkColor);
   color:var(--scoreboardPosTextColor);
   border-right: 0.1em solid var(--scoreboardVerticalBorderColor);
}
.resultsCell#pos.posWin{
   background-color: var(--scoreboardPosWinBkColor);
   color:var(--scoreboardPosWinTextColor);
}
.resultsCell#pos.posLost{
   background-color: var(--scoreboardPosLostBkColor);
   color:var(--scoreboardPosLostTextColor);
}
.resultsCell#pos.totalBest{
   background-color: var(--scoreboardPosBestLapBkColor);
   color:var(--scoreboardPosBestLapTextColor);
}
.resultsCell#pos.competitorFinished{
   background: url("/Images/icons/finish_pos.png");
   background-size: 100% 100%;
   color: var(--scoreboardPosFinishedTextColor);
}
.resultsCell#pos.currentRacer{
   background: none;
   background-color: var(--accountRacerColor);
}
.resultsCell#num{
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   justify-content: center;
   border-top:var(--datarow-border-height) solid var(--dataRowTopBorderColor);
}
.resultsCell#kart_type{
   border-top:var(--datarow-border-height) solid var(--dataRowTopBorderColor);
}

.sectorsSet{
   font-size: 0.75em;
   display: flex;
   width: 100%;
   flex-direction: row;
   margin-bottom: 0.2em;
   position:absolute;
   bottom: 0;
}
.sectorContainer{
   width: 33.3%;
}
.sectorLabel{
   color: var(--brandColor);
}
.sectorTime{
   color: var(--scoreboardSectorTimeColor);
}
.sectorTime.personalBest{
   color: var(--scoreboardSectorTimePersonalBestColor);
}
.sectorTime.totalBest{
   color: var(--scoreboardSectorTimeTotalBestColor);
}
.resultsCell.lapTime,.resultsCell.sectorLapTime{
   justify-content: flex-end;
}
.personalBest{
   color: var(--scoreboardSectorTimePersonalBestColor);
}
.totalBest{
   color: var(--scoreboardSectorTimeTotalBestColor);
}
.resultsCell#best_lap_time,
.resultsCell#session_time{
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   border-top:var(--datarow-border-height) solid var(--dataRowTopBorderColor);
}
#session_time.pitState{
   background-color: var(--scoreboardPitStateBkColor);
}
#session_time.fail{
   background-color:var(--scoreboardFailBkColor);
}
#best_lap_time.totalBest{
   color: var(--scoreboardTotalBestInBestLapTextColor);
}
.markerClass{
   position:absolute;
   bottom: 0;
   width: 0%;
   height: 0.15em;
   background:linear-gradient(to left,transparent,var(--markerEndColor) 0.1em, var(--brandColor) 0.4em);
}
.markerAnimate{
   transition-property: width;
   transition-duration: 86400s;
   transition-timing-function: linear;
   width:100%;
}
div#bottomChronoBlock{
   overflow: hidden;
   width: 100%;
   /*position: absolute;
   bottom: 0;*/
}
div#raceInfoBlock{
   height: 6.5em;
   overflow: hidden;
   display: inline-flex;
   width:100%;
   text-shadow:0.05em 0.05em 0.2em var(--textShadowColor);
   /*font-size: 0.8em;*/
   background-color: var(--backColor);

}
div#commentsContainer{
   position: relative;
   flex-direction: column;
   flex-grow:1;
   height: 100%;
   overflow: scroll;
}
body.rentalMode div#raceInfoBlock{
   height:unset;
}
body.rentalMode div#commentsContainer{
   display: none;
}
body.raceMode div#commentsContainer{
   display: flex;
}
div#commentsContainer .commentDataRow{
   width: 100%;
}
div#commentsContainer .commentDataRow div{
   width: 100%;
   padding: 0 0.125em;
}
#commentsTable{
   overflow: scroll;
   flex-grow: 1;
}
#commentTime{
   min-width: 3.5em;
   max-width: 3.5em;
   width: 3.5em;
}
#commentText{
   flex-grow: 1;
}
body.teamRace div#pilotChangesContainer{
   border-left:0.1em solid var(--brandColor);
   min-width: 60%;
   max-width: 60%;
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
}
body.teamRace.rentalMode div#pilotChangesContainer{
   display: none;
}
div#pilotChanges{
   width: 100%;
   flex-grow:1;
   overflow: scroll;
}
div#pilotChangesTable{
   display: table;
   width: 100%;
   margin:0;
}
div#changesHdr{
   display: table-row;
   background-color: var(--teamManagerHeaderBkColor);
   position: sticky;
   top:0;
}

div#changesHdr div{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   padding: 0.25em 0;
   margin: 0;
}

div#changesHdr div.maxSize,div#changesHdr div.midSize,
div.changesDataRow div.maxSize,div.changesDataRow div.midSize{
   display: none;
}

#changeTime{
   width: 4em;
}
#changeNum{
   width: 4.5em;
}
#sessionTime{
  width:5em;
}
#teamNum{
   width: 4em;
}
#teamName{
   width: 16em;
}
#srcPilot,
#dstPilot{
   max-width:16em;
}
.resultsCell#sessionTime{
   text-align:right;
}

div.changesDataRow div{
   display: table-cell;
   max-width: 0px;
   padding:0;
   margin:0;
/*   text-transform: uppercase;*/
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
   padding:0.125em 0.25em;
}
div.changesDataRow #changeArrow{
   width:1.5em;
}
div.changesDataRow #changeArrow img{
   max-width: 100%;
}

div.changesDataRow #changeTime{
   text-align: right;
}
div.changesDataRow #changeNum{
   text-align: right;
   padding: 0;
   margin:0;
}

div.changesDataRow #changeNum{
   padding-right: 1em;
}
div.changesDataRow #teamNum{
   text-align: center;
}

.raceInfoHdr{
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   padding: 0.25em 0.5em;
}

div#copyright{
   color:var(--copyrightTextColor);
   text-align: right;
   padding-right: 0.2em;
   background-color: var(--copyrightBackColor);
   font-size: 0.9em;
   text-transform: none;
   z-index: 100;
}



iframe#runqueue{
   display: none;
   border: none;
   overflow: hidden;
   width:30%;
}


@media (max-aspect-ratio: 8/10)
{
   div .runInfoContainer  div#run_name{
      flex:1;
   }
   div .runInfoContainer  div#race_name{
      display: none;
   }
   div#chronoBlock{
      flex-grow:1;
   }
   div#advertBlock{
      display: none;
   }
   body.application div#advertBlock{
      display: none;
      /* height: auto;*/
      width: auto;
   }
   body.application.raceMode div#advertBlock{
      display: none;
   }

   .resultsCell .innerNameSectorsCell{
      align-items: flex-start;
    /*  padding-top:0.1em;*/
      flex-direction: column;
   }


   body{
      --lapsDisplay:none;
      --maxLastSectorNDisplay:none;
      --theorLapDisplay:none;
      --diffDisplay:none;
      --gapDisplay:none;
      --sectorsSetDisaply:inline-flex;
      --kartTypeDisplay:none;
   }
   body.teamRace{
      --lapsDisplay:flex;
      --teamDisplay:flex;
   /*   --nameDisplay:none;*/
   }
   #resultsTable.sortByPos{
      --bestLapTimeDisplay:none;
      --lastLapTimeDisplay:flex;
      --diffDisplay: flex;
   }
   #resultsTable.sortByPos .resultsCell#last_lap_time_1{
      background-color: var(--brandColor);
      color:var(--textOnBrandColor);
      color:white;
   }
}

@media (min-aspect-ratio: 8/10)
{
   body{
      font-size: 2.2vh;
      --dataRowHeight: 3vh;
      --headerRowHeight: 5vh;
      --posWidth: 3vh;
      --numWidth: 5vh;
      --lapTimeWidth: 10vh;
      --lapTimePadding: 0.5vh;
      --lapsPadding: 2vh;
      --lapsCountWidth: 8vh;
      --pitsCountWidth: 8vh;
      --diffTimeWidth: 8vh;
      --kartTypeWidth: 12vh;
      --sectorTimeWidth:9vh;
   }


   .headerRow{
      font-size:0.7em;
   }
   .dataRow{

   }
   body.iframe{
      font-size:1.9vh;
   }
   .advertBlock{
      display: none;
   }

   div#changesHdr div.minSize,
   div.changesDataRow div.minSize{
      display: none;
   }

   div#changesHdr div.midSize,
   div.changesDataRow div.midSize{
      display: table-cell;
   }
   body{
      --maxLastSectorNDisplay:none;
   }
}
@media (min-aspect-ratio:13/9)
{
   body{
      flex-direction: row;
   }
   iframe#runqueue{
      display: block;
      border: none;
      overflow: hidden;
      border-left: 0.2em solid var(--brandColor);
   }

   div#changesHdr div.maxSize,
   div.changesDataRow div.maxSize{
      display: table-cell;
   }
   .advertBlock{
      display: flex;
      flex-direction: column;
      width:33%;
      /*  height: 100%;*/
      border-left:0.2em solid var(--brandColor);
   }
   body{
      --maxLastSectorNDisplay:flex;
   }
   body.raceMode{
      --bestSectorNDisplay:flex;
      --lastLapsTimesDisplay:flex;
   }
   body.teamRace{
      --bestSectorNDisplay:none;
      --teamDisplay:flex;
      --sessionTimeDisplay:flex;
      --maxLastSectorNDisplay:none;
      --avgSessionLapDisplay:flex;
      --diffDisplay:flex;
      --theorLapDisplay:none;
      --pitsCountDisplay: flex;
      --pitTimeDisplay: flex;
   }
   
   div#commentsContainer .commentDataRow{
/*      width: 33%;*/
   }
   div#commentsContainer #commentsTable{
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
   }

}



@media (min-aspect-ratio:18/9)
{
   body{
      font-size: 3vh;
      --dataRowHeight: 4vh;
      --headerRowHeight: 7vh;
      --posWidth: 4vh;
      --numWidth: 8vh;
      --lapTimeWidth: 15vh;
      --lapTimePadding: 1vh;
      --lapsPadding: 1vw;
      --lapsCountWidth: 10vh;
      --pitsCountWidth: 10vh;
      --diffTimeWidth: 12vh;
      --kartTypeWidth: 12vh;
      --sectorTimeWidth:15vh;
   }
}

@media (orientation:landscape)
{
   body.raceMode.teamRace{
      --teamDisplay:flex;
   }
}



@keyframes fadeOut {
   to {opacity:0;}
}

@keyframes blink {
   from { background-color: white; }
}
.blink {
   animation: blink 1s ; /* IE 10+ */
}

@keyframes  markerProgress{
   from{width:0;opacity:1.0;}
   to{width:100%;}
}

.markerMoving{
   animation: markerProgress 1s;
}
/*
popup competitor laps
*/
div.competitorLaps{
   position:absolute;
   background-color:var(--lapsBkColor);
   color:var(--textColor);
   text-shadow:0.05em 0.05em 0.3em var(--textShadowColor);
   white-space:nowrap;
   font-size:1em;
   display: none;
   right:0;
   top:2.2em;
   bottom:0;
   overflow: scroll;
   box-shadow: 0em 0em 1.5em var(--textShadowColor);
   z-index: 1000000;
}
div.competitorLaps.visible{
   display: flex;
   flex-direction: column;
}
div.competitorLapsHeader{
   /*width:100%;*/
   display:flex;
   flex-direction:row;
   padding:0.2em;
   min-width: 15em;
}
div#competitorNum{
   background-color: var(--brandColor);
   color:var(--textOnBrandColor);
   width: 2em;
   text-align: center;
}
div.competitorLapsHeader div{
   padding:0.4em;
}
div.competitorLapsHeader #competitorNameMarker{
   flex-grow:1;
   position: relative;
   padding: unset;
   overflow: hidden;
}
div.competitorLapsHeader #competitorName{
   /*width: 100%;
   height: 100%;*/
   position: absolute;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left;
}
div.competitorLapsHeader .competitorMarkerClass{
   position: absolute;
   bottom: 0;
   width: 0%;
   padding: unset;
   background:linear-gradient(to left,transparent,var(--markerEndColor) 0.1em, var(--brandColor) 0.4em);
   height: 0.2em;
}

div.competitorSummary{
   background-color: var(--backColor);
   display: flex;
   flex-wrap: wrap;
}
div.competitorSummary .competitorSummaryItem{
   white-space: nowrap;
   display:flex;
}
div.competitorSummary .competitorSummaryItem div{
   padding:0.2em;
/*   float:left;*/
}

div.competitorSummary .summaryValue{
   background-color:var(--competitorSummaryBkColor);
   color:var(--competitorSummaryTextColor);
   padding-right:0.5em;
   margin:0.2em;
   min-width: 2em;
   text-align: center;
   text-shadow:0.02em 0.02em 0.08em var(--textShadowColor);
}
div.competitorSummary .summaryValue#total_time{
   text-align: right;
}
div.lapsContent{
   flex-grow: 1;
   overflow: scroll;
}
div.lapsDataTable{
   display:table;
   width:100%;
}
div.lapsDataHeader{
   display:table-row;
   background-color:var(--lapsHeaderBkColor);
}
div.lapsDataHeader .lapsDataHeaderCell{
   display:table-cell;
   text-align:center;
   background-color:var(--lapsHeaderBkColor);
}
div.lapsDataHeader #lapNum{
   width:4.5em;
}
div.lapsDataHeader #lapTime{
}
div.lapsDataHeader #lapPos{
   width:2.5em;
}
#lapPos{
   display: none;
}
div.lapsDataHeader .timeValue{
   min-width: 4.8em;
}
div.lapsDataRow{
   display:table-row;
   background-color:var(--lapsDataRowBkColor);
}
div.lapsDataRow div{
   border-top:var(--datarow-border-height) solid var(--dataRowTopBorderColor);
   padding-bottom:0.1em;
   position: relative;
}
div.lapsDataCell{
   display:table-cell;
   max-width: 0px;
}
div.lapsDataCell.timeValue,
div.lapsDataCell.posValue,
div.lapsDataCell.lapNumValue{
   text-align:right;
   padding-right:0.2em;
}
div#closeIcon{
   cursor:pointer;
   height:1em;
   width: 1em;
   background-repeat: no-repeat;
   background: var(--closeButtonSvg);
   background-size: 100% 100%;
}
div.lapsDataCell#lapNum.green{
   background-color: var(--greenFlagBkColor);
}
div.lapsDataCell#lapNum.red{
   background-color: var(--redFlagBkColor);
}
div.lapsDataCell#lapNum.yellow{
   background-color: var(--yellowFlagBkColor);
}
div.lapsDataCell#lapNum.warmup{
   background-color: var(--warmupFlagBkColor);
}
div.lapsDataCell#lapNum.finish{
   background: url("/Images/icons/finish_pos.png");
   background-size: 100% 100%;
}
div.lapsDataRow.green{
   background-color: var(--greenFlagBkColor);
}
div.lapsDataRow.warmup{
   background-color: var(--warmupFlagBkColor);
}
div.lapsDataRow.rejectedLap,
div.lapsDataRow.deletedLap{
   background-color: var(--invalidLapBkColor);
   color:var(--invalidLapTextColor);
}
div.lapsDataRow.deletedLap div:before{
   content: " ";
   position: absolute;
   padding: 0;
   margin: 0;
   margin-left: 0.5em;
   margin-right: 1em;
   top:50%;
   left: 0;
   border-top:0.2em solid var(--deletedLapStrokeColor);
   width: 100%;
}


body.monitor .navBar{
   display: none;
}


body.raceMode #advertBlock{
   visibility: hidden;
   position: fixed;
}
.visibleMarker{
   visibility: inherit;
}
#trackContainer svg{
   max-width: 100%;
   max-height: 45vh;
   width:100%;
   height:100%;
}


.trackKart{
   display: none;
   position: absolute;
   width:4em;
   height:4em;
   offset-rotate:auto;
   background: url("/Images/icons/track_kart.svg");
   background-size:contain;
}

@keyframes  moveTrackMarker{
   from {offset-distance:0;}
   to{offset-distance:100%;}
}
@keyframes  moveTrackKart{
   from {offset-distance:0;}
   to{offset-distance:100%;}
}

body.noweather #advertBlock .advert.weather{
   display: none;
}
body.norecords #advertBlock .advert.records{
   display: none;
}

.recordsDiv{
   border-right: 0.05em solid var(--brandColor);
}
.recordsCaption,.recordRowCell
{
   border-bottom:0.05em solid var(--brandColor);
}

#changeArrow{
   width:2em;
}
#pilotChangesTable,#commentsTable{
   font-size:0.8em;
}
#changeArrow img{
   max-width:100%;
   height:1em;
}
.fail{
   background-color: var(--scoreboardFailBkColor);
}