/* -----| 1. GENERAL RESPONSIVE & SELECTS |---------------------------------- */

/* Selector to show or hide the change password button in user profiles */
#change_pass {
	display: none;
}

select,
select#tabs_dropdown_select {
	box-sizing: border-box;
	width: inherit;
	border-radius: 0 !important;
	height: inherit;
	margin: inherit;
	padding: inherit;
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 9px 6px;
	padding-right: 1.5rem;
	transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

@media screen and (min-width: 960px) {

	select,
	select#tabs_dropdown_select {
		font-size: .8em !important;
	}
}

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

	select,
	select#tabs_dropdown_select {
		font-size: 1em !important;
	}
}

#tabs_dropdown_span0 {
	align-items: inherit;
}

/* -----| 2. PAYMENT & RETURN BOXES |---------------------------------------- */

.ppreturnhead {
	color: #D51500;
	font-size: 1.6em;
	line-height: 2em;
}

.ppreturnhead-19926 {
	color: #5c5555;
	font-size: 2.5em;
	line-height: 2.3em;
}

.ppreturnboxed {
	display: block;
	clear: both;
	border: solid 1px #D51500;
	width: auto;
	max-width: 895px !important;
	padding: 15px 0;
	background-color: rgba(255, 255, 255, 0.75);
	font-size: 1.2em;
}

.ppreturnboxed>b {
	color: #D51500;
	font-size: 16px;
}

.ppreturnsub {
	font-weight: bold;
}

.ppreturnboxed-disc {
	font-size: 0.8em;
	line-height: 1em;
	margin: 0;
	font-weight: 100;
	font-style: italic;
}

/* -----| 3. SEARCH PAGE |--------------------------------------------------- */

.respsearch001 {
	position: relative;
	margin: 2vh 0;
	width: 100%;
	float: left;
}

.bigsearchinputside002 {
	width: 70%;
}

.bigsearchinputside003 {
	width: 95%;
	margin: 0 auto;
}

.hidden {
	visibility: hidden !important;
}

.srch001 {
	text-align: center;
	margin: 20px auto;
	width: 100%;
}

.srch002 {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	text-align: left;
}

.srch002r {
	text-align: right;
	margin: 8px auto;
	width: 30%;
	font-size: .7em;
}

.srch002 h3 {
	position: relative;
	font-size: 1em;
	color: #fff;
	width: 95%;
	background-color: rgba(143, 133, 114, 0.6);
	margin: 15px 0;
	padding: 2px 10px;
	text-align: left;
	clear: both;
}

.srch003 {
	position: relative;
	float: none;
	clear: both;
	width: 95%;
	max-width: 250px;
	margin: 0px;
	padding: 2px 10px;
	text-align: left;
}

.srch004 {
	position: relative;
	clear: both;
	line-height: 1.8em;
	font-size: .7em;
	font-weight: 100;
	font-style: italic;
}

.srch004sp {
	height: 4vh;
	clear: both;
}

select.listboxrsp {
	margin: -20px auto 0 auto;
	background-color: #cdcdcd;
	border: 1px solid rgb(166, 166, 166);
	border-radius: 0 !important;
	width: 100%;
	font-size: .8em;
	height: 35px;
}

/* -----| 4. NAVIGATION & MENUS |-------------------------------------------- */

#header002>nav>ul {
	z-index: 50200 !important;
}

nav a {
	color: #000 !important;
}

nav ul {
	text-align: left;
	display: inline;
	margin: 0;
	padding: 20px 0;
	list-style: none;
	float: right;
	position: relative;
	bottom: -9px;
	gap: 100px;
}

nav ul li {
	font-size: 16px;
	color: #fff;
	display: inline-block;
	margin-right: -4px;
	position: relative;
	padding: 15px 15px;
	cursor: pointer;
	transition: all 0.2s;
	z-index: 50001 !important;
	margin: 0;
	height: 21px;
}

/* Hides the li if it has no child elements or content */
#sys_drop_down>li:empty {
	display: none;
}

/* The modern way: Hides the li if it doesn't contain an <a> tag */
#sys_drop_down>li:not(:has(a)) {
	display: none;
}

nav ul li:hover {
	background: var(--navhover);
}

nav ul li:hover>a {
	color: #fff !important;
}

nav ul li>ul {
	padding: 0;
	position: absolute;
	top: 51px;
	left: 0;
	width: 200px;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s;
}

nav ul li ul li {
	background: rgba(255, 255, 255, 1);
	display: block;
	color: #000;
	box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2);
}

nav ul li ul li:hover {
	background: var(--blue);
}

nav ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

.navmenu_pic {
	text-align: center;
	max-width: 500px;
}

.navmenu_pic:link,
.navmenu_pic:visited {
	color: rgba(255, 255, 255, 0.5) !important;
	transition: .5s;
}

