:root {
    /* Font Families */
    --font-space-grotesk: "Space Grotesk", sans-serif;
    --font-inter: "Inter", sans-serif;
    --font-dm-sans: "DM Sans", sans-serif;
    --font-montserrat: "Montserrat", sans-serif;

    /* Font Weights */
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

    /* Common Font Sizes (customize as you like) */
    --fz-8: 8px;
    --fz-9: 9px;
    --fz-10: 10px;
    --fz-11: 11px;
    --fz-12: 12px;
    --fz-13: 13px;
    --fz-14: 14px;
    --fz-15: 15px;
    --fz-16: 16px;
    --fz-17: 17px;
    --fz-18: 18px;
    --fz-19: 19px;
    --fz-20: 20px;
    --fz-22: 22px;
    --fz-23: 23px;
    --fz-24: 24px;
    --fz-25: 25px;
    --fz-26: 26px;
    --fz-27: 27px;

    /* Line Heights (or define numerically) */
    --lh-12: 12px;
    --lh-13: 13px;
    --lh-15: 15px;
    --lh-18: 18px;
    --lh-29: 29px;

    /* Default Theme [Bluewave] Text Colors */
    --color-bluewave-sidebar-text: #e1e7fa;
    --color-bluewave-sidebar-text-hover: #eff1f8;
    --color-bluewave-text-default: #424242;
    --color-bluewave-text-slogan: #eff1f8;
    --color-bluewave-text-success: #0fa35e;
    --color-bluewave-text-subtle: #6c757d;
    --color-bluewave-text-primary: #346BFC;
    --color-bluewave-text-placeholder: #bdbdbd;
    --color-bluewave-text-warning: rgba(255, 193, 7, 0.9);
    --color-bluewave-text-dark: black;
    --color-bluewave-icon: #e1e7fa;
    --color-bluewave-no-data-chart-text: #ffffff;

    /* Dark Theme [Midnight Shade] Text Colors */
    --color-midnight-shade-sidebar-text: #e1e7fa;
    --color-midnight-shade-sidebar-text-hover: #eff1f8;
    --color-midnight-shade-text-default: #E8EAED;
    --color-midnight-shade-text-slogan: #eff1f8;
    --color-midnight-shade-text-success: #0fa35e;
    --color-midnight-shade-text-subtle: #B4B8C0;
    --color-midnight-shade-text-primary: #346BFC;
    --color-midnight-shade-text-placeholder: #bdbdbd;
    --color-midnight-shade-text-warning: rgba(255, 193, 7, 0.9);
    --color-midnight-shade-text-dark: white;
    --color-midnight-shade-icon: #e1e7fa;
    --color-midnight-no-data-chart-text: #1E2430;

    /* Global Text Colors */
    --color-sidebar-text: var(--color-bluewave-sidebar-text);
    --color-sidebar-text-hover: var(--color-bluewave-sidebar-text-hover);
    --color-text-default: var(--color-bluewave-text-default);
    --color-text-slogan: var(--color-bluewave-text-slogan);
    --color-text-success: var(--color-bluewave-text-success);
    --color-text-subtle: var(--color-bluewave-text-subtle);
    --color-text-primary: var(--color-bluewave-text-primary);
    --color-text-placeholder: var(--color-bluewave-text-placeholder);
    --color-text-warning: var(--color-bluewave-text-warning);
    --color-text-dark: var(--color-bluewave-text-dark);
    --no-data-placeholder-text: var(--color-bluewave-no-data-chart-text);
}

.topbar-cyberheed-brand {
    font-family: var(--font-space-grotesk), sans-serif !important;
    font-weight: var(--fw-600) !important;
    font-size: var(--fz-24) !important;
    line-height: var(--lh-29) !important;
    /* Keep font-style: normal, if you want it inherited for all. */
    font-style: normal !important;
}

body * {
    font-family: var(--font-inter), sans-serif;
}

/* Sidebar Classes */
.sidebar-welcoming {
    font-family: var(--font-space-grotesk), sans-serif;
    font-weight: var(--fw-500);
    font-size: var(--fz-16);
    line-height: var(--lh-18);
}

.sidebar-menu-item {
    font-family: var(--font-inter), sans-serif !important;
    font-weight: var(--fw-500) !important;
    font-size: var(--fz-15) !important;
    color: var(--color-sidebar-text) !important;
    font-style: normal !important;
    font-optical-sizing: auto !important;
}

.sidebar-menu-sub-item {
    font-family: var(--font-dm-sans), sans-serif;
    font-weight: var(--fw-300);
    font-size: var(--fz-15);
    color: var(--color-sidebar-text);
    font-style: normal;
    font-optical-sizing: auto;
}

.sidebar-menu-sub-item:hover {
    color: var(--color-sidebar-text-hover);
    transform: scale(1.01);
}

/* Footer Classes */
.footer-secondary-links,
.footer-copyright {
    font-family: var(--font-space-grotesk), sans-serif;
    font-weight: var(--fw-300);
    font-size: var(--fz-13);
    font-style: normal;
    font-optical-sizing: auto;
}

.footer-copyright {
    color: var(--color-text-default);
}

.topbar-cyberheed-slogan {
    font-family: var(--font-space-grotesk), sans-serif;
    font-weight: var(--fw-300);
    font-size: var(--fz-12);
    font-style: normal;
    font-optical-sizing: auto;
    color: var(--color-text-slogan);
    line-height: var(--lh-13);
}

