/* Bootstrap Breakpoints.
---------------------------------------------------------------- */
/* Container Sizes.
---------------------------------------------------------------- */
/* Body Colors.
---------------------------------------------------------------- */
/* Text Colors.
---------------------------------------------------------------- */
/* Button Colors.
---------------------------------------------------------------- */
/* Font Awesome Checkbox and RadioButton Colors.
---------------------------------------------------------------- */
/* Divider Colors.
---------------------------------------------------------------- */
/* Header Colors.
---------------------------------------------------------------- */
/* Background */
/* Text */
/* Magnify Glass */
/* Top Section Burger */
/* Bottom Section Search */
/* Dropdown Menu Section */
/* Wait Cover */
/* Footer Colors.
---------------------------------------------------------------- */
/* Footer Top */
/* Footer Bottom */
/* Cookie Directive */
/* Modal Colors.
---------------------------------------------------------------- */
/* Modal Header */
/* Modal Close Button */
/* Modal Body */
/* Word Prompter Colors.
---------------------------------------------------------------- */
/* Word Prompter Content */
/* Word Prompter Options */
/* Word Prompter Close Button */
/* Vertical Scroll Bar Colors.
---------------------------------------------------------------- */
/* Tool Tip Colors.
---------------------------------------------------------------- */
/* Accordions.
---------------------------------------------------------------- */
/* Preview Page.
---------------------------------------------------------------- */
/* Video Controls.
---------------------------------------------------------------- */
/* Results Refine Search.
---------------------------------------------------------------- */
/* Results Pagination Bar.
---------------------------------------------------------------- */
/* Lightbox Slider.
---------------------------------------------------------------- */
/* Lightbox Manager.
---------------------------------------------------------------- */
/* This shows when the user is dragging an item from a box to another box and isn't hovering over an item. */
/* Font Face Override
---------------------------------------------------------------- */
/* @import url(https:////fonts.googleapis.com/css?family=Poppins&subset=latin); */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
/* Body
---------------------------------------------------------------- */
body {
  font-family: 'Open Sans', Arial,
	Helvetica,
	sans-serif;	
  font-size: 11pt;
  line-height: 1.4;
  background: white;
  color: #212529;
}

body a {
  color: #1a1a1a;
}

body a:hover {
  color: black;
}

body a:active {
  color: auto;
}

body a:visited {
  color: auto;
}

/* WCAG 2.4.11 Focus Not Obscured - Scroll Margin for Fixed/Sticky Elements
---------------------------------------------------------------- */
/* Ensure focused elements are not obscured by sticky header (~150px) and lightbox slider (~80px) */
*:focus {
  scroll-margin-top: 250px;
  scroll-margin-bottom: 200px;
}

/* Specific scroll margin for form inputs and interactive elements */
input:focus,
button:focus,
a:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  scroll-margin-top: 250px;
  scroll-margin-bottom: 100px;
}

/* Vue
---------------------------------------------------------------- */
[v-cloak] {
  display: none;
}

/* Header
---------------------------------------------------------------- */
h1 {
  font-size: 2.55em;
}

#page-heading {
	border-bottom: 1px solid #dadada;
}

/* Containers
---------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  .container-body {
    min-height: 300px;
  }
}

/* Forms
---------------------------------------------------------------- */
.ValidateInput {
  border-color: #A70606;
}

.ValidateMessage {
  color: #A70606;
  font-size: 9pt;
  font-weight: normal;
  text-align: left;
  display: none;
}

.FormErrorMessage {
	color: #A70606;
	font-size: 1rem;
	font-weight: 500;
	margin-top: 0.5rem;
}

.FormErrorMessage:focus {
	outline: 2px dashed #A70606;
	outline-offset: 2px;
}

.FormGroupFirstTitle {
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 14pt;
  font-weight: bold;
}

.FormGroupTitle {
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 14pt;
  font-weight: bold;
}

@media (min-width: 768px) {
  .FormGroupFirstTitle {
    padding-top: 0;
  }
}

/* Text (added to text-* elements in Bootstrap)
---------------------------------------------------------------- */
.text-notrequired {
  font-weight: normal;
}

.text-validate {
  color: #A70606;
  font-weight: bold;
  text-align: left;
}

.text-complete {
  color: #1a1a1a;
  font-weight: bold;
}

.text-discount {
  color: #A70606;
}

.text-bold {
  font-weight: bold;
}

.text-justify-xs {
  text-align: justify;
}

.text-justify-xs h1, h2, h3, h4, h5, h6 {
  text-align: left;
}

@media (min-width: 768px) {
  .text-justify-xs {
    text-align: left;
  }
}

.text-fontawesome {
  font-family: "Font Awesome 5 Pro";
}

/* LinkInherit - This class will not change the style of a link.
---------------------------------------------------------------- */
.LinkInherit a {
  color: inherit;
  text-decoration: none;
}

.LinkInherit a:hover {
  color: inherit;
  text-decoration: none;
}

/* Header */
@import "../../../scss/themes";

/* Modern Header Styles - Bootstrap 5 Enhanced */

