/* Poster Display for Audio */
.vjs-audio-mode .vjs-poster {
  display: block !important;
}

/* (replace skin name when change the skin) 
Section 1 Primary and Secondary colors */

.vjs-theme-city {
  --vjs-theme-city--primary: #E7D388 !important; /* Light Gold colour */
  --vjs-theme-city--secondary: #B78849 !important; /* Dark Gold colour */
  --vjs-theme-city--third: linear-gradient(to bottom right, #B78849, #F3E89A, #B78849) !important; /* Third The Main for play 3 Gradient Gold */
  --vjs-theme-city--fourth: linear-gradient(to top right, #B78849, #F3E89A) !important; /* For list items background Fourth 2 Gradient Gold */
}


/* ____________ */



/* Menus Formatting */

	/* Ensure the menu item text spans the entire list item */
.vjs-theme-city .vjs-menu .vjs-menu-item {
  cursor: pointer; /* Show pointer cursor to indicate it's clickable */
}

	/* Menues Highet n width */
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
	width: 100% !important;
	bottom: 2.5em !important; /* Adjust to make the menu open higher than the controller */
	max-height: 35em;
}
	/* Menus content spacing */
.vjs-menu li {
	line-height: 1.5em !important;
	padding: 0.5em !important;
}

	/* Menus innned span full width */
.vjs-theme-city .vjs-menu .vjs-menu-item .vjs-menu-item-text {
	width: 100%;
}

/* Chapter menu */

	/* Chapter menu Max width */
.video-js .vjs-menu-chapter .vjs-menu-item .vjs-chapter-text { /* Width of text inside chapters menue */
	max-width: 95%;
}

	/* Hide Arrow form chapter menue */
.vjs-theme-city .vjs-menu .vjs-menu-item .vjs-chapter-icon {
	display: none !important;
}
	/* Chapter: Removes Spacing in menu between time n index number */
.vjs-theme-city .vjs-menu .vjs-menu-item {
    display: block !important;
}

	/* Chapters time spacing */
.video-js .vjs-menu-chapter .vjs-menu-item .vjs-chapter-count {
    margin-right: 0rem;
}


/* Chapter Adjust spacing between items */
.vjs-menu .vjs-menu-item-chapter {
	line-height: 1em !important; 
}

/* Chapter text */
.video-js .vjs-menu-chapter .vjs-menu-item-text {
	max-width: 85% !important;
	padding: 0.5em !important;
}

/* Chapter text container */
.vjs-menu-item-chapter {
	font-size: 1.2em !important;
	font-weight: normal !important;
}


	/* Menus colors */

/* Menu Default state - set the time text color to white */
ul.vjs-menu-content li.vjs-menu-item .vjs-menu-item-text {
  color: white;
}
	/* Hover - Focus - Selected background */
.vjs-menu-item:hover,
.vjs-menu-item:focus,
.video-js .vjs-menu .vjs-selected {
  background: var(--vjs-theme-city--fourth);
	color: black !important;
	font-weight: bold !important;
}

	/* Menu Hover/Selected Text */
ul.vjs-menu-content li.vjs-menu-item:hover .vjs-menu-item-text,
ul.vjs-menu-content li.vjs-menu-item:hover .vjs-menu-item-text span,
ul.vjs-menu-content li.vjs-menu-item.vjs-selected .vjs-menu-item-text,
ul.vjs-menu-content li.vjs-menu-item.vjs-selected .vjs-menu-item-text span  {
	color: black !important;
	font-weight: bold !important;
}


/* ____________ */


/* ____ Control bar ____ */


.vjs-control-bar {
     color:  #B78849 !important;
	 z-index: 5 !important;
}
.vjs-theme-city .vjs-big-play-button {
	top: 45%;
	left: 45%;
	display: none !important;
}

/* Progress bar click area */

.vjs-theme-city .vjs-progress-control { 
	height: 38px !important;
	top: -10px !important;
}

.vjs-theme-city .vjs-progress-control:hover .vjs-progress-holder {
    height: 33.3px !important;
    top: -10px !important;
}

/* spacing between controls */
.video-js .vjs-control {
	display: ruby;
	flex: auto !important;
	align-items: center  !important; /* Center the elements vertically */
	justify-content: center !important;
}

.vjs-volume-panel:hover {
 	justify-content: center !important;
}
.vjs-theme-city .vjs-play-control:hover {
   text-shadow: 0 0 5px rgba(231, 211, 136, 0.7), 
			 0 0 10px rgba(231, 211, 136, 0.5) !important; /* Glow effect */
}

/* ____________ */

/* PREVIOUS button icon */
.vjs-prev-button::before {
	font-family: 'fontello';
	content: '\e865'; /* icon-to-strat */
	font-size:20px;
}

/* PREVIOUS - Play NEXT controllers */
.vjs-theme-city .vjs-play-control {
	order: 0 !important;
}


/* NEXT button icon */
.vjs-next-button::before {
	font-family: 'fontello';
	content: '\e863'; /* icon-to-end */
	font-size: 20px;
}

/* ____________ */



/* ____ Features Section ____ */


	/* Quality - Playback - Chapters */
.vjs-quality-selector, .vjs-playback-rate, .vjs-chapter-button .vjs-volume-panel .vjs-control .vjs-volume-panel-horizontal, .vjs-volume-panel .vjs-control .vjs-volume-panel-horizontal .vjs-hover {
	font-weight: bold !important;
	display: flex !important; /* Override any hiding */
}
	
	/* Picture-in-Picture */
.vjs-picture-in-picture-control {
	display: none !important;
}

/* ____ Time Controls ____ */

/* Current play time & Video duration */
.vjs-current-time, .vjs-duration {
    display: inline !important;
    align-items: center;
    font-size: 14px !important;
    text-shadow: 0 0 5px rgba(231, 211, 136, 0.7), 
                 0 0 10px rgba(231, 211, 136, 0.5); /* Glow effect */
}


	/* Video length */
.vjs-duration {
	order: 10 !important;
}

	/* Remaining time e.g -8:33 */
.vjs-remaining-time {
	display: none !important;
}


	/* Logo above background */
.video-js .streamtube-watermark.top-right {
	z-index: 2;
}
	/* Captions Settings Above all Elements and logo */
.video-js .vjs-modal-dialog.vjs-text-track-settings {
	z-index: 10;
}


	/* Captions Text Inactive and during Activity above bar  */
.vjs-text-track-display {
	bottom: 8em;
}
.video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
    bottom: 3em;
}


