:root {
    --icon-width: 2.5rem;
    --text-width: 5rem;
    --icon-width-scale: 0.5rem;
    --icon-margin: 0.15rem;
    --sidebar-width: 13rem;
    --main-content-height: 90vh;
    /* --transition-mode-delay: 1s; */
    --transition-mode-delay: 0.25s;
    --color-bg-disabled: rgba(128, 128, 128, 0.05);
    --abs-logo-image: url('/static/ABS/shared/img/company_logo/ABS_LOGO_NEW.png');
    --abs17-logo-image: url('/static/ABS/shared/img/company_logo/simple17logo.png');
    --bg-login-select: url('/static/ABS/shared/img/bg/BG_FLAG_LOGIN_B.jpg');
    --bg-main-select: url('/static/ABS/shared/img/bg/BG_FLAG_MAIN_B.jpg');
    --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.png');
    /* BRIGHT */
    --mode-text: 'BRIGHT';
    /* login */
    --color-login-select: #214382;
    --color-login-btn: #2769c9;
    --color-login-btn-hover: #1b51a8;
    --color-login-bg: rgba(128, 128, 128, 0);
    --color-login-form-bg: #ffffff;
    /* main layout - home */
    --color-main-select: #214382;
    --color-main-btn: #ffffff;
    --color-main-btn-hover: #b5b5b5;
    --color-main-bg: rgba(128, 128, 128, 0);
    --color-other-font-menu: #ffff00;
    /* sidebar for LIC/LRC */
    --sidebar-bg-color: #a4d2ff;
    --sidebar-bg-color-hover: #4795f4;
    --sidebar-font-color: #000000;
    --sidebar-font-color-hover: #ffffff;
    --sidebar-font-logo-color: #214382;
    --sidebar-font-logo-color-hover: #ffffff;
    --sidebar-toggle-btn-color: #214382;
    --sidebar-toggle-btn-color-hover: #ffffff;
    --sidebar-toggle-btn-bg-color: #ffffff;
    --sidebar-toggle-btn-bg-color-hover: #214382;
    --sidebar-toggle-btn-border-color: #ffffff;
    --sidebar-toggle-btn-border-color-hover: #214382;
    /* setup input for LIC/LRC */
    --label-font-color: #000000;
    --label-font-logo-color: #214382;
    --form-btn-font-color: #000000;
    --form-btn-font-color-hover: #ffffff;
    --form-btn-font-logo-color: #214382;
    --form-btn-font-logo-color-hover: #ffffff;
    --form-btn-bg-color: #a4d2ff;
    --form-btn-bg-color-hover: #1b51a8;
    --input-font-color: #000000;
    --input-bg-color: #ffffff;
    --input-border-color: rgba(230, 230, 230, 1);
    --input-font-focus-color: #ffffff;
    --input-bg-focus-color: #2769c9;
    --input-border-focus-color: #a4d2ff;
    /* tables */
    --table-th-bg-color: #1b51a8;
    --table-th-font-color: #ffffff;
    --table-td-bg-even-color: #f0f9ff;
    --table-td-bg-odd-color: #ffffff;
    --table-td-font-color: #000000;
    --table-btn-bg-color: #a4d2ff;
    --table-btn-bg-color-hover: #1b51a8;
    --table-btn-font-color: #214382;
    --table-btn-font-color-hover: #ffffff;
    /* tab show tables */
    --tab-show-bg-color: #a4d2ff;
    --tab-show-bg-color-hover: #1b51a8;
    --tab-show-font-color: rgb(112, 112, 112);
    --tab-show-font-color-hover: #ffffff;
    /* download */
    --download-box-body-bg-color: #f0f9ff;
    --download-box-header-bg-color: #2769c9;
    --download-box-header-font-color: #ffffff;
    --download-btn-bg-color: #a4d2ff;
    --download-btn-bg-color-hover: #4795f4;
    --download-btn-font-color: #000000;
    --download-btn-font-color-hover: #ffffff;
    --download-btn-font-logo-color: #214382;
    --download-btn-font-logo-color-hover: #ffffff;
    --download-btn-all-bg-color: #0c316d;
    --download-btn-all-bg-color-hover: #214382;
    --download-btn-all-font-color: #ffffff;
    --download-btn-all-font-color-hover: #ffffff;
    --download-btn-all-font-logo-color: #ffffff;
    --download-btn-all-font-logo-color-hover: #ffffff;
    /* change password and reset password */
    --password-form-header-bg-color: #2769c9;
    --password-form-header-font-color: #ffffff;
    --password-form-btn-bg-color: #f0f5fd;
    --password-form-btn-bg-color-hover: #2769c9;
    --password-form-btn-font-color: #000000;
    --password-form-btn-font-color-hover: #ffffff;    
    --password-input-font-color: #000000;
    --password-input-bg-color: #ffffff;
    --password-input-border-color: rgba(230, 230, 230, 1);
    --password-input-font-focus-color: #ffffff;
    --password-input-bg-focus-color: #4795f4;
    --password-input-border-focus-color: #a4d2ff;

    /***************************************************************************************
    * ETL Modules
    ***************************************************************************************/
    /* -------------- General button ----------*/
    --gnl-btn-color: #ffffff;

    /* ------------- Vertical align ---------- */
    --v-line-white: #ffffff;
    --v-line-grey: #88949d;
    --v-line-grey-2: #4d4d4d;
    --v-line-dark-blue: #264466;

    /* ---------- Preloader ------------------- */
    --preloader-bg-color: #ffffff;
    --preloader-spinner-outside-border-color: #f3f3f3;
    --preloader-spinner-inner-border-color: #3498db;

    /* ----------- Input field ---------------- */
    --input-field-border-color: #81b2da;
    --input-field-box-shadow-color: #007bff3f;
    --input-field-disabled-bg-color: #ededed;
    --input-field-disabled-border-color: #c1c1c1;
    --input-field-disabled-font-color: #7a7a7a;
    --input-field-wrapper-bg-color: #ffffff;
    --input-field-wrapper-border-color: #81b2da;
    --input-field-wrapper-box-shadow-color: #007bff3f;
    --input-field-wrapper-default-icon-color: #32769b;
    --input-field-wrapper-disabled-bg-color: #ededed;
    --input-field-wrapper-disabled-border-color: #c1c1c1;
    --input-field-wrapper-disabled-icon-border-color: #7a7a7a;
    --input-field-wrapper-disabled-icon-color: #7a7a7a;
    --input-field-error-border-color: #f70000;

    /* ----------- Select option ---------------- */
    --select-option-active-bg-color: #007bff3f;
    --select-option-bg-color: #ffffff;
    --select-option-border-color: #b0cfe8;
    --select-option-disabled-bg-color: #ededed;
    --select-option-disabled-border-color: #c1c1c1;
    --select-option-disabled-font-color: #7a7a7a;
    --select-option-options-bg-color: #ffffff;
    --select-option-options-bg-hover-color: #f3f7f9;
    --select-option-options-box-shadow-color: #00000019;
    --select-option-options-font-color: #000000;
    --select-option-arrow-icon-color: #23538f;

    /* ------------- Checkbox ----------------- */
    --checkbox-border-color: #95aec2;
    --checkbox-bg-color: #ffffff;
    --checkbox-box-shadow-color: #95aec2;
    --checkbox-color: #2658c6;

    /* ----------- Datepicker ----------------- */
    --datepicker-even-row-bg-color: #f8fcff;
    --datepicker-table-cell-active-font-color: #ffffff;
    --datepicker-table-cell-old-new-day-font-color: #999;

    /* ----------- Date tooltips -------------- */
    --input-field-wrapper-for-date-info-icon-border-color: #81b2da;
    --input-field-wrapper-for-date-info-font-color: #81b2da;
    --date-info-tooltip-bg-color: #81b2da;
    --date-info-tooltip-font-color: #ffffff;
    --date-info-tooltip-arrow-border-color:
    transparent #81b2da transparent transparent;

    /* ---------------- Modal ---------------- */
    --modal-bg-color: #ffffff;
    --modal-topic-line-color: #e0e0e0;

    /* -------------- Datatable -------------- */
    --datatable-header-text-color: #ffffff;
    --datatable-label-text-color: #264466;
    --datatable-select-menu-border-color: #dee4e8;
    --datatable-select-menu-arrow-icon-color: #264466;
    --datatable-search-input-border-color: #dee4e8;
    --datatable-search-input-focus-border-color: #80bdff;
    --datatable-search-input-focus-box-shadow-color: #0d6efd3f;
    --datatable-about-pagination-transparent: transparent;
    --datatable-about-pagination-color: #919191;
    --datatable-paginate-button-bg-color: #264466;
    --datatable-paginate-button-font-color: #ffffff;
    --datatable-paginate-button-not-current-font-color: #000000;
    --datatable-paginate-button-disabled-font-color: #e3e3e3;
    --datatable-row-reorder-bg-color: #ededed;
    --datatable-row-reoder-ellipsis-icon-color: #a9a9a9;
    --datatable-row-reorder-highlight-row-bg-color: rgba(255, 255, 0, 0.15);
    --datatable-process-icon-wrapper-bg-color: #ffffff;
    --datatable-processing-icon-bg-color: rgba(255, 255, 255, 0.5);
    --datatable-processing-icon-border-color: #cccccc;
    --datatable-processing-icon-spinner-icon-border-color: #cccccc;
    --datatable-processing-icon-spinner-icon-border-transparent: transparent;

    /* ------------- Table container --------- */
    --table-container-wrapper-bg-color: #f3f7f9;
    --table-container-wrapper-border-color: #214382;

    /* ------------- Table theme color ------- */
    --theme-1-table-header-bg-color: #264466;
    --theme-1-table-header-border-color: #dee4e8;
    --theme-1-table-data-border-color: #dee4e8;
    --theme-1-table-even-row-bg-color: #f9f9f9;
    --theme-1-table-odd-row-bg-color: #ffffff;

    --theme-2-table-header-bg-color: #264466;
    --theme-2-table-header-border-color: #000000;
    --theme-2-table-data-border-color: #000000;
    --theme-2-table-even-row-bg-color: #ffffff;
    --theme-2-table-odd-row-bg-color: #ffffff;

    --table-cell-disabled-bg-color: #f9f9f9;

    /* ---------------------- Header part ------------------------------ */
    --header-wrapper-bg-color: #c2dbed;
    --header-company-name-font-color: #264466;
    --header-user-email-font-color: #264466;
    --header-user-expire-password-font-color: #4d4d4d;

    /* --------------------- Sidebar part ------------------------------ */
    --aside-sidebar-bg-color: #264466;
    --nav-menu-font-color: #ffffff;
    --nav-item-font-color: #ffffff;
    --nav-item-icon-color: #b9cad5;
    --nav-item-active-bg-color: #ffffff1a;
    --nav-item-tab-ribbon-bg-color: #b9cad5;
    --nav-item-bg-hover-color: #ffffff1a;
    --arrow-right-icon-color: #b9cad5;

    /* --- Toggle sidebar button --- */
    --toggle-sidebar-btn-bg-color: #ffffff;
    --toggle-sidebar-btn-icon-color: #264466;
    --toggle-sidebar-btn-icon-border-color: #264466;
    --toggle-sidebar-btn-bg-hover-color: #264466;
    --toggle-sidebar-btn-icon-hover-color: #ffffff;

    /* --------------------- Responsive sidebar ------------------------- */
    --aside-sidebar-hamburger-btn-icon-color: #264466;
    --aside-sidebar-hamburger-btn-bg-color: transparent;
    --aside-sidebar-close-icon-color: transparent;
    --aside-sidebar-close-icon-btn-color: #ffffff;
    --aside-sidebar-close-btn-hover-color: #ffffff1a;
    --blurred-bg-color: #535353;

    /* -------------------- PCS Component (First page main ) ----------- */
    --pcs-component-panel-download-ex-btn-bg-color: #264466;
    --pcs-component-panel-download-ex-btn-bg-hover-color: #203956;
    --pcs-component-panel-upload-bg-color: #deebf3;
    --pcs-component-panel-upload-border-color: #2644667f;
    --pcs-component-panel-upload-btn-bg-color: #264466;
    --pcs-component-panel-upload-btn-bg-hover-color: #203956;
    --pcs-component-panel-upload-btn-font-color: #ffffff;

    /* ----- Modal --- */
    --pcs-component-panel-modal-cancel-btn-bg-color: #ffffff;
    --pcs-component-panel-modal-cancel-btn-border-color: #264466;
    --pcs-component-panel-modal-cancel-btn-font-color: #264466;
    --pcs-component-panel-modal-confirm-btn-bg-color: #264466;
    --pcs-component-panel-modal-confirm-btn-border-color: #264466;
    --pcs-component-panel-modal-confirm-btn-font-color: #ffffff;

    /* -------------------- PCS Component (Second page main) ----------- */
    --pcs-component-table-mapping-download-btn-bg-color: #406196;
    --pcs-component-table-mapping-download-btn-bg-hover-color: #3f5364;
    --pcs-component-table-mapping-upload-btn-bg-color: #65839d;
    --pcs-component-table-mapping-upload-btn-hover-bg-color: #3f5364;
    --pcs-component-table-mapping-tab-table-bg-color: #f3f7f9;
    --pcs-component-table-mapping-table-bg-color: #ffffff;
    --pcs-component-table-mapping-table-border-color: #264466;
    --pcs-component-table-mapping-tab-table-font-color: #cccccc;
    --pcs-component-table-mapping-tab-table-selected-bg-color: #ffffff;
    --pcs-component-table-mapping-tab-table-selected-border-color: #264466;
    --pcs-component-table-mapping-tab-table-selected-font-color: #264466;
    --pcs-component-table-mapping-tab-table-border-color: #cccccc;

    /* ------ ETL Script (First page: First create script) ------------- */
    --etl-script-panel-create-panel-bg-color: #deebf3;
    --etl-script-panel-create-panel-border-color: #2644667f;
    --etl-script-panel-create-btn-create-script-bg-color: #264466;
    --etl-script-panel-create-btn-create-script-bg-hover-color: #203956;

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

    /* --- Create new button --- */
    --etl-script-table-script-hist-create-new-btn-bg-color: #53a6d8;
    --etl-script-table-script-hist-create-new-btn-bg-hover-color: #6d98bb;
    --etl-script-table-script-hist-create-new-btn-disabled-bg-color: #d9d9d9;
    --etl-script-table-script-hist-create-new-btn-disabled-bg-hover-color: #d9d9d9;

    /* --- Action button -- */
    --etl-script-table-script-hist--action-disabled-btn-color: #d9d9d9;
    --etl-script-table-script-hist-edit-btn-bg-color: #ffb970;
    --etl-script-table-script-hist-edit-btn-bg-hover-color: #faa346;
    --etl-script-table-script-hist-clone-btn-bg-color: #0b9f73;
    --etl-script-table-script-hist-clone-btn-bg-hover-color: #066649;
    --etl-script-table-script-hist-delete-btn-bg-color: #eb1d0b;
    --etl-script-table-script-hist-delete-btn-bg-hover-color: #eb1d0b;

    /* --- Reorder items button -- */
    --etl-script-table-script-hist-reorder-items-btn-bg-color: #32769b;
    --etl-script-table-script-hist-reorder-items-btn-bg-hover-color: #65839d;
    --etl-script-table-script-hist-reorder-items-btn-disabled-bg-color: #d5d5d5;
    --etl-script-table-script-hist-reorder-items-btn-disabled-bg-hover-color: #d5d5d5;

    /* --- Reorder items confirm button -- */
    --etl-script-table-script-hist-reorder-items-confirm-btn-bg-color: #21c174;
    --etl-script-table-script-hist-reorder-items-confirm-btn-bg-hover-color: #03914d;

    /* --- Reorder items calcel button -- */
    --etl-script-table-script-hist-reorder-items-cancel-btn-bg-color: #eb1d0b;
    --etl-script-table-script-hist-reorder-items-cancel-btn-bg-hover-color: #eb1d0b;

    /* --- Enable script toggle button --- */
    --etl-script-table-script-hist-enable-toggle-btn-box-shadow-color: rgba(0, 0, 0, 0.15);
    --etl-script-table-script-hist-enable-toggle-btn-bg-color: #2ecc71;
    --etl-script-table-script-hist-disable-toggle-btn-bg-color: #bdc1c2;
    --etl-script-table-script-hist-toggle-ball-btn-bg-color: #ffffff;
    --etl-script-table-script-hist-disable-toggle-btn-font-color: #ffffff;

    /* --- Modal for clone action --- */
    --etl-script-table-script-hist-modal-cancel-btn-bg-color: #ffffff;
    --etl-script-table-script-hist-modal-cancel-btn-border-color: #264466;
    --etl-script-table-script-hist-modal-cancel-btn-font-color: #264466;
    --etl-script-table-script-hist-modal-confirm-btn-bg-color: #264466;
    --etl-script-table-script-hist-modal-confirm-btn-border-color: #32769b;
    --etl-script-table-script-hist-modal-confirm-btn-font-color: #ffffff;

    /* ---------------- ETL SCript (Second page) ----------------------- */

    /* ---------------- Layout ------------------------------ */
    --etl-script-panel-setting-breadcrumb-border-color: #264466;

    /* ----- In progress status --- */
    --etl-script-panel-setting-inprogress-icon-bg-color: #65839d;
    --etl-script-panel-setting-inprogress-icon-outline-color: #65839d;
    --etl-script-panel-setting-inprogress-progress-bar-bg-color: #deebf3;
    --etl-script-panel-setting-inprogress-bar-fragment-bg-color: #65839d;
    --etl-script-panel-setting-inprogress-progress-text-bg-color: #deebf3;
    --etl-script-panel-setting-inprogress-progress-text-font-color: #264466;

    /* ----- Pending status ------- */
    --etl-script-panel-setting-pending-icon-bg-color: #ffffff;
    --etl-script-panel-setting-pending-icon-outline-color: #cccccc;
    --etl-script-panel-setting-pending-progress-bar-bg-color: #e3e3e3;
    --etl-script-panel-setting-pending-step-order-font-color: #e3e3e3;
    --etl-script-panel-setting-pending-step-name-font-color: #cccccc;
    --etl-script-panel-setting-pending-progress-text-bg-color: #ffffff;
    --etl-script-panel-setting-pending-progress-text-border-color: #cccccc;
    --etl-script-panel-setting-pending-progress-text-font-color: #cccccc;

    /* ----- Success status ------- */
    --etl-script-panel-setting-success-icon-bg-color: #21c174;
    --etl-script-panel-setting-success-icon-border-color: #21c174;
    --etl-script-panel-setting-success-correct-marker-color: #ffffff;
    --etl-script-panel-setting-success-progress-bar-bg-color: #21c174;
    --etl-script-panel-setting-success-step-order-font-color: #a9a9a9;
    --etl-script-panel-setting-success-step-name-font-color: #000000;
    --etl-script-panel-setting-success-progress-text-bg-color: #e8f9f1;
    --etl-script-panel-setting-success-progress-text-border-color: #21c174;
    --etl-script-panel-setting-step-order-font-color: #a9a9a9;

    /* ---------------- Setting/input ------------------------------ */
    --etl-script-panel-setting-panel-border-color: #264466;
    --etl-script-panel-setting-topic-panel-border-color: #cccccc;
    --etl-script-panel-setting-btn-navigate-bg-color: #ffffff;
    --etl-script-panel-setting-btn-navigate-bg-hover-color: #ffffff;
    --etl-script-panel-setting-btn-navigate-border-color: #65839d;
    --etl-script-panel-setting-btn-navigate-font-color: #65839d;
    --etl-script-panel-setting-btn-navigate-disabled-bg-color: #e3e3e3;
    --etl-script-panel-setting-btn-navigate-disabled-border-color: #cccccc;
    --etl-script-panel-setting-btn-navigate-disabled-font-color: #cccccc;
    --etl-script-panel-setting-btn-cancel-bg-color: #db5e54;
    --etl-script-panel-setting-btn-cancel-bg-hover-color: #db372b;
    --etl-script-panel-setting-btn-cancel-border-color: #db372b;
    --etl-script-panel-setting-btn-submit-setting-bg-color: #96aabc;
    --etl-script-panel-setting-btn-submit-setting-bg-hover-color: #7d8e9c;
    --etl-script-panel-setting-btn-submit-setting-border-color: #65839d;
    --etl-script-panel-setting-btn-submit-setting-font-color: #ffffff;
    --etl-script-panel-setting-btn-save-setting-bg-color: #21c174;
    --etl-script-panel-setting-btn-save-setting-border-color: #21c174;
    --etl-script-panel-setting-btn-save-setting-bg-hover-color: #03914d;

    /* ------------ Premium Register, E&C Data and Endorsement ------- */

    /* ----------------- File setting process ------------------------ */
    --file-setting-process-input-border-color: #95aec2;
    --file-setting-process-script-for-bg-color: #f1f1f1;
    --file-setting-process-script-for-font-color: #b9cad5;
    --file-setting-behind-box-bg-color: #f3f7f9;
    --file-setting-behind-box-border-color: #cad5e0;
    --file-setting-wrapper-bg-color: #ffffff;
    --file-setting-input-bg-color: #f7f7f7;
    --file-setting-label-input-font-color: #589cd4;
    --file-setting-file-type-input-border-color: transparent;
    --file-setting-file-type-topic-font-color: #47607d;
    --file-setting-status-upload-info-wrapper-border-color: #32769b;
    --file-setting-status-upload-info-wrapper-bg-color: #ffffff;
    --file-setting-status-upload-info-status-inprogress: #32769b;
    --file-setting-status-upload-info-status-success: #21c174;
    --file-setting-status-upload-info-status-error: #eb1d0b;
    --file-setting-upload-zone-bg-color: #ffffff;
    --file-setting-upload-zone-border-color: #32769b;
    --file-setting-upload-zone-font-color: #32769b;
    --file-setting-upload-zone-icon-color: 
    brightness(0) 
    saturate(100%)
    invert(37%)
    sepia(100%)
    saturate(303%)
    hue-rotate(156deg)
    brightness(91%)
    contrast(91%);

    /* -------- Filter data / Filter result process ----------------- */
    --filter-process-delete-filter-box-btn-bg-color: #eb1d0b;
    --filter-process-delete-filter-box-btn-font-color: #ffffff;
    --filter-process-filter-box-active: #9ecaed;
    --filter-process-operation-label-inside-bg-color: #caf0dd;
    --filter-process-operation-label-inside-border-color: #21c174;
    --filter-process-operation-inside-bg-color: #a2e5c5;
    --filter-process-operation-label-outside-bg-color: #fff2cd;
    --filter-process-operation-label-outside-border-color: #f6d165;
    --filter-process-operation-outside-bg-color: #f6d165;
    --filter-process-btn-font-color: #ffffff;
    --filter-process-filter-confirm-btn-bg-color: #21c174;
    --filter-process-filter-confirm-btn-bg-hover-color: #03914d;
    --filter-process-filter-edit-btn-bg-color: #264466;
    --filter-process-filter-edit-btn-bg-hover-color: #203956;

    /* ------------------ Field mapping process ---------------------- */
    --field-mapping-input-field-border-color: #264466;
    --field-mapping-select-option-border-color: #23538f;
    --field-mapping-logic-label-bg-color: #f9de92;
    --field-mapping-logic-label-font-color: #ffffff;
    --field-mapping-special-field-logic-label-bg-color: #deebf3;
    --field-mapping-special-field-logic-label-border-color: #264466;
    --field-mapping-edit-logic-btn-bg-color: #ffffff;
    --field-mapping-edit-logic-btn-border-color: #23538f;
    --field-mapping-edited-logic-btn-bg-color: #23538f;
    --field-mapping-edited-logic-btn-font-color: #ffffff;
    --field-mapping-remove-all-logic-btn-bg-color: #eb1d0b;
    --field-mapping-remove-all-logic-btn-border-color: #eb1d0b;
    --field-mapping-remove-all-logic-btn-font-color: #ffffff;
    --field-mapping-remove-all-logic-disabled-btn-bg-color: #f5f5f5;
    --field-mapping-remove-all-logic-disabled-btn-border-color: #7a7a7a;
    --field-mapping-remove-all-logic-disabled-btn-font-color: #7a7a7a;
    --field-mapping-add-btn-bg-color: #21c174;
    --field-mapping-add-btn-icon-color: #ffffff;
    --field-mapping-delete-btn-bg-color: #eb1d0b;
    --field-mapping-delete-btn-icon-color: #ffffff;
    --field-mapping-modal-cancel-btn-bg-color: #ffffff;
    --field-mapping-modal-cancel-btn-border-color: #32769b;
    --field-mapping-modal-cancel-btn-font-color: #32769b;
    --field-mapping-modal-confirm-btn-bg-color: #32769b;
    --field-mapping-modal-confirm-btn-bg-hover-color: #186d9b;
    --field-mapping-modal-confirm-btn-font-color: #ffffff;

    /* ------- Field conversion logic --------- */
    --field-conversion-logic-add-logic-btn-bg-transparent: transparent;
    --field-conversion-logic-add-logic-btn-bg-color: #2bc783;
    --field-conversion-logic-add-logic-btn-icon-color: #ffffff;
    --field-conversion-logic-add-logic-btn-disabled-bg-color: #b2b2b2;
    --field-conversion-logic-add-logic-btn-disabled-font-color: #b2b2b2;
    --field-conversion-logic-add-logic-option-btn-bg-color: #2bc783;
    --field-conversion-logic-add-logic-option-btn-font-color: #ffffff;
    --field-conversion-logic-delete-logic-option-btn-bg-color: #eb1d0b;
    --field-conversion-logic-delete-logic-option-btn-font-color: #ffffff;
    --field-conversion-logic-confirm-logic-option-btn-bg-color: #21c174;
    --field-conversion-logic-confirm-logic-option-btn-hover-bg-color: #03914d;
    --field-conversion-logic-edit-logic-option-btn-bg-color: #203956;
    --field-conversion-logic-edit-logic-option-btn-hover-bg-color: #264466;
    --field-conversion-logic-action-for-option-btn-font-color: #ffffff;

    /* ---- Operation between field logic ---- */
    --operation-between-field-logic-area-border-color: #81b2da;
    --operation-between-field-logic-calculation-btn-bg-color: #eeeeee;
    --operation-between-field-logic-calculation-btn-bg-hover-color: #d9d9d9;
    --operation-between-field-logic-delete-calculation-btn-icon-color: #264466;
    --operation-between-field-logic-confirm-logic-area-btn-bg-color: #21c174;
    --operation-between-field-logic-confirm-logic-area-btn-hover-bg-color: #03914d;
    --operation-between-field-logic-select-option-bg-color: #fafdff;
    --operation-between-field-logic-edit-logic-area-btn-bg-color: #203956;
    --operation-between-field-logic-edit-logic-area-btn-hover-bg-color: #264466;
    --operation-between-field-logic-action-for-area-btn-font-color: #ffffff;
    --operation-between-field-btn-delete-for-text-bg-color: #eb1d0b;
    --operation-between-field-btn-delete-for-text-icon-color: #ffffff;
    --operation-between-field-btn-add-for-text-bg-color: #e7f8f0;
    --operation-between-field-btn-add-for-text-bg-hover-color: #d8f7e9;
    --operation-between-field-btn-add-for-text-border-color: #3dc985;
    --operation-between-field-btn-add-for-text-font-color: #3dc985;
    --operation-between-field-plus-sign-color: #db9554;

    /* ----------------- Other Settings process ---------------------- */
    --other-settings-box-wrapper-bg-color: #f8fcff;
    --other-settings-box-wrapper-border-color: #9ac3e1;
    --other-settings-list-text-bg-color: #ffffff;
    --other-settings-list-text-border-color: #a7cbe5;
    --other-settings-list-number-bg-color: #005a8e;
    --other-settings-list-number-font-color: #ffffff;

    /* ------------- LIC/LRC Adjustment & Expense -------------------- */

    /* ---------------- File setting process ------------------------ */
    --file-setting-process-adjustment-expense-input-border-color: #95aec2;
    --file-setting-process-adjustment-expense-script-name-font-color: #32769b;
    --file-setting-process-adjustment-expense-script-for-bg-color: #dee4e8;
    --file-setting-process-adjustment-expense-for-font-color: #748fa6;
    --file-setting-process-adjustment-expense-begind-box-bg-color: #f3f7f9;
    --file-setting-process-adjustment-expense-behind-box-border-color: #cad5e0;
    --file-setting-process-adjustment-expense-file-name-keyword-border-color: #95aec2;
    --file-setting-process-adjustment-expense-file-name-keyword-font-color: #32769b;
    --file-setting-process-adjustment-expense-status-upload-info-wrapper-border-color: #32769b;
    --file-setting-process-adjustment-expense-status-upload-info-wrapper-bg-color: #ffffff;
    --file-setting-process-adjustment-expense-status-upload-info-status-inprogress: #32769b;
    --file-setting-process-adjustment-expense-upload-info-status-success: #21c174;
    --file-setting-process-adjustment-expense-upload-info-status-error: #eb1d0b;
    --file-setting-process-adjustment-expense-upload-zone-bg-color: #ffffff;
    --file-setting-process-adjustment-expense-upload-zone-border-color: #32769b;
    --file-setting-process-adjustment-expense-upload-zone-font-color: #32769b;
    --file-setting-process-adjustment-expense-upload-zone-icon-color: 
        brightness(0) 
        saturate(100%)
        invert(37%) 
        sepia(100%) 
        saturate(303%) 
        hue-rotate(156deg)
        brightness(91%)
        contrast(91%);
    --file-setting-process-adjustment-expense-sheet-name-wrapper-bg-color: #ffffff;
    --file-setting-process-adjustment-expense-checkbox-sheet-name-icon-color: #81b2da;

    /* ------ box container ----- */
    --box-wrapper-bg-color: #f8fcff;
    --box-wrapper-border-color: #9ac3e1;
    --box-wrapper-input-field-wrapper-bg-color: #ffffff69;
    --box-wrapper-topic-icon-color: #32769b;

    /* -------------- Input field setting process ------------------------ */
    --input-field-setting-select-option-border-color: #81b2da;

    /* ----------------------- Upload data --------------------------- */
    --upload-data-etl-topic-etl-border-color: #81b2da;
    --upload-data-etl-report-date-input-border-color: #81b2da;
    --upload-data-etl-upload-data-btn-bg-color: #264466;
    --upload-data-etl-upload-data-btn-bg-hover-color: #264466;
    --upload-data-etl-generate-result-btn-bg-color: #32769b;
    --upload-data-etl-generate-result-btn-bg-hover-color: #255975;
    --upload-data-etl-info-panel-wrapper-border-color: #81b2da;
    --upload-data-etl-info-panel-bg-color: #f3f7f9;
    --upload-data-etl-process-box-wrapper-bg-color: #ffffff;
    --upload-data-etl-process-box-wrapper-border-color: #81b2da;
    --upload-data-etl-progress-icon-color: #ffffff;
    --upload-data-etl-progress-icon-success-color: #21c074;
    --upload-data-etl-progress-icon-error-color: #eb1d0b;
    --upload-data-etl-progress-icon-inprogress-color: #ffc85d;
    --upload-data-etl-info-box-bg-color: #ffffff;
    --upload-data-etl-info-box-border-color: #81b2da;

    /* ------------------- Premium register result -------------------- */
    --premium-register-result-topic-text-color: #406196;
    --premium-register-result-download-btn-bg-color: #406196;
    --premium-register-result-download-btn-bg-hover-color: #255975;
    --premium-register-result-table-panel-bg-color: #fdfdfd;

    /* ------------------- E&C data result ---------------------------- */
    --ec-data-result-topic-text-color: #406196;
    --ec-data-result-download-btn-bg-color: #406196;
    --ec-data-result-download-btn-bg-hover-color: #255975;
    --ec-data-result-table-panel-bg-color: #fdfdfd;

    /* ------------------- PCS Mapping result -------------------------- */
    --pcs-mapping-result-topic-text-color: #406196;
    --pcs-mapping-result-download-btn-bg-color: #406196;
    --pcs-mapping-result-download-btn-bg-hover-color: #255975;
    --pcs-mapping-result-table-panel-bg-color: #fdfdfd;

    /* -------- Images -------- */
    --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");

    /* 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;

    /* --------------------------- Popup --------------------------- */
    /* Colors */
    --bg-darkgrey: darkgrey;
    --bg-cornsilk: cornsilk;
    --bg-oldlace: oldlace;
    --bg-mistyrosk: mistyrose;
    --bg-soft-mint: #f1ffe9;
    --bg-light-butter-yellow: #fffeda;
    --bg-pale-blush: #fee;
    --bg-red-light-coral: #f27474;

    /* Font sizes */
    --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 */
    --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: 22vh;

    /* --- Related colors in alert container --- */
    --swal-alert-bg-color: #FFFFFF;
    --swal-alert-border-color: transparent;
    --swal-alert-box-shadow-color: transparent;
    --swal-alert-confirm-btn-bg-color: rgb(48, 133, 214);
    --swal-alert-general-font-color: #545454;
    --swal-alert-horizontal-line-bg-color: var(--bg-darkgrey);
    --swal-alert-title-warning-bg-color: var(--bg-cornsilk);
    --swal-alert-error-warning-bg-color: var(--bg-mistyrosk);
    --swal-alert-highlight-success-bg-color: var(--bg-soft-mint);
    --swal-alert-highlight-warning-bg-color: var(--bg-light-butter-yellow);
    --swal-alert-highlight-error-bg-color: var(--bg-pale-blush);
    --swal-alert-module-error-border-color: var(--bg-red-light-coral);
    --swal-alert-backdrop-bg-color: rgba(0, 0, 0, 0.55);

    /* -------------------------- New design ----------------------- */
    /* Colors */
    --primary-color: #365486;
    --primary-color-dark: #29384d;
    --white-color: #ffffff;
    --black-color: #000000;
    --border-color: #afbbcf;
    --text-secondary-color: #adb9cd;
    --border-color-light: #dcdcdc;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --text-gray-color: #727272;

    /* Profile image */
    --color-profile-image-hover-outline: rgba(242, 242, 242, 0.5);

    /* User Menu Title */
    --color-menu-title: var(--primary-color);

    /* User Menu Button */
    --color-menu-button-hover: #f2f3f4;

    /* User Menu Icon */
    --color-menu-icon: var(--primary-color);

    /* Admin Role Colors */
    --color-admin-bg: #E3F2FD;
    --color-admin-text: #1976D2;
    --color-admin-hover-bg: #BBDEFB;
    --color-admin-hover-text: #0D47A1;
    
    /* User Role Colors */
    --color-user-bg: #FFF9E6;
    --color-user-text: #FFC107;

    /* Company Dropdown Colors */
    --color-company-dropdown-bg: #d5e4f2;
    --color-company-dropdown-text: var(--primary-color);
    --color-company-dropdown-icon: var(--primary-color);
    --color-company-dropdown-ribbon: var(--primary-color);
    
    /* Switch theme toggle Colors */
    --color-toggle-bg: #f3f3f3;
    --color-toggle-active: #89a7b2;
    --color-toggle-button: #365486;
    --color-toggle-button-active: #d5e2e7;
    
    /* Sizes */
    --menu-width: 280px;
    --profile-image-size: 6.5vh;
    --toggle-width: 36px;
    --toggle-height: 20px;
    --toggle-button-size: 16px;
}

