@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff"), url("../fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 200; }

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300; }

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400; }

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500; }

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700; }


body{
    margin:0;
    padding: 0;
    font-family:'Roboto','tahoma', 'serif', 'arial';
}

.resultsCover h1{
    color: #fff;
    text-align: center;
    font-size: 56pt;
    padding: 10px;
    margin: 0;
}

#video-bg {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
#video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
  #video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  #video-bg > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}


.resultsCover{
   display: block;
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
    border-radius: 10px;
    background-color: rgba(1, 17, 37, 0.92);
    overflow: hidden;
}


#resultsCover {
    right:auto;
    width: 55%;
}

#finishCover {
    left:auto;
    width: 40%;
}


.full{
    left: 30px !important;
    right: 30px !important;
    width: auto !important;
}

#connectionText {
    font-size: 45pt;
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

#connectionSpin {
    color: #fff;
    text-align: center;
    font-size: 72pt;
}
.resultsCover #results , .resultsCover #finish {
    top: 140px;
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;

    overflow: hidden;
 
}

ul{
   padding: 0;
    margin: 0;
list-style: none;
}

li {
    font-size: 32pt;
     color: #fff;
    letter-spacing: -0.5pt;
    display: table-row;
    width: 100%;
}

li>div{border-bottom: 4px solid rgba(255, 255, 255, 0.3)}

.competitorPosition{
  display: table-cell;
  vertical-align: middle;
  padding: 20px 5px;
  overflow: hidden; 
}
.competitorNumber {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 5px;
    overflow: hidden;
    text-align: center;
    width: 1%;
}
.competitorName{
  display: table-cell;
  vertical-align: middle;
  padding: 20px 5px;
  overflow: hidden;
}

.competitorTime{
  display: table-cell;
  vertical-align: middle;
  padding: 20px 5px;
  text-align: right;
}

.number {
    display: inline-block;
    float: right;
    font-size: 29pt;
    font-weight: bold;
    background-color: #fff;
    color: #000;
    padding: 3px;
    border-radius: 10px;
}

.time{
  display: inline-block;
  font-size: 29pt;
  font-weight: bold;
  background-color: #000;
  padding: 3px;
  border-radius: 10px;
  float: right;
}

.position {
    background-color: #000000;
    text-align: center;
    color: #FFF;
}

#settings{
  color:#fff;
  position: absolute;
  font-size:16pt;
  left: 5px;
  top:5px;
  cursor:pointer;
  display: none;

}

body:hover #settings{
    display: block;
}
body:hover #settings:hover{
    color:#f00;
}

div#setupBox {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background-color: #F1F1F1;
    border-radius: 2px;
    padding: 10px;
}

div#setupBox h1{
  color:#000;
  font-size: 18pt;
}

div#groupsList {
    padding: 4px;
    border: 2px solid #ccc;
    background-color: #fff;
    overflow-y: scroll;
    height: 138px;
}

#groupName{
  white-space: nowrap;
}