/******************
    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
*/
.slider-ohne-zahlen .tooltip,
.slider-ohne-zahlen .tooltip-inner,
.slider-ohne-zahlen .tooltip-arrow {
    display: none !important;
}

.slider-left {
    position: relative;
    top: -20px;
}

.slider-right {
    position: relative;
    top: -20px;
}

.slider-left {
    width: 25% !important;
}

.slider-right {
    width: 25% !important;
}

.slider-container {
    width: 50% !important;
}

/* Subfragen links */
.ls-answers tbody th {
    text-align: left !important;
}

/* Antwortspalten mittig */
.ls-answers tbody td {
    text-align: center !important;
}

/* Linke Subfragen-Spalte breiter machen */
.ls-answers tbody th {
    width: 35% !important;
}

/* Antwortspalten entsprechend schmaler */
.ls-answers tbody td {
    width: auto !important;
}

.ls-answers thead th {
    vertical-align: top !important;
    text-align: center !important;
}

.survey-description {
    color: #333 !important;
}

.survey-name {
    font-size: 2.9rem !important;
}

.asterisk {
    display: none !important;
}

.abschnittsueberschrift {
    color: #373696;
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0 10px 0;
}

.group-description {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.progress-bar {
    background-color: #373696 !important;
}

.btn-primary {
    background-color: #373696 !important;
    border-color: #373696 !important;
}


.navbar-nav.navbar-right {
    float: left !important;
}

.navbar-nav.navbar-right > li > a {
    color: #373696 !important;
}

.navbar-nav.navbar-right > li > a:hover,
.navbar-nav.navbar-right > li > a:focus {
    color: #373696 !important;
}

/* =========================
   LOGO UND OBERER BEREICH
   ========================= */
   
@media (min-width: 768px) {

    /* Oberen Navigationsbereich kompakt halten */
    .navbar-fixed-top {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 180px !important;
        min-height: 180px !important;
    }

    .navbar-header {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: 180px !important;
    }

    /* Logo rechts oben */
    .navbar-brand.logo-container {
        position: absolute !important;
        right: 15px !important;
        top: 10px !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-brand.logo-container img {
        width: 160px !important;
        height: auto !important;
        max-height: none !important;
    }

    /* "Später fortfahren" links unten im oberen Bereich */
    .navbar-nav.navbar-right {
        position: absolute !important;
        left: 15px !important;
        bottom: 10px !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Lila Schrift */
    .navbar-nav.navbar-right > li > a {
        color: #7B5AA6 !important;
    }

    .navbar-nav.navbar-right > li > a:hover,
    .navbar-nav.navbar-right > li > a:focus {
        color: #5F4385 !important;
    }
}


/* Abstand des Inhalts unterhalb der festen Navbar */
body {
    padding-top: 180px !important;
}

@media (max-width: 767px) {

    /* Mobile Navbar: oben anzeigen, aber beim Scrollen mitnehmen */
    .navbar-fixed-top {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 180px !important;
        min-height: 180px !important;
    }

    .navbar-header {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: 180px !important;
    }

    /* Logo */
    .navbar-brand.logo-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 15px !important;
        top: 60px !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    .navbar-brand.logo-container img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 120px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Abstand unterhalb der Navbar */
    body {
        padding-top: 180px !important;
    }

}

@media (max-width: 767px) {

    /* Matrix auf dem Handy */
    .ls-answers tbody th {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .ls-answers tbody td {
        width: 100% !important;
        max-width: 100% !important;
    }

}

@media (max-width: 767px) {

    .slider-list .slider-item > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .slider-list .slider-item > .container-fluid > .slider-left {
        order: 1 !important;
        float: none !important;
        width: 30% !important;
        flex: 0 0 30% !important;
        text-align: left !important;
        padding-top: 15px !important;
    }

    .slider-list .slider-item > .container-fluid > .slider-container {
        order: 2 !important;
        float: none !important;
        width: 40% !important;
        flex: 0 0 40% !important;
    }

    .slider-list .slider-item > .container-fluid > .slider-right {
        order: 3 !important;
        float: none !important;
        width: 30% !important;
        flex: 0 0 30% !important;
        text-align: right !important;
        padding-top: 15px !important;
    }

    .slider-list .slider-left,
    .slider-list .slider-right {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}

@media (max-width: 767px) {

    .ls-answers tbody td {
        text-align: left !important;
    }
    
}

@media (min-width: 768px) {
    body {
        font-size: 16.5px;
    }

    .question-title,
    .question-text,
    .answer-container,
    .answer-item,
    .control-label,
    label,
    .form-control,
    .form-control-static,
    .ls-label-question,
    .ls-questionhelp,
    .survey-welcome,
    .group-description {
        font-size: 16.5px;
    }
}

/* Teilfragen von Matrixfragen fett */
.ls-answers tbody .answertext {
    font-weight: 700 !important;
}