div#player-bottom {
  background-color: #192029;
  padding-left: 25px;
  padding-right: 25px;

  div#control-container {
    height: 140px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  div#control-container{
    div#shuffle-container {
      float: left;
      width: 20%;
      height: 60px;
      padding-top: 21px;

      div#shuffle {
        width: 16px;
        height: 17px;
        cursor: pointer;
        margin: auto;
        opacity: 0.7;

        &.amplitude-shuffle-off {
          background: url('../img/shuffle.svg');
        }

        &.amplitude-shuffle-off:hover {
          background: url('../img/shuffle-on.svg');
          opacity: 0.8;
        }

        &.amplitude-shuffle-on{
          background: url('../img/shuffle-on.svg');
          opacity: 1;
        }

        &.amplitude-shuffle-on:hover {
          opacity: 1;
        }
      }
    }

    div#prev-container{
      width: 20%;
      float: left;
      height: 60px;
      padding-top: 18px;

      div#previous{
        background: url('../img/previous.svg');
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin: auto;

        &:hover{
          background: url('../img/previous-hover.svg');
        }
      }
    }

    div#play-pause-container {
      width: 20%;
      float: left;
      height: 60px;

      div#play-pause {
        width: 60px;
        height: 60px;
        cursor: pointer;
        margin: auto;

        &.amplitude-playing{
          background: url('../img/pause.svg');
        }

        &.amplitude-paused {
          background: url('../img/play.svg');
        }
      }
    }

    div#next-container{
      width: 20%;
      float: left;
      height: 60px;
      padding-top: 18px;

      div#next {
        background: url('../img/next.svg');
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin: auto;

        &:hover{
          background: url('../img/next-hover.svg');
        }
      }
    }

    div#repeat-container{
      float: left;
      width: 20%;
      height: 60px;
      padding-top: 20px;

      div#repeat{
        background: url('../img/repeat.svg');
        width: 18px;
        height: 20px;
        cursor: pointer;
        margin: auto;
        opacity: 0.7;

        &:hover{
          background: url('../img/repeat-on.svg');
          opacity: 0.8;
        }

        &.amplitude-repeat-on {
          background: url('../img/repeat-on.svg');
          opacity: 1;

          &:hover{
            opacity: 1;
          }
        }
      }
    }
  }

  div#control-container::after {
    content: "";
    display: table;
    clear: both;
  }

  div#volume-container{
    padding-bottom: 20px;
    text-align: center;

    img {
      display: block;
      float: left;
      margin-top: -9px;
    }

    input[type="range"].amplitude-volume-slider {
      width: calc(100% - 30px);
      -webkit-appearance: none;
      display: block;
      margin-left: 10px;
      float: left;
    }

    input[type="range"].amplitude-volume-slider:focus {
      outline: none;
    }

    input[type="range"].amplitude-volume-slider::-webkit-slider-runnable-track {
      width: 75%;
      height: 2px;
      cursor: pointer;
      animate: 0.2s;
      background: #cfd8dc;
    }

    input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
      height: 18px;
      width: 18px;
      background-color: white;
      cursor: pointer;
      margin-top: -8px;
      -webkit-appearance: none;
      border-radius: 20px;
    }

    input[type="range"].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
      background: #cfd8dc;
    }

    input[type="range"].amplitude-volume-slider::-moz-range-track {
      width: 100%;
      height: 1px;
      cursor: pointer;
      animate: 0.2s;
      background: #cfd8dc;
    }

    input[type="range"].amplitude-volume-slider::-moz-range-thumb {
      height: 18px;
      width: 18px;
      background-color: white;
      cursor: pointer;
      margin-top: -8px;
      -webkit-appearance: none;
      border-radius: 20px;
    }

    input[type="range"].amplitude-volume-slider::-ms-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      animate: 0.2s;
      background: #cfd8dc;
      border-width: 15px 0;
      color: transparent;
      border-color: #192029;
    }

    input[type="range"].amplitude-volume-slider::-ms-fill-lower {
      background: transparent;
      border-radius: 2.6px;
    }

    input[type="range"].amplitude-volume-slider::-ms-fill-upper {
      background: transparent;
      border-radius: 2.6px;
    }

    input[type="range"].amplitude-volume-slider::-ms-thumb {
      height: 18px;
      width: 18px;
      background-color: white;
      cursor: pointer;
      margin-top: 0px;
      border: 20px;
    }

    input[type="range"].amplitude-volume-slider:focus::-ms-fill-lower {
      background: #cfd8dc;
    }

    input[type="range"].amplitude-volume-slider::-ms-fill-upper {
      background: #cfd8dc;
    }

    input[type="range"].amplitude-volume-slider::-ms-tooltip {
      display: none;
    }
  }

  div#volume-container:after {
    content: "";
    display: table;
    clear: both;
  }
}

@-moz-document url-prefix() {
  div#player-bottom{
    div#volume-container{
      input[type="range"].amplitude-volume-slider {
        margin-top: 0px;
      }
    }
  }
}

@supports (-ms-ime-align:auto) {
  div#player-bottom{
    div#volume-container{
      input[type="range"].amplitude-volume-slider {
        margin-top: -4px;
        height: 30px;
        background-color: #192029 !important;
      }
    }
  }
}

@media all and (-ms-high-contrast: none) {
  div#player-bottom div#volume-container *::-ms-backdrop,
  div#flat-black-player-container div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider {
    margin-top: -8px;
    background-color: #192029 !important;
    background: #192029 !important;
  }
}