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

.text-long .question-title-container {
    display: none;
}

::placeholder {
  color: #fff !important;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #fff !important;
}

.survey-name {
        font-size: 3rem;
        text-align: left !important;
}

.completed-text p {font-size: 1.5em;
    color: #f58220;
    width: 100%;
    text-align: center;}

.text-danger, .card-link, .url-wrapper-survey-return a {color: #f58220 !important;}

body .top-container {
    margin-top: 20px;
}

table.ls-answers {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.survey-description,
.survey-description p {
    font-size: 1.2em;
    padding-bottom: 25px;
    word-wrap: unset;
    -webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    -o-hyphens: unset;
    hyphens: none;
}

.radio-item label::before,.radio-item label::after {display:none;}

.radio-item .ls-label-xs-visibility, .checkbox-item .ls-label-xs-visibility {
    overflow: visible;}

.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
   left: unset;
   bottom: 5px;
    margin-left: 0;
/*    color: #000;*/
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    z-index: 99;
    flex-direction: column;
        padding: 0;
        text-indent: unset;
}

.dir-ltr .ls-answers td.radio-item, .dir-ltr .ls-answers td.checkbox-item {
    padding-left: 0;
    padding-right: 0;
}

.table>thead {
    vertical-align: bottom;
    display: flex;
    justify-content: flex-end;
}

.answertext {
    display: flex;
    flex-direction: row;
}

.answer-item {width: 30px !important; height: 30px !important;}

.answertext p {width:100%;text-align:left;    font-size: 1.3em;}
.answertext span {width:100%;text-align:left; word-break: normal;
    hyphens: none;}
.ls-label-question  i {font-style:normal !important}

.beschreibung {font-size:1em;padding-right: 30px;}

.table-hover>tbody>tr:hover>* {
    color: #fff;
}

.radio-list {
    border-bottom: 1px solid #f58220 !important;
    border-top: 0 !important;
}

.separator {
    width:10px !important;
}

.answertext, .answertext p {
    color: #fff;
}

.table>:not(:first-child) {border: 0 !important;}


#survey-nav,
#top-container {
	background: #fff !important;
}

