@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i|Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
/*@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");*/

body {
    font-family: 'Montserrat', sans-serif;
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/backgroundbodytrans.png);
    background-color: #048ec3;
}

#nombre-fantasia {
    display:none;    
}

.nombre-fantasia {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0px;
    margin-left: -15px;    
}

#register_email {
    min-width: 280px;
}

#email-invalido {
    color: #e74c3c;
    padding-left: 13px;
    font-weight: 500;
}

.select-anios select {
    width: 190px;
}

#preloader { 
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #333 url('/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/loading.gif') no-repeat center center; 
}

.content-modal-nuevo {
    text-align: center;
}

h1.titulo1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
}

/*** Consentimiento ***/
.consentimiento .questiontext {
    text-align: justify;
    color: #000;
    font-weight:400;
}

.consentimiento .pregunta {
    padding-bottom: 90px;
}

.consentimiento .answer-container {
    text-align: center;    
}

.consentimiento .radio-list label:nth-child(2) {
    background-color: #2ac23f !important;
    height: 52px;
    border-radius: 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.2) !important;
    border: 0px solid;
}

.consentimiento .radio-list label:first-child {
    background-color: #d2d2d2 !important;
    height: 52px;
    border-radius: 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.2) !important;
    border: 0px solid;
}

#navigator-container {
    display: none;
}

/*** FIN Consentimiento ***/

.no-mover-atras #moveprevbtn {
    display: none !important;
}


/* MODALES ALERTIFY -----------------------------------------*/

.alertify .ajs-dialog {
    border-radius: 18px !important;
}

.alertify .ajs-header {
    background-color: #f1f1f1 !important;
    border-radius: 15px 18px 0px 0px !important;
    font-family: "Montserrat", sans-serif;
    font-size: 18px !important;
    color: #2AB5C2 !important;
}

.alertify .ajs-footer {
    padding: 8px !important;
    border-radius: 0px 0px 15px 15px !important;
}

.alertify button.ajs-button.ajs-ok {
    background-color: #c1c1c1 !important;
    color: #FFF;
    height: 44px;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.2) !important;
    border: 0px solid;
    padding: 10px 20px 15px 20px;
}

.alertify button.ajs-button.ajs-cancel {
    background-color: #c1c1c1 !important;
    color: #ffffff;
    height: 44px;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.2) !important;
    border: 0px solid;
    padding: 10px 20px 15px 20px;
}

.alertify button.ajs-button:hover {
    background-color: #ECB80A !important;
}

.ajs-message {
    border-radius: 8px !important;
    color: #FFF !important;
}


/* MODALES BOOTSTRAP ---------------------------*/


/*Modqal Instruccions*/
.instrucciones .modal-body {
    /*height: 69%;*/
}

.instrucciones .modal-content {
    height: 100%;
}

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
}

.fade2.in {
    opacity: 1;
    transform: scale(1);
}

.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
}

.fade-scale.in {
  opacity: 1;
  transform: scale(1);
}

.groupdescription img {
    width: 100%;
    height: 100%;
    max-width: 880px;
    border: 2px solid;
    border-color: rgba(208, 212, 214, 0.48);
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
}

.list-dropdown .questionhelp.text-danger.tip-was-hidden {
    display: none;
}

.em_default.emtip.good {
    /*display:none;*/
}

input.numeric {
    text-align: center;
}

.em_other_comment_mandatory.emtip.good {
}

.em_value_range.emtip.good {
    /*display:none;*/
}

.em_value_integer.emtip.good {
}

.disclaimer p {
    margin: 0 !important;
}

.questionvalidcontainer p:nth-child(2) {
    display: none;
}

.group-name {
    display: none;
}

.question-text .asterisk {
    display: none !important;
}

.bienvenida #outerframeContainer, .completado #outerframeContainer {
    margin-top: 30px !important;
    /*max-height: 400px;*/
}


/*.completado #salir {
    display: none;
}*/

