:root {
    /* -- Base spacing -- */
    --spacing-025: 0.25rem;
    --spacing-050: 0.5rem;
    --spacing-075: 0.75rem;
    --spacing-100: 1rem;
    --spacing-125: 1.25rem;
    --spacing-150: 1.5rem;
    --spacing-175: 1.75rem;
    --spacing-190: 1.9rem;
    --spacing-200: 2rem;
    --spacing-225: 2.25rem;
    --spacing-250: 2.5rem;
    --spacing-275: 2.75rem;

    /* -- Transition -- */
    --transition-mode-delay: .25s;
    --transition-half-second-delay: calc(var(--transition-mode-delay) + .25s);

    /* -- Opacity & Brightness -- */
    --main-new-design-bg-image-opacity: 0.35;
    --company-logo-opacity: 0.035;

    /* ############################# Color Palettes ############################# */
    /* -- white shade -- */
    --white-snow-drift: #f9f9f9;
    --white-porcelain: #f2f2f2;
    --white-aqua-haze: #f2f3f4;
    --white-soapstone: #fcfcfc;
    --white-zircon: #f3f7f9;
    --white-titan: #eaf1ff;
    --white-desert-storm: #f7f7f7;
    --white-pale-grey: #fdfdfd;

    /* Most used */
    --primary-white: #ffffff;
    --filter-primary-white:
        brightness(0)
        saturate(100%)
        invert(100%)
        sepia(0%)
        saturate(0%)
        hue-rotate(93deg)
        brightness(103%)
        contrast(103%);

    /* -- Black shades -- */
    --black-tuna: #2f3947;
    --black-baltic-sea: #272b30;
    --filter-black-baltic-sea:
        invert(12%)
        sepia(8%)
        saturate(983%)
        hue-rotate(173deg)
        brightness(96%)
        contrast(88%);
    --black-gunmetal: #30353a;
    --black-dark-jungle-green: #191d1f;
    --black-onyx: #0D1013;
    --black-pearl: #081722;
    --black-charcoal: #313439;
    --black-ebony-clay: #2c3035;
    --black-outer-space: #34383f;

    /* Most used */
    --primary-black: #000000;
    --filter-primary-black: brightness(0) saturate(100%);
    --secondary-black: var(--black-baltic-sea);
    --filter-secondary-black: var(--filter-black-baltic-sea);
    --tertiary-black: var(--black-dark-jungle-green);

    /* -- Gray shades -- */
    --grey-lavender-pinocchio: #e0e0e0;
    --grey-light: #d9d9d9;
    --grey-silver: #c7c7c7;
    --grey-casper: #adb9cd;
    --grey-silver-chalice: #aaaaaa;
    --grey-dawn: #a5a5a5;
    --grey-mountain-mist: #939393;
    --filter-grey-mountain-mist: brightness(0) saturate(100%) invert(58%) sepia(0%) saturate(34%) hue-rotate(150deg) brightness(103%) contrast(82%);
    --grey-slate: #6f7d98;
    --grey-blue-bell: #8b9dbf;
    --grey-shuttle: #69717a;
    --grey-cadet: #586775;
    --grey-bright: #41464d;
    --grey-river-bed: #444f5e;
    --grey-pickled-bluewood: #2d4254;
    --grey-black-eel: #444444;
    --grey-charcoal: #404040;
    --grey-davy: #555555;
    --grey-dark: #373737;
    --grey-pure: #808080;
    --grey-granite: #7e7e7e;
    --grey-regent: #88949d;
    --grey-dark-slate: #29384d;
    --grey-silver-sand: #c0c0c0;
    --filter-grey-silver-sand: brightness(0) saturate(100%) invert(88%) sepia(1%) saturate(0%) hue-rotate(341deg) brightness(88%) contrast(91%);
    --grey-light-slate: #687d91;
    --grey-gainsboro: #dcdcdc;
    --grey-mercury: #ebebeb;
    --grey-platinum: #dee4e8;
    --grey-cloud: #b3b7be;
    --grey-pastel: #cccccc;
    --grey-soft-peach: #ededed;
    --grey-mirage: #383f47;
    --grey-dove: #6d6d6d;
    --grey-mid: #59626c;
    --grey-carbon: #535962;
    --grey-nobel: #b2b2b2;
    
    /* Most used */
    --primary-grey: var(--grey-dawn);
    --secondary-grey: var(--grey-davy);
    --tertiary-grey: var(--grey-pastel);

    /* -- Blue shades -- */
    --blue-tropical: #cae0f7;
    --blue-baby: #9bd4ff;
    --filter-blue-baby:
        brightness(0)
        saturate(100%)
        invert(85%)
        sepia(5%)
        saturate(6456%)
        hue-rotate(177deg)
        brightness(101%)
        contrast(103%);
    --blue-pale-aqua: #bad3ed;
    --blue-link-water: #d5e4f2;
    --blue-lavender-mist: #deebf3;
    --blue-cornflower: #659ddc;
    --blue-moonstone: #81a7ce;
    --blue-silk: #4c88cc;
    --blue-dusky: #426399;
    --blue-bright: #0058fa;
    --blue-marble: #566a8b;
    --blue-chambray: #365486; /* hover with blue jay */
    --blue-jay: #2d4875;
    --blue-elephant: #153247;
    --blue-rhino: #263A65;
    --blue-pale-cerulean: #9ac3e1;
    --blue-pastel: #b8b7ff;
    --blue-neptune: #7aa8d7;
    --blue-mariner: #1976d2;
    --blue-yale: #0d47a1;
    --blue-aqua-squeeze: #e3f2fd;
    --blue-glacier: #81b2da;
    --blue-wedgewood: #4385ac;
    --blue-hippie: #5695bb;
    --blue-bayoux: #4b5d7a;
    --blue-cool: #699acb;
    --blue-denim: #336699;
    --blue-jeans: #a1ccef;
    --blue-bluish: #2e81b4;
    --blue-hawkes: #cce4f3;
    --blue-iceberg: #e2edf5;
    --blue-flat: #496ca7; /* hover with blue cerulean */
    --blue-cobalt: #214382;
    --filter-blue-flat:
        brightness(0)
        saturate(100%)
        invert(40%)
        sepia(10%)
        saturate(2586%)
        hue-rotate(179deg)
        brightness(99%)
        contrast(91%);
    --blue-cerulean: #3561ac;
    --blue-sapphire: #1157c4;
    --blue-slate: #61769c;
    --blue-catskill-white: #f0f6fb;
    --blue-dark-slate: #483d8b;

    /* Most used */
    --primary-blue: var(--blue-chambray);
    --filter-primary-blue: 
        brightness(0)
        saturate(100%)
        invert(29%)
        sepia(15%)
        saturate(2258%)
        hue-rotate(179deg)
        brightness(93%)
        contrast(81%);
    --secondary-blue: var(--blue-silk);
    --tertiary-blue: var(--blue-flat);

    /* -- Purple shade -- */
    --purple-heart: #5b21b6;
    --purple-chalk: #f3ebff;

    /* -- Yellow/Orange shades -- */
    --yellow-light-tan: #fbeeac;
    --yellow-grey-soya-bean: #676455;
    --yellow-hemlock: #605F42;
    --yellow-early-dawn: #fff9e6;
    --yellow-cornsilk: #fff8dc;
    --yellow-oldlace: #fdf5e6;
    --yellow-light-butter: #fffeda;
    --yellow-jasmine: #fcdf8a;
    --yellow-parchment: #fffeab;
    --orange-mikado: #ffc107;
    --orange-lightning-yellow: #f8c330;
    --orange-apricot: #ffb970;
    --orange-neon-carrot: #faa346;
    --orange-banana-mania: #ffe5b4;

    /* Most used */
    --primary-yellow: var(--yellow-jasmine);
    --primary-orange: var(--orange-mikado);

    /* -- Red shades -- */
    --red-rose-white: #fff6f6;
    --red-pale-pink: #f5dede;
    --red-quill-grey: #e3d1d1;
    --red-oyster-pink: #f0caca;
    --red-pastel-pink: #f7d0d0;
    --red-beauty-bush: #f3bbbb;
    --red-misty-rose: #ffe4e1;
    --red-pale-blush: #fee;
    --red-light-coral: #eb8888;
    --red-smokey-topaz: #9f3441;
    --red-lotus: #83343d;
    --red-orange: #f54436;
    --red-sundown: #f4b6b1;
    --red-rose-maddder: #da2339;
    --red-deep-carmine-pink: #ee3334;
    --red-deep-rose: #bd4e63;

    /* Most used */
    --primary-red: var(--red-deep-carmine-pink);

    /* -- Green shades -- */
    --green-dark-mint: #21c174;
    --green-shamrock: #04944e;
    --green-soft-mint: #f1ffe9;
    --green-haze: #00b43b;
    --green-spear-mint: #16ff65;
    --green-mountain-meadow: #17c672;
    --green-bluish: #10a674;
    --green-chinook: #a2e5c5;
    --green-greenish-teal: #2bc783;
    --green-paris: #3dc985;
    --green-iceberg: #d8f7e9;
    --green-catskill-white: #e7f8f0;

    /* Most used */
    --primary-green: var(--green-dark-mint);

    /* -- Special colors */
    --transparent: transparent;

    /* ########################################################################## */
    /* -- Images -- */
    /*
    --abs-logo-image: url('/static/ABS/shared/img/company_logo/ABS_LOGO_NEW.png');
    */
    --bg-login-page: url('/static/ABS/shared/img/bg/BG_FLAG_LOGIN_B.jpg');
    --bg-login-page: url('/static/ABS/shared/img/bg/BG_ABSTRACT_WHITE_LOGIN.jpg');
    --main-new-design-bg-image: url('/static/ABS/shared/img/bg/BG_NEW_DESIGN_HOME.jpg');
    --abs17-logo-image: url('/static/ABS/shared/img/company_logo/simple17logo.png');
    --search-icon: url('/static/ABS/shared/icon/misc/searchicon.png');
    --search-icon-focus: url('/static/ABS/shared/icon/misc/searchicon_white.png');
    --dropdown-arrow-icon: url('/static/ABS/shared/icon/misc/down-drop-arrow_primary-blue.png');
    --dropdown-arrow-icon-disabled: url('/static/ABS/shared/icon/misc/down-drop-arrow_grey-gainsboro.png');
    --dropdown-arrow-icon-focus: url('/static/ABS/shared/icon/misc/down-drop-arrow_primary-white.png');
    --pcs-component-bg-top-direction: url("/static/ABS/modules/ETL/icon/pcs_component/PCS_COMPONENT_BG_1.png");
    --pcs-component-bg-down-direction: url("/static/ABS/modules/ETL/icon/pcs_component/PCS_COMPONENT_BG_2.png");

    /* -- Related sizing for images -- */
    --dropdown-arrow-icon-size: calc(var(--spacing-100) - 0.35rem);

    /* ------------------------------------------------------------------------------------- */
    /* Button */
    --btn-border-radius: 6px;

    --btn-bg-color: var(--blue-cobalt);
    --btn-bg-hover-color: var(--grey-cloud);
    --btn-border-color: var(--transparent);
    --btn-font-color: var(--blue-cobalt);
    --btn-disabled-bg-color: var(--grey-gainsboro);
    --btn-disabled-font-color: var(--secondary-grey);
    --btn-disabled-border-color: var(--grey-cloud);
    --btn-success-bg-color: var(--primary-green);
    --btn-success-bg-hover-color: var(--green-shamrock);
    --btn-error-bg-color: var(--primary-red);
    --btn-error-bg-hover-color: var(--red-rose-maddder);

    /* Input */
    --input-range-picker-base-border-radius: 6px;

    --label-font-color: var(--primary-black);
    --form-label-icon-color: var(--primary-blue);
    --form-btn-font-color: var(--primary-white);
    --form-btn-font-color-hover: var(--primary-white);
    --form-btn-bg-color: var(--primary-blue);
    --form-btn-bg-color-hover: var(--blue-jay);
    --form-btn-disabled-bg-color: var(--grey-gainsboro);
    --form-btn-disabled-border-color: var(--grey-cloud);
    --form-btn-processing-ring-bg-color: var(--grey-silver);
    --form-btn-processing-ring-rotate-bg-color: var(--blue-aqua-squeeze);
    --input-placeholder-font-color: var(--grey-dove);
    --input-placeholder-focus-font-color: rgba(255, 255, 255, 0.25);
    --input-font-color: var(--primary-black);
    --input-disabled-font-color: var(--grey-silver-sand);
    --input-bg-color: var(--primary-white);
    --input-disabled-bg-color: rgba(128, 128, 128, 0.051);
    --input-border-color: var(--grey-gainsboro);
    --input-font-focus-color: var(--primary-white);
    --input-bg-focus-color: rgba(142, 176, 230, 0.45);
    --input-border-focus-color: var(--blue-mariner);
    --input-checkbox-color: var(--blue-mariner);
    --input-range-picker-bg-color: var(--grey-lavender-pinocchio);
    --input-range-picker-bg-hover-color: var(--grey-gainsboro);
    --input-range-picker-thumb-bg-color: var(--primary-white);
    --input-range-picker-thumb-border-color: var(--blue-bluish);
    --input-range-picker-progress-color: var(--blue-bluish);
    --input-range-picker-value-font-color: var(--blue-bluish);

    /* ------------------------ Error list ---------------------------- */
    --error-list-bg-color: rgba(238, 51, 52, 0.07);
    --error-list-border-color: var(--red-deep-carmine-pink);
    --error-list-font-color: rgba(218, 36, 37, 0.95);

    /* -------------------- Toggle theme button -------------- */
    --toggle-theme-btn-container-bg-color: var(--primary-white);
    --toggle-theme-btn-container-border-color: var(--grey-silver);
    --toggle-theme-btn-icon-color: var(--grey-light);
    --toggle-theme-btn-icon-current-font-color: var(--primary-white);
    --toggle-theme-btn-icon-current-bg-color: var(--primary-blue);

    /* -------------------- Processing icon ------------------ */
    --processing-blur-bg-color: rgba(255, 255, 255, 0.3);
    --processing-ring-bg-color: var(--blue-mariner);

    /* -------------------- Custom modal --------------------- */
    --custom-modal-header-bg-color: var(--white-desert-storm);

    /* -------------------- Custom accordion ----------------- */
    --custom-accordion-item-border-color: var(--grey-light);
    --custom-accordion-header-bg-color: var(--white-aqua-haze);
    --custom-accordion-header-bg-hover-color: var(--grey-mercury);
    --custom-accordion-header-disabled-bg-color: var(--grey-soft-peach);
    --custom-accordion-header-disabled-font-color: var(--grey-silver-sand);
    --custom-accordion-header-important-text-color: var(--primary-red);
    --custom-accordion-header-arrow-color: var(--secondary-black);

    /* ------------------------ Bootstrap Select  --------------------- */
    --bootstrap-select-bg-color: var(--transparent);
    --bootstrap-select-arrow-color: var(--primary-black);
    --bootstrap-select-arrow-hover-color: var(--primary-black);

    /* ------------------------ Tables  ------------------------------- */
    /* tables */
    --table-th-border-radius: 0.4rem;

    --table-border-color: var(--grey-platinum); /* --blue-dusky */
    --table-th-bg-color: var(--blue-dusky);
    --table-th-font-color: var(--primary-white);
    --table-td-bg-even-color: var(--blue-catskill-white);
    --table-td-bg-odd-color: var(--primary-white);
    --table-td-font-color: var(--primary-black);
    --table-btn-bg-color: var(--blue-cool);
    --table-btn-bg-color-hover: rgba(105, 154, 203, 0.75); /* --blue-cool */
    --table-btn-font-color: var(--primary-blue);
    --table-btn-font-color-hover: var(--primary-white);
    --table-cell-disabled-bg-color: var(--white-snow-drift);

    /* tab show tables */
    --tab-header-bg-color: var(--white-zircon);
    --tab-header-border-color: var(--grey-platinum);
    --tab-header-btn-font-color: var(--grey-cloud);
    --tab-header-btn-active-bg-color: var(--primary-white);
    --tab-header-btn-active-font-color: var(--blue-jay);
    --tab-header-btn-active-border-color: var(--blue-jay);

    /* ------------------------ Datatable ------------------------ */
    --datatable-header-text-color: var(--primary-white);
    --datatable-select-menu-border-color: var(--grey-platinum);
    --datatable-select-menu-arrow-icon-color: var(--primary-blue);
    --datatable-about-pagination-transparent: var(--transparent);
    --datatable-about-pagination-color: var(--transparent);
    --datatable-about-pagination-ellipsis-color: var(--primary-black);
    --datatable-paginate-button-bg-color: var(--primary-blue);
    --datatable-paginate-button-font-color: var(--primary-black);
    --datatable-paginate-button-active-font-color: var(--primary-white);
    --datatable-paginate-button-disabled-font-color: var(--primary-grey);
    --datatable-row-reorder-bg-color: var(--grey-soft-peach);
    --datatable-row-reoder-ellipsis-icon-color: var(--primary-grey);
    --datatable-row-reorder-highlight-row-bg-color: rgba(255, 255, 0, 0.15);
    --datatable-process-icon-wrapper-bg-color: var(--primary-white);
    --datatable-processing-icon-bg-color: rgba(255, 255, 255, 0.5);
    --datatable-processing-icon-border-color: var(--tertiary-grey);
    --datatable-processing-icon-spinner-icon-border-color: var(--tertiary-grey);
    --datatable-processing-icon-spinner-icon-border-transparent: var(--transparent);

    /* ------------------------ Datepicker ---------------------------- */
    --datepicker-table-cell-header-bg-color: var(--transparent);
    --datepicker-table-cell-header-font-color: var(--common-text-font-color);
    --datepicker-table-cell-active-font-color: var(--primary-white);
    --datepicker-table-cell-active-bg-color: var(--blue-dusky);
    --datepicker-table-cell-old-new-day-font-color: var(--grey-pure);
    --datepicker-table-cell-disabled-font-color: var(--grey-gainsboro);

    /* --------------------- Text upload status ----------------------- */
    --upload-status-initial-text-color: var(--grey-dove);
    --upload-status-pending-text-color: var(--blue-dark-slate);
    --upload-status-completed-text-color: var(--primary-green);
    --upload-status-failed-text-color: var(--primary-red);

    /* ------------------------ General ------------------------------- */
    /* -- Sizes -- */
    --box-container-border-radius: 8px;

    /* -- Colors -- */
    --common-text-font-reverse-color: var(--primary-white);
    --common-text-font-color: var(--primary-black);
    --dropdown-arrow-icon-color: var(--filter-primary-blue);
    --box-container-bg-color: var(--white-pale-grey);
    --box-container-border-color: var(--blue-bluish);
    --box-container-bg-secondary-color: var(--primary-white);
    --box-container-border-secondary-color: var(--grey-gainsboro);

    /* ------------------------ Main structure ------------------------ */
    /* -- Sizes --*/
    --main-content-height: 90vh;

    /* -- Colors --*/
    --body-bg-color: var(--primary-white);
    --header-bg-color: var(--primary-blue);
    --header-lhs-company-name-font-color: var(--primary-white);
    --header-lhs-divider-color: var(--primary-white);
    --main-app-bg-color: var(--primary-white);
    --logo-bg-color: var(--blue-cobalt);
    --section-text-icon-color: var(--secondary-blue);

    /* ------------------------ Sidebar ------------------------ */
    --aside-sidebar-tab-disable-opacity: 0.25;

    /* -- Sizes -- */
    --aside-sidebar-width: 15.5rem;
    --aside-sidebar-sticky-height: 13.5vh;
    --aside-sidebar-tab-responsive-max-height: 5rem;

    /* -- Colors --*/
    --aside-sidebar-bg-color: var(--white-snow-drift);
    --aside-sidebar-border-color: var(--grey-pure);
    --aside-sidebar-main-topic-font-color: var(--secondary-blue);
    --aside-sidebar-main-menu-filter-icon-color: var(--filter-primary-black);
    --aside-sidebar-main-menu-icon-color: var(--primary-black);
    --aside-sidebar-main-menu-name-font-color: var(--primary-black);
    --aside-sidebar-submenu-bg-color: var(--white-snow-drift);
    --aside-sidebar-submenu-border-color: var(--grey-silver);
    --aside-sidebar-submenu-navigated-line-color: var(--grey-granite);
    --aside-sidebar-section-separated-line-color: var(--grey-silver-chalice);
    --aside-sidebar-tab-font-color: var(--primary-black);
    --aside-sidebar-tab-active-color: var(--blue-link-water);
    --aside-sidebar-tab-active-filter-color:var(--filter-primary-blue);
    --aside-sidebar-tab-active-font-color: var(--primary-blue);
    --aside-sidebar-hamburger-btn-icon-color: var(--primary-white);
    --aside-sidebar-hamburger-btn-bg-color: var(--transparent);
    --aside-sidebar-hamburger-btn-bg-hover-color: var(--white-porcelain);
    --aside-sidebar-tab-group-separated-line-color: var(--grey-silver-chalice);
    --aside-sidebar-sub-tab-label-font-color: var(--blue-bright);
    --aside-sidebar-sub-tab-label-bg-color: var(--blue-baby);
    --aside-sidebar-sub-tab-special-function-label-font-color: var(--yellow-grey-soya-bean);
    --aside-sidebar-sub-tab-special-function-label-bg-color: var(--yellow-jasmine);
    --aside-sidebar-lock-header-bg-color: var(--red-lotus);
    --aside-sidebar-lock-general-bg-color: #ededed7a;
    --aside-sidebar-lock-pro-bg-color: rgba(251, 191, 36, 0.1);
    --toggle-sidebar-btn-icon-color:
        brightness(0)
        saturate(100%)
        invert(29%)
        sepia(70%)
        saturate(470%)
        hue-rotate(179deg)
        brightness(89%) 
        contrast(89%); /* var(--primary-blue) */
    --toggle-sidebar-btn-bg-color: var(--blue-link-water);
    --toggle-sidebar-btn-bg-hover-color: var(--blue-pale-aqua);

    /* ------------------------ Login Page ------------------------ */
    --login-page-bg-opacity: 0.35;
    --login-page-module-slider-transition-delay: var(--transition-half-second-delay);

    /* -- Colors -- */
    --login-page-bg-color: var(--primary-white);
    --login-page-about-company-link-font-color: var(--primary-black);
    --login-page-app-version-font-color: var(--primary-black);
    --login-page-input-container-bg-color: var(--white-porcelain);
    --login-page-input-font-color: var(--primary-black);
    --login-page-input-placeholder-color: var(--primary-grey);
    --login-page-input-focus-border-color: var(--secondary-blue);
    --login-page-input-focus-bg-color: var(--primary-white);
    --login-page-input-focus-box-shadow: var(--blue-lavender-mist);
    --login-page-input-eye-icon: var(--primary-grey);
    --login-page-input-focus-eye-icon: var(--secondary-blue);
    --login-page-input-label-floating-font-color: var(--secondary-blue);
    --login-page-input-label-floating-bg-color: var(--primary-white);
    --login-page-btn-login-bg-color: var(--primary-blue);
    --login-page-btn-login-bg-hover-color: var(--blue-jay);
    --login-page-forgot-pw-font-color: var(--secondary-grey);
    --login-page-forgot-pw-hover-font-color: var(--grey-dark);
    --login-page-login-form-company-name-font-color: var(--primary-blue);
    --login-page-login-form-link-company-font-color: var(--secondary-grey);
    --login-page-login-form-link-company-hover-font-color: var(--grey-dark);
    --login-page-module-slider-overlay-bg-color: var(--primary-blue);
    --login-page-module-slider-overlay-bg-hover-color: var(--blue-rhino);
    --login-page-module-slider-item-font-color: var(--primary-white);
    --login-page-module-slider-pagination-btn-color: var(--primary-black);
    --login-page-module-slider-footer-bg-color: var(--blue-moonstone);

    /* --- Markdown style --- */
    /* Sizes */
    --login-page-module-slider-h1-font-size: 2.5rem;
    --login-page-module-slider-h1-font-size-diff: 0.4rem;
    --login-page-module-slider-h1-line-height: 3.8rem;
    --login-page-module-slider-h1-line-height-diff: 0.6rem;
    --login-page-module-slider-p-font-size: 1.10rem;
    --login-page-module-slider-p-line-height: 2.35rem;
    --login-page-module-slider-block-padding: 0.5rem 0;

    /* Colors */
    --login-page-module-slider-blockquote-bg-color: var(--blue-moonstone);
    --login-page-module-slider-blockquite-border-color: var(--white-desert-storm);
    --login-page-module-slider-inline-code-block-bg-color: var(--blue-moonstone);

    /* ------------------- Password change & Reset password --------------------- */
    --password-form-header-bg-color: var(--primary-blue);
    --password-form-header-font-color: var(--primary-white);
    --password-form-bg-color: var(--primary-white);
    --password-form-btn-bg-color: rgba(13, 71, 161, 0.75); /* --blue-yale */
    --password-form-btn-bg-color-hover: var(--tertiary-blue);
    --password-form-btn-font-color: var(--primary-white);
    --password-form-btn-font-color-hover: var(--primary-white);    
    --password-input-font-color: var(--primary-black);
    --password-input-bg-color: var(--primary-white);
    --password-input-border-color: rgb(230, 230, 230);
    --password-input-font-focus-color: var(--primary-white);
    --password-input-box-shadow-color: var(--grey-platinum);
    --password-condition-header-bg-color: var(--red-deep-rose);
    --password-condition-body-bg-color: var(--password-form-bg-color);
    --password-condition-body-border-color: var(--password-condition-header-bg-color);
    --email-link-icon-bg-color: var(--white-titan);
    --email-link-icon-bg-hover-color: var(--blue-hawkes);
    --success-icon-color: var(--green-haze);
    --error-icon-color: var(--error-list-border-color);

    /* ------------------------ Home ------------------------ */
    /* -- Sizes -- */
    --main-new-design-bg-image-opacity: 0.35;
    --company-logo-opacity: 0.035;
    --home-page-main-hover-opacity: 0.50;
    --home-page-hover-scale: 110%;
    --home-page-module-banner-height: 22.5vh;
    --home-page-module-banner-card-width: 57.5vw;
    --home-page-module-banner-card-border-radius: 35px;
    --home-page-module-banner-behind-card-position: translate(22px, 4px);
    --home-page-module-banner-icon-width: 14vh;
    --home-page-module-banner-icon-height: 18vh;
    --home-page-module-banner-icon-font-size: 7vh;
    --home-page-module-banner-icon-left: 4.5rem;
    --home-page-module-description-width: 32.5vw;
    --home-page-module-banner-short-name-font-size: 4.5rem;
    --home-page-module-banner-full-name-font-size: 1.25rem;

    /* -- Colors --*/
    --home-page-module-banner-card-bg-color: var(--primary-white);
    --home-page-module-banner-card-bg-hover-color: rgba(255,255,255, 0.75); /* --primay-white */
    --home-page-module-banner-card-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    --home-page-module-banner-behind-card-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    --home-page-module-banner-icon-color: var(--primary-white);
    --home-page-module-banner-full-name-font-color: var(--grey-regent);
    --home-page-module-banner-separator-color: var(--grey-mountain-mist);
    --home-page-module-banner-lic-color: var(--blue-cornflower);
    --home-page-module-banner-lic-icon-filter:
        brightness(0)
        saturate(100%)
        invert(66%)
        sepia(9%)
        saturate(2686%)
        hue-rotate(174deg)
        brightness(90%)
        contrast(91%)
        drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
    --home-page-module-banner-lrc-icon-filter:
        brightness(0)
        saturate(100%)
        invert(71%)
        sepia(12%)
        saturate(1466%)
        hue-rotate(173deg)
        brightness(91%)
        contrast(83%)
        drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
    --home-page-module-banner-etl-icon-filter:
        brightness(0)
        saturate(100%)
        invert(72%)
        sepia(41%)
        saturate(334%)
        hue-rotate(174deg)
        brightness(101%)
        contrast(90%)
        drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
    --home-page-module-banner-lrc-color: var(--blue-neptune);
    --home-page-module-banner-etl-color: var(--blue-pale-cerulean);
    --home-page-module-banner-pro-bg-color: var(--yellow-light-tan); 
    --home-page-module-banner-pro-font-color: var(--yellow-grey-soya-bean);
    --home-page-module-banner-card-tier-font-color: var(--primary-white);

    /* ------------------------ User Dropdown menu ------------------------ */
    /* -- Sizes -- */
    --user-menu-width: 280px;
    --profile-image-width: 6.5vh;
    --user-menu-toggle-switcher-width: 36px;
    --user-menu-toggle-switcher-height: 20px;
    --user-menu-toggle-switcher-ball-size: 16px;

    /* -- Colors --*/
    --user-card-vertical-line-color: var(--grey-casper);
    --user-card-profile-image-hover-outline-color: rgba(242, 242, 242, 0.5); /* --white-porcelain */
    --user-card-email-font-color: var(--primary-white);
    --user-card-expiration-date-font-color: var(--grey-casper);
    --user-menu-bg-color: var(--primary-white);
    --user-menu-border-color: var(--grey-light);
    --user-menu-separate-line-color: var(--secondary-grey);
    --user-menu-tooltip-color: var(--primary-white);
    --user-menu-title-font-color: var(--primary-blue);
    --user-menu-label-font-color: var(--primary-black);
    --user-menu-label-icon-color: var(--primary-blue);
    --user-menu-company-dropdown-icon-color: var(--primary-blue);
    --user-menu-company-dropdown-selected-font-color: var(--primary-black);
    --user-menu-company-dropdown-icon-hover-color: var(--primary-blue);
    --user-menu-company-dropdown-selected-hover-font-color: var(--primary-black);
    --user-menu-language-dropdown-bg-color: var(--transparent);
    --user-menu-language-dropdown-selected-font-color: var(--primary-black);
    --user-menu-language-dropdown-seleced-hover-font-color: var(--primary-black);
    --user-menu-profile-name-font-color: var(--primary-black);
    --user-menu-expiration-date-font-color: var(--secondary-grey);
    --user-menu-item-bg-hover-color: var(--white-porcelain);
    --user-menu-item-hover-icon-color: var(--primary-blue);
    --user-menu-item-hover-font-color: var(--primary-black);
    --user-menu-toggle-switcher-bg-color: var(--white-porcelain);
    --user-menu-toggle-switcher-ball-color: var(--primary-blue);
    --user-menu-toggle-switcher-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);
    --user-menu-profile-image-border-color:
        drop-shadow(1px 0 0 var(--primary-white))
        drop-shadow(0 1px 0 var(--primary-white))
        drop-shadow(-1px 0 0 var(--primary-white))
        drop-shadow(0 -1px 0 var(--primary-white));
    --user-menu-admin-label-bg-color: var(--blue-aqua-squeeze);
    --user-menu-admin-label-bg-hover-color: var(--blue-tropical);
    --user-menu-admin-label-font-color: var(--blue-mariner);
    --user-menu-admin-label-font-hover-color: var(--blue-yale);
    --user-menu-standard-user-bg-color: var(--yellow-early-dawn);
    --user-menu-standard-user-font-color: var(--primary-orange);
    --user-menu-company-dropdown-bg: var(--primary-white);
    --user-menu-company-dropdown-bg-hover: var(--blue-link-water);
    --user-menu-company-dropdown-text: var(--primary-blue);
    --user-menu-company-dropdown-icon: var(--primary-blue);
    --user-menu-company-dropdown-ribbon: var(--primary-blue);
    --user-menu-box-shadow: 0px 0px 2px 1.5px rgba(0, 0, 0, 0.2); /* --primary-black */

    /* ------------------------ Sweetalert Popup ------------------------ */
    /* -- Sizes -- */
    --swal-alert-content-line-height: 1.5;
    --swal-alert-font-size-default: 1.175rem;
    --swal-alert-font-size-heading-l1: 1.8rem;
    --swal-alert-font-size-heading-l2: 1.4rem;
    --swal-alert-font-size-heading-l3: 1.3rem;
    --alert-container-default-width: min(525px, 100%);
    --alert-container-warning-width: min(650px, 100%);
    --alert-container-default-max-height: 45vh;
    --alert-container-error-max-height: 20vh;

    /* -- Colors -- */
    --swal-alert-bg-color: var(--primary-white);
    --swal-alert-border-color: var(--transparent);
    --swal-alert-box-shadow-color: var(--transparent);
    --swal-alert-general-font-color: var(--secondary-grey);
    --swal-alert-confirm-btn-bg-color: var(--secondary-blue);
    --swal-alert-horizontal-line-bg-color: var(--grey-casper);
    --swal-alert-title-warning-bg-color: var(--yellow-cornsilk);
    --swal-alert-error-warning-bg-color: var(--red-misty-rose);
    --swal-alert-hightlight-font-color: var(--tertiary-black);
    --swal-alert-highlight-success-bg-color: var(--green-soft-mint);
    --swal-alert-highlight-warning-bg-color: var(--yellow-light-butter);
    --swal-alert-highlight-error-bg-color: var(--red-pale-blush);
    --swal-alert-module-error-border-color: var(--red-light-coral);
    --swal-alert-backdrop-bg-color: rgba(0, 0, 0, 0.55);

    /* ------------------------ AA Tab --------------------------------- */
    --aa-class-selected-option-focus-border-color: var(--blue-mariner);
    --aa-class-selected-option-focus-box-shadow-color: var(--blue-jeans);
    --aa-class-selected-option-font-color: rgb(69, 69, 69);
    --aa-class-selected-option-bg-color: var(--primary-white);
    --aa-class-selected-option-bg-hover-color: rgb(241, 246, 255);

    /* ------------------------ Download Results Tab ------------------------ */
    --download-results-single-file-download-width: 160px;
    --download-results-single-file-overlay-blur: blur(1.5px);

    --download-results-btn-font-color: var(--primary-white);
    --download-results-btn-bg-color: linear-gradient(90deg, var(--secondary-blue) 0%, var(--blue-jeans) 100%);
    --download-results-btn-bg-hover-color: linear-gradient(90deg, var(--blue-denim), var(--secondary-blue));
    --download-results-btn-box-shadow-hover-color: rgb(76, 136, 204, 0.75); /* --blue-silk -- */
    --download-results-btn-border-color: var(--blue-glacier);
    --download-results-btn-outline-hover-color: var(--blue-glacier);
    --download-results-section-download-bg-color: var(--box-container-bg-color);
    --download-results-section-download-border-color: var(--box-container-border-color);
    --download-results-btn-download-single-file-font-color: var(--primary-blue);
    --download-results-btn-download-single-file-bg-color: var(--blue-link-water);
    --download-results-btn-download-single-file-bg-hover-color: var(--blue-hawkes);
    --download-special-function-btn-font-color: var(--yellow-grey-soya-bean);
    --download-special-function-btn-bg-color: linear-gradient(to bottom, #fffedaf7 0%, #ffc10763 50%, #fffedaf7 100%);
    --download-special-function-btn-bg-hover-color: linear-gradient(to bottom, #ffc1079e 0%, var(--yellow-light-tan) 50%, #ffc1079e 100%);
    --download-special-function-btn-box-shadow-hover-color: rgba(252, 223, 138, 0.85);
    --download-special-function-btn-border-color: var(--orange-mikado);
    --download-results-single-file-download-icon-bg-color: var(--primary-white);
    --download-results-single-file-download-icon-border-color: var(--primary-blue);
    --download-results-single-file-download-icon-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); /* --primay-black -- */
    --download-results-single-file-overlay-bg-color: rgb(236, 243, 248, 0.8); /* #ecfcf8 */
    --download-results-file-upload-icon-color: var(--primary-white);
    --download-results-file-upload-icon-bg-color: var(--primary-blue);
    --download-results-single-file-icon-container-border-color: var(--grey-gainsboro);
    --download-results-single-file-icon-container-bg-color: var(--grey-mercury);
    --download-results-single-file-icon-color: var(--primary-blue);
    --download-results-single-file-icon-box-shadow: rgba(0, 0, 0, 0.251) 0px 5px 5px; /* --primay-black -- */
    --download-results-single-file-download-text-color: var(--grey-mountain-mist);
    --download-results-single-file-floating-font-color: var(--primary-white);
    --download-results-single-file-floating-bg-color: var(--secondary-blue);
    --download-results-group-file-name-bg-color: var(--primary-blue);
    --download-results-group-file-name-font-color: var(--primary-white);

    /* ------------------------ Batch pro ------------------------------- */
    --batch-pro-bg-color: var(--yellow-light-tan);
    --batch-pro-font-color: var(--yellow-grey-soya-bean);

    /* ----------------------- Setup Tab -------------------------- */
    --setup-input-it-app-bg-color: rgba(227, 242, 253, 0.25);
    --setup-input-it-app-disabled-bg-color: rgba(192, 192, 192, 0.10);
    --setup-input-it-app-border-color: var(--secondary-blue);
    --setup-input-it-app-lock-icon-bg-color: var(--red-orange);
    --setup-input-it-app-lock-icon-border-color: var(--red-sundown);

    /* ------------------------ IT App Tab ------------------------ */
    --it-app-disabled-box-container-bg-color: linear-gradient(
        to top,
        var(--grey-lavender-pinocchio),
        var(--white-soapstone)
    );
    --it-app-disabled-box-container-border-color: var(--grey-gainsboro);
    --it-app-disabled-download-file-btn-bg-color: var(--grey-mercury);
    --it-app-disabled-download-file-btn-behind-bg-color: var(--grey-silver-sand);
    --it-app-disabled-download-file-btn-border-color: var(--tertiary-grey);
    --it-app-disabled-download-file-btn-font-color: var(--grey-granite);
    --it-app-box-container-bg-color: linear-gradient(
        to top,
        var(--white-desert-storm),
        var(--blue-aqua-squeeze),
        var(--white-desert-storm)
    );
    --it-app-box-container-border-color: var(--secondary-blue);
    --it-app-download-file-btn-bg-color: var(--white-zircon);
    --it-app-download-file-btn-bg-hover-color: var(--white-titan);
    --it-app-download-file-btn-border-color: var(--blue-bluish);
    --it-app-lock-icon-font-color: var(--primary-white);
    --it-app-lock-icon-bg-color: var(--primary-blue);
    --it-app-lock-icon-border-color: var(--blue-glacier);
    --it-app-journal-conversion-font-color: var(--secondary-blue);
    --it-app-journal-conversion-btn-generate-bg-color: var(--blue-glacier);
    --it-app-journal-conversion-btn-generate-bg-hover-color: var(--blue-silk);
    --it-app-journal-conversion-btn-export-bg-color: var(--blue-dusky);
    --it-app-journal-conversion-btn-export-bg-hover-color: var(--primary-blue);
    --it-app-pro-banner-border-color: rgba(252, 223, 138, 0.6);
    --it-app-pro-banner-bg-color: linear-gradient(
        to bottom,
        var(--yellow-light-butter) 0%,
        var(--yellow-jasmine) 50%,
        var(--yellow-light-butter) 100%
    );
    --it-app-pro-banner-font-color: var(--yellow-hemlock);
    --it-app-tab-active-bg-color: rgba(255, 245, 190, 0.75);
    --it-app-tab-active-font-color: rgba(20, 20, 20, 0.85);

    /* ------------------------ Popup cancel process ------------------------ */
    --cancel-process-btn-bg-color: var(--btn-error-bg-hover-color);

    /* --- Tab container for switching graph --- */
    --resource-monitoring-tab-bg-color: var(--grey-soft-peach);
    --resource-monitoring-tab-font-color: var(--grey-davy);
    --resource-monitoring-tab-active-bg-color: var(--primary-white);
    --resource-monitoring-tab-active-font-color: var(--blue-mariner);
    --resource-monitoring-tab-active-box-shadow-color: rgba(0, 0, 0, 0.1);
    --resource-monitoring-tab-hover-bg-color: var(--grey-platinum);
    --resource-monitoring-tab-hover-font-color: var(--black-outer-space);

    /* --- Resource monitoring --- */
    --resource-monitoring-container-bg-color: var(--white-soapstone);
    --resource-monitoring-container-ribbon-color: var(--blue-mariner);
    --resource-monitoring-title-font-color: var(--grey-dove);
    --resource-monitoring-toggle-btn-font-color: var(--grey-dove);
    --resource-monitoring-toggle-btn-bg-color: var(--white-aqua-haze);
    --resource-monitoring-toggle-btn-bg-hover-color: var(--grey-mercury);
    --resource-monitoring-label-font-color: var(--grey-dove);
    --resource-monitoring-value-font-color: var(--grey-dove);
    --resource-monitoring-hr-bar-bw-bg-color: var(--grey-mercury);
    --resource-monitoring-hr-bar-cpu-bg-color: var(--green-dark-mint);
    --resource-monitoring-hr-bar-ram-bg-color: var(--orange-neon-carrot);
    --resource-monitoring-hr-bar-vram-bg-color: var(--blue-mariner);
    --resource-monitoring-tooltip-font-color: var(--primary-white);
    --resource-monitoring-tooltip-bg-color: rgba(0, 0, 0, 0.75);
    --resource-monitoring-interactive-line-chart-font-color: var(--grey-dove);
    --resource-monitoring-interactive-grid-line-color: rgba(0, 0, 0, 0.1);

    /* --- Resource settings --- */
    --resource-monitoring-settings-desc-font-color: var(--grey-silver-sand);
    --resource-monitoring-settings-line-color: rgba(13, 9, 9, 0.05);

    /* --- Resource summary --- */
    --resource-summary-metric-card-border-color: rgba(192, 192, 192, 0.3);
    --resource-summary-metric-card-bg-color: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    --resource-summary-metric-card-wink-bg-color: linear-gradient(90deg, var(--transparent), rgba(255, 255, 255, 0.4), var(--transparent));
    --resource-summary-metric-card-box-shadow-hover-color: rgba(0, 0, 0, 0.15), 0 1px 16px rgba(102, 126, 234, 0.2);
    --resource-summary-metric-title-font-color: var(--grey-dark);
    --resource-summary-metric-label-font-color: var(--grey-shuttle);
    --resource-summary-metric-row-border-bottom-color: rgba(13, 9, 9, 0.05);
    --resource-summary-metric-min-value-bg-color: linear-gradient(135deg, #22c55e, #16a34a);
    --resource-summary-metric-max-value-bg-color: linear-gradient(135deg, #ef4444, #dc2626);
    --resource-summary-metric-average-value-bg-color: linear-gradient(135deg, #3b82f6, #2563eb);
    --resource-summary-icon-cpu-bg-color: linear-gradient(135deg, #8b5cf6, #a855f7);
    --resource-summary-icon-ram-bg-color: linear-gradient(135deg, #06b6d4, #0891b2);
    --resource-summary-icon-vram-bg-color: linear-gradient(135deg, #f59e0b, #d97706);

    /***************************************************************************************
    * ETL Modules
    ***************************************************************************************/
    /* ----------- Container ------------ */
    --etl-main-step-third-fourth-box-container-bg-color: #fdfeff;
    --etl-main-step-third-fourth-nested-box-container-bg-color: #f9fdff;
    --etl-main-step-third-fourth-box-container-border-color: #90b6d2;

    /* ----------- Button --------------- */
    --etl-main-btn-padding-small-primary: 0.75rem 1.25rem;
    --etl-main-btn-padding-small-tertiary: 0.5rem 0.8rem;
    --etl-main-btn-padding-medium-secondary: 0.85rem 2rem;

    --etl-main-btn-bg-primary-color: var(--primary-blue);
    --etl-main-btn-hover-bg-primary-color: var(--blue-jay);
    --etl-main-btn-bg-secondary-color: var(--tertiary-blue);
    --etl-main-btn-hover-bg-secondary-color: var(--blue-cerulean);

    /* ----------- Input ---------------- */
    --etl-main-input-bg-color: var(--input-bg-color);
    --etl-main-input-border-color: var(--input-border-color);
    --etl-main-label-font-color: var(--blue-yale);
    --select-option-options-bg-hover-color: var(--white-zircon);
    --select-option-options-box-shadow-color: rgba(0, 0, 0, 0.098);
    --select-option-arrow-icon-color: var(--primary-blue);

    /* ----------- Date tooltips -------------- */
    --date-tooltip-disabled-bg-color: var(--white-snow-drift);
    --date-info-tooltip-bg-color: var(--blue-glacier);
    --date-info-tooltip-arrow-border-color:
        var(--transparent) var(--blue-glacier) var(--transparent) var(--transparent);

    /* ---------------- Modal ---------------- */
    --custom-modal-topic-line-color: var(--grey-lavender-pinocchio);
    --custom-modal-btn-cancel-bg-color: var(--primary-white);
    --custom-modal-btn-cancel-border-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-cancel-font-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-confirm-bg-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-confirm-hover-bg-color: var(--etl-main-btn-hover-bg-primary-color);
    --custom-modal-btn-confirm-font-color: var(--primary-white);

    /* -------------------- PCS Component (First page main ) ----------- */
    --pcs-component-panel-upload-bg-icon-opacity: 0.2;

    --pcs-component-panel-download-ex-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-panel-download-ex-btn-bg-hover-color: var(--blue-jay);
    --pcs-component-panel-upload-bg-color: var(--blue-lavender-mist);
    --pcs-component-panel-upload-border-color: rgba(38, 68, 102, 0.50);
    --pcs-component-panel-upload-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-panel-upload-btn-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);
    --pcs-component-panel-upload-btn-font-color: var(--primary-white);

    /* -------------------- PCS Component (Second page main) ----------- */
    --pcs-component-table-mapping-download-btn-bg-color: var(--etl-main-btn-bg-secondary-color);
    --pcs-component-table-mapping-download-btn-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);
    --pcs-component-table-mapping-upload-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-table-mapping-upload-btn-hover-bg-color:  var(--etl-main-btn-hover-bg-primary-color);

    /* ------ ETL Script (First page: First create script) ------------- */
    --etl-script-panel-create-panel-bg-color: var(--blue-lavender-mist);
    --etl-script-panel-create-panel-border-color: rgba(38, 68, 102, 0.50);
    --etl-script-panel-create-btn-create-script-bg-color: var(--etl-main-btn-bg-primary-color);
    --etl-script-panel-create-btn-create-script-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);

    /* ------ ETL SCript (First page: User ever create script) ----------- */

    /* --- Action button -- */
    --etl-script-table-script-hist--action-disabled-font-color: var(--grey-mountain-mist);
    --etl-script-table-script-hist--action-disabled-btn-color: var(--grey-mercury);
    --etl-script-table-script-hist-create-new-icon-disabled-color: var(--filter-grey-mountain-mist);
    --etl-script-table-script-hist-edit-btn-bg-color: var(--orange-apricot);
    --etl-script-table-script-hist-edit-btn-bg-hover-color: var(--orange-neon-carrot);
    --etl-script-table-script-hist-clone-btn-bg-color: var(--primary-green);
    --etl-script-table-script-hist-clone-btn-bg-hover-color: var(--green-bluish);

    /* --- Enable script toggle button --- */
    --etl-script-table-script-hist-disable-toggle-btn-bg-color: var(--grey-silver-chalice);

    /* ---------------- ETL Script (Second page) ----------------------- */
    --etl-script-panel-setting-step-icon-brightness: brightness(100%);
    --setting-panel-bg-color: var(--primary-white);

    /* ----- In progress status --- */
    --etl-script-panel-setting-inprogress-icon-bg-color: var(--tertiary-blue);
    --etl-script-panel-setting-inprogress-icon-outline-color: var(--tertiary-blue);
    --etl-script-panel-setting-inprogress-progress-bar-bg-color: var(--blue-lavender-mist);
    --etl-script-panel-setting-inprogress-bar-fragment-bg-color: var(--tertiary-blue);
    --etl-script-panel-setting-inprogress-progress-text-bg-color: rgba(73, 108, 167, 0.15);
    --etl-script-panel-setting-inprogress-progress-text-font-color: var(--tertiary-blue);

    /* ----- Pending status ------- */
    --etl-script-panel-setting-pending-icon-bg-color: var(--tertiary-grey);
    --etl-script-panel-setting-pending-icon-outline-color: var(--tertiary-grey);
    --etl-script-panel-setting-pending-progress-bar-bg-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-pending-step-order-font-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-pending-step-name-font-color: var(--tertiary-grey);
    --etl-script-panel-setting-pending-progress-text-bg-color: rgba(204, 204, 204, 0.15);
    --etl-script-panel-setting-pending-progress-text-font-color: var(--tertiary-grey);

    /* ----- Success status ------- */
    --etl-script-panel-setting-success-correct-marker-color: var(--primary-white);
    --etl-script-panel-setting-success-step-order-font-color: var(--grey-granite);
    --etl-script-panel-setting-success-progress-text-bg-color: rgba(33, 193, 116, 0.15); /* primary green */
    --etl-script-panel-setting-step-order-font-color: var(--grey-granite);

    /* ---------------- Setting/input ------------------------------ */
    --etl-script-panel-setting-topic-panel-border-color: var(--tertiary-grey);
    --etl-script-panel-setting-btn-navigate-bg-color: var(--primary-white);
    --etl-script-panel-setting-btn-navigate-bg-hover-color: var(--primary-white);
    --etl-script-panel-setting-btn-navigate-border-color: var(--etl-main-btn-bg-secondary-color);
    --etl-script-panel-setting-btn-navigate-font-color: var(--etl-main-btn-bg-secondary-color);
    --etl-script-panel-setting-btn-submit-setting-bg-color: var(--grey-blue-bell);
    --etl-script-panel-setting-btn-submit-setting-bg-hover-color: var(--grey-slate);
    --etl-script-panel-setting-btn-submit-setting-font-color: var(--primary-white);

    /* ----------------- File setting process ------------------------ */
    --file-setting-file-type-input-border-color: var(--transparent);
    --file-setting-file-type-topic-font-color: var(--primary-blue);
    --file-setting-status-upload-info-status-inprogress: var(--tertiary-blue);
    --file-setting-upload-zone-btn-bg-color:var(--etl-main-btn-bg-secondary-color);
    --file-setting-upload-zone-font-color: var(--etl-main-btn-bg-secondary-color);
    --file-setting-upload-zone-icon-color: var(--filter-blue-flat);

    /* -------- Filter data / Filter result process ----------------- */
    --filter-process-filter-box-active: var(--blue-jeans);
    --filter-process-operation-label-inside-bg-color: var(--green-chinook);
    --filter-process-operation-label-inside-border-color: var(--green-chinook);
    --filter-process-operation-inside-bg-color: var(--green-chinook);
    --filter-process-operation-inside-bg-hover-color: var(--green-paris);
    --filter-process-operation-label-outside-bg-color: var(--primary-yellow);
    --filter-process-operation-label-outside-border-color: var(--primary-yellow);
    --filter-process-operation-outside-bg-color: var(--primary-yellow);
    --filter-process-operation-outside-bg-hover-color: var(--primary-orange);
    --filter-process-filter-confirm-btn-bg-color: var(--primary-green);
    --filter-process-filter-confirm-btn-bg-hover-color: var(--green-shamrock);
    --filter-process-filter-edit-btn-bg-color: var(--blue-silk);
    --filter-process-filter-edit-btn-bg-hover-color: var(--blue-mariner);

    /* ------------------ Field mapping process ---------------------- */
    --field-mapping-select-menu-border-color: var(--input-border-color);
    --field-mapping-edit-logic-btn-font-color: var(--etl-main-btn-bg-secondary-color);
    --field-mapping-edit-logic-btn-bg-color: var(--primary-white);
    --field-mapping-edit-logic-btn-hover-bg-color: var(--primary-white);
    --field-mapping-edit-logic-btn-border-color: var(--etl-main-btn-bg-secondary-color);
    --field-mapping-edited-logic-btn-bg-color: var(--blue-yale);
    --field-mapping-edited-logic-btn-hover-bg-color: var(--blue-sapphire);
    --field-mapping-remove-all-logic-disabled-btn-bg-color: var(--input-disabled-bg-color);
    --field-mapping-remove-all-logic-disabled-btn-border-color: var(--etl-main-input-border-color);
    --field-mapping-remove-all-logic-disabled-btn-font-color: var(--input-disabled-font-color);

    /* ------- Field conversion logic --------- */
    --field-conversion-logic-add-logic-btn-bg-transparent: var(--transparent);
    --field-conversion-logic-add-logic-btn-bg-color: var(--green-greenish-teal);
    --field-conversion-logic-add-logic-btn-disabled-bg-color: var(--grey-nobel);
    --field-conversion-logic-add-logic-btn-disabled-font-color: var(--grey-nobel);
    --field-conversion-logic-add-logic-option-btn-bg-color: var(--green-greenish-teal);

    /* ---- Operation between field logic ---- */
    --operation-between-field-logic-calculation-btn-bg-color: var(--grey-mercury);
    --operation-between-field-logic-calculation-btn-border-color: var(--grey-mercury);
    --operation-between-field-logic-calculation-btn-bg-hover-color: var(--grey-light);
    --operation-between-field-btn-add-for-text-bg-color: var(--green-catskill-white);
    --operation-between-field-btn-add-for-text-bg-hover-color: var(--green-iceberg);
    --operation-between-field-btn-add-for-text-border-color: var(--green-paris);
    --operation-between-field-btn-add-for-text-font-color: var(--green-paris);
    --operation-between-field-plus-sign-color: var(--primary-orange);

    /* ----------------- Other Settings process ---------------------- */
    --other-settings-list-bg-color: var(--primary-white);
    --other-settings-list-number-bg-color: var(--blue-cerulean);

    /* ----------------- Control account checking -------------------- */
    --control-account-checking-highlight-row-bg-color: var(--yellow-parchment);
    --control-account-checking-info-btn-bg-color: var(--yellow-light-butter);
    --control-account-checking-info-btn-bg-hover-color: var(--yellow-light-tan);
    --control-account-checking-info-btn-border-color: var(--yellow-jasmine);
    --control-account-checking-info-btn-font-color: var(--yellow-hemlock);
    --control-account-checking-tooltip-bg-color: var(--grey-river-bed);
    --control-account-checking-tooltip-highlight-font-color: var(--blue-hawkes);
    --control-account-checking-tooltip-box-shadow-color: rgba(0, 0, 0, 0.25);
    --control-account-checking-info-icon-color: var(--yellow-hemlock);

    /***************************************************************************************
    * Service center module
    ***************************************************************************************/
    /* -- Sizes -- */
    --service-center-scrollable-content-min-height: 51vh;

    /* -- Colors --*/
    --service-center-main-btn-bg-color: var(--btn-bg-color);
    --service-center-card-bg-color: var(--primary-white);
    --service-center-card-border-color: var(--grey-lavender-pinocchio);
    --service-center-card-box-shadow-color: rgb(0 0 0 / 0.05);
    --service-center-main-container-bg-color: var(--white-zircon);
    --service-center-new-request-btn-bg-hover-color: var(--blue-cerulean);
    --service-center-multiselect-tag-user-bg-color: var(--green-iceberg);
    --service-center-multiselect-tag-role-bg-color: var(--yellow-light-tan);
    --service-center-filter-request-item-container-border-color: var(--grey-soft-peach);
    --service-center-filter-request-item-btn-bg-color: var(--white-aqua-haze);
    --service-center-filter-request-item-btn-bg-hover-color: var(--grey-soft-peach);
    --service-center-request-list-empty-font-color: var(--grey-river-bed);
    --service-center-request-item-border-color: var(--grey-lavender-pinocchio);
    --service-center-request-item-box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 6px rgba(0,0,0,0.05);
    --service-center-info-text-font-color: var(--grey-dove);
    --service-center-batch-grey-shade-bg-color: var(--grey-soft-peach);
    --service-center-batch-grey-shade-font-color: var(--grey-shuttle);
    --service-center-batch-yellow-shade-bg-color: var(--yellow-parchment);
    --service-center-batch-yellow-shade-font-color: var(--yellow-hemlock);
    --service-center-batch-green-shade-bg-color: var(--green-catskill-white);
    --service-center-batch-green-shade-font-color: var(--green-haze);
    --service-center-batch-red-shade-bg-color: var(--red-pale-blush);
    --service-center-batch-red-shade-font-color: var(--primary-red);
    --service-center-batch-blue-shade-bg-color: var(--white-titan);
    --service-center-batch-blue-shade-font-color: var(--primary-blue);
    --service-center-batch-purple-shade-bg-color: var(--purple-chalk);
    --service-center-batch-purple-shade-font-color: var(--purple-heart);
    --service-center-batch-orange-shade-bg-color: var(--orange-banana-mania);
    --service-center-batch-orange-shade-font-color: var(--yellow-hemlock);
    --service-center-request-action-btn-border-color: var(--grey-lavender-pinocchio);
    --service-center-request-action-view-btn-bg-color: var(--primary-white);
    --service-center-request-action-view-btn-border-color: var(--grey-soft-peach);
    --service-center-request-action-approved-btn-bg-color: var(--green-haze);
    --service-center-request-action-approved-btn-bg-hover-color: var(--green-dark-mint);
    --service-center-request-action-reject-btn-bg-color: var(--red-rose-maddder);
    --service-center-request-action-reject-btn-bg-hover-color: var(--primary-red);
    --service-center-request-action-view-btn-bg-hover-color: var(--grey-soft-peach);
    --service-center-expanded-full-screen-btn-border-color: var(--grey-lavender-pinocchio);
    --service-center-expanded-full-screen-btn-bg-color: var(--primary-white);
    --service-center-expanded-full-screen-btn-bg-hover-color: var(--grey-soft-peach);
    --service-center-form-popup-title-font-color: var(--grey-granite);
    --service-center-form-popup-icon-pending-color: var(--orange-mikado);
    --service-center-form-popup-icon-approved-color: var(--green-dark-mint);
    --service-center-form-popup-icon-rejected-color: var(--red-rose-maddder);
    --service-center-btn-form-popup-approved-bg-color: var(--green-haze);
    --service-center-btn-form-popup-approved-bg-hover-color: var(--green-dark-mint);
    --service-center-btn-form-popup-rejected-bg-color: var(--red-rose-maddder);
    --service-center-btn-form-popup-rejected-bg-hover-color: var(--primary-red);
    --service-center-email-preview-container-bg-color: var(--white-snow-drift);
    --service-center-email-preview-area-bg-color: var(--primary-white);
    --service-center-email-preview-area-border-color: var(--grey-light);
    --service-center-metrices-label-font-color: var(--grey-davy);
    --service-center-metrices-icon-bg-color: var(--white-snow-drift); 
    --service-center-metrices-icon-pending-color: var(--primary-orange);
    --service-center-metrices-icon-approved-color: var(--primary-green);
    --service-center-metrices-icon-rejected-color: var(--primary-red);
    --service-center-system-action-icon-blue-shade-bg-color: var(--blue-tropical);
    --service-center-system-action-icon-blue-shade-font-color: var(--blue-cerulean);
    --service-center-system-action-title-blue-shade-font-color: var(--primary-blue);
    --service-center-system-action-detail-blue-shade-font-color: var(--blue-mariner);
    --service-center-system-action-btn-blue-shade-bg-color: var(--blue-cerulean);
    --service-center-system-action-btn-blue-shade-bg-hover-color: var(--blue-sapphire);
    --service-center-system-action-icon-green-shade-bg-color: var(--green-chinook);
    --service-center-system-action-icon-green-shade-font-color: var(--green-haze);
    --service-center-system-action-title-green-shade-font-color: var(--primary-green);
    --service-center-system-action-detail-green-shade-font-color: var(--green-bluish);
    --service-center-system-action-btn-green-shade-bg-color: var(--green-haze);
    --service-center-system-action-btn-green-shade-bg-hover-color: var(--green-dark-mint);
    --service-center-system-action-box-blue-bg-color: var(--white-titan);
    --service-center-system-action-box-blue-border-color: var(--blue-pale-aqua);
    --service-center-system-action-green-bg-color: var(--green-catskill-white);
    --service-center-system-action-green-border-color: var(--green-paris);
}

.dark_mode {
    /* -- Images -- */
    --abs-logo-image: url('/static/ABS/shared/img/company_logo/ABS_LOGO_NEW_WHITE.png');
    --abs17-logo-image: url('/static/ABS/shared/img/company_logo/simple17logo_white.png');
    --main-new-design-bg-image: url('/static/ABS/shared/img/bg/BG_NEW_DESIGN_HOME_DARK.png');
    --dropdown-arrow-icon: url('/static/ABS/shared/icon/misc/down-drop-arrow_primary-white.png');
    --dropdown-arrow-icon-disabled: url('/static/ABS/shared/icon/misc/down-drop-arrow_grey-silver-sand.png');

    /* -- Bootstrap Select -- */
    --bootstrap-select-arrow-color: var(--grey-silver);
    --bootstrap-select-arrow-hover-color: var(--primary-white);

    /* ------------------------ Button ---------------------- */
    --btn-success-bg-color: var(--green-mountain-meadow);

    /* ------------------------ Input ------------------------ */
    --form-label-icon-color: var(--blue-pale-aqua);

    --form-btn-bg-color: var(--blue-dusky);
    --input-font-color: var(--common-text-font-color);
    --input-bg-color: var(--black-charcoal);
    --input-border-color: var(--grey-bright);
    --input-font-focus-color: var(--primary-white);
    --input-bg-focus-color: var(--grey-mountain-mist);
    --input-border-focus-color: var(--grey-shuttle);
    --input-checkbox-color: var(--grey-cloud);
    --input-range-picker-bg-color: var(--grey-cloud);
    --input-range-picker-bg-hover-color: var(--grey-gainsboro);
    --input-range-picker-thumb-bg-color: var(--primary-white);
    --input-range-picker-thumb-border-color: var(--blue-mariner);
    --input-range-picker-progress-color: var(--blue-mariner);
    --input-range-picker-value-font-color: var(--blue-baby);

    /* ------------------------ Error list ------------------- */
    --error-list-bg-color: rgba(238, 51, 52, 0.15);
    --error-list-font-color: rgba(255, 181, 182, 0.95);

    /* -------------------- Toggle theme button -------------- */
    --toggle-theme-btn-container-bg-color: var(--tertiary-black);
    --toggle-theme-btn-container-border-color: var(--primary-grey);
    --toggle-theme-btn-icon-color: var(--primary-grey);
    --toggle-theme-btn-icon-current-bg-color: var(--grey-charcoal);

    /* -------------------- Processing icon ------------------ */
    --processing-blur-bg-color: var(--transparent);
    --processing-ring-bg-color: var(--blue-glacier);

    /* -------------------- Custom modal --------------------- */
    --custom-modal-header-bg-color: var(--grey-bright);
    
    /* -------------------- Custom accordion ----------------- */
    --custom-accordion-item-border-color: var(--grey-dove);
    --custom-accordion-header-bg-color: var(--grey-bright);
    --custom-accordion-header-bg-hover-color: var(--grey-shuttle);
    --custom-accordion-header-disabled-bg-color: var(--black-outer-space);
    --custom-accordion-header-disabled-font-color: var(--grey-silver-sand);
    --custom-accordion-header-important-text-color: var(--red-light-coral);
    --custom-accordion-header-arrow-color: var(--primary-white);

    /* ------------------------ Login ------------------------ */
    --login-page-input-container-bg-color: var(--grey-dark);
    --login-page-input-font-color: var(--primary-white);
    --login-page-input-placeholder-color: var(--primary-grey);
    --login-page-input-focus-border-color: var(--primary-grey);
    --login-page-input-focus-bg-color: var(--grey-charcoal);
    --login-page-input-focus-box-shadow: var(--primary-grey);
    --login-page-input-eye-icon: var(--primary-grey);
    --login-page-input-focus-eye-icon: var(--primary-grey);
    --login-page-input-label-floating-font-color: var(--grey-silver);
    --login-page-input-label-floating-bg-color: rgba(74, 76, 76, 0.85);

    /* ------------------------ Tables -------------------------------- */
    /* tables */
    --table-border-color: rgba(145, 145, 145, 0.35); /* /* #919191 */
    --table-th-bg-color: rgba(50, 54, 59, 0.85); /* --grey-charcoal */
    --table-th-font-color: var(--primary-white);
    --table-td-bg-even-color: var(--secondary-black);
    --table-td-bg-odd-color: var(--black-outer-space);
    --table-td-font-color: var(--common-text-font-color);
    --table-btn-bg-color: var(--grey-shuttle);
    --table-btn-bg-color-hover: rgba(65, 70, 77, 0.90); /* --grey-bright */
    --table-btn-font-color: var(--common-text-font-color);
    --table-btn-font-color-hover: var(--common-text-font-color);
    --table-cell-disabled-bg-color: var(--grey-charcoal);

    /* tab show tables */
    --tab-header-bg-color: var(--secondary-black);
    --tab-header-border-color: var(--grey-bright);
    --tab-header-btn-font-color: var(--primary-white);
    --tab-header-btn-active-bg-color: var(--tertiary-black);
    --tab-header-btn-active-font-color: var(--blue-pale-aqua);
    --tab-header-btn-active-border-color: var(--blue-pale-aqua);

    /* ------------------------ Datatable ------------------------ */
    --datatable-header-text-color: var(--primary-white);
    --datatable-select-menu-border-color: var(--grey-platinum);
    --datatable-select-menu-arrow-icon-color: var(--primary-blue);
    --datatable-about-pagination-transparent: var(--transparent);
    --datatable-about-pagination-color: var(--transparent);
    --datatable-about-pagination-ellipsis-color: var(--primary-white);
    --datatable-paginate-button-bg-color: var(--table-td-bg-odd-color);
    --datatable-paginate-button-font-color: var(--primary-white);
    --datatable-paginate-button-active-font-color: var(--primary-white);
    --datatable-paginate-button-disabled-font-color: var(--primary-grey);
    --datatable-row-reorder-bg-color: var(--grey-carbon);
    --datatable-row-reoder-ellipsis-icon-color: var(--primary-white);
    --datatable-row-reorder-highlight-row-bg-color: rgba(255, 255, 0, 0.15);
    --datatable-process-icon-wrapper-bg-color: var(--secondary-black);
    --datatable-processing-icon-bg-color: rgba(39, 43, 48, 0.50);
    --datatable-processing-icon-border-color: var(--tertiary-grey);
    --datatable-processing-icon-spinner-icon-border-color: var(--tertiary-grey);
    --datatable-processing-icon-spinner-icon-border-transparent: var(--transparent);

    /* ------------------------ Datepicker ---------------------------- */
    --datepicker-table-cell-header-font-color: var(--common-text-font-color);
    --datepicker-table-cell-active-bg-color: var(--blue-marble);
    --datepicker-table-cell-disabled-font-color: var(--grey-dove);

    /* --------------------- Text upload status ----------------------- */
    --upload-status-pending-text-color: var(--blue-baby);
    --upload-status-completed-text-color: var(--green-mountain-meadow);

    /* ------------------------ General ------------------------------- */
    --dropdown-arrow-icon-color: var(--filter-primary-white);
    --box-container-bg-color: var(--secondary-black);
    --box-container-border-color: var(--grey-mountain-mist);
    --box-container-bg-secondary-color: rgba(65, 70, 77, 0.15);
    --box-container-border-secondary-color: var(--grey-regent);

    /* ------------------------ Main Structure ------------------------ */
    /* -- Colors -- */
    --header-bg-color: rgba(39,43,48, 0.95); /* --black-baltic-sea */
    --main-app-bg-color: var(--tertiary-black);
    --logo-bg-color: var(--blue-baby);
    --common-text-font-reverse-color: var(--primary-black);
    --common-text-font-color: var(--primary-white);

    /* ------------------------ Sidebar ------------------------ */
    /* -- Colors -- */
    --aside-sidebar-bg-color: var(--secondary-black);
    --aside-sidebar-main-menu-filter-icon-color: var(--filter-primary-white);
    --aside-sidebar-main-menu-icon-color: var(--primary-white);
    --aside-sidebar-main-menu-name-font-color: var(--primary-white);
    --aside-sidebar-submenu-bg-color: var(--secondary-black);
    --aside-sidebar-submenu-border-color: var(--grey-shuttle);
    --aside-sidebar-tab-font-color: var(--primary-white);
    --aside-sidebar-tab-active-color: var(--grey-pickled-bluewood);
    --aside-sidebar-tab-active-filter-color: 
        brightness(0)
        saturate(100%)
        invert(77%)
        sepia(33%)
        saturate(687%)
        hue-rotate(181deg)
        brightness(97%)
        contrast(96%);
    --aside-sidebar-tab-active-font-color: var(--blue-tropical);
    --toggle-sidebar-btn-icon-color: var(--filter-primary-white);
    --toggle-sidebar-btn-bg-color: var(--grey-river-bed);
    --toggle-sidebar-btn-bg-hover-color: var(--black-tuna);

    /* ------------------------ Login Page ------------------------ */
    --login-page-bg-opacity: 0.65;

    /* -- Colors -- */
    --login-page-bg-color: var(--tertiary-black);
    --login-page-about-company-link-font-color: var(--primary-white);
    --login-page-app-version-font-color: var(--primary-white);
    --login-page-forgot-pw-font-color: var(--primary-grey);
    --login-page-forgot-pw-hover-font-color: var(--primary-white);
    --login-page-btn-login-bg-color: var(--secondary-grey);
    --login-page-btn-login-bg-hover-color: var(--grey-black-eel);
    --login-page-login-form-company-name-font-color: var(--blue-lavender-mist);
    --login-page-login-form-link-company-font-color: var(--primary-grey);
    --login-page-login-form-link-company-hover-font-color: var(--primary-white);
    --login-page-module-slider-overlay-bg-color: var(--secondary-black);
    --login-page-module-slider-overlay-bg-hover-color: var(--tertiary-black);
    --login-page-module-slider-pagination-btn-color: var(--primary-white);
    --login-page-module-slider-footer-bg-color: var(--black-outer-space);
    --login-page-error-list-font-color: var(--red-lotus);
    --login-page-error-list-box-shadow: var(--red-light-coral);
    --login-page-error-list-bg-color: var(--red-quill-grey);
    
    /* --- Markdown styles --- */
    /* Colors */
    --login-page-module-slider-blockquote-bg-color: var(--black-outer-space);
    --login-page-module-slider-inline-code-block-bg-color: var(--black-outer-space);

    /* ------------------- Password change & Reset password --------------------- */
    --password-form-header-bg-color: var(--header-bg-color);
    --password-form-header-font-color: var(--primary-white);
    --password-form-bg-color: var(--black-gunmetal);
    --password-form-btn-bg-color: var(--grey-river-bed);
    --password-form-btn-bg-color-hover: var(--grey-cadet);
    --password-form-btn-font-color: var(--primary-white);
    --password-form-btn-font-color-hover: var(--primary-white);
    --password-input-font-color: var(--primary-black);
    --password-input-bg-color: var(--primary-white);
    --password-input-border-color: var(--grey-cadet);
    --password-input-font-focus-color: var(--primary-white);
    --password-input-box-shadow-color: var(--grey-light-slate);
    --password-condition-body-bg-color: var(--grey-mirage);
    --email-link-icon-bg-color: var(--password-form-btn-bg-color);
    --email-link-icon-bg-hover-color: var(--password-form-btn-bg-color-hover);
    --success-icon-color: var(--green-spear-mint);

    /* ------------------------ Home ------------------------ */
    --main-new-design-bg-image-opacity: 0.5;
    --home-page-main-hover-opacity: 0.5;

    /* -- Colors -- */
    --home-page-module-banner-card-bg-color: var(--secondary-black);
    --home-page-module-banner-card-bg-hover-color: rgba(39, 43, 48, calc(var(--home-page-main-hover-opacity) + 0.25)); /* black-baltic-sea */
    --home-page-module-banner-card-box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.2);
    --home-page-module-banner-separator-color: var(--primary-white);
    --home-page-module-banner-full-name-font-color: var(--primary-white);

    /* ------------------------ User Dropdown Menu ------------------------ */
    /* -- Colors -- */
    --user-menu-general-font-color: var(--grey-lavender-pinocchio);
    --user-card-vertical-line-color: var(--primary-white);
    --user-card-profile-image-hover-outline-color: var(--grey-slate);
    --user-card-expiration-date-font-color: var(--grey-silver);
    --user-menu-bg-color: var(--secondary-black);
    --user-menu-border-color: var(--secondary-grey);
    --user-menu-separate-line-color: var(--grey-casper);
    --user-menu-tooltip-color: var(--secondary-black);
    --user-menu-title-font-color: var(--primary-white);
    --user-menu-label-font-color: var(--user-menu-general-font-color);
    --user-menu-label-icon-color: var(--user-menu-general-font-color);
    --user-menu-company-dropdown-icon-color: var(--user-menu-general-font-color);
    --user-menu-company-dropdown-selected-font-color: var(--user-menu-general-font-color);
    --user-menu-company-dropdown-icon-hover-color: var(--primary-white);
    --user-menu-company-dropdown-selected-hover-font-color: var(--primary-white);
    --user-menu-language-dropdown-selected-font-color: var(--user-menu-general-font-color);
    --user-menu-language-dropdown-seleced-hover-font-color: var(--primary-white);
    --user-menu-profile-name-font-color: var(--primary-white);
    --user-menu-expiration-date-font-color: var(--grey-silver);
    --user-menu-item-bg-hover-color: rgba(242, 243, 244, 0.075); /* --white-aqua-haze */
    --user-menu-item-hover-icon-color: var(--primary-white);
    --user-menu-item-hover-font-color: var(--primary-white);
    --user-menu-toggle-switcher-bg-color: var(--secondary-grey);
    --user-menu-toggle-switcher-ball-color: var(--grey-silver-chalice);
    --user-menu-toggle-switcher-ball-hover-color: var(--grey-silver);
    --user-menu-admin-label-bg-color: var(--white-porcelain);
    --user-menu-admin-label-bg-hover-color: var(--grey-lavender-pinocchio);
    --user-menu-admin-label-font-color: var(--grey-river-bed);
    --user-menu-admin-label-font-hover-color: var(--grey-river-bed);
    --user-menu-company-dropdown-bg: var(--grey-silver-chalice);
    --user-menu-company-dropdown-bg-hover: var(--grey-bright);
    --user-menu-company-dropdown-text: var(--primary-white);
    --user-menu-company-dropdown-icon: var(--grey-dark-slate);
    --user-menu-company-dropdown-ribbon: var(--grey-mid);
    --user-menu-box-shadow: 0px 0px 5px 0px var(--grey-dove); /* --primary-black */

    /* ------------------------ AA Tab -------------------------------------- */
    --aa-class-selected-option-focus-border-color: var(--grey-cadet);
    --aa-class-selected-option-focus-box-shadow-color: var(--grey-cadet);
    --aa-class-selected-option-font-color: var(--primary-white);
    --aa-class-selected-option-bg-color: rgba(50, 54, 59, 0.85);
    --aa-class-selected-option-bg-hover-color: var(--grey-bright);

    /* ------------------------ Download Results Tab ------------------------ */
    --download-results-btn-bg-color: linear-gradient(90deg, var(--blue-marble) 0%, var(--blue-elephant) 100%);
    --download-results-btn-bg-hover-color: linear-gradient(90deg, var(--blue-bayoux), var(--black-pearl));
    --download-results-btn-box-shadow-hover-color: var(--blue-marble);
    --download-results-btn-border-color: var(--blue-marble);
    --download-results-btn-outline-hover-color: var(--blue-marble);
    --download-results-section-download-bg-color: var(--box-container-bg-color);
    --download-results-section-download-border-color: var(--box-container-border-color);
    --download-results-btn-download-single-file-font-color: var(--primary-white);
    --download-results-btn-download-single-file-bg-color: var(--blue-wedgewood);
    --download-results-btn-download-single-file-bg-hover-color: var(--blue-marble);
    --download-results-file-upload-icon-bg-color: var(--secondary-blue);
    --download-results-single-file-download-icon-bg-color: var(--tertiary-black);
    --download-results-single-file-download-icon-border-color: var(--primary-blue);
    --download-results-single-file-icon-container-border-color: var(--grey-charcoal);
    --download-results-single-file-icon-container-bg-color: var(--black-onyx);
    --download-results-single-file-overlay-bg-color: rgba(53, 59, 63, 0.8); /* --black-tuna */
    --download-results-single-file-icon-color: var(--blue-pale-aqua);
    --download-results-single-file-download-text-color: var(--grey-silver-sand);
    --download-results-single-file-download-icon-border-color: var(--grey-mountain-mist);
    --download-results-group-file-name-bg-color: var(--grey-river-bed);

    /* ----------------------- Batch pro -------------------------- */
    --batch-pro-bg-color: linear-gradient(135deg, var(--primary-yellow) 0%, var(--orange-lightning-yellow) 100%);

    /* ----------------------- Setup Tab -------------------------- */
    --setup-input-it-app-bg-color: rgba(227, 242, 253, 0.1); /*

    /* ------------------------ IT App Tab ------------------------ */
    --it-app-disabled-box-container-bg-color: linear-gradient(to bottom, var(--secondary-grey), var(--black-tuna));
    --it-app-disabled-download-file-btn-font-color: var(--grey-cloud);
    --it-app-disabled-download-file-btn-bg-color: var(--secondary-black);
    --it-app-disabled-download-file-btn-border-color: var(--grey-shuttle);
    --it-app-box-container-bg-color: linear-gradient(to bottom, var(--black-tuna), var(--secondary-black));
    --it-app-box-container-border-color: var(--blue-hawkes);
    --it-app-journal-conversion-font-color: var(--blue-hawkes);
    --it-app-tab-active-bg-color: rgba(251, 238, 172, 0.25);
    --it-app-tab-active-font-color: var(--yellow-light-butter);

        /* ------------------------ Popup cancel process ------------------------ */
    --cancel-process-btn-bg-color: var(--btn-error-bg-hover-color);

    /* --- Tab container for switching graph --- */
    --resource-monitoring-tab-bg-color: var(--grey-mid);
    --resource-monitoring-tab-font-color: var(--grey-silver);
    --resource-monitoring-tab-active-bg-color: var(--blue-bluish);
    --resource-monitoring-tab-active-font-color: var(--white-snow-drift);
    --resource-monitoring-tab-active-box-shadow-color: rgba(0, 0, 0, 0.1);
    --resource-monitoring-tab-hover-bg-color: var(--grey-shuttle);
    --resource-monitoring-tab-hover-font-color: var(--white-snow-drift);

    /* --- Resource monitoring --- */
    --resource-monitoring-container-bg-color: var(--grey-mirage);
    --resource-monitoring-container-ribbon-color: var(--white-titan);
    --resource-monitoring-title-font-color: var(--white-snow-drift);
    --resource-monitoring-toggle-btn-font-color: var(--white-snow-drift);
    --resource-monitoring-toggle-btn-bg-color: var(--grey-mid);
    --resource-monitoring-toggle-btn-bg-hover-color: var(--grey-shuttle);
    --resource-monitoring-label-font-color: var(--white-snow-drift);
    --resource-monitoring-value-font-color: var(--white-snow-drift);
    --resource-monitoring-hr-bar-bw-bg-color: var(--grey-river-bed);
    --resource-monitoring-hr-bar-cpu-bg-color: var(--green-greenish-teal);
    --resource-monitoring-hr-bar-ram-bg-color: var(--orange-mikado);
    --resource-monitoring-hr-bar-vram-bg-color: var(--blue-cornflower);
    --resource-monitoring-tooltip-font-color: var(--primary-white);
    --resource-monitoring-tooltip-bg-color: rgba(0, 0, 0, 0.75);
    --resource-monitoring-interactive-line-chart-font-color: var(--white-snow-drift);
    --resource-monitoring-interactive-grid-line-color: rgba(255, 255, 255, 0.1);

    /* --- Resource settings --- */
    --resource-monitoring-settings-line-color: rgba(199, 199, 199, 0.25);

    /* --- Resource summary --- */
    --resource-summary-metric-card-border-color: rgba(192, 192, 192, 0.3);
    --resource-summary-metric-card-bg-color: var(--grey-mirage);
    --resource-summary-metric-card-wink-bg-color: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    --resource-summary-metric-card-box-shadow-hover-color: rgba(0, 0, 0, 0.15), 0 1px 16px rgba(102, 126, 234, 0.2);
    --resource-summary-metric-title-font-color: var(--white-soapstone);
    --resource-summary-metric-label-font-color: var(--grey-silver);
    --resource-summary-metric-row-border-bottom-color: rgba(192, 192, 192, 0.3);

    /* ------------------------ SweetAlert Popup ------------------------ */
    /* -- Colors -- */
    --swal-alert-bg-color: var(--secondary-black);
    --swal-alert-border-color: var(--grey-dove);
    --swal-alert-box-shadow-color: var(--grey-dove);
    --swal-alert-general-font-color: var(--grey-light);
    --swal-alert-confirm-btn-bg-color: var(--grey-light-slate);
    --swal-alert-error-warning-bg-color: var(--red-pastel-pink);
    --swal-alert-module-error-border-color: var(--red-beauty-bush);
    --swal-alert-highlight-error-bg-color: var(--red-pastel-pink);

    /***************************************************************************************
    * ETL Modules
    ***************************************************************************************/
    --etl-main-step-third-fourth-box-container-bg-color: var(--box-container-bg-color);
    --etl-main-step-third-fourth-nested-box-container-bg-color: var(--box-container-bg-color);
    --etl-main-step-third-fourth-box-container-border-color: var(--box-container-border-color);

    /* ----------- Button --------------- */
    --etl-main-input-bg-color: var(--grey-bright);
    --etl-main-input-border-color: var(--grey-shuttle);
    --etl-main-label-font-color: var(--blue-baby);
    --etl-main-btn-bg-primary-color: var(--grey-cadet);
    --etl-main-btn-hover-bg-primary-color: var(--grey-mid);
    --etl-main-btn-bg-secondary-color: var(--grey-bright);
    --etl-main-btn-hover-bg-secondary-color: var(--grey-carbon);

    /* ----------- Input ---------------- */
    --select-option-options-bg-hover-color: var(--grey-shuttle);
    --select-option-options-box-shadow-color: var(--grey-dove);
    --select-option-arrow-icon-color: var(--primary-white);

    /* ----------- Date tooltip --------- */
    --date-tooltip-disabled-bg-color: var(--black-ebony-clay);

    /* ----------- Custom modal ---------- */
    --custom-modal-btn-cancel-border-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-cancel-font-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-confirm-bg-color: var(--etl-main-btn-bg-primary-color);
    --custom-modal-btn-confirm-hover-bg-color: var(--etl-main-btn-hover-bg-primary-color);
    --custom-modal-btn-confirm-font-color: var(--primary-white);

    /* -------------------- PCS Component (First page main) ----------- */
    --pcs-component-panel-upload-bg-icon-opacity: 0.10;

    --pcs-component-panel-download-ex-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-panel-download-ex-btn-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);
    --pcs-component-panel-upload-bg-color: var(--secondary-black);
    --pcs-component-panel-upload-border-color: var(--box-container-border-color);
    --pcs-component-panel-upload-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-panel-upload-btn-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);

    /* ------ ETL Script (First page: First create script) ------------- */
    --etl-script-panel-create-panel-bg-color: var(--secondary-black);
    --etl-script-panel-create-panel-border-color: var(--box-container-border-color);
    --etl-script-panel-create-btn-create-script-bg-color: var(--etl-main-btn-bg-primary-color);
    --etl-script-panel-create-btn-create-script-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);

    /* ------ ETL SCript (First page: User ever create script) ----------- */
    /* --- Action button -- */
    --etl-script-table-script-hist--action-disabled-font-color: var(--primary-white);
    --etl-script-table-script-hist--action-disabled-btn-color: var(--grey-bright);
    --etl-script-table-script-hist-create-new-icon-disabled-color: var(--filter-primary-white);

    /* -------------------- PCS Component (Second page main) ----------- */
    --pcs-component-table-mapping-download-btn-bg-color: var(--etl-main-btn-bg-secondary-color);
    --pcs-component-table-mapping-download-btn-bg-hover-color: var(--etl-main-btn-hover-bg-primary-color);
    --pcs-component-table-mapping-upload-btn-bg-color: var(--etl-main-btn-bg-primary-color);
    --pcs-component-table-mapping-upload-btn-hover-bg-color:  var(--etl-main-btn-hover-bg-primary-color);

    /* -------------------- ETL Script (Second page) --------------- */
    --etl-script-panel-setting-step-icon-brightness: brightness(90%);
    --setting-panel-bg-color: var(--box-container-bg-color);

    --etl-script-panel-setting-btn-navigate-bg-color: var(--tertiary-blue);
    --etl-script-panel-setting-btn-navigate-border-color: var(--tertiary-blue);
    --etl-script-panel-setting-btn-navigate-font-color: var(--primary-white);
    --etl-script-panel-setting-step-order-font-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-success-step-order-font-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-inprogress-progress-text-font-color: var(--blue-jeans);

    /* ----- Pending status ------- */
    --etl-script-panel-setting-pending-icon-bg-color: rgba(199, 199, 199, 0.40);
    --etl-script-panel-setting-pending-icon-outline-color: rgba(199, 199, 199, 0.40);
    --etl-script-panel-setting-pending-progress-bar-bg-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-pending-step-order-font-color: var(--grey-lavender-pinocchio);
    --etl-script-panel-setting-pending-step-name-font-color: var(--primary-white);
    --etl-script-panel-setting-pending-progress-text-bg-color: rgba(199, 199, 199, 0.15);
    --etl-script-panel-setting-pending-progress-text-font-color: var(--primary-white);

    /* ----------------- File setting process ------------------------ */
    --file-setting-file-type-topic-font-color: var(--blue-iceberg);
    --file-setting-upload-zone-btn-bg-color: rgba(155, 212, 255, 0.80); /* --blue-baby */
    --file-setting-upload-zone-font-color: var(--blue-baby);
    --file-setting-upload-zone-icon-color: var(--filter-blue-baby);

    /* ------------------ Field mapping process ---------------------- */
    --field-mapping-select-menu-border-color: var(--grey-shuttle);
    --field-mapping-edit-logic-btn-font-color: var(--primary-white);
    --field-mapping-edit-logic-btn-border-color: var(--primary-white);
    --field-mapping-edit-logic-btn-bg-color: var(--blue-bayoux);
    --field-mapping-edit-logic-btn-hover-bg-color: var(--blue-slate);
    --field-mapping-edit-logic-btn-border-color: var(--blue-bayoux);
    --field-mapping-remove-all-logic-disabled-btn-bg-color: var(--input-disabled-bg-color);
    --field-mapping-remove-all-logic-disabled-btn-border-color: var(--etl-main-input-border-color);
    --field-mapping-remove-all-logic-disabled-btn-font-color: var(--input-disabled-font-color);

    /* ---- Operation between field logic ---- */
    --operation-between-field-logic-calculation-btn-bg-color: var(--etl-main-input-bg-color);
    --operation-between-field-logic-calculation-btn-border-color: var(--etl-main-input-border-color);
    --operation-between-field-logic-calculation-btn-bg-hover-color: var(--operation-between-field-logic-calculation-btn-border-color);
    --operation-between-field-btn-add-for-text-bg-color: var(--green-bluish);
    --operation-between-field-btn-add-for-text-bg-hover-color: var(--green-mountain-meadow);
    --operation-between-field-btn-add-for-text-border-color: var(--transparent);
    --operation-between-field-btn-add-for-text-font-color: var(--primary-white);

    /* ------- Other Settings process ------------ */
    --other-settings-list-bg-color: var(--etl-main-input-bg-color);

    /* ----------------- Control account checking -------------------- */
    --control-account-checking-highlight-row-bg-color: var(--yellow-hemlock);
    --control-account-checking-info-btn-bg-color: var(--yellow-light-butter);
    --control-account-checking-info-btn-hover-color: var(--yellow-light-tan);
    --control-account-checking-info-btn-border-color: var(--yellow-jasmine);
    --control-account-checking-info-btn-font-color: var(--yellow-hemlock);
    --control-account-checking-tooltip-bg-color: var(--grey-river-bed);
    --control-account-checking-tooltip-box-shadow-color: rgba(255, 255, 255, 0.15);
    --control-account-checking-info-icon-color: var(--yellow-hemlock);

    /***************************************************************************************
    * Service center module
    ***************************************************************************************/
    --service-center-main-btn-bg-color: var(--blue-silk);
    --service-center-card-bg-color: var(--black-ebony-clay);
    --service-center-card-border-color: var(--grey-bright);
    --service-center-card-box-shadow-color: rgb(0 0 0 / 0.05);
    --service-center-main-container-bg-color: var(--tertiary-black);
    --service-center-new-request-btn-bg-hover-color: var(--blue-cerulean);
    --service-center-filter-request-item-container-border-color: var(--grey-bright);
    --service-center-filter-request-item-btn-bg-color: var(--grey-bright);
    --service-center-filter-request-item-btn-bg-hover-color: var(--grey-carbon);
    --service-center-request-list-empty-font-color: var(--grey-silver-chalice);
    --service-center-request-item-border-color: var(--grey-bright);
    --service-center-request-item-box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 6px rgba(0,0,0,0.05);
    --service-center-info-text-font-color: var(--grey-silver-sand);
    --service-center-request-action-btn-border-color: var(--grey-bright);
    --service-center-request-action-view-btn-bg-color: var(--grey-bright);
    --service-center-request-action-view-btn-border-color: var(--grey-carbon);
    --service-center-request-action-view-btn-bg-hover-color: var(--grey-carbon);
    --service-center-expanded-full-screen-btn-border-color:var(--grey-davy);
    --service-center-expanded-full-screen-btn-bg-color: var(--black-ebony-clay);
    --service-center-expanded-full-screen-btn-bg-hover-color: var(--grey-carbon);
    --service-center-form-popup-title-font-color: var(--grey-silver-sand);
    --service-center-email-preview-container-bg-color: var(--grey-bright);
    --service-center-email-preview-area-bg-color: var(--black-ebony-clay);
    --service-center-email-preview-area-border-color: var(--grey-davy);
    --service-center-metrices-label-font-color: var(--grey-silver-sand);
    --service-center-metrices-icon-bg-color: var(--grey-bright);
}