:root {
    --bg-color: #ECF0F1;
    --bg-color-light: color( var(--bg-color) lightness(+4%));
    --bg-color-dark: color( var(--bg-color) lightness(-5%));

    --color: #333;
    --color-light: color( var(--color) lightness(+18%));
    --color-dark: color( var(--color) lightness(-5%));

    --sidebar-bg-color: #EEE;


    --shadow-color: rgba(0,0,0,0.19);
    --shadow-color-light: rgba(0,0,0,0.06);
    --shadow-color-dark: rgba(0,0,0,0.35);

    --highlight-color: rgba(255,255,255,0.19);
    --highlight-color-light: rgba(255,255,255,0.06);
    --highlight-color-dark: rgba(255,255,255,0.35);


    --gray-color: #e7e7e7;
    --gray-color-light: color( var(--gray-color) lightness(+4%));
    --gray-color-dark: color( var(--gray-color) lightness(-18%));

    --theme-color: #1f89dd;
    --theme-color-light: color( var(--theme-color) lightness(+4%));
    --theme-color-dark: color( var(--theme-color) lightness(-5%));
    
    --primary-color: var(--theme-color);
    --primary-color-light: color( var(--primary-color) lightness(+4%));
    --primary-color-dark: color( var(--primary-color) lightness(-5%));

    --danger-color: #e90f0f;
    --danger-color-light: color( var(--danger-color) lightness(+4%));
    --danger-color-dark: color( var(--danger-color) lightness(-5%));
    
    --warning-color: #ffaa00;
    --warning-color-light: color( var(--warning-color) lightness(+4%));
    --warning-color-dark: color( var(--warning-color) lightness(-5%));

    --success-color: #13c10c;
    --success-color-light: color( var(--success-color) lightness(+4%));
    --success-color-dark: color( var(--success-color) lightness(-5%));

    --default-color: var(--gray-color);
    --default-color-light: color( var(--default-color) lightness(+4%));
    --default-color-dark: color( var(--default-color) lightness(-5%));

    --outline: {
        outline: none;
        box-shadow: 0 0 2px 1px color( var(--theme-color) a(40%));
        border-color: var(--theme-color);
    }
    --danger-outline: {
        outline: none;
        box-shadow: 0 0 2px 1px color( var(--danger-color) a(40%));
        border-color: var(--danger-color);
    }

    --nowrap: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    --padding: 15px;
    --padding-small: 11px;
    --padding-large: 25px;
}

@custom-media --xs (width >= 0);
@custom-media --only-xs (width >= 0) and (width < 480px);
@custom-media --sm (width >= 480px);
@custom-media --only-sm (width > 480px) and (width < 768px);
@custom-media --md (width >= 768px);
@custom-media --only-md (width > 768px) and (width < 992px);
@custom-media --lg (width >= 992px);
@custom-media --only-lg (width > 992px) and (width < 1200px);
@custom-media --xl (width >= 1200px);
@custom-media --only-xl (width >= 1200px);