/******************
    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: Arial, sans-serif !important; /* ---------- Auswahl Schriftart ---------- */
  font-size: 14px;
  line-height: 1.42857143;
  color: #000;                /* schwarz - grundsätzliche Schriftfarbe */
  background-color: #FFF;     /* weiße Hintergrundfarbe Fragebereich außen */
  margin: 0 !important;
  padding: 0 !important;
}
#outerwrapper {
  margin-top: 0;
  margin-bottom: 10px;
  float: none;
  clear: both;
  background-color: #FFF;     /* weiße Hintergrundfarbe Fragebereich innen */
}
#outerwrapper #outerwrapper,
#outerwrapper #outerwrapper .container {
  padding: 0;
  width: auto;
}
#outerframeContainer {
  padding: 0;
  width: auto;
}
#dynamicReloadContainer {
	padding: 0;
}
@media only screen and (max-width: 768px) {
  #outerwrapper {
    margin-top: 0;
    margin-bottom: 0;
  }  
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 900px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 90%;
  }
}
hr {
  margin: 10px 0;
  border-color: transparent;
}

/* ---------- Links allgemein: Start ---------- */
a,
a:link {
/*  color: #757575;  /* dunkleres grau - Kontrast zu weiß und schwarz */
  color: #006bcf;  /* #018fcf;    /* bayernblau - vorher #666;  */
  text-decoration: none;
}
a:hover,
a:focus {
  color: #006bcf;  /*  #0078CF;     /* bayernblau */
  text-decoration: underline;
/*  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 1);  */
  background-color: #eee; 
}
/* ---------- Links allgemein: Ende ---------- */

/* ---------- Links Kopfbereich: Start ---------- */
.navbar-default .navbar-nav > li > a {
/*  color: #757575;   /* dunkleres grau - Kontrast zu weiß und schwarz */
  color: #006bcf;  /* #018fcf;    /* bayernblau - vorher #666;  */
  text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #006bcf;  /* #0078CF;     /* bayernblau */
  text-decoration: underline;
  background-color: #eee;
}
/* ---------- Links Kopfbereich: Ende ---------- */

img {
    max-width: 100%;
}

/* Navbar */
.header-wrapper {
  margin-bottom: 15px;
  max-height: 160px;
  background-color: #0078CF;     /* bayernblau Überschriftenzeile linker und rechter Rand */
  position: fixed;
  z-index: 100;
  width: 100%;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.1);
}
.header-overlay {
  background-color: #fff;     /* weiß Überschriftenzeile Hintergrundfarbe */
  max-height: 160px;
  padding: 15px 0;
  margin-right: 5%;
  margin-left: 5%;
}
.header-overlay .container {
  width: 100%;
}

/* ---------- Freitext Kopfbereich: Start ---------- */
.header-text {
  width: 100%;
  text-align: left;
  color: #0078CF;     /* bayernblau  Farbe Umfragetitel links oben */
  font-family: "Arial", serif;      /* "Times New Roman", serif; */
  font-size: 16px;     /* Schrifthöhe Umfragetitel links oben */
  font-weight: 700;     /* 700 = dicke Schrift */
}
/* ---------- Freitext Kopfbereich: Ende ---------- */

/* ----- Navigations-Hamburger ----- */
.navbar-toggle {
 position:relative;
 float: none;
 padding:9px 10px;
 margin-right:0;
 margin-top:15px;
 margin-bottom:8px;
 background-color:transparent;
 background-image:none;
 border:1px solid transparent;
 border-radius:4px
}
.navbar-collapse {
	padding: 0;
}
.navbar {
	min-height: 0;
	margin: 0;
	text-align: center;
}
.navbar-header {
  float: none !important;
  padding: 0;
}
.navbar-brand {
  padding: 15px 0;
  min-height: initial;
}
.navbar-default .navbar-toggle {
 border-color:#0078CF     /* bayernblau */
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
 background-color:#e5f4ff   /*  hellblau */
}
.navbar-default .navbar-toggle .icon-bar {
 background-color:#000  /* schwarz */
}

