/* NAVIGATIONSLEISTE */


/* kein Strich zwischen Navbar und Top Container */
.border-bottom {
    border-bottom: 1px solid #ffffff !important;
}


/* TOP CONTAINER
darin findet sich nur die Progress Bar */


#limesurvey {
        background-color:#ffffff;
        padding-top:25px;
        padding-bottom:50px;

    }
    
    
    
   
.top-container {
    margin-top:0px;
    margin-bottom:50px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#eb9929;
    border:none !important;
    position:fixed;
    display:none;
   
    
}

.top-container .container {
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px !important;
    padding-bottom:0px;
    background-color:transparent;
    
}




/* height of the progress bar */ 

.top-container .progress {
    height: 20px;
    background-color:#eb9929;
    border: 0px solid #005575 !important;
    
}

.top-container .progress-bar {
    background-color:#ffffff !important;
    color:#eb9929;
}


.group-container {
        padding-left:30px;
    padding-right:30px;
    
}

/*erforderlich, wenn top-container / progress-bar mit position:fixed */

.outerframe {
    margin-top:0px;
    padding-top:0px;
    font-size:18px;
}

.survey-form-container, .form {
       padding-top:10px;
}


#firstpage-changelang {
   padding-top:20px;
}

p {font-size:18px;}
li {font-size:18px;}
  
  /* Startseite */
#welcome-container {
    padding:30px !important;
    margin-top:0;
    color:#005575 !important;
}

.text-info {
    color:#005575 !important;
    text-align:left !important;
    
}


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

.survey-description a:visited {
  color:#6699AC !important;
}

.survey-description a:hover {
  color:#eb9929 !important;
}

.survey-description a:active {
  color:#eb9929 !important;
}


/* PRIVACY */


.privacy {
    min-height: 20px;
    background:none !important;
    color:#ffffff !important;
    margin-top:50px;
    font-size:18px;
}

.privacy-block {
    background:#eb9929;
    padding-left:30px;
}

.privacy .form-check {
    padding-left:30px;
    padding-right:30px;
    background:#eb9929;
}

.privacy .form-check-label {
    margin-left:10px;
    font-weight:normal !important;
    font-size:18px;
}

.privacy a {
    padding-left:10px;
    font-weight:normal !important;
    color:#005575;
}

.privacy .form-check-label a:visited {
  color:#6699AC !important;
}

.privacy .form-check-label a:hover {
  color:#005575 !important;
}

.privacy .form-check-label a:active {
  color:#005575 !important;
} 



/* Buttons ohne abgerundete Ecken */

.ls-move-btn {
    border-radius:0;
}

.ls-move-btn:hover {
    color:#ffffff;
}




.survey-name {color:#eb9929;
    margin-bottom:40px;
    text-align:left !important;
}




/* QUESTIONS */


/* Fragen-Box */

.outerwrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:0;
    margin-right:0;
    float: none;
    clear: both;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.35)
}


/* Abstände zwischen einzelnen Fragen */



.question-container {
        background-color: #ffffff;
        border:none;
        width=100%;
                margin-left:0px;
        margin-right:0px;
        padding-bottom:0px;
        
        margin-bottom:20px;
        
    }
    
/* Breite Answer-Container muss Breite entsprechend mit calc - Breite hier abgezogen - definiert werden */

.question-title-container {
background-color: #ffffff;  
color:#005575;
margin:0;
padding:0;
padding-right:10px;
font-weight:normal;
font-size:18px;
  float: left; 
   width:220px;
    clear:left
}

/* Längere Fragen oberhalb der Antwort-Box anzeigen, so dass auch ein Help Text möglich ist; alternativ könnte man in question.twig top / bottom vertauschen, damit Hilfstexte immer unterhalb - gesamte Breite - Frage /Antwort angezeigt werden. */

.text-box .question-title-container {
       width:100%;
      margin-top:25px !important;
}


.text-box .question-title-container, 
.text-box .answer-container {
       width:100%;
       margin-top:10px;
}


.ls-answers tbody .answertext {
    text-align:left !important;
    margin-bottom:0 !important;
}

.ls-answers tbody .answertext p {
    font-weight:bold !important;
    margin-bottom:0; !important;
}

.ls-answers tbody ul {
    padding-left:0 !important;
    margin-left:1rem !important;
}

.ls-answers tbody .radio-list li {
    margin-right:0 !important;
    margin-bottom:1em;
}

@media only screen and (max-width: 600px) {
    
    .question-title-container, .answer-container {
       width:100%;
       padding-left:0 !important;
       padding-right:0 !important;
       margin-bottom:10px;
        }
}



.group-title {
text-align:left;

margin-bottom:10px;
margin-top:20px;
background: transparent;
}



/* FELD ZWISCHEN FRAGEN UND ANTWORTEN */

/* Warnung */

.alert {
    background-color:#eb9929;
    color:#ffffff;
}

/* Hilfe */

.group-container .question-help-container {
    background-color:#ffffff;
    margin-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    ;
}
.ls-questionhelp {
    font-size:18px;
    color:#eb9929;
    padding-left:5px;
    ;
}

/* Warnmeldung mandatory */

.group-container .question-valid-container {
    background-color:#ffffff;
    margin-bottom:0px;
    padding-left:30px;
    padding-right:30px;
    color:#eb9929 !important;
}
.em_num_answers, .emtip, .error {
    font-size:18px;
    color:#005575;

}

