/**
 * Upstream project pages - photographic chapter bands, 2026-11.
 *
 * The bands are injected by the unoc-project-bands mu-plugin. This file styles
 * them and gives the pages a photographic rhythm without touching the page
 * content: full-bleed photography, the brand rule, and a quiet caption block.
 */

.unoc-proj-band {
	position: relative;
	min-height: clamp(320px, 42vw, 520px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

/* Scrim so the caption always holds, whatever the photograph. */
.unoc-proj-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 15, 17, 0.15) 0%, rgba(15, 15, 17, 0.62) 62%, rgba(15, 15, 17, 0.82) 100%);
	z-index: -1;
}

/* Brand rule along the top edge, as on the other photographic sections. */
.unoc-proj-band::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #000 0 33%, #ffc808 33% 66%, #e10032 66% 100%);
}

.unoc-proj-band__inner {
	width: min(1180px, calc(100% - 64px));
	margin: 0 auto;
	padding: 0 0 clamp(34px, 4vw, 56px);
	color: #fff;
}

.unoc-proj-band__rule {
	display: block;
	width: 42px;
	height: 3px;
	background: #ffc808;
	margin-bottom: 16px;
}

.unoc-proj-band__label {
	margin: 0;
	font: 700 clamp(22px, 2.6vw, 32px)/1.15 Poppins, sans-serif;
	letter-spacing: -0.02em;
	color: #fff;
}

.unoc-proj-band__where {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	max-width: 46ch;
}

@media (max-width: 760px) {
	.unoc-proj-band {
		min-height: 280px;
	}

	.unoc-proj-band__inner {
		width: calc(100% - 40px);
	}
}

/* Theme paragraph colours out-specify the band defaults, so pin the caption
 * colours here; the band sits on photography and must stay legible. */
