/* CSS Variables for theming - Default Theme (Blue) */
:root {
	/* Primary color scheme */
	--primary-color: #4a6cf7;
	--primary-light: #6b85f8;
	--primary-dark: #3a56d4;
	--primary-rgb: 74, 108, 247;

	/* Secondary color scheme */
	--secondary-color: #6b7280;
	--secondary-light: #8a909e;
	--secondary-dark: #515761;
	--secondary-rgb: 107, 114, 128;

	/* Tertiary color scheme */
	--tertiary-color: #10b981;
	--tertiary-light: #34d399;
	--tertiary-dark: #059669;
	--tertiary-rgb: 16, 185, 129;

	/* Quaternary color scheme */
	--quaternary-color: #f59e0b;
	--quaternary-light: #fbbf24;
	--quaternary-dark: #d97706;
	--quaternary-rgb: 245, 158, 11;

	/* Light theme variables */
	--background-color: #f9fafb;
	--text-color: #1f2937;
	--card-bg: #ffffff;
	--border-color: #e5e7eb;
	--header-bg: #ffffff;
	--footer-bg: #f3f4f6;
	--subfooter-bg: #e5e7eb;
	--menu-hover: #f3f4f6;
	--dropdown-bg: #ffffff;
	--input-bg: #ffffff;
	--input-border: #ced4da;

	/* States */
	--success-color: #10b981;
	--warning-color: #f59e0b;
	--danger-color: #ef4444;
	--info-color: #3b82f6;

	/* Theme name */
	--theme-name: "Blue Theme";
}

/* Purple Theme */
html.theme-purple {
	/*--primary-color: #8b5cf6;*/
	--primary-color: #BC9854;
	--primary-light: #CFAD77;
	--primary-dark: #A07C39;
	--primary-rgb: 188, 152, 84;

	--secondary-color: #6b7280;
	--secondary-light: #9ca3af;
	--secondary-dark: #4b5563;
	--secondary-rgb: 107, 114, 128;

	--tertiary-color: #c084fc; /* orchid */
	--tertiary-light: #d8b4fe;
	--tertiary-dark: #a855f7;
	--tertiary-rgb: 192, 132, 252;

	--quaternary-color: #60a5fa; /* cornflower blue */
	--quaternary-light: #93c5fd;
	--quaternary-dark: #3b82f6;
	--quaternary-rgb: 96, 165, 250;

	--button-primary: #f9fafb;

	--theme-name: "Purple Theme";
}

/* Green Theme */
html.theme-green {
	--primary-color: #10b981;
	--primary-light: #34d399;
	--primary-dark: #059669;
	--primary-rgb: 16, 185, 129;

	--secondary-color: #6b7280;
	--secondary-light: #9ca3af;
	--secondary-dark: #4b5563;
	--secondary-rgb: 107, 114, 128;

	--tertiary-color: #3b82f6;
	--tertiary-light: #60a5fa;
	--tertiary-dark: #2563eb;
	--tertiary-rgb: 59, 130, 246;

	--quaternary-color: #f59e0b;
	--quaternary-light: #fbbf24;
	--quaternary-dark: #d97706;
	--quaternary-rgb: 245, 158, 11;

	--theme-name: "Green Theme";
}

/* Amber Theme */
html.theme-amber {
	--primary-color: #f59e0b;
	--primary-light: #fbbf24;
	--primary-dark: #d97706;
	--primary-rgb: 245, 158, 11;

	--secondary-color: #4b5563;
	--secondary-light: #6b7280;
	--secondary-dark: #374151;
	--secondary-rgb: 75, 85, 99;

	--tertiary-color: #0ea5e9;
	--tertiary-light: #38bdf8;
	--tertiary-dark: #0284c7;
	--tertiary-rgb: 14, 165, 233;

	--quaternary-color: #8b5cf6;
	--quaternary-light: #a78bfa;
	--quaternary-dark: #7c3aed;
	--quaternary-rgb: 139, 92, 246;

	--theme-name: "Amber Theme";
}

/* Red Theme */
html.theme-red {
	--primary-color: #ef4444;
	--primary-light: #f87171;
	--primary-dark: #dc2626;
	--primary-rgb: 239, 68, 68;

	--secondary-color: #4b5563;
	--secondary-light: #6b7280;
	--secondary-dark: #374151;
	--secondary-rgb: 75, 85, 99;

	--tertiary-color: #3b82f6;
	--tertiary-light: #60a5fa;
	--tertiary-dark: #2563eb;
	--tertiary-rgb: 59, 130, 246;

	--quaternary-color: #10b981;
	--quaternary-light: #34d399;
	--quaternary-dark: #059669;
	--quaternary-rgb: 16, 185, 129;

	--theme-name: "Red Theme";
}

/* Teal Theme */
html.theme-teal {
	--primary-color: #14b8a6;
	--primary-light: #2dd4bf;
	--primary-dark: #0d9488;
	--primary-rgb: 20, 184, 166;

	--secondary-color: #6b7280;
	--secondary-light: #9ca3af;
	--secondary-dark: #4b5563;
	--secondary-rgb: 107, 114, 128;

	--tertiary-color: #8b5cf6;
	--tertiary-light: #a78bfa;
	--tertiary-dark: #7c3aed;
	--tertiary-rgb: 139, 92, 246;

	--quaternary-color: #f59e0b;
	--quaternary-light: #fbbf24;
	--quaternary-dark: #d97706;
	--quaternary-rgb: 245, 158, 11;

	--theme-name: "Teal Theme";
}

