:root {
    /* Base color definitions */
    --primary-color: #032236;
    --primary-text-color: #ffffff;
    --secondary-color: #8B6836  ;
    --secondary-text-color: #ffffff;
    --green-color: #004f3b;
    --green-text-color: #ffffff;
    --red-color: #82181a;
    --red-text-color: #ffffff;
    --blue-color: #372aac;
    --blue-text-color: #ffffff;
    --cyan-color: #005f78;
    --cyan-text-color: #ffffff;
    --orange-color: #973c00;
    --orange-text-color: #ffffff;
    --violet-color: #39324f;
    --violet-text-color: #ffffff;
    --yellow-color: #d08700;
    --yellow-text-color: #ffffff;
    --gray-color: #323232;
    --gray-text-color: #ffffff;

    /* Image definitions */
    --auth-bg-image: url('/img/login-bg.jpg');
    --auth-logo-image: url('/img/logo_text.png');

    --body-background-image: url('/img/login-bg-inverted.jpg');
    --body-background-size: cover;
    --body-background-position: center;
    --body-background-repeat: no-repeat;
    --body-background-blend-mode: exclusion;

    /* Font definitions */
    --font-family: 'Open Sans', sans-serif;
    --font-size-paragraph: 14px;
    --font-size-field: 14px;
    --font-size-h1: 26px;
    --font-size-h2: 22px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-mobile-h1: 22px;
    --font-size-mobile-h2: 20px;
    --font-size-mobile-h3: 18px;
    --font-size-mobile-h4: 16px;
    --font-size-mobile-h5: 16px;

    --font-size-note: var(--font-size-field);
    --font-size-button: var(--font-size-field);

    --corner-radius: 2px;

    --primary-color-1: color-mix(in oklab, var(--primary-color), white 15%);
    --primary-color-2: color-mix(in oklab, var(--primary-color), white 10%);
    --primary-color-3: color-mix(in oklab, var(--primary-color), white 5%);
    --primary-color-4: var(--primary-color);
    --primary-color-5: color-mix(in oklab, var(--primary-color), black 5%);

    --primary-dark-color-1: var(--primary-color);
    --primary-dark-color-2: color-mix(in oklab, var(--primary-dark-color-1), black 5%);
    --primary-dark-color-3: color-mix(in oklab, var(--primary-dark-color-1), black 15%);
    --primary-dark-color-4: color-mix(in oklab, var(--primary-dark-color-1), black 35%);
    --primary-dark-color-5: color-mix(in oklab, var(--primary-dark-color-1), black 50%);

    --secondary-color-1: color-mix(in oklab, var(--secondary-color), white 15%);
    --secondary-color-2: color-mix(in oklab, var(--secondary-color), white 10%);
    --secondary-color-3: color-mix(in oklab, var(--secondary-color), white 5%);
    --secondary-color-4: var(--secondary-color);
    --secondary-color-5: color-mix(in oklab, var(--secondary-color), black 5%);

    --green-color-1: color-mix(in oklab, var(--green-color), white 15%);
    --green-color-2: color-mix(in oklab, var(--green-color), white 10%);
    --green-color-3: color-mix(in oklab, var(--green-color), white 5%);
    --green-color-4: var(--green-color);
    --green-color-5: color-mix(in oklab, var(--green-color), black 5%);

    --red-color-1: color-mix(in oklab, var(--red-color), white 15%);
    --red-color-2: color-mix(in oklab, var(--red-color), white 10%);
    --red-color-3: color-mix(in oklab, var(--red-color), white 5%);
    --red-color-4: var(--red-color);
    --red-color-5: color-mix(in oklab, var(--red-color), black 5%);

    --blue-color-1: color-mix(in oklab, var(--blue-color), white 15%);
    --blue-color-2: color-mix(in oklab, var(--blue-color), white 10%);
    --blue-color-3: color-mix(in oklab, var(--blue-color), white 5%);
    --blue-color-4: var(--blue-color);
    --blue-color-5: color-mix(in oklab, var(--blue-color), black 5%);

    --cyan-color-1: color-mix(in oklab, var(--cyan-color), white 15%);
    --cyan-color-2: color-mix(in oklab, var(--cyan-color), white 10%);
    --cyan-color-3: color-mix(in oklab, var(--cyan-color), white 5%);
    --cyan-color-4: var(--cyan-color);
    --cyan-color-5: color-mix(in oklab, var(--cyan-color), black 5%);

    --orange-color-1: color-mix(in oklab, var(--orange-color), white 15%);
    --orange-color-2: color-mix(in oklab, var(--orange-color), white 10%);
    --orange-color-3: color-mix(in oklab, var(--orange-color), white 5%);
    --orange-color-4: var(--orange-color);
    --orange-color-5: color-mix(in oklab, var(--orange-color), black 5%);

    --violet-color-1: color-mix(in oklab, var(--violet-color), white 15%);
    --violet-color-2: color-mix(in oklab, var(--violet-color), white 10%);
    --violet-color-3: color-mix(in oklab, var(--violet-color), white 5%);
    --violet-color-4: var(--violet-color);
    --violet-color-5: color-mix(in oklab, var(--violet-color), black 5%);

    --yellow-color-1: color-mix(in oklab, var(--yellow-color), white 15%);
    --yellow-color-2: color-mix(in oklab, var(--yellow-color), white 10%);
    --yellow-color-3: color-mix(in oklab, var(--yellow-color), white 5%);
    --yellow-color-4: var(--yellow-color);
    --yellow-color-5: color-mix(in oklab, var(--yellow-color), black 5%);

    --gray-color-1: color-mix(in oklab, var(--gray-color), white 15%);
    --gray-color-2: color-mix(in oklab, var(--gray-color), white 10%);
    --gray-color-3: color-mix(in oklab, var(--gray-color), white 5%);
    --gray-color-4: var(--gray-color);
    --gray-color-5: color-mix(in oklab, var(--gray-color), black 5%);

    /* Color assignments */
    --text-color: #000000;
    --text-color-inverted: #ffffff;
    --text-color-field: #333333;
    --text-color-field-inverted: #ffffff;
    --border-color: #e0e0e0;
    --border-color-focused: var(--primary-color-1);
    --border-color-hover: var(--gray-color-1);
    --panel-background-color: #ffffff;
    --disabled-color: #999999;
    --disabled-color-text: #ffffff;
    --control-text-color: var(--text-color);
    --control-text-color-inverted: var(--text-color-inverted);
    --control-background-color: #ffffff;
    --control-disabled-color: #f0f0f0;
    --background: #f5f5f5;
    --menu-text-color: #94a3b8;
    --menu-text-color-hover: var(--primary-text-color);
    --menu-text-color-active: var(--secondary-text-color);
    --menu-color: transparent;
    --menu-color-hover: var(--primary-color-1);
    --menu-color-active: var(--secondary-color-1);
    --username-color: var(--primary-text-color);
    --main-menu-layout-color: var(--primary-text-color);
    --expandable-panel-hover: #f1f5f9;
    --version-text-color: #9ca3af;
    --version-text-color-auth: #9ca3af;

    --chart-color-1: #5ea500;
    --chart-color-2: #e7000b;
    --chart-color-3: #d56900;
    --chart-color-4: #372aac;

    /* State definitions */
    --state-success-color: var(--green-color);
    --state-success-text: var(--green-text-color);
    --state-success-hover: var(--green-color-3);
    --state-success-down: var(--green-color-5);
    --state-success-disabled: var(--disabled-color);

    --state-active-color: var(--yellow-color);
    --state-active-text: var(--yellow-text-color);
    --state-active-hover: var(--yellow-color-3);
    --state-active-down: var(--yellow-color-5);
    --state-active-disabled: var(--disabled-color);

    --state-error-color: var(--red-color);
    --state-error-text: var(--red-text-color);
    --state-error-hover: var(--red-color-3);
    --state-error-down: var(--red-color-5);
    --state-error-disabled: var(--disabled-color);

    --state-warning-color: var(--orange-color);
    --state-warning-text: var(--orange-text-color);
    --state-warning-hover: var(--orange-color-3);
    --state-warning-down: var(--orange-color-5);
    --state-warning-disabled: var(--disabled-color);

    --state-unknown-color: var(--gray-color);
    --state-unknown-text: var(--gray-text-color);
    --state-unknown-hover: var(--gray-color-3);
    --state-unknown-down: var(--gray-color-5);
    --state-unknown-disabled: var(--disabled-color);

    /* Button color definitions */
    --button-accept-color: var(--green-color);
    --button-accept-text: var(--green-text-color);
    --button-accept-hover: var(--green-color-3);
    --button-accept-down: var(--green-color-5);
    --button-accept-disabled: var(--disabled-color);

    --button-reject-color: var(--red-color);
    --button-reject-text: var(--red-text-color);
    --button-reject-hover: var(--red-color-3);
    --button-reject-down: var(--red-color-5);
    --button-reject-disabled: var(--disabled-color);

    --button-primary-color: var(--primary-color);
    --button-primary-text: var(--primary-text-color);
    --button-primary-hover: var(--primary-color-3);
    --button-primary-down: var(--primary-color-5);
    --button-primary-disabled: var(--disabled-color);

    --button-secondary-color: var(--secondary-color);
    --button-secondary-text: var(--secondary-text-color);
    --button-secondary-hover: var(--secondary-color-3);
    --button-secondary-down: var(--secondary-color-5);
    --button-secondary-disabled: var(--disabled-color);

    --button-green-color: var(--green-color);
    --button-green-text: var(--green-text-color);
    --button-green-hover: var(--green-color-3);
    --button-green-down: var(--green-color-5);
    --button-green-disabled: var(--disabled-color);

    --button-red-color: var(--red-color);
    --button-red-text: var(--red-text-color);
    --button-red-hover: var(--red-color-3);
    --button-red-down: var(--red-color-5);
    --button-red-disabled: var(--disabled-color);

    --button-blue-color: var(--blue-color);
    --button-blue-text: var(--blue-text-color);
    --button-blue-hover: var(--blue-color-3);
    --button-blue-down: var(--blue-color-5);
    --button-blue-disabled: var(--disabled-color);

    --button-cyan-color: var(--cyan-color);
    --button-cyan-text: var(--cyan-text-color);
    --button-cyan-hover: var(--cyan-color-3);
    --button-cyan-down: var(--cyan-color-5);
    --button-cyan-disabled: var(--disabled-color);

    --button-orange-color: var(--orange-color);
    --button-orange-text: var(--orange-text-color);
    --button-orange-hover: var(--orange-color-3);
    --button-orange-down: var(--orange-color-5);
    --button-orange-disabled: var(--disabled-color);

    --button-violet-color: var(--violet-color);
    --button-violet-text: var(--violet-text-color);
    --button-violet-hover: var(--violet-color-3);
    --button-violet-down: var(--violet-color-5);
    --button-violet-disabled: var(--disabled-color);

    --button-yellow-color: var(--yellow-color);
    --button-yellow-text: var(--yellow-text-color);
    --button-yellow-hover: var(--yellow-color-3);
    --button-yellow-down: var(--yellow-color-5);
    --button-yellow-disabled: var(--disabled-color);

    --button-gray-color: var(--gray-color);
    --button-gray-text: var(--gray-text-color);
    --button-gray-hover: var(--gray-color-3);
    --button-gray-down: var(--gray-color-5);
    --button-gray-disabled: var(--disabled-color);

    /* Panel color definitions */
    --panel-primary-background: radial-gradient(circle at bottom right, var(--primary-color-1), var(--primary-color-5));
    --panel-primary-text: var(--primary-text-color);

    --panel-secondary-background: radial-gradient(circle at bottom right, var(--secondary-color-1), var(--secondary-color-5));
    --panel-secondary-text: var(--secondary-text-color);

    --panel-success-background: radial-gradient(circle at bottom right, var(--green-color-1), var(--green-color-5));
    --panel-success-text: var(--green-text-color);

    --panel-failed-background: radial-gradient(circle at bottom right, var(--red-color-1), var(--red-color-5));
    --panel-failed-text: var(--red-text-color);

    --panel-critical-background: radial-gradient(circle at bottom right, var(--red-color-1), var(--red-color-5));
    --panel-critical-text: var(--red-text-color);

    --panel-green-background: radial-gradient(circle at bottom right, var(--green-color-1), var(--green-color-5));
    --panel-green-text: var(--green-text-color);

    --panel-red-background: radial-gradient(circle at bottom right, var(--red-color-1), var(--red-color-5));
    --panel-red-text: var(--red-text-color);

    --panel-blue-background: radial-gradient(circle at bottom right, var(--blue-color-1), var(--blue-color-5));
    --panel-blue-text: var(--blue-text-color);

    --panel-cyan-background: radial-gradient(circle at bottom right, var(--cyan-color-1), var(--cyan-color-5));
    --panel-cyan-text: var(--cyan-text-color);

    --panel-orange-background: radial-gradient(circle at bottom right, var(--orange-color-1), var(--orange-color-5));
    --panel-orange-text: var(--orange-text-color);

    --panel-yellow-background: radial-gradient(circle at bottom right, var(--yellow-color-1), var(--yellow-color-5));
    --panel-yellow-text: var(--yellow-text-color);

    --panel-violet-background: radial-gradient(circle at bottom right, var(--violet-color-1), var(--violet-color-5));
    --panel-violet-text: var(--violet-text-color);

    --panel-gray-background: radial-gradient(circle at bottom right, var(--gray-color-1), var(--gray-color-5));
    --panel-gray-text: var(--gray-text-color);

    /* Menu definitions */
    --menu-mobile-background: #ffffff;
    --menu-mobile-submenu-background: #f1f5f9;
    --menu-mobile-text-color-hover: #ffffff;
    --menu-mobile-text-color-active: #ffffff;
    --menu-mobile-text-color: #374151;
    --person-role-text: #9ca3af;
    --person-division-text: #6b7280;

    /* Alerts */
    --alert-info-background: var(--blue-color);
    --alert-info-text: var(--blue-text-color);

    --alert-error-background: var(--red-color);
    --alert-error-text: var(--red-text-color);

    --alert-success-background: var(--green-color);
    --alert-success-text: var(--green-text-color);

    /* Component colors */
    --note-color: var(--gray-color);
    --note-color-inverted: #cecece;
    --no-data-color: #9e9e9e;


    --table-head-background-color: #ffffff;
    --table-head-text-color: #333333;
    --table-data-background-color: #f8f8f8;
    --table-data-text-color: #333333;
    --mobile-table-data-background-color: #ffffff;

    --page-background-color: #f8f8f8;
    --page-text-color: #333333;
    --page-border-color: #e0e0e0;
    --page-active-background-color: var(--primary-color-1);
    --page-active-text-color: #ffffff;
    --page-active-border-color: var(--primary-color-1);
    --page-hover-background-color: var(--primary-color-3);
    --page-hover-text-color: #ffffff;
    --page-hover-border-color: var(--primary-color-3);

    /* Backdrop definition */
    --backdrop-background-color: rgba(250, 250, 250, 0.3);
    --backdrop-blur: 10px; /* 80 */
    --backdrop-brightness: 1.3;
    --backdrop-border: 1px solid rgb(150,150,150);

    /* Header version 2 */
    --header-v2-gap: 0;
    --header-sample: v3;
    --header-main: v3;

    --header-v2-profile-strip-background-color: var(--primary-color-4);
    --header-v2-profile-strip-background-image: none; /*linear-gradient(to bottom, var(--primary-color-5), var(--primary-color-3));*/
    --header-v2-profile-strip-background-size: cover;
    --header-v2-profile-strip-background-position: center;
    --header-v2-profile-strip-text-color: var(--main-menu-layout-color);
    --header-v2-profile-strip-padding: 0.5rem 1rem 0.5rem 1rem;
    --header-v2-profile-strip-border-bottom: 0;

    --header-v2-menu-strip-background-color: var(--primary-color-1);
    --header-v2-menu-strip-background-image: none;
    --header-v2-menu-strip-background-size: cover;
    --header-v2-menu-strip-background-position: center;
    --header-v2-menu-strip-text-color: var(--main-menu-layout-color);
    --header-v2-menu-strip-padding: 0.5rem 0rem 0.5rem 0rem;
    --header-v2-menu-strip-border-bottom: 0;
    --header-v2-menu-strip-justfy: center;

    --header-v2-welcome-strip-background-color: var(--primary-color-1);
    --header-v2-welcome-strip-background-image: none;
    --header-v2-welcome-strip-background-size: cover;
    --header-v2-welcome-strip-background-position: center;
    --header-v2-welcome-strip-text-color: var(--main-menu-layout-color);
    --header-v2-welcome-strip-padding: 0rem 0rem 1rem 0rem;
    --header-v2-welcome-strip-border-bottom: 0;

    --header-v3-profile-strip-background-color: var(--primary-color-4);
    --header-v3-profile-strip-background-image: none; /*linear-gradient(to bottom, var(--primary-color-5), var(--primary-color-3));*/
    --header-v3-profile-strip-background-size: cover;
    --header-v3-profile-strip-background-position: center;
    --header-v3-profile-strip-text-color: var(--main-menu-layout-color);
    --header-v3-profile-strip-padding: 0.5rem 1rem 0.5rem 1rem;
    --header-v3-profile-strip-border-bottom: 0;

    --header-v3-menu-strip-background-color: var(--primary-color-2);
    --header-v3-menu-strip-background-image: none;
    --header-v3-menu-strip-background-size: cover;
    --header-v3-menu-strip-background-position: center;
    --header-v3-menu-strip-text-color: var(--main-menu-layout-color);
    --header-v3-menu-strip-padding: 0.5rem 0rem 0rem 0rem;
    --header-v3-menu-strip-border-bottom: 0;
    --header-v3-menu-strip-justfy: start;

    --header-v3-welcome-strip-background-color: var(--primary-color-1);
    --header-v3-welcome-strip-background-image: none;
    --header-v3-welcome-strip-background-size: cover;
    --header-v3-welcome-strip-background-position: center;
    --header-v3-welcome-strip-text-color: var(--main-menu-layout-color);
    --header-v3-welcome-strip-padding: 0rem 0rem 1rem 0rem;
    --header-v3-welcome-strip-border-bottom: 0;    
}