#w_clock {
  color:  #74625c;
  background: #ECDAB9;
  transition: .1s;
  border-radius: 5px;
  width: 200px;
  height: 100px;
  z-index: 2100;
  position: absolute;
  top:5vh;
  left: 10vw;
  display: flex;
  align-items:center;
  justify-content:center;
  font: normal 40px Alef;
  box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

#b_clock {
  color: #ECDAB9;
  font: normal 40px Alef;
  background: #74625c;
  transition: .1s;
  box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 200px;
  height: 100px;
  z-index: 1100;
  position: absolute;
  top:5vh;
  right: 10vw;
  display: flex;
  align-items:center;
  justify-content:center;
}

#local-video, #remote-video {
  object-fit: fill;
  object-position: 50% 50%;
}

#white-box{
  width:50vw;
  height: 50vh;
  position: absolute;
  top:3vh;
  left:-5vw;
  transition: 1s;
  display: flex;
  align-items:center;
  justify-content:center;
}
#black-box{
  width:50vw;
  height: 50vh;
  bottom:3vh;
  left:-5vw;
  position: absolute;
  transition: 1s;
  display: flex;
  align-items:center;
  justify-content:center;
}

.checkbox {
  cursor: pointer;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid #ECDAB9;
  background: #74625c;
  color: #ECDAB9;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  margin: 0;
}

.checkbox:checked{
    background-color: #74625c;
    border-color: #ECDAB9;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ECDAB9' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

#loader-box {
  visibility:visible;
  z-index:10000;
  font:normal 25px Ubuntu; 
  display: flex;
  align-items:center;
  justify-content:center;
}
#loader-container {display:flex;align-items:center;justify-content:center;}