/* Dark mode variables */
html.dark {
	--background-color: #111827;
	/*--text-color: #f9fafb;*/
	--text-color: #C5C2BD;
	--card-bg: #1f2937;
	--border-color: #374151;
	--header-bg: #1f2937;
	--footer-bg: #1f2937;
	--subfooter-bg: #111827;
	--menu-hover: #2d3748;
	--dropdown-bg: #2d3748;
	--input-bg: #374151;
	--input-border: #4b5563;

	/* Color adjustments for dark mode */
	--primary-light: var(--primary-color);
	--secondary-light: #9ca3af;
}

/* Primadonna Theme - Updated */
html.theme-primadonna {
	/* Primary - Silent Indigo */
	--primary-color: #3B4663;
	--primary-light: #535e7d; /* Approx. 20% lighter */
	--primary-dark: #2a3048; /* Approx. 20% darker */
	--primary-rgb: 59, 70, 99;

	/* Secondary - Arsenical Bronze */
	--secondary-color: #A9742A;
	--secondary-light: #bf8f47; /* Lighter version */
	--secondary-dark: #875b1c;  /* Darker version */
	--secondary-rgb: 169, 116, 42;

	/* Tertiary - Sodalite Blue (used only in Glacier) */
	--tertiary-color: #95A1B1;
	--tertiary-light: #aeb8c6;
	--tertiary-dark: #7d8795;
	--tertiary-rgb: 149, 161, 177;

	/* Quaternary - Crevasse */
	--quaternary-color: #ADADAD;
	--quaternary-light: #c4c4c4;
	--quaternary-dark: #8c8c8c;
	--quaternary-rgb: 173, 173, 173;

	--button-primary: #FFFFFF;

	--theme-name: "Primadonna Theme";

	/* Glacier Mode (light) */
	--theme-primary: var(--primary-color);      /* Silent Indigo */
	--theme-secondary: var(--secondary-color);  /* Arsenical Bronze */
	--theme-tertiary: var(--tertiary-color);    /* Sodalite Blue */
	--theme-link: var(--primary-color);         /* Silent Indigo */
	--theme-text: #3B4663;                      /* Silent Indigo */
	--theme-background: #ECEDEF;                /* Crystalline Swell */
	--theme-highlight: #ADADAD;                 /* Crevasse */
	--theme-image: #3B4663;                     /* Silent Indigo */
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
	html.dark.theme-primadonna {
		--theme-primary: #A3783F;     /* Bullion */
		--theme-secondary: #807D78;   /* Anchor */
		--theme-tertiary: #374151;    /* Maritime Blue (instead of Sodalite) */
		--theme-link: #A3783F;        /* Bullion */
		--theme-text: #C5C2BD;        /* Whitewater */
		--theme-text-high-contrast: #FFFFFF; /* White */
		--theme-background: #111827; /* Midnight Ink */
		--theme-image: #0A0A0A;       /* Rich Black */
	}
}

/* Base styles */
body {
	font-family: Poppins, Roboto, Helvetica, Arial, sans-serif;
	/*margin: 0;*/
	/*padding: 0;*/
	background-color: var(--background-color) !important;
	color: var(--text-color);
	/*line-height: 1.6;*/
	-webkit-font-smoothing: antialiased;
	transition: all 0.3s ease;
}

p {
	color: var(--text-color);
}

/* Utility Classes */
.bg-primary { background-color: var(--primary-color); color: white; }
.bg-secondary { background-color: var(--secondary-color); color: white; }
.bg-tertiary { background-color: var(--tertiary-color); color: white; }
.bg-quaternary { background-color: var(--quaternary-color); color: white; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-tertiary { color: var(--tertiary-color); }
.text-quaternary { color: var(--quaternary-color); }

/* Card Icons */
.card .card-icon i {
	display: inline-block;
	background: linear-gradient(to right, var(--primary-dark), var(--primary-light));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent; /* for Safari */
}


/* Header Styles */
.utility-bar {
	background-color: var(--secondary-color);
	color: white;
	padding: 5px 0;
	font-size: 12px;
}

.utility-bar a {
	color: white;
	margin-right: 15px;
}

.header {
	background-color: var(--header-bg);
	/*border-bottom: 1px solid var(--border-color);*/
	border-bottom: none;
	padding: 15px 0;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.logo {
	display: flex;
	align-items: center;
}

#header h1.logo img {
	height: 100px;
	margin-left: -5px;
}

.logo h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--primary-color);
}

/* Navigation */
.navbar {
	margin-bottom: 0;
	border: none;
	background-color: transparent;
}

.navbar-default {
	background-color: var(--header-bg);
	border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
	color: var(--text-color);
	font-weight: 500;
	padding: 15px;
	transition: all 0.3s ease;
}

.navbar-default .navbar-nav > li > a:hover {
	color: var(--primary-color);
	background-color: var(--menu-hover);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
	color: var(--primary-color);
	background-color: transparent;
	border-bottom: 3px solid var(--primary-color);
}

