/******************
    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: Trebuchet, 'Istok Web', sans-serif !important;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.42857143;
  color: #5a5a5a;
  background-image:bg-image(src="{TEMPLATEURL}The_Tire_Visual_nur_Hintergrund_RGB.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-color: #e6e6e6;
  margin: 0 !important;
  padding: 0 !important;
}
#outerwrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  float: none;
  clear: both;
  background-color: #FFF;
}
#outerwrapper #outerwrapper,
#outerwrapper #outerwrapper .container {
  padding: 0;
  width: auto;
}
#outerframeContainer {
  padding: 0;
  width: auto;
}
#dynamicReloadContainer {
	padding: 0;
}
.script-container {
  height: 0px;
}
@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: 970px;*/
    width: 998px;
  }
}
@media (min-width: 1200px) {
  .container {
    /*width: 1170px;*/
    width: 998px;
  }
}
hr {
  margin: 10px 0;
  border: none !important;
}
a,
a:link {
  color: #014268;
  text-decoration: underline;
}
a:hover,
a:focus {
  color: #014268;
  text-decoration: none;
}
img {
    max-width: 100%;
}

/* Navbar */
.header-wrapper {
  margin-bottom: 15px;
  margin-top: 15px;
}
.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: 0;
  min-height: initial;
}
h1.surveyname {
  display: none;
  text-align: right;
  font-weight: 700;
  height: auto;
  line-height: 130%;
  font-size: 20px;
  margin: 0;
  color: #014268;
  text-transform: uppercase;
}
.navbar-nav {
	float: none;
}
.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 {
  padding-left: 0;
  }
.navbar-logo-middle {
  padding-right: 0;
  text-align: center;
}
.navbar-logo-right {
  padding-right: 0;
  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;
  }
  .logo-bar img {
    width: 50%;
  }
  h1.surveyname {
    text-align: center;
  }
}

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

/* Progress bar */
.progress-wrapper {
  padding: 0;
}
.progress {
  background-color: #ab2927;
  margin-bottom: 0;
  height: 12px;
  border-radius: 0;
}
.progress-bar {
  background-color: #ba274c;
  color: transparent;
}

/* Welcome Page */
.text-info {
  color: #014268;
}
.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 #e5e5e5;
  background-color: #e5e5e5;
}
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: 700;
  font-size: 100%;
  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 lightgray !important;
}
.input-error.question-container {
    border: 1px solid #a94442;
}
.question-title-container {
    padding: 15px;
    background-color: transparent;
    color: #5a5a5a;
    margin-bottom: 15px;
    border-bottom: 1px solid lightgray;
}
.question-text {
    font-size: 18px;
    color: #002d67;
}
.question-valid-container {
  padding-left: 0;
  padding-right: 0;
  font-style: italic;
  font-size: 90%;
}
.question-number,
.question-code {
  font-weight: 300;
}
.ls-answers tbody .answertext {
  text-align: left;
}
tr.ls-odd,
.array-flexible-column tr.answers-list:nth-child(even) {
  background-color: #ececec;
}
.table-hover > tbody > tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #6a90a6;
    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 {
  display: none;
  margin-right: 5px;
  font-size: 90% !important;
  vertical-align: top;
}
.asterisk small {
  display: none;
  font-size: 90% !important;
  vertical-align: top;  
}
.input-error .asterisk {
  font-size: 90% !important;
  margin-top: 0;  
}
.question-help-container {
  font-size: 90%;
  margin-top: 10px;
  color: #888;
}
.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: 110%;
  border-radius: 0px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
}
a.btn-primary {
  color: #fff; 
  text-decoration: none;
}
a.btn-default {
  text-decoration: none;
  color: #5a5a5a;
}
.btn-primary {
  color: #ffffff;
  background-color: #6a90a6;
  border-color: #6a90a6;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #6a90a6;
  border-color: #6a90a6; 
}
.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: #6a90a6;
  border-color: #6a90a6;
}
.input-group-addon.btn-primary {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn-default,
.btn-default:hover {
    border-color: #adadad;
    background-color: transparent;
}

/* Radios and checkboxes */

/* radio buttons */
.radio-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.radio-item label::after {
  background-color: #014268;
}
/* checkboxes */
.checkbox-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.checkbox-item label::after {
  color: #014268;
  background-color: transparent;
  width: 17px;
  height: 17px;
  left: -1px;
  top: 0px;
  font-size: 12px;
}


/* 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: #014268;
  border: 1px solid #014268;
  margin-bottom: 5px;
  color: #fff;
}

/* 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;
    border: none;
}

/* Gender question */
/* Yes/no question */
/* Bootstrap buttons layout */
.gender-button .btn-primary,
.yes-no .btn-primary,
.bootstrap-buttons-div .button-item {
  color: #5a5a5a;
  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,
.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;
  background-color: #0066b3;
  border-color: #0066b3;
  border: 2px solid #fff;
}

/* 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: #014268;
    background-image: -webkit-linear-gradient(top, #005c91 0%, #014268 100%);
    background-image: -o-linear-gradient(top, #005c91 0%, #014268 100%);
    background-image: linear-gradient(to bottom, #005c91 0%, #014268 100%);
}
.tooltip-inner {
  background-color: #5a5a5a;
}
.tooltip.top .tooltip-arrow {
     border-top-color: #5a5a5a5;
}
.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;
}
.question-container-printanswers {
  border-bottom: 1px solid #ccc;
}

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

body {
     padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
     padding-top: 0;/* 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 */
     min-height: 100vh; /* full height, to bottom-align footer */
}
body > article {
    flex: 1; /* the main article should use as much space as possible */
}


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

