p {
    margin: 0 0 15px;
}

body
{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    background-color: #FFF;
    border-top: 2px solid #444;
}

div[id^="group-"]>div {
    background-color: #fff;
}

div[id^="group-"]>div.group-container {
 background-color: transparent;
}

/* Language changer general styles */
.language {}
.language-changer {
    background-color: #fff;
    padding: 1em;
    color: #444;
}
.language-changer div div {
    width: 100%;
}
#langchanger-label {
    display: none;
}
select.languagechanger {
    width: auto;
    margin: 0 auto;
}
select.languagechanger.form-control {
    color: #444;
}

/* Language changer hide additional button */
#changelangbtn {
  display: none;
}

.form-control  {
    border: 1px solid #ccc;
}

/* Top container */

#topContainer {
    width: 100%;
    padding: 1em;
    border-bottom: none;
    background: transparent;
    background-color: transparent;
}
#topContainer .container {
    background: #FFF;
}

/* Progress bar */
.progress {
    height: 21px;
    margin: 0;
    background-color: #f2f2f2;
    border-radius: 0;
}
.progress-bar {
    background-color: #444;
    line-height: 12px !important;
}
@media only screen and (max-width: 768px) {
  .progress {
    margin: 30px 30px 0 30px;    
  }
}

#surveynametitle {
    font-size: 4em;
}

#surveydescription, #surveynametitle, #welcome-container h1 {
    color: #444;
    text-align: center;
}


/* Question Group */
.group-name {}
#surveydescription, .group-name {
    color: #444;
    text-align: left;
    font-size: 180%;
    margin-top: 0;
    margin-bottom: 7px;
}
.group-description {
    text-align: center;
    margin-bottom: 15px;
}

/* Question Group Padding Fix */
.groupcontainer {
  padding-left: 15px;
  padding-right: 15px;
}

#main-row, #welcome-container {
    background-color: transparent;
}

/* Navigator */
#navigator-container {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
#navigator-container>div
{
}

/* Button Upload */
.upload-button {
  margin-top: 5px;
}

/* Button general */
a.btn {
  color: #5f9621;
}
.btn {
  padding: 0.7em 1.4em;
  border: 1px solid;
  border-radius: 0;
}

/* Button default */
.btn-default {
  color: #78b928;
  background-color: #fff;
  border-color: #78b928;
}
.btn-default:focus,
.btn-default.focus {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-default:hover {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}


/* Button primary */
.btn-primary {
  color: #ffffff;
  background-color: #78b928;
  border-color: #78b928;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #ffffff;
  background-color: #5f9621;
  border-color: #5f9621;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #5f9621;
  border-color: #5f9621;
}
#movenextbtn.btn-primary:hover,
#movenextbtn.btn-primary:focus,
#movenextbtn.btn-primary:active {
  background-color: #5f9621;
  border-color: #5f9621;
}
#movesubmitbtn.btn-primary:hover,
#movesubmitbtn.btn-primary:focus,
#movesubmitbtn.btn-primary:active {
  background-color: #5f9621;
  border-color: #5f9621;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #5f9621;
  border-color: #5f9621;
}
.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: #5f9621;
  border-color: #5f9621;
}

/* Button success */
.btn-success {
  color: #78b928;
  background-color: #fff;
  border-color: #78b928;
}
.btn-success:focus,
.btn-success.focus {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-success:hover {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #5f9621;
  background-color: #fff;
  border-color: #5f9621;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
  background-color: #ccc;
  border-color: #ccc;
}
.btn-success .badge {
  color: #ccc;
  background-color: #ffffff;
}


#main-col {
    margin-top: 1em;
}

.row {
}

.col-centered{
    float: none;
    margin: 0 auto;
}

#loadallbtn{
    white-space: normal;
}


