/******************
    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
*/

a {
    font-size:1em;
    transition: all .25s;
}

a:hover {
    text-decoration:underline;
}

#welcome-container {
    max-width:100%;
}

.survey-name.large-heading {
    margin-block-start:1em;
    margin-block-end: 1em;
}

#survey-nav.navbar {
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2);
}

#surveys-list-jumbotron{
        border-bottom: 1px solid #dadada;
        padding-bottom:20px;
}

#surveys-list-jumbotron span.h3 {
    margin-top: 20px;
    display: block;
    font-size: 40px;
    font-weight: 300;
}

#surveys-list-jumbotron .img-fluid {
    
    max-width: 229px;
    margin-bottom: 40px;

}

#surveys-list-jumbotron .img-fluid svg {
    width:100%
}

#surveys-list-container .survey-contact {
    display:none;
}
#surveys-list-container > .col-12 > .row {
    margin-bottom:40px;
    text-align:center;
    
}

#surveyListFooter {
    margin-top:200px;
}

#surveyListFooter img {
    max-width:150px;
  
}

#surveyListFooter,
#surveyListFooter a {
    font-size:10px;
}

.privacy {
    margin-bottom:40px;
}

.group-container .group-title {
    margin-bottom:40px;
}

.question-text {
    display:flex;
}

.question-text .asterisk.ri-asterisk {padding:0 5px;}

.question-container:not(.no-style) .question-help-container { 
    border-left: 5px solid #696969;
    background-color: #f4f4f4;
    color: #353635;
    padding: 1em;
    margin: 1em 0 2em 13px;
    
}

.question-help-container.col-12 {
    width: calc(100% - 2em + 13px);
}

/* CSS für ausklappbaren Hilfetext */
.ls-questionhelp {
    position: relative;
    overflow: hidden;
}

.ls-questionhelp.collapsed {
    max-height: 110px;
}

.ls-questionhelp.expanded {
    max-height: none;
}

.help-toggle-button {
    display: none;
    background: transparent;
    border:none;
    padding: 5px 10px;
    margin-top: 10px;
    cursor: pointer;
    color: #e3000f;
    font-size: 0.9em;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.help-toggle-button.visible {
    display: flex;
}

.help-toggle-button:hover {
    background: rgb(233,233,233)
}

.help-toggle-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.help-toggle-button.expanded svg {
    transform: rotate(180deg);
}

.help-fade {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(244,244,244,0), rgba(244,244,244,1));
    pointer-events: none;
}



/* ISO-Check (EL/GL) - Sternchen ausblenden */
form[action="/index.php/827154"] .asterisk.ri-asterisk, 
form[action="/index.php/173389"] .asterisk.ri-asterisk {
    display:none !important;
}
/* ISO-Check (EL/GL) - Umfragetitel */
form[action="/index.php/827154"] .survey-name.large-heading, 
form[action="/index.php/173389"] .survey-name.large-heading {
    font-size:2.25em;
}
/* ISO-Check (EL/GL) - Fragetitel und Beschreibung */
form[action="/index.php/827154"] .group-container .group-title,  
form[action="/index.php/173389"] .group-container .group-title {
    font-weight: 300;
    font-size:2.25rem;
    line-height:24px;
    margin-bottom:80px;
    display:inline-block;
    margin-top: 1em;
    margin-bottom: 60px;
    color: #333;
    margin-right:10px;
}
form[action="/index.php/827154"] .group-container .group-description,  
form[action="/index.php/173389"] .group-container .group-description {
    font-weight:300;
    display:inline-block;
    font-size:2.25rem;
    line-height:24px;
    color:#666;
}

/* ISO-Check (EL/GL) - 1. Fragegruppe */

form[action="/index.php/827154"] #group-0 .group-container, 
form[action="/index.php/173389"] #group-0 .group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

form[action="/index.php/827154"] #group-0 .question-container,
form[action="/index.php/173389"] #group-0 .question-container {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

