.vjs-theme-city {
  --vjs-theme-city--primary: #ca9e67;
  --vjs-theme-city--secondary: #7E5D34;
}

.vjs-volume-bar.vjs-slider-horizontal {
	height: .3em;
}

.vjs-theme-city .vjs-control-bar {
  height: 70px;
  padding-top: 20px;
  background: none;
  background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  color: #fff;
  font-size: 14px;
  mix-blend-mode: luminosity;
}

.vjs-control-bar>.vjs-button, .vjs-remaining-time, .vjs-volume-panel {
	color: #7E5D34;
	margin-top: 15px !important;
	height: 30px;
}

.vjs-control-bar>.vjs-volume-panel  {
	order: 2;
	flex: 1;
}
.vjs-control-bar>.vjs-playback-rate {
	order: 3;
}
.vjs-control-bar>.vjs-audio-button {
	order: 4;
}
.vjs-control-bar>.vjs-http-source-selector {
	order: 5;
}
.vjs-control-bar>.abLoopButton {
	order: 6;
}
.vjs-control-bar>.vjs-remaining-time {
	order: 7;
	flex: 1;
}
.vjs-control-bar>.vjs-fullscreen-control {
	order: 8;
	flex: 1;
}

.vjs-control-bar .vjs-button:hover {
	color: #ca9e67;
}

.vjs-theme-city button:hover {
	background-color: transparent;
}

.vjs-menu-button-popup>.vjs-menu {
	color: #fff;
}
/*
.vjs-theme-city .vjs-button > .vjs-icon-placeholder::before {
  line-height: 50px;
}
*/
.vjs-volume-horizontal {
	margin-left: -30px !important;
}

.vjs-theme-city .vjs-picture-in-picture-control, .vjs-subs-caps-button, .vjs-theme-city .vjs-play-progress::before {
  display: none;
}

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

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

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

.vjs-theme-city .vjs-remaining-time {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vjs-theme-city .vjs-play-control {	
  flex: 1;
  font-size: 1.75em;
}

.vjs-theme-city .vjs-mute-control {
	font-size: 1.75em;
}

.video-js .vjs-control-bar {
	justify-content: center;
}

.vjs-theme-city .vjs-fullscreen-control {
  flex: 1;
  font-size: 1.75em;
}