/* ____Phones n tablets ____ */

/* Volume disable on all phones n tablets */

@media only screen and (max-width: 1024px) {

	/* Volume controls Hide all  */
	.vjs-control-bar .vjs-volume-panel,
	.vjs-control-bar .vjs-mute-control,
	.vjs-control-bar .vjs-volume-control,
	.vjs-control-bar .vjs-volume-bar,
	.vjs-control-bar .vjs-volume-level {
	display: none !important;
	}
	
	/* Menus Max Width */
	.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
		width: 100% !important;
		max-height: 30em;
		z-index: 7 !important;
	}
		/* Quality selector */
	.vjs-quality-selector .vjs-menu-button {
		 display: flex !important;
	}

	/* spacing between controls */
	.video-js .vjs-control {
		width: 5em;
	}
	
	/* Play controller */
	.vjs-theme-city .vjs-play-control {
		display: flex !important;
		order: 0 !important;
		flex: 2 !important;
	}

/* Chapter menu */

	/* chapters menu positions */
	.vjs-menu-button-popup .vjs-menu .vjs-menu-content:has(.vjs-menu-item-chapter) {
			left: -70% !important;
	}

	/* Chapter open Menue position */
	.vjs-menu-button-popup .vjs-menu .vjs-menu-content:has(.vjs-menu-item-chapter) {
		right: auto !important; /* Disable right alignment */
		left: -55% !important; /* Adjust specifically for chapters menu */
	}
	
/* Next / PREVIOUS button icon */
	.vjs-prev-button::before, .vjs-next-button::before {
		font-size:12px !important;
	}
	.vjs-current-time, .vjs-duration {
		font-size:10px !important;
	}

}

@media only screen and (max-width: 600px) {

	
/* Menus */

	/* Menus max highet */
	.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
		max-height: 15em !important;
	}

	/* Menu itmes spacing */
	.vjs-theme-city .vjs-menu .vjs-menu-item {
		display: flex;
		justify-content: flex-end;
		padding: 10px 5px;
	}

/* Other Elements */	

/* Logo behind menus n caption popup */
	.video-js .streamtube-watermark.top-right {
		z-index: 1;
	}

	/* spacing between controls */
	.video-js .vjs-control {
		width: 3em;
		font-size: 10px !important;
	}

	/* Center The Big Play in middle of post */
	.vjs-theme-city .vjs-big-play-button {
		top: 40% !important;
		left: 40% !important;
	}

/* Captions Text Inactive and during Activity above bar  */
	.vjs-text-track-display {
		bottom: 9em;
	}
	.video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
		bottom: 3em;
	}

/* Overlay Seekbackward - Play - SeekFarward Wrapper  Move higher */
	.video-js.played-once:not(.vjs-fullscreen) .w21-pause-overlay {
	  bottom: 7em !important;
	}
	
	.vjs-remaining-time {
		 display: inline !important;
		font-size:10px !important;
		flex: auto !important;
		order: 10;
		text-shadow: 0 0 5px rgba(231, 211, 136, 0.7), 
                 0 0 10px rgba(231, 211, 136, 0.5); /* Glow effect */
	}
	
	.vjs-theme-city .vjs-play-control {
		font-size: 15px !important;
	}
	
/* Next / PREVIOUS button icon */
	.vjs-prev-button::before, .vjs-next-button::before {
		font-size:12px !important;
	}
	.vjs-current-time, .vjs-duration {
		font-size:10px !important;
	}
	
/* Shrink the 30s skip buttons’ icon font */
	.vjs-skip-backward-30 .vjs-icon-placeholder:before, .vjs-skip-backward-10 .vjs-icon-placeholder:before
	.vjs-skip-forward-30  .vjs-icon-placeholder:before, .vjs-skip-forward-10  .vjs-icon-placeholder:before {
	  font-size: 14px !important;  /* adjust to taste */
	}

/* Hide controls */
	 .vjs-menu-button.vjs-menu-chapter,
	.vjs-current-time, 
	.vjs-duration,
	.vjs-prev-button::before, button.vjs-control.vjs-button.vjs-prev-button, 
	.vjs-next-button::before, button.vjs-control.vjs-button.vjs-next-button {
		display: none !important;
	}

}

/* _________ */

.vjs-theme-city .vjs-big-play-button {
	display: none !important;
}


/* Pev/Play/Next overlay sits above everything */
	.video-js .w21-pause-overlay {
	  z-index: 6 !important;
	}

	/* when the menu is locked open */
	.video-js:has(.vjs-menu.vjs-lock-showing) .w21-pause-overlay {
	  z-index: 2 !important;
	}

	/* also when you’re just hovering the menu button */
	.video-js:has(.vjs-menu-button-popup.vjs-hover) .w21-pause-overlay {
	  z-index: 2 !important;
	}

/* JSW CSS End ____________________________________________________________*/

/*____________________*/