.navmenu_pic:hover {
	color: rgba(255, 255, 255, 1) !important;
}

td.navmenu {
	background-color: var(--lightgray);
	padding: 7px 0;
}

/* -----| 5. BRANDS LEGEND |------------------------------------------------- */

#brandlegend li {
	float: left !important;
	margin: 0 30px 0 0;
}

.brvet a:link,
.brvet a:visited {
	color: #c28800;
}

.bragr a:link,
.bragr a:visited {
	color: #b900c2;
}

.brhcare a:link,
.brhcare a:visited {
	color: #006ce6;
}

.brhcare a:hover,
.brvet a:hover,
.bragr a:hover {
	color: #000;
}

li.brvet {
	list-style-image: url('../../themes/adp2026/images/paw-solid.svg');
}

.brcan a:link,
.brcan a:visited {
	color: #638c0e;
}

li.brcan {
	list-style-image: url('../../themes/adp2026/images/cannabis-solid.svg');
}

li.email {
	list-style-image: url('../../themes/adp2026/images/envelope-solid.svg');
	font-size: 1em !important;
}

li.brhcare {
	list-style-image: url('../../themes/adp2026/images/human-solid.svg');
}

li.bragr {
	list-style-image: url('../../themes/adp2026/images/wheat-solid.svg');
}

/* -----| 6. SUBSCRIPTION FORM & POSTS |------------------------------------- */

body {
	background: #f5f5f5;
}

#main {
	background: white;
	margin: 40px auto;
	width: 800px;
	padding: 10px;
	min-height: 600px;
	border: 1px solid #eee;
}

.simple-price-total label {
	color: green;
	font-weight: bold;
	font-size: 20px;
}

select.subscription {
	height: 40px;
	padding: 16px 20px !important;
	font-size: 1em;
	border: none;
	border-radius: 4px;
	background-color: #e8e8e8;
	margin: 10px 0;
	box-shadow: 0 1px 3px #BBBDC0;
}

.requestinvoice {
	clear: both;
	width: 98.9%;
	text-align: center;
	position: relative;
	top: -3px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 3px #BBBDC0;
}

/* -----| 7. MEDIA DOWNLOADS & COLLECTIONS |--------------------------------- */

.mediadownload a,
.mediadownload a:visited,
.ml-pill {
	color: #fff;
	background-color: rgba(59, 153, 525, .8);
	font-size: 1em;
	text-decoration: none;
	padding: 0 1.2em;
	height: 2.6em;
	display: inline-flex;
	gap: .3em;
	/* Adds space between the icon and text */
	align-items: center;
	border-radius: 50px;
	transition: background-color 0.3s ease;
}

.mediadownload a:hover {
	background-color: rgba(27, 134, 240, 1);
}

.mediadownloadrow {
	padding: 10px 0;
}

/* Collection Management Pills */
.ml-pill-wrapper {
	display: flex;
	gap: .25em;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* Add Pill: Medium Gray Background */
.ml-pill-add {
	background: #c3c3c3;
	/* Medium Gray */
	color: white;
}

.ml-btn-add {
	color: #fff;
}

/* In Pill: Transparent with Gray Outline */
.ml-pill-rem {
	background: transparent;
	border: 1px solid #c3c3c3;
	color: #c3c3c3;
	padding: 4px 12px;
	font-size: 12px;
}

/* Normal State */
.ml-link {
	color: #c3c3c3 !important;
	font-weight: 600 !important;
	/* or whatever grey you want */
	text-decoration: none;
}

/* Hover State */
.ml-link:hover {
	color: rgba(107, 107, 107, 1) !important;
	/* Now this works without !important */
}

.ml-label-text {
	font-weight: bold;
	font-size: 13px;
	margin-right: 8px;
	white-space: nowrap;
}

.ml-select-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	padding-right: 22px;
}

.ml-select {
	background: transparent;
	border: none;
	color: white;
	padding: 4px 8px;
	font-size: 13px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

.ml-select option {
	color: #c3c3c3;
}

/* 1. Styles the main box of the dropdown */
.ml-select {
	font-size: 1.0em !important;
	/* Change to desired size */
	font-weight: 600 !important;
	/* Change to normal or bold */
	padding: 2px 5px;
	/* Adds breathing room */
}

/* 2. Styles the list of names when clicked */
.ml-select option {
	font-weight: 600;
	/* Options often look better normal weight */
}

.ml-icon {
	position: absolute;
	right: 6px;
	pointer-events: none;
	font-size: 10px;
}

.ml-btn {
	background: transparent;
	border: none;
	font-size: 16px;
	margin-left: 10px;
	cursor: pointer;
	padding: 2px 5px;
	display: flex;
	align-items: center;
	color: inherit;
}

.ml-btn-x {
	margin-left: 6px;
	font-size: 14px;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.ml-btn-x:hover {
	opacity: 1;
	color: #dc3545;
}


/* -----| 8. UTILITY HIDES & FALLBACKS |------------------------------------- */

/* Hide Disk usage row */
#cpgform tr:has(td:contains("Disk usage")),
#cpgform tr:has(i.fa-hdd-o),
#cpgform tr:nth-last-child(5) {
	display: none !important;
}

/* Hide My Collection row in file info */
tr:has(a[href*="addfav.php"]),
#picinfo tr:has(td:contains("My Collection")) {
	display: none !important;
}