.label-col {
    min-width: 10%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

li.responsive-content
{
    display: block;
    position: relative;
    float: left;
    width: 100%;
}

/* Don't wrap "No answer" for 10-point array */
.table-in-qanda-2 thead th {
    white-space: nowrap;
}


/**
* Slider
**/
.numeric-multi ul.slider.computed {
  width: 22em;
}

.numeric-multi ul.computed li label,.numeric-multi ul.slider.computed li label
  {
  padding-right: 0%;
}

.numeric-multi div.multinum-slider {
  width: auto;
  float: left;
  margin-top: 1.5em;
  margin-bottom: 0.2em;
}

/** UI Slider **/
.numeric-multi label.slider-label {
  display: table-cell;
  width: auto !important;
  padding: 0 1em 0.2em 0;
  margin-top: 1.3em;
  vertical-align: middle;
}
.numeric-multi .ui-slider-handle {
    top: -0.35em;
}
.ui-slider-1 {
  width: 200px;
  height: 9px;
  margin-bottom: 20px;
}
.ui-slider-2 {
  width: 200px;
  height: 23px;
  position: relative;
  background-image: url(../../images/slider-bg-2.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.slider_callout {
  height: 20px;
  width: 100px;
  overflow: hidden;
  position: absolute;
  top: -20px;
  margin-left: -3px;
  color: #284a6e;
  font-size: 90%;
  font-weight: bold;
  text-align: left;
}
.slider_showmin {
  float: left;
  width: 50px;
  margin: 15px 0 0 -0.3em;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: normal;
  text-align: left;
}
.slider_showmax {
  float: right;
  width: 50px;
  margin: 15px -0.3em 0 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: normal;
  text-align: right;
}
.slider_lefttext {
  display: table-cell;
  padding-top: 1.5em;
  padding-right: 11px;
  padding-bottom: 3px;
  vertical-align: top;
  text-align: right;
  font-size: 0.9em;
}
.slider_righttext {
  display: table-cell;
  padding-top: 1.5em;
  padding-left: 11px;
  padding-bottom: 3px;
  vertical-align: top;
  font-size: 0.9em;
}
.withslider {
    margin-bottom: 30px;
}
.slider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #78b928;
    background-image: -webkit-linear-gradient(top, #78b928 0%, #5f9621 100%);
    background-image: -o-linear-gradient(top, #78b928 0%, #5f9621 100%);
    background-image: linear-gradient(to bottom, #78b928 0%, #5f9621 100%);
    background-repeat: repeat-x;
    /* 2016-08-29 Marcel: validation fehler filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#222', GradientType=0);*/
    filter: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    border: 0px solid transparent;
}
.slider-selection {
  position: absolute;
  background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #ccc 100%);
  background-image: -o-linear-gradient(top, #f2f2f2 0%, #ccc 100%);
  background-image: linear-gradient(to bottom, #f2f2f2 0%, #ccc 100%);
  background-repeat: repeat-x;
  /* 2016-08-29 Marcel: validation fehler  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ccc', GradientType=0); */
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
}
.tooltip-inner {
  background-color: #222;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #222;
}

.radio-list li
{
    display: block;
    clear: both;
}
.question-item .other-label
{
    margin: 0px;
    padding: 0px;
}

/**
 * For em-type
 */
 .strong
 {
     font-weight: bold;
     display: inline-block;
     padding: 0.2em;
 }

 .hide-tip
 {
     display: none;
 }

/**
 * Surveys list
 */
.surveys-list {
    margin-top: 1em;
    list-style: none;
}
.surveys-list li {
    padding: 0.5em;
}
.surveys-list li a {
    margin-left: 0.5em;
}
#surveys-list-jumbotron {
    text-align: center;
}
#surveyListFooter {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 10px;
}
#surveyListFooter div{

}

/**
 * Gender buttons
 */

/* Not selected */
.gender-button button{
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.16), 2px 2px 2px 0 rgba(0, 0, 0, 0.12);
    margin-left: 1em;
}

/* selected */
.gender-button .btn:focus {
    box-shadow: none;
}
.gender-button .btn:focus .gender-text{
    text-decoration: underline;
}

/* Button styles */
.gender-button .btn-primary {
  color: #444;
  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: #78b928;
  border-color: #78b928;
  border: 2px solid #fff;
}

/* General */
.gender-button .btn span {
    display: block;
}
.gender-button .gender-icon {
    font-size: 2em;
}


/**
 * Yes / No buttons
 */

/* Not selected */
.yes-no button{
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.16), 2px 2px 2px 0 rgba(0, 0, 0, 0.12);
    margin-left: 1em;
}

/* selected */
.yes-no .btn:focus {
    box-shadow: none;
}
.yes-no .btn:focus .gender-text{
    text-decoration: underline;
}

/* Button styles */
.yes-no .btn-primary {
  color: #444;
  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: #78b928;
  border-color: #78b928;
  border: 2px solid #FFF;
}


/* Header styles */

html body .navbar.navbar-default.navbar-fixed-top {
    position: relative;
}

.navbar {
    margin-top: 10px;
    margin-bottom: 15px !important;
}
@media only screen and (max-width: 768px) {
    .navbar {
        margin-top: 0;
    }   
}

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

.navbar-header {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0 auto !important;
}

body .navbar-default .navbar-brand:hover {}

.navbar-brand {
    text-align: left;
    padding: 30px 0 0 0;
    font-weight: 600;
    height: auto;
}

@media only screen and (max-width: 768px)  {
  .navbar-brand {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
  }
}
.navbar-default .navbar-brand {
    color: #444;
}

.navbar-logo-left {
    text-align: left;
    padding-left: 0;
}

.navbar-logo-middle {
    text-align: center;
}

.navbar-logo-right {
    text-align: right;
    padding-right: 0;
}

img.logo {
  width: 192px;
  max-width: 100%;
  height: auto;
}

.divider {
  height: 1px;
  width: 100%;
  background-color: #ddd;
}

@media only screen and (max-width: 768px) {
    .navbar-logo-left {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-logo-middle {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar-logo-right {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }    
}


/* Navbar menu */
#navbar {
    width: 100%;
    padding: 0;
}
.navbar-nav {
    float: none;
}
.navbar-item-left {
    text-align: left;
    padding: 0;
}
.navbar-item-middle {
    text-align: center;
}
.navbar-item-right {
    text-align: right;
    padding: 0;
}
@media only screen and (max-width: 768px) {
    .navbar-item-left {
        text-align: center;
        margin-bottom: 15px;
    }
    .navbar-item-middle {
        text-align: center;
        margin-bottom: 15px;
    }
    .navbar-item-right {
        text-align: center;
    }    
}
.navbar-toggle {
    float: none;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-top: 25px;
}
.navbar-toggle .icon-bar {
    background-color: #aaa;
}
.bottom-menu {
    text-align: center;
}


/* Question index */
#indexcontainer {
  display : none;
}
.dropdown-menu .linkToButton {
    color: #777;
}
a.linkToButton:hover,
a.linkToButton:focus {
  border-bottom: 0;
}


/* For striped tables */
.well {
    background-color: #f2f2f2;
}
.array2 {
    background-color: #FFF;
}
.array1:hover, .array2:hover {
    background-color: #ddd;
}

/* Make sure table covers hole page */
table {
    width: 100%;
}

/* Give help text some space */
.question-help {
    font-size: 90%;
}
.text-info.questionhelp {}

/* Wrap text in e.g. gender button "No answer */
.wrap-normal {
    white-space: normal;
}

/* Adjust file-upload success colors */
.alert-success {
    background-color: #689F38;
    border-color: #689F38;
}

/* Center modal vertically, used by file-upload modal */
.modal {
    text-align: center;
    padding: 0!important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
     text-align: left;
     vertical-align: middle;
}

/* Make file upload modal fit to iframe */
.file-upload-modal-body iframe {
    height: inherit;
    width: 100%;
    border: none;
}
.file-upload-modal-body {
    padding: 0;
    height: 500px;
}
.file-upload-modal-footer {
    margin-top: 0;
}

.slider.slider-horizontal {
    width: 100%;

    /* The reset button will be under the slider, so allow some margin */
    margin-bottom: 1em;
}

/* When slider has both show-min-max and reset button, add space between
 * left badge and reset button */
.slider-min-badge {
    margin-right: 1em;
}

.slider-left-span {
    text-align: right;
}

.slider-right-span {
    text-align: left;
}

.slider-container {
    margin-top: 3.5em;
    margin-bottom: 2.5em;
}

#yii-flash-message {
    margin-top: 1em;
}

.prefix-text-right {
    text-align: right;
}

.align-middle {
    vertical-align: middle !important;
}

table.table-multi-text tbody tr th {
    vertical-align: middle;
}

table.question.subquestion-list.questions-list.table-multi-text thead tr th {
    text-align: center;
}

/* Used for date-picker icon within input */
.form-control-feedback {
    right: 1em;
    left: auto;
}

/* Used for multiple numeric sum and remain
 * Overwrite Bootstrap label font-size 75% */
.label {
    font-size: 90%;
}

/* Only use <label> to get vertical align easy. Don't want boldness. */
.no-label {
    font-weight: normal;
}

/* Center radio buttons in array-by-column */
.table-array-by-column td.radio-item.text-center.answer-item {
    padding-left: 47px;
}

table > tbody > tr > td.ddprefix {
    padding-right: 1em;
    vertical-align: middle;
}

/**
 * On big screen only, iPad and up
 */
@media only screen and (min-width: 768px) {
    .table-dual-scale .separator {
        width: 6%;
    }
    table > tbody > tr > td.ddsuffix {
        padding-left: 1em;
        vertical-align: middle;
    }
}

/**
 * No more tables
 * OBS: Media specific CSS must be last in this file.
 * iPad has width 768px (according to Chrome dev tool)
 * Google Nexus 10 has width 800px.
 * (Both in portrait mode.)
 * We don't have to collapse tables on pads.
 */
@media only screen and (max-width: 801px) {

    /*
        No more table transformation applies when screen is under 801px (for a few exotic tablet screens, see #11016),
        whereas visible-xs-block respect bootstrap standards (767px)
        If too many bugs of this kind appears in the future, we should just refuse to support weird exotic tablet screens.
        We should repsect standards, we should not try to fit to non standards devices. 
    */
    .visible-xs-block{
        display: block !important;
    }

    /* Remove margin */
    .row {
        margin: 0;
        padding: 0;
    }

    /* Add some margin for multiple short text */
    .form-group.row {
        margin-bottom: 15px;
    }

    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td {
        display: block;
    }

    /* 2016-08-29 Marcel: 11559: Layout problem with bipolar answers/labels for matrix (https://bugs.limesurvey.org/view.php?id=11559) */
    .no-more-tables tbody th,
    .no-more-tables tbody td,
    .no-more-tables tbody tr {
        width: 100% !important;
    }
    
    .no-more-tables tr {
        display: inline-block;
    }

    .no-more-tables tbody {
        padding: 0 1em 0 1em;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .no-more-tables tr,
    .array-by-columns-div .radio-list {
        border: 1px solid #ccc;
        padding: 1em;
    }

    /* Line header ; color is h4 color */
    .no-more-tables tr th,
    .array-by-columns-div .answertext {
        font-size: 1.1em;
        text-align: center;
        color: #317eac;
    }
    
    .no-more-tables tr th, 
    .array-by-columns-div .answertext 
    {
        font-size: 1.1em;
        text-align: center;
        color: #444;
    }    

    .no-more-tables tr th {
        text-align: left;
    }

    .array-by-columns-div .answertext {
        padding: 8px;
        padding-left: 0;
        text-align: left;
        font-weight: bold;
    }

    .array-by-columns-div .radio-item {
        padding-bottom: 8px;
    }

    .no-more-tables .checkbox  {
        position: relative;
        top: 6px;
    }

    .no-more-tables td {
        /* Behave  like a "row" */
        min-height: 2em;
        border: none;
        position: relative;
        /*padding-left: 95%;*/
        padding-bottom: 1em;
        white-space: normal;
        text-align:left;
    }

    .array-multi-flexi  .no-more-tables td, .no-more-tables-array-dual-dropdown-layout  td, .no-more-tables-array-multi-text td {
        padding-left: 1.5em;
    }


    .no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    /*.no-more-tables td:before { content: attr(data-title); }*/

    .no-more-tables-10-point td {
    }

    /* Don't wrap "No answer" on two lines */
    .no-more-tables-10-point label {
        white-space: nowrap;
    }

    .no-more-tables-10-point td:before, .no-more-tables-5-point td:before {
        /* Now like a table header */
        position: relative;
        left: 2px;
        /* Top/left values mimic padding */
    }

    /* When tables are collapsed, remove margin top so the labels look centered */
    input[type="radio"],
    .radio input[type="radio"],
    .radio-inline input[type="radio"] {
      margin-top: 4px;
    }

    .five-point-choice .col-xs-12 {
        padding-bottom: 8px;  /* For 5-point-choice; TODO: Should look like 5-point-array? */
    }

    /* Hide the first column in array-by-column */
    .array-by-columns-table tr > *:nth-child(1) {
        display: none;
    }

    /* Need some more space on phone */
    .array-multi-flexi .answertext {
        padding-bottom: 0.5em;
    }

    .array-multi-flexi .answer-item label {
        padding-bottom: 0.5em;
    }

    /* On phone, left and right slider text is above and below slider */
    .slider-left-span {
        text-align: left;
    }

    /* As above, collapse prefix/suffix to above/below input */
    .prefix-text-right {
        text-align: left;
    }

    table.question.subquestion-list.questions-list tr th.answertext {
        text-align: left;
    }

    /* Used for date-picker icon within input */
    .form-control-feedback {
        right: 0.5em;
    }

    /* Increase-same-decrease array */
    .row-inc-same-dec .radio-item,
    .thead-inc-same-dec th {
        text-align: left;
    }

    .table-multi-num.no-more-tables tr {
        border: none;
    }

    /* Used for <td></td> in multiple-numeric */
    td.hide-on-small-screen {
        display: none;
    }

    #langchanger-label {
        padding-top: 11px;
    }

    .col-xs-12.question-container {
        padding-right: 0;
        padding-left: 0;
    }

}

/** On small phones, leave some more space */
@media only screen and (max-width: 400px) {

    .array-by-columns-div .radio-list {
        border: 1px solid #ccc;
        padding: 1em;
        margin: 1em;
    }

    /*
    .col-sm-12.answer {
        padding-left: 0;
        padding-right: 0;
    }
    */

    .no-more-tables tbody {
        padding-left: 0;
        padding-right: 0;
    }

    /* For yes-no question, shrink the buttons a bit on phone screens */
    .btn-lg, .btn-group-lg label {
        padding: 10px 15px;
    }

    .slider.slider-horizontal {
        /* Slider can be full width on phones */
        width: 100%;
    }

    /* Center label under radio button on phones */
    .five-point-choice label {
        margin-left: 5px;
    }

    /* Make file-upload pop-up shorter on phones */
    .file-upload-modal-body {
        padding: 0;
        height: 300px;
    }

    /* Modal should be in front of navbar, so the close icon is visible */
    .modal {
        z-index: 3000;
    }

    /* Less margin on phones */
    .slider.slider-horizontal {
        margin-bottom: 0.4em;
    }

}

/* On iPad etc only */
@media only screen and (max-width: 800px) and (min-width: 768px) {
    .five-point-choice .noanswer-item {
        padding: 0;
    }
}


/**
 * Display adjust, question type by question type
 */

.radio input[type="radio"]:disabled + label
{
    opacity: 0.25;
}


/*
    Arrays Question
*/

/* vertical center the radio list in the td */
td.answer-item.text-center
{
    vertical-align: middle;
}

/* center the radio list in the td */
td.answer-item.text-center
{
    padding-left: 39px;
    border-radius: 0;
}
table.array-no-dropdown  td.answer-item.text-center
{
    padding-left: 45px;
}
.table-5-point-array td.answer-item.text-center
{
    padding-left: 54px;
}
.table-10-point-array  td.answer-item.text-center
{
    padding-left: 40px;
}
.table-10-point-array  thead tr th.text-center
{
    padding-left: 0px;
}

/* center the label text in no more table mode */
.label-text{
    margin-top: -24px;
    margin-left: 20px;
}
.label-clickable:hover
{
    cursor: pointer;
}
.table > tbody > tr > th
{
    vertical-align: middle;
}
table.numbers-only th, table.numbers-only input {
    text-align: right;
}
.othertext-label-checkox-container {
    padding-top: 5px;
    margin-right: 5px;
}
.multiple-choice-with-comment.table, .table-multi-num.table{
    table-layout: auto;
    width: initial;
}
 .multiple-choice-with-comment.table > tbody > tr > td {
    padding-left: 18px;
    vertical-align: middle;
}

 /* alignment for small screens*/
.multiple-choice-with-comment.table > tbody > tr > td.comment-container {
    padding-left: 14px;
}
.checkbox input[type="checkbox"] {
    margin-left: 0px;
}
.short-free-text .prefix, .short-free-text .suffix,.geoloc-item .search-icon, .geoloc-item .checkbox  {
    padding-top: 10px;
}
.geoname_search {
    margin-bottom: 10px;
}

/* Remove answer label background-color */
thead tr.array1,
thead tr.array1:hover,
thead.array1,
thead.array1:hover {
  background: transparent;
  background-color: transparent;
}
tr.array1 {
  background-color: #f2f2f2;
}
.well {
  background-color: transparent;
}

/* Add striped background for array by column */
.array-flexible-column .question-wrapper div div table tbody tr:nth-child(odd) {
  background: #fff;
}
.array-flexible-column .question-wrapper div div table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.array-flexible-column .question-wrapper div div table tbody tr:hover {
    background-color: #ddd !important;
}
.array-flexible-column .question-wrapper div div table tbody tr td.array2 {
  background-color: transparent !important;
}
.array-flexible-column .question-wrapper div div table tbody tr td.array2:hover {
  background-color: transparent !important;
}
.array-flexible-column .question-wrapper div div table thead.array1.dontread tr th {
  background-color: transparent !important;
}
.array-flexible-column .question-wrapper div div table thead.array1.dontread tr th:hover {
  background-color: transparent !important;
}


/* Add striped background for array flexible dual scale */
.array-flexible-duel-scale .question-wrapper div div table tbody tr:nth-child(odd) {
  background: #fff;
}
.array-flexible-duel-scale .question-wrapper div div table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.array-flexible-duel-scale .question-wrapper div div table tbody tr:hover {
    background-color: #ddd !important;
}
.array-flexible-duel-scale .question-wrapper div div table thead tr th {
  background-color: transparent !important;
}


/** Question Design **/
body div.row .question-container {
    margin-bottom: 1.2em;
    padding-bottom: 10px;
}
.question-container {
    border: 1px solid #ddd;
    padding-bottom: 0;
}
.question-container.input-error {
  border-color: #E75041 !important;
}
.answer-container, .question-help-container
{
    border-style: solid;
}
.answer-container
{
    border-width: 0px 1px 0px 1px;
    padding-top: 15px;
    background-color: white;
}


/** Header **/

.question-title-container {
    padding: 0.8em 0.25em;
    background-color: #78b928;
    color: #fff;
    font-size: 120%;
}

.boilerplate .question-title-container {
  background-color: #78b928;
  color: #FFF;
}

.questionvalidcontainer {
    background-color: transparent;
    color: #444;
    position: relative;
    text-align: left;
    padding-bottom: 0.5em;
    font-style: italic;
    font-size: 90%;
    margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .questionvalidcontainer {
    padding: 0;
    margin-bottom: 2px;
  }
}

.answer-container {
    border: 0;
}

.question-help-container
{
    border: 0;
    padding: 10px 0 0 0;
}

.questionvalidcontainer .text-danger{}

.questionvalidcontainer .text-info{
    color: #444;
}

.text-info {
  color: #888;
}

/* Arrow */
/* Will confuse survey takers?
.questionvalidcontainer:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #233140;
    border-width: 0.9em;
    margin-left: -0.9em;
}
*/

/* Asterisk */
.asterisk {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    /* 2016-08-29 Marcel: no support by all browsers: text-rendering: auto;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 12px !important;
}
.asterisk:before {
    content: "\f069";
}


/* Check javascript */
#checkjavascript {
    margin-top: 100px;
}

/*label font weight*/
label, th {
    font-weight: normal;
}

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

/* text overflows, ellipsis and hyphens */
.navbar-brand {
    text-overflow: ellipsis;
}

#outerframeContainer {
    min-height: 100%;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
    margin-top: 0px !important;
    background: #FFF;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
    #outerframeContainer {
        margin-bottom: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }   
}

