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

    /* Nunito */
    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;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: #67C3B7;
        --ui-color-brand-light: #78D4C8;
        --ui-color-brand-dark: #56B2A6;

        --ui-color-primary: #67C3B7;
        --ui-color-primary-light: #78D4C8;
        --ui-color-primary-dark: #56B2A6;

        --ui-color-secondary: #013D67;
        --ui-color-secondary-light: #124E78;
        --ui-color-secondary-dark: #002C56;

        --ui-color-map: #C0D8EA;


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

        --ui-color-button-text: #042B47;

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


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

        --ui-frame-background-color: #011320;
        --ui-frame-overlay-color: #042B47;
        --ui-frame-overlay-opacity: 0.90;
        --ui-frame-header-color: #001C30;

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


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

        --ui-portlet-head-color: transparent;
        --ui-portlet-head-border: 1px solid transparent;
        --ui-portlet-body-color: transparent;

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


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

        --ui-font-1: 'Nunito', sans-serif;
        --ui-font-monospace: 'Source Code Pro', monospace;
    
        --ui-text-color-1: #C0D8EA;
        --ui-text-color-2: #787d99;
        --ui-text-color-3: #595D6E;
        --ui-text-color-4: #48465B;
        --ui-text-color-5: #85A8C2;


        --ui-status-color-1: #729C17;
        --ui-status-color-2: #B08E32;
        --ui-status-color-3: #B05832;

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


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

        --ui-form-label-color: #67C3B7;

        --ui-form-input-color: #013D67;
        --ui-form-input-border: #013D67;
        --ui-form-input-text: #C0D8EA;
        --ui-form-input-placeholder: #C0D8EA;

        --ui-form-input-option-color: #075894;

        --ui-form-input-append-color: transparent;
        --ui-form-input-append-border: transparent;
        --ui-form-input-append-text: #5F8099;
        --ui-form-input-append-radius: 20px;

        --ui-form-active-input-color: #014370;
        --ui-form-active-input-color-subheader: #053456;
        --ui-form-active-input-border: #014370;


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


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

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

        --ui-scrollbar-track-color: #001C30;
        --ui-scrollbar-track-hover-color: #112D41;
        --ui-scrollbar-thumb-color: var(--ui-color-brand);
        --ui-scrollbar-thumb-hover-color: var(--ui-color-brand-light);

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

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


    /* ***************************************************************** */
    /* *                             HEADER                            * */

        --ui-header-access-height: 0px;
        --ui-header-access-active-height: 35px;
        
        --ui-header-height: 75px;
        --ui-header-padding: 75px;
        
        --ui-header-color: #042B47;
        --ui-header-text-color: 255,255,255;
        --ui-header-toggler-color: 255,255,255;

        --ui-header-button-color: #013D67;
        --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: #042B47;
        --ui-header-submenu-item-icon-color: #C0D8EA;
        --ui-header-submenu-item-text-color: #C0D8EA;
        --ui-header-submenu-activeitem-color: #013D67;
        --ui-header-submenu-activeitem-icon-color: #C0D8EA;
        --ui-header-submenu-activeitem-text-color: #C0D8EA;

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


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

        --ui-subheader-color: #042B47;

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

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


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

        --ui-aside-width: 320px;

        --ui-aside-color: #001C30;

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

        --ui-aside-group-text-color: #5F8099;

        --ui-aside-menu-item-icon-color: #C0D8EA;
        --ui-aside-menu-item-text-color: #C0D8EA;
        --ui-aside-menu-activeitem-color: #013D67;
        --ui-aside-menu-activeitem-icon-color: #C0D8EA;
        --ui-aside-menu-activeitem-text-color: #C0D8EA;

        --ui-aside-submenu-activeitem-color: #013D6770;

        --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);

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


    /* ***************************************************************** */
    /* *                             FOOTER                            * */
    
        --ui-footer-color: #001C30;

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