.dropdown-menu {
	background-color: var(--dropdown-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	padding: 0;
	margin-top: 0;
	min-width: 200px;
}

.dropdown-menu > li > a {
	padding: 10px 20px;
	color: var(--text-color);
	transition: all 0.2s ease;
	position: relative;
}

.dropdown-menu > li > a:hover {
	background-color: var(--menu-hover);
	color: var(--primary-color);
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	border-radius: 0 4px 4px 4px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

.dropdown-submenu > a:after {
	content: "\f105";
	font-family: 'FontAwesome';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

/* Main Content */
.main-content {
	padding: 60px 0;
}

.section {
	padding: 60px 0;
}

.section-title {
	text-align: center;
	margin-bottom: 50px;
}

.section-title h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 15px;
}

.section-title p {
	font-size: 18px;
	color: var(--secondary-color);
	max-width: 700px;
	margin: 0 auto;
}

/* Hero Section */
.hero {
	padding: 100px 0;
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
	color: white;
	text-align: center;
}

.hero h1 {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 20px;
}

.hero p {
	font-size: 20px;
	max-width: 700px;
	margin: 0 auto 30px;
}

/* Cards */
.card {
	background-color: var(--card-bg);
	border-radius: 8px;
	border: 1px solid var(--border-color);
	padding: 25px;
	margin-bottom: 30px;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-icon {
	font-size: 40px;
	margin-bottom: 20px;
	color: var(--primary-color);
}

.card-title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--text-color);
}

.card-text {
	color: var(--secondary-color);
	margin-bottom: 20px;
}

/* Buttons */
.btn {
	border-radius: 4px;
	font-weight: 500;
	/*padding: 8px 20px;*/
	transition: all 0.2s ease;
}

.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
}

.btn-secondary {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: white;
}

.btn-secondary:hover, .btn-secondary:focus {
	background-color: var(--secondary-dark);
	border-color: var(--secondary-dark);
	color: white;
}

.btn-tertiary {
	background-color: var(--tertiary-color);
	border-color: var(--tertiary-color);
	color: white;
}

.btn-tertiary:hover, .btn-tertiary:focus {
	background-color: var(--tertiary-dark);
	border-color: var(--tertiary-dark);
	color: white;
}

.btn-quaternary {
	background-color: var(--quaternary-color);
	border-color: var(--quaternary-color);
	color: white;
}

.btn-quaternary:hover, .btn-quaternary:focus {
	background-color: var(--quaternary-dark);
	border-color: var(--quaternary-dark);
	color: white;
}

.btn-outline, .btn-default {
	background-color: transparent;
	color: var(--text-color);
	border: 2px solid var(--border-color);
}

.btn-default {
	background-color: transparent !important;
	color: var(--text-color);
	border: 2px solid var(--border-color);
}

.btn-outline:hover {
	background-color: var(--border-color);
}

.btn-lg {
	/*padding: 12px 30px;*/
	font-size: 16px;
}

.btn-default,
html.dark .btn-default {
	/*background-color: transparent !important;*/
	color: var(--text-color);
	border: 2px solid var(--border-color);
}

form .input-group-icon .input-group-btn:last-child button,
form .input-search .input-group-btn:last-child button {
	left: auto;
	right: 0;
	border: none;
	/*min-width: 50px;*/
	background-color: transparent !important;
}

.signin_remember {
	display: none;
}

.input-group-icon .input-group-btn button.view-password {
	background-color: transparent !important;
}

/* Features section */
.features-section {
	background-color: var(--background-color);
}

/* Testimonial section */
.testimonial {
	text-align: center;
	padding: 30px;
	background-color: var(--card-bg);
	border-radius: 8px;
	margin: 15px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.testimonial-content {
	margin-bottom: 20px;
	font-style: italic;
	color: var(--text-color);
}

.testimonial-author {
	font-weight: 600;
	color: var(--primary-color);
}

.testimonial-role {
	font-size: 14px;
	color: var(--secondary-color);
}

/* Call to Action */
.cta-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--tertiary-color) 0%, var(--tertiary-dark) 100%);
	color: white;
	text-align: center;
}

.cta-section h2 {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 20px;
}

.cta-section p {
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto 30px;
}

/* Forms */
.form-container {
	background-color: var(--card-bg);
	padding: 30px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	max-width: 800px;
	margin: 0 auto;
}

.form-title {
	margin-bottom: 30px;
	text-align: center;
}

.form-group {
	margin-bottom: 15px;
}

.form-control {
	height: 45px;
	background-color: var(--input-bg) !important;
	border: 1px solid var(--input-border) !important;
	color: var(--text-color) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
}

.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(74, 108, 247, 0.25);
}

.input-group-btn .btn {
	/*height: 45px;*/
	/*line-height: 33px;*/
}

.control-label {
	font-weight: 500;
	color: var(--text-color);
}

.input-group-icon {
	position: relative;
}

.input-group-icon .fa {
	position: absolute;
	top: 15px;
	right: 15px;
	color: var(--secondary-color);
}

.field-message {
	margin-top: 5px;
	color: var(--secondary-color);
	font-size: 13px;
}

