/* #fixedAudio .card {
     position: fixed;
     overflow: hidden;
     background: transparent;
     border: none;
     width: 30%;
     top: 50%;
     left: 0;
     } */

     #fixedAudio {
          position: fixed;
          left: 0;
          top: 50%;
          width: 400px;
          z-index: 9999;
     
     }
     
     span.slideR {
          padding: 57px 0;
          background-image: url(../img/base/icon.png);
          background-repeat: no-repeat;
          color: #FFF;
          border-radius: 5px;
          width: 68px;
          position: fixed;
          left: 0;
          top: 40%;
          cursor: pointer;
          z-index: 999;
     }
     
     #fixedAudio .card-body {
          position: relative;
          background-image: none !important;
          padding: 0 !important;
          width: 400px;
     
          left: -380%;
     
          margin-top: 0 !important;
          /* background-color: #eee; */
          -webkit-transition: 2s all ease;
          -moz-transition: 2s all ease;
          -ms-transition: 2s all ease;
          -o-transition: 2s all ease;
          transition: 2s all ease;
     }
     
     .slideRight {
          left: 0 !important;
          -webkit-transition: 2s all ease;
          -moz-transition: 2s all ease;
          -ms-transition: 2s all ease;
          -o-transition: 2s all ease;
          transition: 2s all ease;
     }
     
     #fixedAudio #logo_media-2,
     #media_pic-2 {
          width: 20vmin;
          margin-top: 8%;
          margin-left: 15px;
          margin-bottom: -40px;
     }
     
     #fixedAudio #wrapper {
          /* height: 400px; */
          margin: 10px auto;
          margin-bottom: 30px;
     
     }
     
     #fixedAudio #pnav {
          /* background-color: #fff; */
          /* width: 389px;
          padding-bottom: 3px;
          height: 218px; */
     
     }
     
     #fixedAudio #defaultBar {
          width: 389px;
          position: relative;
          top: 150px;
          background-color: #606060;
          height: 10px;
     }
     
     #fixedAudio #progressBar {
          position: relative;
          height: 10px;
          background-color: #3498db;
     }
     
     
     #fixedAudio #all-buttons {
          margin-top: 23%;
          margin-left: 2%;
     }
     
     #play {
          outline: none;
          border: none;
          top: -11px;
          left: 5%;
          position: relative;
          background: transparent;
          color: #0c4e9e;
          cursor: pointer;
     }
     
     
     #play .fa-play-circle {
          font-size: 20px;
          position: absolute;
     }
     
     #play .fa-pause {
          /* display: none; */
          position: absolute;
     }
     
     #fixedAudio .media_sec {
          /* background: #acb9b882;
           border: 1px solid transparent;
           border-radius: 15px; */
          background-image: url(../img/base/background-light.png);
          background-repeat: no-repeat;
          background-position: center;
          position: relative;
          border-radius: 10px;
          margin: 15px auto;
          width: 400px;
          padding: 10px 10px;
          margin-right: 0 !important;
          z-index: 9999;
     }
     
     #mute {
          outline: none;
          border: none;
          top: -11px;
          position: relative;
          left: 18%;
          background: transparent;
          cursor: pointer;
          z-index: 99999;
     }
     
     #mute i {
          font-size: 20px;
          position: absolute;
          color: #0c4e9e;
          direction: left;
     }
     
     #mute .fa-volume-off {
          direction: left;
          margin-left: -1px;
     }
     
     #fixedAudio #vol-control {
          position: relative;
          margin-left: 20%;
          width: 100px;
          margin-top: -2px;
          /* transform: rotate(180deg); */
     }
     
     #fixedAudio input[type=range] {
          -webkit-appearance: none;
          /* Hides the slider so that custom slider can be made */
          width: 100%;
          /* Specific width is required for Firefox. */
          background: transparent;
          /* Otherwise white in Chrome */
     }
     
     #fixedAudio input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
     }
     
     #fixedAudio input[type=range]:focus {
          outline: none;
          /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
     }
     
     #fixedAudio input[type=range]::-ms-track {
          width: 100%;
          cursor: pointer;
     
          /* Hides the slider so custom styles can be added */
          background: transparent;
          border-color: transparent;
          color: transparent;
     }
     
     
     /* Special styling for WebKit/Blink */
     #fixedAudio input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          border: 1px solid #000000;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          background: #ffffff;
          cursor: pointer;
          margin-top: -4px;
          /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          /* Add cool effects to your sliders! */
     }
     
     /* All the same stuff for Firefox */
     #fixedAudio input[type=range]::-moz-range-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
     }
     
     /* All the same stuff for IE */
     #fixedAudio input[type=range]::-ms-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
     }
     
     #fixedAudio input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          background: #3071a9;
          border-radius: 1.3px;
          border: 0.2px solid #010101;
     }
     
     #fixedAudio input[type=range]:focus::-webkit-slider-runnable-track {
          background: #367ebd;
     }
     
     #fixedAudio input[type=range]::-moz-range-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          background: #3071a9;
          border-radius: 1.3px;
          border: 0.2px solid #010101;
     }
     
     #fixedAudio input[type=range]::-ms-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          background: transparent;
          border-color: transparent;
          border-width: 16px 0;
          color: transparent;
     }
     
     #fixedAudio input[type=range]::-ms-fill-lower {
          background: #2a6495;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     }
     
     #fixedAudio input[type=range]:focus::-ms-fill-lower {
          background: #3071a9;
     }
     
     #fixedAudio input[type=range]::-ms-fill-upper {
          background: #3071a9;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     }
     
     #fixedAudio input[type=range]:focus::-ms-fill-upper {
          background: #367ebd;
     }
     
     #play:active,
     #mute:active {
          position: relative;
     }
     
     #fixedAudio .dropdown-rideo {
          position: relative;
          top: 0;
          left: 0;
          border-radius: 20px;
     }
     
     #fixedAudio .dropdown-rideo select {
          top: -30px;
          right: 10px;
          ;
          padding: 2px;
          width: 110px;
          outline: none;
          background: transparent;
          border-radius: 20px;
          position: absolute;
     }
     
     #fixedAudio .dropdown-rideo select option {
          background-color: rgba(0, 0, 0, .1);
          color: gray;
          padding: 10px 15px;
          height: 20px;
          cursor: pointer;
     }