body.SPD-Vorlage_final{
    --bs-root-font-size: 1rem;
    --question-font-size: 1.2rem; 
    max-width: 900px;
}

.SPD-Vorlage_final .survey-logo{
    max-width: 12.5rem;
    height: auto;
    display: block;
    margin: 1.25rem auto 2rem auto;
}
.SPD-Vorlage_final #dynamicReloadContainer .surveyLogo-container{
    display: none;
}

.brand-logo .top-container .top-content{
    padding-top: 0em;
}

.SPD-Vorlage_final #welcome-container h1.survey-name{
    margin-top: 3rem !important;
}

.SPD-Vorlage_final .question-text{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5625rem;
}

.SPD-Vorlage_final .top-content.container-fluid{
    padding-left: 0;
    padding-right: 0;
}

.SPD-Vorlage_final {
    --color-primary :#e3000f;
}

.SPD-Vorlage_final #navigator-container{
    flex-direction: row;
    justify-content: space-between;
}

.SPD-Vorlage_final #navigator-container div{
    width: auto;
} 

.SPD-Vorlage_final #navigator-container button{
    width: 15rem;
    margin-bottom: 1rem;
} 

.SPD-Vorlage_final #navigator-container button:focus,
.SPD-Vorlage_final #navigator-container button:active{
    font-weight: 700 !important;
    background-color: white !important;
    color: black !important;
    padding: 12px 28px;
}

.SPD-Vorlage_final .question-container{
    background-color: white;
    border: none;
}

.SPD-Vorlage_final .list-group-horizontal{
    flex-direction: column;
}

.SPD-Vorlage_final li:hover{
    color:var(--color-primary);
}

.SPD-Vorlage_final .yesno-button{
    width: 100%;  
}

.SPD-Vorlage_final  .btn-primary{
    color: black;
    background-color: white !important;
}

.SPD-Vorlage_final .btn-check:active + .btn-primary,
.SPD-Vorlage_final .btn-check:checked + .btn-primary,
.SPD-Vorlage_final .show > .btn-primary.dropdown-toggle,
.SPD-Vorlage_final .btn-primary.active,
.SPD-Vorlage_final .btn-primary:active,
.SPD-Vorlage_final .btn-primary:focus,
.SPD-Vorlage_final  .btn-primary:hover{
    color: white !important;
    background-color: black !important;
    border-color: black !important;
    
}

.SPD-Vorlage_final .row.ls-answers.answers-list.radio-list div{
    width: auto;

} 

.SPD-Vorlage_final .col-auto{
    width: 20rem;
}

.SPD-Vorlage_final .dropdown.list-question-select{
    width: 20rem;
}

.SPD-Vorlage_final .dropdown-item.active, .dropdown-item:active{
    background-color: black;
}

.SPD-Vorlage_final input[type="date"], 
.SPD-Vorlage_final input[type="email"], 
.SPD-Vorlage_final input[type="number"], 
.SPD-Vorlage_final input[type="password"], 
.SPD-Vorlage_final input[type="search"], 
.SPD-Vorlage_final input[type="tel"], 
.SPD-Vorlage_final input[type="text"], 
.SPD-Vorlage_final select, 
.SPD-Vorlage_final .question-container textarea, 
.SPD-Vorlage_final .form-inline .form-control, 
.SPD-Vorlage_final select.form-control:not([size]):not([multiple])
.SPD-Vorlage_final .col-auto .form-select,
.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle{
    border: 3px black solid !important;

}

.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle{
    padding: 1rem;
}

.SPD-Vorlage_final .btn-outline-secondary{
    color: black;
}

.SPD-Vorlage_final .btn-outline-secondary:hover{
    color: white;
}

.SPD-Vorlage_final .btn-check .btn-primary:focus,
.SPD-Vorlage_final .btn-check:focus + .btn-primary{
    background-color: white;
    border: 3px solid black;
    color: black;
}

.SPD-Vorlage_final .answer-item.text-item .control-label {
    text-align: left;
}

.SPD-Vorlage_final .ls-answers.checkbox-list.answers-list.row div{
    width: auto !important;
    gap: 0.75rem;
} 

.SPD-Vorlage_final input[type="checkbox"]:checked{
    background-color: white !important;
    color: black !important;
}

.SPD-Vorlage_final .mb-2{
    align-content: center;
}

.SPD-Vorlage_final .upload-button{
    margin-bottom: 1rem;
}

.SPD-Vorlage_final .uploadedfiles tbody tr td,
.SPD-Vorlage_final .upload-item table{
    text-align: left;
}