/* ---------- Umfragetitel: Start ---------- */
h1.surveyname {
  text-align: left;
  font-weight: 700;     /* 700 = dicke Schrift */
  height: auto;
  line-height: 130%;
  font-size: 24px;
  margin: 0 0 25px 0;
}
/* ---------- Umfragetitel: Ende ---------- */

.navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 0;
}
.navbar-nav {
	float: none;
}
.navbar-default {
	background-color: transparent;
	border: none;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #757575;    /* dunkleres grau - Kontrast zu weiß und schwarz */
    background-color: transparent;
}
.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;
  margin: 0 auto;
}
.navbar-item-right {
	text-align: right;
	padding-right: 0;
}
.navbar-logo-left {
  margin-right: 15px;
  text-align: left;
}
.navbar-authority {
  text-align: right;
}
.navbar-logo-right {
  padding-right: 0;
  text-align: right;
}
.header-customer-brand {
  text-align: left;
  display: inline-flex;
  align-items: flex-end;
  justify-content: left;
  padding-left: 0;
  height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
}
.header-title {
  display: inline-flex;
  display : -ms-flexbox;
  height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
  align-items: flex-end;
  color: #0078CF;
  line-height: 1.2em;
  font-family: "Arial", serif;    /* "Times New Roman", serif; */
  font-size: 16px;
  font-weight: 700;     /* 700 = dicke Schrift */
}
.header-authority-brand {
  text-align: right;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 0;
  height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
}

/* ---------- Behördenname: Start ---------- */
.authority-text {
  display: inline-flex;
  display : -ms-flexbox;
  height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
  align-items: flex-end;
  color: #0078CF;     /* bayernblau Farbe Behördenname rechts oben */
  line-height: 1.2em;
  text-align: right;
  margin-right: 15px;
  font-family: "Arial", serif;   /* "Times New Roman", serif; */
  font-size: 16px;     /* Schrifthöhe Behördenname rechts oben */
  font-weight: 700;     /* 700 = dicke Schrift */
}
/* ---------- Behördenname: Start ---------- */

img.logo-right {
  max-height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
  min-width: 50px; /* ---------- Diesen Wert für vom Behördenlogo abweichende Logos ändern ---------- */
  width: auto;
}
img.logo-left {
  max-height: 70px; /* ---------- Höhe Kopfbereich (Achtung: mehrmals zu ändern!) ---------- */
  min-width: 50px; /* ---------- Diesen Wert für abweichende Logos ändern ---------- */
  width: auto;
}
.top-wrapper {
  margin-top: 140px;
  background-color: transparent !important;
}
@media only screen and (max-width: 992px) {
  .header-wrapper,
  .header-overlay {
    position: relative;
    height: auto;
    max-height: 1000px;
  }
  .header-wrapper {
    margin-bottom: 15px;
  }
  .header-customer-brand {
    text-align: center;
    padding: 0 0 15px 0;
    height: auto;
  }
  .header-authority-brand {
    text-align: center;
    padding: 0;
    height: auto;
  }
  .header-text {
    text-align: center;
  }
  .navbar-logo-left {
    padding: 0;
    text-align: center;
  }
  h1.surveyname {
    text-align: center;
  }
  .authority-text {
    text-align: center;
    height: auto;
  }
  .top-wrapper {
    margin: 30px auto 0 auto;
  }
}

@media only screen and (max-width: 768px) {
	.navbar-collapse {
		padding: 0;
	}
  .navbar-logo-left {
    padding: 0;
    text-align: center;
  }
  .navbar-logo-right {
    text-align: center;
    padding: 0;
    margin-top: 15px;
  }
  .navbar-item-left {
    text-align: center;
    margin: 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;
  }
    .navbar-banner {
    padding: 0;
    }
  .top-wrapper {
    margin-top: 30px !important;
  }
  .header-title {
    padding-top: 15px;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .header-customer-brand,
  .header-title,
  .header-authority-brand,
  .authority-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .header-authority-brand {
    margin-top: 15px;
  }
  .authority-text {
    order: 2;
    padding-top: 15px;
    margin: 0;
  }
}

/* Language Changer */
.language-wrapper {
  margin: 15px 0;
  text-align: right;
}
.languagechanger {
    margin: 0;
    display: block;
}
a.languagechanger,
a:link.languagechanger {
    color: #333;    /*  dunkelgrau  */
    text-decoration: none;
}
a:hover.languagechanger,
a:focus.languagechanger {
    color: #006bcf;  /*  #333;    /*  dunkelgrau  */
    text-decoration: none;
}
#langs-container {
    height: auto;
}
.form-change-lang {
    text-align: center;
}
ul#langs-container {
    overflow: initial !important;
    right: 0;
    left: auto;
}