body.single-unoc_project .unoc-proj-band .unoc-proj-band__label {
	color: #ffffff !important;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

body.single-unoc_project .unoc-proj-band .unoc-proj-band__where {
	color: rgba(255, 255, 255, 0.85) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Slightly stronger scrim on the lower third so captions never wash out. */
body.single-unoc_project .unoc-proj-band::before {
	background: linear-gradient(180deg, rgba(15, 15, 17, 0.10) 0%, rgba(15, 15, 17, 0.55) 55%, rgba(15, 15, 17, 0.88) 100%) !important;
}

/* ============================================================ hybrid pass === */

/* Bands become framed plates rather than edge-to-edge scrims: inset, rounded,
 * with the gold offset frame used on the careers and milestone imagery. */
body.single-unoc_project .unoc-proj-band {
	width: min(1280px, calc(100% - 64px));
	margin: clamp(48px, 6vw, 84px) auto;
	min-height: clamp(300px, 38vw, 460px);
	border-radius: 18px;
	box-shadow: 14px 14px 0 0 #dedbd6;
	overflow: hidden;
}

body.single-unoc_project .unoc-proj-band::after {
	border-radius: 18px 18px 0 0;
}

body.single-unoc_project .unoc-proj-band__inner {
	width: auto;
	padding: 0 clamp(22px, 3vw, 44px) clamp(26px, 3vw, 40px);
	margin: 0;
}

/* ---------------------------------------------------------------- gallery --- */

/* Tilenga's four gallery images sat at 283x212 in a wide section. Give them a
 * shared height and full-width grid so they read as a strip. */
body.single-unoc_project .elementor-element-8083a85 .elementor-widget-image,
body.single-unoc_project .elementor-element-8083a85 .elementor-image-gallery,
body.single-unoc_project .elementor-element-8083a85 .gallery {
	width: 100% !important;
}

body.single-unoc_project .elementor-element-8083a85 img {
	width: 100% !important;
	height: clamp(200px, 22vw, 280px) !important;
	object-fit: cover !important;
	border-radius: 12px;
	display: block;
}

body.single-unoc_project .elementor-element-8083a85 .gallery-item,
body.single-unoc_project .elementor-element-8083a85 .elementor-image-gallery .gallery-item {
	width: 25% !important;
	margin: 0 !important;
	padding: 0 6px;
}

@media (max-width: 900px) {
	body.single-unoc_project .unoc-proj-band {
		width: calc(100% - 32px);
		box-shadow: 8px 8px 0 0 #dedbd6;
	}

	body.single-unoc_project .elementor-element-8083a85 .gallery-item,
	body.single-unoc_project .elementor-element-8083a85 .elementor-image-gallery .gallery-item {
		width: 50% !important;
	}
}

/* Lighter scrim for the framed treatment: the caption sits at the base, so the
 * photograph should stay bright through the middle of the plate. */
body.single-unoc_project .unoc-proj-band::before {
	background: linear-gradient(180deg, rgba(15, 15, 17, 0.05) 0%, rgba(15, 15, 17, 0.18) 45%, rgba(15, 15, 17, 0.78) 100%) !important;
}

/* Ownership cells: the <small>/<span> labels shipped white because the block was
 * styled for a dark ground, but they render on the light section. Give them
 * legible roles on the light background. */
body.single-unoc_project .unoc-project-ownership small {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8002b !important;
	margin-bottom: 6px;
}

body.single-unoc_project .unoc-project-ownership strong {
	display: block;
	margin-bottom: 4px;
}

body.single-unoc_project .unoc-project-ownership span {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: #56535a !important;
}



/* KIP: the photographic bands carry no yellow - the top rule and the caption
 * tick are neutral greys so the plates read as photography, not branding. */
body.postid-246 .unoc-proj-band::after {
	background: linear-gradient(90deg, #2b2b2e 0 33%, #6f6e73 33% 66%, #c9c6bf 66% 100%) !important;
}

body.postid-246 .unoc-proj-band__rule {
	background: #c9c6bf !important;
}

/* ==================================================== EACOP section redesign === */

/* ---- Project at a glance: framed map + icon-led fact rows ---- */
body.postid-128 .unoc-eacop-redesign .glance,
body.postid-128 .unoc-eacop-redesign .routeMap {
	border-radius: 18px;
	overflow: hidden;
}

body.postid-128 .unoc-eacop-redesign aside.facts {
	display: grid;
	gap: 0;
	background: #ffffff;
	border: 1px solid #e9e6e0;
	border-radius: 18px;
	padding: 8px 26px;
}

body.postid-128 .unoc-eacop-redesign aside.facts h3 {
	margin: 18px 0 6px !important;
	font-size: clamp(22px, 2vw, 28px) !important;
	letter-spacing: -0.02em;
}

body.postid-128 .unoc-eacop-redesign aside.facts .fact {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid #eeeae3;
}

body.postid-128 .unoc-eacop-redesign aside.facts .fact:first-of-type {
	border-top: 0;
}

body.postid-128 .unoc-eacop-redesign aside.facts .fact::before {
	grid-row: 1 / span 2;
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 14px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #f7f5f1;
	border: 1px solid #e9e6e0;
	color: #414042;
}

body.postid-128 .unoc-eacop-redesign aside.facts .fact:nth-of-type(1)::before { content: "\f3c5"; } /* map marker */
body.postid-128 .unoc-eacop-redesign aside.facts .fact:nth-of-type(2)::before { content: "\f13d"; } /* anchor     */
body.postid-128 .unoc-eacop-redesign aside.facts .fact:nth-of-type(3)::before { content: "\f277"; } /* route      */
body.postid-128 .unoc-eacop-redesign aside.facts .fact:nth-of-type(4)::before { content: "\f277"; } /* route      */
body.postid-128 .unoc-eacop-redesign aside.facts .fact:nth-of-type(5)::before { content: "\f21a"; } /* ship       */

body.postid-128 .unoc-eacop-redesign aside.facts .fact small {
	grid-column: 2;
	display: block;
	margin: 0 0 2px;
	font-size: 10.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: #e10032 !important;
}

body.postid-128 .unoc-eacop-redesign aside.facts .fact b {
	grid-column: 2;
	font-size: clamp(16px, 1.4vw, 19px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #1f2023 !important;
}

/* ---- Engineering cards: interactive ---- */
body.postid-128 .unoc-eacop-redesign .engineering .cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
	gap: clamp(14px, 1.5vw, 20px) !important;
	margin-top: clamp(26px, 3vw, 38px) !important;
}

body.postid-128 .unoc-eacop-redesign .engineering .card {
	position: relative;
	padding: clamp(24px, 2.2vw, 30px) clamp(20px, 1.8vw, 26px) !important;
	background: #ffffff !important;
	border: 1px solid #e9e6e0 !important;
	border-radius: 16px !important;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.postid-128 .unoc-eacop-redesign .engineering .card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: #e10032;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease;
}

body.postid-128 .unoc-eacop-redesign .engineering .card:hover,
body.postid-128 .unoc-eacop-redesign .engineering .card:focus-visible,
body.postid-128 .unoc-eacop-redesign .engineering .card.is-active {
	transform: translateY(-4px);
	box-shadow: 0 20px 42px rgba(20, 20, 22, 0.10);
	border-color: #dedad2 !important;
	outline: none;
}

body.postid-128 .unoc-eacop-redesign .engineering .card:hover::after,
body.postid-128 .unoc-eacop-redesign .engineering .card:focus-visible::after,
body.postid-128 .unoc-eacop-redesign .engineering .card.is-active::after {
	transform: scaleX(1);
}

body.postid-128 .unoc-eacop-redesign .engineering .card b {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0 0 14px !important;
	border-radius: 10px;
	background: #f7f5f1;
	color: #414042 !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	transition: background 0.22s ease, color 0.22s ease;
}

body.postid-128 .unoc-eacop-redesign .engineering .card:hover b,
body.postid-128 .unoc-eacop-redesign .engineering .card.is-active b {
	background: #e10032;
	color: #ffffff !important;
}

body.postid-128 .unoc-eacop-redesign .engineering .card h3 {
	margin: 0 0 8px !important;
	font-size: clamp(17px, 1.5vw, 20px) !important;
	line-height: 1.25 !important;
	color: #1f2023 !important;
}

body.postid-128 .unoc-eacop-redesign .engineering .card p {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #5f5e60 !important;
}

/* ---- Gallery: uniform plates, hover zoom, lightbox affordance ---- */
body.postid-128 .unoc-eacop-redesign .galleryGrid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: clamp(12px, 1.4vw, 18px) !important;
	margin-top: clamp(26px, 3vw, 38px) !important;
}

body.postid-128 .unoc-eacop-redesign .galleryGrid img {
	width: 100% !important;
	height: clamp(200px, 22vw, 280px) !important;
	object-fit: cover !important;
	border-radius: 14px !important;
	cursor: zoom-in;
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
	box-shadow: 0 4px 14px rgba(20, 20, 22, 0.08);
}

body.postid-128 .unoc-eacop-redesign .galleryGrid img:hover,
body.postid-128 .unoc-eacop-redesign .galleryGrid img:focus-visible {
	transform: translateY(-3px) scale(1.012);
	box-shadow: 0 18px 38px rgba(20, 20, 22, 0.18);
	outline: 3px solid #ffc808;
	outline-offset: 3px;
}

/* ---- Progress: vertical timeline with markers ---- */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background-image: linear-gradient(180deg, rgba(20, 20, 22, 0.82), rgba(20, 20, 22, 0.92)), url('../../../../uploads/2026/11/eacop/eacopimage2.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
}

body.postid-128 .unoc-eacop-redesign .milestones {
	position: relative;
	padding-left: 28px;
}

body.postid-128 .unoc-eacop-redesign .milestones::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, #ffc808 0%, #ffc808 38%, #e4e1da 38%, #e4e1da 100%);
}

body.postid-128 .unoc-eacop-redesign .mile {
	position: relative;
	padding: 0 0 22px 0 !important;
	border: 0 !important;
}

body.postid-128 .unoc-eacop-redesign .mile:last-child {
	padding-bottom: 0 !important;
}

body.postid-128 .unoc-eacop-redesign .mile::before {
	content: "";
	position: absolute;
	left: -28px;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #ffc808;
	box-shadow: 0 0 0 4px #ffffff;
}

body.postid-128 .unoc-eacop-redesign .mile:last-child::before {
	background: #e10032;
	border-color: #e10032;
}

body.postid-128 .unoc-eacop-redesign .mile b {
	display: block;
	margin: 0 0 4px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em;
	color: #b98a00 !important;
	text-transform: uppercase;
}

body.postid-128 .unoc-eacop-redesign .mile p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #4a494b !important;
}