.SPD-Vorlage_final .upload-button .show > .btn-primary.dropdown-toggle,
.SPD-Vorlage_final .upload-button .btn-primary.active,
.SPD-Vorlage_final .upload-button .btn-primary:active,
.SPD-Vorlage_final .upload-button .btn-primary:focus,
.SPD-Vorlage_final .upload-button .btn-primary:hover{
    color: white;
    background-color: black !important;
    border-color: black !important;
}

.SPD-Vorlage_final .yesno-button .btn-primary:not(:disabled):not(.disabled):active,
.SPD-Vorlage_final .gender .btn-primary:not(:disabled):not(.disabled):active{
    display: inherit;
}

.SPD-Vorlage_final .question.uploadedfiles td{
    white-space: nowrap;      
    overflow:hidden;  
    text-overflow: ellipsis;
    max-width: 9rem;
    width: 3rem;
    text-align: center;         
}

.SPD-Vorlage_final .date-item .input-group-addon.btn.btn-primary{
    background-color: black !important;
    color: white !important;
    font-size: 1.5rem;
}

.SPD-Vorlage_final .ls-choice.list-group-item.grabable.sortable-enable {
    border-top: 3px solid black;
    border-right: 3px solid black;
    border-left: 3px solid black;
    border-bottom: none;
}

.SPD-Vorlage_final .ls-choice.list-group-item.grabable.sortable-enable:last-child {
    border-bottom: 3px solid black; 
}

.SPD-Vorlage_final .ls-answers tbody .answertext{
    text-align: left;
    font-weight: 700;
}

.SPD-Vorlage_final .answers-list.btn-group{
    display: flex;
    gap: 14px;
    flex-flow: row wrap;
    width: 100%;
}

.SPD-Vorlage_final .form-check:first-child{
    padding-left: 0;

}

.SPD-Vorlage_final .btn-group .answer-item{
    display: inline-flex; 
    align-items: center;  
    white-space: nowrap;
    justify-content: center;
}

.SPD-Vorlage_final .btn-group .ls-icon {
    margin-right: 8px;
}

.SPD-Vorlage_final .btn-group > .btn-group:not(:last-child) > .btn, 
.SPD-Vorlage_final .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.SPD-Vorlage_final .btn-group > .btn-group:not(:first-child) > .btn,
.SPD-Vorlage_final .btn-group > .btn:nth-child(n+3),
.SPD-Vorlage_final .btn-group > :not(.btn-check) + .btn{
    border-radius: 1.75rem !important;
}

.SPD-Vorlage_final .row.ls-answers.answers-list.radio-list .form-check{
    padding-left: 0;
}

.SPD-Vorlage_final .row.list-radio.question-container .container-fluid{
    padding-left: 0;
}

.SPD-Vorlage_final  .survey-welcome p{
    white-space: normal;        
    overflow: visible;          
    max-width: 100%;
    min-width: unset !important;           
    margin: 0;                
    padding: 0;                 
    font-size: 2rem;            
    font-weight: 600;          
    word-wrap: break-word;      
    overflow-wrap: break-word; 

}