/* This targets ONLY links inside the zipdownload class */
.zipdownload a:link,
.zipdownload a:visited {
	color: rgba(255, 255, 255, 0.7) !important;
	text-align: right;
	display: inline-block;
	width: 100%;
}

.zipdownload a:hover {
	color: rgba(255, 255, 255, 1) !important;
	text-align: right;
}

/* Apply this to the main header container */
.your-header-container-class {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	/* Ensure it spans the full width */
}

/* Apply this to the collection title element */
.your-collection-title-class {
	flex-grow: 1;
	/* Allows the title to take up available space */
	text-align: center;
	/* Centers the text */
	margin: 0 20px;
	/* Adds some spacing from the side elements */
}

.collectiontitle {
	font-size: 1.2em;
	font-weight: 300;
}
.backtocollection:link, .backtocollection:visited {
	font-size: .8em;
	font-weight: 300;
	color: rgba(255, 255, 255, 1);

}
.backtocollection:hover {
	text-decoration: underline;
}

/* The "Back to Collections" and "Download as Zip" elements don't need extra alignment styles
   as justify-content: space-between will place them at the ends. */


.redbutton,
#topres,
#topbutton {
	font-size: .8em;
	padding: 10px !important;
	line-height: 12px;
	border: none;
	color: #fff;
	text-align: center;
	position: relative;
	display: inline-block;
	/* border: solid 1px #fff; */
	background: var(--buttonnormal);
	-webkit-transition-duration: 0.4s;
	/* Safari */
	transition-duration: 0.4s;
	text-transform: uppercase;
}

/* Target the LI that contains the MenuNoDisplay div */
#sys_drop_down li:has(div.MenuNoDisplay) {
	display: none !important;
}

/* Target the icon image specifically inside the Filetypes Editor link */
#sys_drop_down img.icon[alt=""],
#sys_drop_down a[title*="File types"] img.icon {
	display: none !important;
}

/* 1. Hides the 'My Collection' row in the file info table */
tr:has(a[href*="addfav.php"]) {
	display: none !important;
}

/* 2. Safety fallback: Hides the row if it contains the specific text */
#picinfo tr:has(td:contains("My Collection")) {
	display: none !important;
}

.adpharmtagline {
	font-style: italic;
}

.thcapadm {
	display: block;
	padding: 10px;
	background-color: #fff;
	-webkit-border-radius: 10px 0 10px 0;
	-moz-border-radius: 10px 0 10px 0;
	border-radius: 10px 0 10px 0;
	border-bottom: rgb(206, 206, 206) solid 1px;
	border-right: rgb(206, 206, 206) solid 1px;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
	/* 1. Set the font family clearly */
	font-family: 'Open Sans', sans-serif;

	/* 2. Use a weight that you actually loaded (300, 400, or 600) */
	/* If you want 100, you must update your @import link to include it */
	font-weight: 100;

	/* 3. Force the font to be upright (non-italic) */
	font-style: normal;

	color: #424242;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

.maintable {
	margin: 0 auto !important;
	width: 90%;
}

.tableh1-spacing {
	margin: 0 0 100px;
}

.tableh1-breadcrumb {
	padding: 6px;
	border: none;
	background-color: transparent;
	font-weight: bold;
	color: var(--blue);
	text-indent: 4px;
	font-weight: 500;
	font-size: 14px;
	width: 100% !important;
}

.tableh1-breadcrumb td {
	align-content: center;
}


.pic_title {
	font-weight: 400;
	color: #49433d;
	font-size: 22px;
	line-height: 26px;
	margin: 0;
	padding: 0;
	text-align: left;

}

.pic_caption {
	text-align: left;
	font-weight: 100;
	line-height: 1.6em;
	font-size: 1em;
	padding: 0 0 25px 25px;
}

#content {
	font-size: 1em;
	line-height: 1.6em;
	min-height: 200px;
	margin: 0 auto;
}

.tableb {
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 7px;
	padding-left: 5px;
	/* max-width: 700px; */
	/* width: auto; */
	margin: auto;
}

.pic_caption a:link {
	color: var(--blue);
}

.pic_caption a:hover,
.pic_caption a:visited {
	color: #676767;

}

.footer {
	display: none;
}