/* ---- Lightbox ---- */
.unoc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	grid-template-columns: 60px 1fr 60px;
	align-items: center;
	gap: 12px;
	padding: 4vh 3vw;
	background: rgba(10, 10, 12, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.unoc-lightbox[hidden] {
	display: none !important;
}

.unoc-lightbox img {
	grid-column: 2;
	max-width: 100%;
	max-height: 88vh;
	justify-self: center;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.unoc-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.unoc-lightbox__nav {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	justify-self: center;
}

.unoc-lightbox__close:hover,
.unoc-lightbox__nav:hover {
	background: #e10032;
}

.unoc-lightbox__count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	letter-spacing: 0.1em;
}

body.unoc-lightbox-open {
	overflow: hidden;
}

@media (max-width: 760px) {
	.unoc-lightbox {
		grid-template-columns: 40px 1fr 40px;
		padding: 8vh 2vw;
	}
}

/* Six engineering cards read best as a 3 x 2 block, not 4 + 2. */
@media (min-width: 1100px) {
	body.postid-128 .unoc-eacop-redesign .engineering .cards {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 620px) and (max-width: 1099px) {
	body.postid-128 .unoc-eacop-redesign .engineering .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Frame the route map like every other plate on the page. */
body.postid-128 .unoc-eacop-redesign .section img,
body.postid-128 .unoc-eacop-redesign .map img {
	border-radius: 16px;
}

/* Hero photograph: the route map was square and diagrammatic; a photograph
 * needs a photographic frame and crop. */
body.postid-128 .unoc-eacop-redesign .hero .route {
	border-radius: 18px;
	overflow: hidden;
}

body.postid-128 .unoc-eacop-redesign .hero .route img,
body.postid-128 .unoc-eacop-redesign .hero .route-img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 4 / 3;
	object-fit: cover !important;
	object-position: center 42% !important;
	display: block;
	border-radius: 18px;
}

/* Hero actions: the buttons rendered transparent with white text, which made
 * the primary action invisible on the light hero. */
body.postid-128 .unoc-eacop-redesign .hero .actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border-radius: 6px;
	border: 1px solid #dcd8d0;
	background: #ffffff;
	color: #1f2023 !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.postid-128 .unoc-eacop-redesign .hero .actions .btn:hover,
body.postid-128 .unoc-eacop-redesign .hero .actions .btn:focus-visible {
	transform: translateY(-1px);
	border-color: #cfcac1;
}

body.postid-128 .unoc-eacop-redesign .hero .actions .btn.primary {
	background: #e10032;
	border-color: #e10032;
	color: #ffffff !important;
}

body.postid-128 .unoc-eacop-redesign .hero .actions .btn.primary:hover,
body.postid-128 .unoc-eacop-redesign .hero .actions .btn.primary:focus-visible {
	background: #b8002a;
	border-color: #b8002a;
}

/* ============================================ EACOP hero + progress, polish === */

/* Hero photograph: hover response and a clearer invitation to open it. */
body.postid-128 .unoc-eacop-redesign .hero .route {
	position: relative;
	cursor: zoom-in;
}

body.postid-128 .unoc-eacop-redesign .hero .route img,
body.postid-128 .unoc-eacop-redesign .hero .route-img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}

body.postid-128 .unoc-eacop-redesign .hero .route:hover img,
body.postid-128 .unoc-eacop-redesign .hero .route:focus-within img {
	transform: scale(1.045);
	filter: saturate(1.06) contrast(1.02);
}

/* The location badge: a proper plate instead of a black box, with the brand
 * gold carrying the arrow so it reads as a route, not body text. */
body.postid-128 .unoc-eacop-redesign .routeLabel {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 12px 18px !important;
	border-radius: 8px !important;
	background: rgba(16, 16, 18, 0.82) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	transition: background 0.25s ease, border-color 0.25s ease;
}

/* Gold dot + hairline accent, matching the site's route device. */
body.postid-128 .unoc-eacop-redesign .routeLabel::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffc808;
	box-shadow: 0 0 0 3px rgba(255, 200, 8, 0.18);
}

