:root {
    /* Common Variables */
    --primary-color: #3e487b;
    --secondary-color: #797f93;
    --primary-border: #e4e4e4;
    --secondary-border: #e8e8e8;
    --primary-bg: #fbfbfb;
    --secondary-bg: #f9f9f9;
    --lightblue-bg: #f6f8f9;
    --white: #ffffff;
    --black: #000000;
    --light-gray: #d9d9d9;
    --medium-gray: #b8b8b8;
    --dark-gray: #f1f1f1;

    /* Form Control Variables */
    --input-form-required-color: #ff0000;
    --input-form-disabled-bg: #d4d4d4;
    --input-placeholder: #999999;
    --input-form-label-color: #999999;
    --input-form-value-color: #000000;
    --view-form-label-color: #969696;
    --view-form-value-color: #3e487b;

    /* Buttons Variables */
    --btn-primary-bg: #e8fdff;
    --btn-primary-text-color: #3e487b;
    --btn-secondary-bg: #565d75;
    --btn-secondary-text-color: #ffffff;
    --btn-light-bg: #EEEEEE;
    --btn-light-text-color: #595959;
    --btn-disabled-bg: #bfbfbf;

    /* Sidebar Menus Variables */
    --sidebar-bg: #f1f1f1;
    --sidebar-node1-color: #3e487b;
    --sidebar-node2-color: #797f93;
    --sidebar-icon-color: #3e487b;
    --sidebar-arrow-icon-color: #cdcfda;
    --sidebar-node1-hover-color: #1a26d1;
    --sidebar-node1-hover-bg: #e7e7ef;
    --sidebar-node2-hover-color: #1a26d1;
    --sidebar-node2-hover-bg: #e7e7ef;
    --sidebar-node1-active-color: #3e487b;
    --sidebar-node2-active-color: #797f93;
    --sibebar-hr-color: #cdcfda;

    /* Data Grid Variables */
    --data-grid-head-bg: #565D75;
    --data-grid-head-text: #ffffff;
    --data-grid-bg: #f3f3f3;
    --data-grid-border: #ffffff;
    --data-grid-filter-row-bg: #ffffff;
    --data-grid-odd-row-bg: #f3f3f3;
    --data-grid-even-row-bg: #f9f9f9;
    --data-grid-seleted-row-bg: #e9ebf5;
    --data-grid-text-color: #3e487b;
    --data-grid-filter-icon-color: #ffffff;
    --pagination-text: #3e487b;
    --pagination-active: #e8fdff;
    --pagination-active-text: #3e487b;

    /* Data Grid Without Background */
    --data-grid-wb-border: #dddddd;
    --data-grid-heading-wb-text: #0d1224;
    --data-grid-wb-data: #6f7074;

    /* Bootstrap Table Variables */
    --table-head-bg: #5b5b5b;

    /* Swiper Slider Variables */
    --swiper-arrow-next: #6e717c;
    --swiper-arrow-prev: #b7b8be;

    /* Alert Variables */
    --alert-bg: #3e487b;
    --success: #4CAF50;
    --error: #f44336;
    --warning: #ffeb3b;
    --alert-text: #fcffff;

    /* Modal Variables */
    --period-selector-border: #37333780;

    /* Search Page */
    --navlink-selected-bg: #00a8df;
    --navlink-selected-color: #797f93;
    --navlink-hover-color: #1a26d1;
    --shortcuts-border-color: #a7c2c4;
    --shortcuts-hover-bg: #ffffff;
    --shortcuts-hover-color: #3e487b;
    --search-dropdwon-border-color: #ffffff;
    --search-dropdown-bg: #ffffff;
    --search-tab-border-color: #ffffff;

    /* Chat Icon */
    --chat-icon-bg: #e8fdff;
    --chat-icon-hover-bg: #e8fdff;
    --chat-icon-color: #3e487b;
    --chat-icon-hover-color: #3e487b;
    --landing-chat-icon-bg: #ffffff;
    --landing-chat-icon-hover-bg: #ffffff;
    --landing-chat-icon-color: #3e487b;
    --landing-chat-icon-hover-color: #3e487b;

    /* Hyper links */
    --hyperlink-color: #3e487b;
    --hyperlink-hover-color: #364BA0;

    /* Notification Icon */
    --notification-icon-bg: #e8fdff;

    /* Top Nav Search */
    --top-searchbar-border: #e8fdff;
    --top-searchbar-icon: #e8fdff;

    /* Landing Search */
    --header-action-icon-color: #3e487b;
    --landing-search-bg: #e8fdff;
    --landing-search-logo-bg: transparent;
    --landing-search-text-color: #3e487b;

    /* QuickView */
    --quickview-body-bg: #f1f2f4;

    /* Favorit Reports */
    --report-hr-color: #a7c2c4;
    --report-subtitle-color: #717171;
    --report-card-bg: #e1f7f9;
    --report-card-hover-bg: #dcf7f9;
    --fav-swiper-arrow-color: #c4dadc;
    --fav-swiper-arrow-hover-color: #aec2c4;

    /* Breadcrumb */
    --page-title-color: #3e487b;
    --page-title-back-arrow-color: #787fa3;
    --section-title-node2-color: #e8fdff;
    --filter-colose-btn-bg: #D3D6DE;

    /* All Detail View */
    --section-title-color: #616880;
    --sidebar-detail-menu-bg: #f5f7f8;
    --sidebar-detail-menu-title-color: #474747;
    --sidebar-detail-menu-text-color: #3e487b;
    --siedbar-detail-menu-text-hover-color: #616991;
    --sidebar-detail-menu-text-active-color: #3e487b;
    --sidebar-detail-menu-text-active-bg: #d9dbe7;
    --sidebar-detail-menu-node-hr-color: #ffffff; 
    --total-column-bg: #EAEDF7;

    /*Action Sidebar */
    --action-sidebar-bg: #565D75;
    --action-sidebar-text-color: #ffffff;
    --action-sidebar-header-bg: #62687E;
    --action-sidebar-navlink-text-color: #9195a4;
    --action-sidebar-navlink-active-text-color: #ffffff;
    --action-sidebar-hr-color: #ededed;
    --action-sidebar-box-shadow: #D2D2D240;

    /* BI Report */
    --bireport-card-border-color: #D3D9EB;
    --bireport-title-color: #41485D;
    --bireport-subtitle-color: #BABDDC;
    --bireport-hr-color: #EDEDED;
    --bireport-tag-bg: #565D75;
    --bireport-tag-text-color: #ffffff;
    --bireport-fav-icon-color: #e8fdff;
    --bireport-hover-bg: #616880;
    --bireport-hover-text-color: #ffffff;
    --bireport-hover-tag-bg: #767D96;
    --bireport-hover-hr-color: #9CA1B3;
    --bireport-swiper-button-color: #969696;
    --list-grid-active-color: #BBBFD1;

    /* Historical */
    --date-tag-bg: #e8fdff;
    --date-tag-text-color: #ffffff;
    --ticket-title-text-color: #565D75;
    --history-border-color: #DEE0EA;
    --custom-scroll-bg: #EAEDF9;
    --custom-scroll-thumb-bg: #C0C4D2;

    /* Error */
    --error-text-color: #e8fdff;
 
}