.SPD-Vorlage_final .survey-welcome{
    border: none;
    border-radius: 1.75rem;
    padding: 2rem;
    text-align: center;
    font-size: 2rem;
    margin-top: 2rem;
    font-weight: 600;

    display: block;
    width: 100%; 
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.SPD-Vorlage_final .survey-welcome p:not(:empty){
    border: 3px black solid;
}

.SPD-Vorlage_final .completed-wrapper{
    border: 3px black solid;
    padding: 2rem;
    text-align: center;
    font-size: 2rem;
    margin-top: 10rem;
    font-weight: 600;   
}

.SPD-Vorlage_final .number-of-questions.text-muted{
    margin: 2rem 0;
}

.SPD-Vorlage_final .multiple-opt-comments .checkbox-item{
    padding-left: 2.3rem;
}

.SPD-Vorlage_final .row.list-radio .imageselect-list{
    padding-left: 2.3rem;
}

.SPD-Vorlage_final .btn-primary:not(:disabled):not(.disabled):active {
    padding: 10px 30px ;
}

.SPD-Vorlage_final .upload-button .btn,
.SPD-Vorlage_final .upload-button .btn:focus
.SPD-Vorlage_final .upload-button .btn:active{
    font-weight: 700 !important;
}

.SPD-Vorlage_final .btn-primary,
.SPD-Vorlage_final .btn-primary:visited,
.SPD-Vorlage_final .btn-primary:focus,
.SPD-Vorlage_final .btn-primary:active,
.SPD-Vorlage_final .btn-primary:focus-within,
.SPD-Vorlage_final .btn-primary:not(:disabled):not(.disabled).active,
.SPD-Vorlage_final .btn-primary:not(:disabled):not(.disabled):active{
    font-weight: 400;
}

.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle.bs-placeholder,
.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.SPD-Vorlage_final .bootstrap-select > .dropdown-toggle.bs-placeholder:hover{
    color: black;
}

.SPD-Vorlage_final .form-select.form-control.list-question-select:active,
.SPD-Vorlage_final .form-select.form-control.list-question-select:focus,
.SPD-Vorlage_final .btn-outline-secondary:active,
.SPD-Vorlage_final .btn-outline-secondary:focus,
.SPD-Vorlage_final .form-select.form-control.list-question-select:hover,
.SPD-Vorlage_final .btn-outline-secondary:hover{
    background-color:white;
    color: black;
    border-color:black;
}

.SPD-Vorlage_final [data-number="1"] {
    text-align: left;
} 

.SPD-Vorlage_final .imageselect-list .radio-item.no-anwser-item{
    padding-left: 0;
} 

.SPD-Vorlage_final .ls-answers.answer-item.dropdow-item.language-item{
    min-width: 17rem;
}

.SPD-Vorlage_final select.form-control:not([size]):not([multiple]){
    cursor: pointer;
    color: black !important;
}

.SPD-Vorlage_final .btn-outline-secondary:active:focus {
    box-shadow: none;
}

.SPD-Vorlage_final .ls-answers .btn.dropdown-toggle.btn-outline-secondary{
    line-height: 22px !important;
}

.SPD-Vorlage_final  .upload-div .btn{
    height: fit-content;
}

.SPD-Vorlage_final .question.uploadedfiles tr:last-child{
    min-width: 12.5rem;
}

table.uploadedfiles td:last-child {
    min-width: 12.5rem;
}

@media (hover: hover) {
    .SPD-Vorlage_final [type="submit"]:hover,
    .SPD-Vorlage_final [type="submit"].btn-default:hover,
    .SPD-Vorlage_final [type="submit"].btn-primary:hover,
    .SPD-Vorlage_final .modal-footer .btn:hover{
      background-color: transparent !important;
      color: #000 !important;
    }
}

@media (prefers-color-scheme: dark) {

    .tempus-dominus-widget .date-container-days div:not(.no-highlight).active, 
    .tempus-dominus-widget .date-container-decades div:not(.no-highlight).active, 
    .tempus-dominus-widget .date-container-months div:not(.no-highlight).active, 
    .tempus-dominus-widget .date-container-years div:not(.no-highlight).active, 
    .tempus-dominus-widget .time-container-clock div:not(.no-highlight).active, 
    .tempus-dominus-widget .time-container-hour div:not(.no-highlight).active, 
    .tempus-dominus-widget .time-container-minute div:not(.no-highlight).active, 
    .tempus-dominus-widget .time-container-second div:not(.no-highlight).active{
        background-color: var(--color-primary);
    }

    .SPD-Vorlage_final .tempus-dominus-widget {
      background-color: white;
      color: black;
    }
  }
/* **************************************Responsive******************************** */
@media (min-width: 992px) {
    .SPD-Vorlage_final .row-cols-lg-auto > * {
      width: 20rem;
    }
} 

@media screen and (max-width: 575px) {
    .modal-dialog {
        max-width: 90% !important; 
        margin: 10px auto !important;
    }
    .modal.fade .modal-dialog {
      transform: translate(0, 0) !important;
    }

    .SPD-Vorlage_final #navigator-container {
        flex-direction: column-reverse;
        align-items: center;
    } 

    .SPD-Vorlage_final .select-sortable-lists .answers-list {
        display: flex;
        flex-flow: column wrap;
    }

    .SPD-Vorlage_final .select-sortable-lists .col-6{
        width: 100%;
    }

/* **************************************uploadedfiles table******************************** */
    .SPD-Vorlage_final table.uploadedfiles {
        display: block;
        width: 100%;
    }

    .SPD-Vorlage_final table.uploadedfiles thead {
        display: none;
    }
    
    .SPD-Vorlage_final table.uploadedfiles tbody,
    .SPD-Vorlage_final table.uploadedfiles tr,
    .SPD-Vorlage_final table.uploadedfiles td {
        display: block;
        width: 100%;
    }
    
    .SPD-Vorlage_final .question.uploadedfiles td {
        width: 100%;
        max-width: unset;
    }

    .SPD-Vorlage_final table img.uploaded{
        margin: 0 auto;
    }

    .SPD-Vorlage_final table.uploadedfiles td::before {
        content: attr(data-label); 
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
    
  }