body
 {
     /*padding-top: 50px; now define in JS to fit any title length */
     padding-bottom: 10px;
     font-size: 16px;
 }

.remove-margins {
    margin: 0;
}
.remove-padding {
    padding: 0;
}
div[id^="group-"]>div {
    background-color: #fff;
    margin-bottom: 1em;
 }

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

.language-changer {
    background-color: #fff;
    padding: 1em;
}

#topContainer {
    position: absolute;
    /*top: 55px; now define in JS to fit any title length */
    width: 100%;
    padding: 1em;
    border-bottom: none;
}

.progress {
    height: 21px;
    margin-bottom: 0px;
}

#surveynametitle {
    font-size: 4em;
}

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

.group-name {

}

#surveydescription, .group-name {
    color: #2c3e50;
}

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

 #navigator-container {
     margin-top: 0em;
     padding-top: 1em;
     padding-bottom: 1em;
 }
#navigator-container hr {
    margin: 0;
    display: none;
}
 #navigator-container>div
 {
 }

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

.row {
}

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


/**
* navigator
*/
#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: Verdana, Arial, 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: Verdana, Arial, 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;
}






#indexcontainer {display : none;}

.radio-list li
{
    display: block;
    clear: both;
}
/*
.checkbox, .radio
{
    float: left;
}

.label-radio span
{
    display: inline-block;
    padding-top: 3px;
}
*/
.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;
}

/*#outerframeContainer {
    height: 100%;
}*/

#surveyListFooter {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 10px;
}

#surveyListFooter div{

}

html, body {
    height: 90%;
}

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

/* General */
.gender-button .btn span {
    display: block;
}

html body .navbar.navbar-default.navbar-fixed-top {
    z-index: 2000;
}

.gender-button .gender-icon {
    font-size: 2em;
}

.navbar-brand {
    height: auto;
}

/* For striped tables */
.array2 {
    background-color: #f9f9f9;
}

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

/* Give help text some space */
.question-help {
    margin-top: 1em;
}

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

/* 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: 2em;
}

.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%;
}

body .navbar-default .navbar-brand:hover {
    color: #ffffff;
}

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


/*
    Arrays Question
*/

/* center the radio list in the td*/
td.answer-item.text-center
{
    padding-left: 39px;
}

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;
}

/**
 * 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;
    }
    .visible-xs-inline-block{
        display: inline-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;
    }

    .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 {
        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;
    }


    /* text overflows, ellipsis and hyphens */
    .navbar-brand {
        white-space:nowrap;
        text-overflow: ellipsis;
        text-overflow: "…";
    }


}

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


}

@media only screen and (max-width: 1000px) and (min-width: 800px) {
    .table-10-point-array td.answer-item.text-center
    {
        padding-left: 10px;
    }

    .table-10-point-array  > thead > tr > th
    {
        text-align: left;
        padding-right: 0px;
    }
}


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

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




/* center the label text in no more table mode */
.label-text{
    margin-top: -24px;
    margin-left: 10px;
}

/* ...except for dual-scale and array-by-column */
.table-dual-scale .label-text, .array-by-columns-div .label-text {
    margin-top: 0px;
    margin-left: 0px;
}

.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;
}




/** Question Design **/

body div.row .question-container {
    margin-bottom: 2em;
}

.answer-container, .question-help-container
{
    border-style: solid;
}

.answer-container
{
    border-width: 0px 1px 0px 1px;
    padding-top: 15px;
    background-color: white;
}

.question-help-container
{
    border-width: 0px 1px 1px 1px;
    padding-bottom: 5px;
}


/** Header **/

.question-title-container {
    color: white;
}

.questionvalidcontainer {
    position: relative;
    text-align: center;
    padding-bottom: 0m;
}

.questionvalidcontainer .text-danger{
    font-weight: bold;
}

.questionvalidcontainer .text-info{
    color: #B9CC14;
    font-weight: bold;
}

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

/* Asterix */
.asterisk {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.asterisk:before {
    content: "\f069";
}


/* Check javascript */
#checkjavascript {
    margin-top: 100px;
    z-index: 999;
    right: 100px;
    position: fixed;
    width: 300px;
}

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

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

/* text overflows, ellipsis and hyphens */
.navbar-brand {
    overflow: hidden;
    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;
}