/* ---------- Fortschrittsbalken: Start ---------- */
.progress-wrapper {
  padding: 0;
  margin-bottom: 30px;
}
.progress {
  background-color: #e5f4ff;   /*  hellblau */
  margin-bottom: 0;
}
.progress-bar {
  font-size: 13px;
  color:#fff;      /*  weiß   Schriftfarbe */
  background-color: #0078CF;     /* bayernblau Farbe Fortschrittsbalken Umfrage */
}
.progress-bar-success {
  background-color: #0078CF;     /* bayernblau Farbe Fortschrittsbalken Umfrage */
}

/* ---------- Fortschrittsbalken: Ende ---------- */

/* ---------- Willkommensseite: Start ---------- */
.text-info {
  color: #333;    /*  dunkelgrau  */
}
.survey-welcome {
  margin-top: 15px;
}
.question-count-text {
  margin-top: 15px;
}
/* ---------- Willkommensseite: Ende ---------- */

/* Privacy policy */
.privacy {
  margin-top: 15px;
  padding: 15px 0;
  margin: 15px 1px;
  border: 1px solid #f6f6f6;     /* weiß */
  background-color: #f6f6f6;     /* weiß */
}
p.ls-privacy-body {
  margin: 15px 0 0 0;
  font-style: italic;
}
.panel {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  background-color: transparent;
}
.panel-primary {
    border-color: transparent;
}
.panel-primary > .panel-heading {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    padding: 15px 0;
}
.panel-body {
    padding: 5px 0;
}
.panel-footer {
    padding: 10px 0;
    background-color: transparent;
    border-top: transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input#datasecurity_accepted {
  vertical-align: top;
}
.limit-text-window {
    display: none;
}

/* 2020-03-09 Marcel: Enable for custom data protection statement */
.privacy .limit-text-window {
    display: block;
}
/* Group layout */
.group-outer-container {
	display: block;
}
.group-title {
  text-align: center;
  font-weight: 700;     /* 700 = dicke Schrift */
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 5px;
}
.group-description {
  margin-top: 0;
  text-align: center;
}

/* Question layout */
.question-number, .question-code {
	float: none;
	margin: 0;
  color: #000;   /* Schriftfarbe des Fragecodes */
}

/* ---------- Fragecontainer: Start ---------- */
.question-container {
    background-color: #fff;
    margin-top: 12px;
    margin-bottom: 25px;  /* Abstand zwischenden Fragen */
    padding-bottom: 10px;  /* Abstand Hilfetext und unterer Rand der Frage */
    border: 2px solid #0078CF !important;    /* bayernblau (war vorher grau und 1px) */
}
/* ---------- Fragecontainer: Ende ---------- */

.question-text {
    font-size: 115%;    /* war vorher 100%; */
/*    font-weight: 700;     /* 700 = dicke Schrift */
}

.input-error.question-container {
    border: 1px solid #e00000;  /*  rot, war vorher  #a94442; rotbraun) */
}

/* ---------- Fragetext: Start ---------- */
.question-title-container {
    padding: 8px 15px;     /*  oberer/unterer bzw. linker Rand zum Fragetext  */
    background-color: #e5f4ff;   /*  hellblau  (war vorher bayernblau #0078CF;) */
    border-bottom: 2px solid #0078CF;     /* bayernblau nur unten */ 
    color: #000;     /* Schriftfarbe Fragetext schwarz (war vorher weiß)  */
    margin-bottom: 15px;
}
/* ---------- Fragetext: Ende ---------- */

