/*Governikus Design System CSS File */

/*Constants-----------------------------------------------------------------------------------------------------------*/

:root {
    --blau900: #002A41;
    --blau700: #004972;
    --blau500: #0069A3;
    --blau400: #4C95BE;
    --blau300: #99C3DA;
    --blau200: #D9E8F1;
    --blau100: #F2F7FA;
    --grau900: #232322;
    --grau700: #3D3D3C;
    --grau500: #575756;
    --grau400: #575756;
    --grau300: #BCBCBB;
    --grau100: #F6F6F6;
    --dunkelblau700: #282D3B;
    --dunkelblau500: #394054;
    --hellblau500: #00A8D3;
    --success500: #458254;
    --success100: #F5F9F6;
    --warning500: #FC9403;
    --warning100: #FFFAF2;
    --error500: #DB1623;
    --error700: #990F18;
    --error100: #FDF3F3;

}

/*Colors--------------------------------------------------------------------------------------------------------------*/

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

.blau700 {
    color: var(--blau700)
}

.blau500 {
    color: var(--blau500)
}

.blau400 {
    color: var(--blau400)
}

.blau300 {
    color: var(--blau300)
}

.blau200 {
    color: var(--blau200)
}

.blau100 {
    color: var(--blau100)
}

.grau900 {
    color: var(--grau900)
}

.grau700 {
    color: var(--grau700)
}

.grau500 {
    color: var(--grau500)
}

.grau400 {
    color: var(--grau400)
}

.grau300 {
    color: var(--grau300)
}

.grau100 {
    color: var(--grau100)
}

.dunkelblau700 {
    color: var(--dunkelblau700)
}

.dunkelblau500 {
    color: var(--dunkelblau500)
}

.hellblau500 {
    color: var(--hellblau500)
}

.success500 {
    color: var(--success500)
}

.success100 {
    color: var(--success100)
}

.warning500 {
    color: var(--warning500)
}

.warning100 {
    color: var(--warning100)
}

.error500 {
    color: var(--error500)
}

.error700 {
    color: var(--error700)
}

.error100 {
    color: var(--error100)
}

/*Typography----------------------------------------------------------------------------------------------------------*/


/*Buttons-------------------------------------------------------------------------------------------------------------*/
/* Info: not all buttons in id crucis are button-Tags, sometimes we have to style a-Tags as buttons*/

.btn {
    font-weight: bold;
    border-radius: 28px;
}

.btn-primary {
    color: white;
    background-color: var(--blau500);
    border: 1px solid var(--blau500);
}

.btn-primary:hover {
    background-color: var(--blau900);
    border: 1px solid var(--blau900);
}

.btn-primary:focus {
    background-color: var(--blau500);
    border: 1px solid var(--blau500);
    /*TODO doubled border and remove box shadow*/
    /*box-shadow: none;*/
}

.btn-primary:active {
    background-color: var(--blau700);
    border: 1px solid var(--blau700);
}


.btn-primary:disabled {
    background-color: var(--blau300);
    border: 1px solid var(--blau300);
}

.btn-secondary {
    color: var(--blau500);
    background-color: white;
    border: 1px solid var(--blau500);
}

.btn-outline-secondary {
    color: var(--blau500);
    background-color: white;
    border: 1px solid var(--blau500);
}

.btn-secondary:hover {
    color: var(--blau900);
    background-color: var(--blau100);
    border: 1px solid var(--blau900);
}

.btn-secondary:focus {
    color: var(--blau500);
    background-color: white;
    border: 1px solid var(--blau400);
    /*TODO doubled border and remove box shadow*/
    /*box-shadow: none;*/
}

.btn-secondary:active {
    color: var(--blau700);
    background-color: var(--blau200);
    border: 1px solid var(--blau700);
}

.btn-secondary:disabled {
    color: var(--blau300);
    background-color: white;
    border: 1px solid var(--blau300);
}

.btn-danger {
    color: white;
    background-color: var(--error500);
    border-color: var(--error500);
}

.btn-danger:hover {
    color: lightgrey;
    background-color: var(--error700);
    border: 1px solid var(--error700);
}

.btn-danger:focus {
    /*TODO doubled border*/
    border: 1px solid var(--blau400);
    box-shadow: none;
}

.btn-lg {
    padding: 12px 36px 12px 36px;
}

.btn-m {
    padding: 12px 32px 12px 32px;
}

.btn-sm {
    padding: 4px 24px 4px 24px;
}


/*--- DESKTOP ---*/
@media (min-width: 992px) {

    .btn {
        font-size: 19px !important;
    }

}

/*TABLET*/
@media (min-width: 576px) and (max-width: 991px) {

    .btn {
        font-size: 16px !important;
    }
}

/*MOBILE*/
@media (min-width: 0px) and (max-width: 575px) {
    .btn {
        font-size: 14px !important;
    }

}

/*Alert banner--------------------------------------------------------------------------------------------------------*/

.alert {
    color: var(--grau500);
    border: 2px solid;
}

.alert-danger {
    border-color: var(--error500);
    background: var(--error100);
}

.alert-info {
    border-color: var(--blau400);
    background: white;
}

.alert-success {
    border-color: var(--success500);
    background: var(--success100);
}

/*Anchors ------------------------------------------------------------------------------------------------------------*/

a {
    color: var(--blau500);
}

/*Border -------------------------------------------------------------------------------------------------------------*/

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

/*Checkbox -----------------------------------------------------------------------------------------------------------*/

/* Override bootstrap style*/
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--blau500);
    background-color: var(--blau500);
}