/* your styles go here */

/* *****************
Defintion der Farben
 ******************* */

/* Grundfarben */

/* Farben Doghnut-Charts */
/*#9A2441*/
/*#AB4646*/
/*#BC684A*/
/*#DEAC52*/
/*#A2AB68*/
/*#8A9A61*/
/*#718859*/

/* *****************
Text-Styling
 ******************* */

.text-semiBold {
    font-weight: 500;
}

/* *****************
Buttons
 ******************* */

.standardButtonLayout {
    background-color: #FAFAFA;
    transition: 0.2s;
    min-width: 220px;
    font-weight: 400 !important;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
    color: rgba(0,0,0,.8);
    border-radius: .25rem;
}

.standardButtonLayout:hover {
    background-color: #E0E0E0;
}

.standardButtonLayout.smallButton{
    min-width: 150px;
}

.buttonSquareXL {
    width: 250px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 250px !important;
    text-align: center;
    padding: 0px;
    font-size:24px;
}

/* *****************
Verschiedenes
 ******************* */

/* Überschrift in Karte für Legende von Charts */
.cardBodyHeading {
    font-size: 1.1rem;
}

/*
 * Card-Body Padding für Auswertung Arbeitssicherheit und Gesundheitsschutz Organisation
 */

.card-body.custom {
    padding-left: 2rem;
    padding-right: 2rem;
}
/*
 * Modal
 */

.modalText {
    font-size: 0.9rem;
}

/*
 * Legenden für die Bar-Charts
 */

.negativeAngabenSchuleCustomLegende {
    background-color: rgba(204,54,29, 0.9);
    width:30px;
    height:15px;
}
.positiveAngabenSchuleCustomLegende {
    background-color: rgba(56,129,78, 0.9);
    width:30px;
    height:15px;
}
.keineAngabenSchuleCustomLegende {
    background-color: rgba(193,193,193, 0.9);
    width:30px;
    height:15px;
}
.negativeAngabenReferenzCustomLegende {
    background-color: rgba(175,66,47, 0.7);
    width:30px;
    height:15px;
}
.positiveAngabenReferenzCustomLegende {
    background-color: rgba(65,85,71, 0.7);
    width:30px;
    height:15px;
}
.keineAngabenReferenzCustomLegende {
    background-color: rgba(142,141,139, 0.7);
    width:30px;
    height:15px;
}

.legend {
    font-size: 0.9rem;
}

.thick {
    font-weight: 900;
}

/*
 * Legende für die Donut-Charts
 */

.AntwortSehrGutCustomLegende {
    background-color: #0e5122;
    width:30px;
    height:15px;
}
.AntwortGutCustomLegende {
    background-color: #38814e;
    width:30px;
    height:15px;
}
.AntwortZufriedenCustomLegende {
    background-color: #e8d138;
    width:30px;
    height:15px;
}
.AntwortNichtGanzZufriedenCustomLegende {
    background-color: #ff882c;
    width:30px;
    height:15px;
}
.AntwortSchlechtCustomLegende {
    background-color: #cc361d;
    width:30px;
    height:15px;
}
.AntwortSehrSchlechtCustomLegende {
    background-color: #8e1c08;
    width:30px;
    height:15px;
}
.AntwortKeineAngabenCustomLegende {
    background-color: #d6d8db;
    width:30px;
    height:15px;
}



/*.AntwortJaCustomLegendeRaeume {*/
/*    background-color: #54B689;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/
/*.AntwortJaBackgroundRaeume {*/
/*    background-color: #54B689;*/
/*}*/

/*.AntwortTeilweiseCustomLegendeRaeume {*/
/*    background-color: #FFC71F;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/

/*.AntwortTeilweiseBackgroundRaeume {*/
/*    background-color: #FFC71F;*/
/*}*/

/*.AntwortNeinCustomLegendeRaeume {*/
/*    background-color: #D71D2A;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/

/*.AntwortNeinBackgroundRaeume {*/
/*    background-color: #D71D2A;*/
/*}*/

/*.AntwortUnklarCustomLegendeRaeume {*/
/*    background-color: #adb5bd;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/

/*.AntwortUnklarBackgroundRaeume {*/
/*    background-color: #adb5bd;*/
/*}*/



/*
 * Legende für die Räume ORIGINAL
 */

/*.AntwortJaCustomLegendeRaeume {*/
/*    background-color: #e0c1bb;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/
/*.AntwortJaBackgroundRaeume {*/
/*    background-color: #bdcfc2;*/
/*}*/

/*.AntwortTeilweiseCustomLegendeRaeume {*/
/*    background-color: #ffeeba;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/

/*.AntwortTeilweiseBackgroundRaeume {*/
/*    background-color: #ffeeba;*/
/*}*/

