.music-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -52px;
  width: 100vw;
  height: $nav-height;
  background-color: $brand-primary;
  box-shadow: 0px 1px 6px 0px rgba(72, 72, 72, 0.43);
  color: $gray-light;
  transition: 0.5s all ease;
  z-index: 9;
  .my-container {
    padding: 0 3%;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    .dropdown {
      .track-open-mini-meny {
        margin-right: 15px;
        margin-left: 0;
        i {
          padding: 1.2px;
        }
      }
      .dropdown-menu {
        top: -80px;
        left: 20px;
        .mini-meny-playlists {
          bottom: 0;
          top: auto;
        }
      }
      @media screen and (max-width: $break-mobile) {
        display: none;
      }
    }
    .img-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 2%;
      min-width: 20%;
      max-width: 20%;
      @media screen and (max-width: $break-mobile) {
        width: 40%;
        max-width: none;
        min-width: 40%;
      }
      img {
        width: $nav-height - 10px;
        height: $nav-height - 10px;
        margin-right: 3%;
      }
      .track-info {
        overflow-x: hidden;
        white-space: nowrap;
        .artist-label {
          font-size: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          span {
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .track-title {
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .track-running-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 40%;
      margin-right: 3%;
      @media screen and (max-width: $break-mobile) {
        display: none;
      }
      .time-counter {
        font-size: 11px;
        margin-right: 5px;
      }
      .time-duration {
        font-size: 11px;
        margin-left: 5px;
      }
      .running-track {
        width: 100%;
        position: relative;
      }
      .played-color {
        height: 3px;
        background: $brand-secondary;
        position: absolute;
        z-index: 10;
      }
      .track-color {
        height: 3px;
        background: $gray-medium;
        position: absolute;
        width: 100%;
      }
    }
    .sound-options {
      display: flex;
      flex-direction: row;
      align-items: center;
      @media screen and (max-width: $break-mobile) {
        display: none;
      }
      .fa {
        font-size: 18px;
        cursor: pointer;
        margin-right: 10px;
      }
      .volume-wrapper {
        width: 50px;
        position: relative;
        .volume-amount-color {
          height: 2px;
          background-color: $brand-secondary;
          position: absolute;
          z-index: 10;
        }
        .volume-color {
          height: 2px;
          background-color: $gray-medium;
          position: absolute;
          width: 100%;
        }
      }
      input[type='range'] {
        width: 100%;
        background-color: transparent;
        position: relative;
        z-index: 10;
      }
      input[type='range']::-webkit-slider-thumb {
        //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #00001e;
        height: 10px;
        width: 10px;
        border-radius: 50px;
        background: $gray-light;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -3.85px;
      }
      input[type='range']::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        cursor: pointer; //box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: transparent;
        border-radius: 50px;
        border: 0px solid #000101;
      }
      input[type='range']::-moz-range-thumb {
        //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #00001e;
        height: 10px;
        width: 10px;
        border-radius: 50px;
        background: $gray-light;
        cursor: pointer;
      }
      input[type='range']::-ms-thumb {
        //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #00001e;
        height: 10px;
        width: 10px;
        border-radius: 50px;
        background: $gray-light;
        cursor: pointer;
        height: 3px;
      }
    }
    .fullscreen {
      margin-right: 2%;
      .fa {
        font-size: 18px;
        cursor: pointer;
      }
      @media screen and (max-width: $break-mobile) {
        display: none;
      }
    }
    #analyzer {
      margin-left: 2%;
      width: 22%;
      height: 65px;
      @media screen and (max-width: $break-mobile) {
        display: none;
      }
    }
    input[type='range'] {
      -webkit-appearance: none;
      width: 100%;
      background-color: transparent;
      position: relative;
      z-index: 10;
    }
    input[type='range']:focus {
      outline: none;
    }
    input[type='range']::-webkit-slider-runnable-track {
      width: 100%;
      height: 3px;
      cursor: pointer; //box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      background: transparent;
      border-radius: 50px;
      border: 0px solid #000101;
    }
    input[type='range']::-webkit-slider-thumb {
      //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #00001e;
      height: 15px;
      width: 15px;
      border-radius: 50px;
      background: $gray-light;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -5.85px;
      z-index: 10;
    }
    input[type='range']:focus::-webkit-slider-runnable-track {
      background: transparent;
    }
    input[type='range']::-moz-range-track {
      width: 100%;
      height: 3px;
      cursor: pointer; //box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      background: transparent;
      border-radius: 50px;
      border: 0px solid #000101;
    }
    input[type='range']::-moz-range-thumb {
      //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #00001e;
      height: 15px;
      width: 15px;
      border-radius: 50px;
      background: $gray-light;
      cursor: pointer;
    }
    input[type='range']::-ms-track {
      width: 100%;
      height: 3px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    input[type='range']::-ms-fill-lower {
      background: transparent;
      border: 0px solid #000101;
      border-radius: 50px; //box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }
    input[type='range']::-ms-fill-upper {
      background: transparent;
      border: 0px solid #000101;
      border-radius: 50px; //box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }
    input[type='range']::-ms-thumb {
      //box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #00001e;
      height: 15px;
      width: 15px;
      border-radius: 50px;
      background: $gray-light;
      cursor: pointer;
      height: 3px;
    }
    input[type='range']:focus::-ms-fill-lower {
      background: transparent;
    }
    input[type='range']:focus::-ms-fill-upper {
      background: transparent;
    }
  }
}
.music-bar.display-music-bar {
  bottom: 0;
}
