/*
Sky Blue layout structure by templatemo.com
Automobile color scheme by templatemo.com
Combined and adapted - all color backgrounds rendered as solid blocks,
no image files required for color/layout backgrounds.
Sky Blue layout structure is preserved exactly.
*/

/* ============================================================
   BASE
   ============================================================ */

/*
   CROSS-BROWSER MOBILE COLOUR FIX — HOW AND WHY
   ---------------------------------------------------------------
   Samsung Internet applies a "Force Dark" rendering filter that
   transforms every CSS background colour independently using a
   luminance algorithm. It does this at the compositor level,
   AFTER CSS is evaluated, so standard CSS overrides cannot stop
   it on their own.

   Samsung's own documentation states that the only developer-
   controlled opt-out is: <meta name="color-scheme" content="light dark">
   This value (not "light" alone) signals to Samsung Internet that
   the site manages its own colour scheme. Samsung Internet then
   switches from Force Dark to its "Prefer Media Query" mode and
   defers to the @media (prefers-color-scheme: dark) block in the
   CSS instead of running its own transformation.

   The @media (prefers-color-scheme: dark) block at the bottom of
   this file re-declares every colour on the site back to its exact
   intended teal values with !important. This means that even when
   the user's device/browser is in dark mode, every element renders
   in the correct colour — identical to the light/desktop view.

   Chrome Auto Dark Mode on Android is blocked by the color-scheme
   declaration and forced-color-adjust: none on html.

   iOS Safari respects color-scheme natively and needs no extra fix,
   but the @media dark block covers it as a backup.

   The viewport meta (width=1000) keeps the full-width desktop
   layout intact on mobile — the browser scales it to fit the screen,
   preventing nav word-wrap without restructuring any layout.
   ---------------------------------------------------------------
*/

html {
	/* Signal: this site has its own colour scheme for both light and
	   dark. Browsers (including Samsung Internet) must use our
	   @media (prefers-color-scheme) rules instead of auto-processing. */
	color-scheme: light dark;
	/* Block Chrome's Auto Dark Mode heuristic from reprocessing
	   elements that have explicit background-color declarations. */
	forced-color-adjust: none;
	-webkit-forced-color-adjust: none;
	/* Prevent mobile browsers from auto-inflating font sizes on the
	   scaled page, which also affects colour rendering compositing. */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Page body background fills full viewport on mobile. */
	background: #2e5f64;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	/* Darker teal background - noticeably darker while staying in theme */
	background: #2e5f64;
	forced-color-adjust: none;
	-webkit-forced-color-adjust: none;
}

a:link, a:visited {
	color: #c7ff42;
	text-decoration: underline;
	font-weight: normal;
}

a:active, a:hover {
	color: #6ca815;
	text-decoration: none;
}

p {
	margin: 0px;
	padding: 0px;
}

img {
	margin: 0px;
	padding: 0px;
	border: none;
}

.cleaner {
	clear: both;
	width: 100%;
	height: 0px;
	font-size: 0px;
}

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }

.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }

/* Read More / button_01 - solid color, no image */
.button_01 a {
	clear: both;
	display: block;
	width: 100px;
	height: 26px;
	line-height: 26px;
	background: #186e7a;
	border: 1px solid #508a93;
	color: #c7ff42;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.button_01 a:link,
.button_01 a:visited {
	color: #c7ff42;
	text-decoration: none;
}

.button_01 a:hover {
	background: #508a93;
	color: #ffffff;
	text-decoration: none;
}

.fl { float: left; }
.fr { float: right; }

/* ============================================================
   HEADINGS
   ============================================================ */

h1 {
	margin: 0px;
	padding: 10px 0;
	font-size: 34px;
	color: #ffffff;
	font-weight: normal;
}

h2 {
	margin: 0 0 20px 0;
	padding: 5px 0 10px 0;
	font-size: 24px;
	color: #ffffff;
	font-weight: normal;
	border-bottom: 1px dotted #508a93;
}

h3 {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	font-size: 20px;
	color: #c7ff42;
	font-weight: normal;
	border-bottom: 1px dotted #508a93;
}

h4 {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	font-size: 20px;
	color: #c7ff42;
	font-weight: normal;
}

.em_text {
	color: #ffffff;
}

/* ============================================================
   TOP BAR  (Subscribe / Contact)
   The top bar keeps the lighter teal color (#6da2a8) matching
   the automobile page's top area. This is the "lighter color"
   area the user specified must be kept on sub-pages.
   ============================================================ */

#templatemo_top_bar {
	clear: both;
	width: 940px;
	height: 65px;
	padding: 5px 20px 0 20px;
	margin: 0 auto;
	/* Lighter teal - the "subscribe/contact" area stays the lighter color
	   as specified; kept at the original #6da2a8 so it stands out from
	   the darker body background */
	background: #6da2a8;
}

.rss_contact_section {
	float: right;
	width: 320px;
	padding-top: 8px;
}

/* Each Subscribe/Contact button wrapper */
.rss_contact {
	float: left;
	margin-left: 8px;
}

.rss_contact a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 5px 14px 6px 14px;
	font-size: 11px;
	text-decoration: none;
	font-weight: normal;
	background: #14515e;
	border: 1px solid #508a93;
	white-space: nowrap;
	line-height: 1.3em;
}

.rss_contact a:link,
.rss_contact a:visited {
	color: #ffffff;
	text-decoration: none;
}

.rss_contact a:hover {
	color: #c7ff42;
	background: #508a93;
	text-decoration: none;
}

/* Inline SVG icon sits above the button label text */
.rss_contact a .btn_icon {
	display: block;
	margin: 0 auto 3px auto;
	vertical-align: middle;
}

/* ============================================================
   BANNER
   Automobile mid-dark teal for the banner area.
   ============================================================ */

#templatemo_banner_bar_wrapper {
	clear: both;
	width: 100%;
	height: 100px;
	margin: 0 auto;
	/* Solid color replacing banner image - automobile dark teal */
	background: #508a93;
}

#templatemo_banner_bar {
	width: 940px;
	height: 80px;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
}

#templatemo_banner_bar h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

#templatemo_banner_bar h1 a:link,
#templatemo_banner_bar h1 a:visited {
	color: #ffffff;
	text-decoration: none;
}

#templatemo_banner_bar h1 a:hover {
	color: #c7ff42;
	font-weight: normal;
	text-decoration: none;
}

#templatemo_banner_bar h1 a span {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	color: #b8d8db;
}

/* Banner image slot - long skinny image to the right of site title.
   Sits inside the banner bar, floated right, with small top/bottom margins
   so the teal bar color is still visible above and below the image.
   If no image file is placed, the slot is invisible (no border, no placeholder).
   IMAGE DIMENSIONS: 660 pixels wide x 56 pixels tall.
   Place your image at images/banner_image.jpg (or .png) and
   uncomment the <img> tag inside #banner_image_slot in banner.html. */
#banner_image_slot {
	float: right;
	width: 660px;
	height: 56px;
	margin-top: 12px;
	margin-right: 0px;
	overflow: hidden;
	/* No border, no background - invisible when empty */
}

#banner_image_slot img {
	display: block;
	width: 660px;
	height: 56px;
	border: none;
}

/* ============================================================
   NAVIGATION MENU
   Automobile deep teal for menu bar.
   ============================================================ */

#templatemo_menu_wrapper {
	clear: both;
	width: 100%;
	height: 40px;
	margin: 0 auto;
	/* Solid color replacing menu image - automobile deep teal */
	background: #14515e;
	border-top: 2px solid #508a93;
	border-bottom: 2px solid #0a3540;
}