/*.AntwortNeinCustomLegendeRaeume {*/
/*     background-color: #bdcfc2;*/
/*     width:30px;*/
/*     height:15px;*/
/*}*/

/*.AntwortNeinBackgroundRaeume {*/
/*    background-color: #e0c1bb;*/
/*}*/

/*.AntwortUnklarCustomLegendeRaeume {*/
/*    background-color: #d6d8db;*/
/*    width:30px;*/
/*    height:15px;*/
/*}*/

/*.AntwortUnklarBackgroundRaeume {*/
/*    background-color: #d6d8db;*/
/*}*/

/*CHARTS*/

.AntwortJaCustomLegendeRaeume {
    background-color: rgba(155, 34, 38, 0.6);
    width:30px;
    height:15px;
}
.AntwortJaBackgroundRaeume {
    background-color: rgba(45, 106, 79, 0.6);
}

.AntwortTeilweiseCustomLegendeRaeume {
    background-color: rgba(245, 175, 0, 0.6);
    width:30px;
    height:15px;
}

.AntwortTeilweiseBackgroundRaeume {
    background-color: rgba(245, 175, 0, 0.6);
}

.AntwortNeinCustomLegendeRaeume {
     background-color: rgba(45, 106, 79, 0.6);
     width:30px;
     height:15px;
}

.AntwortNeinBackgroundRaeume {
    background-color: rgba(155, 34, 38, 0.6);
}

.AntwortUnklarCustomLegendeRaeume {
    background-color: #d6d8db;
    width:30px;
    height:15px;
}

.AntwortUnklarBackgroundRaeume {
    background-color: #d6d8db;
}

/*
 * Formatierung für die Gauges in der Übersicht des SL + die allgemeine Frage
 */

.googleChartOverView{
    min-height:250px;
    width:100%;
}

.googleChartItem{
    min-height:450px;
    width:100%;
}

.googleChartUebersicht {
    min-height:350px;
    width:100%;
}

svg:first-child > g > text[text-anchor~=middle]{
    font-size:1em;
}

/*
 * Formatierung Tooltips
 */

.raumName + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}

/*
 * Labels für die Auswertung der Angaben bei Arbeitssicherheit und Gesundheitsschutz durch den SL
 */

.antwortJaArbsicherGesschutzLabels {
    background-color: #bdcfc2;
    min-width: 150px;
}

.antwortUnzutreffendArbsicherGesschutzLabels {
    background-color: #dadddd;
    min-width: 150px;
}

.antwortNeinArbsicherGesschutzLabels {
    background-color: #e0c1bb;
    min-width: 150px;
}

.antwortUnklarArbsicherGesschutzLabels {
    background-color: #ffeeba;
    min-width: 150px;
}


/*
 * Formatierung der Empfehlungen im Bereich Arbeitsmerkmale
 */

.card-body.empfehlungUebersicht {
    min-height: 250px;
}

/*
 * Formatierung des Modals für den Fragebogen der Schulleitung
 */


.answer-text {
    width: 20%;
}


/*Fragebogen Gesundheits- und Arbeitsschutz Schulleitung, Breite des modals*/

.modal-fb-sl {
    max-width: 1200px
}

/*Link auf Startseite disablen*/
.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #D3D3D3;
}

/* Unsichtbarer Button für den Adminbereich in der User-List */
.fabutton {
    background: none;
    padding: 0px;
    border: none;
    color: black;
}

.copy_btn
{
    font-weight: 400;
    border: 2px solid;
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.email_text
{
    border: transparent;
}

.blockquote_custom {
    padding: 0.5rem 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-left: 5px solid #2b90d9;
}

/* Bei den Räumen soll die Legende und der Suchbalken die gleiche Höhe haben */
.equalHeightRaeumeLegende {
    min-height:210px;
}

#room_body
{
    display:none;
}


.accordion .card-dropdown {
    overflow: visible;
}

div[aria-expanded=true] .fa-angle-down {
    display: none;
}
div[aria-expanded=false] .fa-angle-up {
    display: none;
}
/*@media only screen and (min-width: 992px){*/
/*    #email_link{*/
/*        width: 115%;*/
/*    }*/
/*}*/

/* Kacheln gleichmäßig vergrößern, solang sie auf kleinen Bildschirmen übereinander dargestellt werden */
@media only screen and (max-width: 767px) {
    .flex-even-kacheln {
        flex: 1;
    }
}

/* Größe der Flexboxen gleichmäßig groß machen */
.flex-even {
    flex: 1;
}

/* Sizing Google Icons */
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.video_menu:hover
{
    color: blue;
}

/*
    Farben
*/

.greenColorBackgroundCustom {
    background-color: #bdcfc2;
}

.btn-clipboard {
    padding: .25rem .5rem;
    font-size: 85%;
    color: #818a91;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: .25rem;
}

.btn-clipboard:hover {
    color: #fff;
    background-color: #2b90d9;
}

#ChartArbMengeZeit {
    height: 450px;
}
#ChartArbMengeZeitRef {
    height: 550px;
}

