/*Mobile Responsive - view windows sizes resolution*/
@media screen and (max-width: 980px)  /*under < 980px*/
{
  /*container all*/
  #YoutubeGetCustomPlaylist .container 
  {
      display: block;
      width: 100vw !important;
  }
  
  /*iframe*/  
  #YoutubeGetCustomPlaylist .container_iframe 
  {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*padding-top: 66.66%;*/  /* 66.66% 3:2 Aspect Ratio  | 56.25% 16:9 Aspect Ratio */
  }

}
  
/*Mobile Responsive - view windows sizes resolution*/
@media screen and (max-width: 680px)  /*under < 680px*/
{
  .description,.DateVideoUpload,.ChannelTitle,.VideoURL
  {
  display:none;
  }
  
}

html 
{
  /* General - scroll smooth - if you click on some "Anchor" to navigate by #ID or open lightbox */    
  scroll-behavior: smooth; 
}
  
#YoutubeGetCustomPlaylist 
{
  background: none;
  overflow-x: hidden; /**/
  overflow-y: hidden; /*auto*/
  margin: 0;
  padding: 0;
}
  
#YoutubeGetCustomPlaylist iframe 
{
  /*position: absolute;*/
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 65vh; /* auto | 100%;*/
  border: none;
}

#YoutubeGetCustomPlaylist strip 
{
 width: 100% !important;
}

#YoutubeGetCustomPlaylist h4 
{
  padding: 0;
  margin: 0;
  line-height: 1.3;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
}

#YoutubeGetCustomPlaylist p 
{
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 1.3;
  font-weight: 600;
  color: gray;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
}

#YoutubeGetCustomPlaylist .ScrollArrow {
    position: relative !important;
    display: flex;
    float: right;
    top: 0 !important;
}

#YoutubeGetCustomPlaylist .container 
{
  background: #FFF;
  width: 100vw;/*980px*/
  margin: 0 auto; /**/ /*center*/
}

#YoutubeGetCustomPlaylist header, section 
{
  /*position: fixed;*/
  text-align: center;
  background-color: #FFF;
  /*width: 980px; */
  z-index:3;
}

#YoutubeGetCustomPlaylist section 
{
  top: 0px;
}

#YoutubeGetCustomPlaylist .logo 
{
  width: 140px;
  padding: 0px;
}

#YoutubeGetCustomPlaylist main 
{
  padding: 0px 0px 0px; /*390px 18px 10px*/
  overflow-x: hidden; /**/
  overflow-y: auto; /**/
  height: 60vh; /*450px | 660px*/
  margin-top: -81px;
}

#YoutubeGetCustomPlaylist article 
{
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #FFF;
  margin: 0 auto;
  transition: all 0.3s ease-out;
}
#YoutubeGetCustomPlaylist article:hover 
{
  border-bottom: 1px solid #FF9999;
  /*border-top: 1px solid #FF9999;*/
  border-radius: 6px;
  cursor: pointer;
  background-color: #0000000a;
  transform: translateX(-2%);
  transform: translateY(-2%);
}

#YoutubeGetCustomPlaylist article:first-child
{
/*opacity: 0;*/
}
  
#YoutubeGetCustomPlaylist .Thumbnail_Image 
{
  height: 70px;
  border-radius: 4px;
  transition: all 0.3s ease-out;
}

#YoutubeGetCustomPlaylist .Thumbnail_Image:hover
{
  height: 73px;
}

#YoutubeGetCustomPlaylist .details 
{
  padding: 10px 28px;
}
  
#YoutubeGetCustomPlaylist #Next_Page, #Prev_Page, #Prev_Video_Article, #Next_Video_Article
{
  position: relative;
  display: inline-block;
  top: -83px; /*480px*/  
  font-family: 'Rubik', sans-serif;
  color: black;  
  background: #fff;
  border: solid 1px #cdcdcd;
  border-radius: 2px;
  box-shadow: 2px 2px 6px #323232; /*#b9b9b9*/
  cursor: pointer;
  z-index: 5; 
  transition: all 0.3s ease-out;
  transition-property: transform;
}
#YoutubeGetCustomPlaylist #Next_Page, #Prev_Page
{
  left: 45%;
}
#YoutubeGetCustomPlaylist #Prev_Video_Article, #Next_Video_Article
{
  left: -90px;
}
#YoutubeGetCustomPlaylist #Next_Page:hover, #Prev_Page:hover, #Prev_Video_Article:hover, #Next_Video_Article:hover
{
  color: #e2a76a; 
  transform: scale(0.95);
}

#MySearchInput
{
position: relative;
display: inline-block;
z-index: 5;
width: 104px;
top: 10px;
border: none;
background: none;
outline: none;
border-bottom: solid 1px #583109;
font-size: 12px;
font-family: 'Rubik', sans-serif;
color: #fff;
transition: all 0.7s ease-out;
}
#MySearchInput::placeholder
{
color: #bdbdbd;
}
#MySearchInput:hover
{
border-bottom: solid 1px #fff;
}
  
/* ========= */
/* scrollbar FX */
/* ========= */
/* width */
#YoutubeGetCustomPlaylist::-webkit-scrollbar ,
#YoutubeGetCustomPlaylist main::-webkit-scrollbar
{
  width: 15px;
}

/* Track */
#YoutubeGetCustomPlaylist::-webkit-scrollbar-track
{
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;
}
 
/* Handle */
#YoutubeGetCustomPlaylist::-webkit-scrollbar-thumb ,
#YoutubeGetCustomPlaylist main::-webkit-scrollbar-thumb
{
  background: #191919; 
  border-radius: 0px;
}

/* Handle on hover */
#YoutubeGetCustomPlaylist::-webkit-scrollbar-thumb:hover ,
#YoutubeGetCustomPlaylist main::-webkit-scrollbar-thumb:hover
{
  background: #2d2d2d;
}
/* ========= */