body{
 background-color:#162236;
}
body::-webkit-scrollbar{
  display: none;
}

#toolbar{
 font-size:1em;
 text-align:center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color:#0D1B2A;
 padding:15px 0;
 z-index: 100;
 color:#E6F2FF;
}
#toolbar button{
 margin: 5px;
 padding: 7px 0;
 width:150px;
 cursor: pointer;
 background-color:#1E90FF;
 color: #162236;
 border: none;
 border-radius: 2px;
 cursor: pointer;
 transition: background-color 0.3s;
}
#toolbar button:hover {
 background-color: #00CED1;
 color:#162236;
}
#toolbar button#toggleBtn{
 background-color: #FF8C42;
 color:#162236;
}
#toolbar button#toggleBtn:hover{
 background-color: #00CED1;
 color:#162236;
}

#toolbar .time{
 font-size:0.8em;
 margin-left:5px;
}
#toolbar #current{
 margin-left:10px;
}

#toolbar i.fa-solid{
 margin-right:0.5em;
}
#toolbar i.fa-forward{
 margin-right:0;
 margin-left:0.5em;
}




.flexbox {
 padding-top:75px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.flexbox .btn{
 cursor: pointer;
 padding: 10px 5px;
 //flex:auto;
}
.flexbox video{
 width:100%;
}




@media (max-width: 1280px) {
 #toolbar{
  text-align:left;
  //font-size:1em;
  //text-align:center;
  position: static;
 }
 #toolbar button{
  padding: 10px 0;
  margin: 5px 0px 5px 15px;
  width:115px;
 }


 .flexbox {
  padding-top:20px;
  display: block;
 }


}