/* theme color */
.vjs-theme-city {
    --vjs-theme-city--primary: #CC0000;
    --vjs-theme-city--secondary: #fff;   
}

/* increase all element size */
.video-js.vjs-theme-city {
    font-size: 14px;
}

/* big play button */
.vjs-theme-city .vjs-big-play-button {
    font-size: 2em;
    line-height: 3em;
    height: 3em;
    width: 3em;
    border: none;
    border-radius: 50%;
    margin-left: -1.5em;
    margin-top: -1.5em;
    /* IE8 - has no alpha support */
    background-color: #CC0000;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(204, 0, 0, 0.7);
}

/* big play button - bigger play icon inside circle */
.vjs-theme-city .vjs-big-play-button .vjs-icon-placeholder {
    font-size: 2em;
}

/* control bar */
.vjs-theme-city .vjs-control-bar {
  height: 70px;
  padding-top: 20px;
  background: none;
  background-image: linear-gradient(0deg, #000, transparent);
}

.vjs-theme-city .vjs-button > .vjs-icon-placeholder:before {
  line-height: 50px;
}

/* progress bar */
.vjs-theme-city .vjs-play-progress:before {
  display: none;
}

.vjs-theme-city .vjs-progress-control {
  position: absolute; /* move progress bar to top */
  top: -5px;
  right: 3%;
  left: 3%;
  width: 94%;
  height: 20px;
  font-size: 20px; /* width of progress bar */
}

.vjs-theme-city .vjs-progress-control .vjs-progress-holder {
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

.vjs-theme-city .vjs-play-progress {
  background-color: var(--vjs-theme-city--primary);
}

/* rounded progress bar */
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div, 
.video-js .vjs-progress-holder .vjs-play-progress,
.vjs-theme-city .vjs-progress-control .vjs-progress-holder {
    border-radius: 5px;
}

/* remaining time aligned on right side */
.vjs-theme-city .vjs-remaining-time {
    position: absolute;
    top: -50%;
    right: 10px;
    max-height: 24px;
}

/* speed button - font size */
.vjs-theme-city .vjs-playback-rate-value {
    font-size: 18px;
    line-height: 3;
}

/* hide speed button menu - click to change speed */
.vjs-theme-city .vjs-playback-rate .vjs-menu {
    display: none !important;
}

/* volume bar on left side */
.vjs-theme-city .vjs-volume-panel {
    position: absolute;
    top: -60%;
    left: 5px;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
    border-radius: 5px;
}

/* other 5 buttons - equally aligned */
.vjs-theme-city .vjs-fullscreen-control,
.vjs-theme-city .vjs-playback-rate,
.vjs-theme-city .vjs-picture-in-picture-control,
.vjs-theme-city .vjs-play-control,
.vjs-theme-city .vjs-quality-selector,
.vjs-theme-city .vjs-subs-caps-button {
    order: 1;
    flex: 1;
}

/* align center for quality selector */
.vjs-quality-selector .vjs-menu,
.vjs-subs-caps-button .vjs-menu {
    left: 10%;
}

/* control play button - bigger to match other 4 buttons */
.vjs-theme-city .vjs-play-control {
    font-size: 18px;
}

/* background color */
.vjs-theme-city .vjs-overlay-background {
    width: auto;
    background: none;
    opacity: 0.3;
}

/* Responsive Settings */

/* smaller big play button on small screens */
.video-js.vjs-layout-x-small .vjs-big-play-button,
.video-js.vjs-layout-small .vjs-big-play-button {
    font-size: 1.2em;
}

/* force showing progress even on small screen size */
.video-js.vjs-layout-x-small .vjs-progress-control,
.video-js.vjs-layout-tiny .vjs-progress-control {
    display: inherit;
}

/* hide strange spacer on x-small */
.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
    display: none;
}

/* show playback rate even on small screen sizes */
.video-js.vjs-layout-small .vjs-playback-rate,
.video-js.vjs-layout-x-small .vjs-playback-rate {
    display: inherit;
}

/* no overlap progress bar on screen small tablet 426-768 */
.video-js.vjs-layout-medium .vjs-progress-control {
    width: 85%;
}

/* re-center quality selector */
.video-js.vjs-layout-x-small .vjs-quality-selector .vjs-menu { 
    left: -70%;
}

.video-js.vjs-layout-small .vjs-quality-selector .vjs-menu { 
    left: -50%;
}

.video-js.vjs-layout-medium .vjs-quality-selector .vjs-menu { 
    left: -3%;
}

.video-js.vjs-layout-large .vjs-quality-selector .vjs-menu { 
    left: 10%;
}

.video-js.vjs-layout-x-large .vjs-quality-selector .vjs-menu { 
    left: 18%;
}