.modal-backdrop {
  background-color: var(--bg-color);
}

.modal-backdrop.show {
  opacity: 0.7;
}

.modal-body {
  padding: 0 1rem;
}

.modal-dialog {
  position:fixed;
  top:auto;
  right:auto;
  left:auto;
  bottom: 0;
  width: 100%!important;
  max-width: 100%;
  margin: 0;
  outline: 0;
  min-height: 100px;
}   

.modal-content {
  background-color: var(--bg-color);
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--white);
  height: 170px;
}

.modal.fade .modal-dialog {
  bottom: 0;
}

.fade {
  transition: opacity .3s linear;
}

.the-player {
  min-height: 150px;
}

.tp-title {
  min-height: 26px;
}

.tp-controls {
  min-height: 80px;
}

.tp-cursor {
  cursor: pointer;
}

#playBtn {
  width: 100%;
}
#pauseBtn {
  width: 100%;
  display: none;
}

/* Progress */
#waveform {
  width: 100%;
  height: 30%;
  margin: -15% auto;
  display: none;
  cursor: pointer;
  opacity: .7;
  -webkit-user-select: none;
  user-select: none;
}
#waveform:hover {
  opacity: 1;
}
#bar {
  width: 100%;
  height: 1px;
  background-color: var(--tx-color);
  box-shadow: none;
  opacity: 1;
}
#progress {
  width: 0%;
  height: 100%;
  background-color: var(--hi-color);
  z-index: -1;
}

/* Loading */
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--hi-color);
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  display: none;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-color-transparent);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: var(--bg-color);
  display: none;
}
.bar {
  position: absolute;
  top: 41%;
  left: 5%;
  margin: 1px auto;
  height: 1px;
  background-color: var(--tx-color);
}
#barEmpty {
  width: 90%;
  opacity: 0.1;
  box-shadow: none;
  cursor: pointer;
}
#barFull {
  width: 90%;
}
#sliderBtn {
  width: 24px;
  height: 9px;
  position: absolute;
  top: 41%;
  left: 95%;
  margin: -4px auto;
  background-color: var(--tx-color);
  border-radius: 8px;
  cursor: pointer;
}

/* Fade-In */
.fadeout {
  -webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}
.fadein {
  -webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}