/******************
    User custom CSS
    ---------------
    
    NICHT ÄNDERN - Nur befugte Administratoren des LDBV dürfen diesen Quellcode bearbeiten.
    
    Jede Änderung an dem Quellcode der BASISVORLAGE wirkt sich auf alle anderen 72er Vorlagen aus
    
    Stand der BASISVORLAGE: 08.07.2025 - Version 6.00
    
    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
*/

.table-bordered>thead>tr>th {
    border: 1px solid #dadada;   /*  hellgrau  */
}

.table-bordered>thead>tr>td {
    border: 1px solid #dadada;   /*  hellgrau  */
}

/* #################### general css ################### */d

body {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;   /* schwarz */
    background-color: #888;   /* grau, war vorher #999;  grau */
    margin: 0 !important;
    padding: 0 !important;
}

body .top-container {
    margin: 0;
}

.text-info {
    color: #000 !important;   /* schwarz */
}

.text-danger {
    color: #e00000 !important;  /*  rot, war vorher  #a94442; rotbraun) */
}

div.save-survey-form {
    padding: 15px;
}

img {
    max-width: 100%;
}

.top-container .progress {
    background-color: #eee;   /*  hellstgrau, war vorher #f0f0f0;  hellstgrau */
}

.table>:not(:first-child) {
    border-top: none; 
}

.asterisk.float-start {
    margin-right: 5px;
    font-size: 90%;
    vertical-align: top;
}

.leftheader.information-item {
    display: none !important;
}

.rightheader.information-item {
    display: none !important;
}

.group-description {
    text-align: center;
}

div.answer-item.dropdow-item.language-item {
    width: 200px;
}

.other-text-item {
    padding: 0px;
}

.othertext-label-checkox-container {
    margin-bottom: 15px;
}

@media only screen and (max-width: 768px) {
    .list-dropdown.question-container .ls-answers.answer-item div:nth-child(1),
    .list-dropdown.question-container .ls-answers.answer-item div:nth-child(3).text-item.other-text-item {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #navbar ul.nav.navbar-nav {
        padding: 7.5px 0px;    
        border-bottom: 1px solid #dadada  /*  hellgrau, war vorher #dee2e6;  hellgrau */
    }
}

.radio-item label::after {
    background-color: #000;   /* schwarz */
}

.checkbox-item label::after {
    color: #000;   /* schwarz */
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;   /* dunkelgrau */
}

.form-control:focus {
    border-color: #000;   /* schwarz */
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6);
}

@media (max-width: 767px) {
    .date.question-container .date-item  div.col-12:nth-child(2),
    .date.question-container .date-item  div.col-12:nth-child(4) {
        display: none;
    }
}

.navbar-toggler {
    background-color: #fff !important;   /* weiß */
}

.navbar-toggler:focus {
    background-color: #eee;   /* hellstgrau */
}

li.radio-item, 
li.checkbox-item, 
li.radio-text-item, 
li.checkbox-text-item {
    margin-bottom: 14px !important;
}

.numeric-multi ul.number-list li.ls-group-remaining.ls-group-dynamic  {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
}

@media (max-width: 768px) {
    .numeric-multi ul.number-list li.ls-group-remaining.ls-group-dynamic div:nth-child(1)  {
        text-align: center;
    }
}

.numeric-multi ul.number-list li.ls-group-total.ls-group-dynamic {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: auto;
}

@media (max-width: 768px) {
    .numeric-multi ul.number-list li.ls-group-total.ls-group-dynamic div:nth-child(1) {
        text-align: center;
    }
}

.ls-group-remaining div:nth-child(1),
.ls-group-total div:nth-child(1) {
   text-align: center; 
}

/* #################### first page start ################### */

.survey-welcome {
    margin-top: 15px;
}

.question-count-text {
    margin-top: 15px;
}

/* Privacy */

.privacy {
    margin-top: 15px;
    padding: 15px 0;
    margin: 15px 1px;
    border: 1px solid #eee;   /* hellstgrau */
    background-color: #eee;   /* hellstgrau */
}

.privacy-block div:nth-child(2) {
    padding-top: 20px;
}

.privacy-heading.h4.text-primary {
    font-size: 14px;
    color: #000 !important;   /* schwarz */
    font-weight: bold;
}

p.ls-privacy-body {
    margin: 15px 0 0 0;
    font-style: italic;
}

/* Privacy policy */

.panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    background-color: transparent;
}

.panel-primary {
    border-color: transparent;
}

.panel-primary>.panel-heading {
    color: #000;   /* schwarz */
    background-color: transparent;
    border-color: transparent;
    padding: 15px 0;
}

.panel-body {
    padding: 5px 0;
}

.panel-footer {
    padding: 10px 0;
    background-color: transparent;
    border-top: transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

input#datasecurity_accepted {
    vertical-align: top;
}

/* #################### first page end ################### */

/* logo header */

.logo-bar {
    margin-top: 0;
    padding: 15px 0;
    display: flex;
}

.navbar-logo-left {
    padding: 0px 10px;
}