#pre-progress {
    float: left;
    font-size: 11px;
    color: #444444;
    margin-left: calc(50% - 400px);
    position: absolute;
    display: none;
}



.progress .progress-bar {  
    border: 0px solid #007B44;
    background: #F6BC09;
    color: #fff;
    border-radius: 10px;
    box-shadow: inset 0px -4px 3px 0px rgba(204,128,0,0.1), 0px 0px 0px 1px rgba(0,50,40,0.0);
    padding: 5px;
    font-size: 11px;
    font-weight: 500;
    line-height: 11px;
}

/* custom tooltip*/
.tooltip-radio {
    display:none;
    position:absolute;
    border: 0px solid #10854C;
	background-color: #179A30;
    border-radius:3px;
    padding: 4px 10px;
    color: #FFF;
    max-width: 15em;
    z-index: 9999;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}

/* COLOR CUESTIONARIO */

/* Cuestionario 1*/
body.survey-1 {
    background-color: #048ec3 !important;
}

.survey-1 .nombre-fantasia, .survey-1 .groupdescription .head-group, .survey-1 .question-text, .survey-1 #moveprevbtn {
    color: #048ec3 !important;
}

.survey-1 #movenextbtn:hover {
    background-color: #048ec3;
}

.survey-1 .tooltip-radio {
    background-color: #048ec3;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

/*Fin Cuestionario 1*/

/* Cuestionario 2*/
body.survey-2 {
    /*background-color: #dfab0d !important;*/
    background-color: #60af01 !important;
}

.survey-2 .nombre-fantasia, .survey-2 .groupdescription .head-group, .survey-2 .question-text, .survey-2 #moveprevbtn {
    color: #60af01 !important;
}

.survey-2 #movenextbtn {
    /*background-color: #dfab0d;*/
    background-color: #60af01 !important;
}

.survey-2 .tooltip-radio {
    /*background-color: #dfab0d;*/
    background-color: #60af01 !important;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}


/*Fin Cuestionario 2*/

/* Cuestionario 3*/
body.survey-3 {
    background-color: #df673f !important;
}

.survey-3 .nombre-fantasia, .survey-3 .groupdescription .head-group, .survey-3 .question-text, .survey-3 #moveprevbtn {
    color: #df673f !important;
}

.survey-3 #movenextbtn {
    background-color: #df673f;
}

.survey-3 .tooltip-radio {
    background-color: #df673f;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

/*Fin Cuestionario 3*/


.logo-site {
    padding:10px;
    float: left;
}

.caja-flotante {
    margin-top: -5px;
    height: 40px;
    left: 0;
    top: 0px !important;
    position: fixed !important;
    top: 40px;
    width: 100%;
    z-index: 999;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.58);
}
#footer ul#credits {
    width: 100%;
    list-style: none outside;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
}
.caja-flotante #progress {
    height: 10px;
}
/*pintar casilla del boton radio de la herramienta*/

td.answer-item.text-center:hover
{
    transition: all 0.2s ease;
}

td.answer-item.text-center:hover
{
    cursor: pointer;
    background-color: #ffe58c !important;
}

td.answer-item.text-center:hover.radio label::before {
    border: 1px solid rgb(187, 119, 0);
}

th.answertext:hover {
    /*background-color: blue;*/
}

.caja-flotante #progress {
    float:inherit;
}



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

.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: 8px;
    border-bottom: none;
    position: inherit;
    z-index: 1;
}

.progress {
    height: 20px;
    margin-bottom: 0px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    padding: 0px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.0);
    background-color: rgba(0,0,0,0.1) !important;
}

#surveynametitle {
    font-size: 4em;
}

.survey-welcome {
    text-align: justify;
}

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

.group-name {

}

#surveydescription, .group-name {
    color: #048ec3;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 24px;
    margin-top: 0px;
    margin-left: -15px;
}

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

 #navigator-container {
    margin-top: 15px;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 20px;
    margin-left: -40px;
    margin-right: -40px;
 }
 #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%;*/
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/**
 * 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;
    width: 50%;
}

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

.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.
    */
    
    th.answertext {        
        line-height: 23px !important;
    }
    
    .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: 20px;
}

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

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

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

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