body.postid-128 .unoc-eacop-redesign .hero .route:hover .routeLabel {
	background: rgba(16, 16, 18, 0.92) !important;
	border-color: rgba(255, 200, 8, 0.55) !important;
}

/* The route arrow sits in gold. */
body.postid-128 .unoc-eacop-redesign .routeLabel::after {
	content: "";
}

/* ---- Progress panel: photograph reads through, and responds on hover ---- */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark {
	position: relative !important;
	overflow: hidden !important;
	background-image: none !important;
	background-color: #1b1b1e !important;
	cursor: zoom-in;
}

body.postid-128 .unoc-eacop-redesign .progressGrid .dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../../../../uploads/2026/11/eacop/eacopimage2.jpg');
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
	z-index: 0;
}

/* Lighter wash: the jetty is visible instead of buried. */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 18, 0.35) 0%, rgba(16, 16, 18, 0.62) 55%, rgba(16, 16, 18, 0.88) 100%);
	z-index: 1;
	transition: opacity 0.4s ease;
}

body.postid-128 .unoc-eacop-redesign .progressGrid .dark:hover::before {
	transform: scale(1.06);
	filter: saturate(1.08) brightness(1.06);
}

body.postid-128 .unoc-eacop-redesign .progressGrid .dark:hover::after {
	opacity: 0.85;
}

