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

.survey-list-heading {
    margin-top: 6px;
}


#surveys-list-container{
    margin-top: 15px;
}

@media (max-width: 768px){
    #surveys-list-container{
    margin-top: 6px;
    }
    .survey-list-heading {
        margin-top: 0;
    }
}

.surveys-list li {
    padding: 0px;
}

.navbar-brand.logo-container.navbar-toggler {
    border: none;
    min-height: 40px;
}

.navbar-toggler > .logo.img-fluid {
    height: 34px;
    padding: 0px;
    margin-left: 8px;
}

.col-12.question-container.question-title-container {
    margin-bottom: 0;
}

@media (min-width: 761px) {
    .surveys-list .btn-group {
        width: 100%;
    }
}

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

.top-container {
    margin-top: 30px;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
  padding-top: 60px;/* now is redefine in JS to fit any title length */
  flex-direction: column; /* article, then footer */
  display: flex; /* flex, to extend the content to full size */
}

body > article {
    flex: 1; } /* the main article should use as much space as possible */

#surveyListFooter {
    padding-bottom: 0;
    margin-bottom: 6px;
}

h1 {
  margin-top: 30px;
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 10px;
  clear: left;
  border-top: 2px solid #f6f3ed;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 32px;
  line-height: 44px;
  font-weight: 300;
  text-align: left;
}

h2 {
  margin-top: 30px;
  margin-bottom: 0;
  padding-bottom: 20px;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px none #ccc;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-transform: none;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0px;
  padding-bottom: 10px;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

h5 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

h6 {
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-left: 0px;
  border-bottom: 2px none #ccc;
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
}

p {
  display: block;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  float: none;
/*  border-bottom: 1px solid #ccc; */
  font-family: Roboto, sans-serif;
  color: #565656;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  text-decoration: none;
}

a {
    color: #3e7dbd;
    text-decoration: underline;
}

a:hover {
    color: #3e7dbd;
    text-decoration: none;
}

.form-control {
    border-radius: 0;
}

.btn-info {
    background-color: #3e7dbd;
    border-color: #3e7dbd;
}

.btn-info:hover {
    background-color: #20629a;
    border-color: #20629a;
}

.btn {
    border-radius: 0px;
}

.btn-primary {
    background-color: #3e7dbd;
    border-color: #3e7dbd;
}

.btn-primary:hover {
    background-color: #20629a;
    border-color: #20629a;
}

.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
    background-color: #3e7dbd;
    border-color: #3e7dbd;
}

.btn-primary.disabled:hover {
    background-color: #20629a;
    border-color: #20629a;
}

.btn-primary.focus {
    background-color: #20629a;
    border-color: #20629a;
}

.font-noto {
    font-family: 'Roboto', Roboto, sans-serif;
}

.text-info, .text-primary {
    color: #565656;
}

.navbar-default {
    background-color: #ffffff;
}

.panel {
    border-radius: 0;
}

.panel-primary {
    border-color: #3e7dbd;
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #3e7dbd;
    border-color: #3e7dbd;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.modal-title {
    color: #fff;
}

/* IAT questions */

.iatWrapper {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: 300px;
	margin: 0 auto;
	color: #D0DBE5;
	background-color: #2C3E50;
	font-size: 21px;
}

.iatLeftLabel {
	float: left;
	padding: 10px;
}

.iatRightLabel {
	float: right;
	padding: 10px;
}

.iatWord {
	position: absolute;
	width: 100%;
	top: 35%;
	text-align: center;
	font-size: 36px;
	color: #C4D1DE;
}

.iatWord.done {
	color: #C4D1DE;
	font-size: 20px;
}

.iatInstructions {
	position: absolute;
	width: 100%;
	bottom: 0px;
	padding-bottom: 10px;
	text-align: center;
}

.iatMobileButtonWrapper {
	display: none;
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	font-size: 36px;
}

.iatButton {
	float: left;
	margin: 20px;
	width: 100px;
	padding: 2px 0 5px 0;
	border: 5px solid #233140;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	line-height: normal;
	cursor: pointer;
}

.iatLeftButton {
	float: left;
}

.iatRightButton {
	float: right;
}

.iatMidButton {
    display:inline-block;
}
/* Sternchen vor Pflichtfragen weg */
.asterisk {display: none;}

.survey-list-header {
    padding-left: 15px;
    padding-right: 15px;
    /*width: 98%;*/
}

.ratingButton {
	float: left;
	width:33.3%;
	margin: 0px;
}

.ratingMobileButtonWrapper {
	display: none;
	position: relative;
	bottom: 0px;
	padding-bottom: 10px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	font-size: 36px;
}

@media (min-width: 992px) {
    .container {
        width: 860px;
    }
}

@media (min-width: 1200px) {
    .container {
    width: 860px; 
    }
}

/* LimeSurvey 6 / Bootstrap 5 compatibility adjustments */
body {
  min-height: 100vh;
}

.navbar-brand.logo-container {
    border: none;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.navbar-brand.logo-container > .logo.img-fluid,
.navbar-brand.logo-container .logo.img-fluid {
    max-height: 40px;
    width: auto;
    padding: 0;
    margin-left: 8px;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    border-radius: 0;
}

/* Legacy Bootstrap 3 class aliases still emitted by older survey HTML/custom code. */
.col-xs-12 {
    width: 100%;
}

.hidden-xs {
    display: none !important;
}

@media (min-width: 576px) {
    .hidden-xs {
        display: block !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Static footer wrapper used on all LS6 pages. Avoids relying on survey-list-only Twig variables. */
.survey-list-footer {
    padding-bottom: 0;
    margin-bottom: 6px;
}