/* Admin Debug Section */
.alert.alert-warning {
	/* border-radius: 0;
	margin-bottom: 0; */
	font-size: 0.875rem;
}

/* Navbar Brand Logo */
.navbar-brand img {
	margin-left: 10px;
	transition: opacity 0.2s ease;
}

.navbar-brand:hover img {
	opacity: 0.8;
}

/* Navbar Links */
.navbar-nav .nav-link {
	font-weight: 500;
	color: #6c757d !important;
	padding: 0.75rem 1rem;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
}

.navbar-nav .nav-link:hover {
	color: #000000 !important;
	background-color: rgba(0, 123, 255, 0.05);
	border-radius: 0.375rem;
}

.navbar-nav .nav-link i {
	font-size: 1rem;
	width: 20px;
	text-align: center;
}

/* User Dropdown */
.navbar-nav .dropdown-menu {
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	padding: 0.5rem 0;
	min-width: 200px;
}

.dropdown-item {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
}

.dropdown-item:hover {
	background-color: rgba(0, 123, 255, 0.1);
	color: #ffffff;
}

.dropdown-item i {
	width: 20px;
	text-align: center;
}

.dropdown-divider {
	margin: 0.25rem 0;
}

/* Cart Badge */
.navbar-nav .nav-link .badge {
	font-size: 0.7rem;
	padding: 0.25rem 0.4rem;
	margin-left: 15px;
	margin-top: 0px;
}

@media (min-width: 992px) {
	.navbar-nav .nav-link .badge {
		margin-left: -10px;
	}
}

/* Header Search Section */
.header-search-section {
	background-color: #f8f9fa !important;
	border-bottom: 1px solid #eee !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-container {
	max-width: 800px;
	margin: 0 auto;
}

