@import "./bootstrap-grid.css";
@import "./font-awesome.css";

.video-js .overlay-row {
  height: 100%;
  width: 100%;
  margin: 0 !important;
}

.video-js .vjs-overlay {
  position: absolute;
  padding: 0 !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.vjs-overlay .control-overlay-buttons {
  display: grid;
  grid-auto-flow: column;
  height: 100%;
  width: 83% !important;
}

.vjs-overlay .overlay-button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visible-none {
  visibility: hidden !important;
}

.d-none {
  display: none !important;
}

.vjs-overlay .overlay-button .icon {
  z-index: 2;
  transition-duration: 1s;
  cursor: pointer;
  text-shadow: 0 0 5px #000;
}

.vjs-overlay .previous-button .icon:hover {
  transform: translateX(-25px);
}

.vjs-overlay .seek-left .icon:hover {
  transform: rotate(-50deg);
}

.vjs-overlay .play-button .icon:hover {
  transform: scale(1.2);
}

.vjs-overlay .seek-right .icon:hover {
  transform: rotate(50deg) scaleX(-1);
}

.vjs-overlay .next-button .icon:hover {
  transform: translateX(25px);
}

.vjs-control-bar {
  z-index: 2;
}