/* Farbe vom Rufezeichen und Abstand Rufezeichen Text*/
.question-valid-container {display:none}
.group-container .question-valid-container .fa {
                padding-right:5px;}


/* hide red asterisk for mandatory questions */
.asterisk {display: none;}





/* ANTWORTEN */


@media only screen and (min-width: 600px) {
    

.answer-container {
    
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-bottom:0 !important;
    float:left !important;
  width:calc(100% - 220px);
}
}
.answer-container .container {
    padding-left:0;
    padding-right:0;
}

/* Auswahl-Buttons - links bündig, aber rechts Abstand zum nächsten*/

.form-check {
    padding-left:0;
    padding-right:20px;
    border-radius:0;
}




/* BUTTONS */

.btn-primary:hover, .btn-primary:focus {
    background: #eb9929 !important;
    border: 1px solid #005575 !important;
    filter: none !important;
    color: #ffffff !important;
}

.btn-check:checked+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #eb9229 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    filter:none !important;
}


.btn-check .btn-primary:focus, .btn-check:focus+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #005575 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    filter:none !important;
}
.btn-check:focus:checked + .btn-primary, .btn-check .btn-primary:focus:checked {
    background-color: #eb9929 !important;
     border: 1px solid #005575 !important;
    color: #fff !important;
    filter:none !important;
 }

.btn-check .btn-primary:active, .btn-check:active+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #eb9929 !important;
    box-shadow: none !important;
    color: #fff !important;
    filter:none !important;
}






/* Matrix Text in blau */

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #005575;
    --bs-table-striped-bg: #d1e1e1;
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: #eb9929;
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: #eb9929;
    border-color: #d1e1e1;
    color: #005575;
    margin-bottom: 1rem;
    vertical-align: top;
    width: 100%;
}

/* horizontale Linien raus */

.table-bordered>:not(caption)>* {
    border-width: 1px 0;
}


th, td {
    color:#005575;
}

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

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



/* SINGLE- & MULTIPLE CHOICE LISTS */

/* Mehr Abstand zwischen einzelnen Auswahlmöglichkeiten */
.answer-container .radio-item, 
.answer-container .checkbox-item,
.answer-container .question-item,
.answer-container .answer-item,
.answer-container .mb-1 {
               margin-bottom:5px !important;}

/* Mehr Abstand zwischen Checkbox und Text */
.answer-container .radio-item label, 
.answer-container .checkbox-item label {
    padding-left:10px;
}


/* nur Kommentarfeld in Multiple Choice with Comment */
#limesurvey .comment-box-no-text .comment-item .form-control
  {
    margin-left:20px ;
    margin-top:-25px ;
  }
  
#limesurvey .comment-box-no-text .row,
#limesurvey .SSI-topics .row
{
    
    padding-left:10px !important;
    padding-right:20px;
  }
  
  



/* REGISTRATION FORM */

/* Breite von Checkbox-Antworten festlegen, damit alle untereinander angezeigt werden */

.registration-form .list-unstyled.col-12.col-md-2,
.registration-form .list-unstyled.col-md-4.col-12{
    width:170px;
    padding-right:0;
    margin-right:0;
}

/* Other: nicht anzeigen */ 
.registration-form .checkbox-item.othertext-label-checkox-container {display:none}

.registration-form ul {margin-bottom:0}

.ls-answers {padding:0}


/* Mehrere Fragen in einer Zeile - WICHTIG: dann müssen CSS Media Queries definiert werden*/

.float-left {
    float: left;
    clear:left;
}
.float-right {
    float:right;
}

/* 2 Fragen in einer Zeile */
.2Q_50-50_left {
    float: left; 
    width:50%;
    clear:left
  }
.2Q_50-50_right {
    float:right;
    width: 50%;
    }
    
/* 3 Fragen in einer Zeile */

.Q_10_left{
    float: left; 
    width:20%;
    clear:left
  }

.Q_20_left {
    float: left; 
    width:20%;
    clear:left
  }

.Q_26_left {
    float: left; 
    width:26%;
    clear:left
  }
  
.Q_33.3left {
    float: left; 
    width:33.3%;
    clear:left
  }

.Q_50_left {
    float: left; 
    width:50%;
    clear:left
  }


.Q_10 {
    float:left;
    width:10%;
    } 
    
    
.Q_11 {
    float:left;
    width:11%;
    } 

.Q_20 {
    float:left;
    width: 20%;
    }
 
.Q_26 {
    float:left;
    width: 26%;
    }
    
    
.Q_33.3 {
    float: left; 
    width:33.3%;
  }
  
  
.Q_40 {
    float:left;
    width: 40%;
    } 
    
.Q_50 {
    float:left;
    width: 50%;
    } 

   
    
    /* weiß ich nicht mehr */
.Q-page {
    width:100%
  }


/*Submit-Button eingerückt*/
.text-start {padding-left:40px !important;}
.text-end {padding-right:40px !important;



/* Checkbox-Label wird bei Multiple Choice unter den anderen dargestellt -> so nicht mehr */
.checkbox-item.othertext-label-checkox-container {
    padding-top:0;
}


/* Links nicht in nicht passendem blau */
a {
    color:#eb9929 !important;
}

a:visited {
  color:#6699AC !important;
}

a:hover {
  color:#eb9929 !important;
}

a:active {
  color:#eb9929 !important;
}