.dsheader {color: #fff;}

#outerframeContainer,
body {
	background: #000f47;
}

p {
    margin-bottom: 0;
}

.survey-name {
	color: #f58220;
}

.navbar-light .navbar-nav .nav-link {
    color: #f58220;
}

.btn-primary {
    color: #fff;
    background-color: #f58220;
    border-color: #f58220;
}

.survey-description {
    text-align: left !important;
}

.text-info {
	color: #fff !important;
}

.ls-questionhelp  {
    color: #000f47 !important;
}

.progress-bar {
	    background-color: #f58220;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    margin-bottom: 2rem;
    color: #f58220;
    text-align: left !important;
}

.space-col {
    margin-top: 0;
    margin-bottom: 0;
}

.well {
    color: #fff;
    min-height: 20px;
    padding: 0 0 0 11px;
    margin-bottom: 20px;
    background-color: transparent;
    text-align: left !important;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.well p {text-align:left !important}

.question-container {
    margin-bottom: 2em;
    background: transparent;
    color: #444;
    border-bottom: 0;
}

.question-title-container {
    background: transparent !important;
}

.ls-label-question  {
    font-size: 1.5rem;
    font-style: normal !important;
    font-weight: 300 !important;
}

.dir-ltr .ls-questionhelp {
    margin-left: 1.2em;
    color: #fff !important;
}

.question-help-container {
    border: 0 !important;
}

table, tbody, td, tfoot, th, thead, tr {
    border: 0 !important;
}

.answer-container {
    border-width: 0;
    border-style: solid;
    padding-top: 0.5em;
    padding-bottom: 20px;
    border-bottom: 0px solid #f58220;
    background: transparent;
}

.answers-list.radio-list {
    background: transparent;
}

.ls-heading .answer-text:nth-child(1),
.answers-list .answer-item:nth-child(1),
.ls-heading .answer-text:nth-child(2),
.answers-list .answer-item:nth-child(2),
.ls-heading .answer-text:nth-child(3),
.answers-list .answer-item:nth-child(3),
.ls-heading .answer-text:nth-child(4),
.answers-list .answer-item:nth-child(4),
.ls-heading .answer-text:nth-child(5),
.answers-list .answer-item:nth-child(5),
.ls-heading .answer-text:nth-child(6),
.answers-list .answer-item:nth-child(6) {
    background-color: #f58220 !important; 
    color:#fff;
    border-left: 2px solid #2c3e50 !important;
    border-right: 2px solid #2c3e50 !important;
        margin-bottom: 20px;
    }
    
.ls-heading .answer-text:nth-child(7),
.answers-list .answer-item:nth-child(7),
.ls-heading .answer-text:nth-child(8),
.answers-list .answer-item:nth-child(8),
.ls-heading .answer-text:nth-child(9),
.answers-list .answer-item:nth-child(9),
.ls-heading .answer-text:nth-child(10),
.answers-list .answer-item:nth-child(10),
.ls-heading .answer-text:nth-child(11),
.answers-list .answer-item:nth-child(11),
.ls-heading .answer-text:nth-child(12),
.answers-list .answer-item:nth-child(12),
.ls-heading .answer-text:nth-child(13),
.answers-list .answer-item:nth-child(13),
.ls-heading .answer-text:nth-child(14),
.answers-list .answer-item:nth-child(14) {
    background-color: #fff !important; 
    color:#2c3e50;
    border-left: 2px solid #2c3e50 !important;
     border-right: 2px solid #2c3e50 !important;
         margin-bottom: 20px;
    }
    
.answer-item:has(input[type="radio"]:checked) {
 background-color: transparent !important;
    color: #f58220;
    border: 1px solid #f58220 !important;
}

.answer-item.is-checked {
  background-color: transparent !important;
    color: #f58220;
    border: 1px solid #f58220 !important;
}

.answer-item.is-checked .ls-label-xs-visibility {
        bottom: 6px;
    left: 1px;
    color: #fff;
}

.ls-heading::before {content:'schwach';color:#fff;}
.ls-heading::after {content:'stark';color:#fff;}

.ls-heading {display:flex;padding-right: 0px;}

.ls-heading .answer-text {display:none;}

.ls-heading td {width: 230px;}

.answertext p {width:35%;padding-right:30px;}

/*FLEX HACK*/
.ls-answers tbody .control-label {
    text-align: right;
    width: 980px;
        padding: 0 0 10px 0;

}

.answers-list.radio-list {
    background: transparent;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.answers-list {padding:10px 0 0px 0;}


@media (max-width: 720px) {
    .answertext p {
    width: 100%;
    padding-right: 10px;
    }
    .beschreibung {
    font-size: 1em;
    padding-right: 10px;
    display: inline-flex;
    }
    .answertext {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    }
    
    .survey-name {
    font-size: 2em;
    text-align: left !important;
    }
    
    .answers-list.radio-list {
    background: transparent;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    }
    
    .dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
    bottom: 0px;}
    
    .ls-answers > tbody > tr.ls-even:hover {
        background-color: transparent !important;
    }
    
    .answers-list .control-label {
    text-align: right;
    width: 100%;
    padding: 0 0 20px 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    }
    
    .navbar-brand {display:flex !important}
    
    body .top-container {
    margin-top: 10px;
    }
    
}

.text-item, .form-control, .form-control:focus {   
    width: 100% !important;
  height: 150px !important;
  box-sizing: border-box;
  background-color: #727fba !important;
  resize: none;
  color:#fff !important;
  border: 0!important;
  border-radius:0 !important;
}

.text-item {padding:0 !important}

.save-message .text-info p, .save-message .text-info,.save-message p {
	color: #000 !important;
}

.save-survey-row,
.save-survey-label,
.load-survey-label,
.survey-contact {
 color: #fff !important;
 }