body {
  margin: 0;
  display: flex;
}



#control-tray {
  position:absolute;
  pointer-events: none;
  display: flex;
}

#buttons-div, #show-hide-controls-button {
  pointer-events: all;
  background-color: rgba(255,255,255,.6);
}

#buttons-div {
  border-bottom-right-radius: 5px;
}

#buttons-div p {
  margin: 10px;
}

.show-hide-div {
  height: 100%;
}

#show-hide-controls-button {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.show-hide-button {
  cursor: pointer;
  margin: 0;
  padding: 5px;
}

.show-hide-button, .fas {
  color: rgba(0,0,0,.8);
}

#stop-playing i {
  -webkit-animation-name: stop-button; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: .3s; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-name: stop-button;
  animation-duration: .3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes stop-button {
  from {color: rgba(0,0,0,.8);}
  to {color: rgba(0,0,0,.2);}
}

/* Standard syntax */
@keyframes stop-button {
  from {color: rgba(0,0,0,.8);}
  to {color: rgba(0,0,0,.2);}
}


button, .checkbox {
  cursor: pointer;
  padding: 2px 6px;
  background-color: #fff;
  border: 1px solid #555;
  border-radius: 2px;
  transition: color .2s linear, background-color .2s linear;
  -o-transition: color .2s linear, background-color .2s linear;
  -moz-transition: color .2s linear, background-color .2s linear;
  -webkit-transition: color .2s linear, background-color .2s linear;
}

button:hover {
  background-color: #eee;
}

input[type=number] {
  width: 50px;
}

/* The slider itself */
input[type=range] {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  /* width: 100%; Full-width */
  height: 5px; /* Specified height */
  border: 1px solid black; /* Remove outline */
  border-radius: 5px;
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  border-radius: 7.5px;
  background: black;
  cursor: pointer; /* Cursor on hover */
}

input[type=range]::-moz-range-thumb {
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  border-radius: 7.5px;
  background: black;
  cursor: pointer; /* Cursor on hover */
}

.right {
  float: right;
}

.icon-spacer {
  /* Use flexbox for slider wrapper element */
  display:flex;
  /* Direct alignment of content along horizontal axis */
  flex-direction:row;
  /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
  align-items:center;
}

#buttons-div > p > * {
  margin: 0 3px;
}

#buttons-div > p > *:first-child {
  margin: 0 3px 0 0;
}

#buttons-div > p > *:last-child {
  margin: 0 0 0 3px;
}

#more-controls-div {
  border: 1px solid rgba(0,0,0,.8);
  margin: 5px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.4);
}

.modal {
  position: absolute;
  width: auto;
  height: max-content;
  background-color: white;
  border-radius: 10px;
  margin: 30px;
  padding: 15px;
  z-index: 5;
}

.modal p:first-of-type {
  margin-top: 12px;
}

.cancel-button {
  text-align: right;
}

.fas {
  cursor: pointer;
}

.fas.no-pointer {
  cursor: initial;
}