#ChartArbUmg {
    height: 450px;
}
#ChartArbUmgRef {
    height: 550px;
}

#ChartArbTaetigBeding {
    height: 750px;
}
#ChartArbTaetigBedingRef {
    height: 950px;
}

#ChartSozAspekt {
    height: 465px;
}
#ChartSozAspektRef {
    height: 700px;
}

#ChartArbSicherGesSchutz {
    height: 490px;
}
#ChartArbSicherGesSchutzRef {
    height: 850px;
}

#ChartPhysBeanspr {
    height: 465px;
}
#ChartPhysBeansprRef {
    height: 700px;
}

#ChartPsychBeanspr {
    height: 465px;
}
#ChartPsychBeansprRef {
    height: 445px;
}

#ChartVerhEinst {
    height: 465px;
}
#ChartVerhEinstRef {
    height: 445px;
}

/*
Head in Dropdown-Menüs weniger stark eingerückt
 */

.dropdown-header-custom {
    padding: .5rem 1.0rem;
    text-decoration: underline;
}
.btn-link-custom {
    color: #1e5e87;
    font-size: inherit;
}
.loader {
    border: 10px solid #3498db;
    border-top: 10px solid rgb(47, 51, 62);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: auto 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.info-box {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    background: #ffffff;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
    min-height: 80px;
    padding: .5rem;
    position: relative;
}

.info-box .info-box-icon {
    border-radius: 0.25rem;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.875rem;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 80px;
}

.bg-red {
    background-color: #dc3545 !important;
}

.info-box .info-box-content {
    -ms-flex: 1;
    flex: 1;
    padding: 5px 10px;
}

.info-box .progress-description,
.info-box .info-box-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-box .info-box-number {
    display: block;
    font-weight: 700;
}

.table-nr {
    width:2%;
}

.quest-expl {
    font-weight: normal;
    /*font-size: 0.9em;*/
}

.btn-link {
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    color: #1e5e87!important;
    cursor: pointer;
    text-align: left;
}

/*
Spezielle Formatierung für die h1 Überschrift, damit sie auf gleicher Höhe wie die Buttons ist
*/

.h1-special {
    padding:0;
    margin: 0;
}

/* Kacheln gleichmäßig vergrößern, solang sie auf kleinen Bildschirmen übereinander dargestellt werden */
@media only screen and (max-width: 767px) {
    .flex-even-kacheln {
        flex: 1;
    }
}

/* Größe der Flexboxen gleichmäßig groß machen */
.flex-even {
    flex: 1;
}

/*
Formatierung der großen Zahlen im Backend im Dashboard sowie der Prozentzahlen dazu
 */
.numbersBackendDashboard {
    font-size:3rem;
    color: #247294;
}

.numbersBackendDashboardPercentages {
    font-size:1.5rem;
    color:#000000;
}

.page-header .page-subtitle {
    letter-spacing: .125rem;
    color: #818ea3;
    font-size: .725rem;
}

.page-subtitle {
    letter-spacing: .125rem;
    color: #818ea3;
    font-size: .725rem;
}

.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.custom_verybigtext {
    line-height: 64px;
    font-size: 64px;
    font-weight: bold;
    color: #73879C;
    margin-bottom: 0.5rem;
}

.custom_bigtext {
    line-height:64px;
    font-size:64px;
    font-weight:bold;
}
/*
 Formatierung der Icons Auswertung FB KL -> Dimensions
 */
.small-box1 .icon>i.fa, .small-box1 .icon>i.fab, .small-box1 .icon>i.fad, .small-box1 .icon>i.fal, .small-box1 .icon>i.far, .small-box1 .icon>i.fas, .small-box1 .icon>i.ion {
    font-size: 70px;
    top: 20px;
}

/*
 Callouts können statt der Alters genutzt werden, wenn der Alert zu aufdringlich wäre
 */

.callout.callout-danger {
    border-left-color: #bd2130;
}
.callout {
    border-radius: .25rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    background-color: #fff;
    border-left: 5px solid #e9ecef;
    margin-bottom: 1rem;
    padding: 1rem;
}

.link_no_style {
    color: black;
    text-decoration: none;
}

.link_no_style:hover {
    color: black;
    text-decoration: none;
}

.link_no_style:visited {
    color: black;
    text-decoration: none;
}

.anzahl_schulart, .anzahl_alle_schulen, .anzahl_instanz, .vergleichswerte_instanz, .vergleichswerte_schultyp, .vergleichswerte_alle_schulen {
    display: none;
}

.scale_arbeitsmerkmal {
    letter-spacing: .125rem; color: #818ea3; font-size: .85rem;
}

.scale_label {
    font-size:28px; line-height:28px;
}

.scale_total_score {
    font-size:21px; line-height:40px; font-weight:bold;
}

.card_min_height {
    min-height:175px;
}

.card_link {
    color:white !important;
}

/*FB KL Dimensions, FB KL Übersicht*/
.custom_amaranth_red {
    color: #D71D2A;
}
.custom_mikado_yellow {
    color: #FFC71F;
}
.custom_mint {
    color: #54B689;
}
.custom_davys_grey {
    color: #525252;
}
.custom_shadow_blue {
    color: #648AA6 !important;
}
.custom_bg_shadow_blue {
    background-color: var(--shadow_blue);
}
.custom_dark_blue {
    color: #1e5e87 !important;
}

/*scope = root, weil es das ganze Dokument betreffen soll, -- muss vor den Namen, sonst wird es nicht als Variable erkannt https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties*/
:root {
    --shadow_blue: #648AA6;
}

/*FB KL Dimensions, FB KL Übersicht*/
.card_footer_red {
    background-color: #D71D2A; color:white
}
.card_footer_yellow {
    background-color: #FFC71F; color:white
}
.card_footer_green {
    background-color: #54B689; color:white
}
.card_footer_grey {
    background-color: #525252; color:white
}

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

.link_hover_decoration:hover {
    text-decoration: underline;
    cursor: pointer;
}


/*
Custom Buttons angelehnt an Material Design -> aktuell nur im Modal für die Empfehlungen im Einsatz -> überall einsetzen?
 */

.nav-pills-material .nav-link-material {
    border-radius: .25rem;
    font-size: 12px;
    text-transform: uppercase;
    padding: 17px 29px 16px;
    line-height: 1;
    background-color: #f5f5f5;
    font-weight: 500;
    color: rgba(0,0,0,.6);
    margin: .5rem 0rem;
}

.nav-link-material {
    display: block;
    padding: .5rem 1rem;
    color: #1e5e87;
    text-decoration: none !important;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-pills-material .nav-link-material.active, .nav-pills-material .show>.nav-link-material {
    color: #fff;
    background-color: #1e5e87;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
}

@media (min-width: 1800px)
{
    .pr-xxl
    {
        padding-right: 0 !important;
    }

    .pb-xxl-0 {
        padding-bottom: 0 !important;
    }

    .pl-xxl-1 {
        padding-left: 0.5rem !important;
    }
    .pr-xxl-1 {
        padding-right: 0.5rem !important;
    }

    .pl-xxl-2 {
        padding-left: 0.5rem !important;
    }
    .pr-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .pl-xxl-3 {
        padding-left: 1rem !important;
    }
    .pr-xxl-3 {
        padding-right: 1rem !important;
    }

    .pb-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .mb-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .col-xxl-2
    {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-xxl-3
    {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-4
    {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxl-6
    {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxl-8
    {
        -ms-flex: 0 0 66.666666%;
        flex: 0 0 66.666666%;
        max-width: 66.666666%;
    }
    .col-xxl-12
    {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
#loading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
}

#loading-image {
    z-index: 100;
}

/* Icons in Input-Feldern auf der Loginseite */
.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #3c3939;
}

.form-group .form-control.with-icon {
    padding-left: 2.375rem;
}

/* Größe der Karten im Bereich Arbeitssituation auf der Übersichtsseite FB KL */

@media (min-width: 426px) {
    .cardsArbeitssituation {
        width: 365px;
    }
}
@media (max-width: 425px) {
    .cardsArbeitssituation {
        width: 260px;
    }
}

/* Same height columns in a row z. B. bei Beanspruchungsfolgen */
.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

/* Scroll to Top Button */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
    background-color: #73a2d1;
}

.cursor-pointer{
    cursor: pointer;
}

.icon-card-result{
    line-height:48px;
    font-size:48px;
    font-weight:bold;
}

.invalid_feedback_custom {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #e3342f;
}

.unlocked {
    opacity: 1;
    width: 100px;
    height: auto;
}

.locked {
    opacity: 0.3;
    width: 100px;
    height: auto;
}