.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: 150px;
}

.privacy-header{
    font-weight: bold;
    font-style: italic;
}

/*** Divider for Bootstrap ***/

.horizontal-divider.top{
  border-top: 3px solid #323232;
}
.horizontal-divider.bottom{
  border-bottom: 3px solid #323232;
}

.vertical-divider.left {
  border-left: 3px solid #323232;
}
.vertical-divider.right {
  border-right: 3px solid #323232;
}
@media (max-width: 800px){
    .vertical-divider.left {
    border: none;
    }
    .vertical-divider.right {
    border: none;
    }
}
/*** Small helper classes, that are not shipped with bootstrap but fit in well***/
.ls-custom-padding{
    padding: 1px;
}
.ls-custom-padding.two{
    padding: 2px;
}
.ls-custom-padding.three{
    padding: 3px;
}
.ls-custom-padding.four{
    padding: 4px;
}
.ls-custom-padding.five{
    padding: 5px;
}
.ls-custom-padding.fifteen{
    padding: 15px;
}
.ls-custom-padding.eighteen{
    padding: 18px;
}

.ls-custom-margin{
    margin: 1px;
}
.ls-custom-margin.two{
    margin: 2px;
}
.ls-custom-margin.three{
    margin: 3px;
}
.ls-custom-margin.four{
    margin: 4px;
}
.ls-custom-margin.five{
    margin: 5px;
}
.ls-custom-margin.fifteen{
    margin: 15px;
}
.ls-custom-margin.eighteen{
    margin: 18px;
}


/* OHCOW */
/*
dark red: #E10034;
light red: #FCE7Ec
dark dark grey: #9B9B9B
dark grey: #AFAFAF
light grey: #EAEAEA
light light grey: #F5F5F5
*/

body.sa-personal-survey-type .sa-v-group-sa-national .tab-pane,
body.sa-personal-survey-type .sa-v-group-sa-results #congrats.tab-pane,
body.sa-personal-survey-type .sa-v-group-sa-survey .tab-pane {
  background: #EAEAEA;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  padding: 1em 1em 0 1em;
  margin-top: 1em;
  margin-bottom: 0;
}
body.sa-personal-survey-type #navigator-container.sa-navigation {
  background: #EAEAEA;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding: 0 1em 1em 1em;
  margin-top: 0;
  margin-bottom: 1em;
}

body.sa-personal-survey-type .sa-question-container > .form-group {
  margin-bottom: 0;
  margin-top: 15px;
}


body.sa-personal-survey-type.sa-single-move form#limesurvey {
  background: #EAEAEA;
  border-radius: 1em;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}


.sa-question-container {
  background: #fff;
  border-radius: 1em;
}

.sa-results-tips-modal .modal-header {
  border-bottom: none;
}

.sa-results-tips-modal .modal-footer {
  border-top: none;
  padding-top: 0;
}

.sa-results-tips-modal .modal-title {
  background: #000;
  color: #fff;
  text-align: center;
}

.sa-results-tips-modal .modal-body {
  padding-top: 0;
}

.sa-results-tips-modal .sa-personal-result-tip p {
  font-weight: bold;
  margin-bottom: 0;
}

.sa-results-tips-modal .sa-personal-result-tip p a,
.sa-results-tips-modal .sa-personal-result-tip p a:link,
.sa-results-tips-modal .sa-personal-result-tip p a:visited,
.sa-results-tips-modal .sa-personal-result-tip p a:hover,
.sa-results-tips-modal .sa-personal-result-tip p a:active {
  color: #000;
  text-decoration: none;
}

.sa-results-tips-modal .sa-personal-result-tip ul {
  list-style-type: none;
  padding-left: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
}

.sa-results-tips-modal .sa-personal-result-tip li {
  padding: 0.5em;
}

.sa-results-tips-modal .sa-personal-result-tip li:nth-child(odd) {
  background: #EAEAEA;
}

.sa-results-tips-modal .panel-default > .panel-heading {
  background-color: #fff;
}