#templatemo_menu {
	width: 940px;
	height: 40px;
	margin: 0 auto;
	padding: 0 20px;
	/* No background image - solid handled by wrapper */
	background: none;
}

#templatemo_menu ul {
	padding: 6px 0 0 0;
	margin: 0px;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	padding: 3px 0;
	margin: 0 30px;
	margin-right: 10px;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	color: #d0e8ea;
}

#templatemo_menu li a:hover,
#templatemo_menu li .current {
	color: #c7ff42;
	border-bottom: 1px dotted #c7ff42;
	text-decoration: none;
}

#templatemo_menu li .fast {
	margin-left: 0px;
}

/* ============================================================
   CONTENT AREA
   Automobile deep body dark teal.
   ============================================================ */

#templatemo_content {
	clear: both;
	width: 940px;
	padding: 40px 20px 40px 20px;
	margin: 0 auto;
	/* Solid color replacing content bg image - automobile #14515e */
	background: #14515e;
	/* Ensures content area always expands with content height */
	overflow: hidden;
}

/* Main content column */
#main_column {
	float: left;
	width: 500px;
	margin-right: 40px;
}

.section_w500 {
	clear: both;
	margin-bottom: 30px;
}

.section_w500 p {
	text-align: justify;
	margin-bottom: 10px;
}

#main_column .image_wrapper {
	border: 1px solid #508a93;
	margin-top: 3px;
	margin-bottom: 3px;
}

#main_column .fl_image {
	float: left;
	margin-right: 20px;
}

#main_column .fr_image {
	float: right;
	margin-left: 20px;
}

.list_01 {
	clear: both;
	margin: 0 0 30px 50px;
	padding: 0px;
}

.list_01 li {
	padding: 0px;
	margin: 0 0 10px 0;
	list-style: decimal;
}

.list_01 li a:hover {
	color: #c7ff42;
	text-decoration: none;
}

/* ============================================================
   SIDEBAR COLUMNS
   Each sidebar column gets its own background color creating
   the vertical stripe effect. The overflow:hidden on
   #templatemo_content clips the padding-bottom trick so the
   stripes go from the nav bottom border exactly to the footer
   top border - no further.
   ============================================================ */

.side_column_w200 {
	float: left;
	color: #d0e8ea;
	width: 160px;
	padding: 0px 20px;
	/* Right sidebar stripe: slightly lighter teal than content bg */
	background: #1a6070;
	/* The padding-bottom + negative margin trick makes the background
	   fill the full height of the content area regardless of which
	   column is tallest. overflow:hidden on the parent clips it. */
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}

/* Left sidebar (categories/partners) gets a distinct darker stripe */
.side_column_categories {
	/* Slightly darker than right sidebar for visual separation */
	background: #0f3d49;
}

.side_column_w200 .box {
	margin-bottom: 30px;
	padding-top: 10px;
}

.side_column_w200 form {
	margin: 0px;
	padding: 0px;
}

/* Search / form inputs */
.inputfield {
	height: 16px;
	width: 145px;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
	background: #1a6070;
	border: 1px solid #508a93;
	color: #ffffff;
}

.submitbutton {
	float: right;
	margin: 0px;
	padding: 3px 8px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	background: #186e7a;
	border: 1px solid #508a93;
	color: #c7ff42;
	font-weight: bold;
}

.submitbutton:hover {
	background: #508a93;
	color: #ffffff;
}

/* Side nav lists */
.side_menu {
	list-style: none;
	padding: 0px;
	margin: 0 0 0 0;
}

.side_menu li {
	padding: 0;
	margin: 5px 0;
}

.side_menu li a {
	display: block;
	padding: 3px 0;
	color: #d0e8ea;
	font-weight: normal;
	text-decoration: none;
}

.side_menu li a:hover {
	color: #c7ff42;
	text-decoration: none;
}

/* Popular Topics news blocks */
.news_section {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px dotted #508a93;
}

