@font-face {
   font-family: "roboto condensed";
   src: url("fonts/RobotoCondensed-Regular.ttf");
}
body{
  font-family: "roboto condensed";
  margin: 0;
  padding: 0;
  left:0;
  top:0;
  overflow: hidden;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: var(--textColor);
  background-color: var(--backColor);
  user-select: none;
}
.navBar{
   background-color: var(--backColor);
}

#selectCarHeader #homeButtonSvg{
   background-image: var(--homeButtonSvg_white);
}
#selectCarHeader #currentButtonSvg{
   background-image: var(--currentButtonSvg_white);
}
#selectCarHeader #archiveButtonSvg{
   background-image: var(--archiveButtonSvg_white);
}
div#rotateMessage{
  display: none;
}
div#dashboardContainer{
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--backColor);
  text-shadow: none;
}
div#dashboardLayout{
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}
div#dashBoardRow{
  display: table-row;
}
div#dashboardLeft{
  font-size: 7vh;
  height: 100%;
  flex-grow: 1;
  position: relative;
  vertical-align: top;
  display: flex;
  flex-direction: column;
}
div#dashboardRight{
  position: relative;
  padding-left: 1em;
  display: flex;
  flex-direction: column;
}
div#competitorHeaderContainer{
  width: 100%;
  position: relative;
  height: 1.5em;
}
div#competitorHeader{
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  height: 1.5em;
  width: 100%;
  position: absolute;

}
a#competitorNum{
  background-color: var(--brandColor);
  color:var(--textOnBrandColor);
  min-width:2.5em;
  width: 2.5em;
  padding: 0;

  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
div#competitorName{
  height: 100%;
  flex-grow: 1;
  text-align: left;
  padding-left: 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

div.tbl{
   display: table;
   height: 100%;
   width: 100%;
}
div.tr{
  display: table-row;
}
div.tr div{
  display: table-cell;
}
div.lapTimeContainer{
   flex-grow: 1;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

div#lastLapTime{
  font-size: 27vh;
  text-align: center;
  vertical-align: middle;
  padding-top:0.1em;
  padding-bottom: 0.1em;
}
div#sectorsTable{
  display: table;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  border-spacing: 0.25em 0;
}

.sectorValue{
  vertical-align: middle;
  font-size: 10vh;
  height: 15vh;
  background-color: var(--sectorValueBkColor);
}
div#sectorsNames div{
  padding-top: 1vh;
  font-size: 5vh;
  padding-bottom: 1vh;
}
.sectorValue.worseResult{
  background-color: var(--sectorValueWorseBkColor);
}
.sectorValue.personalBest{
  background-color: var(--sectorValuePersonalBestBkColor);
}
.sectorValue.totalBest{
  background-color: var(--sectorValueTotalBestBkColor);
}
a.noDecor{
   text-decoration: none;
   color:var(--goBackButtonTextColor);
}
div#bottomButtons{
  position: relative;
  display: flex;
  justify-content:space-between;
}
a#volumeBtn{
/*  position: absolute;
  right: 0;
  top:0;*/
  height: 100%;
  width: 5vh;
  background: url("/Images/icons/mute.svg") no-repeat;
  background-size: contain;
}
a#volumeBtn.loud{
  background: url("/Images/icons/loud.svg") no-repeat;
}
a#goBackButton{
  display: flex;
  align-items: center;
  text-transform: uppercase;
  max-width: 5em;
  padding: 0;
  padding-left:0.25em;
  font-size: 4.5vh;
  color: var(--goBackButtonTextColor);
  background: url("/Images/icons/backbutton.svg") no-repeat;
  background-size:cover;
  font-weight: bold;
  text-shadow: none;
  flex:1;
}

div#logosHdr{
  display: table;
  width: 100%;
  text-align: center;
}

div#logosHdr img,
div.dashLogo>*{
  max-height: 20vh;
  max-width: 100%;
  object-fit: contain;
}
div.dashLogo{
   width:50%;
   display: flex;
   vertical-align: middle;
}

div#run_param{
  height: 18vh;
  font-size: 12vh;
  background-color: var(--runTimeBackgroundColor);
  color:var(--runTimeTextColor);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:1vh;
  margin-right: 0vh;
}
div#run_param.finished{
   background: url("/Images/icons/finishflag.png");
   background-size: 100% 100%;
   color: var(--finishedRunTextColor);
   text-shadow: inherit;
}
div#bestLapContainer{
  margin-top: 1vh;
  margin-right: 0vh;
  min-height:5em;
}
div#bestLapDiv{
  position: absolute;
  height: 100%;
  text-transform: uppercase;
  text-align: center;
  background-color: var(--brandColor);
  color:var(--textOnBrandColor);
  width:100%;
  display: flex;
  flex-direction: column;

}
div#bestLapLabel{
  font-size: 5vh;
  margin-top: 1vh;
}
div#bestLapTime{
font-size: 13vh;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
div.td{
   display: table-cell;
}
div.td.centerV{
   vertical-align: middle;
}
div#currentPositionBlock{
  display: flex;
  flex-direction: row;
  background-color: var(--dashCurrentPositionBackgroundColor);
  color: var(--dashCurrentPositionTextColor);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  height: 20vh;
  min-height:20vh;
  margin-top: 1vh;
}
div#currentPosLabel{
  font-size:5vh;
  white-space: normal;
  text-align: right;
  flex-grow: 1;
  margin-right: 1vh;
}
div#currentPos{
  font-size: 15vh;
  font-weight: bold;
  width: 30vh;
  height: 20vh;
  min-height:20vh;
  color:var(--dashCurrentPositionValueColor);
  text-align: center;
  background-color: var(--dashCurrentPositionValueBkColor);
  display: flex;
  justify-content: center;
  align-items: center;
}


@media (max-aspect-ratio:17/10)
{
   div#dashboardRight{
      display: none;
   }
   div#gobackButton{
     font-size: 4vh;
     width: 35vw;
   }
   div#lastLapTime{
      font-size: 25vw;
   }
   div.sectorValue{
      font-size:8vw;
   }
}
@media (min-aspect-ratio:19/10)
{
   div#lastLapTime{
      font-size: 33vh;
   }
}

@media (orientation: portrait)
{
  div#dashboardContainer{
    display: none;
  }
  div#rotateMessage{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  div#imgAnim{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img#rotatePhone{
    width: 100%;
  }
  @keyframes rotate_phone {
    33%{
      transform: rotate(0deg);
    }
    66%{
      transform: rotate(-90deg);
    }
    100%{
      transform: rotate(-90deg);
    }
  }
  img#rotatePhone {
    animation: rotate_phone 3s infinite; /* IE 10+ */
  }

}

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

div.btn{
  width: 100%;
  display: inline-block;
  text-align: center;
}
a.btnLink{
  background-color: var(--brandColor);
  color:var(--textOnBrandColor);
  width: 16em;
  text-align: center;
  padding: 0.75em 0;
  text-decoration: none;

  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}