.playerOuter {
  position: fixed;
  bottom: 0px;
  height: 80px;
  background-color: #232a30ed;
  width: 100%;
  color: #fff;
  display: flex;
}
.playerControls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
#volumeRange::-webkit-slider-thumb {
  border-color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
}
#volumeRange::-moz-range-thumb {
  border-color: #ffffff;
}
#license-track-free {
  background: #9f6ec4 !important;
}
.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff; }
  .Toastify__toast-container--top-left {
    top: 1em;
    left: 1em; }
  .Toastify__toast-container--top-center {
    top: 1em;
    left: 50%;
    margin-left: -160px; }
  .Toastify__toast-container--top-right {
    top: 1em;
    right: 1em; }
  .Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em; }
  .Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    margin-left: -160px; }
  .Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em; }

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0; }
    .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
      top: 0; }
    .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
      bottom: 0; }
    .Toastify__toast-container--rtl {
      right: 0;
      left: initial; } }

.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 1px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr; }
  .Toastify__toast--rtl {
    direction: rtl; }
  .Toastify__toast--default {
    background: #fff;
    color: #aaa; }
  .Toastify__toast--info {
    background: #3498db; }
  .Toastify__toast--success {
    background: #07bc0c; }
  .Toastify__toast--warning {
    background: #f1c40f; }
  .Toastify__toast--error {
    background: #e74c3c; }
  .Toastify__toast-body {
    margin: auto 0;
    -ms-flex: 1;
        flex: 1; }

@media only screen and (max-width: 480px) {
  .Toastify__toast {
    margin-bottom: 0; } }

.Toastify__close-button {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start; }
  .Toastify__close-button--default {
    color: #000;
    opacity: 0.3; }
  .Toastify__close-button:hover, .Toastify__close-button:focus {
    opacity: 1; }

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left; }
  .Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards; }
  .Toastify__progress-bar--controlled {
    transition: transform .2s; }
  .Toastify__progress-bar--rtl {
    right: 0;
    left: initial;
    transform-origin: right; }
  .Toastify__progress-bar--default {
    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); }

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0); }
  75% {
    transform: translate3d(10px, 0, 0); }
  90% {
    transform: translate3d(-5px, 0, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0); }
  75% {
    transform: translate3d(-10px, 0, 0); }
  90% {
    transform: translate3d(5px, 0, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  75% {
    transform: translate3d(0, 10px, 0); }
  90% {
    transform: translate3d(0, -5px, 0); }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0); }
  75% {
    transform: translate3d(0, -10px, 0); }
  90% {
    transform: translate3d(0, 5px, 0); }
  to {
    transform: none; } }

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }

.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft; }

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight; }

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown; }

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp; }

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft; }

.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight; }

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp; }

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown; }

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes Toastify__zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn; }

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut; }

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    transform: perspective(400px); } }

@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px); }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.Toastify__flip-enter {
  animation-name: Toastify__flipIn; }

.Toastify__flip-exit {
  animation-name: Toastify__flipOut; }

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0); } }

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0); } }

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0); } }

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0); } }

.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft; }

.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight; }

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown; }

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp; }

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft; }

.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight; }

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp; }

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown; }
/**
Default
**/
.react-pagination-js-default ul{
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style: none;
  font-size: .875em;
  font-family: inherit;
}

li.page.disabled {
  cursor: default;
  pointer-events: none;
  color: #999999;
}

.react-pagination-js-default .page {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  border: solid 1px #c0c0c0;
  background: #e9e9e9;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);

  font-weight: bold;
  text-decoration: none;
  color: #717171;
  text-shadow: 0px 1px 0px rgba(255,255,255, 1);
  cursor: pointer;
}
.react-pagination-js-default .is-active {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  border: solid 1px #c0c0c0;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);

  font-weight: bold;
  text-decoration: none;
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0,0,0, .5);
  cursor: pointer;
}
.react-pagination-js-default .pageElli {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;

  font-weight: bold;
  text-decoration: none;
  color: #717171;
}