/* Index */
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  background-color: #6a90a6;
  color: #FFF;
  text-decoration: none;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #ccc;
  text-decoration: none;
}
.dropdown-menu > li > a {
  text-decoration: none;
}

/* Startpage */
.survey-list-heading,
.survey-list,
.survey-contact {
  text-align: center;
}
#surveys-list-container {
  background-color: #fff;
  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: #ececec;
    }
    
    table.ls-answers > tbody > tr:nth-child(even):hover {
        background-color: #ececec;
    }
    
    table.ls-answers > tbody > tr:nth-child(odd):hover {
    	background-color: #fff;
	}


    
    table.ls-answers > tbody > tr td.answer-item.radio-item,
    table.ls-answers > tbody > tr td.answer-item.checkbox-item {
        border-bottom: 1px solid #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;
	    background-color: #ddd;
	}
    
}

#navbar {
    font-size: 14px;
}
.ls-answers label, .ls-answers th {
  font-weight: 300 !important;
}





/* 2019-10-10 Marcel Minke: Styles for adjusted printanswers screen */
.printanswers .emptyanswer
{
    display: none;
}

#printlink
{
    text-align: center;
}
.summaryheadline.col-xs-12 {
    padding-left: initial;
}

@media print {
            
    * 
    {
        margin:0;
        padding:0;
        overflow: visible !important;
        position: relative;
    }
        
    html, body 
    { 
        height: 99%;
        overflow:visible;
        margin:0;
        padding:0;
        min-height: auto;
    }
    
    /* 2019-05-24 Decrease font size for printout */
     body
     {
         font-size: 120%;
     }
     
     body h3
     {
         font-size: 140%;
     }
     
    /* Special styles for printing backgrounds */
    body {
        -webkit-print-color-adjust: exact; /*Chrome, Safari */
        color-adjust: exact; /*Firefox*/
    }
    
    div
    {
        width: auto;
    }
    
    div#outer-wrapper
    {
        width: 90%;
    }
    
    div#outerframeContainer
    {
        margin-top: 0 !important;
        min-height: auto;
    }
    
    #main-col
    {
        float: none;
        margin-top: 0 !important;
    }
    
    /* to be hidden elements */
    .summaryprintlink,
    #printlink,
    #topsurveymenubar,
    #bootstrap-alert-box-modal,
    #yii-flash-message,
    .header-wrapper,
    .navbar-brand,
    .header-wrapper,
    .progress-wrapper,
    .summaryheadline
    {
        display: none;
    }
    
   table.completed-table h1
    {
        font-size: 28px !important;
        margin-top: 21px !important;
        margin-bottom: 10.5px !important;
    }
    
    /* Show footer when printing */
    #footer
    {
        display: block !important;
    }
    
    /* Page breaks for adjusted print answers screen */
    .groupSection {
        page-break-before: always;
    }
    .groupSection:first-of-type {
      page-break-before: avoid;
    }
    
    .question-container-printanswers {
        margin-top: 1em;
        margin-bottom: 1em;
        padding-bottom: 1em;
    }
    
  
    .question-container-printanswers .col-md-8
    {
        display: table-row;
    }
    
    .question-container-printanswers .col-md-8 .row .col-md-8.text-left
    {
        width: 400px;
        display: table-cell;
    }
    
    .question-container-printanswers .col-md-8 .row .col-md-4.text-right
    {
        width: 200px;
        display: table-cell;
    }
    
}