/* ***************************************************************** */
/* *                         PROJECT FONTS                         * */

    /* Poppins */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    /* Source Code Pro [ monospace ] */
    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;600;700&display=swap');

/* ***************************************************************** */


:root
{
    /* ***************************************************************** */
    /* *                         GLOBAL COLORS                         * */

        --ui-color-brand: #00608C;
        --ui-color-brand-light: #11719D;
        --ui-color-brand-dark: #00507B;

        --ui-color-primary: #1783B5;
        --ui-color-primary-light: #2894C6;
        --ui-color-primary-dark: #0672A4;

        --ui-color-secondary: #E1E1EF;
        --ui-color-secondary-light: #F2F2FF;
        --ui-color-secondary-dark: #C0C0DD;


        /* * STATUS COLORS * */
        --ui-color-info: #5578eb;
        --ui-color-info-light: #6689FC;
        --ui-color-info-dark: #4467DA;

        --ui-color-success: #1dc9b7;
        --ui-color-success-light: #2EDAC8;
        --ui-color-success-dark: #0CB8A6;

        --ui-color-warning: #ffb822;
        --ui-color-warning-light: #ffC933;
        --ui-color-warning-dark: #EEA711;

        --ui-color-danger: #fd397a;
        --ui-color-danger-light: #FE4A8B;
        --ui-color-danger-dark: #EC2869;
        

        /* * BASIC COLORS * */
        --ui-color-red: #dc3545;
        --ui-color-red-light: #ED4656;
        --ui-color-red-dark: #CB2434;

        --ui-color-green: #28A745;
        --ui-color-green-light: #39B856;
        --ui-color-green-dark: #179634;

        --ui-color-blue: #007bff;
        --ui-color-blue-light: #118CFF;
        --ui-color-blue-dark: #006AEE;

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                         BODY & FRAMES                         * */
    
        --ui-body-background-color: #F2F4F8;

        --ui-frame-background-color: #00374D;
        --ui-frame-overlay-color: #223344;
        --ui-frame-overlay-opacity: 0.7;

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                           PORTLETS                            * */

        --ui-portlet-head-color: #FBFBFB;
        --ui-portlet-head-border: 1px solid #EBEDF2;
        --ui-portlet-body-color: #FFFFFF;

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                        TEXTS & FONTS                          * */

        --ui-font-1: 'Comfortaa', sans-serif;
        --ui-font-monospace: 'Source Code Pro', monospace;
    
        --ui-text-color-1: #74788D;
        --ui-text-color-2: #646C9A;
        --ui-text-color-3: #595D6E;
        --ui-text-color-4: #48465B;

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                            FORMS                              * */

        --ui-form-label-color: #7F98A4;

        --ui-form-input-color: #FFFFFF;
        --ui-form-input-border: #E2E5EC;
        --ui-form-input-text: #495057;
        --ui-form-input-placeholder: #74788D;

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                          SCROLLBARS                           * */

        --ui-scrollbar-width: 10px;
        --ui-scrollbar-radius: 0px;

        --ui-scrollbar-track-color: #136685;
        --ui-scrollbar-track-hover-color: #136685;
        --ui-scrollbar-thumb-color: #022330;
        --ui-scrollbar-thumb-hover-color: #022330;

        /* TODO: Customize the JS (perfect) scrollbars as well */

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                             HEADER                            * */
        
        --ui-header-color: var(--ui-color-brand);
        --ui-header-text-color: 255,255,255;
        --ui-header-toggler-color: 255,255,255;

        --ui-header-button-color: var(--ui-color-brand-light);
        --ui-header-button-size: 40px;
        --ui-header-button-radius: 40px;
        --ui-header-button-icon-color: rgba(255,255,255,0.9);
        --ui-header-button-text-color: rgba(255,255,255,0.8);
        --ui-header-button-arrow-color: rgba(255,255,255,0.5);

        --ui-header-submenu-color: #FFF;
        --ui-header-submenu-item-icon-color: #cacad2;
        --ui-header-submenu-item-text-color: #5f6281;
        --ui-header-submenu-activeitem-color: #00608C10;
        --ui-header-submenu-activeitem-icon-color: var(--ui-color-brand-light);
        --ui-header-submenu-activeitem-text-color: var(--ui-color-brand-light);

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                           SUBHEADER                           * */

        --ui-header-fixed-color: #FFFFFF;
        --ui-header-fixed-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);

    /* ***************************************************************** */


    /* ***************************************************************** */
    /* *                             ASIDE                             * */

        --ui-aside-width: 270px;

        --ui-aside-color: #FFF;

        --ui-aside-toggler-color: 0,96,140;

        --ui-aside-group-text-color: #a1a8c3;

        --ui-aside-menu-item-icon-color: #00608C60;
        --ui-aside-menu-item-text-color: #414869;
        --ui-aside-menu-activeitem-color: #00608C10;
        --ui-aside-menu-activeitem-icon-color: var(--ui-color-brand-light);
        --ui-aside-menu-activeitem-text-color: var(--ui-color-brand-light);

        --ui-aside-footer-color: #00608C10;
        --ui-aside-footer-item-icon-color: #00608C60;
        --ui-aside-footer-activeitem-color: #00608C10;
        --ui-aside-footer-activeitem-icon-color: var(--ui-color-brand-light);

    /* ***************************************************************** */
}