.xdebug-var-dump {
    z-index: 10000;
    position: relative;
    top: 10px;
}

.list-unstyled.radio-list {
    padding-left: 15px;
}

div.yes-no .btn-group label {
  white-space:normal;
}

.multipleco-other-topic {
    max-width: 50%;
    margin-top: 5px;
}

/* Container padding reset */
.container {
    padding: 0 !important;
}

/* Privacy note */
.privacy div p {
    background-color: #f2f2f2;
    padding: 15px;   
}

/* Radios and Checkboxes */
/* radio buttons */
.radio label::before {
    border-color: #aaa;
}
.radio label::after {
    background-color: #78b928;
}
/* checkboxes */
.checkbox label::before {
    border-color: #aaa;
}
.checkbox label::after {
    color: #78b928;    
}

/* Footer */
#footer-wrapper {
    width: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 90%;
}

/* Help block */
.help-block {
    color: #999;
}

/* Date Picker */

.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover {
    background-color: #444 !important;
}
.input-group-addon {
    color: #444;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

/* Ranking Question */
.dragDropRanking {
    padding-bottom: 15px;
}
.dragDropTable .dragDropChoices, .dragDropTable .dragDropRanks {
    margin-right: 5px;
}
.dragDropTable ul.dragDropChoiceList li {
    background: #f2f2f2;    
}
.dragDropTable ol.dragDropRankList li {
    background: #78b928;
    color: #FFF;
    border: 1px solid #5f9621;
}
@media only screen and (max-width: 768px) {
    .dragDropTable .columns2 {
        width: 100%;
        margin-bottom: 15px;
    }
}
.dragDropTable .dragDropChoices {
    margin-right: 15px !important;
}

/* Links */
table a:not(.btn), .table a:not(.btn) {
    text-decoration: none;
}

/* Print page */
input#exportbutton {
  color: #fff;
    background: #78b928;
    border-color: #78b928;
    margin-bottom: 10px;
}
input#exportbutton:hover {
  color: #fff;
    background: #5f9621;
    border-color: #5f9621;
}
.printouttitle {
    margin: 50px 0 15px 0;
    font-size: 140%;
    text-align: center;
    font-weight: bold;
}
table.printouttable {
    background: #FFF;
    border: 1px solid #ccc;
}
table.printouttable tr td {
    border: 1px solid #ccc;
    padding: 5px; 
}
.printanswersquestion {
    font-weight: 400;
}
tr.printanswersgroup td {
  font-weight: 700;
  font-size: 120%;
  background: #444;
  color: #fff;
}
.printanswersanswertext {
  font-weight: bold;
  font-style: italic;
}
.printanswersgroupdesc {
  font-style: italic;
}
table.printouttable tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Public Statistics */
#statsContainer { /* Container */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
}
#statsContainer .statsSurveyTitle { /* Main Title */
  margin: 0px 0 20px;
  font-size: 130%;
  font-weight: 700;
  text-align: left;
  padding: 0;
  display: none;
}
#statsContainer .statsNumRecords {/* No of records in survey */
  font-size:110%;
  font-weight:700;
  text-align:left;
  padding: 10px 0px;
}
#statsHeader {
  padding: 0px 0px 10px;
}
div.fieldSummary {
  padding: 0;
  text-align: center;
  background-color: #D2E0F2;
}
div.questionTitle {
  padding: 0;
  font-weight: bold;
  background-color: #D2E0F2;
}
table.statisticstable {
  margin:15px auto 20px 0px;
  width: 100%;
  border-top: 1px solid #BBC6CC;
}
table.statisticstable td {
  line-height: 190%;
  border-bottom: 1px solid #BBC6CC;
}
table.statisticstable img {
  margin:10px auto;
}
table.statisticstable th {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: 120%;
  padding: 15px 20px;
}
table.statisticssummary {
}
table.statisticssummary thead tr th {
  font-size: 110%;
  text-decoration: underline;
  padding-bottom: 5px;
}
table.statisticssummary tbody {
  line-height: 20px;
}
table.statisticssummary tbody tr td {
  padding-left: 20px;
}

