:root {
    --raspberry: #be1e5d;
    --orange-brown: #db754a;
    --orange: #ff9854;
    --orange-transparent: #ff985444;
    --orange-yellow: #ff9854;
    --azure-blue: #4d8aff;
    --dark: #1d1d1b;
    --gray-dark: #343a40;
    --anthracite: #343a40;
    --gray: #888888;
    --gray-light: #bbbbbb;
    --gray-lighter: #dddddd;
    --pantone-red: #e71d36;
    --color-dark1: var(--orange-brown);
    --color-dark2: var(--raspberry);
    --color-light1: var(--orange);
    --color-light2: var(--orange-yellow);
    --color-active: var(--azure-blue);
    --color-inactive: var(--pantone-red);
}

.btn-outline-azure-blue {
    color: var(--azure-blue);
    background-color: inherit;
    border: none;
}

    .btn-outline-azure-blue.active {
        background-color: var(--azure-blue);
        color: white;
        border-color: var(--azure-blue);
        border-width: 1px;
    }

.btn-outline-raspberry {
    color: var(--raspberry);
    background-color: inherit;
    border: none;
}

    .btn-outline-raspberry.active {
        background-color: var(--raspberry);
        color: white;
        border-color: var(--raspberry);
        border-width: 1px;
    }

.btn-outline-orange-brown {
    color: var(--orange-brown);
    background-color: inherit;
    border: none;
}

    .btn-outline-orange-brown.active {
        background-color: var(--orange-brown);
        color: white;
        border-color: var(--orange-brown);
        border-width: 1px;
    }

.cl-raspberry {
    color: var(--raspberry);
}

.bg-raspberry {
    background-color: var(--raspberry);
}

.cl-orange-brown {
    color: var(--orange-brown);
}

.bg-orange-brown {
    background-color: var(--orange-brown);
}

.cl-orange {
    color: var(--orange);
}

.bg-orange {
    background-color: var(--orange);
}

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

.cl-azure-blue {
    color: var(--azure-blue);
}

.bg-azure-blue {
    background-color: var(--azure-blue);
}

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

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

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

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

.cl-anthracite {
    color: var(--anthracite);
}

.bg-anthracite {
    background-color: var(--anthracite);
}

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

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

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

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

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

.bg-dark1 {
    background-color: var(--color-dark1);
}

.bg-dark2 {
    background-color: var(--color-dark2);
}

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

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

.bg-danger-light {
    background-color: #f8d7da;
}

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

.ua {
    color: white !important;
    background-color: var(--azure-blue) !important;
}

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

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

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

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

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

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

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

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

.color-active {
    color: #4d8aff !important;
}

.color-inactive {
    color: #dc3545 !important;
}