/* || Double Player */

.double-player-ctn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

input {
  display: block;
  color: white;
}


/* videos settings */
video {
  width: 100%;
  box-shadow: 4px 4px 4px black;
}

.left-video-ctn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 48%;
}

.right-video-ctn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 48%;
}





.filtering-ctn {
  margin: 1vmin 0;
  display: flex;
  justify-items: center;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}


/* Switch */

.switch {
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: white;
}

.switch label .lever:after {
  background-color: #48b3c6;
}

.switch label input[type=checkbox]:checked+.lever:after {
  background-color: #48b3c6;
}

.switch label input[type=checkbox]:checked+.lever {
  background-color: #65b8c7;
}


/* mute buttons */
.mute-btn {
  cursor: pointer;
  margin-left: 2vmin;
}

.left-info-ctn {
  display: flex;
  flex-direction: row;
  color: white;
}


/* || Media Queries */

/* iPad */

@media screen and (max-width: 1024px) {

  .double-player-ctn {
    flex-direction: column;
    justify-items: center;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    height: 80%;
  }

  .left-video-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 85%;
  }

  .right-video-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 85%;
  }


}


/* Phone */

@media screen and (max-width: 600px) {
  .double-player-ctn {
    flex-direction: column;
    justify-items: center;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 100vw;
    padding: 1vmin;
  }

  .left-video-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .right-video-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .input-ctn {
    width: 50%;
  }

  input {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}