a.sa-personal-results-legend-title {
  position: fixed;
  top: 40%;
  right: 0;
  padding: 0.95em 3.0em 0.95em 1em;
  text-align: center;
  transform: rotate(-90deg);
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  background-size: 30px 30px;
  background: center right url('../files/sa_img/upArrow_undefined.png') no-repeat #494949;
  border-radius: 5px;
}

.sa-personal-results-legend-title:hover {
  background-size: 40px 40px;
  background-image: url('../files/sa_img/downArrow_undefined.png');
}

.sa-personal-results-legend-title:hover +  .sa-personal-results-legend-wrapper {
  display: block;
  box-shadow: 0px 2px 5px #ddd;
}

.sa-personal-results-legend-wrapper {
  position: fixed;
  top: 25%;
  right: 5.5em;
  display: none;
}

.sa-personal-results-legend .sa-personal-results-table {
  padding: 0.25em;
  border: solid 1px #ddd;
  border-radius: 5px;
  background: #fff;
}

.sa-personal-results-legend .sa-personal-results-table td {
  text-align: right;
  padding: 0.2em;
}

.sa-personal-results-legend .sa-personal-results-table tr.spacer td {
  padding: 0.2em;
}

.sa-personal-results-legend .sa-personal-results-table .sa-colour {
  width: 2em;
  height: 2em;
  border: solid 1px #ddd;
}

.sa-personal-results-legend .sa-personal-results-table tfoot td {
  padding-top: 1em;
}

.sa-personal-results-wrapper {
  margin: 0;
  padding: 0;
}

.sa-personal-results .panel-body {
  text-align: center;
}

.sa-personal-results .sa-results-split-wrapper {
  position: relative;
  height: 3em;
}

.sa-personal-results .sa-results-split-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10%;
}

.sa-personal-results .sa-results-split-left .tooltip-inner {
  text-align: left;
  min-width: 200px;
}

.sa-personal-results .sa-results-split-left .tooltip-inner ul {
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-padding-start: 0;
}

.sa-personal-results .sa-results-split-left .tooltip-inner li {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.sa-personal-results .sa-results-split-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
}

.sa-personal-results .sa-results-split-wrapper h3 {
  font-size: 1.2em;
  margin-bottom: 0;
}

.sa-personal-results .sa-results-split-left p {
  font-size: 0.8em;
  padding-top: 2em;
}

.sa-personal-results .sa-results-title-comparison p {
  margin: 0;
}


.sa-results-tips-question {
  background: url('../files/sa_img/question_icon.png') 50% 50% no-repeat;
  height: 2.2em;
  background-size: contain;
  cursor: pointer;
}

body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title {
  border: solid 1px #000;
  padding: 0.5em;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 98% 50%;
  background-size: auto 80%;
}

body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title.sa-tipped {
  background-image: url('../files/sa_img/ideas_icon_white.png');
}

body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title h4 {
  text-align: center;
  display: inline;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  cursor: pointer;
}


body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title a,
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title a:link,
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title a:visited,
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title a:hover,
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title a:active {
  text-decoration: none;
  color: #2C3E50;
}

