/************************
********* FICHERO CSS PARA LOS ESTILOS PERSONALIZADOS DE LA PLANTILLA.
********* SI SE QUIERE SABER MÁS SOBRE LA PERSONALIZACIÓN DE RADIO BUTTON, CONSULTAD LA SIGUIENTE WEB:
********* https://www.antofernandez.com/personalizar-radio-buttons-css/
*************************/

/*Fuente de texto para el HTML*/
html{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*Color de fondo del cuerpo de la página*/
body{
    background-color: white;
}

/*Ponemos la imagen de la cabecera de la página, además de quitar el sombreado y el margen inferior de esta*/
#topsurveymenubar{
    background-image: url(/v250/upload/templates/plantilla_Segittur_Alojamientos/files/Fondo_cabecera.png);
    /*background-attachment: fixed;*/
    background-position: center;
    background-size: 100% 169.031px;
    background-repeat: no-repeat;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-bottom: 0;
}

/*Tamaño del logo de Madison*/
#logoCabecera{
    width: 190px;
}

/*Tamaño del logo de Segittur*/
#logoSegittur{
    width: 300px;
}

/*Disposición del span que contiene a los 2 logos*/
.navbar-brand{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/*Tamaño del elemento que contiene el span con los 2 logos*/
.navbar-header{
    width: 100% !important;
}

/*Ocultamos el elemento con los botones de la derecha de la barra de navegación*/
.navbar-right, .navbar-toggle{
    display: none;
}

/*Borde redondeado de las preguntas*/
.question-container, .question-title-container{
    border-radius: 15px 15px 15px 15px;
}

/*Color de fondo de las preguntas, además de los elementos de las preguntas de matriz doble*/
.question-container, .array1, .array2{
    background-color: #ebebeb !important;
}

/*Ensanchamiento superior e inferior, y tamaño de texto, de las preguntas*/
.question-container{
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1.1em;
}

/*Quitamos bordes a todos los elementos de las preguntas*/
.question-title-container, .answer-container, .question-wrapper, .question-help-container, .questionvalidcontainer{
   border-width: 0px 0px 0px 0px; 
}

/*Color de fondo del elemento donde se encuentra el texto de la pregunta*/
.question-title-container{
    background-color: #9d301b;
}

/*Color, ensanchamiento, posición del texto, tamaño y margen izquierdo del elemento donde se encuentra el texto de la pregunta*/
.question-title-container{
    color: white;
    padding: 1em 1em 1em 1em;
    text-align: justify;
    width: 98%;
    margin-left: 1%;
}

/*Color de fondo y ensanchamiento superior del elemento que contiene los mensajes de advertencia y/o de error en las preguntas*/
.questionvalidcontainer{
    background-color: #ebebeb !important;
    padding-top: 15px;
}

/*Ensanchamiento superior y color de fondo del elemento donde se hallan las respuestas de las preguntas*/
.answer-container {
    /*padding-top: 1em;*/
    padding-top: 0px;
    background-color: transparent;
}

/*Radio del borde, ensanchamiento, fuente de texto y borde de los botones de Siguiente, Anterior, Continuar Y Enviar*/
#movenextbtn, #moveprevbtn, #btncontinuar, #movesubmitbtn{
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 1.5em;
    border: 0;
}


/*Color de fondo del botón Anterior*/
#moveprevbtn{
    background-color: rgb(191, 191, 191);
}

/*Color de fondo del botón Siguiente', Continuar y Enviar*/
#movenextbtn, #btncontinuar,#movesubmitbtn{
    background-color: rgb(1, 55, 95);
}


/*Tamaño, disposición, color de fondo, margen izquierdo, borde, posición y posicionamiento superior de los span falsos creados para los inputs de tipo radio y checkbox*/
.radio-button-falso, .check-box-falso{
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: white;
    margin-left: -20px;
    border: 1px solid black;
    position: absolute;
    top: 1.5px;
}

/*Radio del borde de los span falsos creados para los inputs de tipo radio*/
.radio-button-falso{
    border-radius: 100%;
}

/*Visibilidad para los label de los inputs de tipo radio y checkbox, para así ocultar los inputs originales*/
.answers-list > .answer-item > label, .checkbox-list > div > .checkbox-item > label{
    visibility: hidden;
}