.question-valid-container {
  padding-left: 0;
  padding-right: 0;
  font-size: 90%;
}
.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: #f0f0f0;     /* hellgrau */
}
.table-hover > tbody > tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #ccc;     /* grau (war vorher hellgrau #ddd) */
}
.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 Pflichtfragen: Start ---------- */
.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;  
}
/* ---------- Asterisk Pflichtfragen: Start ---------- */

.save-survey-label .asterisk.pull-left,
.load-survey-label .asterisk.pull-left {
  float: none !important;
}

/* ---------- Hilfetext unter den Fragetexten: Start ---------- */
.ls-em-tip {
  color: #016ecf;    /*  nahe an bayernblau, vorher #FDD835; gelb */
  margin-top: 5px;
}
.ls-em-error {
  display: block;
  color: #e00000;  /*  rot, war vorher  #a94442; rotbraun) */
}
.text-danger,
.text-warning {
    color: #016ecf;   /* nahe an bayernblau, vorher orange;  */
}
/* ---------- Hilfetext unter den Fragetexten: Ende ---------- */

/* ---------- Hilfetext unter den Antworten: Start ---------- */
.question-help-container {
  font-size: 90%;
  margin-top: 10px;     /* Vertikaler Abstand Hilfetext */
  color: #0078CF;     /* bayernblau Farbe Hilfetext */
}
/* ---------- Hilfetext unter den Antworten: Ende ---------- */

.help-block {
 display:block;
 margin-top:5px;
 margin-bottom:10px;
 color: #757575;  /* dunkleres grau - Kontrast zu weiß und schwarz */
}

.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: 16px;
  border-radius: 4px;
}
.btn-lg, .btn-group-lg > .btn {
    padding: 15px 30px;
}