body.postid-128 .unoc-eacop-redesign .progressGrid .dark > * {
	position: relative;
	z-index: 2;
}

/* Gold micro-label for balance against the timeline markers. */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark small {
	color: #ffc808 !important;
	letter-spacing: 0.18em !important;
}

/* Lighter wash again: the jetty should read, not silhouette. */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark::after {
	background: linear-gradient(180deg, rgba(16, 16, 18, 0.22) 0%, rgba(16, 16, 18, 0.48) 55%, rgba(16, 16, 18, 0.82) 100%) !important;
}

/* The route arrow carries the brand gold. */
body.postid-128 .unoc-eacop-redesign .routeLabel__arrow {
	color: #ffc808;
	font-weight: 800;
	margin: 0 2px;
}

/* The progress panel exposes its photograph to the lightbox through a custom
 * property, so the URL lives in one place. */
body.postid-128 .unoc-eacop-redesign .progressGrid .dark {
	--unoc-zoom-src: url('../../../../uploads/2026/11/eacop/eacopimage2.jpg');
}

/* Keyboard focus for the two zoomable plates, in brand gold rather than the
 * default outline. */
body.postid-128 .unoc-eacop-redesign .hero .route:focus-visible,
body.postid-128 .unoc-eacop-redesign .progressGrid .dark:focus-visible {
	outline: 3px solid #ffc808 !important;
	outline-offset: 4px;
}