/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

body.anwendertage {
    font-family: Verdana, Arial, sans-serif;
}

.anwendertage #welcome-container .survey-name{
    margin-bottom: 5rem;
}

.anwendertage .navbar.navbar-default {
    background-color: #003366;
}

.anwendertage article>div>.top-container {
    display: none;
}

.anwendertage .question-container {
    border-bottom: 1px solid  #003366;
}

.anwendertage .firmadata .answer-container ul {
    display: flex;
    flex-flow: row wrap;
}


.anwendertage .firmadata .answer-container ul li.form-group {
    width: 95%;
    padding: 2px 8px;
}

.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(4) {
    width: 40%;
    margin-bottom:32px;
    padding-bottom:24px;
    border-bottom: 1px solid  hsla(210, 100%, 20%, 0.2);
}
.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(4)>label {
    width: 70px;
}
.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(4)>div {
    width: 100%;
}

.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(5) {
    width: 65%;
    margin-bottom:32px;
    padding-bottom:32px;
    border-bottom: 1px solid hsla(210, 100%, 20%, 0.2);
}
.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(5)>label {
    width: 120px;
}
.anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(5)>div {
    width: 100%;
}

@media screen and (min-width: 768px) {
    
    .anwendertage .firmadata .answer-container ul li.form-group {
        width: 49.9%;
        padding: 2px 8px;
    }
    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(3) {
        width: 100%;
        padding-right: 36px;
    }
    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(3)>div {
        width: 100%;
    }

    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(4) {
        width: 25%;
    }
    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(4)>div {
        width: 100%;
    }

    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(5) {
        width: 75%;
    }
    .anwendertage .firmadata .answer-container ul li.form-group:nth-of-type(5)>div {
        width: 100%;
    }
} 



.anwendertage .firmadata .answer-container ul li.form-group>label {
    float: none;
    width:200px;
    padding-bottom:2px;
    white-space: nowrap;
    text-align: left;
}

.anwendertage .firmadata .answer-container ul li.form-group:focus-within > label {
    font-weight: bold;
}

.anwendertage .firmadata .answer-container ul li.form-group>div{
    float: none;
    width:100%;
    margin: auto;
}


.anwendertage .asterisk.pull-left {
    margin-left: -22px;
}

/* Einheitliche Schrift */
body,
h1, h2, h3, h4,
p,
button,
input,
.privacy,
#datasecurity_notice {
    font-family: Arial, sans-serif !important;
}

/* Datenschutztext normal statt fett */
.privacy,
#datasecurity_notice {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* Mobile Ansicht */
@media screen and (max-width: 767px) {

    /* Überschriften verkleinern */
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word;
        hyphens: none;
    }

    h2 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    /* Einheitliche Textgröße */
    p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Datenschutz kompakter */
    #datasecurity_notice,
    .privacy {
        font-size: 15px !important;
        font-weight: 400 !important;
        padding: 16px !important;
        line-height: 1.5 !important;
        width: 100%;
        box-sizing: border-box;
    }
}


/* Datenschutzbereich */
#datasecurity_notice,
.privacy {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px 20px;
    border: 2px solid #00A88F;
    border-radius: 0;
    color: #003366;

    /* Gleiche Breite wie die obere Box */
    width: 100%;
    max-width: none;
    margin: 10px 0 0;
    box-sizing: border-box;
}