/* ---------- Button Primär: Start ---------- */
.btn-primary,
a.btn-primary {
  color: #000;     /* schwarz Beschriftung Weiter */
  background-color:  #e5f4ff;     /* hellblau Weiter Button */
  border-color: #0078CF;     /* bayernblau Rahmen */
}
.btn-primary:hover {
  color: #fff;     /* weiß Beschriftung Weiter */
  background-color:  #0078CF;     /* bayernblau Weiter Button Maus drauf */
  border-color: #0078CF;     /* bayernblau */
}
.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: #fff;     /* weiß Beschriftung  */
  background-color: #0078CF;     /* bayernblau */
  border-color: #0078CF;     /* bayernblau */
}
.input-group-addon.btn-primary {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* ---------- Button Primär: Ende ---------- */

/* ---------- Button Sekundär: Start ---------- */
.btn-default,
a.btn-default {
  color: #000;     /* schwarz Beschriftung Zurück */
  background-color: #e5f4ff;     /* hellblau Zurück Button */
  border-color: #0078CF;     /* bayernblau Rahmen */
}
.btn-default:hover {
  color: #fff;     /* weiß Beschriftung Zurück */
  background-color: #0078CF;     /* bayernblau Zurück Button Maus drauf */
  border-color: #0078CF;     /* bayernblau */
}
/* ---------- Button Sekundär: Ende ---------- */


/* Radios and checkboxes */

/* ---------- Radiobuttons: Start ---------- */
.radio-item label::before {
  border: 1px solid #000;     /* schwarz Umrandung Radiobutton */
  background-color: #FFF;     /* weiß Hintergrundfarbe Radiobutton */
}
.radio-item:focus-within {
/*   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 1);  /* Rahmen wenn Fokus auf RB  */
   box-shadow: 0 0 0 1px rgba(0, 120, 207, 1);   /* blauer Rahmen wenn Fokus auf RB  */
   background-color: #e5f4ff;   /* hellblauer Hintergrund wenn Fokus auf RB  */
}
.radio-item label::after {
  background-color: #0078CF;     /* bayernblau Füllfarbe Radiobutton */
}
/* ---------- Radiobuttons: Ende ---------- */

/* ---------- Checkboxen: Start ---------- */
.checkbox-item label::before {
  border: 1px solid #000;     /* schwarz Umrandung Kästchen */
  background-color: #FFF;     /* weiß Hintergrundfarbe Kästchen */
}
.checkbox-item:focus-within {
/*   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 1);  /* Rahmen wenn Fokus auf CB  */
   box-shadow: 0 0 0 1px rgba(0, 120, 207, 1);   /* blauer Rahmen wenn Fokus auf CB  */
   background-color: #e5f4ff;   /* hellblauer Hintergrund wenn Fokus auf CB  */
}
.checkbox-item label::after {
  color: #0078CF;     /* bayernblau Häkchenfarbe Kästchen */
  background-color: transparent;
  width: 17px;     /* Position des Häkchens 17px NICHT ÄNDERN */
  height: 17px;
  left: -1px;
  top: 0px;
  font-size: 12px;
}
/* ---------- Checkboxen: Ende ---------- */

.array-multi-flexi .checkbox-item label::after {
  left: 0px;
}

/* ---------- Ranking Frage: Start ---------- */
.sortable-choice {
  padding: 5px;
}
.sortable-choice .ls-choice.sortable-item {
  background-color: #e5f4ff;     /* hellblau Hintergrundfarbe rechts vor Sortierung */
  border: 1px solid #0078CF;     /* bayernblau */  
  margin-bottom: 5px;
  color: #000;
}
.sortable-rank {
  padding: 5px;
}
.sortable-rank .ls-choice.sortable-item {
  background-color: #0078CF;     /* bayernblau Hintergrundfarbe rechts nach Sortierung */
  border: 1px solid #0078CF;     /* bayernblau */
  margin-bottom: 5px;
  color: #fff;
}
/* ---------- Ranking Frage: Ende ---------- */

/* Boilerplate question */
/* 2019-04-04 No paddings for boilerplate */
.boilerplate {
    padding-bottom: 0;
}
.boilerplate.question-container {
    border: none !important;
}
.boilerplate .question-title-container {
    margin-bottom: 0;
}

/* ---------- Buttons Genderfrage und Ja/Nein Frage: Start ---------- */
.gender-button .btn-primary,
.yes-no .btn-primary,
.bootstrap-buttons-div .button-item {
  color: #000;     /* schwarz Schriftfarbe nicht gewählt */
  background-color: #e5f4ff;;     /* hellblau Hintergrundfarbe nicht gewählt */
  border-color: #0078CF;   /* bayernblau (war vorher hellgrau #ddd) */
  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,
.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,
.bootstrap-buttons-div .button-item:hover,
.bootstrap-buttons-div .button-item:focus,
.bootstrap-buttons-div .button-item.active,
.bootstrap-buttons-div .button-item:hover,
.bootstrap-buttons-div .button-item:focus {
  color: #FFF;     /* weiß Schriftfarbe gewählt */
  background-color: #0078CF;     /* bayernblau Hintergrundfarbe gewählt */
  border-color: #0078CF;    /* bayernblau */
  border: 2px solid #fff;
}
/* ---------- Buttons Genderfrage und Ja/Nein Frage: Ende ---------- */

/* Bootstrap buttons layout */
/* 2019-04-05 Marcel: New CSS for bootstrap button layout */
.bootstrap-buttons-div
{
	padding: 0 5px;
}
.bootstrap-buttons-div .button-item {
    word-break: break-all;	/* remove this to not break words (wastes quite some space) */
    white-space: normal;
    padding: 0.5em 0.5em;
}

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

/* Slider question */
.slider-handle {
    background-color: #0078CF;     /* bayernblau */
    background-image: -webkit-linear-gradient(top, #0078CF 0%, #2c5a93 100%);     /* bayernblau + dunkelblau  */
    background-image: -o-linear-gradient(top, #0078CF 0%, #2c5a93 100%);     /* bayernblau + dunkelblau  */
    background-image: linear-gradient(to bottom, #0078CF 0%, #2c5a93 100%);     /* bayernblau + dunkelblau  */
}
.tooltip-inner {
  background-color: #000;
}
.tooltip.top .tooltip-arrow {
     border-top-color: #000;
}
.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);
}

.numeric-multi .ls-group-remaining .suffix-text.suffix {
    display: inline;
    margin-left: -15px;
}


/* Text questions */

/* Highlight text fields with main template color */
.form-control {
    border-color: #000;   /*  schwarz */
    font-size: 100%;   /*  Schriftgröße (war vorher mit 14px; zu klein)  */
    color:#000;     /* schwarze Schriftfarbe */
    background-color:#fff;
}
.form-control:focus {
    border-color: #006bcf;  /*  #0078cf;     /*  bayernblau #0078CF */
/*    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6) !important;  */
    -webkit-box-shadow: inset 0 1px 1px rgba(0,120,207,.075), 0 0 8px rgba(0, 120, 207, .6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,120,207,.075), 0 0 8px rgba(0, 120, 207, .6) !important;
    box-shadow: inset 0 1px 1px rgba(0,120,207,.075), 0 0 8px rgba(0, 120, 207, .6) !important;
}

/* Print Page */
.url-wrapper-survey-print {
  margin: 15px 0;
}
.question-container-printanswers {
  border-bottom: 1px solid #ccc;
}

/* ---------- Fussbereich: Start ---------- */
footer .copyright {
	text-align: center;
  margin: 20px 0;     /* vertikaler Abstand Impressum und Datenschutz */
}
/* ---------- Fussbereich: Ende ---------- */


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: #000 !important;
  background: #000 !important;
  color: #FFF !important;
 }

/* ---------- Fragenindex: Start ---------- */
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  background-color: #006bcf;  /*  #0078CF;     /* bayernblau */
  color: #FFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #ccc;     /* hellgrau (war vorher #ddd) */
}

.dropdown-menu > li > a {
  background-color: #fff;     /* weiß */
  color: #000;     /* schwarz */
}
/* ---------- Fragenindex: Ende ---------- */

/* Startpage */
.survey-list-heading,
.survey-list,
.survey-contact {
  text-align: center;
}
#surveys-list-container {
  background-color: #fff;     /* weiß */
  padding: 45px 0;
}

