/*
* CREO Unified Theme System
* Bootstrap 5.3+ Compatible Single-File Theme Implementation
*
* Usage:
* - Add data-bs-theme="dark" or data-bs-theme="light" to element
* - Default theme is dark (defined in :root)
* - Light theme overrides are in [data-bs-theme="light"]
*/
/* ===== FONT IMPORTS ===== */
@font-face {
font-family: 'Proxima Nova Black';
src: url('../media/fonts/ProximaNova-Black.woff2') format('woff2'),
url('../media/fonts/ProximaNova-Black.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Proxima Nova SemiBold';
src: url('../media/fonts/ProximaNova-Semibold.woff2') format('woff2'),
url('../media/fonts/ProximaNova-Semibold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* ===== ROOT VARIABLES (DARK THEME + SHARED) ===== */
:root {
/* === SHARED PROPERTIES (THEME INDEPENDENT) === */
/* Layout & Spacing */
--element-opacity: 50%;
--container-offset-vert: 1rem;
--container-offset-hor: 2rem;
--container-radius: 24px;
/* Brand Colors (Theme Independent) */
--color-1: #00852c;
--color-1-highlight: #00852c90;
--color-2: #2b2d42;
--color-3: #a9cef4;
--color-4: #7ea0b7;
--color-5: #597081;
--light: #fff;
--dark: #000;
--field: #555924;
--creo-pink: #E9677B;
--creo-orchid: #A847AC;
--creo-coral: #ec686a;
--creo-orange: #F08D4D;
--creo-yellow: #D9BB4D;
--creo-lime: #C0E669;
--creo-green: #50ac47;
--creo-teal: #A847AC;
--creo-skyblue: #52ABD4;
--creo-slate: #507BD8;
--creo-violet: #6053BC;
--creo-indigo: #623B7C;
/* Theme Element Primary Colours */
--creo-primary: rgba(118, 107, 224, 1);
--creo-warning: rgba(255, 193, 7, 1);
--creo-secondary: #EFEFEF;
/* Typography (Theme Independent) */
--text-md-semibold-size: 16px;
--display-xs-semibold-size: 24px;
--text-sm-semibold-size: 14px;
--text-lg-semibold-size: 18px;
--body-xs-size: 12px;
--display-sm-semibold-size: 30px;
--font-size-4xs: 9px;
--font-size-3xs: 0.75rem;
--font-size-nav: 0.9rem;
--font-size-content: 0.85rem;
/* Border Radiuses (Theme Independent) */
--br-5xl: 24px;
--br-5xs: 8px;
--br-xs: 12px;
--br-3xs: 10px;
--br-base: 16px;
--br-7xs: 6px;
--br-181xl: 200px;
/* Effects (Theme Independent) */
--background-blur-lg: blur(24px);
--shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
/* === DARK THEME COLORS (DEFAULT) === */
/* Base Colors */
--base-white: #FFFFFF;
--base-dark: #000000;
--bg-dark: #000000;
--bg-light: #F4F4F4;
--bg-midlight: #EFEFEF;
--bg-middark: #49414F;
/* Gray Scale */
--primary-25: rgba(252, 250, 255, 1);
--primary-50: #F0EEF0;
--primary-100: #F8F4F8;
--primary-200: #E8E4E8;
--primary-300: #c4c3c5;
--primary-600: #59535E;
--primary-700: #49424F;
--primary-800: #111111;
--gray-600: #475467;
--gray-700: #4C484F;
--gray-800: rgba(43, 45, 53, 1);
--gray-900: #101828;
--gray-950: #0c111d;
/* Color Gray System */
--color-gray-200: rgba(17, 17, 17, 0.4);
--color-gray-300: rgba(8, 8, 8, 0.5);
--color-gray-400: rgba(255, 255, 255, 0.05);
--color-gray-500: rgba(0, 0, 0, 0.25);
--color-gray-600: rgba(255, 255, 255, 0.5);
--color-gray-700: rgba(255, 255, 255, 0.3);
--color-gray-800: rgba(0, 0, 0, 0.5);
/* Elevation System (Dark Theme) */
--elevation-10: rgba(0, 0, 0, 0.1);
--elevation-20: rgba(0, 0, 0, 0.2);
--elevation-30: rgba(0, 0, 0, 0.3);
--elevation-40: rgba(0, 0, 0, 0.4);
--elevation-50: rgba(0, 0, 0, 0.5);
--elevation-60: rgba(0, 0, 0, 0.6);
--elevation-70: rgba(0, 0, 0, 0.7);
--elevation-80: rgba(0, 0, 0, 0.8);
--elevation-90: rgba(0, 0, 0, 0.9);
--elevation-100: rgba(0, 0, 0, 1);
/* Lighten System (Dark Theme) */
--lighten-10: rgba(255, 255, 255, 0.1);
--lighten-20: rgba(255, 255, 255, 0.2);
--lighten-30: rgba(255, 255, 255, 0.3);
--lighten-40: rgba(255, 255, 255, 0.4);
--lighten-50: rgba(255, 255, 255, 0.5);
--lighten-60: rgba(255, 255, 255, 0.6);
--lighten-70: rgba(255, 255, 255, 0.7);
--lighten-80: rgba(255, 255, 255, 0.8);
--lighten-90: rgba(255, 255, 255, 0.9);
/* Bootstrap Overrides (Dark Theme) */
--bs-border-radius: 0.375rem;
--bs-pagination-color: var(--bs-link-color);
--bs-pagination-bg: var(--bs-body-bg);
--bs-secondary-bg: var(--creo-secondary);
--bs-link-color: var(--creo-slate);
--bs-link-hover-color: var(--base-white);
--bs-tertiary-bg: var(--creo-pink);
--bs-btn-font-size: 0.75rem !important;
--bs-btn-active-bg: var(--creo-primary);
--bs-btn-active-border-color: var(--creo-primary);
--bs-btn-close-color: var(--base-white);
/* Pagination (Dark Theme) */
--bs-pagination-hover-color: var(--bs-link-hover-color);
--bs-pagination-hover-bg: var(--bs-tertiary-bg);
--bs-pagination-hover-border-color: var(--lighten-40);
--bs-pagination-focus-color: var(--bs-link-hover-color);
--bs-pagination-focus-bg: var(--bs-secondary-bg);
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg-color: var(--creo-pink) !important;
--bs-pagination-active-border-color: var(--creo-pink) !important;
/* Tables (Dark Theme) */
--bs-table-color: var(--base-white) !important;
--bs-table-border-color: var(--lighten-10);
/* Borders (Dark Theme)*/
--bs-border-color: var(--lighten-10);
/* Accordion (Dark Theme) */
--bs-accordion-color: var(--primary-700) !important;
--bs-accordion-bg: var(--elevation-30) !important;
--bs-accordion-border-color: var(--elevation-10) !important;
--bs-accordion-inner-border-radius: 0px !important;
--bs-accordion-btn-color: var(--elevation-30) !important;
--bs-accordion-btn-bg: var(--elevation-30) !important;
--bs-accordion-btn-icon: url('data:image/svg+xml,') !important;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,") !important;
--bs-accordion-btn-focus-border-color: var(--lighten-20) !important;
--bs-accordion-body-padding-x: 0px !important;
--bs-accordion-body-padding-y: 0px !important;
--bs-accordion-active-color: var(--elevation-80) !important;
--bs-accordion-active-bg: var(--elevation-50) !important;
/* Popovers (Dark Theme) */
--bs-popover-min-width: 350px;
--bs-popover-max-width: 600px;
--bs-popover-border-color: var(--base-dark);
--popover-border-width: 0px;
--bs-popover-header-bg: var(--creo-pink);
--bs-popover-header-color: var(--bs-white);
--bs-popover-bg: var(--bs-white);
--bs-popover-body-padding-y: 0px;
--bs-popover-body-padding-x: 0px;
}
/* ===== LIGHT THEME OVERRIDES ===== */
[data-bs-theme="light"] {
/* Gray Scale Overrides */
--bs-white: #ffffff;
--bs-black: #000000;
/* Main Website Colors */
--bg-gradient-main: var(--background-radial, radial-gradient(249.88% 175.25% at -21.67% -26.62%, var(--bs-white) 0%, var(--bs-white) 20.83%, var(--bs-gray-200) 44.18%, var(--bs-gray-200) 79.89%, var(--bs-gray-300) 100%)) !important;
--bg-gradient-navbar: linear-gradient(to bottom, var(--bs-gray-100) 0%, var(--bs-gray-400) 211.25%);
--bg-active-content-header: transparent;
--bg-active-content-sub-header: transparent;
--box-shadow-main: 0px 2px 10px 0px var(--bs-gray-500);
--container-background: var(--bs-gray-100);
--main-text-color: var(--bs-black);
/* Button States */
--btn-active: var(--creo-primary);
--btn-active-shadow: inset 0px 3px 6px -2px var(--bs-gray-700);
--btn-hover: var(--creo-primary);
--btn-hover-shadow: inset 0px 3px 6px -2px var(--bs-gray-700);
--btn-filter-hover: var(--bs-gray-300);
--btn-badge-text: var(--bs-white);
--bs-btn-active-box-shadow: inset 0px 3px 6px -2px var(--bg-light);
--bs-btn-bg: var(--bs-gray-300) !important;
--bs-btn-close-white-filter: var(--base-white);
/* SVG Colors */
--svg-logo-color: invert(100%) brightness(0%); /* Black */
/* Accordion Overrides */
--bs-accordion-active-color: var(--bs-gray-200) !important;
--bs-form-check-bg: var(--creo-primary) !important;
/* Tables */
--bs-table-border-color: var(--elevation-20);
/* Borders*/
--bs-border-color: var(--elevation-10) !important;
}
/* ===== COMPONENT STYLES ===== */
/* Accordion Components */
.accordion-creo {
--bs-accordion-color: var(--base-white) !important;
--bs-accordion-bg: var(--elevation-10) !important;
--bs-accordion-border-color: var(--lighten-10) !important;
--bs-accordion-inner-border-radius: 0px !important;
--bs-accordion-border-radius: 0px !important;
--bs-accordion-btn-color: var(--base-white) !important;
--bs-accordion-btn-bg: var(--elevation-30) !important;
--bs-accordion-icon-color: var(--creo-secondary) !important;
--bs-accordion-icon-active-color: var(--creo-primary) !important;
--bs-accordion-btn-active-bg: var(--elevation-60);
--bs-accordion-btn-focus-border-color: var(--creo-primary);
--bs-accordion-body-padding-x: 0px !important;
--bs-accordion-body-padding-y: 0px !important;
--bs-accordion-active-color: var(--elevation-20) !important;
--bs-accordion-active-bg: var(--elevation-50) !important;
--bs-border-radius: 0px;
--bs-color: var(--base-white);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--lighten-40);
}
[data-bs-theme="light"] .accordion-creo {
--bs-accordion-active-color: var(--bs-gray-200) !important;
--bs-form-check-bg: var(--creo-primary) !important;
}
.accordion-header {
background: none;
font-size: var(--font-size-nav);
}
.accordion-body {
background: var(--elevation-10);
}
[data-bs-theme="light"] .accordion-body {
background: var(--bs-gray-200);
}
.accordion-collapse {
background: var(--elevation-10);
}
.accordion-button {
box-shadow: none;
background-color: var(--elevation-20);
color: var(--base-white);
font-size: var(--font-size-nav);
}
[data-bs-theme="light"] .accordion-button {
background-color: var(--bs-gray-200);
color: var(--base-dark);
}
.accordion-button:focus {
box-shadow: none;
color: var(--base-white);
background-color: var(--elevation-80);
}
[data-bs-theme="light"] .accordion-button:focus {
color: var(--bg-dark);
background-color: var(--bs-gray-200);
}
.accordion-button:active {
box-shadow: none;
color: var(--base-white);
border-radius: var(--bs-border-radius);
}
[data-bs-theme="light"] .accordion-button:active {
color: var(--base-white);
}
.accordion-button:hover {
box-shadow: var(--gray-700);
color: var(--base-white);
background-color: var(--elevation-80);
}
[data-bs-theme="light"] .accordion-button:hover {
background: var(--btn-filter-hover);
box-shadow: var(--btn-hover-shadow);
}
.accordion-button:not(.collapsed) {
box-shadow: none;
color: var(--base-white);
border-radius: var(--bs-border-radius);
}
[data-bs-theme="light"] .accordion-button:not(.collapsed) {
background-color: var(--bs-gray-100);
color: var(--base-dark);
border-color: var(--creo-primary) !important;
}
.accordion-button:not(.collapsed)::after {
filter: brightness(0%) invert(50%);
}
/* Custom accordion button placement */
button.acc-btn {
display: grid;
grid-template-columns: 1fr max-content max-content;
align-items: center;
grid-gap: 10px;
}
/* Badge Styles */
.bdg {
border-radius: 0.65em !important;
background-color: var(--lighten-10) !important;
padding-left: 0.4em !important;
padding-top: 0.4em !important;
padding-right: 0.4em !important;
padding-bottom: 0.2em !important;
font-size: 0.7rem;
}
/* Scrollbar Styles */
.noscrollb {
overflow-y: auto;
overflow-x: hidden;
-ms-overflow-style: thin;
scrollbar-width: thin;
}
.noscrollb::-webkit-scrollbar {
display: none;
}
/* Background Color Classes */
.bg-elevation-10 { background-color: var(--elevation-10); }
.bg-elevation-20 { background-color: var(--elevation-20); }
.bg-elevation-30 { background-color: var(--elevation-30); }
.bg-elevation-40 { background-color: var(--elevation-40); }
.bg-elevation-50 { background-color: var(--elevation-50); }
.bg-elevation-90 { background-color: var(--elevation-90); }
.bg-elevation-100 { background-color: var(--elevation-100); }
.bg-lighten-10 { background-color: var(--lighten-10); }
.bg-lighten-20 { background-color: var(--lighten-20); }
.bg-lighten-30 { background-color: var(--lighten-30); }
.bg-lighten-40 { background-color: var(--lighten-40); }
.bg-lighten-50 { background-color: var(--lighten-50); }
/* Brand Color Backgrounds */
.bg-creo-primary { background-color: var(--creo-primary); }
.bg-creo-secondary { background-color: var(--creo-orange); }
.bg-creo-warning { background-color: var(--creo-yellow); }
.bg-creo-pink { background-color: var(--creo-pink); }
.bg-creo-coral { background-color: var(--creo-coral); }
.bg-creo-orange { background-color: var(--creo-orange); }
.bg-creo-yellow { background-color: var(--creo-yellow); }
.bg-creo-lime { background-color: var(--creo-lime); }
.bg-creo-green { background-color: var(--creo-green); }
.bg-creo-teal { background-color: var(--creo-teal); }
.bg-creo-skyblue { background-color: var(--creo-skyblue); }
.bg-creo-slate { background-color: var(--creo-slate); }
.bg-creo-violet { background-color: var(--creo-violet); }
.bg-creo-indigo { background-color: var(--creo-indigo); }
.bg-creo-dark { background-color: var(--base-dark); }
.bg-creo-midlight { background-color: var(--bg-midlight); }
/* Text Colors */
.text-coral { color: var(--creo-coral); }
.card-text { color: var(--base-white); }
.text-theme { color: var(--base-light); }
.text-creo-primary { color: var(--creo-primary); }
.text-creo-secondary { color: var(--creo-secondary); }
.dark-card {
background: var(--elevation-30);
color: var(--base-white);
}
[data-bs-theme="light"] .dark-card {
background: var(--color-2) !important;
color: var(--base-white);
}
[data-bs-theme="light"] .card-text { color: var(--base-dark); }
[data-bs-theme="light"] .text-theme { color: var(--base-dark); }
/* Body Styles */
body {
font-family: 'Proxima Nova SemiBold', Arial, sans-serif;
color: var(--base-white);
background: var(--bs-body-bg);
background-image: url('../media/img/CREO_BG_opt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: var(--container-offset-vert);
margin-bottom: var(--container-offset-vert);
}
[data-bs-theme="light"] body {
color: var(--base-dark);
background: var(--bg-gradient-main) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.bg-creo-main {
color: var(--base-white);
background: var(--background-radial, radial-gradient(249.88% 175.25% at -21.67% -26.62%, #3C3045 0%, #5A4B65 20.83%, #0C0925 44.18%, #363A44 79.89%, #1B1F40 100%)) !important;
background-image: url('../media/img/CREO_BG_opt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: var(--container-offset-vert);
margin-bottom: var(--container-offset-vert);
}
[data-bs-theme="light"] .bg-creo-main {
color: var(--bg-dark);
background: var(--bs-white) !important;
box-shadow: 0px 2px 15px 5px var(--bs-gray-800);
}
.creologo svg path {
fill: white;
}
[data-bs-theme="light"] .creologo svg path {
fill: black;
}
main {
overflow-x: hidden;
}
/* Typography */
.h4 {
font-size: 16px;
font-weight: 600;
line-height: 1.5rem;
}
.h5, h5 {
font-size: 14px;
font-weight: 500;
line-height: 1.5rem;
}
.h6 {
font-size: 12px;
font-weight: 500;
line-height: 1.5rem;
}
/* Container Styles */
.container {
width: 97vw !important;
max-width: 97vw !important;
margin-left: 1vw;
margin-right: 2vw;
padding: 0;
background-color: var(--elevation-20);
border-radius: var(--bs-border-radius);
}
[data-bs-theme="light"] .container {
background-color: var(--container-background);
box-shadow: var(--box-shadow-main);
}
.container-fluid {
padding-right: 0%;
}
/* Form Controls */
.form-control {
flex: 1 0 0;
align-self: stretch;
border: 1px;
color: var(--primary-100, #F8F4F8);
background-color: var(--lighten-10);
}
[data-bs-theme="light"] .form-control {
color: var(--base-dark);
background-color: var(--bs-white);
}
.form-check-input {
flex: 1 0 0;
align-self: stretch;
color: var(--primary-100, #F8F4F8);
border: 1px solid #97989a !important;
}
[data-bs-theme="light"] .form-check-input {
color: var(--bs-gray-300, #F8F4F8) !important;
border-color: var(--bs-gray-300) !important;
}
.form-control:focus,
.form-check-input:focus {
flex: 1 0 0;
align-self: stretch;
color: var(--primary-100, #F8F4F8);
background-color: var(--elevation-50);
border-color: var(--creo-primary) !important;
box-shadow: none !important;
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-check-input:focus {
color: var(--bs-gray-700, #000000);
background-color: var(--bs-gray-300);
}
.form-control::placeholder {
font-family: bootstrap-icons, 'Proxima Nova SemiBold';
color: var(--lighten-30) !important;
font-weight: 300;
font-size: 0.9rem;
}
[data-bs-theme="light"] .form-control::placeholder {
color: var(--bs-gray-700) !important;
}
/* Utility Classes */
.hvh {
height: calc(100vh-72px);
margin-top: 1px;
}
.spacer-left { margin-left: 1px; }
.spacer-right { margin-right: 1px; }
.spacer-top { margin-top: 1px; }
.spacer-bottom { margin-bottom: 1px; }
.gutter-left { padding-left: 1px; }
.gutter-top { padding-top: 1px; }
.search-input {
border: none;
background-color: var(--lighten-10);
}
[data-bs-theme="light"] .search-input {
border-color: var(--bs-gray-500);
background-color: var(--bs-gray-300);
}
.sidefilterbar {
background-color: var(--elevation-30);
width: 20%;
min-width: 300px;
}
[data-bs-theme="light"] .sidefilterbar {
background-color: var(--bs-gray-100);
}
/* Table Styles */
.table {
--bs-table-border-color: var(--lighten-10);
}
[data-bs-theme="light"] .table {
--bs-table-border-color: var(--bs-gray-300);
}
.table>:not(caption)>*>* {
font-size: var(--font-size-content) !important;
color: var(--creo-secondary) !important;
background-color: var(--elevation-30) !important;
}
[data-bs-theme="light"] .table>:not(caption)>*>* {
color: var(--bs-black) !important;
background-color: var(--base-white) !important;
}
.border {
--bs-border-color: var(--lighten-10);
}
[data-bs-theme="light"] .border {
border-color: var(--elevation-10) !important;
}
.header-border-bottom {
border-bottom: none !important;
}
[data-bs-theme="light"] .header-border-bottom {
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-gray-400) !important;
}
[data-bs-theme="light"] .border-bottom {
--bs-border-color:var(--elevation-10);
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
/* Accordion Labels */
.accordion {
font-size: 0.75rem;
}
.accordion label {
color: var(--base-white);
}
[data-bs-theme="light"] .accordion label {
color: var(--base-dark);
}
.form-check-input:checked {
background-color: var(--creo-primary);
border-color: var(--creo-primary);
}
.creo-checkbox {
width: 1.2em;
height: 1.2em;
border: 1px solid #17a2b8 !important;
border-radius: 0.25em;
background-color: white;
}
.creo-checkbox:checked {
background-color: #17a2b8;
border-color: #17a2b8;
}
.creo-checkbox:focus {
border-color: #17a2b8;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}
/* Background Field */
.bg-field {
background-image: url('../media/img/08Agriculture_211216_1920x1080.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* Scrollbar Styles */
.list_scroll {
max-height: 450px;
overflow-y: auto;
margin-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.scrollbar-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
.scrollbar-1::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-1e::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: var(--color-1);
}
.scrollbar-1 {
scrollbar-color: var(--color-1) #F5F5F5;
}
.thin::-webkit-scrollbar {
width: 6px;
}
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--color-gray-600) transparent;
}
[data-bs-theme="light"] .scrollbar-thin {
scrollbar-color: var(--primary-300) transparent;
}
/* Navigation Styles */
.navbar {
display: flex;
padding: 0.1rem 0%;
justify-content: space-between;
align-items: center;
color: var(--base-white);
gap: 0.1rem;
font-size: var(--font-size-nav);
background: var(--elevation-50);
}
[data-bs-theme="light"] .navbar {
background: var(--bg-gradient-navbar);
box-shadow: var(--box-shadow-main);
}
.navbar .nav-item {
color: var(--base-white);
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
margin-right: 1rem;
}
.navbar .nav-link {
border-radius: var(--br-7xs);
color: var(--base-white, #FFF);
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
font-size: 12px;
}
[data-bs-theme="light"] .navbar .nav-link {
color: var(--main-text-color, #FFF);
}
.navbar .nav-link:hover {
border-radius: var(--br-7xs);
background: var(--creo-primary);
color: var(--base-white);
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
[data-bs-theme="light"] .navbar .nav-link:hover {
background: var(--btn-hover);
box-shadow: var(--btn-hover-shadow);
color: var(--base-white, #FFF) !important;
}
.navbar .nav-link:visited {
color: var(--base-white);
}
[data-bs-theme="light"] .navbar .nav-link:visited {
color: var(--main-text-color);
}
.navbar .dropdown-menu {
background: var(--primary-800);
color: var(--base-white);
}
.navbar .dropdown-menu.dropdown-item {
background: var(--primary-800);
color: var(--base-white);
}
.navbar .dropdown-menu a:hover {
background: var(--primary-600);
color: var(--base-white);
}
.navbar .dropdown-menu a:visited {
background: var(--primary-800);
color: var(--base-white);
}
.navbar .active,
.navbar-nav .nav-link.active {
border-radius: var(--br-7xs);
display: flex;
overflow: hidden;
background: var(--creo-primary);
align-items: center;
font-weight: 400;
color: var(--base-white, #FFF);
}
[data-bs-theme="light"] .navbar .active,
[data-bs-theme="light"] .navbar-nav .nav-link.active {
background: var(--btn-active);
box-shadow: var(--btn-active-shadow);
color: var(--base-white, #FFF);
}
.active-content {
background: var(--elevation-30);
color: var(--base-white);
}
[data-bs-theme="light"] .active-content {
background: var(--bg-active-content-header);
color: var(--main-text-color);
}
[data-bs-theme="light"] .active-content .btn {
background: var(--bs-gray-200);
color: var(--base-dark);
border-color: var(--creo-primary);
}
[data-bs-theme="light"] .active-content .active {
background: var(--btn-active);
box-shadow: var(--btn-active-shadow);
color: var(--base-white, #FFF);
font-weight: bold;
}
.active-content-svg {
filter: var(--primary-600);
}
[data-bs-theme="light"] .active-content-svg {
filter: var(--svg-logo-color);
}
.active-content-sub-header {
color: var(--base-white);
background: var(--elevation-30);
}
[data-bs-theme="light"] .active-content-sub-header {
background: var(--bg-active-content-sub-header) !important;
color: var(--main-text-color) !important;
}
[data-bs-theme="light"] .active-content-sub-header .btn,
[data-bs-theme="light"] .sidefilterbar .btn {
background: var(--bs-gray-200);
color: var(--base-dark);
border-color: var(--creo-primary);
font-weight: bold;
}
[data-bs-theme="light"] .active-content-sub-header .active,
[data-bs-theme="light"] .sidefilterbar .active,
[data-bs-theme="light"] .llm-input .active,
[data-bs-theme="light"] .filter-btn.active,
[data-bs-theme="light"] .matches-btn.active {
background: var(--btn-active);
box-shadow: var(--btn-active-shadow);
color: var(--base-white, #FFF);
font-weight: bold;
}
#userset .active {
display: flex;
overflow: hidden;
background: var(--creo-primary);
align-items: center;
font-weight: 400;
color: var(--base-white, #FFF);
}
#userset,
.usettings {
background-color: var(--elevation-30);
}
[data-bs-theme="light"] #userset,
[data-bs-theme="light"] .usettings {
background-color: var(--bs-white);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
border-radius: var(--bs-border-radius);
border: 1px solid var(--bs-gray-400);
padding: 0.5rem !important;
}
.sidebar-thin {
width: 4.5rem;
}
/* Menu Horizontal */
.menu-hor li {
display: inline-block;
background-color: var(--color-gray-400);
padding: 0.1rem;
list-style-type: "none";
}
ul.menu-hor {
margin-bottom: 0;
padding-left: 2px;
}
/* Side Navigation */
.nav .active {
background-color: var(--creo-primary);
border: none;
}
.nav-item-button {
background-color: var(--gray-950);
}
.nav-item-button:hover {
background-color: var(--color-gray-400);
}
/* Content Wrappers */
.content-wrapper {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
color: var(--gray-600);
}
.content-wrapper-only {
width: calc(100%-72px);
}
.content {
width: 100%;
font-size: var(--font-size-content);
-ms-overflow-style: none;
scrollbar-width: none;
}
.content::-webkit-scrollbar {
display: none;
}
.section-dark {
color: var(--base-white);
display: block;
}
.section-white {
background-color: var(--base-white);
color: var(--primary-700, #49424F);
display: block;
}
.dragging {
background-color: var(--elevation-30);
border-color: var(--lighten-30);
border-style: dashed;
}
/* Button Styles */
.btn {
opacity: 0.9;
color: var(--base-white);
}
[data-bs-theme="light"] .btn {
color: var(--base-dark);
}
.btn-sm {
font-size: 0.75rem;
}
.btn-creo-primary {
background: var(--creo-primary);
color: var(--base-white);
opacity: 0.7;
}
.btn-creo-primary:hover {
background: var(--creo-primary);
color: var(--base-white);
opacity: 1;
}
.btn-creo-warning {
background: var(--creo-warning);
color: var(--base-white);
opacity: 0.7;
}
.btn-creo-warning:hover {
background: var(--creo-warning);
color: var(--base-white);
opacity: 1;
}
/* Dark mode specific - ensure proper text colors on colored buttons */
:root .btn-creo-primary,
:root .btn-creo-primary:hover {
color: var(--base-white) !important;
}
:root .btn-creo-warning,
:root .btn-creo-warning:hover {
color: var(--base-white) !important;
}
:root .btn-creo-secondary,
:root .btn-creo-secondary:hover {
color: var(--base-dark) !important; /* Black text for light secondary button */
}
.btn-creo-primary-outline {
background: var(--elevation-10);
color: var(--base-white);
border-color: var(--creo-primary);
}
[data-bs-theme="light"] .btn-creo-primary-outline {
background: var(--bs-gray-200);
color: var(--base-dark);
font-weight: bold;
}
.btn-creo-primary-outline:hover {
background: var(--creo-primary) !important;
color: var(--base-white) !important;
}
.btn-creo-primary-outline:active,
.btn-creo-primary-outline .active {
background: var(--creo-primary) !important;
color: var(--base-white) !important;
}
.btn-creo-secondary {
background: var(--creo-secondary);
color: var(--base-white);
opacity: 0.7;
}
.btn-creo-secondary:hover {
background: var(--elevation-50);
color: var(--base-white);
opacity: 1;
}
.btn-creo-secondary-outline {
background: var(--color-gray-400);
color: var(--base-white);
border-color: var(--creo-secondary);
}
[data-bs-theme="light"] .btn-creo-secondary-outline {
background: var(--bs-gray-200);
color: var(--base-dark);
border-color: var(--creo-primary);
font-weight: bold;
}
.btn-creo-secondary-outline:hover {
border: 1px solid var(--creo-primary) !important;
background: var(--elevation-50) !important;
color: var(--base-white) !important;
}
.btn-creo-secondary-outline.active {
background: var(--creo-primary) !important;
color: var(--base-white) !important;
border-color: var(--creo-primary) !important;
}
[data-bs-theme="light"] .btn-creo-secondary-outline:hover {
background: var(--btn-hover) !important;
box-shadow: var(--btn-hover-shadow);
color: var(--base-white, #FFF);
font-weight: bold;
}
[data-bs-theme="light"] .btn-creo-secondary-outline.active {
background: var(--creo-primary) !important;
color: var(--base-white) !important;
}
.btn-creo-coral {
background: var(--creo-coral);
color: var(--base-white);
opacity: 1;
}
.btn-creo-coral:hover {
color: var(--creo-coral);
background: var(--base-white);
border-color: var(--creo-coral);
opacity: 0.7;
}
.btn-creo-coral-outline {
background: var(--elevation-50);
color: var(--base-white);
border-color: var(--creo-coral);
}
.btn-creo-coral-outline:hover {
background: var(--creo-coral) !important;
color: var(--base-white) !important;
}
.btn-creo-pink {
background: var(--creo-pink);
color: var(--base-white);
opacity: 1;
}
.btn-creo-pink:hover {
color: var(--base-white);
opacity: 0.7;
}
[data-bs-theme="light"] .btn-creo-pink:hover {
background: var(--btn-hover);
box-shadow: var(--btn-hover-shadow);
color: var(--base-white, #FFF);
font-weight: bold;
}
.btn-creo-pink-outline {
background: var(--elevation-50);
color: var(--base-white);
border-color: var(--creo-pink);
}
.btn-creo-pink-outline:hover {
background: var(--creo-pink) !important;
color: var(--base-white) !important;
}
.btn-field {
background-color: var(--field);
color: var(--light);
border-color: var(--light);
border-width: 2px;
}
.btn-field:hover {
background-color: var(--light);
color: var(--field);
border-color: var(--field);
}
.btn-field:disabled {
background-color: color-mix(in srgb, var(--light), #0000 25%);
color: color-mix(in srgb, var(--field), #0000 25%);
border-color: color-mix(in srgb, var(--field), #0000 25%);
}
.btn-close,
[data-bs-theme=dark] .btn-close {
background-color: var(--bs-gray-400);
}
[data-bs-theme="light"] .btn-close,
[data-bs-theme="light"] [data-bs-theme=dark] .btn-close {
background-color: var(--bs-gray-400) !important;
filter: none;
}
/* Ask A Question button styling */
.btn-question {
background: linear-gradient(135deg, #00d2ff, #3a7bd5);
border: none;
border-radius: 30px;
color: #ffffff;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
font-size: 12px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-question:hover {
transform: translateY(-2px);
box-shadow: 0px 6px 12px rgba(151, 151, 151, 0.527);
}
[data-bs-theme="light"] .btn-question:hover {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}
.btn-question:active {
transform: translateY(0);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
/* Background Utilities */
.bg-creo-mid {
background-color: var(--color-gray-400);
}
.bg-creo-lt {
background: var(--color-gray-400);
}
/* Segment Headers */
.seg-header-dark {
color: var(--base-white);
background: var(--elevation-90);
}
.seg-header {
color: var(--base-white);
background: var(--elevation-50);
}
.seg-header-light {
color: var(--base-white);
background: var(--elevation-30);
}
.seg-content {
background-color: var(--elevation-30);
font-size: var(--font-size-content);
}
[data-bs-theme="light"] .seg-content {
background-color: var(--bs-gray-100);
}
.modal-card {
background-color: var(--elevation-30);
font-size: var(--font-size-content);
border-radius: var(--bs-border-radius) !important;
padding: 1rem !important;
height: 100% !important;
--bs-border-color: var(--lighten-10);
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
[data-bs-theme="light"] .modal-card {
background-color: var(--bs-white);
border-color: var(--elevation-10);
--bs-border-color: var(--elevation-10);
}
/* Card Styles */
.card_box {
max-height: 600px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.card_box::-webkit-scrollbar {
display: none;
}
.card-logo {
width: 3rem;
height: 3rem;
background-size: contain;
background-repeat: none;
background-position: 50% 50%;
}
.card-logo-img {
width: 52px;
height: 52px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.card-desc-width {
width: calc(100% - 52px);
}
.card-title {
font-size: 1rem;
}
.card-desc {
height: 4rem;
font-size: 0.9rem;
overflow-y: hidden;
}
/* Item Card Styles */
.horizontal-scroller {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: thin;
}
.horizontal-scroller::-webkit-scrollbar {
display: none;
}
.vertical-scroller {
max-height: 400px;
width: 100%;
white-space: nowrap;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: thin;
}
.vertical-scroller::-webkit-scrollbar {
display: none;
}
.carousel_nav_left {
background: rgba(26, 26, 26, 0.9);
border: 1px solid #444;
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
z-index: 1000;
left: 0;
transform: translateX(-50%) translateY(-50%);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="light"] .carousel_nav_left {
background: var(--lighten-60);
border: 1px solid var(--bs-border-color);
color: var(--main-text-color);
}
.carousel_nav_right {
background: rgba(26, 26, 26, 0.9);
border: 1px solid #444;
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
z-index: 1000;
right: 0;
transform: translateX(50%) translateY(-50%);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="light"] .carousel_nav_right {
background: var(--lighten-90);
border: 1px solid var(--bs-border-color);
color: var(--main-text-color);
}
.itemcard {
color: var(--base-white);
cursor: pointer;
}
[data-bs-theme="light"] .itemcard {
color: var(--main-text-color);
border-color: var(--elevation-30);
}
.itemcard:hover {
border: 1px solid var(--creo-primary) !important;
color: var(--base-white);
background-color: var(--color-gray-800);
cursor: pointer;
}
[data-bs-theme="light"] .itemcard:hover {
background-color: var(--lighten-10);
box-shadow: none;
}
.itemcard-content {
color: var(--base-white);
height: 170px;
overflow-y: hidden;
overflow-wrap: normal;
width: 100%;
}
[data-bs-theme="light"] .itemcard-content {
color: var(--main-text-color);
}
.itemcard-mh {
min-height: 180px;
height: 180px;
background-size: cover;
background-repeat: none;
background-position: 50% 50%;
}
.itemcard-news {
min-height: 260px;
height: 260px;
background-size: cover;
background-repeat: none;
background-position: 50% 50%;
}
.itemcard-news-title {
min-height: 80px;
}
.itemcard-lib {
min-height: 260px;
height: 260px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
color: var(--base-white);
}
.itemcard-desc {
opacity: 0;
}
.itemcard-desc:hover {
border: 1px solid var(--creo-primary) !important;
display: block;
background-color: var(--base-dark);
opacity: 0.9;
cursor: grab;
}
[data-bs-theme="light"] .itemcard-desc:hover {
cursor: grab;
}
/* Font Size Utilities */
.medium {
font-size: 0.8rem;
}
.small {
font-size: 0.7rem;
}
.smaller {
font-size: 0.6rem;
}
/* ApexCharts Styles */
.apexcharts-title-text {
fill: var(--base-white);
}
[data-bs-theme="light"] .apexcharts-title-text {
fill: var(--main-text-color) !important;
}
.apexcharts-legend-text {
color: var(--base-white);
}
[data-bs-theme="light"] .apexcharts-legend-text {
color: var(--main-text-color) !important;
}
.apexcharts-text {
color: var(--bs-white) !important;
fill: var(--bs-white) !important;
}
[data-bs-theme="light"] .apexcharts-text {
fill: var(--bs-black) !important;
}
.apexcharts-xaxis-annotation-label {
fill: var(--base-dark) !important;
}
.apexcharts-tooltip {
background: #f3f3f3;
color: var(--primary-700);
}
.apexcharts-menu .apexcharts-menu-open {
background-color: var(--primary-700) !important;
}
.apexcharts-menu-item {
color: var(--base-white) !important;
background-color: var(--primary-700) !important;
}
.apexcharts-menu-item:hover {
color: var(--primary-700) !important;
background-color: var(--color-gray-800) !important;
}
.article {
height: 7rem;
overflow: hidden;
}
/* Library Styles */
.library-card-holder {
min-width: 280px;
max-width: 320px;
}
.library-card {
height: 28em;
width: 100%;
min-height: 420px;
background-color: var(--elevation-30);
border-color: var(--elevation-30);
overflow-y: hidden;
}
[data-bs-theme="light"] .library-card {
background-color: var(--bs-gray-100);
}
[data-bs-theme="light"] .library-card .badge {
color: var(--main-text-color) !important;
}
.library-card-img {
width: 100%;
height: 320px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
}
.library-card-body {
height: 140px;
width: 100%;
}
.library-card-menu-btn {
right: 5px;
bottom: 10px;
margin-top: -10px;
position: relative;
}
.library-card-menu {
min-width: 180px;
width: 90%;
max-width: 300px;
border: var(--creo-primary);
border-radius: 5px;
padding: 10px;
z-index: 300 !important;
position: absolute;
right: 0.2em;
background-color: var(--elevation-90);
overflow-y: scroll;
}
[data-bs-theme="light"] .library-card-menu {
background-color: var(--container-background);
}
.library-card-menu a {
width: 100%;
margin-top: -5px;
}
#lib_query_history {
background-color: var(--elevation-10);
color: var(--base-white);
}
[data-bs-theme="light"] #lib_query_history {
color: var(--main-text-color);
border-radius: var(--bs-border-radius);
border: 1px solid var(--bs-gray-400);
}
#lib_query_history:hover {
outline: 1px solid var(--creo-primary) !important;
background-color: var(--lighten-10);
cursor: pointer;
box-shadow: none;
}
/* Overlay Effects */
.overlay {
position: relative;
background-color: var(--elevation-90);
background: var(--elevation-90);
color: #f1f1f1;
transition: .2s ease;
opacity: 0;
color: white;
font-size: 16px;
padding: 10px;
width: 100%;
height: 320px;
margin: auto;
}
[data-bs-theme="light"] .overlay {
transition: .4s ease;
}
.overlaty-text {
top: 50%;
}
.library-card-img:hover .overlay {
opacity: 1;
}
/* Bootstrap Table Styles */
.fixed-table-toolbar .search {
margin-top: 0px;
}
[data-bs-theme="light"] .fixed-table-toolbar .search {
border: none;
background-color: var(--bs-gray-300);
}
.pagination-detail {
color: var(--bg-light) !important;
}
[data-bs-theme="light"] .pagination-detail {
color: var(--bs-black) !important;
}
/* Page Content */
.logcover {
background-image: url("../media/img/rect1145.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.overbutton-right {
position: fixed;
right: 2%;
bottom: 2%;
}
.news-article img,
.news-article figure,
.news-article svg {
object-fit: contain;
max-width: 750px;
}
#pageContent {
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
color: var(--bs-white);
}
[data-bs-theme="light"] #pageContent {
color: var(--bs-black);
}
#pageContent::-webkit-scrollbar {
display: none;
}
[data-bs-theme="light"] #pageContent .btn-secondary {
color: var(--bs-black);
background-color: var(--bs-gray-300);
border-color: var(--bs-gray-500);
}
#currentFilters {
color: var(--base-white);
}
[data-bs-theme="light"] #currentFilters {
color: var(--main-text-color);
}
#dash_recent_news a,
.badge {
color: var(--base-white);
}
[data-bs-theme="light"] #dash_recent_news a {
color: var(--main-text-color);
}
[data-bs-theme="light"] #dash_recent_news .badge {
color: var(--bs-gray-700);
}
[data-bs-theme="light"] .badge {
color: var(--btn-badge-text);
}
.library-item-preview {
width: 40%;
min-width: 350px;
max-width: 600px;
--bs-popover-min-width: 350px;
--bs-popover-max-width: 600px;
--bs-popover-border-color: var(--base-dark);
--popover-border-width: 0px;
--bs-popover-header-bg: var(--creo-pink);
--bs-popover-header-color: var(--bs-white);
--bs-popover-bg: var(--bs-white);
--bs-popover-body-padding-y: 0px;
--bs-popover-body-padding-x: 0px;
}
.tooltip.show {
opacity: 1 !important;
transition: opacity 0.2s ease-in-out;
}
[data-bs-theme="light"] .tooltip.show {
transition: opacity 0.5s ease-in-out;
}
.library-item-preview.show {
opacity: 1 !important;
transition: opacity 0.2s ease-in-out;
}
[data-bs-theme="light"] .library-item-preview.show {
transition: opacity 0.5s ease-in-out;
}
.li :first-letter {
text-transform: uppercase;
}
.modal:not(.dropdown-menu .dropdown, .dropdown-toggle) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
animation: fade-in 0.2s 1;
-webkit-animation: fade-in 0.2s 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.legend_color_box {
display: inline-block;
height: 10px;
width: 10px;
border: 1px solid;
border-radius: 30%;
}
.active>.page-link {
z-index: 3;
color: var(--bs-pagination-active-color);
background-color: var(--creo-primary);
border-color: var(--creo-primary);
}
.share-url-link,
.share-url-link a {
color: var(--bs-white);
}
[data-bs-theme="light"] .share-url-link,
[data-bs-theme="light"] .share-url-link a {
color: var(--bs-primary);
}
.signup-response {
color: var(--creo-green);
animation: signup-response 0.5s 1;
-webkit-animation: signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay: 2s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
}
/* Theme Selection Styles */
.theme-box {
background-color: var(--bg-dark);
border: 1px solid var(--creo-primary);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
[data-bs-theme="light"] .theme-box {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.dark-mode {
background-color: var(--elevation-30);
color: white;
}
[data-bs-theme="light"] .dark-mode {
background-image: url('../media/img/CREO_BG_opt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.light-mode {
background-color: var(--lighten-90);
color: black;
}
[data-bs-theme="light"] .light-mode {
background-color: var(--bs-gray-100);
}
.mode-title {
font-size: 1.5em;
margin-bottom: 10px;
}
.small-box-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
align-items: center;
}
.small-box {
width: 75%;
height: 30px;
background-color: #adb5bd;
border-radius: 4px;
}
.grey-box {
background-color: #6c757d;
}
.theme-option {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 10px;
}
.theme-option-input {
position: static;
margin-top: 5px;
}
/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
/* Pop on Hover Effect */
.pop-on-hover {
transition: transform 0.3s ease;
}
.pop-on-hover:hover {
transform: scale(1.03);
}
/* Count Badge */
.count-badge {
position: absolute;
top: -9px;
right: 0px;
display: inline-block;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
background: #ff3b30;
color: #fff;
font-size: 12px;
text-align: center;
font-weight: bold;
padding: 0 4px;
z-index: 10;
pointer-events: none;
}
/* Media Queries */
@media (max-width: 768px) {
.flex-container {
flex-direction: column !important;
}
.content-section {
width: 100% !important;
min-width: unset !important;
}
.library-section {
width: 100% !important;
min-width: unset !important;
float: none !important;
}
.dashboard-widget {
min-width: auto;
}
}
@media (max-width: 768px) {
.carousel-control-prev {
left: -20px;
}
.carousel-control-next {
right: -20px;
}
}
@media (min-width: 450px) {
.dashboard-widget {
min-width: 400px;
}
}
/* Animations */
@keyframes fade-in {
from {
opacity: 0;
translate: 0 100vh;
}
to {
opacity: 1;
translate: 0 0;
}
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
translate: 100vw 0;
}
to {
opacity: 1;
translate: 0 0;
}
}
@keyframes signup-response {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes signup-response {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ===== VERTICALS INPUT DROPDOWN STYLES ===== */
.verticals-input-container {
position: relative;
}
.verticals-input-container > .form-control {
position: relative;
z-index: 1;
}
.verticals-dropdown {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 1000;
background-color: var(--primary-800);
border: 1px solid var(--lighten-20);
border-radius: var(--bs-border-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 200px;
overflow-y: auto;
}
[data-bs-theme="light"] .verticals-dropdown {
background-color: var(--bs-white);
border-color: var(--bs-gray-300);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
.verticals-dropdown .dropdown-content {
padding: 0;
}
.verticals-dropdown .dropdown-item {
padding: 8px 12px;
color: var(--base-white);
background-color: transparent;
border: none;
cursor: pointer;
font-size: 0.875rem;
transition: background-color 0.15s ease-in-out;
}
[data-bs-theme="light"] .verticals-dropdown .dropdown-item {
color: var(--base-dark);
}
.verticals-dropdown .dropdown-item:hover {
background-color: var(--creo-primary);
color: var(--base-white);
}
.verticals-dropdown .dropdown-item.text-muted {
color: var(--lighten-50) !important;
cursor: default;
}
[data-bs-theme="light"] .verticals-dropdown .dropdown-item.text-muted {
color: var(--bs-gray-500) !important;
}
.verticals-dropdown .dropdown-item.text-muted:hover {
background-color: transparent;
color: var(--lighten-50) !important;
}
[data-bs-theme="light"] .verticals-dropdown .dropdown-item.text-muted:hover {
background-color: transparent;
color: var(--bs-gray-500) !important;
}
.selected-verticals {
min-height: 2rem;
}
.selected-verticals .badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
padding: 4px 8px;
}
.selected-verticals .badge .btn-close {
font-size: 0.6em;
padding: 0;
margin: 0;
width: 12px;
height: 12px;
background-size: 8px;
opacity: 0.8;
}
.selected-verticals .badge .btn-close:hover {
opacity: 1;
}
/* Scrollbar for dropdown */
.verticals-dropdown::-webkit-scrollbar {
width: 6px;
}
.verticals-dropdown::-webkit-scrollbar-track {
background: var(--elevation-10);
border-radius: 3px;
}
.verticals-dropdown::-webkit-scrollbar-thumb {
background: var(--lighten-30);
border-radius: 3px;
}
.verticals-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--lighten-50);
}
[data-bs-theme="light"] .verticals-dropdown::-webkit-scrollbar-track {
background: var(--bs-gray-200);
}
[data-bs-theme="light"] .verticals-dropdown::-webkit-scrollbar-thumb {
background: var(--bs-gray-400);
}
[data-bs-theme="light"] .verticals-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--bs-gray-500);
}
.creo-deepsense-logo-container {
/*
*/
background-image: url("../media/img/creo-deepsense-white.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 80px;
margin-bottom: 12px;
}
[data-bs-theme="light"] .creo-deepsense-logo-container {
background-image: url("../media/img/creo-deepsense.png");
}
.dash_announcements-modal-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 2rem;
font-weight: 400;
color: var(--base-white);
margin-bottom: 2rem;
}
[data-bs-theme="light"] .dash_announcements-modal-title {
color: #333;
}
.dash_announcements-modal-title strong {
font-weight: 600 !important;
}
.dash_announcements-modal-text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1.25rem;
font-weight: 400;
color: var(--base-white);
line-height: 1.2;
margin-bottom: 2rem;
letter-spacing: 0.03em;
}
[data-bs-theme="light"] .dash_announcements-modal-text {
color: #555 !important;
}
.dash_announcements-modal-text strong {
font-weight: 600 !important;
}
/* Analysis Background - Theme Adaptive */
.analysis-background {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)) !important;
}
[data-bs-theme="light"] .analysis-background {
background: linear-gradient(135deg, rgba(248,249,250,0.8), rgba(255,255,255,0.9)) !important;
}
/* ===== DEAL RECOMMENDATION CAROUSEL STYLES ===== */
/* Fix carousel .active class conflicts with button .active styles */
/* Only override .active styles for carousel items, not carousel functionality */
.deal-recommendations .carousel-item.active {
background: transparent !important;
color: inherit !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
/* Preserve proper active styling for filter and matches buttons */
.deal-recommendations .filter-btn.active,
.deal-recommendations .matches-btn.active {
background: var(--btn-active) !important;
box-shadow: var(--btn-active-shadow) !important;
color: var(--base-white, #FFF) !important;
}
.modal .nav-link.active,
.modal .nav-tabs .nav-link.active,
.modal .nav-pills .nav-link.active,
.modal .btn.active,
.modal .entity-prompt-btn.active,
#modal-nav-tab .nav-link.active {
color: white !important;
background-color: var(--creo-primary) !important;
}
.bg-creo-main .nav-link:hover,
#modal-nav-tab .nav-link:hover {
color: white !important;
background-color: var(--creo-primary) !important;
}