.news_section .news_title a {
	color: #c7ff42;
	font-size: 12px;
	text-decoration: underline;
}

.news_section .news_title a:hover {
	color: #ffffff;
	text-decoration: none;
}

/* Optional image inside Popular Topics first block */
.news_section .topic_image {
	display: block;
	max-width: 156px;
	height: auto;
	margin-bottom: 5px;
	border: 1px solid #508a93;
}

.news_section .topic_image:hover {
	border-color: #c7ff42;
}

/* Ad / image spot boxes (second Popular Topics block, third block) */
.ad_spot {
	width: 156px;
	min-height: 80px;
	margin-bottom: 5px;
	text-align: center;
	overflow: hidden;
}

.ad_spot a {
	display: block;
}

.ad_spot img {
	max-width: 156px;
	height: auto;
	border: 1px solid #508a93;
	display: block;
}

.ad_spot img:hover {
	border-color: #c7ff42;
}

/* Keeps ad-network embeds (AdSense and similar provide an <ins> or
   <iframe> element rather than a plain <img>) from overflowing the
   156px-wide sidebar column the way a plain image already could not,
   since ad units do not always respect a parent's width on their own. */
.ad_spot iframe,
.ad_spot ins {
	max-width: 156px;
}

.ad_spot_desc {
	font-size: 11px;
	color: #d0e8ea;
	margin-top: 5px;
	text-align: left;
}

/* ============================================================
   SUB-PAGE SIDEBAR OVERRIDE
   On sub-pages the left sidebar (categories/partners) is hidden.
   The class .sub_page is placed on <body> of every sub-page.
   The main column expands to fill the space. The right sidebar
   keeps the same background stripe color as the home page on
   every page, for a consistent look site-wide.
   ============================================================ */

.sub_page #main_column {
	width: 700px;
}

/* Hide the categories/partners column entirely on sub-pages */
.sub_page .side_column_categories {
	display: none;
}

/* ============================================================
   FOOTER
   Automobile very dark teal / near-black footer.
   ============================================================ */

#templatemo_footer_wrapper {
	clear: both;
	width: 100%;
	margin: 0 auto;
	/* Solid color replacing footer image - automobile darkest */
	background: #0a3540;
	border-top: 3px solid #508a93;
}

#templatemo_footer {
	width: 940px;
	padding: 40px 20px 20px 20px;
	margin: 0 auto;
	/* overflow hidden so floats are contained */
	overflow: hidden;
}

.section_w184 {
	float: left;
	width: 144px;
	padding: 0 40px 0 0;
}

/* Flag counter zone - replaces the privacy policy section */
.flagcounter_spot {
	float: left;
	width: 328px;
	padding: 0 20px 0 0;
	min-height: 80px;
}

.flagcounter_spot h4 {
	/* h4 heading "Flag Counter" or user-chosen label */
	color: #c7ff42;
}

.footer_menu_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.footer_menu_list li {
	margin: 0px;
	padding: 0px;
}

.footer_menu_list li a {
	color: #d0e8ea;
	font-weight: normal;
	text-decoration: none;
}

.footer_menu_list li a:hover {
	color: #c7ff42;
	text-decoration: none;
}

/* Copyright bar - full width, centered, below all floated columns */
.section_w940 {
	clear: both;
	text-align: center;
	width: 940px;
	padding-top: 15px;
	margin-top: 10px;
	border-top: 1px dotted #508a93;
	color: #d0e8ea;
}

.section_w940 a {
	color: #c7ff42;
}

.section_w940 a:hover {
	color: #ffffff;
}