.react-pagination-js-default .page:hover, .page.gradient:hover {
  background: #fefefe;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
  background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.react-pagination-js-default .page.active {
  border: none;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

/**
Dark
**/
.react-pagination-js-dark ul{
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style: none;
  font-size: .875em;
  font-family: inherit;
}
.react-pagination-js-dark .page {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;

  border: solid 1px #c0c0c0;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
  color: #f0f0f0;

  text-decoration: none;
  cursor: pointer;
}
.react-pagination-js-dark .is-active {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  
  border: solid 1px #c0c0c0;
  background: #332e2e;
  text-shadow: 0px 1px 0px rgba(255,255,255, 1);
  color: #717171;
 

  font-weight: bold;
  text-decoration: none;
  text-shadow: 0px 0px 3px rgba(0,0,0, .5);
  cursor: pointer;
}
.react-pagination-js-dark .pageElli {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;

  font-weight: bold;
  text-decoration: none;
  color: #717171;
}


.react-pagination-js-dark .page:hover, .page.gradient:hover {
  background: #fefefe;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0, .5)), to(rgba(0,0,0, .5)));
  background: -moz-linear-gradient(0% 0% 270deg,rgba(0,0,0, .5), rgba(0,0,0, .5));
}

.react-pagination-js-dark .page.active {
  border: none;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}


/**
Bootstrap css
**/
.react-pagination-js-bootstrap ul{

  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style: none;
  display: inline-block;
  *display: inline;
  font-size: .875em;
  /* IE7 inline-block hack */

  *zoom: 1;
  margin-left: 0;
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: inherit;
}
.react-pagination-js-bootstrap .page {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
  cursor: pointer;
  color: #0088cc;
}
.react-pagination-js-bootstrap .is-active {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
  color: #999999;
  background-color: #f5f5f5;
  cursor: default;
}
.react-pagination-js-bootstrap .pageElli {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
  color: #999999;
  cursor: default;

}


.react-pagination-js-bootstrap .page:hover {
  background-color: #f5f5f5;
}

.react-pagination-js-bootstrap .page.active {
  color: #999999;
  cursor: default;
}


.react-pagination-js-bootstrap .page:first-child  {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
  
}
.react-pagination-js-bootstrap  .page:last-child  {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

/**
Border Bottom
*/
.react-pagination-js-border-bottom ul{
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style: none;
  font-size: .875em;
  font-family: inherit;
  line-height: 2em;
}
.react-pagination-js-border-bottom .page {
  display: inline-block;
  padding: 0px 1px;
    margin: 0px 9px;
  text-decoration: none;
  cursor: pointer;
}
.react-pagination-js-border-bottom .is-active {
  display: inline-block;
  padding: 0px 1px;
  margin: 0px 9px;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 1px solid #0088cc;
  color: #0088cc
}
.react-pagination-js-border-bottom .pageElli {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;

  font-weight: bold;
  text-decoration: none;
  color: #717171;
  
}


.react-pagination-js-border-bottom .page:hover{
  font-weight: bold;
  border-bottom: 1px solid #0088cc;
}
/**
Circle
**/

.react-pagination-js-circle ul{
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style: none;
  font-size: .875em;
  font-family: inherit;
  line-height: 2em;
}
.react-pagination-js-circle .page {
  display: inline-block;
  padding: 0px 1px;
    margin: 0px 9px;
  text-decoration: none;
  cursor: pointer;
  
  width: 30px;
  height: 30px;
  border-radius: 100%;
  padding: 0;
  margin: auto 5px;
  text-align: center;
  position: relative;
}
.react-pagination-js-circle .is-active {
  display: inline-block;
  padding: 0px 1px;
  margin: 0px 9px;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;

  color: #0088cc;
  border: 3px solid #0088cc;
  border-radius: 100%;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  padding: 0;
  margin: auto 5px;
  text-align: center;
  position: relative;
}
.react-pagination-js-circle .pageElli {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;

  font-weight: bold;
  text-decoration: none;
  color: #717171;
  
}


.react-pagination-js-circle .page:hover{
  font-weight: bold;
  color: #0088cc;
  border: 3px solid #0088cc;
}
.circle a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
  margin: auto 5px;
}

.circle a.is-active {
  border: 3px solid #2ecc71;
  border-radius: 100%;

}
.loading {
  display: flex;
  justify-content: center;
}
.lds-heart {
  display: inline-block;
  position: absolute;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
  transform-origin: 26px -8px;
  left: 32px;
  top: -2px;
}
.current-play--music .lds-heart {
  top: 34px;
  left: 42px;
}
.lds-heart div {
  top: 23px;
  left: 19px;
  position: absolute;
  width: 8px;
  height: 8px;
  background: #eb5b5b;
  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart div:after,
.lds-heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background: #eb5b5b;
}
.lds-heart div:before {
  left: -8px;
  border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
  top: -8px;
  border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
  0% {
    transform: scale(0.85);
  }
  5% {
    transform: scale(1);
  }
  39% {
    transform: scale(0.95);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.87);
  }
  100% {
    transform: scale(0.99);
  }
}
.license-btn + .add-favorite button .lds-heart {
  left: -18px;
}
#license-selector-free_track {
  background: #9f6ec4 !important;
}
.button-dark, a.button-dark, button.button-dark {
  background: #000 !important;
  color: #fff !important;
}
/* body {
  font-family: 'Rubik', sans-serif;
  color: #071739;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(140, 140, 140, 0.1);
} */

