:root {
    /* #region vb colors */
    --vb_darkblue-color: #006E96; /* theme color */
    --vb_lightblue-color: #00ACD8;
    --vb_darkgreen-color: #53C072; /* accent color */
    --vb_lightgreen-color: #93D500;
    /* #endregion */

    /* #region app colors */
    --kc-color: rgb(150, 140, 225); /* KwaliteitsControle */
    --lf-color: rgb(70, 140, 195); /* LogistiekeFlow */
    --os-color: rgb(125, 185, 90); /* OrderStatus */
    --ur-color: rgb(220, 155, 105); /* UrenRegistratie */
    --wi-color: rgb(160, 100, 85); /* WerkplekInspectie */

    --bp-color: rgb(245, 170, 240); /* BeheerderPortaal */
    --sb-color: rgb(55, 130, 45); /* SoundBoard */
    /* #endregion */

    /* #region bv colors */
    --cli-color: rgb(50, 50, 245); /* Climate */    
    --geo-color: rgb(195, 45, 75); /* Geo-Projects */ 
    --gre-color: rgb(70, 160, 110); /* Greenhouses */ 
    --grp-color: rgb(230, 200, 40); /* Greenhouse Projects */
    --hor-color: rgb(35, 225, 35); /* Horti */
    --pro-color: rgb(235, 150, 45); /* Projects */
    /* #endregion */

    /* #region general colors */
    --white-color: #ffffff;
    --black-color: #303030;

    --white_gray-color: #EEEEEE;
    --lightest_gray-color: #E0E0E0;
    --lighter_gray-color: #D0D0D0;
    --light_gray-color: #B8B8B8;
    --gray-color: #A0A0A0;
    --dark_gray-color: #808080;
    --darker_gray-color: #686868;
    --darkest_gray-color: #484848;

    --blue-color: rgb(30, 145, 255);
    --green-color: rgb(85, 175, 125);
    --orange-color: rgb(240, 180, 75);
    --red-color: rgb(250, 128, 114);
    /* #endregion */

    /* #region modal colors */
    --modal_background-color: rgba(0, 0, 0, 0.625);
    /* #endregion */
}

/* #region app colors */
.kc-c {
    color: var(--kc-color);
}

.kc-bc {
    background-color: var(--kc-color);
}

.lf-c {
    color: var(--lf-color);
}

.lf-bc {
    background-color: var(--lf-color);
}

.os-c {
    color: var(--os-color);
}

.os-bc {
    background-color: var(--os-color);
}

.ur-c {
    color: var(--ur-color);
}

.ur-bc {
    background-color: var(--ur-color);
}

.wi-c {
    color: var(--wi-color);
}

.wi-bc {
    background-color: var(--wi-color);
}
/* #endregion */

/* #region bv colors */
.cli-c {
    color: var(--cli-color);
}

.cli-bc {
    background-color: var(--cli-color);
}

.geo-c {
    color: var(--geo-color);
}

.geo-bc {
    background-color: var(--geo-color);
}

.gre-c {
    color: var(--gre-color);
}

.gre-bc {
    background-color: var(--gre-color);
}

.grp-c {
    color: var(--grp-color);
}

.grp-bc {
    background-color: var(--grp-color);
}

.hor-c {
    color: var(--hor-color);
}

.hor-bc {
    background-color: var(--hor-color);
}

.pro-c {
    color: var(--pro-color);
}

.pro-bc {
    background-color: var(--pro-color);
}
/* #endregion */