/* =================================== */
/* ============== FARBEN ============== */
/* =================================== */

:root{
    --color-white: #ffffff;
    --color-black: #17171C;
    --color-light-black: #1F1F24;
    --color-dark-gray: #363538;
    --color-light-gray: #707070;
    --color-bright-gray: #E3E3E8;
    --color-etp: #69C088;
    --color-product-stock-up: #69C088;
    --color-product-stock-down: #D84239;
    --color-yellow-etp: #B3A96A;
    --color-red-products: #D84239;
    --color-purple-products: #9039d8;
    --color-etp-background1: #2A2A2E;
    --color-dark: #000;
    --color-magenta: #FA176E;
}

.color-white{
    color: var(--color-white) !important;
}

.background-white{
    background-color: var(--color-white);
}

.color-black{
    color: var(--color-black);
}

.background-black{
    background-color: var(--color-black);
}

.color-dark{
    color: var(--color-dark);
}

.background-dark{
    background-color: var(--color-dark);
}

.color-light-black{
    color: var(--color-light-black);
}

.background-light-black{
    background-color: var(--color-light-black);
}

.color-dark-gray{
    color: var(--color-dark-gray);
}

.background-dark-gray{
    background-color: var(--color-dark-gray);
}

.color-light-gray{
    color: var(--color-light-gray);
}

.background-light-gray{
    background-color: var(--color-light-gray);
}

.color-bright-gray{
    color: var(--color-bright-gray);
}

.background-bright-gray{
    background-color: var(--color-bright-gray);
}

.gray-hover:hover{
    background-color: var(--color-bright-gray);
}

.black-hover:hover{
    background-color: var(--color-black);
}

.green-hover:hover{
    background-color: #52ef37;
}

.blue-hover:hover{
    background-color: #15b7ff;
}

.magenta-hover:hover{
    background-color: #F9166D;
}

.black-hover:hover img, 
.blue-hover:hover img, 
.magenta-hover:hover img, 
.green-hover:hover img{
    filter: invert(1);
}

.black-hover:hover p, 
.blue-hover:hover p, 
.magenta-hover:hover p, 
.green-hover:hover p{
    color: var(--color-white);
}

::selection {
    color: #fff;
    background: #F9166D;
}

.color-etp{
    color: var(--color-etp);
}

.background-etp{
    background-color: var(--color-etp);
}

.color-red-products{
    color: var(--color-red-products);
}

.background-red-products{
    background-color: var(--color-red-products);
}

.color-purple-products{
    color: var(--color-purple-products);
}

.background-purple-products{
    background-color: var(--color-purple-products);
}

.color-yellow-etp{
    color: var(--color-yellow-etp);
}

.background-yellow-etp{
    background-color: var(--color-yellow-etp);
}

.color-etp-background1{
    color: var(--color-etp-background1);
}

.background-etp-background1{
    background-color: var(--color-etp-background1);
}

.color-magenta{
    color: var(--color-magenta);
}

.background-magenta{
    background-color: var(--color-magenta);
}