form[action="/index.php/827154"] #group-0 .group-title,
form[action="/index.php/173389"] #group-0 .group-title {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Text mit Ellipsis kürzen */
form[action="/index.php/827154"] #group-0 .question-title-container .question-text,
form[action="/index.php/173389"] #group-0 .question-title-container .question-text {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Oder alternativ: Text umbrechen und Breite begrenzen */
form[action="/index.php/827154"] #group-0 .question-title-container .question-text,
form[action="/index.php/173389"] #group-0 .question-title-container .question-text {
    max-width: 600px; 
    word-wrap: break-word;
    white-space: normal;
}

/* Spezifisch für Eingabefelder (Text-Inputs) */
form[action="/index.php/827154"] #group-0 .text-item input.form-control,
form[action="/index.php/173389"] #group-0 .text-item input.form-control {
    max-width: 450px; 
}

/* Hilfetext-Container anpassen */
form[action="/index.php/827154"] #group-0 .question-help-container,
form[action="/index.php/173389"] #group-0 .question-help-container {
    max-width: 800px; 
    margin: 0 auto;
}

/* Dropdown-Menü Breite anpassen */
form[action="/index.php/827154"] #group-0 .list-question-select,
form[action="/index.php/173389"] #group-0 .list-question-select {
    max-width: 450px; /* Anpassen nach Bedarf */
}

/* Lange Option-Texte in Dropdowns kürzen */
form[action="/index.php/827154"] #group-0 .list-question-select option,
form[action="/index.php/173389"] #group-0 .list-question-select option {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gesamtes Formular Layout optimieren */
form[action="/index.php/827154"] #group-0,
form[action="/index.php/173389"] #group-0 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    form[action="/index.php/827154"] #group-0 .question-title-container .question-text,
    form[action="/index.php/173389"] #group-0 .question-title-container .question-text {
        max-width: 100%;
        white-space: normal;
    }
    
    form[action="/index.php/827154"] #group-0 .text-item input.form-control,
    form[action="/index.php/173389"] #group-0 .text-item input.form-control {
        max-width: 100%;
    }
}

/* Hover-Effekt für gekürzte Texte */
form[action="/index.php/827154"] #group-0 .question-text:hover,
form[action="/index.php/173389"] #group-0 .question-text:hover {
    position: relative;
    z-index: 1;
}

form[action="/index.php/827154"] #group-0 .question-text:hover::after,
form[action="/index.php/173389"] #group-0 .question-text:hover::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: normal;
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

form[action="/index.php/827154"] #group-0  .btn.dropdown-toggle,
form[action="/index.php/173389"] #group-0  .btn.dropdown-toggle {
    border-width: 2px;
    border-color: #6E748C;
    min-width:350px;
}

form[action="/index.php/827154"] #group-26,
form[action="/index.php/173389"] #group-24 {
    display:block !important;
}

#question6166 .question-text {
    justify-content:center;
}

/* Bootstrap-Elemente */

.btn.dropdown-toggle{min-width:300px}

/* Klassen für nebeneinander anzeigende Felder */
.side-by-side-desktop {
  display: inline-block;
  vertical-align: top;
}

.side-by-side-desktop.responsible {
  width: 33.33333%;
  margin-right: 15px;
}

.side-by-side-desktop.duedate {
  width: 33.33333%;
  margin-right: 15px;
}

.side-by-side-desktop.status {
  width: 33.33333%;
}

.side-by-side-desktop.effectiveness {
    width: calc(66.66666% + 7px);
    margin-right: 15px;
}

.side-by-side-desktop.rating {
    width:33.33333%;
}

.side-by-side-desktop.status::after {
    content:" ";
    display:block;
    margin-bottom:120px;
}

/* Responsives Design */
@media (max-width: 768px) {
  .side-by-side-desktop {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Bootstrap-Selectpicker Korrektur */
.side-by-side-desktop .bootstrap-select {
  width: 100% !important;
}

.side-by-side-desktop.list-dropdown .answer-item{
    width:100% !important;
}

.side-by-side-desktop .btn.dropdown-toggle {
    border-width: 2px;
    height: 43px;
    border-color: #6E748C;
}

/* Datepicker Fix */
.duedate .col-sm-auto {
    flex: 1 0 auto;
    
}

.form-control {
    line-height:19px;
}

/* Utility-Classes */
w-50 {
    width: 50% !important;
}

mb-0 {
    margin-bottom:0 !important;
}