/******************
    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
*/
/**********************************************************************************************************************************************************************************************/
/*FONTS*/
body, body .ls-answers .ls-heading th, body .ls-answers th {
    color: #290033 !important;
}
.group-title {
    font-size: 1.5rem !important;
}

.group-description {
    font-size: 1.1rem !important;
}

.ls-label-question  {
    font-size: 1.2rem !important;
}

.ls-answers {
    color: #290033 !important;
}

.answertext {
    font-weight: 400 !important;
    font-size: 1rem !important;
}

.answer-text {
    font-size: 1rem !important;
}

.slider-left, .slider-right {
    font-size: 0.9rem !important;
}

.answer-container .btn {
    color: #290033 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/**********************************************************************************************************************************************************************************************/
/* Containers */
.question-container {
    position: relative; /* Wichtig für die Positionierung des Pseudo-Elements */
    border-left: 1px solid #DCDDDE;
    padding-bottom: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.question-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* Dicke des unteren Rands */
    background: linear-gradient(to left, transparent, #DCDDDE, transparent);
}

.question-title-container {
    border-left: 6px solid #f18700;
}

.text-info {
    margin: 0px !important;
}


/**********************************************************************************************************************************************************************************************/
/* Slider */
.slider-untouched .slider-track {
    height: 2px !important;
}

.slider-untouched .slider-selection {
    background-color: #DCDDDE !important;
}

.slider-untouched .slider-track-high {
    background-color: #DCDDDE !important;
}

.slider-touched .slider-track {
    height: 3px !important;
}

.slider-touched .slider-selection {
    background-color: #808285 !important;
}

.slider-touched .slider-track-high {
    background-color: #BBBDC0 !important;
}


.slider-touched .slider-handle {
    background-color: #f18700 !important;
}

.slider-touched .tooltip-inner {
    color: #f18700 !important;
}

.slider-untouched .slider-handle {
    background-color: #BBBDC0 !important;
}


/**********************************************************************************************************************************************************************************************/
/* Buttons */
.btn-primary, #outerframeContainer .checkbox-item input[type="checkbox"] + label::before {

    border: 1px solid #54295d;
    box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.1) !important;
}

.btn-primary:hover, #outerframeContainer .checkbox-item input[type="checkbox"]:hover + label::before {
    background-color: #FFF !important;
    border: 3px solid #54295d !important;
    box-shadow: 0px 0px 12px rgba(84, 41, 93, 0.5) !important;
    transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle, #outerframeContainer .checkbox-item input[type="checkbox"]:checked + label::before {
    color: #FFF !important;
    background-color: #54295d !important;
    border: 3px solid #54295d !important;
    box-shadow: 0px 0px 12px rgba(84, 41, 93, 0.5), inset 0 0px 6px rgba(255, 255, 255, 0.4) !important;
    transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

/* checkbox hook and label */
#outerframeContainer .checkbox-item input[type="checkbox"]:checked + label::after {
    color: #FFF;
}

.checkbox-label, .control-label {
    color: #290033 !important;
    font-weight: normal !important;
}
#outerframeContainer .checkbox-item input[type="checkbox"]:checked + label {
    font-weight: bold !important;
}

/* Radiobuttons */
input[type="radio"]:checked + label::before {
    background-color: #54295d !important; /* Ersetzen Sie dies durch Ihre gewünschte Farbe */
    border-color: #54295d !important; /* Ersetzen Sie dies durch Ihre gewünschte Farbe */
}

input[type="radio"]:checked + label::after {
    background-color: #fff !important; /* Ersetzen Sie dies durch Ihre gewünschte Farbe */
}
    
/* Special */
.top-padding {
    padding-top: 25px !important;
}
    
/* Button submit / next / back */
#ls-button-submit {
    background-color: #54295d !important;
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.1) !important;
    border: 3px !important;
}

#ls-button-submit:hover {
    background-color: #54295d !important;
    border: 3px !important;
    box-shadow: 0px 0px 30px rgba(84, 41, 93, 0.5) !important;
}

/* DatePicker */
.fruity_twentythree .input-group-addon {
    background-color: #f18700 !important;
}

/* Welcome Page */
#welcome-container {
    max-width: 90% !important;
}


/**********************************************************************************************************************************************************************************************/
@media print {
  .row list-radio {
    display: inline-block !important;
    margin-right: 10px !important;
  }
  
  /*AG 31082025
  /* Custom Button Base - damit unsere neuen Klassen die Bootstrap-Standards überschreiben */
/* Wichtig: Überprüfen Sie im Browser-Inspektor, ob diese Stile auch wirklich angewendet werden.
   Möglicherweise müssen Sie noch spezifischer sein (z.B. .question-item .btn-yes-green-inactive) */

/* Inaktiver Ja-Button */
.btn-yes-green-inactive {
    background-color: #e6ffe6 !important; /* Sehr helles Grün */
    color: #006600 !important; /* Dunkelgrün */
    border-color: #008000 !important; /* Grün */
}

/* Aktiver Ja-Button */
.btn-yes-green-active {
    background-color: #008000 !important; /* Grün */
    color: #ffffff !important; /* Weiß */
    border-color: #006600 !important; /* Dunkelgrün */
}

/* Inaktiver Nein-Button */
.btn-no-red-inactive {
    background-color: #ffe6e6 !important; /* Sehr helles Rot */
    color: #800000 !important; /* Dunkelrot */
    border-color: #cc0000 !important; /* Rot */
}

/* Aktiver Nein-Button */
.btn-no-red-active {
    background-color: #cc0000 !important; /* Rot */
    color: #ffffff !important; /* Weiß */
    border-color: #800000 !important; /* Dunkelrot */
}

/* Optional: Hover-Effekte für die custom Buttons */
.btn-yes-green-inactive:hover,
.btn-no-red-inactive:hover {
    filter: brightness(0.9); /* Leicht abdunkeln beim Hover */
    text-decoration: none; /* Keine Unterstreichung, falls es ein Link ist */
}
.btn-yes-green-active:hover,
.btn-no-red-active:hover {
    filter: brightness(1.1); /* Leicht aufhellen beim Hover */
    text-decoration: none;
}