/* Fix array alignment */
td.answer-item.radio-item {
    vertical-align: middle;
}

/* 2018-12-02 Marcel: Fix captcha width */
.captcha-image
{
    width: auto;
}

/* 2019-02-10 Marcel: Additional language changer adjustments */
#main-col form div.form-change-lang.form-inline
{
    display: none;
}


/* 2019-02-11 Marcel: Hide progress bar from certain screens */
.printanswers .header-wrapper .progress-wrapper,
.listsurveys .header-wrapper .progress-wrapper
{
    display: none;
}

/* 2019-03-11 Marcel: adjust margin to not show scroll bar at list survey page */
.listsurveys
{
    margin-right: 15px;
    margin-left: 15px;
}

/* 2019-02-11 Marcel: Remove background color from print version (PDF) */
body.printlayout
{
    background-color: #fff;
    padding: 10px !important;
}



/* START 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */
.listsurveys
{
	border-bottom: 1px solid #000;
}

.listsurveys .header-wrapper
{
	margin-bottom: 0px;
}

.listsurveys .header-wrapper .navbar-brand
{
	display: none;
}

#surveys-list-container 
{
    padding: 0 0 45px 0;
    margin-top: 0px;
}

#surveyListFooter
{
	margin: 0px;
	padding: 0px;
	height: 0px;
}

.surveys-list .btn-group {
    margin: 0 auto;
    float: none;
}

.survey-contact.col-xs-12 {
    padding-top: 20px;
}
/* END 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */




/* 2019-04-04 Marcel: Improved display for split up array questions */
@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
{
    .table-hover > tbody > tr:hover, 
    tr.answers-list:hover, 
    .array-flexible-column tr.answers-list:hover {
        background-color: initial; 
        color: initial;
    }   
    tr.ls-odd, .array-flexible-column tr.answers-list:nth-child(even) {
        background-color: #f0f0f0;     /* hellgrau */
    }
    
    table.ls-answers > tbody > tr:nth-child(even):hover {
        background-color: #f0f0f0;     /* hellgrau */
    }
    
    table.ls-answers > tbody > tr:nth-child(odd):hover {
    	background-color: #fff;     /* weiß */
	}


    
    table.ls-answers > tbody > tr td.answer-item.radio-item,
    table.ls-answers > tbody > tr td.answer-item.checkbox-item {
        border-bottom: 1px solid #ccc;     /* grau (war vorher hellgrau #ddd) */
        padding-left: 30px;
        padding-top: 10px;
        padding-bottom: 0px;
    }
    
    td.answer-item.radio-item.answer_cell_ noanswer-item,
    td.answer-item.checkbox-item.answer_cell_ noanswer-item {
        border-bottom: 0px;
    }
    .array-flexible-row .ls-answers .answertextright {
        text-align: left;
    }
    
    table.ls-answers > tbody > tr.ls-heading-repeat
    {
        display: none;
    }
    
    table.ls-answers > tbody > tr th.answertext,
    table.ls-answers > tbody > tr th.answertextright {
        font-size: 120%;
    }
    
    
    
    table.ls-answers > tbody > tr td.radio-item:hover, 
    table.ls-answers > tbody > tr td.checkbox-item:hover {
	    color: #000;     /* schwarz */
	    background-color: #ccc;     /* grau (war vorher hellgrau #ddd) */
	}
    
}