.navbar-logo-middle {
    padding: 0px 10px;
    text-align: center;
}

.navbar-logo-right {
    padding: 0px 10px;
    text-align: right;
}

/* survey heading */

.survey-name {
    font-weight: 700;
    line-height: 130%;
    font-size: 1.8rem;
}

/* progress-bar */

.progress-bar {
    background-color: #000;   /* schwarz */
}

/* #################### group start ################### */

.group-outer-container,
.group-container {
    margin-bottom: 0;
}

.group-title {
    font-size: 1.4rem;
    margin: 0;
    margin-bottom: 15px;
    padding: 0px 15px;
}

.well {
    justify-content: center;
    background-color: transparent;
    margin-top: 0px;
    padding: 0px 15px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* #################### group end ################### */

/* #################### question start ################### */

.question-container {
    background-color: transparent;
    padding-bottom: 15px;
    border: 1px solid #aaa;
}

.question-title-container {
    margin-bottom: 15px;
}

.question-number,
.question-code {
    font-weight: normal;
    float: none;
    margin: 0;
}

.question-text {
    font-size: 120%;
}

.question-help-container {
    font-size: 12.6px;
    margin-top: 10px;
    color: #888 !important;   /* grau */
}

.question-valid-container {
    color: #000 !important;   /* schwarz */
    padding-left: 0;
    padding-right: 0;
    font-size: 12.6px;
    margin-top: 5px;
}

@media only screen and (max-device-width: 760px) {
    .ls-questionhelp, .help-block {
        font-size: 11.34px;
    }
}

.ls-answers tbody .answertext {
    text-align: left;
}

.array-flexible-row .ls-answers .answertextright {
    text-align: right;
}

/* #################### question end ################### */

/* #################### particular question start ################### */

.choice-5-pt-radio li.radio-item {
    margin-right: 15px;
}

.choice-5-pt-radio .radio-item label::before,
.list-radio .radio-item label::before,
.list-with-comment .radio-item label::before {
    top: 3px;
}

.choice-5-pt-radio .radio-item label::after,
.list-radio .radio-item label::after,
.list-with-comment .radio-item label::after {
    top: 6px;
}

.multiple-opt .checkbox-item label::before .multiple-opt-comments .checkbox-item label::before {
    top: 3px;
}

.multiple-opt .checkbox-item label::after,
.multiple-opt-comments .checkbox-item label::after {
    top: 4px;
    background-color: transparent;
}

.array-multi-flexi .checkbox-item label::after {
    left: 0px;
}

.multiple-opt .checkbox-item label::before,
.multiple-opt-comments .checkbox-item label::before {
    top: 3px;
}

div.gender-button,
div.yesno-button {
    column-gap: 10px;
}

@media only screen and (max-width: 468px) {
    .date .date-item div:nth-child(1).col-3 {
        width: 100%;
    }
}

/* #################### particular question end ################### */

/* #################### dropdown & link start ################### */

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #ccc;
}

.form-change-lang.dropdown.nav-item {
    list-style: none;
    text-align: center;
}

.form-change-lang .nav-link.dropdown-toggle {
    color: #888;   /* grau */
    margin: 15px 0px;
    padding: 0;
}

li.form-change-lang .dropdown-menu.dropdown-menu-end.show {
    inset: 0px 43% auto auto !important;
}

/* #################### dropdown & link end ################### */

/* #################### footer navbar start ################### */

#navbar {
    padding: 0 !important;
}

#survey-nav .container-fluid {
    padding: 0;
}

ul.navbar-right {
    padding: 0;
}

.navbar-item-left a,
.navbar-item-middle a,
a:link {
    color: #888;   /* grau */
}

#navbar ul.nav.navbar-nav {
    width: 100%;
}

#navbar li.navbar-item-middle {
    text-align: center;
}

#navbar li.navbar-item-right {
    text-align: right;
}

.navbar-item-right a.ls-link-clearall {
    color: #888;   /* grau */
    text-decoration: none;
}

.nav-item-fload {
    list-style: none;
}

.nav-item-fload a {
    color: #888;   /* grau */
    text-align: center;
}

.list-group-itemindex-item.index-item-seen.index-item-unanswered.index-item-current {
    background-color: #000;   /* schwarz */
    color: #fff;   /* weiß */
}

#survey-nav .container-fluid {
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #survey-nav .container-fluid {
        padding-top: 15px;
    }

    div.gender-button,
    div.yesno-button {
        width: 100%;
    }
}

.navbar-toggler {
    color: rgba(0, 0, 0, .55);
    background-color: #eee;   /* hellstgrau */
    border-color: rgba(0, 0, 0, .1);
}

span.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

@media screen and (max-width: 768px) {
    .navbar-item-left a {
        text-align: center;
    }

    #survey-nav {
        border-bottom: none !important;
    }
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #fff !important;   /* weiß */
    background-color: #000 !important;   /* schwarz */
}

.navbar-item-middle li.list-group-itemindex-item a {
    color: #000;   /* schwarz */
}

/* #################### footer navbar end ################### */

/* #################### footer start ################### */

