html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.bg {
    background-image: url('../img/bruecke_4.jpeg');
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size:cover; 
    background-attachment:fixed;
    min-height: 100vh;
}


/* Flexbox-Design */
.d-flex{display:-ms-flexbox!important;display:flex!important}
.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important;font-size:8pt;}
.p-1{padding:.25rem!important; border: 1px solid white; text-align: center;}
.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}
.flex-bg { background-color: #EEE; color: #EEE; }
.wizard-card[data-color="azure"] .flex-color { background-color: #7A9E9F; color: #7A9E9F; } 
.wizard-card[data-color="azure"] .flex-colora { background-color: #7A9E9F; color: #FFF; }
.wizard-card[data-color="green"] .flex-color { background-color: #7AC29A; color: #7AC29A; }
.wizard-card[data-color="green"] .flex-colora { background-color: #7AC29A; color: #FFF; }
.wizard-card[data-color="blue"] .flex-color { background-color: #68B3C8; color: #68B3C8; }
.wizard-card[data-color="blue"] .flex-colora { background-color: #68B3C8; color: #FFF; }
.wizard-card[data-color="orange"] .flex-color { background-color: #F3BB45; color: #F3BB45; }
.wizard-card[data-color="orange"] .flex-colora { background-color: #F3BB45; color: #FFF; }
.wizard-card[data-color="red"] .flex-color { background-color: #EB5E28; color: #EB5E28; }
.wizard-card[data-color="red"] .flex-colora { background-color: #EB5E28; color: #FFF; }
.btn {display: inline-flex;justify-content: center; /* center the content horizontally */ align-items: center; /* center the content vertically */}


/* Dieser Style lässt den Speicherbutton leuchten... => class="button" */
.blinker-button {
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
    0% { background-color: #FFF; -webkit-box-shadow: 0 0 3px #FFF; }
    50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #FFF; -webkit-box-shadow: 0 0 3px #FFF; }
}

@-moz-keyframes glowing {
    0% { background-color: #FFF; -moz-box-shadow: 0 0 3px #FFF; }
    50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #FFF; -moz-box-shadow: 0 0 3px #FFF; }
}

@-o-keyframes glowing {
    0% { background-color: #FFF; box-shadow: 0 0 3px #FFF; }
    50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #FFF; box-shadow: 0 0 3px #FFF; }
}

@keyframes glowing {
    0% { background-color: #FFF; box-shadow: 0 0 3px #FFF; }
    50% { background-color: lime; box-shadow: 0 0 40px lime; }
    100% { background-color: #FFF; box-shadow: 0 0 3px #FFF; }
}


/* Abschnitt Prioritäten-Auswahl im Bereich Wahlfächer BPA */
#radios1 label, #radios2 label, #radios3 label { cursor: pointer; position: relative; }
input[type="radio"].wf { opacity: 0; position: absolute;}
input[type="radio"].wf + span { color: grey; border-radius: 50%; padding: 2px 7px 2px 7px; border: none; }
input[type="radio"].wf:checked + span { color: #fff; background-color: #007FFF; }
input[type="radio"].wf:focus + span { color: #grey; }
#radios1 label i,  #radios2 label i, #radios3 label i { margin-left: 4px; color: grey; }
#radios1 input[value="4"]:checked + span, #radios2 input[value="4"]:checked + span, #radios3 input[value="4"]:checked + span { background-color: #fff; }


/* Diverses */
#myTab li a { border-color: orange; color: #AAA; }
#myTab li.active a { border-bottom-color: transparent; color: #555; font-weight: bold; background-color: rgba(255,165,0,.1); }

.tab-content { all: revert; }
.tab-pane { all: revert; }

.flex-30 { width: 30%; background-color: #DDD; }
.flex-70 { width: 70%; background-color: #DDD; }
.flex-prio { width: 30%; background-color: #EFEFEF; font-size: 10pt;  }
.flex-fach { text-align: left; padding-left: 5px !important; width: 70%; background-color: #EFEFEF; font-size: 10pt; }
.s2 { font-style: italic; color: #CDCDCD !important; }
.q4567 { color: #D00019; }


/* Styling for the SWITCH-BUTTON */
.knobs, .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.button.r { position: relative; width: 62px; height: 34px; overflow: hidden; }
.button.r, .button.r .layer { border-radius: 100px; }
.checkbox { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }
.chkb_change { opacity: 1; z-index: 3; }
.knobs { z-index: 2; }
.layer { width: 100%; background-color: rgba(208,0,25,.2); transition: 0.3s ease all; z-index: 1; }
#button-1 .knobs:before { font-family: 'FontAwesome'; content: "\f00d"; /* fa fa-times */ position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; line-height: 1; padding: 4px 1px; background-color: rgba(208,0,25,1); border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; }
#button-1 .checkbox:checked + .knobs:before { font-family: 'FontAwesome'; content: "\f00c"; /* fa fa-check */ left: 32px; background-color: rgba(50, 205, 50, 1); }
#button-1 .checkbox:checked ~ .layer { background-color: rgba(50, 205, 50, .2); }
#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer { transition: 0.3s ease all; }