:root {
	/* Primary gradient used throughout the application */
	--primary-gradient: linear-gradient(0deg, rgba(0, 174, 222, 1) 0%, rgba(11, 135, 176, 1) 39%, rgba(30, 61, 89, 1) 100%);
	--primary-gradient-card-header: linear-gradient(90deg, rgba(30,61,89,1) 0%, rgba(11,135,176,1) 39%, rgba(0,174,222,1) 100%);
	--primary-logo: url("/style/IDEA_LIGHT_YACHT.svg");
	--primary-logo-small: url("/style/default/loginLogoTop.png");
	--primary-logo-glyph: url("/style/IDEA_YACHT GLYPH WHITE.svg");
	--primary-text-info: #1bcad4;
	--c: rgba(0, 0, 0, 0.1);
	--primary-tab-color: #E5E5E5;
	/* Component colors - for easier gradient composition */
	--gradient-start-color: rgba(0, 174, 222, 1);
	--gradient-middle-color: rgba(11, 135, 176, 1);
	--gradient-end-color: rgba(30, 61, 89, 1);
	/* Gradient direction options */
	--gradient-direction-down: 0deg;
	--gradient-direction-up: 180deg;
	--gradient-direction-right: 90deg;
	--gradient-direction-left: 270deg;
	/* Alternative gradients for different UI components */
	--secondary-gradient: linear-gradient(0deg, rgba(30, 61, 89, 1) 0%, rgba(11, 135, 176, 1) 60%, rgba(0, 174, 222, 1) 100%);
	--accent-gradient: linear-gradient(90deg, rgba(0, 174, 222, 1) 0%, rgba(11, 135, 176, 1) 50%, rgba(30, 61, 89, 1) 100%);
	/* Button gradients */
	--button-gradient: var(--primary-gradient);
	--button-hover-gradient: linear-gradient(0deg, rgba(0, 194, 242, 1) 0%, rgba(11, 155, 196, 1) 39%, rgba(30, 81, 109, 1) 100%);
	/* Header gradients */
	--header-gradient: var(--primary-gradient);
	/* Modal gradients */
	--modal-header-gradient: var(--primary-gradient);
	/* New Orange-Blue Theme */
	--orange-blue-start-color: rgba(234, 89, 50, 1); /* #EA5932 */
	--orange-blue-middle-color: rgba(162, 82, 76, 1); /* Blend between orange and blue */
	--orange-blue-end-color: rgba(30, 61, 89, 1); /* #1E3D59 */
	--orange-blue-gradient: linear-gradient(0deg, var(--orange-blue-start-color) 0%, var(--orange-blue-middle-color) 20%, var(--orange-blue-end-color) 50%);
	--orange-blue-horizontal-gradient: linear-gradient(90deg, var(--orange-blue-start-color) 0%, var(--orange-blue-middle-color) 50%, var(--orange-blue-end-color) 100%);
	--orange-blue-reverse-gradient: linear-gradient(0deg, var(--orange-blue-end-color) 0%, var(--orange-blue-middle-color) 50%, var(--orange-blue-start-color) 100%);
	--orange-blue-gradient-card-header: linear-gradient(90deg, var(--orange-blue-end-color) 0%, var(--orange-blue-middle-color) 60%, var(--orange-blue-start-color) 100%);
	--orange-blue-logo: url("/style/IDEA_ORANGE_YACHT.svg");
	--orange-blue-logo-small: url("/style/default/idea gt horizontal.png");
	--orange-blue-info: rgba(234, 89, 50, 1);
	--orange-blue-tab-color: #f1c7c78f;
	/* Feadship Theme Colors */
	--feadship-main: #15173d; /* Dark blue/navy */
	--feadship-accent: #1bcad4; /* Bright blue */
	--feadship-white: #ffffff; /* White */
	--feadship-main-alpha: rgba(21, 23, 61, 1);
	--feadship-accent-alpha: rgba(46, 80, 214, 1);
	--feadship-middle-alpha: rgba(33, 51, 137, 1); /* Blend between main and accent */
	--feadship-gradient: linear-gradient(0deg, var(--feadship-main-alpha) 0%, var(--feadship-middle-alpha) 50%, var(--feadship-accent-alpha) 100%);
	--feadship-horizontal-gradient: linear-gradient(90deg, var(--feadship-main-alpha) 0%, var(--feadship-middle-alpha) 50%, var(--feadship-accent-alpha) 100%);
	--feadship-reverse-gradient: linear-gradient(0deg, var(--feadship-accent-alpha) 0%, var(--feadship-middle-alpha) 50%, var(--feadship-main-alpha) 100%);
	--feadship-card-header: linear-gradient(90deg, var(--feadship-main-alpha) 0%, var(--feadship-middle-alpha) 60%, var(--feadship-accent-alpha) 100%);
	--feadship-tab-color: #dfe1ff;
}