/* Numerical input fix */
.numeric-item div.col-sm-5 {
    width: 100%;
}

/* Label */
.label-default {
background-color: #444;
    margin-right: 15px;
    border-radius: 0;
}

/* Save All */
.save-all {
    padding: 0;
}

/* List with comment */
  .comment.answer-item.text-item {
    margin-top: 30px;
}

/* Horizontal center label with dropdown for Array questions */
.array-multi-flexi th.th-11,
.array-multi-flexi-text thead tr th.answertext {
  text-align: center; 
}
@media only screen and (max-width: 768px) {
  .array-multi-flexi .text-right {
    text-align: left;
  }  
}

/* Vertical center fix for Dual Scale Array questions */
@media only screen and (max-width: 768px) {
  .array-flexible-duel-scale .label-text {
    margin-top: 0;
    margin-left: 0;
  }
}

/* Mandatory error margin */
.errormandatory {
  margin-bottom: 0;
}

/* Adjust file-upload body color */
body.uploader {
  background: #fff;
}

/* List dropdown other field margin fix */
.list-dropdown input.form-control {
  margin-top: 15px;
}

/* Radio button & checkbox margin to answertext fix */
.label-text {
    margin-left: 10px;
}

/* Save for later */
.save-heading h3 {
  text-align: center;
}

