:root {
    /*bg colors*/
    --primary-bg: rgb(26, 30, 81);
    --Primary-light-bg: rgb(0, 41, 160);
    --Primary-lighter-bg: rgb(106, 161, 255);
    --secundary-bg: rgb(255, 144, 107);
    --light-bg: rgb(220, 220, 220);
    --lighter-bg: rgb(255, 255, 255);
    /**/
    --alarm-color: rgb(253, 53, 100);
    --repetition-color: rgb(255, 144, 107);
    --diversion-color: rgb(255, 200, 66);
    --offsite-color: rgb(26, 30, 81);
    --onsite-color: rgb(24, 164, 164);

    --Primary: var(--Blue);
    --Primary_90: var(--Blue_90);
    --Primary_70: var(--Blue_70);
    --Primary_30: var(--Blue_30);
    --Primary_10: var(--Blue_10);

    --Secondary: var(--Purple);
    --Secondary_90: var(--Purple_90);
    --Secondary_70: var(--Purple_70);
    --Secondary_30: var(--Purple_30);
    --Secondary_10: var(--Purple_10);

    --Alarm: var(--Red);
    --Alarm_90: var(--Red_90);
    --Alarm_70: var(--Red_70);
    --Alarm_30: var(--Red_30);
    --Alarm_10: var(--Red_10);

    --Assistance: var(--Orange);
    --Assistance_90: var(--Orange_90);
    --Assistance_70: var(--Orange_70);
    --Assistance_30: var(--Orange_30);
    --Assistance_10: var(--Orange_10);

    --OnSite: var(--Green);
    --OnSite_90: var(--Green_90);
    --OnSite_70: var(--Green_70);
    --OnSite_30: var(--Green_30);
    --OnSite_10: var(--Green_10);

    --Offsite: var(--Blue);
    --Offsite_90: var(--Blue_90);
    --Offsite_70: var(--Blue_70);
    --Offsite_30: var(--Blue_30);
    --Offsite_10: var(--Blue_10);

    --Request: var(--Purple);
    --Request_90: var(--Purple_90);
    --Request_70: var(--Purple_70);
    --Request_30: var(--Purple_30);
    --Request_10: var(--Purple_10);

    --Repetition: var(--Orange);
    --Repetition_90: var(--Orange_90);
    --Repetition_70: var(--Orange_70);
    --Repetition_30: var(--Orange_30);
    --Repetition_10: var(--Orange_10);

    --Deviation: var(--Red);
    --Deviation_90: var(--Red_90);
    --Deviation_70: var(--Red_70);
    --Deviation_30: var(--Red_30);
    --Deviation_10: var(--Red_10);

    --OnSiteTimeout: var(--Yellow);
    --OnSiteTimeout_90: var(--Yellow_90);
    --OnSiteTimeout_70: var(--Yellow_70);
    --OnSiteTimeout_30: var(--Yellow_30);
    --OnSiteTimeout_10: var(--Yellow_10);

    --Info: var(--Blue);
    --Info_90: var(--Blue_90);
    --Info_70: var(--Blue_70);
    --Info_30: var(--Blue_30);
    --Info_10: var(--Blue_10);

    --Note: var(--Purple);
    --Note_90: var(--Purple_90);
    --Note_70: var(--Purple_70);
    --Note_30: var(--Purple_30);
    --Note_10: var(--Purple_10);

    --Danger: var(--Red);
    --Danger_90: var(--Red_90);
    --Danger_70: var(--Red_70);
    --Danger_30: var(--Red_30);
    --Danger_10: var(--Red_10);

    --Warning: var(--Yellow);
    --Warning_90: var(--Yellow_90);
    --Warning_70: var(--Yellow_70);
    --Warning_30: var(--Yellow_30);
    --Warning_10: var(--Yellow_10);

    --Success: var(--Green);
    --Success_90: var(--Green_90);
    --Success_70: var(--Green_70);
    --Success_30: var(--Green_30);
    --Success_10: var(--Green_10);

    --Blue: #1a1e51;
    --Blue_90: #0A0C21;
    --Blue_70: #151942;
    --Blue_30: #767997;
    --Blue_10: #D1D2DC;

    --Purple: #8529FB;
    --Purple_90: #501997;
    --Purple_70: #6B21C9;
    --Purple_30: #b67FFD;
    --Purple_10: #E7D4FE;

    --Green: #03AD17;
    --Green_90: #02680E;
    --Green_70: #028A12;
    --Green_30: #68CE74;
    --Green_10: #CDEFD1;

    --Red: #C60808;
    --Red_90: #770505;
    --Red_70: #9E0606;
    --Red_30: #DD6B6B;
    --Red_10: #F4CECE;

    --Orange: #ea560d;
    --Orange_90: #5D2205;
    --Orange_70: #BA450A;
    --Orange_30: #FD9D7F;
    --Orange_10: #FBDDCF;

    --Yellow: #FFB800;
    --Yellow_90: #D97A00;
    --Yellow_70: #FFA600;
    --Yellow_30: #FFD466;
    --Yellow_10: #FFF0B3;

    --Black: #000000;
    --Black_10: #161616;
    --Grey: #AAAAAA;
    --Grey_70: #444444;
    --Grey_30: #DEDEDE;
    --White_10: #FAFAFA;
    --White: #FFFFFF;

    --Tekst_Black: var(--Black_10);
    --Tekst_White: var(--White);

    --StrokeWidth: 1px;
}

