/*
:root {
  --jumbotron-padding-y: 3rem;
}
*/
body {
  background-color: #fff;
}
.hero {
  background-image: url("images/hero_bg.webp");
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.navbar-brand {
  float: left;
}

@media (max-width: 768px) {
  .navbar-collapse {
    background: #212529;
  }
}

.card-icon {
  text-align: center;
  margin-top: -36px;
}
.card-icon img {
  width: 72px;
  height: 72px;
  background-color: #3B71CA;
  border-radius: 50%;
  border: 4px solid #fff;
}
.card-title {
  text-align: center;
}
footer {
  color: #ccc;
  background: #212529;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.video-background {
  display: none;
  position: fixed;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.video-foreground, .video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground {
      height: 300%;
      top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
      width: 300%;
      left: -100%;
  }
}
@media all and (max-width: 600px) {
  .vid-info {
      width: 50%;
      padding: 0.5rem;
  }
  .vid-info h1 {
      margin-bottom: 0.2rem;
  }
  .video-foreground, .video-background iframe {
      transform: scale(1.1);
  }
}
@media all and (max-width: 500px) {
  .vid-info .acronym {
      display: none;
  }
}

#videoPlayer {
  z-index: 0;
  pointer-events: none;
}
#videoOverlay {
  position: absolute;
  z-index: 10;
}

.overlayIcon {
  cursor: pointer;
  position: fixed;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px;
  border-radius: 6px;
}
#backIcon {
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
}
#gameInfo {
  cursor: auto;
  position: fixed; 
  width: 330px; 
  margin: 0 auto;
  padding: 6px 10px;
  top: 0; 
  left: 0; 
  right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #fff;
  font-weight: bold;
}
#restartIcon {
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
}
#volumeAdjustIcon {
  top: 58px;
  left: 10px;
  width: 38px;
  height: 38px;
}
#volumeAdjustSlider{
  display: none;
  top: 58px;
  left: 10px;
  height: 38px;
  background: rgba(0, 0, 0, 1);
}
#volumeAdjustIcon:hover~#volumeAdjustSlider {
  display: block;
}
#volumeAdjustSlider:hover {
  display: block;
}
#volumeEditor {
  cursor: pointer;
}
.volumeSlider {
  vertical-align: middle;
}
#videoSpeedAdjustIcon {
  top: 58px;
  right: 10px;
  width: 38px;
  height: 38px;
}
#videoSpeedAdjustSlider{
  display: none;
  top: 58px;
  right: 10px;
  height: 38px;
  background: rgba(0, 0, 0, 1);
}
#videoSpeedAdjustIcon:hover~#videoSpeedAdjustSlider {
  display: block;
}
#videoSpeedAdjustSlider:hover {
  display: block;
}
#videoSpeedEditor {
  cursor: pointer;
}
.videoSpeedSlider {
  vertical-align: middle;
}

#requestHintIcon {
  top: 106px;
  left: 10px;
  width: 38px;
  height: 38px;
}
#requestHintPanel{
  display: none;
  top: 106px;
  left: 10px;
  height: 38px;
  background: rgba(0, 0, 0, 1);
}
#requestHintIcon:hover~#requestHintPanel {
  display: block;
}
#requestHintPanel:hover {
  display: block;
}

#playersInRunning {
  top: 154px;
  left: 10px;
  /* width: 10px; */
  /* height: 10px; */
  color: #fff;
  padding: 6px 10px;
}
#teamsInRunning {
  top: 154px;
  left: 10px;
  /* width: 10px; */
  /* height: 10px; */
  color: #fff;
  padding: 6px 10px;
}
#btnStartGuessing {
  position: fixed; 
  width: 500px; 
  margin: 5% auto; 
  bottom: -50px; 
  left: 0; 
  right: 0;
}

#mapid, #mapGameOverId {
  height: 60vh;
}
.modal-body {
  padding: 0;
}
.modal-dialog {
  width: 80vw;
  max-width: initial;
}