/* 2016-08-11 Marcel: Fix duplicate headers at resolution > 800px <1000px 
.visible-xs-block 
{
    display: none !important;
}
*/

/* Array (Increase/Same/Decrease) text-center fix */
div.array-increase-same-decrease table tbody tr th.text-center {
  text-align: left;
}

/* 2016-08-29:     11537: Large array questions moving out of question container
   AND:     11588: Default template below 800px: array with checkboxes goes wrong*/
@media only screen and (max-width: 900px) and (min-width: 800px) {
    .table-10-point-array td.answer-item.text-center
    {
        padding-left: 0px;
    }
    
    .no-more-tables .table-10-point-array td
    {
        padding-left: 1.5em;
    }
}

/* 2016-10-07 Marcel: Fixing different column width for multi-flexi-dropdown */
.array-multi-flexi table.dropdown-list,
.array-multi-flexi table.numeric-item,
.array-flexible-row table.question

{
    table-layout: fixed;
}

/* 2016-02-05: Fixed issue #11696: "Return to survey" link misaligned in load screen */
p.return-to-survey {
  clear:left;
}

/* 2017-05-17 Statistics Page fixes */
.statisticstable .text-left {
    text-align: left;
}
.statisticstable .text-right {
    text-align: right;
}
.stats-wrapper#outerframeContainer {
    padding: 5px !important;
}
.public-stats {
    width: 100%;
}
.public-stats .well {
    padding-left: 0;
    padding-right: 0;
}
#statsContainer {
    overflow: visible;
}