footer {
    text-align: center;
    padding: 20px;
}

footer a {
    color: #000 !important;   /* schwarz */
}

/* #################### footer end ################### */

label::after {
    background-color: transparent;
}

tr.ls-odd,
.array-flexible-column tr.answers-list:nth-child(even) {
    background-color: #eee;   /*  hellstgrau, war vorher #f0f0f0;  hellstgrau */
}

tbody,
td,
tfoot,
th,
thead,
tr,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border: none;
}

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:nth-child(n+3),
.btn-group>:not(.btn-check)+.btn {
    border-radius: 0;
}

.form-select:focus {
    border-color: #000;   /* schwarz */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, .6) !important;
    outline: 0;
}

.table-hover>tbody>tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #dadada;   /* hellgrau */
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: #dadada;   /* hellgrau */
    color: #000;   /* schwarz */
}

.ls-input-group-extra {
    vertical-align: top;
    padding: 1rem 1.2rem;
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
        inset: auto 70px auto auto;
    }
}

@media only screen and (max-width: 760px),
(max-device-width: 1024px) and (min-device-width: 768px) {

    table.ls-answers>tbody>tr td.answer-item.radio-item,
    table.ls-answers>tbody>tr td.answer-item.checkbox-item {
        border-bottom: 1px solid #dadada;   /* hellgrau */
        padding-left: 30px;
        padding-top: 10px;
        padding-bottom: 0px;
    }
}

/*--------------------start button--------------------- */

.btn {
    font-size: 110%;
    border-radius: 4px;
    padding: 6px 12px;
}

.btn-primary {
  background-color:#e5f4ff; /*  hellblau  - Farbe unmarkierter Buttons  04.09.24 */
  border-color:#0078CF;     /* bayernblau */
  color:#000;   /* schwarz */
}

.btn-group-lg>.btn,
.btn-lg {
    line-height: 1.3333333;
    padding: 10px 16px;
}

/*btn btn-primary*/

/*next-btn*/
.ls-move-submit-btn:active,
.ls-move-submit-btn.active,
.ls-move-submit-btn:focus,
.ls-move-submit-btn.focus,
.ls-move-submit-btn:active:focus,
.ls-move-submit-btn.active:focus,
.ls-move-submit-btn:active.focus,
.ls-move-submit-btn.active.focus,

.ls-move-next-btn:active,
.ls-move-next-btn.active,
.ls-move-next-btn:focus,
.ls-move-next-btn.focus,
.ls-move-next-btn:active:focus,
.ls-move-next-btn.active:focus,
.ls-move-next-btn:active.focus,
.ls-move-next-btn.active.focus,

