.video-course-container{
  	   border: solid thin transparent;
  	   height: 480px;
  	   width:100%;
  	   display: flex;
  	   flex-direction: row;
  	   margin: 25px auto;
	   background-color: rgb(0, 0, 0, 0.8);
     }
   
   
    .video-player{
  	   border: solid thin transparent;
  	   height: 470px;
       width: 65%;
  	   margin: 0px 16px 0px auto;
  	  
    }  

 #videoPlayer{
  	 border: solid thin transparent;
  	 height: 100%;
  	 width: 100%;
   }
   
 .list {
       border: solid thin #ccc;
       margin: -11px auto;
       position: relative;
       top: 14px;
       font-size: 15px;
       line-height: 1em;
       padding: 5px 3px;
	   cursor: pointer;
   }

   
 #courses.courses{
       border: solid thin #ccc;
       margin: -11px auto;
       position: relative;
       top: 14px;
       font-size: 15px;
       line-height: 1em;
       padding: 5px 3px;
	   cursor: pointer;
   }


/* -------------------------------------------------------------------------- */


   
   
   #course-content{
	   border: solid thin #ccc;
	   display: block;
       padding: 11px 3px;
	   
   }

   #close-list{
       font-weight: bold;
       //border: solid thin black;
       position: relative;
       left: 164px;
       bottom: 8px;
       font-size: 22px;
   }
/* -------------------------------------------------------------------------- */


#play-list.play-list{
  	   border: solid thin #ccc;
  	   height: 470px;
  	   width:25%;
  	   right: 0px;
  	   position: relative;
	   overflow: auto;
  	   //background-color: rgb(255 254 254 / 80%);
	   color: #f2f2f2;
    }


/* --------------------------------controller------------------------------------------ */





  




 .video-event {
    height: 70px;
    width: 70px;
    //border: solid 1px red;
    position: absolute;
    left: 38%;
    bottom: 33%;
	border-radius: 50px;
   }



     #stop{
	   border: solid 1px #d8d167;	   
	   bottom	 19%; 
	   display: none;
	   background-color: rgb(0, 0, 0, 0.2);
   }
   
   #start{
	   border: solid 1px #d8d167;
	   bottom:	 33%; 
	   display: none;
	   background-color: rgb(0, 0, 0, 0.2);
   }


    #start.video-event i.fa.fa-play{   
	   font-size: 27px;
       padding: 20px 28px;
	   color: #fff;
   }
   
   #stop.video-event i.fa.fa-pause{
      font-size: 27px;
       padding: 22px 24px;
	   color: #fff;
   }
 
 
   #controller{
	   border: solid thin transparent;
	   color: #f1f1f1;
	   height: 50px;
	   width: 100%;
	   position: relative;
	   bottom: 58px;
	   background-color: RGB(0, 0, 0, 0.4);
	   visibility: hidden;
   }
   
    
	#pause-play{
	   border: solid thin transparent;
       width: 50px;
       height: 50px;
       position: absolute;
       left: 52px;
	   bottom: -9px;
   }
	
	
	
	 span#pause-play i.fa.fa-play{ 
	 
	   font-size: 16px;
       padding: 15px 2px 2px 16px;
	   //color: green;
	   display : block;
   }
      
 
  span#pause-play i.fa.fa-pause{   
	   font-size: 21px;
       padding: 12px 2px 2px 16px;
	   color: red;
	   border: solid thin transparent;
	   display : none;
   }
 
 
  .controller-action {
    border: solid thin transparent;
    position: absolute;
    height: 49px;
    width: 49px;
    margin: 0px 31px;
    left: -32px;
}
 
 
   #rewind.rewind{
	   border: solid thin transparent;
	   height: 49px;
	   width: 49px;	
       position: absolute;	
       bottom: -9px;	   
   }
   
     #fast-forward.fast-forward{
	   border: solid thin transparent;
	   height: 49px;
	   width: 49px;
	   position: absolute;
	   left: 105px;
	   bottom: -9px;
   }
 
    .ff-rr{
	   position: relative;
      top: 10px;
      left: 10px;
	    
   }
 
  .right{
	   border: solid thin transparent;
	   height: 49px;
	   width: 49px;
	   position: absolute;
	   right: 116px;
       bottom: -7px;
   }
   
   
    #volume.volume{
	   border: solid thin transparent;	   
	   left: 159px;   
   }
   
   #cogwheel.cogwheel{
	   border: solid thin transparent;	   
	   right: 66px;   
   }   
   

 .wm-vl-nm{
	  position: relative;
      top: 14px;
      left: 16px;
	  font-size: 22px;
	    
   }
   


  #volume-rate{
      border: solid thin transparent;
      width: 19px;
      height: 180px;
      bottom: 50px;
      position: absolute;
      z-index: 1;
      display: block;
      right: 15px;
      font-size: 12px;
      line-height: 3px;
      padding: 1px 4px;
	  background-color: RGB(0, 0, 0, 0.7);
	  border-radius: 3px;
	  display: none;
	  
   }
  

      span#volume-rate p {
          margin-top: 0;
          margin-bottom: 1rem;
          border: solid thin transparent;
          padding: 4px 2px;
          line-height: 2px;
          margin: 6px 1px;
          cursor: pointer;
      }
	  
	  
	   #volume-adjuster{
	      appearance: slider-vertical;
	      width: 8px;
	      height: 175px;
	      padding: 0 5px;
      }

    #volume-counter{
       position: absolute;
       bottom: -1px;
       left: 208px;
       border: solid thin transparent;
       padding: 0px 8px;
       background-color: rgb(0,0,0, 0.1);    
       color: #fff;
       font-size: 12px;
	   border-radius: 2px;
}
  


 #fa-volume-mute {
 	font-size: 24px;
	//border: solid red;
	left: 9px;
   }
 
 #volume-mute {
   //color: red;
   right: 162px;
   display: none;
   position: relative;
    top: -3px;
    left: 6px;
    font-size: 22px;
	border: solid thin transparent;
   }

   #fa-compress{
	 left: 15px; 	 
	 display: none;
  }
   
 #playspeed{
	 background-color: #333;
	 color: #f1f1f1;
	 border: solid thin transparent;
	 position: absolute;
	 bottom: 50px;
     right: 26px;
	 padding: 0px 8px;
	 border-top-left-radius:  5px;
	 border-top-right-radius: 5px;
	 display: none;
	 cursor: pointer;
 }

 #playspeed ul{ 
    list-style: none;
	margin: 8px -18px;
    line-height: 2em;
	padding: 0px 12px;
     
 } 
   
   #playspeed li{
	   border: solid thin transparent;
	   width: 100px;
	   padding-left: 24px;	   
   } 
   
  #playspeed li:hover{
	  background-color: #666;	  
  } 


 #playratedisplay{
	  position: absolute;
      display: block;
      right: 20px;
      border: solid thin transparent;
      width: 47px;
	  font-size: 12px;
	  color: #fff;
	  background-color: rgb(0,0,0,0.1);
	  border-radius: 2px;
	  bottom: -1px;
  }
  
  
  .time {
    border: solid thin transparent;
    width: 20%;
    left: 35%;
    position: absolute;
	font-size: 12px;
	bottom: 0px;
}
 /* the player time and progress bar */
 
 
 .active{
	background-color: #ccc;
    color: #333;
	
}

