#topBar, #playBar{
  background-color: rgba(204, 123, 25,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: rgba(204, 123, 25,1);
    }
  }
}

div.plex{
  .section{
    display: block;
    position: relative;
    height: 100%;

    .loading{
      position: absolute;
      color: rgb(158, 158, 158);
      top: 50%;
      left: 50%;
      margin-left: -180px;
      width: 360px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 2em;
    }

    @result-background: #ced1d3;

    .plex-result{
      @resultHeight: 40px;
      .plex-result-entry{
        display: block;
        cursor: pointer;
        background-color: @result-background;
        height: @resultHeight;
        line-height: @resultHeight;
        padding: 0.1 * @resultHeight;
        font-weight: bold;

        &:nth-child(0n + 1){
          margin-top: 0;
        }

        &:nth-child(2n + 1){
          background-color: darken(@result-background, 10%);
        }

        .plex-result-picture{
          display: block;
          float: left;
          height: @resultHeight;
          width: @resultHeight;
        }

        .plex-result-title{
          display: block;
          float: left;
          margin-left: 1em;
        }

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

    .plex-section-list{
      .plex-section-element{
        position: relative;
        cursor: pointer;
        @height: 100px;
        height: @height;
        width: 100%;
        background-color: #dddddd;
        overflow: hidden;
        
        .plex-section-background, .plex-section-background-overlay{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }

        .plex-section-background{
          z-index: 0;
          filter: blur(5px);
        }

        .plex-section-background-overlay{
          /*background-color: rgba(0,0,0,0.5);*/
          z-index: 1;
        }

        .plex-section-infos{
          position: relative;
          display: block;
          z-index: 2;
          height: @height - 10px;
          margin-left: 5px;
          margin-top: 5px;

          .plex-section-image{
            display: block;
            float: left;
            height: 100%;
            width: auto;
          }

          .plex-section-title{
            display: block;
            float: left;
            margin-left: 1em;
            font-size: 2em;
  
            color: #FFF;
            text-shadow: 0px 0px 5px #555;
            font-weight: bold;
            line-height: @height;
            height: 100%;
  
            &:after{
              display: block;
              clear: both;
              content: '';
            }
          } 
        }
      }
    }
  }
}