/** Header **/

.question-title-container {
    color: black;
    font-weight: 500;
    padding: 15px 20px 10px 20px;
    background-color: transparent !important;
}

.questionvalidcontainer {
    position: relative;
    text-align: center;
    padding-bottom: 1em;
}

.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;*/
    margin-top: 15px !important;
    max-width: 1280px;
    background-color: #EAEDEF;
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    padding-left: 50px;
    padding-right: 50px;
}

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

.label-danger {
    white-space: normal;
    background-color: transparent;
    color: #e75041;
    font-weight: 400;
    font-size: 100% !important;
}

p.return-to-survey{
    clear:left;
}

.navbar {
    background-color: #FFF;
}

.navbar-default .navbar-brand {
    color: #6b6b6b;
}

.navbar-default .navbar-nav > li > a {
    color: #5c5c5c;
}

a#salir {
    display: inline-block;
    background-color: #f9f9f9;
    border-radius: 20px;
    padding-right: 20px;
    cursor: pointer;
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/icon-salir1.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 50px;
    font-size: 13px;
    margin-top: 18px;
    transition: all 0.2s ease;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

a#salir:hover {
    background-color: #e6e6e6;
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/icon-salir2.png);
    text-decoration: none;
}

a#clearallbtnlink:hover {
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/icon-salir2.png);
    background-color: #ecf0f1;
}


button#movenextbtn {
    border: 0px solid;
    background-color: #0fa8e2;
    text-transform: uppercase;
    font-size: 15px;
    padding: 18px 65px 18px 35px;
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/flecha-siguiente.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.1) !important;
    border-radius: 12px;
    transition: all 0.2s ease;
}

button#movenextbtn:hover {
    background-color: #f6bc09 !important;
    transform: translate(0px, -3px);
}

th.answertext {
    /*font-size: 1em;
    font-weight: 600;*/
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    padding: 8px !important;
}

.question-container {
    background-color: #FFF !important;
    border-radius: 20px;
}

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

.answer-container {
    border: 0px solid;
}

.question-title-container, .questionvalidcontainer {
    background-color: transparent;
}

table.question tr {
    transition: all 0.2s ease;
}

table.question tr:hover {
    background-color: rgba(255, 199, 0, 0.58);
}

table.question td.answer-item.text-center {
    transition: all 0.2s ease;
    vertical-align: middle;
}

.groupdescription span.text p {
    font-size: 13px;
}

.groupdescription {
    background-color: #FFF;
    border-radius: 20px;
    padding: 12px 20px 12px;
    margin-top: 10px;
    margin-bottom: 24px !important;
    transition: all 0.2s ease;
}

.groupdescription:hover {
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px rgb(246, 188, 9);
}

.groupdescription span.text {
    margin-top: 20px;
}

/*.head-group {
    color: #e49306 !important;
    cursor: pointer;
}*/

.head-group i {
    margin-right: 10px;
}

.radio label::before {
    width: 20px;
    height: 20px;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 14px;
    height: 14px;
}



footer{
    /*position: fixed;*/
    margin-top: 5% !important;
    bottom: 0%;
    background-color: #fff;
    border: none;
    padding: 0px !important;
    margin: 0px;
    background: #FFF;
    font-size: .8em;
    font-size: .9em;
    height: auto;
    width: 100%;
    min-height: 200px;


}

#logocontainer .logo {
	display: inline;
	height: auto;
	margin: 10px;
	display: inline-block;
	padding: 15px;
	background-color: #fff;
}

#texto-footer {
	background: #F2F2F2;
	color: #999;
	font-size: .85em;
	line-height: 100%;
	padding: 2em 0;
}



div#footer {
    background: #FFF;
    margin-top: 50px;
    padding: 30px 10px;
}