.header-search-section .input-group {
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.header-search-section .input-group:hover {
	box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
}

.header-search-section .form-control {
	border: 2px solid #e9ecef;
	border-right: none;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	background-color: white;
	transition: all 0.2s ease;
}

.header-search-section .form-control:focus {
	border-color: #000000;
	box-shadow: none;
	background-color: white;
}

.header-search-section .btn {
	border: 2px solid #000000;
	border-left: none;
	padding: 0.75rem 1.5rem;
	background-color: #1a1a1a;
	color: white;
	font-weight: 600;
	transition: all 0.2s ease;
}

.header-search-section .btn:hover {
	background-color: #1a1a1a;
	border-color: #000000;
	transform: translateY(-1px);
}

.header-search-section .btn:active {
	transform: translateY(0);
}

.header-search-section .form-control:focus+.btn {
	border-color: #000000;
}

/* Responsive Search Section */
@media (max-width: 800px) {
	.search-container {
		max-width: 100%;
		padding: 0 0.5rem;
	}
}

@media (max-width: 576px) {
	.header-search-section .py-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	.header-search-section .form-control {
		font-size: 0.9rem;
		padding: 0.625rem 0.75rem;
	}

	.header-search-section .btn {
		padding: 0.625rem 1rem;
	}

	.header-search-section .btn span {
		display: none !important;
	}
}

/* Navbar Toggle Button */
.navbar-toggler {
	border: none;
	padding: 0.5rem;
	font-size: 1.1rem;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* CSS Custom Properties for Header Height */
:root {
	--header-height: 157px; /* Actual measured global header height */
}

/* Update header height for mobile */
@media (max-width: 575.98px) {
	:root {
		--header-height: 180px; /* Taller on mobile due to larger inputs */
	}
}

/* Fixed Header Enhancement */
header.sticky-top {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1040 !important; /* Higher than results header (1030) */
	/*backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);*/
	background-color: rgba(255, 255, 255, 0.95) !important;
	transition: all 0.2s ease;
}

/* Body content spacing to account for fixed header - applied globally */
body {
	padding-top: var(--header-height, 157px) !important;
}

/* Main content container spacing */
main {
	margin-top: 0 !important;
}

/* Sticky Navbar Enhancement */
.navbar.sticky-top {
	/*backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);*/
	background-color: rgba(255, 255, 255, 0.95) !important;
	transition: all 0.2s ease;
}

/* Loading Spinner Overlay */
#WaitCover {
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

#WaitCover .spinner-border {
	width: 3rem;
	height: 3rem;
}

/* Responsive Adjustments */
@media (max-width: 575.98px) {
	/* .navbar-brand img {
		height: 32px !important;
	} */

	.navbar-nav .nav-link {
		font-size: 0.875rem;
	}

	.dropdown-menu {
		min-width: 180px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.navbar-nav .nav-link {
		color: #000 !important;
	}

	.navbar-nav .nav-link:hover {
		color: #000000 !important;
		background-color: rgba(0, 86, 179, 0.1);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	.navbar-nav .nav-link,
	.dropdown-item,
	.input-group .btn,
	.navbar-brand img {
		transition: none;
	}
}

/* WCAG 1.4.10 Reflow - Disable fixed positioning at 400% zoom (320px effective width) */
@media (max-width: 400px) {
	.navbar-brand img {height: 35px !important;}
	header.sticky-top {
		position: relative !important;
	}

	body {
		padding-top: 0 !important;
	}
}

/* Footer Styles */
@import "../../../scss/themes";

/* Modern Footer Styles - Bootstrap 5 Enhanced */


/* Modern Footer Base */
.modern-footer {
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	color: #e9ecef;
	margin-top: auto;
}

/* Footer Main Content */
.footer-main {
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.footer-heading {
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: 1rem;
	position: relative;
	padding-bottom: 0.5rem;
}

.footer-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 2px;
	background: linear-gradient(90deg, #bdbdbd, #444444);
	border-radius: 1px;
}

/* Footer Links */
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 0.5rem;
}

.footer-link {
	color: #ced4da;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0;
	border-radius: 0.25rem;
}

.footer-link:hover {
	color: #ffffff;
	text-decoration: none;
	padding-left: 0.5rem;
	background: rgba(0, 123, 255, 0.1);
}

.footer-link i {
	font-size: 0.875rem;
	width: 16px;
	text-align: center;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.footer-link:hover i {
	opacity: 1;
	color: #FFFFFF;
}

/* Contact Info */
.contact-info {
	padding-left: 0;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	line-height: 1.6;
	color: #ced4da;
}

.contact-item i {
	margin-top: 0.5rem;
	flex-shrink: 0;
}

/* Logo Panel Section */
.logo-panel-section {
	background: rgba(255, 255, 255, 0.03) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-panel-heading {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	opacity: 0.9;
}

/* Desktop Logo Items */
.logo-panel-items {
	display: flex;
	justify-content: space-between !important;
	align-items: center;
	gap: 1rem;
	flex-wrap: nowrap;
}

.logo-panel-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.375rem;
	transition: all 0.3s ease;
	text-decoration: none;
	height: 50px;
	min-width: 15%;
	flex: 0 1 auto;
}

.logo-panel-link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.logo-img {
	max-width: 70px;
	max-height: 30px;
	width: auto;
	height: auto;
	filter: brightness(0.9) contrast(1.1);
	transition: all 0.3s ease;
}

.logo-panel-link:hover .logo-img {
	filter: brightness(1) contrast(1.2);
	transform: scale(1.05);
}

/* Mobile Text Links */
.logo-panel-text-links {
	padding-left: 0;
}

.logo-panel-text-links li {
	margin-bottom: 0.375rem;
}

.logo-panel-text-links .text-link {
	color: #ced4da;
	text-decoration: none;
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	transition: all 0.3s ease;
	padding: 0.25rem 0;
}

.logo-panel-text-links .text-link:hover {
	color: #ffffff;
	padding-left: 0.5rem;
}

.logo-panel-text-links .text-link i {
	font-size: 0.75rem;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.logo-panel-text-links .text-link:hover i {
	opacity: 1;
	color: #000000;
}

/* Footer Bottom */
.footer-bottom {
	background: rgba(0, 0, 0, 0.3);
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.legal-links .footer-link {
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0.375rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.legal-links .footer-link:hover {
	background: rgba(0, 123, 255, 0.2);
	border-color: rgba(0, 123, 255, 0.3);
	transform: translateY(-1px);
	padding-left: 0.75rem;
}

.copyright-text {
	font-size: 0.8125rem;
	line-height: 1.5;
}

.copyright-text .footer-link {
	color: #444444;
	font-weight: 500;
}

.copyright-text .footer-link:hover {
	color: #444444;
	text-decoration: underline;
	padding-left: 0;
	background: none;
}

/* Social Media */
.social-media h6 {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.social-links {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
}

@media (min-width: 992px) {
	.social-links {
		justify-content: flex-end;
	}
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #ced4da;
	text-decoration: none;
	font-size: 1rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.social-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, #bdbdbd, #444444);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.social-link:hover::before {
	opacity: 1;
}

.social-link i {
	position: relative;
	z-index: 1;
	transition: all 0.3s ease;
}

.social-link:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
	text-decoration: none;
}

.social-link:hover i {
	transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 767.98px) {
	.footer-main {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.footer-heading {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	.legal-links {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.legal-links .footer-link {
		display: inline-block;
		margin: 0.25rem;
	}

	.copyright-text {
		text-align: center;
		margin-top: 1rem;
	}

	.contact-item {
		font-size: 0.875rem;
	}

	/* Logo Panel Mobile Styles */
	.logo-panel-heading {
		font-size: 0.875rem;
		margin-bottom: 0.75rem;
		text-align: left;
	}
}

@media (max-width: 575.98px) {
	.footer-main {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	.footer-bottom {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	.social-link {
		width: 35px;
		height: 35px;
		font-size: 0.875rem;
	}

	.legal-links .footer-link {
		padding: 0.25rem 0.5rem;
		font-size: 0.8125rem;
	}

	/* Logo Panel Small Mobile Styles */
	.logo-panel-section {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	.logo-panel-text-links .text-link {
		font-size: 0.8125rem;
	}
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
	.modern-footer {
		background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.footer-link {
		color: #ffffff;
	}

	.footer-link:hover {
		background: #444444;
		color: #ffffff;
	}

	.social-link {
		border-color: #ffffff;
		color: #ffffff;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	.footer-link,
	.social-link,
	.legal-links .footer-link {
		transition: none;
	}

	.social-link:hover {
		transform: none;
	}
}

/* Print styles */
@media print {
	.modern-footer {
		background: none !important;
		color: #000000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.footer-link,
	.social-link {
		color: #000000 !important;
	}

	.social-links {
		display: none;
	}
}


/* Focus indicators for accessibility */
.navbar-nav .nav-link:focus,
.dropdown-item:focus,
.input-group .btn:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

/* Print styles */
@media print {

	header,
	.navbar {
		display: none !important;
	}
}

/* Hero (TO BE MOVED TO INDEX.COMP.CSS)
---------------------------------------------------------------- */
.hero img {
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  height: auto;
}

.hero_header {
  color: #ffffff;
  text-align: center;
  margin: 0;
  letter-spacing: 4px;
}

/*
	Backgrounds
*/
.card-bg-light {
	background: #fbfbfb;
}

/* Buttons
---------------------------------------------------------------- */
.Button, .ButtonPrimary, .ButtonPrimaryWait, .ButtonPrimaryReverse, .ButtonPrimaryReverseWait, .ButtonModal {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .Button, .ButtonPrimary, .ButtonPrimaryWait, .ButtonPrimaryReverse, .ButtonPrimaryReverseWait, .ButtonModal {
    -webkit-transition: none;
    transition: none;
  }
}

.Button:hover, .ButtonPrimary:hover, .ButtonPrimaryWait:hover, .ButtonPrimaryReverse:hover, .ButtonPrimaryReverseWait:hover, .ButtonModal:hover, .btn:focus {
  text-decoration: none;
}

.Button:focus, .ButtonPrimary:focus, .ButtonPrimaryWait:focus, .ButtonPrimaryReverse:focus, .ButtonPrimaryReverseWait:focus, .ButtonModal:focus, .btn.focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.Button.disabled, .disabled.ButtonPrimary, .disabled.ButtonPrimaryWait, .disabled.ButtonPrimaryReverse, .disabled.ButtonPrimaryReverseWait, .disabled.ButtonModal, .btn:disabled {
  opacity: 0.65;
}

.Button:not(:disabled):not(.disabled), .ButtonPrimary:not(:disabled):not(.disabled), .ButtonPrimaryWait:not(:disabled):not(.disabled), .ButtonPrimaryReverse:not(:disabled):not(.disabled), .ButtonPrimaryReverseWait:not(:disabled):not(.disabled), .ButtonModal:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.Button.disabled, a.disabled.ButtonPrimary, a.disabled.ButtonPrimaryWait, a.disabled.ButtonPrimaryReverse, a.disabled.ButtonPrimaryReverseWait, a.disabled.ButtonModal,
fieldset:disabled a.Button,
fieldset:disabled a.ButtonPrimary,
fieldset:disabled a.ButtonPrimaryWait,
fieldset:disabled a.ButtonPrimaryReverse,
fieldset:disabled a.ButtonPrimaryReverseWait,
fieldset:disabled a.ButtonModal {
  pointer-events: none;
}

.ButtonPrimary {
  border-color: #adadad;
  background: #212529;
  color: white;
}

.ButtonPrimary:hover {
  background: #e6e6e6;
  color: #212529;
}

.ButtonPrimary:active {
  background: #e6e6e6;
  color: #212529;
}

.ButtonPrimary:focus {
  border-color: #adadad;
  background: #212529;
  color: white;
}

.ButtonPrimaryWait {
  border-color: #adadad;
  background: #212529;
  color: white;
}

.ButtonPrimaryReverse {
  border-color: #adadad;
  color: #212529;
  background: white;
}

.ButtonPrimaryReverse:hover {
  color: #e6e6e6;
  background: #212529;
}

.ButtonPrimaryReverse:active {
  color: #e6e6e6;
  background: #212529;
}

.ButtonPrimaryReverse:focus {
  border-color: #adadad;
  color: #212529;
  background: white;
}

.ButtonPrimaryReverseWait {
  border-color: #adadad;
  color: #212529;
  background: white;
}

.ButtonModal {
  border-color: #adadad;
  background: #e6e6e6;
  color: #212529;
}

.ButtonModal:hover {
  background: #212529;
  color: white;
}

.ButtonModal:active {
  background: #212529;
  color: white;
}

.ButtonModal:focus {
  border-color: #adadad;
  background: #e6e6e6;
  color: #212529;
}

/* Divs acting as Tables
---------------------------------------------------------------- */
.display-table {
  display: table;
  table-layout: auto;
}

.display-row {
  display: table-row;
}

.display-cell-top {
  display: table-cell;
}

.display-cell-middle {
  display: table-cell;
  vertical-align: middle;
}

.display-cell-bottom {
  display: table-cell;
  vertical-align: bottom;
}

/* Font Awesome Social Icons
---------------------------------------------------------------- */
.social-icon {
  margin: 0 5px 5px 0;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px !important;
  color: #555;
  text-shadow: none;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  float: left;
  text-align: center;
  border: 1px solid #AAA;
}

.social-icon:hover {
  border-color: transparent;
}

.social-icon i {
  display: block;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  line-height: 40px;
  position: relative;
}

.social-icon i:last-child {
  color: #FFF !important;
}

.social-icon:hover i:first-child {
  margin-top: -40px;
}

.social-icon-lg {
  margin: 0 5px 5px 0;
  width: 60px;
  height: 60px;
  font-size: 30px;
  line-height: 60px !important;
  color: #555;
  text-shadow: none;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  float: left;
  text-align: center;
  border: 1px solid #AAA;
}

.social-icon-lg:hover {
  border-color: transparent;
}

.social-icon-lg i {
  display: block;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  line-height: 60px;
  position: relative;
}

.social-icon-lg i:last-child {
  color: #FFF !important;
}

.social-icon-lg:hover i:first-child {
  margin-top: -60px;
}

.social-icon-sm {
  margin: 0 5px 5px 0;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 30px !important;
  color: #555;
  text-shadow: none;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  float: left;
  text-align: center;
  border: 1px solid #AAA;
}

.social-icon-sm:hover {
  border-color: transparent;
}

.social-icon-sm i {
  display: block;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  line-height: 30px;
  position: relative;
}

.social-icon-sm i:last-child {
  color: #FFF !important;
}

.social-icon-sm:hover i:first-child {
  margin-top: -30px;
}

si-border {
  border: 1px solid #AAA !important;
}

.si-border-round {
  border-radius: 50%;
}

.si-dark-round {
  border-radius: 50%;
}

.si-gray-round {
  border-radius: 50%;
}

.si-gray {
  background: #f3f3f3;
  border: 0;
}

.si-dark {
  background-color: #333;
  border: 0 !important;
  color: #fff !important;
}

.si-colored-facebook,
.si-facebook:hover {
  background-color: #3B5998 !important;
}

.si-colored-twitter,
.si-twitter:hover {
  background-color: #00ACEE !important;
}

.si-colored-google-plus,
.si-g-plus:hover {
  background-color: #DD4B39 !important;
}

.si-colored-skype,
.si-skype:hover {
  background-color: #00AFF0 !important;
}

.si-linkedin:hover,
.si-colored-linkedin {
  background-color: #0E76A8 !important;
}

.si-pin:hover,
.si-colored-pinterest {
  background-color: #C8232C !important;
}

.si-rss:hover,
.si-colored-rss {
  background-color: #EE802F !important;
}

.si-pinterest:hover,
.si-colored-pinterest {
  background-color: #C8232C !important;
}

.si-tumblr:hover,
.si-colored-tumblr {
  background-color: #34526F !important;
}

.si-vimeo:hover,
.si-colored-vimeo {
  background-color: #86C9EF !important;
}

.si-digg:hover,
.si-colored-digg {
  background-color: #191919 !important;
}

.si-instagram:hover, .si-colored-instagram {
  /*	background-color: #3F729B !important; */
  background: #f09433;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

.si-flickr:hover,
.si-colored-flickr {
  background-color: #FF0084 !important;
}

.si-paypal:hover,
.si-colored-paypal {
  background-color: #00588B !important;
}

.si-yahoo:hover,
.si-colored-yahoo {
  background-color: #720E9E !important;
}

.si-android:hover,
.si-colored-andriod {
  background-color: #A4C639 !important;
}

.si-appstore:hover,
.si-colored-apple {
  background-color: #000 !important;
}

.si-dropbox:hover {
  background-color: #3D9AE8 !important;
}

.si-dribbble:hover,
.si-colored-dribbble {
  background-color: #EA4C89 !important;
}

.si-soundcloud:hover,
.si-colored-soundcoloud {
  background-color: #F70 !important;
}

.si-xing:hover,
.si-colored-xing {
  background-color: #126567 !important;
}

.si-phone:hover,
.si-colored-phone {
  background-color: #444 !important;
}

.si-behance:hover,
.si-colored-behance {
  background-color: #053eff !important;
}

.si-github:hover,
.si-colored-github {
  background-color: #171515 !important;
}

.si-stumbleupon:hover,
.si-colored-stumbleupon {
  background-color: #F74425 !important;
}

.si-email:hover,
.si-colored-email {
  background-color: #6567A5 !important;
}

.si-wordpress:hover,
.si-colored-wordpress {
  background-color: #1E8CBE !important;
}

.social-shortcodes .left-heading {
  font-size: 30px;
  text-transform: uppercase;
}

.social-icons:after,
.social-icons:before > .divide10:after,
.social-icons .divide10:before {
  display: table;
  content: "";
  width: 100%;
  clear: both;
}

/* Vertical Spacing Dividers
---------------------------------------------------------------- */
.divide0 {
  width: 100%;
  height: 0px;
}

.divide2 {
  width: 100%;
  height: 2px;
}

.divide3 {
  width: 100%;
  height: 3px;
}

.divide5 {
  width: 100%;
  height: 5px;
}

.divide10 {
  width: 100%;
  height: 10px;
}

.divide15 {
  width: 100%;
  height: 15px;
}

.divide20 {
  width: 100%;
  height: 20px;
}

.divide25 {
  width: 100%;
  height: 25px;
}

.divide30 {
  width: 100%;
  height: 30px;
}

.divide35 {
  width: 100%;
  height: 35px;
}

.divide40 {
  width: 100%;
  height: 40px;
}

.divide45 {
  width: 100%;
  height: 40px;
}

.divide50 {
  width: 100%;
  height: 50px;
}

.divide55 {
  width: 100%;
  height: 55px;
}

.divide60 {
  width: 100%;
  height: 60px;
}

.divide65 {
  width: 100%;
  height: 65px;
}

.divide70 {
  width: 100%;
  height: 70px;
}

.divide75 {
  width: 100%;
  height: 75px;
}

.divide80 {
  width: 100%;
  height: 80px;
}

.divide85 {
  width: 100%;
  height: 85px;
}

/* Margins
---------------------------------------------------------------- */
.margin10 {
  margin-bottom: 10px;
}

.margin20 {
  margin-bottom: 20px;
}

.margin30 {
  margin-bottom: 30px;
}

.margin40 {
  margin-bottom: 40px;
}

/* Paddings
---------------------------------------------------------------- */
.no-padding {
  padding: 0px;
}

/* Box Shadows
---------------------------------------------------------------- */
.shadown-1 {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.shadown-1:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.shadown-2 {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.shadown-3 {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.shadown-4 {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.shadown-5 {
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
          box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* Images used in Modals
---------------------------------------------------------------- */
.msgItemImg {
  margin: 0 5px 3px 0;
}

/* Clear Bootstrap settings
---------------------------------------------------------------- */
.ClearBootstrapFont {
  line-height: normal;
}

.ClearBootstrapLabel {
  margin: 0;
  font-weight: normal;
}

.ClearBootstrapRadio {
  margin: 0;
  line-height: normal;
}

.ClearBootstrapCheckbox {
  margin: 0;
  line-height: normal;
}

.ClearBootstrapImg {
  vertical-align: baseline;
}

/* WaitCover Loading Animation
---------------------------------------------------------------- */
.loading {
  width: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.circle {
  background-color: #fff;
  border-radius: 50%;
  margin: 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: jump 0.8s ease-in infinite;
          animation: jump 0.8s ease-in infinite;
  opacity: 1;
}

.circle:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.circle:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes jump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

/* Twensoft Demo
---------------------------------------------------------------- */
.twensoft-comments {
  color: #A70606;
}
/* Bootstrap Color Overrides - Black & White Theme */
/* Professional Monochromatic Color Palette */

:root,
[data-bs-theme="light"] {
	/* Header height - includes navbar + search section */
	--header-height: 157px; /* Actual measured global header height */
	
	/* Base color definitions */
	--bs-blue: #1a1a1a;
	--bs-indigo: #2d3436;
	--bs-purple: #636e72;
	--bs-pink: #95a5a6;
	--bs-red: #A70606;
	/* Keep red for error states */
	--bs-orange: #636e72;
	--bs-yellow: #95a5a6;
	--bs-green: #198754;
	/* Keep green for success states */
	--bs-teal: #74b9ff;
	--bs-cyan: #74b9ff;

	/* Primary colors */
	--bs-primary: #1a1a1a;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #495057;
	--bs-warning: #636e72;
	--bs-danger: #A70606;
	--bs-light: #f8f9fa;
	--bs-dark: #0a0a0a;

	/* RGB values */
	--bs-primary-rgb: 26, 26, 26;
	--bs-secondary-rgb: 108, 117, 125;
	--bs-success-rgb: 25, 135, 84;
	--bs-info-rgb: 73, 80, 87;
	--bs-warning-rgb: 99, 110, 114;
	--bs-danger-rgb: 220, 53, 69;
	--bs-light-rgb: 248, 249, 250;
	--bs-dark-rgb: 10, 10, 10;

	/* Text emphasis colors */
	--bs-primary-text-emphasis: #0d0d0d;
	--bs-secondary-text-emphasis: #2b2f32;
	--bs-success-text-emphasis: #0a3622;
	--bs-info-text-emphasis: #1f2225;
	--bs-warning-text-emphasis: #282d2e;
	--bs-danger-text-emphasis: #58151c;
	--bs-light-text-emphasis: #495057;
	--bs-dark-text-emphasis: #050505;

	/* Background subtle colors */
	--bs-primary-bg-subtle: #e6e6e6;
	--bs-secondary-bg-subtle: #e2e3e5;
	--bs-success-bg-subtle: #d1e7dd;
	--bs-info-bg-subtle: #e0e2e4;
	--bs-warning-bg-subtle: #e4e6e7;
	--bs-danger-bg-subtle: #f8d7da;
	--bs-light-bg-subtle: #fcfcfd;
	--bs-dark-bg-subtle: #d0d0d0;

	/* Border subtle colors */
	--bs-primary-border-subtle: #555555;
	--bs-secondary-border-subtle: #c4c8cb;
	--bs-success-border-subtle: #a3cfbb;
	--bs-info-border-subtle: #a8acb0;
	--bs-warning-border-subtle: #b8bdbf;
	--bs-danger-border-subtle: #f1aeb5;
	--bs-light-border-subtle: #e9ecef;
	--bs-dark-border-subtle: #666666;

	/* Link colors */
	--bs-link-color: #1a1a1a;
	--bs-link-color-rgb: 26, 26, 26;
	--bs-link-hover-color: #000000;
	--bs-link-hover-color-rgb: 0, 0, 0;

	/* Focus ring color */
	--bs-focus-ring-color: rgba(26, 26, 26, 0.25);
}

/* Dark theme adjustments */
[data-bs-theme="dark"] {
	--bs-primary: #e0e0e0;
	--bs-secondary: #adb5bd;
	--bs-info: #b0b5ba;
	--bs-warning: #9fa7ab;

	--bs-primary-text-emphasis: #f0f0f0;
	--bs-secondary-text-emphasis: #c7ced4;
	--bs-info-text-emphasis: #c8cdd1;
	--bs-warning-text-emphasis: #b7bfc3;

	--bs-primary-bg-subtle: #1a1a1a;
	--bs-secondary-bg-subtle: #161719;
	--bs-info-bg-subtle: #1c1e20;
	--bs-warning-bg-subtle: #1f2224;

	--bs-primary-border-subtle: #4d4d4d;
	--bs-secondary-border-subtle: #41464b;
	--bs-info-border-subtle: #3e4245;
	--bs-warning-border-subtle: #424649;

	--bs-link-color: #e0e0e0;
	--bs-link-hover-color: #ffffff;
	--bs-link-color-rgb: 224, 224, 224;
	--bs-link-hover-color-rgb: 255, 255, 255;
}

/* Button overrides for better contrast */
.btn-primary {
	--bs-btn-bg: #1a1a1a;
	--bs-btn-border-color: #1a1a1a;
	--bs-btn-hover-bg: #000000;
	--bs-btn-hover-border-color: #000000;
	--bs-btn-focus-shadow-rgb: 26, 26, 26;
	--bs-btn-active-bg: #000000;
	--bs-btn-active-border-color: #000000;
	--bs-btn-disabled-bg: #1a1a1a;
	--bs-btn-disabled-border-color: #1a1a1a;
}

.btn-secondary {
	--bs-btn-bg: #6c757d;
	--bs-btn-border-color: #6c757d;
	--bs-btn-hover-bg: #5a6268;
	--bs-btn-hover-border-color: #545b62;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-bg: #545b62;
	--bs-btn-active-border-color: #4e555b;
}

.btn-outline-primary {
	--bs-btn-color: #1a1a1a;
	--bs-btn-border-color: #1a1a1a;
	--bs-btn-hover-bg: #1a1a1a;
	--bs-btn-hover-border-color: #1a1a1a;
	--bs-btn-focus-shadow-rgb: 26, 26, 26;
	--bs-btn-active-bg: #1a1a1a;
	--bs-btn-active-border-color: #1a1a1a;
}

/* Table color adjustments */
.table-primary {
	--bs-table-color: #000;
	--bs-table-bg: #e6e6e6;
	--bs-table-border-color: #b8b8b8;
	--bs-table-striped-bg: #dadada;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #cecece;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #d4d4d4;
	--bs-table-hover-color: #000;
}

/* Alert color adjustments */
.alert-primary {
	--bs-alert-color: #0d0d0d;
	--bs-alert-bg: #e6e6e6;
	--bs-alert-border-color: #555555;
	--bs-alert-link-color: #0a0a0a;
}

/* Badge color adjustments */
.badge.text-bg-primary {
	color: #fff !important;
	background-color: #1a1a1a !important;
}

/* Progress bar adjustments */
.progress-bar {
	background-color: #1a1a1a;
}

.form-control {
	border-color: #555555 !important;
}

/* Form control focus state */
.form-control:focus {
	border-color: #666666;
	box-shadow: 0 0 0 0.25rem rgba(26, 26, 26, 0.25);
}

.form-select:focus {
	border-color: #666666;
	box-shadow: 0 0 0 0.25rem rgba(26, 26, 26, 0.25);
}

/* Navbar adjustments */
.navbar-light {
	--bs-navbar-brand-color: #1a1a1a;
	--bs-navbar-brand-hover-color: #000000;
	--bs-navbar-active-color: #000000;
	--bs-navbar-disabled-color: #555555;
}

.navbar-dark {
	--bs-navbar-brand-color: #e0e0e0;
	--bs-navbar-brand-hover-color: #ffffff;
	--bs-navbar-active-color: #ffffff;
	--bs-navbar-disabled-color: #666666;
}

/* Dropdown adjustments */
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: #e6e6e6;
	color: #1a1a1a;
}

/* Pagination adjustments */
.page-link {
	color: #1a1a1a;
}

.page-link:hover {
	color: #000000;
	background-color: #e9ecef;
	border-color: #555555;
}

.page-item.active .page-link {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
}

/* Card adjustments */
.card-header {
	background-color: #f8f9fa;
	border-bottom: 1px solid #555555;
}

/* List group adjustments */
.list-group-item-action:hover,
.list-group-item-action:focus {
	background-color: #f8f9fa;
}

.list-group-item.active {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
}

/* Spinner adjustments */
.spinner-border {
	border-color: currentColor;
	border-right-color: transparent;
}

.spinner-border.text-primary {
	color: #1a1a1a !important;
}

/* Toast adjustments */
.toast-header {
	background-color: #f8f9fa;
	border-bottom: 1px solid #555555;
}

/* Popular Categories button height consistency */
.btn-outline-secondary.btn-sm.w-100 {
	min-height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
}

/* ========================================
   Skip to Main Content Link - WCAG 2.4.1
   ======================================== */
.skip-to-main {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
	background-color: #1a1a1a;
	color: #ffffff;
	padding: 1rem 1.5rem;
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 0.375rem 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease;
}

.skip-to-main:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	outline: 3px solid #ffffff;
	outline-offset: -3px;
}

.skip-to-main:hover:focus {
	background-color: #000000;
	color: #ffffff;
	text-decoration: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.skip-to-main:focus {
		outline: 4px solid #ffffff;
		border: 2px solid #000000;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.skip-to-main {
		transition: none;
	}
}

/* Custom Search Input Group
---------------------------------------------------------------- */
.custom-search-input-group {
	display: flex;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.custom-search-input-group:hover {
	box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* When input is focused, outline the entire container */
/* .custom-search-input-group:focus-within {
	outline: 2px solid #000000;
	outline-offset: 2px;
} */

.custom-search-input {
	flex: 1;
	border: 2px solid #555555;
	border-right: none;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 1.25rem;
	background-color: white;
	transition: all 0.2s ease;
	outline: none;
}

.custom-search-input:focus {
	border-color: #007bff;
	box-shadow: none;
	background-color: white;
}

.custom-search-clear-btn {
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	border-left: none;
	border-right: none;
	padding: 0.75rem 1rem;
	background-color: white;
	color: #000000;
	cursor: pointer;
	font-size: 1.25rem;
	transition: all 0.2s ease;
	outline: none;
}

.custom-search-clear-btn:hover {
	background-color: #f8f9fa;
	color: #dc3545;
}

.custom-search-clear-btn:focus {
	outline: 3px solid #007bff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-search-submit-btn {
	border: 2px solid #000000;
	border-left: none;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: #000000;
	color: white;
	font-weight: 600;
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
}

.custom-search-submit-btn:hover {
	background-color: #000000;
	border-color: #000000;
	transform: translateY(-1px);
}

.custom-search-submit-btn:active {
	transform: translateY(0);
}

.custom-search-submit-btn:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
}

/* When input is focused, update borders on adjacent elements */
.custom-search-input:focus + .custom-search-clear-btn {
	border-top-color: #000000;
	border-bottom-color: #000000;
}

.custom-search-input:focus ~ .custom-search-submit-btn {
	border-color: #000000;
}

@media (max-width: 576px) {
	.custom-search-input {
		font-size: 0.9rem;
		padding: 0.625rem 0.75rem;
	}

	.custom-search-clear-btn,
	.custom-search-submit-btn {
		padding: 0.625rem 1rem;
		font-size: 1rem;
	}
}

/* Word Prompter Keyboard Accessibility
---------------------------------------------------------------- */
.WordPrompterOptionOff,
.WordPrompterOptionOn {
	display: block;
	width: 100%;
	border: none;
	text-align: left;
}

.WordPrompterOptionOff:focus,
.WordPrompterOptionOn:focus {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

#WordPrompterCloseBtn {
	outline: none;
}

#WordPrompterCloseBtn:focus {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

/* Collections Tiles Focus Indicator (Home Page)
---------------------------------------------------------------- */
.collection-card-link:focus,
.collection-card-link:focus-visible,
.card a:focus,
.card a:focus-visible,
.card .position-relative:focus,
.card .position-relative:focus-visible,
a.position-relative.d-block:focus,
a.position-relative.d-block:focus-visible {
	outline: 3px solid #007bff !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px rgba(0, 123, 255, 0.5) !important;
}

/* Pop Preview Toggle Focus Indicator
---------------------------------------------------------------- */
#chkTNZoom:focus + .slider {
	/* box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5), 0 0 0 6px rgba(0, 123, 255, 0.25); */
	outline: 1px solid #007bff;
	outline-offset: 2px;
}

/* Footer Focus Indicators (especially for Lightbox page)
---------------------------------------------------------------- */
.footer-link:focus,
.modern-footer a:focus {
	outline: 3px solid #007bff !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 123, 255, 0.15) !important;
	border-radius: 4px;
	box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
}

.required-indicator {
    color: #A70606;
    font-weight: bold;
}