/* Theme Switch */
.theme-switch {
	display: inline-block;
	height: 20px;
	position: relative;
	width: 40px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: #ccc;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	background-color: white;
	bottom: 2px;
	content: "";
	height: 16px;
	left: 2px;
	position: absolute;
	transition: .4s;
	width: 16px;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--primary-color);
}

input:checked + .slider:before {
	transform: translateX(20px);
}

.theme-switch-wrapper {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

.theme-switch-wrapper em {
	margin-right: 10px;
	font-size: 14px;
}

/* Theme and Language Switcher */
.theme-color-switch {
	position: relative;
	margin-right: 15px;
}

.theme-color-switch select {
	appearance: none;
	background: transparent;
	border: none;
	color: white;
	padding-right: 15px;
	cursor: pointer;
	font-size: 14px;
}

.theme-color-switch:after {
	content: "\f107";
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.language-switcher {
	position: relative;
	display: inline-block;
}

.language-switcher select {
	appearance: none;
	background: transparent;
	border: none;
	color: white;
	padding-right: 15px;
	cursor: pointer;
	font-size: 14px;
}

.language-switcher:after {
	content: "\f107";
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Footer */

.footer {
	background-color: var(--footer-bg);
	padding: 60px 0 0;
	color: var(--text-color);
}

.footer-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--text-color);
}

.footer-links {
	list-style: none;
	padding: 0;
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color: var(--secondary-color);
	transition: all 0.2s ease;
}

.footer-links a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

#header .logo .light-mode-logo,
#header .logo .dark-mode-logo {
	opacity: 1.0;
}

.footer .light-mode-logo,
.footer .dark-mode-logo {
	opacity: 0.3;
}

.social-links {
	margin-top: 20px;
}

.social-links a {
	display: inline-block;
	width: 35px;
	height: 35px;
	background-color: var(--secondary-color);
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	margin-right: 10px;
	transition: all 0.4s ease !important;
}

.social-links a:hover {
	color: #ffffff;
	background-color: var(--primary-color);
	transform: translateY(-3px);
}

/* Sub Footer */
.sub-footer {
	background-color: var(--subfooter-bg);
	padding: 20px 0;
	color: var(--secondary-color);
	font-size: 14px;
}

.sub-footer a {
	color: var(--primary-color);
}

html.dark .sub-footer .light-mode-logo {
	display: none;
}
html.dark .sub-footer .dark-mode-logo {
	display: inline-block;
}
.sub-footer .dark-mode-logo {
	display: none;
}
.sub-footer .light-mode-logo {
	display: inline-block;
}


/* Components Library */
.components-section {
	padding: 60px 0;
}

.component-example {
	margin-bottom: 50px;
}

.component-title {
	margin-bottom: 20px;
	font-weight: 600;
}

/* Alerts */
.alert {
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
}

.alert-primary {
	/*background-color: rgba(74, 108, 247, 0.1);*/
	background-color: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.alert-success {
	/*background-color: rgba(16, 185, 129, 0.1);*/
	background-color: transparent;
	border-color: var(--tertiary-color);
	color: var(--tertiary-color);
}

.alert-warning {
	/*background-color: rgba(245, 158, 11, 0.1);*/
	background-color: transparent;
	border-color: var(--quaternary-color);
	color: var(--quaternary-color);
}

.alert-danger {
	/*background-color: rgba(239, 68, 68, 0.1);*/
	background-color: transparent;
	border-color: var(--danger-color);
	color: var(--danger-color);
}

/* Badges */
.badge {
	background-color: var(--secondary-color);
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 30px;
	font-size: 12px;
}

.badge-primary {
	background-color: var(--primary-color);
}

.badge-success {
	background-color: var(--tertiary-color);
}

.badge-warning {
	background-color: var(--quaternary-color);
}

.badge-danger {
	background-color: var(--danger-color);
}

/* Tooltips & Popovers */
.tooltip-inner {
	background-color: var(--menu-hover);
	border-radius: 4px;
	padding: 10px 15px;
	max-width: 250px;

}

.tooltip.top .tooltip-arrow {
	border-top-color: var(--menu-hover);
}

/* Authentication Buttons */
.auth-buttons {
	display: flex;
	gap: 10px;
}

/* Modal Styles */
.modal-content {
	background-color: var(--footer-bg);
	color: var(--text-color);
	border-radius: 8px;
	border: 1px solid var(--text-color);
}

html.dark .modal-content {
	background-color: var(--subfooter-bg);
	color: var(--text-color);
	border-radius: 8px;
	border: 1px solid var(--border-color);
}

.modal-header {
	border-bottom: 1px solid var(--border-color);
}

.modal-footer {
	border-top: 1px solid var(--border-color);
}

.close {
	color: var(--text-color);
	opacity: 0.7;
}

.close:hover {
	opacity: 1;
}

/* Current Theme Display */
.current-theme {
	margin-left: 15px;
	padding: 3px 8px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}

/* Table Styles - Updated for Dark Mode */
.table {
	color: var(--text-color);
	background-color: transparent;
}

.table > thead > tr > th {
	border-bottom: 2px solid var(--border-color);
	color: var(--text-color);
	font-weight: 600;
	padding: 12px 8px;
	vertical-align: middle;
}

.table > tbody > tr > td {
	border-top: 1px solid var(--border-color);
	padding: 12px 8px;
	vertical-align: middle;
}

/* Fix for dark mode table rows */
html.dark .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.05);
}