button#moveprevbtn {
    border: 0px solid;
    background-color: #ffffff !important;
    color: #565656 !important;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    padding: 18px 35px 18px 65px;
    background-image: url(/encuesta/upload/templates/Piloto-Cuanti_PVU-II/files/flecha-atras.png);
    background-repeat: no-repeat;
    background-position: left 30px center;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.05), 0px 3px 5px rgba(0,0,0,0.06) !important;
    border-radius: 12px;
    transition: all 0.2s ease;
}

button#moveprevbtn:hover {
    background-color: #f6bc09 !important;
    color: #FFF !important;
    transform: translate(0px, -3px);
}

#navigator-container hr {
    display: none;
}

#welcome-container h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.navbar-fixed-top, .navbar-fixed-bottom {
    position: inherit;
    margin-bottom: 0px;
}

li.answer-item.radio-item.radio {
    margin-bottom: 5px;
}

button#movesubmitbtn {
    border: 0px solid;
    background-color: #0fa8e2;
    text-transform: uppercase;
    font-size: 15px;
    padding: 18px 55px 18px 55px;
    background-repeat: no-repeat;
    background-position: right 30px center;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.1) !important;
    border-radius: 12px;
    transition: all 0.2s ease;
}


button#movesubmitbtn:hover {
    background-color: #f6bc09 !important;
    color: #FFF !important;
    transform: translate(0px, -3px);
}

thead tr:hover {
    background-color: #FFF !important;
}

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 0;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

.disclaimer {
    background-color: #eaedef;
    padding: 20px;
    font-size: 12px;
}

.qnumcode.question-text {
    margin-top: 15px;
    margin-bottom: 5px;
}


.survey-1 .qnumcode.question-text, .survey-2 .qnumcode.question-text, .survey-3 .qnumcode.question-text {
    font-weight: 600;
    font-size: 16px;
}


.container.encabezado {
    padding: 0px;
}

.btn-salir {
    float: right;
    margin-right: 15px !important;
}

.progress::before {
    content: 'Has respondido un';
    display: block;
    position: absolute;
    margin-left: -108px;
    margin-top: 3px;
    font-size: 11px;
    color: #464646;
    /*z-index: 90000000099999999999;*/
}

.modal-content {
    border: 0px solid;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #e5e5e5;
    border-radius: 15px 15px 0px 0px;
    padding: 15px 25px !important;
}

.modal-header h4 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600;
    font-size: 16px;
    color: #048ec3;
}

.modal-footer button.btn.btn-primary {
    border: 0px solid;
    background-color: #0fa8e2;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 30px;
    background-repeat: no-repeat;
    background-position: right 30px center;
    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.1) !important;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.modal-footer button.btn.btn-primary:hover {
    background-color: #F6BC09;
}

.modal-header .close {
    margin-top: 4px;
    font-size: 30px;
}

.consentimiento {
    padding-bottom: 60px;
}

.consentimiento .btn-group-justified {
    position: absolute;
    margin-left: calc(50% - 30px);
}

#instrucciones-box-modal h3 {
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #048ec6;
}

#instrucciones-box-modal .modal-footer {
    text-align: center;
    border: 0px solid;
    background-color: #f5f5f5;
    border-radius: 0px 0px 20px 20px;
}

#instrucciones-box-modal .modal-header {
    display: none;
}

.modal-backdrop.in {
    opacity: 0.3;
}

#instrucciones-box-modal .modal-content {
    border: 0px solid;
    border-radius: 15px;
    box-shadow: 8px 8px 0px rgba(255, 188, 0, 0.8);
}
._hr-recuperar {
  margin-top: 20px;
    background-color: rgba(0,0,0,.03);
    height: 1px;

}
._hr-invisible {
  margin-top: 20px;
    background-color: transparent;
    height: 1px;
    border-color: transparent;
}
#recuperar {
    background: url(../img/recuperar_bg.png) center top no-repeat fixed;
    background-size: cover;
    padding: 60px 0 40px 0;
    position: relative;
}