/* W3C validator badges - centered, below copyright */
.validators_bar {
	clear: both;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.validators_bar a img {
	border: 0;
	width: 88px;
	height: 31px;
	margin: 0 5px;
	vertical-align: middle;
}

/* ============================================================
   DOWNLOADS LIST
   Built by /dynamic-includes/downloads-list.php and dropped into
   downloads.html through an SSI virtual include. Kept inside the
   existing automobile-teal palette used by the calculator cards.
   ============================================================ */

.downloads_list {
	list-style: none;
	margin: 18px 0 0 0;
	padding: 0px;
}

.download_item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 14px;
	margin-bottom: 10px;
	background: #0f1923;
	border: 1px solid #2a3a4a;
	border-radius: 8px;
}

.download_icon_link {
	flex-shrink: 0;
	display: block;
	width: 32px;
	height: 32px;
	margin-top: 2px;
}

.download_icon {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	border: none;
}

.download_icon_generic {
	display: block;
	width: 32px;
	height: 32px;
}

.download_info {
	flex: 1;
	min-width: 0;
}

.download_name {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #c7ff42;
	text-decoration: underline;
	word-break: break-word;
}

.download_name:hover {
	color: #ffffff;
	text-decoration: none;
}

.download_desc {
	margin: 6px 0 0 0;
	font-size: 12px;
	line-height: 1.6em;
	color: #d0e8ea;
}

.downloads_empty {
	color: #d0e8ea;
	font-size: 13px;
}

/* ============================================================
   GALLERY GRID
   Built by /dynamic-includes/gallery-list.php and dropped into
   gallery.html through an SSI virtual include.
   ============================================================ */

.gallery_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
}

.gallery_item {
	width: 150px;
}

.gallery_thumb_link {
	display: block;
	width: 150px;
	height: 150px;
	overflow: hidden;
	background: #0f1923;
	border: 1px solid #2a3a4a;
	border-radius: 8px;
}

.gallery_thumb {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: cover;
	border: none;
}

.gallery_title {
	margin: 6px 0 0 0;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	word-break: break-word;
}

.gallery_desc {
	margin: 3px 0 0 0;
	font-size: 11px;
	line-height: 1.5em;
	color: #d0e8ea;
	word-break: break-word;
}

.gallery_empty {
	color: #d0e8ea;
	font-size: 13px;
}

/* ============================================================
   DARK MODE COLOUR LOCK — ALL BROWSERS
   ============================================================
   When the device or browser is in dark mode, this block runs.
   Every colour used anywhere on the site is re-declared here
   with !important, keeping them identical to the light/desktop
   version. Samsung Internet (with color-scheme "light dark") will
   use these rules instead of its Force Dark filter. All other
   browsers (Chrome Android, iOS Safari, Firefox) also use these
   rules in dark mode, so the site looks exactly the same
   regardless of the user's system colour scheme.
   ============================================================ */