.dark_mode {
    /* DARK */
    --mode-text: 'DARK';
    /* login */
    --color-login-select: #29384d;
    --color-login-btn: #576270;
    --color-login-btn-hover: #3f4c5b;
    --color-login-bg: rgba(128, 128, 128, 0.1);
    --color-login-form-bg: #ffffff;
    /* main layout - home */
    --color-main-select: #29384d;
    --color-main-btn: #ffffff;
    --color-main-btn-hover: #b5b5b5;
    --color-main-bg: rgba(128, 128, 128, 0.1);
    --color-other-font-menu: #ffff00;
    /* sidebar for LIC/LRC */
    --sidebar-bg-color: #dbdcdd;
    --sidebar-bg-color-hover: #67737f;
    --sidebar-font-color: #000000;
    --sidebar-font-color-hover: #ffffff;
    --sidebar-font-logo-color: #29384d;
    --sidebar-font-logo-color-hover: #ffffff;
    --sidebar-toggle-btn-color: #29384d;
    --sidebar-toggle-btn-color-hover: #ffffff;
    --sidebar-toggle-btn-bg-color: #ffffff;
    --sidebar-toggle-btn-bg-color-hover: #29384d;
    --sidebar-toggle-btn-border-color: #ffffff;
    --sidebar-toggle-btn-border-color-hover: #29384d;
    /* setup input for LIC/LRC */
    --label-font-color: #000000;
    --label-font-logo-color: #29384d;
    --form-btn-font-color: #000000;
    --form-btn-font-color-hover: #ffffff;
    --form-btn-font-logo-color: #29384d;
    --form-btn-font-logo-color-hover: #ffffff;
    --form-btn-bg-color: #dbdcdd;
    --form-btn-bg-color-hover: #3f4c5b;
    --input-font-color: #000000;
    --input-bg-color: #ffffff;
    --input-border-color: rgba(230, 230, 230, 1);
    --input-font-focus-color: #ffffff;
    --input-bg-focus-color: #576270;
    --input-border-focus-color: #dbdcdd;
    /* tables */
    --table-th-bg-color: #3f4c5b;
    --table-th-font-color: #ffffff;
    --table-td-bg-even-color: #efefef;
    --table-td-bg-odd-color: #ffffff;
    --table-td-font-color: #000000;
    --table-btn-bg-color: #dbdcdd;
    --table-btn-bg-color-hover: #3f4c5b;
    --table-btn-font-color: #29384d;
    --table-btn-font-color-hover: #ffffff;
    /* tab show tables */
    --tab-show-bg-color: #dbdcdd;
    --tab-show-bg-color-hover: #3f4c5b;
    --tab-show-font-color: rgb(112, 112, 112);
    --tab-show-font-color-hover: #ffffff;
    /* download */
    --download-box-body-bg-color: #f8f8f8;
    --download-box-header-bg-color: #3f4c5b;
    --download-box-header-font-color: #ffffff;
    --download-btn-bg-color: #dbdcdd;
    --download-btn-bg-color-hover: #576270;
    --download-btn-font-color: #000000;
    --download-btn-font-color-hover: #ffffff;
    --download-btn-font-logo-color: #29384d;
    --download-btn-font-logo-color-hover: #ffffff;
    --download-btn-all-bg-color: #1d2e3d;
    --download-btn-all-bg-color-hover: #29384d;
    --download-btn-all-font-color: #ffffff;
    --download-btn-all-font-color-hover: #ffffff;
    --download-btn-all-font-logo-color: #ffffff;
    --download-btn-all-font-logo-color-hover: #ffffff;
    /* change password and reset password */
    --password-form-header-bg-color: #3f4c5b;
    --password-form-header-font-color: #ffffff;
    --password-form-btn-bg-color: #f0f5fd;
    --password-form-btn-bg-color-hover: #3f4c5b;
    --password-form-btn-font-color: #000000;
    --password-form-btn-font-color-hover: #ffffff;
    --password-input-font-color: #000000;
    --password-input-bg-color: #ffffff;
    --password-input-border-color: rgba(230, 230, 230, 1);
    --password-input-font-focus-color: #ffffff;
    --password-input-bg-focus-color: #576270;
    --password-input-border-focus-color: #dbdcdd;

    /* -------------------------- New design ----------------------- */
    /* Setting icon */
    --color-menu-title: var(--primary-color-dark);
    --color-menu-icon: var(--primary-color-dark);

    /* Profile image */
    --color-profile-image-hover-outline: #6f7d98;

    /* Admin Role Colors */
    --color-admin-bg: #f2f2f2;
    --color-admin-text: #3f506f;
    --color-admin-hover-bg: #e1e0e0;
    --color-admin-hover-text: #3f506f;

    /* Company Dropdown Colors */
    --color-company-dropdown-bg: #f2f2f2;
    --color-company-dropdown-text: #29384d;
    --color-company-dropdown-icon: #29384d;
    --color-company-dropdown-ribbon: #29384d;
}