.highcharts-title {
    font-family: var(--font-inter), sans-serif !important;
    font-weight: var(--fw-500) !important;
    font-size: var(--fz-20) !important;
    font-style: normal !important;
    font-optical-sizing: auto !important;
    color: var(--color-text-subtle) !important;
    fill: var(--color-text-subtle) !important;
}

.highcharts-no-data rect {
    display: none !important;
}

.highcharts-no-data {
    font-weight: var(--fw-500) !important;
    color: var(--color-text-subtle) !important;
    fill: var(--color-text-subtle); !important;
    font-size: 18px !important;
    font-family: var(--font-inter), sans-serif !important;
}

.page-description-text {
    font-family: var(--font-dm-sans), sans-serif;
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--color-text-default);
}

.sidebar-user-name {
    font-family: var(--font-space-grotesk), sans-serif;
    font-weight: var(--fw-500);
    font-size: var(--fz-15);
    font-style: normal;
    font-optical-sizing: auto;
    color: var(--color-sidebar-text);
}

.sidebar-user-context {
    font-family: var(--font-inter), sans-serif;
    font-weight: var(--fw-400);
    font-size: var(--fz-13);
    font-optical-sizing: auto;
}

.control-tab-no-data-text {
    font-family: var(--font-inter), sans-serif;
    font-weight: var(--fw-400);
    font-size: var(--fz-14);
    font-style: normal;
    font-optical-sizing: auto;
    color: var(--color-text-default);
}

.ch-task-body span {
    font-size: 14px;
    font-family: var(--font-inter), sans-serif;
    color: var(--color-text-default);
}

.ch-task-body i {
    font-size: 14px;
    font-family: var(--font-inter), sans-serif;
    color: var(--color-text-default);
}

.sidebar-user-section-dropdown-items {
    font-family: var(--font-inter), sans-serif;
    font-weight: var(--fw-300);
    font-size: var(--fz-14);
    line-height: var(--lh-15);
}

.invitation-title {
    font-size: var(--fz-18);
    font-family: var(--font-inter), sans-serif;
    color: var(--color-text-default);
    font-weight: var(--fw-600);
    font-optical-sizing: auto;
}

.invitation-warning {
    font-size: var(--fz-14);
    font-family: var(--font-inter), sans-serif;
    color: var(--color-text-default);
    font-weight: var(--fw-400);
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, .modal {
    font-family: var(--font-inter), sans-serif;
    color: var(--color-text-default);
}

a, strong {
    font-family: var(--font-inter), sans-serif;
}

h5, h6, strong {
    color: var(--color-text-subtle);
}

b {
    color: var(--color-text-default);
}

input, label {
    color: var(--color-text-default);
    font-size: var(--fz-15) !important;
}

/* Style for input placeholders */
input::placeholder, textarea::placeholder {
    color: var(--color-text-placeholder) !important; /* Use secondary text color for lighter placeholder */
    opacity: 1; /* Ensure placeholder is not too transparent */
}

/* Optional: Add styles for other browser prefixes if needed */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder { /* Edge */
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}

hr {
    color: var(--color-text-placeholder);
}

.info-will-appear-here {
    font-size: var(--fz-15) !important;
    font-weight: var(--fw-400) !important;
    color: var(--color-text-default) !important;
    font-family: var(--font-inter), sans-serif !important;
    font-optical-sizing: auto !important;
}

.info-will-appear-here a {
    color: var(--color-link-text) !important;
    text-decoration: none !important;
}

.error-title {
    font-size: var(--fz-26) !important;
    font-weight: var(--fw-600) !important;
    font-family: var(--font-inter), sans-serif !important;
    font-optical-sizing: auto !important;
}

.sorry-message {
    font-size: var(--fz-18) !important;
    font-weight: var(--fw-400) !important;
    font-family: var(--font-inter), sans-serif !important;
    font-optical-sizing: auto !important;
    color: var(--color-text-default) !important;
}

.help-links {
    font-size: var(--fz-15) !important;
    font-weight: var(--fw-400) !important;
    font-family: var(--font-inter), sans-serif !important;
    font-optical-sizing: auto !important;
    color: var(--color-text-primary) !important;
}

.form-control {
    font-family: var(--font-inter), sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: var(--fw-400) !important;
    font-style: normal !important;
    font-size: var(--fz-14) !important;
    background-color: var(--color-component-bg) !important;
    color: var(--color-text-default) !important;
    border-color: var(--color-border-color) !important;
}


.text-muted {
    color: var(--color-text-subtle) !important;
}

.text-dark {
    color: var(--color-text-dark) !important;
}

.nav-link {
    color: var(--color-link-text);
}

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

small {
    color: var(--color-text-default);
}

.link-text {
    color: var(--color-link-text);
    text-decoration: none;
}

.alert {
    font-family: var(--font-dm-sans), sans-serif;
    font-weight: var(--fw-400);
    font-size: var(--fz-15);
    font-optical-sizing: auto;
    font-style: normal;
}

.back-to-icon {
    font-size: 30px !important;
    font-weight: 700 !important;
}

.back-to-icon:hover {
    transform: scale(1.03) !important;
}