/* Styles for Video Player */
::ng-deep.vjs-matrix {
  border-radius: 32px;
  width: 100%;
  max-height: 610px;
  background: transparent !important;
}

::ng-deep .vjs-poster {
  overflow: hidden;
  background-color: transparent;
}

::ng-deep .vjs-poster img {
  border-radius: 32px;
  object-fit: cover;
}

::ng-deep.vjs-control-bar {
  background: black;
  bottom: 22px;
  border-radius: 0 0 32px 32px;
}

::ng-deep.vjs-matrix:hover {
  cursor: pointer;
}

::ng-deep.vjs-matrix:hover .vjs-big-play-button {
  background-color: white;
  opacity: 1;
  bottom: 5px;
  transition: all 0.3s;
}

::ng-deep.vjs-matrix .vjs-big-play-button {
  background-color: white;
  width: 80px;
  height: 80px;
  border-radius: 64px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

::ng-deep.vjs-matrix .vjs-big-play-button:hover {
  background-color: white;
  opacity: 1;
}

::ng-deep.vjs-matrix #my-video_html5_api {
  object-fit: cover;
  border-radius: 32px;
}

::ng-deep.vjs-matrix .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "" !important;
  background-image: url('./../../assets/icons/icon_play.svg');
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  position: relative;
  width: 32px;
  height: 32px;
}

::ng-deep.vjs-playing .vjs-big-play-button {
  display: none;
}

@media (max-width: 600px) {
  ::ng-deep.vjs-matrix .vjs-big-play-button .vjs-icon-placeholder:before {
    background-image: url('./../../assets/icons/icon_play.svg');
    width: 16px;
    height: 18px;
  }

  ::ng-deep.vjs-matrix .vjs-big-play-button {
    width: 45.8px;
    height: 48px;
  }
}

@media (min-width: 1010px) {
  ::ng-deep.vjs-matrix {
    min-height: 610px;
  }
}

@media (max-width: 635px) {
  ::ng-deep.vjs-matrix {
    max-height: 320px;
  }
}

@media (max-width: 450px) {
  ::ng-deep.vjs-matrix {
    max-height: 250px;
  }
}

@media (max-width: 375px) {
  ::ng-deep.vjs-matrix {
    max-height: 202px;
  }
}

.floating-block {
  width: 780px;
  height: 150px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  bottom: 0;
  margin-top: -75px;
  border-radius: 780px;
  background: var(--White-100, #FFF);
  filter: blur(150px);
  opacity: 0.4;
  z-index: -1;
  transition: filter 0.5s ease;

  @media (max-width: 720px) {
    width: 480px;
    border-radius: 480px;
    opacity: 0.32;
    filter: blur(100px);
    max-width: 100%;
  }
}

.focused {
  border-color: rgba(255, 0, 0, 0.32);
}