:root {
    --primary-light-cst: #7c5fff;
    --primary2-cst: #7c5fb363;
    --primary-cst: #7c5fb3;
    --primary-dark-cst: #22045a;
    --white-cst: #FFFFFF;
    --white-bg-cst: #ffffffba;
    --greyLight-1-cst: #eef4fa;
    --greyLight-2-cst: #c8d0e7;
    --greyLight-3-cst: #bec8e4;
    --greyDark-cst: #4f6077ad;
    --greyDark2-cst:rgba(20, 20, 20, 0.678);

    --font-color: var(--greyDark2-cst);
    --font-color-hover: var(--primary-cst);
    --font-color-active: var(--primary-dark-cst);

    --primary: var(--primary-cst);
    --danger: #b35f5f;
    --info: #5f7cb3;
    --success: #6db35f;


    --sidebar-sice      : 200px;
    --sidebar-right-sice: var(--sidebar-sice);

    --inferior-height   : 48px;
    --navbar-superior-height:55px;

    --width-sidebar-monitoring: 170px;
    --width-content-monitoring: 84%;

    --border-radius-xlg: 25px;
    --border-radius-lg: 15px;
    --border-radius-md: 10px;
    --border-radius-sm: 5px;
    --borderWidth: 3px;

    --transition-time: 0.3s;

    --shadow-normal: 0.5rem 0.35em 0.6rem var(--greyLight-2-cst), -0.2rem -0.2rem 0.5rem var(--white-cst);
    --shadow-normal-right: -0.7rem 0.3rem 0.6rem var(--greyLight-2-cst), -0.2rem -0.2rem 0.5rem var(--white-cst);
    --shadow-hover: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2-cst), inset -0.2rem -0.2rem 0.5rem var(--white-cst);
    --shadow-active: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2-cst), inset -0.2rem -0.2rem 0.5rem var(--white-cst);
    --shadow-btn    : inset 0.2rem 0.2rem 1rem var(--primary-dark-cst), inset -0.2rem -0.2rem 1rem var(--primary-light-cst);
    --shadow-disabled: -0.7rem 0.3rem 0.6rem #c8d0e7ab, -0.2rem -0.2rem 0.5rem var(--white-cst);
    --shadow-strong: -5px -4px 7.5px rgba(255,255,255,.7),5px 5px 5px rgba(0,0,0, .3),inset 4px 4px 7.5px rgba(255,255,255,.05),inset 5px 5px 5px rgba(0,0,0, .04);
    --shadow-card: 0px 0px 10px var(--greyLight-3-cst);
}

@font-face {
    font-family: 'Iconic Light';
    src: url('../../fonts/iconic/Iconic-Light-trial.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Iconic Regular';
    src: url('../../fonts/iconic/Iconic-Regular-trial.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}