.video-progress {
    position: relative;
    height: 8.4px;
    margin-bottom: 10px;
}

.seek {
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
    margin: 0;
}

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    width: 100%;
    height: 8.4px;
    pointer-events: none;
    position: absolute;
    top: 0;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 8.4px;
  pointer-events: none;
  position: absolute;
  top: 0;
}

progress::-webkit-progress-bar {
  background-color: #474545;
  border-radius: 2px;
}

progress::-webkit-progress-value {
  background: var(--youtube-red);
  border-radius: 2px;
}

progress::-moz-progress-bar {
  border: 1px solid var(--youtube-red);
  background: var(--youtube-red);
}

.seek {
  position: absolute;
  top: 0;
  width: 100%;
  cursor: pointer;
  margin: 0;
}

.seek:hover+.seek-tooltip {
  display: block;
}

.seek-tooltip {
  display: none;
  position: absolute;
  top: -50px;
  margin-left: -20px;
  font-size: 12px;
  padding: 3px;
  content: attr(data-title);
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}


/********************** close/show video list layout*************************/


 #close-list:hover {
	
	color: red;
   }	
   	
    #close-list{
   	cursor: pointer;
   }
   
   #showPLarrow{
   	font-size: 70px;
       color: #f2f2f2;
       border: solid thin;
       height: 8%;
       position: absolute;
       right: 2px;
	   //display: none;
	   visibility: hidden;
   	   cursor: pointer;
   }


   span#showPLarrow.showPLarrow p {
    font-size: 12px;
    border: solid thin transparent;
    max-width: 100%;
    position: inherit;
    right: 6px;
    bottom: 23px;
    height: 0%;
    padding: -3px;
    
   }

 #show_playlist{
	 display: none;
 }


.lock_icon {    
    position: relative;
    top: -3px;
}
 


   /* Styles for desktops  Larger screens (Monitors) */
  @media only screen and (min-width: 1280px) {
  
  
  }  
  
    /* Styles for laptops */
   @media only screen and (min-width: 769px) and (max-width: 1024px) {
   
   }   
   
    
  /* Styles for tablets */
  @media only screen and (min-width: 481px) and (max-width: 768px) {
    
  }

   /*  mobile phones */
   @media (max-width: 480px) {
      
      .video-course-container {
          border: solid thin #c91616;
          flex-direction: column;
          height: 100%;
          
      }
      
      #play-list.play-list {
         width: 100%; 
         color: #f2f2f2;
         top: -29px;
      }
      
      #videoPlayer {
         position: absolute;
         left: 2px; 
         
      }
      
      #controller {
          bottom: -121px;
          left: 2px;
          position: absolute;
      }
      
      #rewind.rewind {
         width: 35px;
         position: absolute;
      }
      
      #pause-play {
         position: absolute;
         left: 33px; 
      }
      
      
      #fast-forward.fast-forward {
         left: 70px;
          
      }
      
    #volume.volume {
      border: solid thin transparent;
      left: 94px;
    }
      
  }