.ls-move-submit-btn:hover,
.ls-move-submit-btn:active:hover,
.ls-move-submit-btn.active:hover,
.ls-move-next-btn:hover,
.ls-move-next-btn:active:hover,
.ls-move-next-btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.ls-move-submit-btn,
.ls-move-next-btn {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

/*gender/yes/no... : default*/
.gender-button .btn-primary,
.yes-no .btn-primary,
.bootstrap-buttons-div .button-item {
    color: #000;   /* schwarz */
    background-color: #eee;   /* hellstgrau */
    border-color: #eee;   /* hellstgrau */
}

/*gender/yes/no... : hover*/
.gender-button .btn-primary:hover,
.yes-no .btn-primary:hover,
.bootstrap-buttons-div .button-item:hover {
    color: #fff;   /* weiß */
    background-color: #777;   /* dunkelgrau */
    border-color: #777;   /* dunkelgrau */

}

.bootstrap-select > 
.dropdown-toggle.bs-placeholder {
  color: #333;    /*  dunkelgraue Schrift vor Auswahl Bootstrap Dropdown */
}

.btn-outline-secondary {
  color: #333;   /*  dunkelgraue Schrift bei Auswahl Bootstrap Dropdown */
}

.btn-check:active+.btn-primary, 
.btn-check:checked+.btn-primary, 
.btn-primary.active, .btn-primary:active, 
.show>.btn-primary.dropdown-toggle {
    color: #fff !important;   /* weiß */
    background-color: #777 !important;   /* dunkelgrau */
    border-color: #777 !important;   /* dunkelgrau */
}

/*gender/yes/no... : active*/
.gender-button .btn-primary:active,
.gender-button .btn-primary.active:hover,
.gender-button .btn-primary:focus,
.gender-button .btn-primary.active,
.gender-button .btn-primary.active:focus,
.yes-no .btn-primary:focus,
.yes-no .btn-primary.active,
.yes-no .btn-primary.active:hover,
.yes-no .btn-primary.active:focus,
.bootstrap-buttons-div .button-item:focus,
.bootstrap-buttons-div .button-item.active,
.bootstrap-buttons-div .button-item:focus {
    color: #fff;   /* weiß */
    background-color: #777;   /* dunkelgrau */
    border-color: #777;   /* dunkelgrau */
}

/*date picker*/
.date-timepicker-group .btn-primary,
.date-timepicker-group .btn-primary:hover,
.date-timepicker-group .btn-primary:active,
.date-timepicker-group .btn-primary:focus,
.date-timepicker-group .btn-primary:active:hover,
.date-timepicker-group .btn-primary:active:focus,
.date-timepicker-group .btn-primary:active.focus,
.date-timepicker-group .btn-primary.hover,
.date-timepicker-group .btn-primary.active,
.date-timepicker-group .btn-primary.focus,
.date-timepicker-group .btn-primary.active:hover,
.date-timepicker-group .btn-primary.active:focus,
.date-timepicker-group .btn-primary.active.focus {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

/*btn btn-default*/

/*previous-btn*/
.ls-move-previous-btn:hover,
.ls-move-previous-btn:active:hover,
.ls-move-previous-btn.active:hover,
.ls-move-previous-btn:active,
.ls-move-previous-btn.active,
.ls-move-previous-btn:focus,
.ls-move-previous-btn.focus,
.ls-move-previous-btn:active:focus,
.ls-move-previous-btn.active:focus,
.ls-move-previous-btn:active.focus,
.ls-move-previous-btn.active.focus {
    color: #000;   /* schwarz */
    background-color: #eee;   /* hellstgrau, war vorher #e6e6e6;  hellstgrau */
    border-color: #888;   /* grau, war vorher #adadad;  grau  */
}

.ls-move-previous-btn {
    color: #000;   /* schwarz */
    background-color: #fff;   /* weiß */
    border-color:  #888;   /* grau, war vorher #adadad;  grau  */
}

/*###############Upload start###########*/
/*upload: Save Changes...*/
.upload.btn-primary {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload.btn-primary:hover,
.upload.btn-primary:active:hover,
.upload.btn-primary.active:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload.btn-primary:active,
.upload.btn-primary.active,
.upload.btn-primary:focus,
.upload.btn-primary.focus,
.upload.btn-primary:active:focus,
.upload.btn-primary.active:focus,
.upload.btn-primary:active.focus,
.upload.btn-primary.active.focus {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

/*upload popup start*/
/*start: upload: Select file...*/
.upload-div .btn {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload-div .btn:active,
.upload-div .btn.active,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn:focus,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn.focus {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload-div .btn:hover,
.upload-div .btn:active:hover,
.upload-div .btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload-files .uploadedfiles td a.btn-primary {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.upload-files .uploadedfiles td a.btn-primary:hover,
.upload-files .uploadedfiles td a.btn-primary:active,
.upload-files .uploadedfiles td a.btn-primary:focus {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

fieldset div:nth-child(3) a.btn {
    color: #fff;   /* weiß */
    background-color: #e00000;   /*  rot, vorher  #dc3545;  rötlich */
    border-color: #e00000;    /*  rot, vorher  #dc3545;  rötlich */
}

/*end: upload: Select file...*/

/*upload: You can upload...*/
.uploader .alert-info {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border: 0px;
}


/*file upload popup save-changes*/
.file-upload-modal-footer .btn {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}


.file-upload-modal-footer .btn:active,
.file-upload-modal-footer .btn.active,
.file-upload-modal-footer .btn:focus,
.file-upload-modal-footer .btn.focus,
.file-upload-modal-footer .btn:active:focus,
.file-upload-modal-footer .btn.active:focus,
.file-upload-modal-footer .btn:active.focus,
.file-upload-modal-footer .btn.active.focus {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.file-upload-modal-footer .btn:hover,
.file-upload-modal-footer .btn:active:hover,
.file-upload-modal-footer .btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.file-upload-modal-footer .btn, 
.file-upload-modal-footer .btn:active, 
.file-upload-modal-footer .btn.active {
    color: #ffffff !important;   /* weiß */
    border-color: #5cb85c !important;   /* hellgrün */
    background-color: #5cb85c !important;   /* hellgrün, war vorher #4cae4c hellgrün 2 */
}

.file-upload-modal-footer .btn:hover, 
.file-upload-modal-footer .btn:active:hover, 
.file-upload-modal-footer .btn.active:hover {
    color: #ffffff !important;   /* weiß */
    border-color: #398439 !important;   /* dunkelgrün */
    background-color: #398439 !important;   /* dunkelgrün, war vorher #449d44  dunkelgrün 2 */
}

/*upload popup end*/

/*###############Upload end###########*/

.save-survey-input .btn,
.modal-dialog .btn {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.save-survey-input .btn:hover,
.save-survey-input .btn:active:hover,
.save-survey-input .btn.active:hover,
.modal-dialog .btn:hover,
.modal-dialog .btn:active:hover,
.modal-dialog .btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.btn-info {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

.btn-info:hover {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
}

/*--------------------end button--------------------- */

/*--------------------start sortables----------------*/

.list-samechoiceheight .sortable-list {
    border: 1px dotted #ccc;
    padding: 5px;
}

/*unsorted*/
.sortable-choice .ls-choice.sortable-item {
    background-color: #dadada;   /* hellgrau */
    border: 1px solid #dadada;   /* hellgrau */
    margin-bottom: 5px;
}

/*sorted*/
.sortable-rank .ls-choice.sortable-item {
    color: #fff;   /* weiß */
    background-color: #000;   /* schwarz */
    border-color: #000;   /* schwarz */
    margin-bottom: 5px;
}

/*--------------------end sortables----------------*/
.slider-list .slider.slider-untouched .slider-handle {
    background-color: #000;   /* schwarz */
}

.slider-touched .tooltip-inner,
.slider-touched .slider-handle {
    background-color: #000;   /* schwarz */
}


.slider-touched .tooltip.top .tooltip-arrow {
    border-top-color: #000;   /* schwarz */
}

.slider-handle {
    background-color: #000;   /* schwarz */
    background-image: linear-gradient(to bottom, #111 0%, #111 100%);
}

.slider-selection {
    background-image: linear-gradient(to bottom, #111 0%, #111 100%);
}

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px) {
    .array-flexible-row .ls-answers .answertextright {
        text-align: left;
    }
}

/* 2021-06-23: Add visual separator for dual scale questions */
@media only screen and (min-width: 768px) {

    .array-flexible-dual-scale col.col-answers,
    .array-flexible-dual-scale col.separator,
    .array-flexible-duel-scale col.col-answers,
    .array-flexible-duel-scale col.separator {
        width: auto !important;
    }

    .array-flexible-dual-scale .header_separator,
    .array-flexible-dual-scale .dual_scale_separator,
    .array-flexible-duel-scale .header_separator,
    .array-flexible-duel-scale .dual_scale_separator {
        width: 4px !important;
        padding: 0 !important;
        background-color: grey;
        border-color: grey;
    }

    .array-flexible-dual-scale .table-hover>tbody>tr:hover>* {
        --bs-table-accent-bg: transparent;
        color: var(--bs-table-hover-color);
    }
}

/*****************************************************************/
/***************************Trivender*****************************/
/*****************************************************************/



/*****************************************************************/
/****************************start general css********************/
/*****************************************************************/

body {
    padding-top: 0px !important;
}

.font-noto {
    font-family: Arial, sans-serif; /* ---------- Auswahl Schriftart ---------- */
}

/* Styles for Bootstrap tooltips */
span.tooltip {
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    color: #e00000;  /*  rot, war vorher  #a94442; rotbraun) */
    opacity: 1;
    font-size: inherit;
    position: initial;
    display: inline;
}

/* Add class "tooltipquestion" at the "Display" section of your question! */
.tooltipquestion li.radio-item label, 
.tooltipquestion li.checkbox-item label {
    width: 100%;
}

.answer-item .tooltip .tooltip-inner {
    max-width: 75%;
    margin: auto;
}
/* Make sure sliders with tooltips still use same defaults */
.answer-item .slider .tooltip .tooltip-inner {
    max-width: initial;
}

/* Align modal on top */
.modal::before {
    height: auto;
    vertical-align: top;
}

a, 
a:link {
    color: #000000 !important;  /* schwarz, war vorher  #0078CF !important; /* bayernblau, war vorher #006bcf;  bayernblau - vorher #666;  */
	text-decoration: none;
}

a:hover, 
a:focus {
    color: #0078CF;     /* bayernblau, war vorher #006bcf;  bayernblau  */
    text-decoration: underline;
    background-color: transparent;
}

.btn {
    text-decoration: none !important;
}

.text-danger {
    color: #e00000 !important;   /* rot  */
}

.input-error.question-container {
    border: 1px solid #e00000 !important;  /*  rot, war vorher  #a94442; rotbraun) */
}


.question-valid-container,
.question-help-container {
    color: #016ecf !important;    /*  blau  */
}

/* -------------------- start border-radius css ---------------- */

.dropdown-menu,
.checkbox-item label::before,
.checkbox-item label::after,
.form-control,
.modal-content,
.question-container {
    border-radius: 0px;
}

/* -------------------- end border-radius css ---------------- */

/* -------------------- start outline css ---------------- */

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
}

.radio-item input[type="radio"]:focus+label::before {
    outline: none;
}

.checkbox-item input[type="checkbox"]:focus+label::before,
.checkbox-item input[type="radio"]:focus+label::before {
    outline: none;
}

input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus {
    outline: none;
}

/* -------------------- end outline css ---------------- */

.form-select,
.form-control {
    border-color: #000000;   /* schwarz */
}

.form-select:focus,
.form-control:focus {
    border-color:  #0078CF;   /* bayernblau, war vorher #006bcf;  bayernblau  */
    box-shadow: inset 0 1px 1px rgba(0,120,207,.075), 0 0 8px rgba(0, 120, 207, .6) !important;
}

.radio-item label::before,
.checkbox-item label::before {
    border-color: #000000;   /* schwarz */
}

.radio-item label::after {
    background-color: #0078CF;   /* bayernblau */
}

.radio-item input[type="radio"]:checked+label::before {
    border-color: #0078CF;   /* bayernblau */
}

.checkbox-item label::after {
    color: #0078CF;   /* bayernblau */
}

.checkbox-item input[type="checkbox"]:checked+label::before {
    border-color: #0078CF;   /* bayernblau */
}

/*****************************************************************/
/****************************end general css**********************/
/*****************************************************************/

/*****************************************************************/
/****************************start top navbar*********************/
/*****************************************************************/

span.header-text h1.survey-name {
    font-size: 17px;   
}

.header-wrapper, 
.header-overlay {
    position: relative !important;
    height: auto;
    max-height: 1000px;
}

.header-wrapper {
    margin-bottom: 15px;
    background-color: #0078CF; /* bayernblau Überschriftenzeile linker und rechter Rand */
    position: fixed;
    top: 0px;
    z-index: 100;
    width: 100%;
    box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.1);
}

.header-overlay {
    background-color: #fff;  /* weiß Überschriftenzeile Hintergrundfarbe */
    padding: 15px 0;
    margin-right: 5%;
    margin-left: 5%;
}

.header-overlay .container {     
    margin: 0;
    max-width: 100%;
}

.header-overlay .container:nth-child(1) {
    display: inline-flex;   
}

.header-overlay .container:nth-child(2) {
    padding-top: 13px;   
}

.header-customer-brand {
    text-align: left;
    display: inline-flex;
    align-items: flex-end;
    justify-content: left;
    padding-left: 0;
    height: 75px;   /*--- war 70px ----*/
}

.header-authority-brand {
    text-align: right;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 0;
    height: 75px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
}

.header-title {
    display: inline-flex;
    height: 75px /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */;
    align-items: flex-end;
    color: #0078CF;   /* bayernblau */
    line-height: 1.2em;
    font-family: "Arial", serif;
    font-size: 17px;
    font-weight: 700; /* 700 = dicke Schrift */
}

.header-text {
    width: 100%;
    text-align: left;
    color: #0078CF;  /* bayernblau  Farbe Umfragetitel links oben */
    font-family: "Arial", serif;
    font-size: 17px; /* Schrifthöhe Umfragetitel links oben */
    font-weight: 700;  /* 700 = dicke Schrift */
}

/* ---------- Behördenname: Start ---------- */
.authority-text {
    display: inline-flex;
    height: 75px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
    align-items: flex-end;
    color: #0078CF; /* bayernblau Farbe Behördenname rechts oben */
    line-height: 1.2em;
    text-align: right;
    margin-right: 15px;
    font-family: "Arial", serif; /* "Times New Roman", serif; */
    font-size: 17px; /* Schrifthöhe Behördenname rechts oben */
    font-weight: 700; /* 700 = dicke Schrift */
} 

.navbar-logo-left {
    margin-right: 15px;
    text-align: left;
}

.navbar-logo-right {
    margin-left: 15px;
    text-align: right;
}

img.logo-left {
    max-height: 75px;  /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
    min-width: 50px; /* ---------- Diesen Wert für abweichende Logos ändern ---------- */
    width: auto;
    
}

img.logo-right {
    max-height: 75px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
    min-width: 50px; /* ---------- Diesen Wert für vom Behördenlogo abweichende Logos ändern ---------- */
    width: auto;
}

.navbar-logo-right {
    margin-left: 0px;
    padding-left: 0px;
}

div#survey-nav {
    background-color: transparent !important;
    border: none !important;
}

#navbar ul.nav.navbar-nav {
    justify-content: end;
}

.form-change-lang .nav-link.dropdown-toggle {
    margin: 7px 0px;
}

/*****************************************************************/
/****************************end top navbar***********************/
/*****************************************************************/

/*****************************************************************/
/****************************start progress bar*******************/
/*****************************************************************/

.top-container .top-content {
    padding: 1em 0px;
}

.top-container .progress {
    border-radius: 4px;
    background-color: #e5f4ff; /*  hellblau */
}

.progress .progress-bar {
    font-size: 13px;
    background-color: #0078CF;  /* bayernblau Farbe Fortschrittsbalken Umfrage */
}

.progress-bar-success {
  background-color: #0078CF;     /* bayernblau Farbe Fortschrittsbalken Umfrage */
}


/*****************************************************************/
/****************************end progress bar*******************/
/*****************************************************************/

/*****************************************************************/
/*********************start question container********************/
/*****************************************************************/

.question-container {
    border: 2px solid #0078CF; /* bayernblau (war vorher grau und 1px) */
}

.question-title-container {
    padding-top: 0.8em; /* reduce the top padding of question-title container */
    padding-bottom: 0.8em; /* reduce the bottom padding of question-title container */
    border-bottom: 2px solid #0078CF; /* bayernblau nur unten */ 
}

.ls-answers {
    padding-top: 12px; /* reduce the top padding of answer-container */
    padding-bottom: 12px; /* reduce the bottom padding of answer-container */
}

tr.ls-odd, .array-flexible-column tr.answers-list:nth-child(even) {
    background-color: #e5f4ff;   /*  hellblau */
}

.table-hover>tbody>tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #e5f4ff;  /*  hellblau */
    border: 2px solid #0078CF; /* when we hover the array question so the border appears - bayernblau  */
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: #e5f4ff;  /*  hellblau */
    color: #000000;   /* schwarz */
}

.array-flexible-dual-scale .table-hover>tbody>tr:hover, 
.array-flexible-dual-scale tr.answers-list:hover, 
.array-flexible-dual-scale .array-flexible-column tr.answers-list:hover {
	border: none; /* Hovering over <tr> elements in dual array scale questions hides the border.*/
}

.array-flexible-dual-scale td.dropdown-item:hover {
    background-color: #e5f4ff; /* Hovering over 'dual-array' scale question <td> elements changes the background-color to light blue */
    border: 2px solid #0078CF;  /* Hovering over 'dual-array' scale question <td> elements shown border - bayernblau */;
}

/*****************************************************************/
/********************end question container***********************/
/*****************************************************************/

/*****************************************************************/
/***************************start all button**********************/
/*****************************************************************/

.btn {
    border-radius: 4px;
}

/* -------------------- start next/submit ---------------- */

.ls-move-submit-btn:active,
.ls-move-submit-btn.active,
.ls-move-submit-btn:focus,
.ls-move-submit-btn.focus,
.ls-move-submit-btn:active:focus,
.ls-move-submit-btn.active:focus,
.ls-move-submit-btn:active.focus,
.ls-move-submit-btn.active.focus,
.ls-move-next-btn:active,
.ls-move-next-btn.active,
.ls-move-next-btn:focus,
.ls-move-next-btn.focus,
.ls-move-next-btn:active:focus,
.ls-move-next-btn.active:focus,
.ls-move-next-btn:active.focus,
.ls-move-next-btn.active.focus,
.ls-move-submit-btn:hover,
.ls-move-submit-btn:active:hover,
.ls-move-submit-btn.active:hover,
.ls-move-next-btn:hover,
.ls-move-next-btn:active:hover,
.ls-move-next-btn.active:hover {
color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.ls-move-submit-btn,
.ls-move-next-btn {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

/* -------------------- end next/submit ---------------- */

/* -------------------- start gender/yes/no ---------------- */

.gender-button .btn-primary,
.yes-no .btn-primary,
.bootstrap-buttons-div .button-item {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.btn-check:active+.btn-primary, 
.btn-check:checked+.btn-primary, 
.btn-primary.active, .btn-primary:active, 
.show>.btn-primary.dropdown-toggle {
    color: #fff !important;   /* weiß */
    background-color: #0078CF !important;   /* bayernblau */
    border-color: #0078CF !important;   /* bayernblau */
}

.gender-button .btn-primary:hover,
.yes-no .btn-primary:hover,
.bootstrap-buttons-div .button-item:hover {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.gender-button .btn-primary:active,
.gender-button .btn-primary.active:hover,
.gender-button .btn-primary:focus,
.gender-button .btn-primary.active,
.gender-button .btn-primary.active:focus,
.yes-no .btn-primary:focus,
.yes-no .btn-primary.active,
.yes-no .btn-primary.active:hover,
.yes-no .btn-primary.active:focus,
.bootstrap-buttons-div .button-item:focus,
.bootstrap-buttons-div .button-item.active,
.bootstrap-buttons-div .button-item:focus {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

/* -------------------- end gender/yes/no ---------------- */

/* -------------------- start date picker ---------------- */

.date-timepicker-group .btn-primary,
.date-timepicker-group .btn-primary:hover,
.date-timepicker-group .btn-primary:active,
.date-timepicker-group .btn-primary:focus,
.date-timepicker-group .btn-primary:active:hover,
.date-timepicker-group .btn-primary:active:focus,
.date-timepicker-group .btn-primary:active.focus,
.date-timepicker-group .btn-primary.hover,
.date-timepicker-group .btn-primary.active,
.date-timepicker-group .btn-primary.focus,
.date-timepicker-group .btn-primary.active:hover,
.date-timepicker-group .btn-primary.active:focus,
.date-timepicker-group .btn-primary.active.focus {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

/* -------------------- end date picker ---------------- */

/* -------------------- start previous buttons ---------------- */

.ls-move-previous-btn:hover,
.ls-move-previous-btn:active:hover,
.ls-move-previous-btn.active:hover,
.ls-move-previous-btn:active,
.ls-move-previous-btn.active,
.ls-move-previous-btn:focus,
.ls-move-previous-btn.focus,
.ls-move-previous-btn:active:focus,
.ls-move-previous-btn.active:focus,
.ls-move-previous-btn:active.focus,
.ls-move-previous-btn.active.focus {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.ls-move-previous-btn {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

/* -------------------- end previous buttons ---------------- */

/* -------------------- start upload buttons ---------------- */

.upload.btn-primary {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload.btn-primary:hover,
.upload.btn-primary:active:hover,
.upload.btn-primary.active:hover {
    color: #fff !important;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload.btn-primary:active,
.upload.btn-primary.active,
.upload.btn-primary:focus,
.upload.btn-primary.focus,
.upload.btn-primary:active:focus,
.upload.btn-primary.active:focus,
.upload.btn-primary:active.focus,
.upload.btn-primary.active.focus {
    color: #fff !important;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-div .btn {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-div .btn:active,
.upload-div .btn.active,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn:focus,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn.focus {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-div .btn:hover,
.upload-div .btn:active:hover,
.upload-div .btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.uploader .alert-info {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.file-upload-modal-footer .btn {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.file-upload-modal-footer .btn:active,
.file-upload-modal-footer .btn.active,
.file-upload-modal-footer .btn:focus,
.file-upload-modal-footer .btn.focus,
.file-upload-modal-footer .btn:active:focus,
.file-upload-modal-footer .btn.active:focus,
.file-upload-modal-footer .btn:active.focus,
.file-upload-modal-footer .btn.active.focus {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.file-upload-modal-footer .btn:hover,
.file-upload-modal-footer .btn:active:hover,
.file-upload-modal-footer .btn.active:hover {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-files .uploadedfiles td a.btn-primary {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-files .uploadedfiles td a.btn-primary:hover,
.upload-files .uploadedfiles td a.btn-primary:active,
.upload-files .uploadedfiles td a.btn-primary:focus {
    color: #fff !important;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.upload-files ul.files-list fieldset div:nth-child(3) a.btn-danger {
    color: #fff !important;   /* weiß */
    background-color: #e00000;   /*  rot, war vorher #d9534f;  rostrot 1 */
    border-color: #e00000;       /*  rot, war vorher #d43f3a;  rostrot 2 */
}

.upload-files ul.files-list fieldset div:nth-child(3) a.btn-danger:hover {
    color: #fff !important;   /* weiß */
    background-color: #e00000;   /*  rot, war vorher #c9302c;  rostrot 3 */
    border-color: #e00000;       /*  rot, war vorher #ac2925;  rostrot 4 */
}

/* -------------------- end upload buttons ---------------- */

.save-survey-input .btn,
.modal-dialog .btn {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.save-survey-input .btn:hover,
.save-survey-input .btn:active:hover,
.save-survey-input .btn.active:hover,
.modal-dialog .btn:hover,
.modal-dialog .btn:active:hover,
.modal-dialog .btn.active:hover {
    color: #fff !important;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

.btn-info {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;   /*  hellblau */
    border-color: #0078CF;   /* bayernblau */
}

.btn-info:hover {
    color: #fff;   /* weiß */
    background-color: #0078CF;   /* bayernblau */
    border-color: #0078CF;   /* bayernblau */
}

/*--------------------end button--------------------- */

/*--------------------start sortables----------------*/

/*unsorted*/
.sortable-choice .ls-choice.sortable-item {
    color: #000000;   /* schwarz */
    background-color: #e5f4ff;  /* hellblau Hintergrundfarbe rechts vor Sortierung */
    border-color: #0078CF; /* bayernblau */  
}

/*sorted*/
.sortable-rank .ls-choice.sortable-item {
    color: #fff;   /* weiß */
    background-color: #0078CF;  /* bayernblau Hintergrundfarbe rechts nach Sortierung */
    border-color: #0078CF;  /* bayernblau */
}

/* -------------------- end sortables ---------------- */

/* -------------------- start slider ---------------- */

.slider-list .slider.slider-untouched .slider-handle {
    background-color: #2c5a93;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, 
.bs-tooltip-top .tooltip-arrow:before {
    border-top-color: #2c5a93;
}

.slider-touched .tooltip-inner,
.slider-touched .slider-handle {
    background-color: #2c5a93;
}

.slider-touched .tooltip.top .tooltip-arrow {
    border-top-color: #2c5a93;
}

.slider-handle {
    background-color: #2c5a93; /* bayernblau */
    background-image: linear-gradient(to bottom, #2c5a93 0%, #2c5a93 100%); /* bayernblau + dunkelblau  */
}

.slider-selection {
    background-image: linear-gradient(to bottom, #2c5a93 0%, #2c5a93 100%);
}

/* -------------------- end slider ---------------- */

/*****************************************************************/
/***************************end all buttons***********************/
/*****************************************************************/

/*****************************************************************/
/***************************start responsive**********************/
/*****************************************************************/

@media (min-width: 1200px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl, 
    .container-xxl {
        max-width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .navbar-item-right a {
        text-align: center;
    }
}

@media only screen and (max-width: 768px) {
    .header-overlay .container:nth-child(1) {
        flex-direction: column;
    }
}

@media only screen and (max-width: 768px) {
    .header-customer-brand {
        padding: 0 0 15px 0;
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    .header-customer-brand, 
    .header-title, 
    .header-authority-brand, 
    .authority-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .header-customer-brand {
        margin-bottom: 25px;
    }
    
    .header-authority-brand {
        row-gap: 12px;
    }
    
    .authority-text {
        order: 1;
        text-align: center;
        margin: 0;
    }
    
    #survey-nav .container-fluid {
        margin-top: 36px;
    }
}
/*****************************************************************/
/***************************end responsive************************/
/*****************************************************************/

/* Hide empty items at "print answers" overview.
 * Always keep this at the end of this CSS file. */
.question-container-printanswers .emptyanswer
{
    display: none;
}