html.dark .table-striped > tbody > tr:nth-of-type(even) {
	background-color: transparent;
}

html.dark .table-hover > tbody > tr:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* New table class with subtle striping and hover effect */
.table-elegant {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
	background-color: var(--card-bg);
}

.table-elegant thead th {
	background-color: rgba(var(--primary-rgb), 0.1);
	color: var(--text-color);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.5px;
	padding: 16px;
	border-bottom: 1px solid var(--border-color);
}

.table-elegant tbody tr {
	transition: all 0.2s ease;
	border-bottom: 1px solid var(--border-color);
}

.table-elegant tbody tr:last-child {
	border-bottom: none;
}

.table-elegant tbody td {
	padding: 14px 16px;
}

.table-elegant tbody tr:nth-child(odd) {
	background-color: rgba(var(--primary-rgb), 0.02);
}

.table-elegant tbody tr:hover {
	background-color: rgba(var(--primary-rgb), 0.05);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Ensure dark mode works with table-elegant too */
html.dark .table-elegant thead th {
	background-color: rgba(255, 255, 255, 0.05);
}

html.dark .table-elegant tbody tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.03);
}

html.dark .table-elegant tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.07);
}

/* Status badges for tables */
.table .status-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 30px;
	font-weight: 500;
	font-size: 12px;
	text-align: center;
	min-width: 80px;
}

.table .status-badge.active {
	background-color: var(--tertiary-color);
	color: white;
}

.table .status-badge.inactive {
	background-color: var(--secondary-color);
	color: white;
}

.table .status-badge.pending {
	background-color: var(--quaternary-color);
	color: white;
}

.table .status-badge.on-leave {
	background-color: var(--quaternary-color);
	color: white;
}

.footer-section {
	margin-bottom: 30px;
}
.footer-section p {
	color: var(--secondary-color) !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
	.navbar-header {
		float: none;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	.navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-nav {
		float: none !important;
		margin: 7.5px -15px;
	}
	.navbar-nav>li {
		float: none;
	}
	.navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.navbar-collapse.collapse.in {
		display: block !important;
	}
	.collapsing {
		overflow: hidden !important;
	}

	.dropdown-submenu > .dropdown-menu {
		position: static;
		left: 0;
		width: 100%;
		margin-left: 15px;
		box-shadow: none;
		border: none;
		background-color: transparent;
	}

	.auth-buttons {
		margin-top: 10px;
		width: 100%;
		justify-content: center;
	}

	.utility-bar .col-md-6 {
		text-align: center;
		margin-bottom: 5px;
	}

}

@media (min-width: 992px) and (max-width: 1199.98px) {

	#header h1.logo img {
		max-width: none !important;
		max-height: none !important;
		height: inherit !important;
	}

}

@media (max-width: 767px) {
	.hero {
		padding: 60px 0;
	}
	.hero h1 {
		font-size: 32px;
	}
	.hero p {
		font-size: 16px;
	}
	.section {
		padding: 40px 0;
	}
	.section-title h2 {
		font-size: 28px;
	}
	.footer {
		padding: 40px 0 20px;
	}
	.theme-color-switch,
	.language-switcher,
	.theme-switch-wrapper,
	.current-theme {
		margin: 5px 10px;
	}
	.utility-bar .text-right {
		text-align: center;
		margin-top: 10px;
	}
}







/* Default Skin */

h3,
h4,
h5 {
	color: var(--text-color);
}

a {
	color: var(--primary-color);
}

a:hover {
	color: #c1ae8a;
}

a:active {
	color: #af9668;
}

.alternative-font {
	color: var(--primary-color);
	word-spacing: -0.2em;
}

p.drop-caps:first-child:first-letter {
	color: var(--primary-color);
}

p.drop-caps.secundary:first-child:first-letter {
	background-color: var(--primary-color);
}

ul.nav-pills > li.active > a {
	background-color: var(--primary-color);
}

ul.nav-pills > li.active > a:hover,
ul.nav-pills > li.active > a:focus {
	background-color: var(--primary-color);
}

.sort-source-wrapper .nav > li.active > a {
	color: var(--primary-color);
}

.sort-source-wrapper .nav > li.active > a:hover,
.sort-source-wrapper .nav > li.active > a:focus {
	color: var(--primary-color);
}
/* Labels */
.label-primary {
	background-color: var(--primary-color);
}

.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
	color: var(--primary-color);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

body.dark .pagination > li > a,
body.dark .pagination > li > span,
body.dark .pagination > li > a:hover,
body.dark .pagination > li > span:hover,
body.dark .pagination > li > a:focus,
body.dark .pagination > li > span:focus {
	color: var(--primary-color);
}

body.dark .pagination > .active > a,
body.dark .pagination > .active > span,
body.dark .pagination > .active > a:hover,
body.dark .pagination > .active > span:hover,
body.dark .pagination > .active > a:focus,
body.dark .pagination > .active > span:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary,
.pagination > .active > a,
body.dark .pagination > .active > a {
	border-color: var(--primary-color) !important;
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--primary-color);
	background-image: -moz-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--primary-color)), to(var(--primary-dark)));
	background-image: -webkit-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: -o-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
	background-repeat: repeat-x;
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb8a279', endColorstr='#ffb8b779', GradientType=0);*/
	border-color: var(--primary-color);
}