/* Fixed danger label for matrix questions */
.label-danger {
    display: inline-block;
    line-height: 120%;
    font-weight: normal;
    color: #444;
    font-size: 100%;
    white-space: normal;
    background-color: transparent;
}

/* Slider mobile fixes */
.slider.slider-horizontal {
    margin-top: 40px;
}
@media only screen and (max-width: 768px) {
    .slider-label-left {
        width: 50% !important;
    }
    .slider-label-right {
        width: 50% !important;
        text-align: right !important;
    }
}

/* Mandatory questions layout fix */
.label-danger {
    text-align: left !important;
}

/* 2017-10-02 Marcel: No hyphenation */
body p, body div {
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none;
    -o-hyphens:none;
    hyphens:none;
}

/* 2018-02-28: 5pt choice margin fix */
.choice-5-pt-radio .answer {
  margin-left: 20px;
}


/* 2018-04-24 Marcel: CSS for special question layout */
.q-top table.question,
.q-middle table.question,
.q-bottom table.question
{
    table-layout: initial;
}

.q-top .answer-container,
.q-middle .answer-container,
.q-bottom .answer-containern
{
    padding-top: 0px;
}

.q-top .answer-container table.question th.th-9.text-center:nth-child(7),
.q-middle .answer-container table.question th.th-9.text-center:nth-child(7),
.q-bottom .answer-container table.question th.th-9.text-center:nth-child(7),
.q-top .answer-container table.question td.answer_cell_6,
.q-middle .answer-container table.question td.answer_cell_6,
.q-bottom .answer-container table.question td.answer_cell_6
{
    padding-right: 0;
}