/*Elemento before creado en los span falsos para los inputs de tipo radio y checkbox, para así hacer que se 'marquen' cuando se pulsen*/
input[type=radio] + span:before, input[type=checkbox] + span:before{
    content: '';
    display: block;
	height: 10px;
	width: 10px;
	background: white;
	position: absolute;
	z-index: 1;
	top: 3px;
	left: 3px;
	background-color: #9d301b; 
	transform: scale(0);
	opacity: 0;
}

/*Elemento before creado en los span falsos para los inputs de tipo radio y checkbox, para así hacer que, cuando se 'marquen', aparezca con un borde redondeado*/
input[type=radio] + span:before{
	border-radius: 100%;
}

/*Elemento before creado en los span falsos para los inputs de tipo radio y checkbox, para así hacer que, cuando se marque el input asociado, aparezca la 'marca' del span*/
input[type=radio]:checked + span:before, input[type=checkbox]:checked + span:before{
    transform: scale(1);
	opacity: 1;
}

/*Estilos aplicados a los checkbox falsos cuando se deshabilitan tanto el input original como el chehbox falso*/
input[type=checkbox][disabled] + span[disabled]{
    cursor: not-allowed;
    background-color: #ADADAD;
}

/*Posicionamiento de los elementos que contienen inputs de tipo radio en preguntas de matriz y en los elementos que contienen inputs de tipo check*/
.answer-item.radio-item.text-center.radio, .form-group{
    position: relative;
}

/*Posición superior, posición izquierda, traslación y margen izquierdo de los radio button falsos que están en preguntas de matriz*/
.array1 .radio-button-falso, .array2 .radio-button-falso{
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
    margin-left: -9px;
}

/*Tamaño de texto y peso del texto para los textos en cursiva*/
em{
    font-size: 0.9em;
    font-weight: 100;
}

/*Color de fondo para los elementos secundarios de la pregunta P20. Esta clase se pone a partir de JS*/
.colorSecundarioP20{
    background-color: #D2D2D2 !important;
}

/*Color del mensaje de fin de encuesta*/
#mensajeFinEncuesta{
    color: white;
}

/*Estilos aplicados para cuando estamos en pantallas de menos de 802px*/
@media screen and (max-width: 801px){
    
    /*Quitamos el borde a las preguntas de matriz*/
    .no-more-tables tr{
        border: 0;
    }
    
    /*Ajustamos el tamaño y margen izquierdo de los elementos donde se hallan los textos de las preguntas*/
    .question-title-container{
        width: 94%;
        margin-left: 3%;
    }
    
    /*Posicionamiento superior de los span que actuan como radio buttons en preguntas de matriz*/
    .questions-list .radio-button-falso{
        top: 5.5px;
    }
    
    /*Margen izquierdo, posición izquierda y traslación de los radio button falsos que están en preguntas de matriz*/
    .array1 .radio-button-falso, .array2 .radio-button-falso{
        margin-left: -20px;
        left: initial;
        transform: initial;
    }
}

/*Estilos aplicados para cuando estamos en pantallas de menos de 689px*/
@media screen and (max-width: 688px){

    /*Imagen de la cabecera de la página*/
    #topsurveymenubar{
        background-size: 100% 260.547px;
    }
}

/*Estilos aplicados para cuando estamos en pantallas de menos de 641px*/
@media screen and (max-width: 640px){
    
    /*Distribución del div que contiene los botones de 'Anterior', 'Siguiente' y 'Continuar'*/
    #navigator-container{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        justify-items: center;
        align-items: center;
        gap: 10px;
    }
    
    /*Distribución de los elementos no importantes del div que contiene los botones de 'Anterior', 'Siguiente' y 'Continuar'*/
    #navigator-container::before, #navigator-container > .save-all{
        display: none;
    }
    
    /*Distribución, alineación de texto y tamaño de los botones de 'Anterior', 'Siguiente' y 'Continuar'*/
    #navigator-container > .text-left, #navigator-container > .text-right{
        display: block !important;
        text-align: center;
        width: 100%;
    }
}