body {
    opacity: 1;
    background-image: url("back.gif");
}

.players {
/*    padding: 0px 15px 0px 0px;*/
    margin-bottom: -30px;    
    max-width: 80%;

}


.rotate {
  background-position: center;
  animation: spinning 240s infinite;
}

.pageheader {
    max-width: 100%;
  height: auto;
}

.logo {
  max-width: 65%;
  height: auto;
}

.player1 {
    padding: 20px;
    background-image: url('zoom.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.player2 {
    padding: 20px;
    background-image: url('zoom.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#divPlayer1 {
    min-height: 100%;
    visibility: hidden;
}

#divPlayer1-placeholder {
  
    background-image: url(images/tape-left.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    visibility: visible;
}

#divPlayer2-placeholder {
   
    background-image: url(images/tape-right.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    visibility: visible;
}

#divPlayer2 {
    min-height: 100%;
    visibility: hidden;
}


.control1 {
    padding: 20px;
    opacity: 1;
    background-color: #eeeeee99;
}

.control2 {
    padding: 20px;
    background-color: #eeeeee99;
}

.slider {
overflow:hidden;
    -webkit-box-shadow:  inset 10px 30px 20px #ffffff50;
    box-shadow: inset 10px 30px 20px #ffffff50;
}

.form-select {
        width: auto !important;
        white-space: nowrap;
}

input[type=range] {
    transform: rotate(270deg);
    height: 120px;
    width: 160px;
}

.move-left {
  position: relative;
  left: -60px;
  top: 20px
}

.ctrlpanel{
    height: 220px;
}

#drop-down {
padding-bottom: 25px;
    }

#controls {
padding: 25px 15px 25px 15px;
    }


.navcolor {
background-color: rgba(0, 0, 0, 0.4);

    }
    
.card-shadows {
    opacity: 0.75;
    padding: 20px;
}
.info-body {
    background-color: #ffffffaa;
    display: inline-block;
    padding: 20px;
}
.shadows {
    -webkit-box-shadow: 4px 5px 21px 11px rgba(0, 0, 0, 0.42);
    box-shadow: 4px 5px 21px 11px rgba(0, 0, 0, 0.42);
}

.xfader {
    background-color: #321313;
}

.btn-blue{
    background-color: #0063D8;
}

@keyframes breathing {
  0%  {background-position: -13px -23px, -13px -23px, 0 0, 0 0, -13px -23px, 0 0;
  }
  20%   {background-position: 0 0, 0 0, 13px 23px, 13px 23px, 0 0, 13px 23px;
  }
  35%  {background-position: -13px -23px, -13px -23px, 0 0, 0 0, -13px -23px, 0 0;
  }
  55%  {background-position: 0 0, 0 0, 13px 23px, 13px 23px, 0 0, 13px 23px;
  }
  65%  {background-position: -13px -23px, -13px -23px, 0 0, 0 0, -13px -23px, 0 0;
  }
  80% {background-position: 0 0, 0 0, 13px 23px, 13px 23px, 0 0, 13px 23px;
  }
  95%  {background-position: -13px -23px, -13px -23px, 0 0, 0 0, -13px -23px, 0 0;
  }
  100% {background-position: 0 0, 0 0, 13px 23px, 13px 23px, 0 0, 13px 23px;
  }
}  


#player1Placeholder,
#player2Placeholder {
    width: 100%;
    height: 100%;
    /* Add additional styling as needed */
}


/* This is just for styling the warning message; the detection is done via JavaScript */
#rotate-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    z-index: 1000;
}