.btn-primary:hover,
.pagination > .active > a:hover,
body.dark .pagination > .active > a:hover {
	border-color: var(--primary-dark);
	background-color: var(--primary-dark);
}

.btn-primary:active,
.pagination > .active > a:active,
body.dark .pagination > .active > a:active,
.btn-primary:focus,
.pagination > .active > a:focus,
body.dark .pagination > .active > a:focus {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}

.progress-bar-primary {
	background-color: var(--primary-color);
}

section.highlight {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

section.page-top h2 {
	margin-top: 5px;
	border-bottom-color: var(--primary-color);
	min-height: 63px;
	border: none;
	font-weight: 300;
}

section.toggle label {
	color: var(--primary-color);
	border-left-color: var(--primary-color);
}

section.toggle.active > label {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #FFF;
}

section.page-top.custom-product {
	background-color: var(--primary-color);
	border-top-color: var(--primary-color);
}

.feature-box .feature-box-icon {
	background-color: var(--primary-color);
}

.feature-box.secundary .feature-box-icon i.fa {
	color: var(--primary-color);
}

.thumb-info .thumb-info-type {
	background-color: var(--primary-color);
}

.thumb-info .thumb-info-action-icon {
	background-color: var(--primary-color);
}

.thumb-info-social-icons a {
	background-color: var(--primary-color);
}

.thumbnail .zoom {
	background-color: var(--primary-color);
}

.img-thumbnail .zoom {
	background-color: var(--primary-color);
}

.inverted {
	background-color: var(--primary-color);
}

.tabs ul.nav-tabs a,
.tabs ul.nav-tabs a:hover {
	color: var(--primary-color);
}

.tabs ul.nav-tabs a:hover,
.tabs ul.nav-tabs a:focus {
	border-top-color: var(--primary-color);
}

.tabs ul.nav-tabs li.active a {
	border-top-color: var(--primary-color);
	color: var(--primary-color);
}

.tabs ul.nav-tabs.nav-justified a:hover,
.tabs ul.nav-tabs.nav-justified a:focus {
	border-top-color: var(--primary-color);
}

.tabs.tabs-bottom ul.nav-tabs li a:hover,
.tabs.tabs-bottom ul.nav-tabs li.active a,
.tabs.tabs-bottom ul.nav-tabs li.active a:hover,
.tabs.tabs-bottom ul.nav-tabs li.active a:focus {
	border-bottom-color: var(--primary-color);
}

.tabs.tabs-vertical.tabs-left ul.nav-tabs li a:hover,
.tabs.tabs-vertical.tabs-left ul.nav-tabs li.active a,
.tabs.tabs-vertical.tabs-left ul.nav-tabs li.active a:hover,
.tabs.tabs-vertical.tabs-left ul.nav-tabs li.active a:focus {
	border-left-color: var(--primary-color);
}

.tabs.tabs-vertical.tabs-right ul.nav-tabs li a:hover,
.tabs.tabs-vertical.tabs-right ul.nav-tabs li.active a,
.tabs.tabs-vertical.tabs-right ul.nav-tabs li.active a:hover,
.tabs.tabs-vertical.tabs-right ul.nav-tabs li.active a:focus {
	border-right-color: var(--primary-color);
}

ul.list.icons li i {
	color: var(--primary-color);
}

i.icon-featured {
	background-color: var(--primary-color);
}

.parallax blockquote i.fa-quote-left {
	color: var(--primary-color);
}

section.video blockquote i.fa-quote-left {
	color: var(--primary-color);
}

.panel-group .panel-heading a {
	color: var(--primary-color);
}

.panel-group.secundary .panel-heading {
	background-color: var(--primary-color) !important;
}

html.dark #header {
	background-color: var(--background-color) !important;
	/*border-top-color: #191c21;*/
	/*border-radius: 6px 6px 0 0;*/
}

#header nav.mega-menu ul.nav-main li.mega-menu-item ul.dropdown-menu,
html.dark #header nav.mega-menu ul.nav-main li.mega-menu-item ul.dropdown-menu {
	background-color: var(--background-color) !important;
}

#header nav ul.nav-main ul.dropdown-menu,
#header nav ul.nav-main li.dropdown.open .dropdown-toggle,
#header nav ul.nav-main li.active a,
#header nav ul.nav-main li > a:hover,
#header nav ul.nav-main li.dropdown:hover a {
	color: #FFF;
	background-color: var(--primary-color) !important;
}

#header nav ul.nav-main ul.dropdown-menu li:hover > a {
	background-color: var(--primary-color) !important;
}

#header nav ul.nav-main ul.dropdown-menu {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--primary-color);
	background-image: -moz-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--primary-color)), to(var(--primary-dark)));
	background-image: -webkit-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: -o-linear-gradient(top, var(--primary-color), var(--primary-dark));
	background-image: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
	background-repeat: repeat-x;
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb8a279', endColorstr='#ffb8b779', GradientType=0);*/
	border-color: var(--primary-color);
}