.textinput {
	font-size: 16px;
	line-height: 22px;
	padding: 20px 10px !important;
	color: #646975;
	background-color: var(--formbg);
	width: 100%;
	height: 18px;
	border: 1px solid var(--formborder);
	text-align: LEFT;
	vertical-align: middle;
	border-radius: 4px;
}


.cpg_starttable_inner {
	padding: 10px;
	background-color: var(--tableheader);
	border: none;
	color: #fff;
	text-indent: 6px;
	font-weight: 500;
	font-size: 1.3em;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}


@media screen and (max-width: 959px) {
	#cpg_global_notices {
		margin: 70px 0 -55px;
		display: block;
		width: 100%;
		z-index: -100 !important;
		/* Ensures nothing can squeeze in beside it */
	}
}

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

	#adp_carousel_container {
		display: none;
		!important
	}
}



/*  START: CPG messages style adjustments */


.cpg_message_info,
.cpg_message_success,
.cpg_message_warning,
.cpg_message_error,
.cpg_message_validation {
	position: absolute;
	top: 50%;
	left: 50%;
	/* This is the magic line that fixes the centering */
	transform: translate(-50%, -50%);
	/* The Halo Effect */
	box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);

	width: fit-content;
	height: fit-content;
	padding: 2% 4%;
	text-align: center;
	background-repeat: no-repeat;
	background-position: 15px center;
	/* Takes the variable and mixes it with 20% transparency */
	background-color: color-mix(in srgb, var(--messageyellow), transparent 10%);
	/* Optional: Improves readability of the "halo" on transparent backgrounds */
	backdrop-filter: blur(4px);

	color: #000;
	z-index: 15000 !important;
	border-radius: 1em;

	/* Optional: prevents the box from being wider than the screen on mobile */
	max-width: 90%;
}

.cpg_msg_close {
	position: absolute;
	top: 5px;
	right: 12px;
	cursor: pointer;
	font-size: 2em;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
	line-height: 1;
}

.cpg_msg_close:hover {
	color: #000;
}

/* Optional: Add a fade-out animation */
.fade-out {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.cpg_message_success {
	color: #4F8A10;
	font-color: #000;
	background-color: #DFF2BF;
	background-image: url(../../images/message/ok002.png);
	z-index: 5000 !important;

}

.cpg_message_warning {
	background-color: #FEEFB3;
	background-image: url(../../images/message/warning002.png);
	z-index: 5000 !important;

}

.cpg_message_error {
	color: #BD934F;
	background-color: #FEEFB3;
	background-image: url(../../images/message/warning002.png);
	z-index: 5000 !important;

}

.cpg_message_validation {
	color: #000;
	background-color: #FEEFB3;
	background-image: url(../../images/message/warning002.png);
	z-index: 5000 !important;

}


/* Desktop START */
@media screen and (min-width: 960px) {
	@keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			overflow: hidden;
		}
	}

	@-webkit-keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			visibility: hidden;
		}
	}

}

/* Desktop END */

@media screen and (min-width: 601px) and (max-width: 959px) {

	/* Mobile START */
	.cpg_message_info,
	.cpg_message_success,
	.cpg_message_warning,
	.cpg_message_error,
	.cpg_message_validation {
		margin: -10px auto 10px;
		padding: 17px;
		background-color: #ffc415;
		text-align: center;
		clear: both;
		font-size: 1.2em;
		line-height: 1.3em;
		z-index: 50000 !important;
		display: block;
		width: 96%;
	}

	@keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			overflow: hidden;
		}
	}

	@-webkit-keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			visibility: hidden;
		}


	}

	.cpg_message_info {
		background-image: url('../../../themes/adp2026/images/message/info002.png');
	}

	.cpg_message_success {
		background-image: url('../../../themes/adp2026/images/message/ok002.png');
	}

	.cpg_message_warning {
		background-image: url('../../../themes/adp2026/images/message/warning002.png');
	}

	.cpg_message_error {
		background-image: url('../../../themes/adp2026/images/message/warning002.png');
	}

	.cpg_message_validation {
		background-image: url('../../../themes/adp2026/images/message/error002.png');
	}
}

/* Mobile END */

/* Max 600 px START */
@media screen and (max-width: 600px) {

	.cpg_message_info,
	.cpg_message_success,
	.cpg_message_warning,
	.cpg_message_error,
	.cpg_message_validation {
		color: #000;
		margin: -10px auto 10px;
		padding: 17px;
		background-color: #ffc415;
		text-align: center;
		clear: both;
		font-size: 1.2em;
		line-height: 1.3em;
		z-index: 50000 !important;
		display: block;
		width: 94.5%;

	}

	@keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			overflow: hidden;
		}
	}

	@-webkit-keyframes cssAnimation {
		to {
			width: 0;
			height: 0;
			visibility: hidden;
		}


	}

	.cpg_message_info {
		background-image: url('../../../themes/adp2026/images/message/info002.png');
	}

	.cpg_message_success {
		background-image: url('../../../themes/adp2026/images/message/ok002.png');
	}

	.cpg_message_warning {
		background-image: url('../../../themes/adp2026/images/message/warning002.png');
	}

	.cpg_message_error {
		background-image: url('../../../themes/adp2026/images/message/warning002.png');
	}

	.cpg_message_validation {
		background-image: url('../../../themes/adp2026/images/message/error002.png');
	}
}