body.sa-personal-survey-type .sa-personal-results-table .sa-colour-black { background-color: #000000; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-blue { background-color: #009BFF; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-green { background-color: #00D300; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-white { background-color: #FFFFFF; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-yellow { background-color: #FEEC00; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-orange { background-color: #F9963B; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-red { background-color: #DF0034; }
body.sa-personal-survey-type .sa-personal-results-table .sa-colour-undefined { background-color: #ddd; }

body.sa-personal-survey-type .sa-personal-results .sa-results-directions {
  font-size: 0.8em;
  color: #9b9b9b;
}

body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-blue { background-image: url('../files/sa_img/downArrow_blue.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-green { background-image: url('../files/sa_img/downArrow_green.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-white { background-image: url('../files/sa_img/downArrow_white.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-yellow { background-image: url('../files/sa_img/downArrow_yellow.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-orange { background-image: url('../files/sa_img/downArrow_orange.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-red { background-image: url('../files/sa_img/downArrow_red.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.collapsed.sa-arrow-undefined { background-image: url('../files/sa_img/downArrow_undefined.png'); }

body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-blue { background-image: url('../files/sa_img/upArrow_blue.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-green { background-image: url('../files/sa_img/upArrow_green.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-white { background-image: url('../files/sa_img/upArrow_white.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-yellow { background-image: url('../files/sa_img/upArrow_yellow.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-orange { background-image: url('../files/sa_img/upArrow_orange.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-red { background-image: url('../files/sa_img/upArrow_red.png'); }
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results .panel-heading a.sa-arrow-undefined { background-image: url('../files/sa_img/upArrow_undefined.png'); }


body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title.sa-colour-red a,
body.sa-personal-survey-type .sa-survey-results-evaluate .sa-personal-results-table .sa-score-title.sa-colour-blue a {
  color: #fff;
}

.sa-personal-survey-type .sa-workplace-completed,
.sa-workplace-survey-type.sa-single-move .sa-survey-site-content > .sa-nav-tabs.sa-nav-tabs-below .nav-tabs,
.sa-workplace-survey-type .sa-personal-completed,
.sa-workplace-survey-type a.sa-personal-results-legend-title {
  display: none;
}

a,
a:link,
a:visited,
a:hover,
a:active,
.sa-survey-site-content a {
  color: #AFAFAF;
}

.sa-survey-site-content .sa-participation-box {
  padding: 1em;
  font-weight: bold;
  background: #EAEAEA;
}

.sa-survey-site-content .sa-more-toggle {
  text-align: center;
}

.sa-survey-site-content .sa-more-toggle a {
  display: inline-block;
  color: #E10034;
}

.sa-survey-site-content .sa-more-toggle a span {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
  width: 2em;
  height: 2em;
  background: url('../files/sa_img/downArrow_red.png') 50% 50% no-repeat;
  background-size: 1.9em;
}

.sa-survey-site-content .sa-collapse .sa-more-toggle a span {
  background-image: url('../files/sa_img/upArrow_red.png');
}

.sa-survey-site-content .sa-popup-definition {
  color: #000;
}
.sa-survey-site-content .sa-survey-timing {
  min-height: 5em;
  padding-left: 5em;
  background: url('../files/sa_img/time.png') 0 0 no-repeat;
  background-size: 4.5em 4.5em;
}

.sa-survey-site-content .sa-purpose-box {
  padding: 1em;
  background: #FCE7EC;
  text-align: center;
  margin-bottom: 1em;
}
.sa-survey-site-content .sa-collapse a {
  color: #E10034;
}

.sa-survey-site-content .sa-about-box h4 {
  display: inline-block;
  border-top: solid 0.4em #E10034;
  padding-top: 0.4em;
  margin-top: 0;
}

.sa-survey-site-content .sa-about-box {
  padding: 0 1em 1em 8em;
  background: #EAEAEA;
  margin-top: 1em;
  margin-bottom: 1em;
}

.sa-survey-site-content .sa-about-box.sa-about-box-ohcow {
  background: #EAEAEA url('../files/sa_img/ohcow_logo.png') 1.5em 50% no-repeat;
  background-size: 5em;
}

.sa-survey-site-content .input-error {
  border: none;
}

.sa-survey-site-content .questionvalidcontainer {
  background-color: #fff;
}

.sa-survey-site-content .questionvalidcontainer .text-danger {
  color: #E10034;
}

.sa-survey-site-content .answer-container.col-sm-6 .answer-item.col-sm-2,
.sa-survey-site-content .answer-container.col-sm-6 .answer-item.col-sm-4,
.sa-survey-site-content .answer-container.col-sm-6 .answer-item.col-sm-12 .col-sm-7 {
  width: 100%;
}
.sa-survey-site-content .answer-container.col-sm-6 .checkbox-list.row {
  margin-left: 0;
}
.sa-survey-site-content #savetable .save-error > span ,
.sa-survey-site-content #loadtable .load-error > span {
  display: block;
  margin: 1em;
  padding: 1em;
  border: solid 1px #E10034;
}

.sa-survey-site-content h3.group-name {
  color: #E10034;
}

.sa-survey-site-content .question-title-container {
  background-color: inherit;
  color: #000;
  font-weight: bold;
}

.sa-survey-site-content .subquestion-list th.answertext,
.sa-survey-site-content .question-title-container {
  text-align: left;
}

.sa-survey-site-content .array-flexible-row .question-title-container {
  text-align: left;
}

.sa-survey-site-content .answer-container {
  border: none;
}

.sa-survey-site-content .question-help-container {
  border: none;
  padding: 0;
}

.no-more-tables tr th label {
  color: #000;
}

@media (max-width: 767px) {
  .sa-survey-site-content .question-title-container {
    text-align: left;
  }
}

.text-info,
.text-info:hover {
  color: #000;
}

.text-info span.fa-question-circle:before {
  display: none;
}

.sa-language-toggle-dropdown-wrapper {
  padding: 1em;
}

body.sa-personal-survey-type form#limesurvey div.sa-group-sa-survey,
body.sa-personal-survey-type form#limesurvey div.sa-group-sa-results,
body.sa-personal-survey-type form#limesurvey div.sa-group-sa-national {
  display: none;
}

.sa-navigation .col-xs-6.sa-move-previous.sa-single-move { width: 0%; }
.sa-navigation .col-xs-6.sa-move-next.sa-single-move { width: 100%; }

body.sa-personal-survey-type .sa-v-group-sa-national .sa-navigation .sa-percent-complete { display: none; }
body.sa-personal-survey-type .sa-navigation .sa-percent-complete .progress { background: #fff !important; }

body.sa-personal-survey-type .sa-personal-results div.panel-heading a h2 {
  color: #000 !important;
  font-weight: bold;
  font-size: 1.2em;
  min-height: 30px;
}

body.sa-personal-survey-type .sa-personal-results div.panel-heading a {
  display: block;
  background-color: transparent;
  background-position: 98% 50%;
  background-repeat: no-repeat;
  background-size: 30px;
  padding: 0;
  margin: 0;
}

body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-undefined { background-image: url('../files/sa_img/upArrow_undefined.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-red { background-image: url('../files/sa_img/upArrow_red.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-orange { background-image: url('../files/sa_img/upArrow_orange.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-yellow { background-image: url('../files/sa_img/upArrow_yellow.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-white { background-image: url('../files/sa_img/upArrow_white.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-green { background-image: url('../files/sa_img/upArrow_green.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.sa-arrow-blue { background-image: url('../files/sa_img/upArrow_blue.png'); }

body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-undefined { background-image: url('../files/sa_img/downArrow_undefined.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-red { background-image: url('../files/sa_img/downArrow_red.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-orange { background-image: url('../files/sa_img/downArrow_orange.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-yellow { background-image: url('../files/sa_img/downArrow_yellow.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-white { background-image: url('../files/sa_img/downArrow_white.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-green { background-image: url('../files/sa_img/downArrow_green.png'); }
body.sa-personal-survey-type .sa-personal-results div.panel-heading a.collapsed.sa-arrow-blue { background-image: url('../files/sa_img/downArrow_blue.png'); }

.sa-congratulations-wrapper h4 {
  color: #E10034;
}

.sa-add-national-wrapper,
.sa-congratulations-wrapper {
  text-align: center;
}

.sa-add-national-wrapper {
  margin: 2em 0 0 0;
  background: #FCE7EC;
}

.sa-add-national {
  border-radius: 1em;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  background: rgba(255, 255, 255, 0.85);
}

.sa-add-national-continue-button {
  background: #E10034;
  color: #ffffff;
}

.sa-add-national-consent {
  display: none;
}

body.sa-personal-survey-type .sa-results-spectrum-wrapper .sa-personal-results-table td {
  padding: 0.25em;
  border: solid 0.75em #000;
  display: table-cell;
  width: 1%;
}

body.sa-personal-survey-type .sa-results-spectrum-wrapper .sa-personal-results-table {
  font-size: 0.8em;
}

body.sa-personal-survey-type .sa-results-spectrum-wrapper .sa-personal-results-table .sa-score-title a {
  color: #000 !important;
  text-decoration: none;
}

body.sa-personal-survey-type .sa-results-graph-wrapper .sa-results-graph {
  padding: 1em;
  background: #000;
  margin: 0 auto;
  max-width: 600px;
}

body.sa-personal-survey-type .sa-results-graph-wrapper .sa-results-graph canvas {
  width: 100%;
  height: 100%;
}


@media (max-width: 767px) {
.sa-personal-results .sa-results-split-left p {
  display: none;
}
.sa-personal-results .panel-body {
  padding: 0;
}
}