/* * {
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear;
} */

.div_change_mode {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
}

#mode_checkbox {
    width: 0rem;
    height: 0rem;
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.label_change_mode {
    width: calc(var(--icon-width) + var(--text-width) + var(--icon-margin));
    height: calc(var(--icon-width) + (var(--icon-margin) * 2));
    background-color: var(--color-main-select);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border-radius: var(--icon-width);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-mode-delay) linear;
}

#div_mode_icon {
    width: var(--icon-width);
    height: var(--icon-width);
    border-radius: var(--icon-width);
    display: flex;
    align-items: center;
    margin: var(--icon-margin);
    padding: 0.7rem;
    background-color: white;
    color: var(--color-main-select);
    position: absolute;
    top: 0;
    transition: all var(--transition-mode-delay) linear;
    font-size: 1rem;
}

#div_mode_text::before {
    content: var(--mode-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: bolder;
    transition: all var(--transition-mode-delay) linear;
}

#div_mode_text {
    width: var(--text-width);
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    position: absolute;
    top: 0;
    transition: all var(--transition-mode-delay) linear;
}

.mode_left,
#div_mode_text.mode_left::before {
    justify-content: left;
    left: 0;
}

.mode_right,
#div_mode_text.mode_right::before {
    justify-content: right;
    right: 0;
}