@media (prefers-color-scheme: dark) {

	html {
		background: #2e5f64 !important;
		color-scheme: light dark !important;
	}

	body {
		background: #2e5f64 !important;
		color: #ffffff !important;
	}

	/* Global links */
	a:link, a:visited { color: #c7ff42 !important; }
	a:active, a:hover { color: #6ca815 !important; }

	/* Headings */
	h1 { color: #ffffff !important; }
	h2 {
		color: #ffffff !important;
		border-bottom-color: #508a93 !important;
	}
	h3 {
		color: #c7ff42 !important;
		border-bottom-color: #508a93 !important;
	}
	h4 { color: #c7ff42 !important; }

	/* Read More button */
	.button_01 a {
		background: #186e7a !important;
		border-color: #508a93 !important;
		color: #c7ff42 !important;
	}
	.button_01 a:hover {
		background: #508a93 !important;
		color: #ffffff !important;
	}

	/* Top bar */
	#templatemo_top_bar {
		background: #6da2a8 !important;
	}
	.rss_contact a {
		background: #14515e !important;
		border-color: #508a93 !important;
		color: #ffffff !important;
	}
	.rss_contact a:hover {
		background: #508a93 !important;
		color: #c7ff42 !important;
	}

	/* Banner */
	#templatemo_banner_bar_wrapper {
		background: #508a93 !important;
	}
	#templatemo_banner_bar h1 a,
	#templatemo_banner_bar h1 a:link,
	#templatemo_banner_bar h1 a:visited {
		color: #ffffff !important;
	}
	#templatemo_banner_bar h1 a:hover {
		color: #c7ff42 !important;
	}
	#templatemo_banner_bar h1 a span {
		color: #b8d8db !important;
	}

	/* Navigation menu */
	#templatemo_menu_wrapper {
		background: #14515e !important;
		border-top-color: #508a93 !important;
		border-bottom-color: #0a3540 !important;
	}
	#templatemo_menu ul li a {
		color: #d0e8ea !important;
	}
	#templatemo_menu li a:hover,
	#templatemo_menu li .current {
		color: #c7ff42 !important;
		border-bottom-color: #c7ff42 !important;
	}

	/* Main content area */
	#templatemo_content {
		background: #14515e !important;
	}
	#main_column .image_wrapper {
		border-color: #508a93 !important;
	}

	/* Right sidebar - same background on every page */
	.side_column_w200 {
		background: #1a6070 !important;
		color: #d0e8ea !important;
	}

	/* Left sidebar — categories and partners */
	.side_column_categories {
		background: #0f3d49 !important;
	}

	/* Search box */
	.inputfield {
		background: #1a6070 !important;
		border-color: #508a93 !important;
		color: #ffffff !important;
	}
	.submitbutton {
		background: #186e7a !important;
		border-color: #508a93 !important;
		color: #c7ff42 !important;
	}
	.submitbutton:hover {
		background: #508a93 !important;
		color: #ffffff !important;
	}

	/* Side navigation lists */
	.side_menu li a {
		color: #d0e8ea !important;
	}
	.side_menu li a:hover {
		color: #c7ff42 !important;
	}

	/* Popular Topics blocks */
	.news_section {
		border-bottom-color: #508a93 !important;
	}
	.news_section .news_title a {
		color: #c7ff42 !important;
	}
	.news_section .news_title a:hover {
		color: #ffffff !important;
	}
	.news_section .topic_image {
		border-color: #508a93 !important;
	}
	.news_section .topic_image:hover {
		border-color: #c7ff42 !important;
	}

	/* Ad/image spots */
	.ad_spot img {
		border-color: #508a93 !important;
	}
	.ad_spot img:hover {
		border-color: #c7ff42 !important;
	}
	.ad_spot_desc {
		color: #d0e8ea !important;
	}

	/* Footer */
	#templatemo_footer_wrapper {
		background: #0a3540 !important;
		border-top-color: #508a93 !important;
	}
	.footer_menu_list li a {
		color: #d0e8ea !important;
	}
	.footer_menu_list li a:hover {
		color: #c7ff42 !important;
	}
	.flagcounter_spot h4 {
		color: #c7ff42 !important;
	}
	.section_w940 {
		border-top-color: #508a93 !important;
		color: #d0e8ea !important;
	}
	.section_w940 a {
		color: #c7ff42 !important;
	}
	.section_w940 a:hover {
		color: #ffffff !important;
	}

	/* Downloads list */
	.download_item {
		background: #0f1923 !important;
		border-color: #2a3a4a !important;
	}
	.download_name {
		color: #c7ff42 !important;
	}
	.download_name:hover {
		color: #ffffff !important;
	}
	.download_desc {
		color: #d0e8ea !important;
	}
	.downloads_empty {
		color: #d0e8ea !important;
	}

	/* Gallery grid */
	.gallery_thumb_link {
		background: #0f1923 !important;
		border-color: #2a3a4a !important;
	}
	.gallery_title {
		color: #ffffff !important;
	}
	.gallery_desc {
		color: #d0e8ea !important;
	}
	.gallery_empty {
		color: #d0e8ea !important;
	}

} /* end @media (prefers-color-scheme: dark) */