body .sidebar-widget--duration-slider {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  padding-top: 0px;
  padding-left: 20px;
  border-radius: 20px;
  background: #11181d;
  overflow: hidden;
  padding-bottom: 42px;
}

body .sidebar-widget--duration-slider h2 {
  margin-bottom: 40px;
}

body .sidebar-widget--duration-slider span.slider-title {
  color: white;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 16px;
}

body .sidebar-widget--duration-slider .current-value {
  width: 100%;
}

body .sidebar-widget--duration-slider .current-value label {
  display: inline-flex;
  width: 50px;
  font-size: 20px;
}

body .sidebar-widget--duration-slider .current-value input {
  margin: 0;
  max-width: 40px;
  margin-bottom: 5px;
  font-size: 16px;
  color: white;
  padding: 5px;
  padding-left: 15px;
  border: none;
  border-radius: 20px;
  background: #274684;
}

body .sidebar-widget--duration-slider .values {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 10px;
  width: 180px;
}

body .sidebar-widget--duration-slider #duration-slider {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: 5px;
  background: #778877;
  border-radius: 5px;
  margin-left: 0px;
  cursor: pointer;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min #duration-slider--min-drag {
  right: -13.5px !important;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 0;
  height: 5px;
  border-radius: 5px;
  background: #778877;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min:hover::before {
  opacity: 1;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min:hover::after {
  opacity: 1;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min::before {
  opacity: 0;
  /* content: attr(data-content); */
  display: block;
  position: absolute;
  top: -40px;
  right: -23px;
  width: 40px;
  padding: 3px;
  text-align: center;
  color: black;
  background: #f3f7fd;
  border-radius: 20px;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min::after {
  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  right: -8px;
  border-top: 8px solid white;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min #duration-slider--min-drag {
  position: absolute;
  right: -7.5px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.3s;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--min #duration-slider--min-drag:hover {
  box-shadow: 0 0 0 6px rgba(39, 70, 132, 0.2);
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 0;
  height: 5px;
  border-radius: 5px;
  background: #7ed77e;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max:hover::before {
  opacity: 1;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max:hover::after {
  opacity: 1;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max::before {
  opacity: 0;
  /* content: attr(data-content); */
  display: block;
  position: absolute;
  top: -40px;
  right: -23px;
  width: 40px;
  padding: 3px;
  text-align: center;
  color: black;
  background: #f3f7fd;
  border-radius: 20px;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max::after {
  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  right: -8px;
  border-top: 8px solid white;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max #duration-slider--max-drag {
  position: absolute;
  right: -7.5px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.3s;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max #duration-slider--max-drag:hover {
  box-shadow: 0 0 0 6px rgba(39, 70, 132, 0.2);
}

.sidebar-widget--duration-slider .fa-instagram {
  position: absolute;
  color: #7ed77e;
  top: 3%;
  right: 2%;
  font-size: 38px;
}

body .sidebar-widget--duration-slider #duration-slider #duration-slider--max::after,
body .sidebar-widget--duration-slider #duration-slider #duration-slider--min::after {
  display: none;
}

span.min-time {
  color: #fff;
  margin-top: 15px;
  display: inline-block;
  left: -2px;
  opacity: 0.3;
  position: absolute;
}

span.max-time {
  color: #fff;
  margin-top: 15px;
  opacity: 0.3;
  display: inline-block;
  margin-right: -7px;
  position: absolute;
  right: 0px;
}

.sidebar-widget--duration-slider .fa-instagram:hover {
  font-size: 42px;
  color: #aae7aa;
  transition: all 0.1s linear;
  cursor: pointer;
}

span.slider-title.slider-title--dur {
  opacity: 0.5;
}

.sidebar-widget--duration-slider input[type='number']::-webkit-outer-spin-button,
.sidebar-widget--duration-slider input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sidebar-widget--dur {
  display: flex;
}

.sidebar-widget--dur span:nth-child(1) {
  margin-right: 10px;
}

.sidebar-widget--duration-slider input[type='number'] {
  -moz-appearance: textfield;
}

.sidebar-widget--duration-slider *:focus {
  outline: none;
}
/* body {
  font-family: 'Rubik', sans-serif;
  color: #071739;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(140, 140, 140, 0.1);
} */

body .sidebar-widget--bpm-slider {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  padding-top: 0px;
  padding-left: 20px;
  border-radius: 20px;
  background: #11181d;
  overflow: hidden;
  padding-bottom: 42px;
}

body .sidebar-widget--bpm-slider h2 {
  margin-bottom: 40px;
}

body .sidebar-widget--bpm-slider span.slider-title {
  color: white;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 16px;
}

body .sidebar-widget--bpm-slider .current-value {
  width: 100%;
}

body .sidebar-widget--bpm-slider .current-value label {
  display: inline-flex;
  width: 50px;
  font-size: 20px;
}

body .sidebar-widget--bpm-slider .current-value input {
  margin: 0;
  max-width: 40px;
  margin-bottom: 5px;
  font-size: 16px;
  color: white;
  padding: 5px;
  padding-left: 15px;
  border: none;
  border-radius: 20px;
  background: #274684;
}

body .sidebar-widget--bpm-slider .values {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 10px;
  width: 180px;
}

body .sidebar-widget--bpm-slider #bpm-slider {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: 5px;
  background: #778877;
  border-radius: 5px;
  margin-left: 0px;
  cursor: pointer;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min #bpm-slider--min-drag {
  right: -13.5px !important;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 0;
  height: 5px;
  border-radius: 5px;
  background: #778877;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min:hover::before {
  opacity: 1;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min:hover::after {
  opacity: 1;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min::before {
  opacity: 0;
  /* content: attr(data-content); */
  display: block;
  position: absolute;
  top: -40px;
  right: -23px;
  width: 40px;
  padding: 3px;
  text-align: center;
  color: black;
  background: #f3f7fd;
  border-radius: 20px;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min::after {
  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  right: -8px;
  border-top: 8px solid white;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min #bpm-slider--min-drag {
  position: absolute;
  right: -7.5px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.3s;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min #bpm-slider--min-drag:hover {
  box-shadow: 0 0 0 6px rgba(39, 70, 132, 0.2);
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 0;
  height: 5px;
  border-radius: 5px;
  background: #7ed77e;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max:hover::before {
  opacity: 1;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max:hover::after {
  opacity: 1;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max::before {
  opacity: 0;
  /* content: attr(data-content); */
  display: block;
  position: absolute;
  top: -40px;
  right: -23px;
  width: 40px;
  padding: 3px;
  text-align: center;
  color: black;
  background: #f3f7fd;
  border-radius: 20px;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max::after {
  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  top: -18px;
  right: -8px;
  border-top: 8px solid white;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max #bpm-slider--max-drag {
  position: absolute;
  right: -7.5px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.3s;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max #bpm-slider--max-drag:hover {
  box-shadow: 0 0 0 6px rgba(39, 70, 132, 0.2);
}

.sidebar-widget--bpm-slider .fa-instagram {
  position: absolute;
  color: #7ed77e;
  top: 3%;
  right: 2%;
  font-size: 38px;
}

body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--max::after,
body .sidebar-widget--bpm-slider #bpm-slider #bpm-slider--min::after {
  display: none;
}

span.min-time {
  color: #fff;
  margin-top: 15px;
  display: inline-block;
  left: -2px;
  opacity: 0.3;
  position: absolute;
}

span.max-time {
  color: #fff;
  margin-top: 15px;
  opacity: 0.3;
  display: inline-block;
  margin-right: -7px;
  position: absolute;
  right: 0px;
}

.sidebar-widget--bpm-slider .fa-instagram:hover {
  font-size: 42px;
  color: #aae7aa;
  transition: all 0.1s linear;
  cursor: pointer;
}

span.slider-title.slider-title--dur {
  opacity: 0.5;
}

.sidebar-widget--bpm-slider input[type='number']::-webkit-outer-spin-button,
.sidebar-widget--bpm-slider input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sidebar-widget--dur {
  display: flex;
}

.sidebar-widget--dur span:nth-child(1) {
  margin-right: 10px;
}

.sidebar-widget--bpm-slider input[type='number'] {
  -moz-appearance: textfield;
}

.sidebar-widget--bpm-slider *:focus {
  outline: none;
}