#div_mode_text.translate_to_right {
    justify-content: right;
    transform: translateX(calc(var(--icon-width) + (var(--icon-margin) * 2)));
}

#div_mode_text.translate_to_left {
    justify-content: left;
    transform: translateX(calc((-1) * (var(--icon-width) + (var(--icon-margin) * 2))));
}

#div_mode_icon.translate_to_right {
    justify-content: right;
    transform: translateX(calc(var(--text-width) - var(--icon-margin)));
}

#div_mode_icon.translate_to_left {
    justify-content: left;
    transform: translateX(calc((-1) * (var(--text-width) - var(--icon-margin))));
}

#div_mode_text.translate_to_right::before {
    justify-content: right;
}

#div_mode_text.translate_to_left::before {
    justify-content: left;
}

.div_change_mode:hover #div_mode_icon {
    width: calc(var(--icon-width) + var(--icon-width-scale));
}

.div_change_mode:hover #div_mode_text {
    width: calc(var(--text-width) - var(--icon-width-scale));
}

.div_change_mode:hover #div_mode_text.translate_to_right {
    transform: translateX(calc((var(--icon-width) + (var(--icon-margin) * 2) + var(--icon-width-scale))));
}

.div_change_mode:hover #div_mode_text.translate_to_left {
    transform: translateX(calc((-1) * (var(--icon-width) + (var(--icon-margin) * 2) + var(--icon-width-scale))));
}

.div_change_mode:hover #div_mode_icon.translate_to_right {
    transform: translateX(calc((var(--text-width) - var(--icon-margin) - var(--icon-width-scale))));
}

.div_change_mode:hover #div_mode_icon.translate_to_left {
    transform: translateX(calc((-1) * (var(--text-width) - var(--icon-margin) - var(--icon-width-scale))));
}