.bg-primary {
    background: var(--Primary) !important;
    color: var(--Tekst_Black);
}

.bg-primary-light {
    background: var(--Primary_30);
}

.bg-primary-lighter {
    background: var(--Primary_10);
    color: var(--Tekst_Black);
}

.border-primary {
    background: var(--Primary);
}

.bg-danger {
    background: var(--Red_10) !important;
    color: var(--Red_90) !important;
}

.bg-warning {
    background: var(--Yellow_10) !important;
    color: var(--Yellow_90) !important;
}

.bg-info {
    background: var(--Blue_10);
    color: var(--Blue_90);
}

.bg-succes {
    background: var(--Green_10);
    color: var(--Green_90);
}

.bg-secondary {
    background: var(--Secondary);
    color: var(--Tekst_Black);
}

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

.bg-lighter {
    background: var(--Grey_30);
}

.bg-greyish {
    background: var(--Grey_70);
}

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

.bg-alarm {
    background: var(--Alarm_10);
    color: var(--Tekst_Black);
}

.bg-assistance {
    background: var(--Assistance_10);
    color: var(--Tekst_Black);
}


.bg-repetition {
    background: var(--Orange_10);
    color: var(--Tekst_Black);
}

.bg-diversion {
    background: var(--Red_10);
    color: var(--Tekst_Black);
}

.bg-onsite {
    background: var(--OnSite_10);
    color: var(--Tekst_Black);
}

.bg-offsite {
    background: var(--Offsite_10);
    color: var(--Tekst_Black);
}

.text-black {
    color: var(--Tekst_Black) !important;
}

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

.form-check-input {
    background-color: white;
    border-color: var(--primary-bg);
}

    .form-check-input:checked {
        background-color: var(--primary-bg);
        border-color: var(--primary-bg);
    }

    .form-check-input:disabled {
        background-color: var(--light-bg);
        border-color: var(--light-bg);
    }

.btn-primary {
    background: var(--primary-bg) !important;
    border-color: var(--primary-bg) !important;
}
    .btn.primary.filled {
        background: var(--primary-bg) !important;
        border-color: var(--primary-bg) !important;
        color: var(--Tekst_White) !important;
    }
    .btn-primary.tonal {
        background: var(--Primary_10) !important;
        border-color: var(--primary-bg) !important;
        color: var(--primary-bg) !important;
    }
    .btn-primary.outline {
        background: var(--lighter-bg) !important;
        border-color: var(--primary-bg) !important;
        color: var(--primary-bg) !important;
    }
.btn-success.tonal {
    background: var(--Green_10);
    color: var(--Green_90);
}
.btn-warning.tonal {
    background: var(--Yellow_10) !important;
    color: var(--Yellow_90) !important;
}
.btn-danger {
    background: var(--Alarm) !important;
    border-color: var(--Alarm) !important;
}
    .btn-danger.filled {
        background: var(--Alarm) !important;
        border-color: var(--Alarm) !important;
        color: var(--Tekst_White) !important;
    }
    .btn-danger.tonal {
        background: var(--Alarm_10) !important;
        border-color: var(--Alarm) !important;
        color: var(--Alarm) !important;
    }
    .btn-danger.outline {
        background: var(--light-bg) !important;
        border-color: var(--Alarm) !important;
        color: var(--Alarm) !important;
    }
.btn-secondary {
    background: var(--light-bg) !important;
    border-color: var(--light-bg) !important;
    color: var(--Tekst_Black) !important;
}
.btn-secondary.filled {
        background: var(--light-bg) !important;
        border-color: var(--light-bg) !important;
        color: var(--Tekst_Black) !important;
    }
    .btn-secondary.tonal {
        background: var(--lighter-bg) !important;
        border-color: var(--light-bg) !important;
        color: var(--light-bg) !important;
    }
    .btn-secondary.outline {
        background: var(--light-bg) !important;
        border-color: var(--light-bg) !important;
        color: var(--Tekst_Black) !important;
    }

.btn-greyish {
    background: var(--Grey_30) !important;
    border-color: var(--Grey_30) !important;
}