@media only screen and (min-width: 768px) {
  .q-top .answer-container table.question th.th-9.text-center:nth-child(8),
  .q-middle .answer-container table.question th.th-9.text-center:nth-child(8),
  .q-bottom .answer-container table.question th.th-9.text-center:nth-child(8),
  .q-top .answer-container table.question td.answer_cell_na,
  .q-middle .answer-container table.question td.answer_cell_na,
  .q-bottom .answer-container table.question td.answer_cell_na
  {
      padding-left: 50px;
  }
}

@media only screen and (min-width: 768px) {
  .q-middle .answer-container table.question td.answer_cell_na,
  .q-top .answer-container table.question td.answer_cell_na {
    padding-left: 90px;
  }
}

body div.row .question-container.q-top
{
    margin-bottom: 0px;
    border-bottom: none;
}

body div.row .question-container.q-middle
{
    margin-bottom: 0px;
    border-bottom: none;
    margin-top: 0px;
    border-top: none;
}

body div.row .question-container.q-bottom
{
    border-top: none;
}


/* 2018-04-27 Marcel: No padding for Boilerplate questions */
body div.row .boilerplate.question-container
{
    margin-top: 15px;
    padding-bottom: 0px;    
    font-style: italic;
    border: 1px solid #78b928;
}

/* 2018-05-01 Marcel: Fix for Array questions on mobile */
@media only screen and (max-width: 768px) {
  .array-flexible-row .question-title-container {
    margin-bottom: 30px;
  }
}

/* 2018-05-25 Marcel: Adjust answer font size for tables */
table.question thead tr th {
    font-size: 90%;
}