
.theoplayer-skin .vjs-big-play-button {
  color: rgba(255, 255, 255);
}

/* slider */
.theoplayer-skin .vjs-play-progress,
.theoplayer-skin .vjs-slider-bar {
  color: rgba(255, 255, 255);
}

.video-js .vjs-slider {
  color: rgba(255, 255, 255, 0.25);
}

.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-load-progress {
  background: none;
}

.theoplayer-skin .vjs-progress-control:hover .vjs-progress-holder:hover {
  height: 0.5em;
}

.vjs-progress-control.vjs-control {
  border-radius: 1.5em;
}

.theoplayer-skin .vjs-control-bar .vjs-control.vjs-button {
  color: rgba(255, 255, 255, 0.7);
}

.theoplayer-skin .vjs-control-bar .vjs-control.vjs-button:hover,
.theoplayer-skin .vjs-control-bar .vjs-control.vjs-button:active {
  color: rgba(255, 255, 255);
}

.theoplayer-skin.theo-hd .theo-settings-control-label-hd {
  background: rgba(255, 255, 255, 0.7);
}

.vjs-icon-cog.theo-settings-control-button:hover .theo-settings-control-label-hd {
  background: rgba(255, 255, 255);
}

.theoplayer-skin .vjs-volume-level {
  background: rgba(255, 255, 255);
}

.theoplayer-skin .vjs-slider-horizontal .vjs-volume-level:before {
  color: rgba(255, 255, 255);
}

.theoplayer-skin .vjs-current-time,
.theoplayer-skin .vjs-time-divider,
.theoplayer-skin .vjs-duration {
  color: rgba(255, 255, 255, 0.7);
}

.theo .theo-primary-color.vjs-big-play-button {
  background-image: url("https://www.history.com/assets/images/icons/ctv/dark/play.svg");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: 60% center;
  width: 90px;
  padding-bottom: 90px;
  border-radius: 50%;
  background-color: #d9d9d9;
  z-index: 2;
  border: none;
  margin: 0;
}

@media (max-width: 767px) {
  .theo .theo-primary-color.vjs-big-play-button {
    width: 36px;
    height: 36px;
    padding-bottom: 36px;
  }
}

.theo-big-play-button-svg-container {
  display: none;
}

.theoplayer-skin:hover .vjs-big-play-button,
.theoplayer-skin .vjs-big-play-button:focus {
  background: unset;
  background-image: url("https://www.history.com/assets/images/icons/ctv/dark/play.svg");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: 60% center;
  width: 90px;
  padding-bottom: 90px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
  border: none !important;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

@media (max-width: 767px) {
  .theoplayer-skin:hover .vjs-big-play-button,
  .theoplayer-skin .vjs-big-play-button:focus {
    width: 36px;
    padding-bottom: 36px;
  }
}

.theoplayer-skin:hover .vjs-big-play-button:after,
.theoplayer-skin .vjs-big-play-button:focus:after {
  display: none;
}

.theoplayer-skin .theo-custom-overlay {
  z-index: 1;
  position: absolute;
  width: 100%;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.932292) 0.01%, rgba(0, 0, 0, 0.45648) 75.52%, rgba(0, 0, 0, 0) 100%);
  padding: 36px;
  opacity: 1;
  transition: opacity 0.1s ease-out;
  pointer-events: none;
  touch-action: none;
}

@media (max-width: 767px) {
  .theoplayer-skin .theo-custom-overlay {
    padding: 16px;
  }
}

.theoplayer-skin.vjs-has-started:not(.vjs-paused) .theo-custom-overlay {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.theoplayer-skin.vjs-has-started.vjs-user-active .theo-custom-overlay {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.theoplayer-skin .theo-custom-overlay .theo-custom-overlay-title {
  width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 36px;
  line-height: 120%;
}

@media (max-width: 767px) {
  .theoplayer-skin .theo-custom-overlay .theo-custom-overlay-title {
    width: 250px;
    font-size: 14px;
  }
}

.theoplayer-skin .theo-ad-control-panel .theo-dai-clickthrough {
  z-index: 9999;
  text-decoration: none !important;
}

.vjs-has-started .theo-dai-clickthrough,
.vjs-has-started .theo-dai-clickthrough:focus {
  background-color: rgba(51, 51, 51, 0.4) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.theo-dai-clickthrough:hover {
  color: #fff !important;
}

.theoplayer-skin .theo-menu.theo-settings-control-menu .theo-menu-content-animatable {
  background: #fff;
  color: #000;
  font-family: 'Open Sans', sans-serif;
}

.theoplayer-skin .theo-menu-header {
  background-color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.theo-settings-control-menu-item-title {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
}

.theo-settings-control-menu-quality-automatic {
  color: #444;
  font-weight: 400;
  font-size: 11px;
}

.theo-primary-color.theo-settings-control-menu-item-value {
  color: #000;
  font-size: 12px;
  font-weight: 600;
}

.theoplayer-skin .theo-settings-control-menu-item-hd-label {
  color: #000;
  font-weight: 700;
  top: 3px;
  font-size: 11px;
  font-family: 'Inter', 'Open Sans', sans-serif;
}

.theo-menu-item.vjs-menu-item:nth-child(2n+1) {
  background: #D3D3D3;
}

.theo-menu-item.vjs-menu-item:nth-child(2n) {
  background: #BEBEBE;
}

.theo-submenu .theo-menu-item.vjs-menu-item:nth-child(2n),
.theo-submenu .theo-menu-item.vjs-menu-item:nth-child(2n+1) {
  background: #ffffff;
}

.theoplayer-skin .theo-menu .theo-menu-item.vjs-selected,
.theoplayer-skin .theo-menu .theo-menu-item.vjs-selected:focus {
  color: #000;
}

.custom-icon-keyboard:before {
  font-family: 'icon-fonts';
  font-display: swap;
  content: 'f';
}

.custom-icon-keyboard:hover {
  cursor: pointer;
}

.theoplayer-texttracks > div > div {
  left: 0;
}

.vjs-ended .theo-secondary-color.vjs-control-bar {
  opacity: 0;
}

.theo .vjs-ended .theo-primary-color.vjs-big-play-button {
  display: block;
}

.theo-menu-item.vjs-menu-item:nth-child(2n+1) {
  background: #D3D3D3 !important;
}

.theo-menu-item.vjs-menu-item:nth-child(2n) {
  background: #BEBEBE !important;
}

.theo-settings-control-menu-quality-automatic{
  color: #000 !important;
}