#header nav ul.nav-main ul.dropdown-menu:hover {
	border-color: var(--primary-color);
	background-color: var(--primary-light);
}

#header nav ul.nav-main ul.dropdown-menu:active,
#header nav ul.nav-main ul.dropdown-menu:focus {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}

#header nav ul.nav-main li.dropdown:hover ul.dropdown-menu li > a {
	background: none !important;
        border-radius: 4px;
}

#header nav ul.nav-main li.dropdown:hover ul.dropdown-menu li > a:hover {
	background: var(--primary-dark) !important;
}

#header.single-menu nav ul.nav-main li.active > a {
	border-top: 5px solid var(--primary-color);
}

#header.darken-top-border {
	border-top: 5px solid var(--primary-dark) !important;
}

#header.colored .header-top {
	background-color: var(--primary-color);
}

#header.colored .header-top ul.nav-top li a:hover {
	background-color: var(--primary-color) !important;
}

#header.flat-menu nav ul.nav-main li > a,
#header.flat-menu nav ul.nav-main li.active > a {
	color: #666;
}

#header.flat-menu nav ul.nav-main li.active > a {
	color: var(--primary-color);
	background-color: transparent !important;
}

#header.flat-menu nav ul.nav-main li > a:hover,
#header.flat-menu nav ul.nav-main li.dropdown:hover a {
	color: #FFF;
	background-color: var(--primary-color) !important;
}

#header nav.mega-menu ul.nav-main li.mega-menu-item ul.dropdown-menu {
	border-top-color: var(--primary-color);
}

/*#header nav ul.nav-main ul.dropdown-menu*/
#header nav ul.nav-main > li.dropdown > ul.dropdown-menu > li:last-child > a,
#header nav ul.nav-main ul.dropdown-menu > ul.dropdown li:last-child > a {
	border-bottom: none !important;
}

.breadcrumb > .active {
	color: var(--secondary-color) !important;
}

.page-top {
	/*border-bottom: 5px solid #CCC;*/
	/*border-top: 5px solid #ccc;*/
	border: none;
	margin-bottom: 10px;
	min-height: 50px;
	padding: 0;
	padding: 20px 0;
	position: relative;
	text-align: left;
	background-color: #efefef;
}

html.dark .page-top {
	background-color: var(--card-bg);
	/*border-bottom: 5px solid #CCC;*/
	/*border-top: 5px solid #384045;*/
	border: none;
}

blockquote.testimonial {
	background: var(--primary-color);
}

.testimonial-arrow-down {
	border-top-color: var(--primary-color);
}

.featured-box-secundary i.icon-featured {
	background-color: var(--primary-color);
}

.featured-box-secundary h4 {
	color: var(--primary-color);
}

.featured-box-secundary .box-content {
	border-top-color: var(--primary-color);
}

.pricing-table .most-popular {
	border-color: var(--primary-color);
}

.pricing-table .most-popular h3 {
	background-color: #aa9368;
	background-image: -moz-linear-gradient(top, var(--primary-color), #957d4f);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--primary-color)), to(var(--primary-dark)));
	background-image: -webkit-linear-gradient(top, var(--primary-color), #957d4f);
	background-image: -o-linear-gradient(top, var(--primary-color), #957d4f);
	background-image: linear-gradient(to bottom, var(--primary-color), #957d4f);
	background-repeat: repeat-x;
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb8a279', endColorstr='#ff957d4f', GradientType=0);*/
}

section.timeline .timeline-box.left:before,
section.timeline .timeline-box.right:before {
	background: var(--primary-color);
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--primary-color);
}

ul.history li .featured-box .box-content {
	border-top-color: var(--primary-color);
}

.recent-posts .date .month,
article.post .post-date .month {
	background-color: var(--primary-color);
}

.recent-posts .date .day,
article.post .post-date .day {
	color: var(--primary-color);
}

.slider .tp-bannertimer {
	background-color: var(--primary-color);
}

.home-intro p em {
	color: var(--primary-color);
}

.home-concept strong {
	color: var(--primary-color);
}

.shop ul.products li.product .onsale {
	background-color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.shop .star-rating span,
.shop .cart-totals tr.total .amount {
	color: var(--primary-color);
}

html.boxed .body {
	border-top-color: var(--primary-color);
}


/* DOCS */

img.docs {
    display: block;
    margin: 0 auto 20px auto;
}

.camelCase {
    text-transform: none !important;
}

.gold {
    color: var(--primary-color);
}

.border-black {
    border: solid black 1px;
    border-radius: 4px;
}

.white {
    color: white !important;
}

.orange {
    color: orange !important;
}

.green {
    color: green !important;
}

.red {
    color: red !important;
}

.blue {
	color: dodgerblue !important;
}

.help {
	cursor: help !important;
}


/* Chanel page */

.ad-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; 
    right: 0;
    z-index: 1000;
	background-color: #282d36;
	color: #fff;
	list-style: none;
	padding: 0;
	border: 1px solid #282d36;
}
.ad-dropdown {
	position: relative;
	width: fit-content;
	border-radius: 5px;
}
.ad-dropdown button:hover,
.ad-dropdown-item button:hover {
	color: #fff !important;
}
.ad-dropdown button{
	color: #fff;
	background-color: var(--primary-color) !important;
}

.ad-dropdown:hover .ad-dropdown-menu {
    display: block;
	color: #fff;
	border-radius: 5px;
}

.ad-dropdown-menu .ad-dropdown-item {
    text-decoration: none;
	background-color: #2e353e !important;
	width: 100%;
	border-bottom: 1px solid #1d2127;
}

.ad-dropdown-menu .ad-dropdown-item:hover {
	background-color: #17191c;
}

/* Utility Classes */

.p0 { padding: 0; }
.mr60 { margin-right: 60px; }

/* Misc. Classes */

#search_scope {
	border-radius: 4px 0 0 4px !important;
	padding: 0px 10px 0px 10px !important;
	margin: 0 !important;
	height: 45px;
}

input#location {
	border-radius: 4px 0 0 4px !important;
}

#search-fav-img,
#search-control-button {
	height: 45px;
	padding-top: 12px;
	width: 50px;
	text-align: center;
}