/* Max 600 px END */
/*  End: CPG messages style adjustments */


/* Login Modal START */

/* --- ADP Login Modal Styles --- */
.adp-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 9999999;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.adp-modal-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.9);
	padding: 2em 2.5em .5em;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.adp-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	cursor: pointer;
	font-size: 30px;
	font-weight: bold;
	color: #554e47;
}

.adp-warning-box {
	display: none;
	color: #fff;
	font-weight: bold;
	margin-bottom: 15px;
	background: rgba(54, 54, 54, 0.4);
	padding: 10px;
	border-radius: 5px;
}

.adp-modal-title {
	margin-bottom: 20px;
	font-weight: 900;
	text-transform: uppercase;
	color: #554e47;
}

.adp-login-input {
	width: 100%;
	padding: 15px;
	margin: 10px 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	font-size: 16px;
	box-sizing: border-box;
	/* Ensures padding doesn't break width */
}

.adp-login-btn {
	width: 100%;
	padding: 15px;
	background: #554e47;
	color: white;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 10px;
}

/* --- ADP Carousel Styles --- */
.adp-carousel-container {
	width: 100%;
	height: 500px;
	background-color: #000;
	position: relative;
}

.adp-carousel-overlay {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

.adp-carousel-text {
	background-color: rgba(204, 204, 204, 0.8);
	width: fit-content;
	margin: 0;
	padding: 20px;
	font-weight: bold;
	font-family: sans-serif;
	border-radius: 4px;
	line-height: normal;
}

.adp-modal-subscribe {}

.adp-modal-subscribe p {
	width: auto;
	height: fit-content;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.6em;


}

/* Login Modal END */

.medianodownload {
	padding: 10px;
	font-size: .8em;
}


/* -------------------------------------------------------------------------
   ADP Carousel Styles
   ------------------------------------------------------------------------- */

.adp-carousel-container {
	position: relative;
	width: 100%;
	/* Ensures minimum width on desktop as requested */
	min-width: 959px;
	height: 500px;
	overflow: hidden;
	background-color: #000;
	/* Updated margin to pull container up by 18px */
	margin: -18px auto 0 auto;
	font-family: Arial, Helvetica, sans-serif;
}

/* Individual Slide */
.adp-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Background properties */
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;

	/* Transition effect */
	opacity: 0;
	transition: opacity 1.0s ease-in-out;
	z-index: 1;
}

/* Active Slide State */
.adp-slide.active {
	opacity: 1;
	z-index: 2;
}

/* Content Overlay Box (Bottom) */
.adp-slide-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	/* Gradient fade for text readability */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.95) 100%);
	color: #fff;
	text-align: center;
	padding-bottom: 30px;
	padding-top: 40px;
}

/* Red Separator Line (Progress Bar) */
.adp-red-line {
	width: 0;
	/* Start at 0 for animation */
	height: 4px;
	background-color: #d0342c;
	/* ADP Red */
	position: absolute;
	bottom: 0;
	/* Align to bottom of the overlay/stage */
	left: 0;
	z-index: 10;
}

/* Animate line when slide is active - Updated to 5 seconds */
.adp-slide.active .adp-red-line {
	animation: adpGrowLine 5s linear forwards;
}

