/* Arctic Video widget styles starts from here */
.video-embed-field-responsive-video {
  position: inherit;
}

.largePlayBtn {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
  opacity: 1;
  transition:
    opacity 800ms,
    height 0s;
  transition-delay: 0s, 0s;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent center/cover no-repeat !important;
}

.largePlayBtn:hover {
  cursor: pointer;
}

.largePlayBtn.icon-play:before,
.largePlayBtn.icon-pause:before {
  content: "";
}

.largePlayBtn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 80px;
  height: 80px;
  background-color: #ff4e00;
  border-radius: 100%;
  transition: border-color 300ms;
}

.largePlayBtn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 2px);
  transform: translateX(-50%) translateY(-50%);
  height: 0;
  width: 0;
  border-left: 20px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transition: border-color 300ms;
}

.largePlayBtn:focus:before,
.largePlayBtn:hover:before {
  background-color: #fff;
}

.largePlayBtn:focus:after,
.largePlayBtn:hover:after {
  border-left-color: rgba(255, 88, 93);
}

.largePlayBtn:after {
  left: calc(50% + 4px);
  border-left: 35px solid #fff;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.paragraph--type--video .video-embed-field-responsive-video:after,
.media--view-mode-full .video-embed-field-responsive-video:after,
.video-gallery-block .video-embed-field-responsive-video:after,
.node--type-video-gallery .video-embed-field-responsive-video:after {
  padding-bottom: 0;
}

.video-embed-field-provider-youtube.video-embed-field-responsive-video:after {
  padding-bottom: 56.25%;
}

.kWidgetPlayBtn {
  background: rgba(0, 0, 0, 0.7);
  color: #efefef;
}

.kWidgetPlayBtn:hover {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

/* Cosentyx Video widget styles ends here */

/* The following styles get apply for both cosentyx and dolphin */
.kaltura-player-video img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.kaltura-player-video iframe {
  position: relative;
}

a.icon-pause.largePlayBtn {
  display: none !important;
}

/* Added custom */
.playkit-pre-playback-play-overlay .playkit-pre-playback-play-button {
  background-color: #161616 !important;
  outline: 1px solid #fcfcfc;
}

.playkit-pre-playback-play-overlay .playkit-pre-playback-play-button:hover,
.largePlayBtn:hover {
  background-color: #ff4e00 !important;
}

.playkit-pre-playback-play-overlay .playkit-pre-playback-play-button {
  border: 0 !important;
  position: absolute;
  top: 85vh;
  left: 15vh;
  width: 70px;
  height: 70px;
}

/* Change progress bar color to linearGradient */
.playkit-player .playkit-seek-bar .playkit-progress-bar .playkit-progress {
  background-color: #ff4e00 !important;
}

/* Change the volume bar to gradient */
.playkit-volume-control-bar .playkit-progress {
  background-color: #ff4e00 !important;
}

/* Fix issue with YouTube video player area */
.playkit-container {
  z-index: 0 !important;
}

/* Reduce play button size on mobile and tablet */

@media screen and (max-width: 767px) {
  .playkit-pre-playback-play-overlay .playkit-pre-playback-play-button,
  .kaltura-embed-section
    .kaltura-player
    .playkit-pre-playback-play-overlay
    .playkit-pre-playback-play-button {
    position: absolute;
    top: 85vh;
    left: 15vh;
    width: 60px;
    height: 60px;
  }
}

.kaltura-embed-section .kaltura-player .playkit-pre-playback-play-overlay {
  bottom: 26px !important;
}

.kaltura-embed-section
  .kaltura-player
  .playkit-pre-playback-play-overlay
  .playkit-pre-playback-play-button {
  bottom: 2px !important;
  top: auto !important;
  left: 98px !important;
  width: 70px !important;
  height: 70px !important;
}

[data-testid="mediaInfo"] [data-testid="creator"],
[data-testid="mediaInfo"] [data-testid="plays"],
[data-testid="mediaInfo"] [data-testid="createdAt"] {
  display: none;
}

.paragraph--type--media-content
  .nc-kaltura-media-video
  .kaltura-embed-section
  .kaltura-player {
  height: 380px !important;
  max-width: 854px;
  min-width: 320px;
  overflow: hidden;
}

.paragraph--type--video-banner
  .field--name-field-banner-video
  .nc-kaltura-media.media--type-kaltura-entity {
  width: 100% !important;
  max-width: 100% !important;
}