:root {
    /*colors*/
    --color-primary: #013B92;
    --color-primary-subtle: #BBD6FF;
    --color-primary-border: #70A4F2;
    --color-secondary: #6C757D;
    --color-secondary-subtle: #C9CCCF;
    --color-secondary-border: #9CA0A4;
    --color-success: #004D00;
    --color-success-subtle: #B9E7BF;
    --color-success-border: #83C58C;
    --color-info: #0DCAF0;
    --color-info-subtle: #B2EEFA;
    --color-info-border: #70D1E4;
    --color-danger: #841017;
    --color-danger-subtle: #F6CBCF;
    --color-danger-border: #E28790;
    --color-warning: #FFC107;
    --color-warning-subtle: #FFEDB6;
    --color-warning-border: #F0D06D;
    --color-light: #F8F9FA;
    --color-light-subtle: #FEFEFE;
    --color-light-border: #D2D2D2;
    --color-dark: #000000;
    --color-dark-subtle: #585858;
    --color-dark-border: #353535;
    --bl-yellow: #FFBA08;
    --bl-green: #0F4C5C;
    --bl-dark-gray: #343A40;
    --bl-purple: #6200EE;
    /*colors*/
    /*Layout*/
    --top-bar-color: #FFBA08;
    --top-bar-color-text: #000000;
    --side-bar-color: #0F4C5C;
    --side-bar-color-icon: #00F5D4;
    --side-bar-clor-active: #296676;
    --top-bar-height: 50px;
    --top-bar-height-mobile: 50px;
    --side-bar-width: 150px;
    --side-bar-width-mobile: 100vw;
    /*Layout*/
}

/**********************************/
/*        BREAKPOINTS             */
/**********************************/
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}