/* 2019-05-03 Marcel: Left align item text at multiplce choice with comment */
.multiple-opt-comments .checkbox-text-item .answer-item .checkbox-label
{
    text-align: left;
}


/* 2019-05-09 Marcel: Styles for Bootstrap tooltips */
span.tooltip
{
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    color: #e00000;  /*  rot, war vorher  #a94442; rotbraun) */
    opacity: 1;
    font-size: inherit;
    position: initial;
    display: inline;
}


/* Add class "tooltipquestion" at the "Display" section of your question! */
.tooltipquestion li.radio-item label, 
.tooltipquestion li.checkbox-item label {
    width: 100%;
}

.answer-item .tooltip .tooltip-inner {
    max-width: 75%;
    margin: auto;
}
/* Make sure sliders with tooltips still use same defaults */
.answer-item .slider .tooltip .tooltip-inner {
    max-width: initial;
}

/* Align modal on top */
.modal::before {
    height: auto;
    vertical-align: top;
}


/* ---------- Breite Eingabefelder: Start ---------- */
/* Frage 30 list radio */
.list-radio .form-inline .form-control {
  width: auto; /* --- Hier statt "auto" Pixelwert angeben --- */
}
@media only screen and (max-width: 768px) {
  .list-radio .form-inline .form-control {
    width: 100%;
  }  
}
/* Frage 40 multiOptions */
.multiple-opt .form-inline .form-control {
  width: auto; /* --- Hier statt "auto" Pixelwert angeben --- */
}
@media only screen and (max-width: 768px) {
  .multiple-opt .form-inline .form-control {
    width: 100%;
  }  
}
/* Frage 42 multiOptionsCom */
.multiple-opt-comments input.multipleco-other-topic {
  width: 100%; /* --- Hier statt "auto" Pixelwert angeben --- */
}
@media only screen and (max-width: 768px) {
  .multiple-opt-comments input.multipleco-other-topic {
    width: 100%;
    margin-bottom: 15px;
  }  
}
/* ---------- Breite Eingabefelder: Ende ---------- */

/* START 2020-10-02 Marcel Minke: Fix header print answers screen */
.printanswers .top-wrapper
{
    margin-top: 0px;    /* Reduce margin on top */
}

#outerwrapper .printanswers .header-wrapper
{
    display: none;  /* Hide duplicate header */
}
/* END 2020-10-02 Marcel Minke: Fix header print answers screen */


/* START 2021-03 Adjustments Marcel Minke: 
 * Hide empty items at "print answers" overview.
 * Always keep this at the end of this CSS file. */
.question-container-printanswers .emptyanswer
{
    display: none;
}

/* Marcel Minke: Advanced CSS for printing at survey runtime */
@media print 
{
    /* Marcel Minke: Do not print header at every page */
    .header-wrapper 
    { 
        position: absolute; 
    }
    
    /* Hide these items when printing */
    #navigator-container,
    .progress-wrapper 
    {
        display: none;
    }
    
    /* Add some padding to the custom tables within the boilerplate questions */
    .boilerplate .question-text table td
    {
        padding: 10px;
    }
    
    /* Try to prevent page breaks within question containers */
    .question-container
    {
        page-break-inside: avoid;
    }
}


/* END 2021-03 Adjustments Marcel Minke */