/* Dark theme variables (can be toggled via JavaScript) */
.dark-theme {
	--primary-gradient: linear-gradient(0deg, rgba(0, 134, 182, 1) 0%, rgba(11, 95, 136, 1) 39%, rgba(20, 41, 69, 1) 100%);
	/* Add other dark theme gradient variations here */
}

/* Orange-Blue Theme Class */
.orange-blue-theme {
	--primary-gradient: var(--orange-blue-gradient);
	--secondary-gradient: var(--orange-blue-reverse-gradient);
	--accent-gradient: var(--orange-blue-horizontal-gradient);
	--button-gradient: var(--orange-blue-gradient);
	--button-hover-gradient: linear-gradient(0deg, rgba(254, 109, 70, 1) 0%, rgba(182, 102, 96, 1) 50%, rgba(50, 81, 109, 1) 100%);
	--header-gradient: var(--orange-blue-gradient);
	--modal-header-gradient: var(--orange-blue-gradient);
	--primary-gradient-card-header: var(--orange-blue-gradient-card-header);
	--primary-logo: var(--orange-blue-logo);
	--primary-logo-small: var(--orange-blue-logo-small);
	--primary-text-info: var(--orange-blue-info);
	--primary-tab-color: var(--orange-blue-tab-color);
}

/* Feadship Theme Class */
.feadship-theme {
	--primary-gradient: var(--feadship-gradient);
	--secondary-gradient: var(--feadship-reverse-gradient);
	--accent-gradient: var(--feadship-horizontal-gradient);
	--button-gradient: var(--feadship-gradient);
	--button-hover-gradient: linear-gradient(0deg, rgba(30, 30, 80, 1) 0%, rgba(40, 60, 160, 1) 50%, rgba(60, 90, 240, 1) 100%);
	--header-gradient: var(--feadship-gradient);
	--modal-header-gradient: var(--feadship-gradient);
	--primary-gradient-card-header: var(--feadship-card-header);
	--primary-logo: url("/style/default/LogoFS.png"); /* You may want to add a custom Feadship-branded logo */
	--primary-logo-small: url("/style/default/LogoFS.svg"); /* You may want to add a custom Feadship-branded logo */
	--primary-logo-glyph: url("/style/default/brand-icon-FS.svg");
	--primary-text-info: var(--feadship-accent);
	--primary-tab-color: var(--feadship-tab-color);
}

.template-logo-smal {
	content: var(--primary-logo-small);
}
.template-logo-glyph {
	content: var(--primary-logo-glyph);
}
.template-logo {
	content: var(--primary-logo);
}

.has-text-info {
	color: var(--primary-text-info) !important
}

a.has-text-info:focus, a.has-text-info:hover {
	color: var(--primary-text-info) !important
}

.message-header {
	background: var(--primary-gradient-card-header);
	color: #fff !important;
}

/* Target all span elements inside elements with is-active class */
.dashboard-app .tabs .is-active span {
	color: white !important;
}


#AccountingDocuments {
	height: 100vh !important;
}