* { box-sizing: border-box; 
      margin: 0;
      padding: 0;
      overflow-x:hidden;
      overflow-y:hidden;}
       	                      
  ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
     width: 0.6vw;  background: rgba(255,255,255,0); }
  ::-webkit-scrollbar-button { display:none; }
  ::-webkit-scrollbar-track-piece {  display:none; }
  ::-webkit-scrollbar-corner { display:none; }
  ::-webkit-resizer { display: none;  }
  ::-webkit-scrollbar-thumb { 
    border-radius: 0.3vw;
	  background-color:  #00b1eb; min-height: 50px;}
  ::-webkit-scrollbar-track {      }  
 
  html, body { 
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Helvetica Neue', Arial, sans-serif;
    font-size: 3.8vw; line-height: 1.125;
    font-weight: 500;  color:#ffffff; }  
    
  button { 
    display:flex; background-color: transparent;
    border:0px transparent solid; }
    
  /*                                     */
  #video {
    display:block; position:fixed; z-index:10; 
    width:100%; aspect-ratio: 16/9;   }  
  
  #allCtrls { 
    display:block; position:fixed;  z-index:20;
    left: 0; top:0;
    width:100vw; height:56vw; }
    
  
  /*                                          */
  #vidCtrl1 {  
    display:grid; position:absolute; z-index:20; 
    background-color: transparent;  visibility:visible;
    grid-template-columns:  5vw 8vw 5vw;
    grid-template-rows: 8vw;
    justify-items:center; align-items:center;
    justify-content:center; align-content:center;
    column-gap:2vw; row-gap:0px;
    left: 39vw; top: 20vw; width:22vw; height: 8vw;  }
  
  #btn_backward img  { display:none; width:4vw; height:4vw; }
  #btn_playpause     { display:block; width:8vw; height:8vw; }
  #btn_play          { display:block; width:8vw; height:8vw; }
  #btn_pause         { display:none ; width:8vw; height:8vw; }
  #btn_forward img   { display:none; width:4vw; height:4vw; }
  
  /*                                          */
  #vidCtrl2 {    
    display:none; position:absolute; z-index:20;  
    background-color:rgba(47,79,79,0.65); visibility:visible;
    grid-template-columns: 1vw auto 2vw  1fr 2vw auto 1vw ;
    grid-template-rows: 2vw;
    justify-items:center; align-items:center;
    column-gap:0vw; row-gap:0px;
    left: 0vw; bottom: 4vw; width:100vw; height: 2vw;  }

    #currentTmr { 
      grid-column: 2 ; grid-row: 1; justify-self: center ;
      font-size:1.6vw; line-height: 2vw; 
      color: #ffffff; cursor: none ;}
    
    #durationTmr {
      grid-column: 6 ; grid-row: 1; justify-self: center; 
      font-size:1.6vw; line-height: 2vw; 
      color: #ffffff; cursor: none ;}
    
    #video_slider {
      grid-column: 4 ; grid-row: 1 ; align-self:center;
      position:relative; overflow:visible;  
      width:100%; height:2vw; }
      
    #video_sliderBckgrnd { 
      display:block; position:absolute;
      left:0px; top:0.7vw;
      width:100%; height:0.6vw;
      background-clip: content-box;
      background-color:#ffffff; 
      border-radius: 0.3vw;  }
       
    #video_sliderBar {  
      display:block; position:absolute;
      left:0px; top:0.7vw;
      width:0px; height:0.6vw;
      background-clip: content-box;
      background-color:#00b1eb;                                    
      border-radius: 0.3vw;  }
      
    #video_sliderBtn{
      display:block; position:absolute; 
      left:0px; top: 0.3vw;
      width:1.4vw; height:1.4vw; 
      border-radius:50%; background-color:#00b1eb; 
      transform: translate(-0.7vw, 0);
      transition-duration: 200ms;
      transition-property: left; } 
     
    /*                                           */
    #vidCtrl3 {  
      display: none; position:absolute;  z-index:20; 
      background-color:rgba(47,79,79,0.65);  visibility:visible;
      grid-template-columns: 1vw 1fr 23vw  5vw 6vw 1vw ;
      grid-template-rows: 4vw;
      justify-content:stretch; align-content: stretch;
      justify-items:center; align-items:center;
      column-gap:0vw; row-gap:0px;
      left: 0vw; bottom: 0vw; width:100vw; height: 4vw; }
     
    #video_txt { 
      grid-column:2 ; grid-row: 1;
      justify-self: start; 
      font-size:2vw; line-height: 2vw; 
      color: #ffffff; cursor: none;}
 
    #btn_download img    { grid-column:4 ; grid-row: 1; display:block; width:3vw; height:3vw; }
    #btnContrFullscreen   { grid-column:5 ; grid-row: 1; display:block; width: 3.6vw; height:3vw;}
    #btn_fullscreen      { display:block;  width:3.6vw; height:3vw; }
    #btn_closefullscreen { display:none;   width:3.6vw; height:3vw; }
  
    #container_volume { 
      grid-column:3 ; grid-row: 1;  
      display:grid;
      grid-template-columns: auto 3vw 1vw 18vw 1vw;
      grid-template-rows: 1vw; 
      width:23vw; height:3vw; overflow:hidden;  }
    
    #offset_speaker {
     transition-duration: 400ms;
     transition-property:width;} 
 
    .showVolumeBar { width:0vw; }
    .hideVolumeBar { width:20vw; } 
     
    #btn_speaker {  
      grid-column: 2 ; grid-row:1 ; 
      width:3vw; height:3vw; } 
    
    #btn_speaker img { 
      display:block; width:3vw; height:3vw; }
 
    #volume_slider { 
      grid-column: 4 ; grid-row: 1 ;
      display:block; position:relative; overflow:visible;
      width:18vw; height:3vw;  
       } 
    
    #volume_sliderBckgrnd {
      display:block; position:absolute;
      left: 0vw; top:1.25vw; 
      width:18vw; height:0.5vw; 
      background-color:#ffffff; 
      border-radius:0.25vw; }  
    
    #volume_sliderBar {   
      display:block; position:absolute;
      left: 0vw; top:1.25vw;  
      width: 18vw; height:0.5vw; 
      background-color:#00b1eb; 
      border-radius: 0.25vw; 
      transition-duration: 250ms;
      transition-property: left; } 
  
    #volume_sliderBtn{  
      display:block; position:absolute; 
      left: 18vw; top: 0.4vw; 
      width:0.7vw; height:2.2vw;
      background-color:#00b1eb; 
      border-radius: 0.3vw ; 
      transform: translate(-0.35vw, 0);
      transition-duration: 250ms;
      transition-property: left; } 
     
    #vidCtrl4 {  
      display: none; position:absolute;  z-index:20;  
      visibility:visible;
      background-color:rgba(47,79,79,0.65);  visibility:visible;
      right: 3vw; top: 3vw; border-radius:0.8vw;
      width:5vw; height: 5vw; }
    
    #btn_close { 
      width:4vw; height:4vw; 
      margin: 0.5vw 0.5vw 0.5vw 0.5vw; }