:root {
    --ao-dunkelblau: #17356C;
    --ao-hellblau: #E0EEFC;
    --ao-mittelblau-1: #C0DBF7;
    --ao-mittelblau-2: #9EC8F1;
    --ao-grau: #515150;
    --ao-mittelgrau: #878786;
    --ao-hellgrau: #EEEEEE;
    --ao-orange: #F17D00;
    --ao-hellorange: #FF9625;
}

body {
    background-color: var(--ao-hellblau);
}

.content {
    border-color: var(--ao-hellgrau);
}

h1 {
    color: var(--ao-dunkelblau);
}

body .ui-dialog {
    border-color: var(--ao-orange) !important;
}

.modal-content {
    border-color: var(--ao-orange) !important;
}

.ao-warnung {
    border-color: var(--ao-orange);
}

.ao-signal-text {
    color: var(--ao-orange) !important;
}

.mailto-tel-text {
    color: var(--ao-dunkelblau) !important;
}

/* -- Header -- */
.ao-header {
    background-color: var(--ao-dunkelblau);
}

/* -- Footer -- */

footer a {
    color: var(--ao-grau);
}

@media (min-width: 992px) {
    .ao-header .ao-select {
        background-color: var(--ao-hellblau);
        color: var(--ao-dunkelblau) !important;
    }

    .nav .nav-item {
        border-right-color: var(--ao-hellblau);
    }

    .nav .nav-item:first-child {
        border-left-color: var(--ao-hellblau);
    }

    .ao-header .nav-link:hover {
        background-color: var(--ao-hellblau);
        color: var(--ao-dunkelblau) !important;
    }
}

@media (min-width: 768px) {

    .ao-schlagschatten {
        box-shadow: 5px 5px 8px var(--ao-hellgrau);
    }

    .ao-box {
        background: var(--ao-dunkelblau);
    }
}

@media (max-width: 767px) {
    .ao-schlagschatten {
        box-shadow: 3px 3px 4px var(--ao-hellgrau);
    }

    .ao-box {
        background: var(--ao-dunkelblau);
    }
}

footer a:visited,
footer a.iavisited,
footer a:focus,
footer a:active {
    color: var(--ao-grau) !important;
}

footer a:hover {
    color: var(--ao-mittelgrau) !important;
}

/* -- Inhaltsbereich -- */

.ao-info-box {
    border-color: var(--ao-hellgrau);
    background-color: var(--ao-hellblau);
}

.tarif-angebot-box {
    border-color: var(--ao-orange);
}

.empfehlung-text {
    color: var(--ao-orange);
}

.hervorgehoben {
    background-color: var(--ao-hellblau)
}

/* Tarifdetails */

.ao-tarif-anzeige {
    border-color: var(--ao-hellgrau);
    background-color: var(--ao-hellblau);
}

.ao-tarif-info-box {
    background-color: var(--ao-hellgrau);
}

.gesamtbeitrag {
    background-color: var(--ao-hellgrau);
}

/* -- Buttons -- */
.ao-btn {
    background-color: var(--ao-orange) !important;
    border-color: var(--ao-orange) !important;
}

.ao-btn:hover {
    background-color: var(--ao-hellorange) !important;
    border-color: var(--ao-hellorange) !important;
}

body .ui-button {
    transition: none;
}

.ao-details-button {
    border-color: var(--ao-hellgrau);
}

hr.rule {
    border-top-color: var(--ao-mittelgrau);
}

.tarif-leistung-nicht-vorhanden div {
    background-color: var(--ao-dunkelblau);
}

/* Floting-Labels */

.form-label-group input:not(:-moz-placeholder-shown) ~ label {
    color: var(--ao-mittelgrau);
}

.form-label-group input:not(:-ms-input-placeholder) ~ label {
    color: var(--ao-mittelgrau);
}

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group-select-not-default select:not(:placeholder-shown) ~ label {
    color: var(--ao-mittelgrau);
}

.form-label-group input:-webkit-autofill ~ label {
    color: var(--ao-mittelgrau);
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .form-label-group input::-ms-input-placeholder,
    .form-label-group select::-ms-input-placeholder {
        color: var(--ao-mittelgrau);
    }
}

/* Tarifauswahl-Styling */

input[type=checkbox] ~ label.ao-angebot {
    background-color: var(--ao-dunkelblau);
}

input[type=checkbox]:checked ~ label.ao-angebot {
    background-color: var(--ao-orange);
}

div.bezeichner {
    color: var(--ao-dunkelblau);
}

.fortschrittsbalken-schritt {
    border-color: var(--ao-hellgrau);
}

.fortschrittsbalken-punkt {
    background: var(--ao-dunkelblau);
}

.fortschrittsbalken-text {
    color: var(--ao-dunkelblau);
}

.aktiv {
    background: var(--ao-orange);
}

.erledigt {
    background-color: var(--ao-dunkelblau);
}

/* Modaldialog Styling */

.ao-modal {
    background: var(--ao-hellgrau);
}

.ao-dialog {
    border-color: var(--ao-orange);
    color: var(--ao-orange);
}

.ausschluss {
    border-color: var(--ao-orange);
}

/* Tabelle Antragsfragen Styling */
.ao-tabelle, .frage-spalte, .antwort-spalte {
    border-color: var(--ao-mittelblau-1);
}

/* bootstrap overrides */
.form-control:focus,
.custom-select:focus {
    border-color: var(--ao-hellblau) !important;
    box-shadow: 0 0 0 .2rem var(--ao-hellblau) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--ao-hellblau) !important;
    background-color: var(--ao-hellblau) !important;
}

/* AO-Radio-Style */
input[type=checkbox]:checked::before,
input[type=checkbox]:not(:checked)::before,
input[type=radio]:checked::before,
input[type=radio]:not(:checked)::before {
    border-color: var(--ao-mittelblau-2);
}

input[type=radio]:hover::before {
    background: var(--ao-hellgrau);
}

input[type=checkbox]:hover::before {
    border-color: var(--ao-mittelblau-1);
}

input[type=checkbox]:checked::before {
    background: var(--ao-hellblau);
}

input[type=radio]:checked::before {
    background: var(--ao-dunkelblau);
}

#cookie-bar {
    background: rgba(255, 255, 255, 0.85);
    color: var(--ao-dunkelblau);
    -webkit-box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.3);
}

.cookie-bar-button, .cookie-bar-button:hover {
    background: var(--ao-orange);
    color: white;
}

.icon-loeschen, .icon-angebot-daten-loeschen {
    fill: var(--ao-orange);
}

body .ui-accordion .ui-accordion-header:focus {
    box-shadow: 0 0 0 .2rem var(--ao-dunkelblau);
}

body .ui-accordion .ui-accordion-content {
    background: var(--ao-hellblau);
}


body .ui-accordion .ui-accordion-header {
    background: var(--ao-mittelblau-1);
}

body .ui-accordion .ui-accordion-header.ui-state-hover {
    background: var(--ao-mittelblau-2);
}

body .ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--ao-mittelblau-1);
}

body .ui-accordion .ui-accordion-header.ui-state-active:hover {
    background: var(--ao-mittelblau-2);
}

body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--ao-orange);
}