#search-tips {
	margin-left: -3px;
}

input#keywords {
	margin-left: -2px;
	border-radius: 0 !important;
}

.input-group-btn:last-child > .btn {
	min-height: 45px;
}

#search-tips {

}

span.twitter-typeahead {
	width: 100%;
	margin: 0 0 -6px 0;
	border-radius: 4px;
}

.img-thumbnail, .thumb-info img.image {
	border-radius: 8px !important;
}

.locale-switch {
	display: inline-block;
	margin: -8px 20px 0 0;
}

.locale-switch select {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 12px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block;
}

#header nav ul.nav-top li span {
	color: var(--secondary-color);
	font-size: 0.9em;
	padding: 6px 10px;
}

.mode-switch {
	display: inline-block;
	min-width: 67px !important;
	transition: opacity .4s ease-in;
}

.mode-switch i {
	display: inline-block;
	color: var(--secondary-color);
	margin-left: -8px;
}

.mode-switch .switch {
	margin-top: 1px
}

.mode-switch .switch.switch-sm .ios-switch {
	transform: scale(0.6) !important;
}

.ios-switch .state-background {
	background-image: none !important;
	background-color: var(--secondary-dark) !important;
	border: none;
}

.ios-switch .on-background {
	background-image: none !important;
	background-color: var(--secondary-color) !important;
}

.search-element .btn-default,
.input-group-btn .btn-default {
	background-color: var(--input-bg) !important;
	border-color: var(--input-border) !important;
}

table .switch.switch-primary .ios-switch .on-background {
	background: var(--primary-color) !important;
}

/* Tables & Panels */

html.dark .panel-heading {
	background: var(--card-bg);
	border-bottom-color: var(--border-color);
}
.panel-heading {
	background: var(--card-bg);
	border-bottom-color: var(--border-color);
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid var(--border-color);
	padding: 18px;
	position: relative;
}

html.dark .panel-body {
	background: var(--card-bg);
}

html.dark .table-striped > tbody > tr:nth-child(2n+1) > td,
html.dark .table-striped > tbody > tr:nth-child(2n+1) > th,
html.dark .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--menu-hover) !important;
}

.user-login-panel-body {
	min-height: 335px;
}

.brand-profile-link,
.offer-profile-link {
	color: #888888 !important;
}
.brand-profile-link:hover,
.offer-profile-link:hover {
	color: #ffffff !important;
}

.tabs .tab-content,
html.dark .tabs .tab-content {
	background: var(--card-bg);
	border-color: var(--border-color);
}

.panel-footer,
html.dark .panel-footer {
	background: var(--card-bg);
	border-color: var(--border-color);
}

.tabs .nav-tabs li.active a,
.tabs .nav-tabs li.active a:hover,
.tabs .nav-tabs li.active a:focus,
html.dark .tabs .nav-tabs li.active a,
html.dark .tabs .nav-tabs li.active a:hover,
html.dark .tabs .nav-tabs li.active a:focus {
	background: var(--card-bg);
	border-left-color: var(--card-bg);
	border-right-color: var(--card-bg);
	transition: all 0.4s ease;
}

.tabs .nav-tabs li a,
html.dark .tabs .nav-tabs li a {
	border-left-color: var(--border-color);
	border-right-color: var(--border-color);
	background: var(--border-color);
	transition: all 0.4s ease;
}

.tabs .nav-tabs li a:hover,
html.dark .tabs .nav-tabs li a:hover {
	border-top-color: var(--primary-color);
	border-left-color: var(--card-bg);
	border-right-color: var(--card-bg);
	background: var(--card-bg);
}


td a.controls.button {
	/*background-color: var(--primary-color);*/
	background: linear-gradient( var(--primary-color), var(--primary-dark));
	border: 1px solid var(--primary-dark);
	color: var(--text-color);
}

td a.controls.button:link i,
td a.controls.button:hover i,
td a.controls.button:active i,
td a.controls.button:visited i {
	color: var(--text-color);
}

td a.controls.button:hover {
	background: var(--primary-color);
}

.helper-links a:link,
.helper-links a:active,
.helper-links a:visited {
	color: var(--secondary-color) !important;
}

.helper-links a:hover {
	color: var(--secondary-light) !important;
}