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

/* General Layout */
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #FFF;
  margin: 0 !important;
  padding: 0 !important;
}
#outerwrapper {
  margin-top: 12px;
  margin-bottom: 12px;
  float: none;
  clear: both;
  background-color: #FFF;
  background-image: url(../files/boeppel.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.35);
  box-shadow: 0 0 20px rgba(0,0,0,0.35);
}
#outerwrapper #outerwrapper,
#outerwrapper #outerwrapper .container {
  padding: 0;
  width: auto;
  box-shadow: none;
  background: transparent;
}
#outerframeContainer {
  padding: 0;
  width: auto;
}
#dynamicReloadContainer {
	padding: 0;
	margin-left: 2%;
    margin-right: 2%;
}
@media only screen and (max-width: 768px) {
  #outerwrapper {
    margin-top: 0;
    margin-bottom: 0;
  }  
}
@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}
@media (min-width: 992px) {
  .container {
    /*width: 970px;*/
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .container {
    /*width: 1170px;*/
    width: 80%;
  }
}
hr {
  margin: 10px 0;
}
a,
a:link {
  color: #af000b !important;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #af000b !important;
  text-decoration: underline;
}
img {
    max-width: 100%;
}

/* Navbar */
.header-wrapper {
  margin-bottom: 30px;
}
.navbar-toggle {
	float: none;
  margin-right: 0;
}
.navbar-collapse {
	padding: 0;
}
.navbar {
	min-height: 0;
	margin: 0;
	text-align: center;
}
.navbar-header {
  float: none !important;
  padding: 15px 0;
}
.navbar-brand {
  padding: 15px;
  min-height: initial;
/* Joachim Klöfers: Surveyname bricht um bei kleineren Bildschirmen */  
  white-space: normal;
}
h1.surveyname {
  text-align: center;
  font-weight: 700;
  height: auto;
  line-height: 130%;
  font-size: 22px;
  margin: 10;
  color: #af000b;
}
@media only screen and (max-width: 768px) {
  .logo-wrapper,
  h1.surveyname {
    margin-bottom: 15px;
  }
}
.navbar-nav {
	float: none;
	width:100%;
}
.navbar-default {
	background-color: transparent;
	border: none;
}
.navbar-action-link {
	padding: 0;
}
.navbar-collapse.in {
	overflow-y: visible;
}
.navbar-item-left {
	text-align: left;
	padding-left: 0;
}
.navbar-item-middle {
	text-align: center;
}
.navbar-item-right {
	text-align: right;
	padding-right: 0;
}
.navbar-logo-left {
  text-align: center;
}
.navbar-logo-middle {
  text-align: center;
}
.navbar-logo-right {
  text-align: right;
}
.logo-bar {
  margin-top: 0;
  padding: 15px 0;
}

@media only screen and (max-width: 768px) {
	.navbar-collapse {
		padding: 0 15px;
	}
  .navbar-logo-left {
    padding: 0;
    text-align: center;
  }
  .navbar-logo-middle {
    text-align: center;
    padding: 0;
    margin-top: 15px;
  }
  .navbar-logo-right {
    text-align: center;
    padding: 0;
    margin-top: 15px;
  }
  .navbar-item-left {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
  .navbar-item-middle {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
  .navbar-item-right {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
}

/* Language Changer */
.language-wrapper {
  margin: 15px 0;
  text-align: right;
}

/* Progress bar */
.progress-wrapper {
  clear: both;
  float: none;
  margin: 0 auto;
}
.progress {
  background-color: #f0f0f0;
  margin-bottom: 0;
  border-radius: 0;
}
.progress-bar {
  background-color: #365f91;
}

/* Welcome Page */
.text-info {
  color: #fff;
}
.survey-welcome {
  margin-top: 15px;
}
.question-count-text {
  margin-top: 15px;
}

/* Privacy */
.privacy {
  margin-top: 15px;
  padding: 15px 0;
  margin: 15px 1px;
  border: 1px solid #ccc;
  background-color: transparent;
}
p.ls-privacy-body {
  margin: 15px 0 0 0;
  font-style: italic;
}

/* Group layout */
.group-outer-container {
	display: block;
}
.group-title {
  text-align: center;
  font-weight: normal;
  font-size: 140%;
  margin-top: 0;
  margin-bottom: 15px;
}
.group-description {
  margin-top: 0;
  text-align: center;
}

/* Question layout */
.question-number, .question-code {
	float: none;
	margin: 0;
}
.question-container {
    background-color: #fff;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border: 1px solid #aaa;
}
.input-error.question-container {
    border: 1px solid #a94442;
}
.question-title-container {
    padding: 8px 15px;
    background-color: #365f91;
    color: #FFF;
    margin-bottom: 15px;
}
.question-title-container .text-muted {
  color: #FFF;
}
.question-text {
  font-weight: 700;
}
.question-valid-container {
  padding-left: 0;
  padding-right: 0;
  font-style: italic;
  font-size: 100%;
}
.question-number,
.question-code {
  font-weight: normal;
}
.ls-answers tbody .answertext {
  text-align: left;
}
tr.ls-odd,
.array-flexible-column tr.answers-list:nth-child(even) {
  background-color: #c6d9f1;
}
@media only screen and (min-width: 768px) {
  .table-hover > tbody > tr:hover,
  tr.answers-list:hover,
  .array-flexible-column tr.answers-list:hover {
      background-color: #365f91;
      color: #FFF;
  }
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border: 0;
  padding: 4px 8px;
}
.table-bordered {
  border: 0;
}
.asterisk {
  margin-right: 5px;
  font-size: 90% !important;
  vertical-align: top;
}
.asterisk small {
  font-size: 90% !important;
  vertical-align: top;  
}
.input-error .asterisk {
  font-size: 90% !important;
  margin-top: 0;  
}
.text-danger {
    color: #FF5722;
}
.question-help-container {
  font-size: 90%;
  margin-top: 10px;
  color: #365F91;
}
.numeric-multi input.numeric,
.multiple-short-txt input.form-control,
.multiple-short-txt textarea.form-control {
  margin-bottom: 15px;
}
.ls-input-group-extra {
  vertical-align: top;
  padding: 1rem 1.2rem;
}
.array-flexible-row .ls-answers .answertextright {
  text-align: right;
}

/* Navigator */
#navigator-container {
  margin-bottom: 15px;
  padding-bottom: 0;
  margin-top: 30px;
}
.btn {
  border-radius: 0;
  font-size: 130%;
  border-radius: 0;
}
a.btn-primary {
  color: #fff;
}
.btn-primary {
  color: #ffffff;
  background-color: #365f91;
  border-color: #af000b;
  border-width: thick;
  width:100%;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #af000b;
  border-color: #2d4f78; 
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #2d4f78;
  border-color: #2d4f78;
}
.input-group-addon.btn-primary {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn-default {
    border-color: #adadad;
}

/* Radios and checkboxes */

/* radio buttons */
.radio-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.radio-item label::after {
  background-color: #af000b;
}
/* checkboxes */
.checkbox-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.checkbox-item label::after {
  color: #af000b;
  background-color: transparent;
}


/* Ranking question */
.sortable-choice {
  padding: 5px;
}
.sortable-choice .ls-choice.sortable-item {
  background-color: #ddd;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.sortable-rank {
  padding: 5px;
}
.sortable-rank .ls-choice.sortable-item {
  background-color: #af000b;
  border: 1px solid #af000b;
  margin-bottom: 5px;
  color: #fff;
}

/* Gender question */
.gender-button .btn-primary {
  color: #333;
  background-color: #eee;
  border-color: #eee;
  border: 2px solid #FFF;
}
.gender-button .btn-primary:hover,
.gender-button .btn-primary:focus,
.gender-button .btn-primary.active,
.gender-button .btn-primary.active:hover,
.gender-button .btn-primary.active:focus {
  color: #FFF;
  background-color: #af000b;
  border-color: #af000b;
  border: 2px solid #fff;
}

/* Yes No question */
.yes-no .btn-primary {
  color: #333;
  background-color: #eee;
  border-color: #eee;
  border: 2px solid #FFF;
}
.yes-no .btn-primary:hover,
.yes-no .btn-primary:focus,
.yes-no .btn-primary.active,
.yes-no .btn-primary.active:hover,
.yes-no .btn-primary.active:focus {
  color: #FFF;
  background-color: #af000b;
  border-color: #af000b;
  border: 2px solid #FFF;
}

/* 5pt choice */
.choice-5-pt-radio li.radio-item {
  margin-right: 15px;
}

/* Slider question */
.slider-handle {
    background-color: #365f91;
    background-image: -webkit-linear-gradient(top, #4171ac 0%, #365f91 100%);
    background-image: -o-linear-gradient(top, #4171ac 0%, #365f91 100%);
    background-image: linear-gradient(to bottom, #4171ac 0%, #365f91 100%);
}
.tooltip-inner {
  background-color: #af000b;
}
.tooltip.top .tooltip-arrow {
     border-top-color: #af000b;
}
.slider-selection {
    background-image: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background-image: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background-image: linear-gradient(to bottom, #eee 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
}

/* Print Page */
.url-wrapper-survey-print {
  margin: 15px 0;
}

/* Footer */
footer .copyright {
	text-align: center;
  margin: 20px 0;
  font-size: 90%;
}


div.yes-no .btn-group label,
.gender .btn-group label {
    padding-top: 10px;
}

.completed-wrapper {
  margin-bottom: 45px;
  min-height: 200px;
 }

 /* Datepicker */

 .datepicker .active,
 .datepicker .today {
  background-color: #365f91 !important;
  background: #365f91 !important;
  color: #FFF !important;
 }

/* Index */
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  background-color: #365f91;
  color: #FFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #ccc;
}


td.answer-item.radio-item {
    vertical-align: middle;
}

/* Token page */
.token-page .text-info {
	color: #4e5452 ;
}
.token-page .card.container-fluid {
	padding: 0;
	max-width: 970px;
    width: 100%;
    padding: 15px;
}


.ls-question-help-464357X124X2842{
display:none;
}


/* Joachim */
.q9 .checkbox-item label,
.checkbox-item label.ls-label-xs-visibility {
  padding-left: 18px;
  padding-top: 3px;
}

.q9 .checkbox-item label::before,
.q9 .checkbox-item label.ls-label-xs-visibility::before {
  width: 30px;
  height: 30px;
}

.q9 .checkbox-item label::after,
.q9 .checkbox-item label.ls-label-xs-visibility::after {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  padding-top: 0px;
  padding-left: 1px;
/*  background-color: #702000;
  color: white; */
  font-size: 24px;
  line-height: 27px;
}

.q9 .checkbox-item .ls-label-xs-visibility {
  width: 30px;
  height: 30px;
}

.q9 .checkbox-list .input-sm {
  height: 32px;
  font-size: inherit;
}

@media (min-width: 768px) {
.form-horizontal .control-label {
    padding-top: 2px;
    text-align: left;
}
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.1rem;
}
.navbar-collapse {
    align-items: center;
    flex-basis: 100% !important;
    flex-grow: 1;
}
div.return-to-survey, div.url-wrapper {
    margin-bottom: 2em;
}

.text-info {
    --bs-text-opacity: 1;
    color: #dc3545 !important;
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    margin-bottom: .5rem;
    margin-top: 0
}

.navbar-light .navbar-toggler {
    border-color: transparent !important;
    border: transparent;
}

.navbar-toggler-icon {
  display: none;
 
}

.question10165.answer-container {
    display:none;
}



.questionhelp.text-info {
  color: yellow; /* The normal text */
}


/* AW: Bei kurzen Textantworten labels links ausrichten, Textfeld darunter, volle breite Ausnutzen */

.fullwidth-leftlabels .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.fullwidth-leftlabels .control-label {
    order: -1;
    margin-bottom: 0.3em;
    text-align: left !important;
    font-weight: bold !important;
}

.fullwidth-leftlabels .answer-item input[type="text"] {
    width: 100% !important;
}

/* AW: Bei fünf Antwortmöglichkeiten die volle Breite nutzen */

.five-cols .ls-answers.answers-list.radio-list .col-md-2 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}


/* AW: Bei Zwischentext Antwortcontainer entfernen */

#question15073 > .answer-container {
    display: none !important;
}

#question15073 {
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* AW: Bei Zwischentext Antwortcontainer entfernen */

#question15074 > .answer-container {
    display: none !important;
}

#question15074 {
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#question15723 > .answer-container {
    display: none !important;
}

#question15723 {
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Einrückung der Unteroptionen für Frage ID 15064 */
#question15064 li[id*="A001a"],
#question15064 li[id*="A001b"],
#question15064 li[id*="A001c"] {
  margin-left: 2em !important;
}

#question15064 li[id*="A001a"] label,
#question15064 li[id*="A001b"] label,
#question15064 li[id*="A001c"] label {
  font-style: italic !important;
  color: #444 !important;
}


/* Kommentarfeld bei "Weitere" doppelt so breit und zweizeilig darstellen */
.comment-large input[type="text"] {
  width: 250% !important;      /* doppelte Breite */
  min-height: 3.5em !important; /* etwa zwei Zeilen */
  line-height: 1.3em;
  white-space: normal;
  overflow-wrap: break-word;
}


/* Abstand zur vorherigen Frage minimieren + Standardrahmen entfernen */
.anmerkung {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fragetext vollständig ausblenden */
.anmerkung .question-text,
.anmerkung .question-title-container {
    display: none !important;
}

/* Fragecontainer ohne Rahmen und ohne Einrückung */
.anmerkung .question-container {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Antwortbereich enger machen */
.anmerkung .answer-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Eingabefeld visuell reduziert */
.anmerkung textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background-color: transparent;
}

/* Platzhalter-Stil */
.anmerkung textarea::placeholder {
    color: #666;
    font-style: italic;
}

/* Negativer Abstand, um an vorherige Frage "anzudocken" */
.question-container + .anmerkung {
    margin-top: -2rem !important;
}



/*Formatierung von mehrfachen kurzen Textantworte */
.inline-labels .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.inline-labels .control-label {
    width: 150px; /* fester Platz für Labels */
    margin-bottom: 0;
    text-align: right;
    padding-right: 10px;
    font-weight: normal;
}

.inline-labels .answer-container,
.inline-labels .form-control {
    width: 300px; /* max. Breite für Eingabefelder */
    flex-grow: 1;
}

/*Frage verstecken, aber funktionalität beibehalten */
.ls-hidden {
    display: none !important;
}



/* Gilt für Validierungshinweise */
.ls-em-tip,
.ls-question-mandatory.text-danger {
    color: #ff8000 !important;             /* Orange Schrift */
    background-color: #f2f2f2 !important;  /* Hellgraue Box */
    padding: 0.75em 1em;
    border-left: 4px solid #ff8000;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    margin-top: 0.5em;
}


/* Pflichtfeld-Sternchen */
.asterisk,
.fa-asterisk {
    color: #ff8000 !important;
}


.custom-asterisk {
    color: #ff8000;
    font-weight: bold;
    margin-right: 0.3em;
}


/* Standard Desktop-Version */
button.ls-move-next-btn {
  color: transparent !important;
  position: relative;
  text-align: center;
}

button.ls-move-next-btn::before {
  content: "Weiter/ Speichern";
  color: white;
  font-size: inherit;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Ausnahme: Wenn .lastpage-marker direkt vor navigator-container steht */
.lastpage-marker + #navigator-container button.ls-move-next-btn::before {
  content: none !important;
}

.lastpage-marker + #navigator-container button.ls-move-next-btn {
  color: inherit !important;
}

/* Mobile Optimierung */
@media screen and (max-width: 480px) {
  button.ls-move-next-btn::before {
    content: "Weiter/ Speichern";
    font-size: 0.85em;
  }
}

/* Allgemeiner Fragetext größer */
.question-title-container .question-text, 
.question-title-container .question-text p {
    font-size: 1.2rem;
}

/* Hinweise mit kursivem Stil kleiner lassen */
.question-title-container .question-text p[style*="italic"] {
    font-size: 1rem;
}

/* Entfernt blauen Hintergrund und fette Schrift */
.question-as-followup .question-text {
    font-weight: normal !important;
    background: none !important;
    color: #333 !important;
    font-size: 1rem;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Entfernt jeglichen zusätzlichen Abstand oben/unten */
.question-as-followup {
    margin-top: -5px !important;  /* leichte Negativ-Marge für sauberen Anschluss */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Sicherheitsregel: Table-Zeilen-Stil für den Fragetext */
.question-as-followup .question-text {
    background-color: transparent !important;
    font-weight: normal !important;
    border: none !important;
}