body.page-youtube{
#topBar, #playBar{
  background-color: rgba(179, 18, 23,0.97);
}

#topBar{
  transition: 0.2s margin-left ease, background-color 1s !important;
}

#playBar{
  transition: 0.2s left ease, background-color 1s !important;
  div.seekbar{
    div.bar{
      transition: width 1.25s linear, background-color 1s;
      background-color: #96110c;
    }
  }
}

div.youtube{

  div.yt-searchbar{
    input.searchbar{
      border: 1px solid #b31217;
      border-radius: 4px 4px 4px 4px;
      padding-left: 8px;
      padding-right: 8px;
      width: 100%;
      height: 3em;
      box-sizing: border-box;
    }
  }

  div#yt_reswindow{
    position: absolute;
    z-index: 100;
    background-color: #EAEAEA;
    width: 500px;
    max-height: 350px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);

    div.yt-reswindow-result{
      cursor: pointer;
      width: 100%;
      height: 50px;
      margin-top: 10px;

      img{
        width: 50px;
        height: 50px;
        float: left;
      }

      div.yt-reswindow-result-textcontainer{
        height: 40px;
        float: left;
        margin-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;

        div.yt-reswindow-result-author{
          font-size: 12px;
          color: #444;
          margin-top: 2px;
        }


      }

      &:after{
        content: "";
        display: block;
        clear: both;
      }

      &:first-child{
        margin-top: 0px;
      }
    }
  }

  div.playlist{
    padding-bottom: 2em;
    &:not(:first-child)
    {
      margin-top: 25px;
    }

    img.thumb{
      float: left;
      width: 300px;
    }

    div.content{
      float: left;
      width: 600px;
      margin-left: 40px;

      div.title{
        font-size: 2em;
      }

      div.pl-items{
        div.pl-item{
          margin-top: 15px;
          img.pl-item-img{
            float: left;
            width: 120px;
          }

          div.pl-item-content{
            float: left;
            margin-left: 10px;
            width: 470px;

            div.pl-item-title{
              font-weight: 600;
            }
          }

          &:after{
            display: block;
            content: "";
            clear: both;
          }
        }
      }
    }

    &:after{
      display: block;
      content: "";
      clear: both;
    }
  }
}
}
