/*#videos{     /*id  formating*/
   /* display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}*/

/*.video-player{   /* class formating*/
  /*  background-color: rgb(37, 241, 10);
    width: 100%;
    height: 300 px;

}*/
#user-1{
  /*display:none;*/
  width :10%;
  Height: 10%;
  float:left
}
#user-2{
  /*display:none;*/
  width :60%;
  Height: 60%;
  margin-left: 1%;
  float:left;
  border: 5px solid rgb(103, 248, 19)
}

#user-3{
  display:none;
  width :60%;
  Height: 60%;
  margin-left: 1%;
  float:left;
  border: 5px solid rgb(245, 52, 27);
  
}

@media only screen  and (max-width:700px){
  #user-1{
    /*display:none;*/
    width :10%;
    Height: 10%;
    float:left
  }
  #user-2{
    /*display:none;*/
    width :100%;
    Height: 100%;
    margin-left: 1%;
    float:left;
    border: 5px solid rgb(103, 248, 19)
  }
  
  
  #user-3{
    /*display:none;*/
    width :100%;
    Height: 100%;
    margin-left: 10%;


    float:left;
   
    
    border: 5px solid rgb(245, 52, 27);
    
  } 
  
 /* #secondColumn{
display: none;
position: ;
    bottom: 10px;
    right: 10px;
  }*/
 
 /* #video3{
width: 100%;
position: fixed;
    bottom: 0;
  left: 10px;

  }*/
  
  
}
#redTeam{
  color: red;
  font-weight: 900;
font:  italic 30px arial 
}
#metricTonsLabel{
  color: rgb(8, 59, 224);
  font-weight: 980;
font:  italic 20px arial;

}
#positionLabel{
  color: rgb(8, 59, 224);
  font-weight: 980;
font:  italic 20px arial;

}
#metricTons{
  color: rgb(8, 59, 224);
  font-weight: 980;
font:  italic 20px arial
}

#position{
  color: rgb(8, 59, 224);
  font-weight: 980;
font:  italic 20px arial
}
#blueTeam{
  color: blue;
  font-weight: 980;
font:  italic 30px arial 
}
#table3{
  border: none;
  
}
#table4 {
  border:none;
  /*display: flex;*/
      justify-content: center;;
}

#table4 table{
  border: none ;
  border-collapse: collapse;
}

#table4 td{
  border:none;
  align-items: center;
   /*line-height:50%;*/
}
#table4 tr{
  border:none;
  align-items: center;
  
}
#tabl4 th{
  height:100%;
  border:none;
}
#table2 {
  border:none;
  /*display: flex;*/
      justify-content: center;;
}
#table2 table{
  border:none;
  width:100%;
  height:100%;
  align-items: center;
  text-align:  center;
}
#table2 th{
  height:100%;
  border:none;
}
#table2 tr{
  border:none;
  align-items: center;
  
}
#table2 td{
  border:none;
  align-items: center;
   /*line-height:50%;*/
}
#pathUp{
  height: 200px;
  width: 50%;

}
#ButtonUp{
  margin-left: 0;
 /* float:left;*/
}

#ButtonLeft{
  margin-left: 0%;
 /* float:right;*/
}

#ButtonRight{
  margin-left: 50px;
 /* float:left;*/
}

#ButtonDown{
  margin-left: 0;
 /* float:left;*/
}

#time{
  color: black;
  font-weight: 980;
font:  italic 30px arial 
}
#timer{
  color: black;
  font-weight: 980;
font:  italic 30px arial

}
#T1{
  color: red;
  font-weight: 980;
font:  italic 30px arial
}
#T2{
  color: blue;
  font-weight: 980;
font:  italic 30px arial

}


#videos{
 width: 100%;
 /*height:50%;*/
 float: left;
}

#video1{
  width: 100%;
 float: left;
 }
.oddScore{
  color: red;
  font-weight: 980;
font:  italic 30px arial
}

.evenScore{
  color: blue;
  font-weight: 980;
font:  italic 30px arial
}  
/*#video-player1{
  /*display:none;*/
  /*width :10%;
  Height: 10%;
  float: left
}*/
.no_select{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */


}

.sequencedDisplay{
position:relative;

}
button {
    background-color: rgb(240, 235, 240);/*rgb(247, 0, 255);*/
    width: 100px;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(21, 15, 36);
    color: rgb(247, 0, 255);
    cursor: pointer;
    margin: 1%;
    /*display: block;*/

  }

  
  @media (hover:hover){
    button:hover{
      background-color:rgb(238, 175, 186)
    }
  }
  button:active{background-color:greenyellow;
  content:"ON" }


/*html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }*/
  .center{

    text-align: center;
  }