@keyframes adpGrowLine {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

/* Typography */
.adp-slide-overlay h3 {
	font-size: 28px;
	font-weight: normal;
	margin: 0 0 10px 0;
	color: #fff;
}

.adp-slide-overlay p {
	font-size: 15px;
	line-height: 1.5;
	max-width: 900px;
	margin: 0 auto 20px auto;
	color: #e0e0e0;
}

/* Buttons and Links */
.adp-btn-row {
	font-size: 13px;
	color: #ccc;
	/* Ensure spacing between text and buttons */
	margin-top: 15px;
}

/* Standard Button (Stage 1 & 2) */
.adp-btn-red {
	background-color: #d0342c;
	color: #fff !important;
	padding: 5px 10px;
	/* Fixed padding */
	text-decoration: none !important;
	font-size: 12px;
	line-height: 14px;
	/* Fixed line-height */
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
	border: 1px solid #d0342c;
	transition: background-color 0.3s;
	vertical-align: middle;
}

.adp-btn-red:hover {
	background-color: #b02c25;
	text-decoration: none;
}

/* Inline Button (Stage 3) - Matched to Standard Button */
.adp-btn-red-inline {
	background-color: #d0342c;
	color: #fff !important;
	/* Force white text for link */
	padding: 5px 10px;
	/* Match Standard Button */
	font-weight: bold;
	font-size: 12px;
	/* Match Standard Button */
	line-height: 14px;
	/* Match Standard Button */
	text-transform: uppercase;
	/* Match Standard Button */
	text-decoration: none !important;
	/* No underline */
	display: inline-block;
	/* Allows padding to affect height */
	border: 1px solid #d0342c;
	vertical-align: middle;
	margin: 0 2px;
	white-space: nowrap;
	transition: background-color 0.3s;
}

.adp-btn-red-inline:hover {
	background-color: #b02c25;
	text-decoration: none;
}

.adp-text-light {
	color: #ccc;
	font-size: 13px;
}

/* Mobile Fallback */
@media (max-width: 958px) {
	.adp-carousel-container {
		min-width: 100%;
		height: auto;
		min-height: 300px;
		margin-top: 0;
		/* Reset negative margin on mobile if needed */
	}

	.adp-slide-overlay h3 {
		font-size: 20px;
	}
}

/* Container for the "137 files on 14 page(s)" and pagination */
.tablefooter {
	background-color: #444;
	/* Match your dark grey */
	color: #ffffff;
	padding: 10px;
	font-size: 12px;
}

/* Fix for the crowded pagination links */
.navmenu a {
	padding: 0 5px;
	/* Adds space between the numbers */
	color: #fff;
	/* Matches your current blue link color */
	text-decoration: none;
}

.navmenu a:hover {
	/* text-decoration: underline; */
	background-color: #000;
}

/* Style for the 'Jump to page' dropdown */
select[name="jump"] {
	margin-left: 10px;
	border-radius: 4px;
	border: 1px solid #ccc;
}

/* Remove backgrounds from the internal cells so the main bar's gradient shows through */
.navmenu_table,
.navmenu_table td {
	background: transparent !important;
	border: none !important;
}

/* Style the Font Awesome arrows and numbers to give them breathing room */
.navmenu i {
	padding: 0 10px;
	vertical-align: middle;
}

.navmenu a,
.navmenu b {
	padding: 2px 8px;
	margin: 0 2px;
	text-decoration: none;
}

/* Target only the pagination table cells to fix gradient breaks */
.maintable tr td.tableh1:has(.navmenu),
.maintable tr td.navmenu,
.maintable tr td.allpages_dropdown {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Ensure the parent row has the continuous gradient */
.maintable tr:has(.navmenu) {
	background: var(--tableheader);
	color: #ffffff !important;
}

/* Style the page numbers and chevrons */
.navmenu a,
.navmenu b {
	color: #fff !important;
	padding: 0 8px !important;
	text-decoration: none !important;
	display: inline-block;
}

.navmenu b {
	color: #ffffff !important;
	/* Current page is white */
}

.navmenu i.fas {
	font-size: 14px;
	vertical-align: middle;
}

/* Fix the dropdown styling so it is readable against the dark bar */
.navmenu select {
	background: #fff !important;
	color: #000 !important;
	border: 1px solid #ccc;
	padding: 1px;
	margin-left: 5px;
}

/* Alternate row BG colors for list */
.listalternate

/*, #cpgform tr*/
	{
	background-color: rgba(143, 133, 114, 0.25);
}

.listalternate:nth-child(even)

/*, #cpgform tr :nth-child(even)*/
	{
	background-color: rgba(143, 133, 114, 0.15);
}

/* Alternate row BG colors for list */


.cookietable {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: auto;
	grid-gap: 5px;

}

.cookieheaderw {
	font-weight: 600;
	background-color: #6e6a66;
	color: #ffffff;
	padding: 10px;
}

.cookieheadern {
	display: none;
}

.cookiecol {
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.73);

}

input:autofill,
input:-webkit-autofill-strong-password,
input:-webkit-autofill-strong-password-viewable,
input:-webkit-autofill-and-obscured {
	background-color: rgb(208, 255, 189);
	background-image: none;
	color: rgb(0, 0, 0);
}

div.panel {
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	position: relative;
	left: 20px;
	padding: 0;
	-webkit-border-radius: 0 0 20px 20px;
	-moz-border-radius: 0 0 20px 20px;
	border-radius: 0 0 20px 20px;
}

@media screen and (max-width: 750px) {
	div.panel {
		background-color: white;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		position: relative;
		left: 0;
		padding: 0;
		-webkit-border-radius: 0 0 20px 20px;
		-moz-border-radius: 0 0 20px 20px;
		border-radius: 0 0 20px 20px;
	}
}

.navmenu {
	color: #fff;
}

/* --- STEPPER DROPDOWN INTEGRATION --- */

/* 1. Force remove all Coppermine table shadows and borders */
body .nav-container-fix,
body .maintable tr td.tableh1:has(.gallery-nav-footer),
body .maintable tr:has(.gallery-nav-footer) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* 2. Main Dark Footer Bar Styling */
body .gallery-nav-footer {
	background-color: var(--tablefooter) !important;
	color: #ffffff !important;
	padding: 8px 20px !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	/* Stats left, Nav right */
	margin-top: 15px !important;
	box-shadow: none !important;
	border: none !important;
}

/* 3. Stats Text */
.gallery-nav-footer .footer-stats {
	color: #ffffff !important;
	font-size: 14px !important;
	opacity: 0.9;
	white-space: nowrap !important;
}

/* 4. Stepper Section */
.gallery-nav-footer .nav-section {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	height: 22px !important;
}

/* 5. Dropdown Box Styling */
.gallery-nav-footer .jump-select {
	box-sizing: border-box;
	width: inherit;
	height: 22px;
	border-radius: 0 !important height: inherit;
	margin: inherit;
	padding: inherit;
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>"); */
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 9px 6px;
	padding-right: 1.5rem;
	transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}


/* 6. Chevron Buttons Styling */
.gallery-nav-footer .nav-btn {
	background-color: var(--buttonnormal) !important;
	border-radius: 5px !important;
	width: 55px !important;
	height: 22px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: white !important;
	transition: background-color 0.2s ease !important;
}

.gallery-nav-footer .nav-btn:hover {
	background-color: var(--buttonhover) !important;
}

/* --- 7. MOBILE REFINEMENT (< 959px) --- */
@media (max-width: 959px) {
	.gallery-nav-footer {
		padding: 8px 12px !important;
		/* Slightly tighter padding */
		border-radius: 0 !important;
		justify-content: space-between !important;
		/* Keeps Stats Left, Nav Right */
	}

	.gallery-nav-footer .footer-stats {
		display: block !important;
		font-size: 11px !important;
		/* Shrunk slightly to fit better on small screens */
		max-width: 40%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gallery-nav-footer .nav-section {
		justify-content: flex-end !important;
		gap: 8px !important;
	}

	.gallery-nav-footer .jump-select {
		min-width: 75px !important;
		/* Slightly narrower to save space */
		height: 22px !important;
		font-size: 1em !important;
	}

	.gallery-nav-footer .nav-btn {
		width: 50px !important;
		/* Slightly narrower for mobile */
		height: 22px !important;
	}
}

/* Firefox Arrow fix */
@-moz-document url-prefix() {
	.gallery-nav-footer .jump-select {
		text-indent: 0.01px;
		text-overflow: "";
	}
}

button.adp2026accordion::after {
	content: "\002B";
	color: #fff !important;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

button.adp2026accordion {
	background-color: #a7a7a7;
	color: #000;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	height: fit-content;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
	opacity: 0.7;
}

button.adp2026accordion.active,
button.adp2026accordion:hover {
	opacity: 1;

}


.inner_panel {
	padding: 1em !important;
	height: fit-content;
}


.buttonlink2:hover {
  background-color: var(--grayhover);
  color: #fff;
  -moz-box-shadow: 0 2px 2px rgba(107, 107, 107, 0.5);
  -webkit-box-shadow: 0 2px 2px rgba(107, 107, 107, 0.5);
  box-shadow: 0 2px 2px rgba(107, 107, 107, 0.5);
}

.downloadlink,
.downloadlink:link,
.downloadlink:visited {
  background-color: rgba(255, 255, 255, 0.75);
  color: rgba(107, 107, 107, 0.75);
  position: relative;
  display: inline-block;
  clear: both;
  padding: 5px 12px !important;
  font-size: 10pt;
  font-weight: 100 !important;
  min-height: 20px;
  margin: 5px 0 !important;
  border-radius: 3px;
  border: solid 1px rgba(84, 78, 72, 0.37);
}

.downloadlink:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #000 !important;
  -moz-box-shadow: 0px 4px 10px #aeac96;
  -webkit-box-shadow: 0px 4px 10px #aeac96;
  box-shadow: 0px 4px 10px #aeac96;
}

.buttonlink,
.buttonlink:link,
.buttonlink:visited,
.buttonlink2,
.buttonlink2:link,
.buttonlink2:visited {
  background-color: var(--gray);
  color: #fff !important;
  position: relative;
  display: inline-block;
  clear: both;
  padding: 5px 10px !important;
  font-size: 0.7em;
  font-weight: 100 !important;
  min-height: 20px;
  margin: 15px 0 0 !important;
}

.buttonlink,
.buttonlink:link,
.buttonlink:visited,
.buttonlink2,
.buttonlink2:link,
.buttonlink2:visited {
border-radius: 3px;
}

.buttonlink:hover,
.buttonlink2:hover {
  background-color: rgba(107, 107, 107, 1);
  box-shadow: 0 2px 2px rgba(107, 107, 107, 0.5);
}

.brandlink {
  background: #fff;
  position: relative;
  display: inline-block;
  clear: both;
  padding: 5px 12px !important;
  font-size: 10pt;
  font-weight: 100 !important;
  border-bottom: #cdcdcd solid 2px;
  min-height: 20px;
  margin: 20px 0 20px 0 !important;
}

.brandlink:first-of-type,
.buttonlink:first-of-type {
  margin-top: 20px !important;
}

.brandlink a:link {
  color: #a5a5a5 !important;
}

.brandlink a:visited {
  color: #a5a5a5 !important;
}

.brandlink a:hover {
  color: #000 !important;
}

.campaignlink {
  background: #fff;
  position: relative;
  display: inline-block;
  clear: both;
  padding: 6px 12px !important;
  font-size: 10pt;
  font-weight: 100 !important;
  border-bottom: #cdcdcd solid 2px;
  min-height: 20px;
  margin: -15px 0 20px 0 !important;
}

.campaignlink:first-of-type {
  margin-top: 25px !important;
}

.campaignlink a:link {
  color: #a5a5a5 !important;
}

.campaignlink a:visited {
  color: #a5a5a5 !important;
}

.campaignlink a:hover {
  color: #000 !important;
}

.accordion .accordion-navigation > a,
.accordion dd > a {
  background: #cfcfcf !important;
}

.accordion .accordion-navigation > a:hover,
.accordion dd > a {
  background: #b9b9b9 !important;
}

.accordion .accordion-navigation > .content.active,
.accordion dd > .content.active {
  border-bottom: #cdcdcd solid 2px;
}

.accordion-navigation > a:after {
  content: "↓";
  color: #fff;

  padding-left: 5px;
  float: right;
  font-size: 20px;
}

.accordion-navigation.active > a:after {
  content: "↑";
  color: #fff;
}

.accordion {
  max-width: 560px;
  width: 100%;
  position: relative;
  left: -22px;
  width: 100%;
  margin: 0 0 0 auto;
}

.accordion > .accordion-navigation > a {
  font-family: "Open Sans", sans-serif, sans-serif;
  color: #c5341c;
  font-weight: 600 !important;
  font-size: 1.6em;
  line-height: 1.6em;
}


.accordion-navigation > a:after {
  content: "↓";
	color: #fff;

  padding-left: 5px;
  float: right;
  font-size: 20px;
  #margin-left: 100px; }
.accordion-navigation.active > a:after {
  content: "↑";
  color: #fff;
}

.accordion {
	max-width: 560px;
	width: 100%;
	position: relative;
	left: -22px;
	width: 100%;
	margin: 0 0 0 auto;
	
}

.accordion > .accordion-navigation > a {
	font-family:'Open Sans', sans-serif, sans-serif;
	color: #C5341C;
	font-weight: 600 !important;
	font-size: 1.6em;
	line-height: 1.6em;
	
}
.content.active {
	border-bottom: #cdcdcd solid 2px;
		border: #e8e8e8 solid 1px;

   
}


HTML
<style>
  .pricing-container {
	display: flex;
	flex-direction: column; /* Mobile first: vertical stack */
	gap: 20px;
	width: 100%;
	max-width: 1100px;
	margin: 20px auto;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #333;
  }

  .pricing-card {
	flex: 1;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 25px;
	display: flex;
	flex-direction: column;
	background: #fff;
	position: relative;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Highlight Monthly as "Most Popular" based on your screenshot */
  .popular-card {
	border: 2px solid #c04a2d;
  }

  .badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #f4f4f4;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	border: 1px solid #ddd;
  }

  .plan-icon {
	width: 60px;
	margin-bottom: 15px;
  }

  .plan-name {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
  }

  .price-box {
	margin: 20px 0;
  }

  .currency-price {
	font-size: 2rem;
	font-weight: 800;
  }

  .price-period {
	font-size: 0.9rem;
	color: #666;
  }

  .subscribe-btn {
	display: block;
	background-color: #c04a2d; /* Matching your screenshot red */
	color: white !important;
	text-align: center;
	padding: 12px;
	text-decoration: none !important;
	border-radius: 6px;
	font-weight: bold;
	margin-bottom: 20px;
  }

  .feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.95rem;
	text-align: left;
  }

  .feature-list li {
	margin-bottom: 12px;
	padding-left: 25px;
	position: relative;
	line-height: 1.4;
  }

  /* Custom checkmark icon */
  .feature-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #888;
	font-weight: bold;
	background: #eee;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
  }

  /* DESKTOP VIEW: 960px and wider */
  @media (min-width: 960px) {
	.pricing-container {
	  flex-direction: row; /* Horizontal side-by-side */
	  align-items: stretch;
	}
  }