@import url('https://fonts.googleapis.com/css?family=Rammetto One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@900&display=swap');

.navbar-color-acpp{
    background-color:#007ec6; /* color azul accp */
}
.navbar-color-acpp-azul
    {
    /*background-color:#434343; *//* color gris accp */
    background-color:white;
        
    }
.logo-container>img {
    max-height: 60px;
    padding: 0px;
    width: auto;
}

.space-col {
    margin-bottom: 0.6em;
}

.img-logotipo{
    width: 80%;
    text-align: center;
}

.img-logotipo-footer{
    max-width: 200px;
    display:block;
    margin:auto;
}

.img-logotipo-footer-escuelas{
    height: 70px;
    width: 180px;
}
.img-logotipo-footer-escuelas-goma{
        height: 65px;
        width: 170px;
    }
.container-logos-presentacion{
    text-align: center;
    margin-bottom: 60px;
}
.img-logos-presentacion{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}
.img-logos-presentacion > img{
    max-width:70%;
}

.ls-answers {
   
    margin-bottom: 0;
    padding: 3%;
}
.question-valid-container {
    position: relative;
    /*padding-left: 12% !important;*/
    padding-top: 2%;
}

.logo-container-acpp {
  float: right;

}
.grupo-titulo-acpp{
    margin-bottom: 0em;
    margin-top: 0em;  
}
.logo-size-acpp {
  width: 30%;
}

.logo-introveoveo{
    max-width:150px;
}

.title-color-acpp{
        margin-bottom: 40px;
    padding-top: 10px;
    padding-right: 40px;
    padding-left: 40px;
    /*background-color: #d5eef5;*/
    color: #0075bf;
    height: 100px;
    
}
.text-center{
    text-align: center;
}

.boton-central{
    width: 100%;
    text-align: center;
}
.estilo-boton-central{
    width: 100%;
    background-color: #2d9fe3;
    border-radius: 0px;
    border-color:#2d9fe3;
    padding-top:20px;
    padding-bottom:20px;
    margin-bottom:80px;
}


.bg-titulo-preguntas-acpp{
    position:fixed;

}
.dir-ltr .ls-questionhelp {
    margin-left: 0em;
}

.plantilla-acpp
{
  display: block;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  padding-right: 3%;
  padding-left: 3%;
}
.container-fluid-acpp
{
    padding-top:20px;
    padding-bottom:20px;
}
.progress-title-acpp
{
    font-size: 20px;
    text-align: center;
    color: white;
}

.img-center-acpp{
   display: block;
        text-align: center !important;
}

.texto-cabecera-menu
{
    display:block;
    text-align: center;
    color: #ffffff;
    padding-right: 100px;

}
.texto-respuestas
{
    display:block;
    text-align: center;
}
.surveys-list .btn-group {
    width: 100%;
  }
  
  .dir-ltr .ls-questionhelp {
    /* margin-left: 1.2em; */
    padding-bottom:25px;
}
.yesno-button,.gender-button {
    width: 100%;
  }
.img-acpp{
    max-width: 50%;
    display: inline-block;
    text-align: center;
} 
.inline-block {
   display: inline-block;
}
html body .navbar.navbar-default.navbar-fixed-top {
    z-index: 2000;

      box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.btn-primary {
    color: #fff;
    background-color: #2d9fe3;
    border-color: #2d9fe3;
}
@media only screen and (max-device-width: 760px) {

    body {
        overflow-x: hidden !important;
    }
}
.texto-cabecera-menu
{
    display:block;
    text-align: center;
    color: #ffffff;
    padding-right: 0px;
}
.plantilla-acpp
{
  width: 100%;
  display: block;
  font-family: "Jost";
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}
.progress-title-acpp
{
    font-family: "Arial";
    font-size: 20px;
    text-align: center;
    color: white;
}
.surveys-list .btn-group {
    width: 100%;
  }

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  /*color: white;*/
}

/* #main-col {
     margin-top: -2em;
 } */
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.group-outer-container {
    display: block;
}
.question-container.row {
    /*margin-right: 5%;*/
    /*margin-left: 5%;*/
    border-radius: 40px;
    padding: 1.5em;
}
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 50%;
}
.question-title-container {
    padding-top: 1em;
    padding-bottom: 1em;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    margin-left: 20px;
    margin-right: 20px;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}


@media (min-width: 761px){
.surveys-list .btn-group {
    width: 100%;
}

}
@media (max-width: 760px) {
  
    .sortable-list .ls-choice.sortable-item{
        
        border-radius: 10px !important;
        width: 100% !important; 
        text-align: center !important;
        margin: 0px !important; 
        padding: 0px !important;
        min-height: 50px !important;
        padding-top: 20px !important;
        
    }
    
    .list-samechoiceheight .sortable-list {
        padding-bottom: 0;
        border-radius: 0px;
        border-color: #f8c521;
        border-width: 0.5px;
        margin: 0px;
        padding-right: 0px;
    }
    .h4 {
        font-size: 22px !important;
    }
    .img-logotipo-footer{
        max-width: 100px;
        display:block;
        margin:auto;
    }
    
    .img-logotipo-footer-escuelas{
        height: 40px;
        width: 100px;
    }
    .img-logotipo-footer-escuelas-goma{
        height: 40px;
        width: 65px;
    }
    
}
@media (max-width: 990px) {

    .img-logos-presentacion{
        display: none;
    }

    .answers-list .bootstrap-buttons-div {
        left: unset;
    }

    .verdadero
    .falso,
    .aveces{
        padding-left:10px;
    }

    #ls-question-text-795521X19X125 > figure > img{
        max-height: 200px;
        margin-bottom: 50px;
    }
}

@media (min-width: 761px){
.language_change_container {
    height: 8vh;
}
}

/*VEO VEO*/
.title-veoveo-h2{
  font-family: 'Jost', sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 900;
  line-height: 1.58;
  letter-spacing: -.003em;
  font-size: 60px;
  padding-bottom: 20px;   
}
.title-veoveo-h3{
      font-family: 'Jost', sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  line-height: 1.58;
  letter-spacing: -.003em;
  font-size: 30px;
  font-variant: all-small-caps;
}

.navbar-default{
  background-color:white;
  border-color:white;
    
}

/* Selector de Idioma cabecera */
.navbar-default .navbar-nav > li > a {
    color: #393a3a;
    font-size: 16px;
    background-color: #e7e7e700;

}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #009fe2;
    background-color: white;
}


/* General Button Style */
.button-veoveo{
  position: relative;
	display:block;
	background: transparent;
	width:200px;
	height:60px;
	line-height:60px;
	text-align:center;
	font-size:15px;
	text-decoration:none;
	text-transform:uppercase;
	margin:40px auto;
}
.button:before, .button:after {
	width:200px;
  left: 0px;
	height:27px;
  z-index: -1;
}

.button-veoveo:before{
  position: absolute;
  content: '';
  border-bottom: none;
  -webkit-transform: perspective(15px) rotateX(5deg);
  -moz-transform: perspective(15px) rotateX(5deg);
  transform: perspective(15px) rotateX(5deg);  
}
.button-veoveo:after{
  position: absolute;
  top: 32px;
  content: '';
  border-top: none;
  -webkit-transform: perspective(15px) rotateX(-5deg);
  -moz-transform: perspective(15px) rotateX(-5deg);
  transform: perspective(15px) rotateX(-5deg);
}


body .top-container {
    background-color: #009fe2 !important;
}

.bg-cabecera-azul{
    width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: -10px;
 left: 50%;
 padding-top: 30px;
  
}

.bg-cabecera-cyan{
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: 100px;
    margin-top: -10px;
    left: 50%;
    padding-top: 30px;

}

.bg-lapiz {
    position: relative;
    margin-left: -75vw;
    height: 100px;
    left: 50%;
    padding-top: 30px;
}




@media (max-width: 800px) {
    .titulo-grupo-lapiz {
        position: absolute;
        text-align: center;
        margin: auto;
        display: block;
        left: 35%;
        color: white;
        font-weight: 700;
    }
}
@media (min-width: 800px) {
    .titulo-grupo-lapiz {
        position: absolute;
        text-align: center;
        margin: auto;
        display: block;
        left: 35%;
        color: white;
        font-weight: 700;
    }
}
.img-grupo-lapiz{
    width: 100%;
}


.btn-primary{
    border: 0px;

}
.surveys-list li {
    padding: 1em;
    padding-right: 4em;
    padding-left: 4em;
}
#surveys-list-container {
    margin-top: 10px;
}

.font-size-20{
    font-size:20px;
    text-align: center;
}

.font-size-20-justify{
    font-size:20px;
    text-align: justify;
}

.font-size-14{
    font-size:14px;
    text-align: center;

}

.btn-primary:hover {
    color: #fff;
    background-color: #f3cb0f;
    border-color: #204d74;
}


.text-question{

    text-align: justify;
    font-size: 1.5em;
    line-height: 2em;
}

/*********************************************************************
****            GRID QUESTIONS                                      **
****            DEV: Cesarldb                                       **
*********************************************************************/
/*TODO: ADJUST ON MOBILE VIEW*/
@media (min-width: 800px) {
    .navbar-logo-position-acpp {
        position: absolute;
        width: 200px;
        left: 0;
    }
}
@media (min-width: 800px) and (max-width: 1100px) {
    .navbar-logo-position-acpp {
        width: 100px;
        position: absolute;
        left: 0;

    }
}

@media (max-width: 800px) {
    .navbar-logo-position-acpp {
        display: none;
    }
    .grid-main {
        text-align: center;
    }
    .grid-access{
        text-align: center;
    }
}
@media (min-width: 800px) {
    .grid-container {
        display: grid;
        grid-template-columns: 0.25fr 10px 0.75fr;
        grid-template-rows: auto 20px auto 20px auto 20px auto;
    }

    .grid-element {
        /* padding: 20px; */
        font-size: 2em;
    }

    .grid-access {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 7;
    }

    .grid-main {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        text-align: center;
    }

    .grid-picture {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    .grid-footer {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 7;
        grid-row-end: 8;
    }
}

/*********************************************************************
****            RADIO BUTTONS                                       **
****            DEV: Cesarldb                                       **
*********************************************************************/

input[type="radio"]{
        display: none;
}
input[type="radio"] + label{
    position: relative;
    display: inline-block;
    padding-left: 1.5em;
    margin-right: 2em;
    cursor: pointer;
    line-height: 1.7em;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[type="radio"] + label:before,
input[type="radio"] + label:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    text-align: center;
    color: white;
    font-family: Times;
    border-radius: 50%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
} 
input[type="radio"] + label:before {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
}
input[type="radio"] + label:hover:before {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
}
input[type="radio"]:checked + label:before {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #009fe2;
}
.radio-item label::after {
    display: none;
    background-color: #009fe2;
}
.radio-item label::before{
    width: 1.7em !important;
    height: 1.7em !important;
}
.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility{

    padding: 20px;
    margin: 0px;
}

#javatbd795521X13X264F label::before,
#javatbd795521X13X264F label::after,
#javatbd795521X13X264M label::before,
#javatbd795521X13X264M label::after,
#javatbd795521X13X264O label::before,
#javatbd795521X13X264O label::after{
    display: none;
}

#question48 .col-wrap .col .question-title-container{
    padding-top: 0em !important;
    padding-bottom: 0em !important;
}

#question48 #grid {
    margin-top:-70px !important;    
    
}

#question126  #grid .col .answer-container .ls-answers{
    margin-top: -100px !important;
}

/*********************************************************************************
****  BARRA CABECERA DE GRUPOS--> class-->                                      **
****  TWIG  group_name.html.twig  navbar-lapices-{{ GroupName}}                 **
**    {% set url = "./files/grupo-" ~  aSurveyInfo.aGroups|first['description'] **
**    ~ ".png" %}                                                               **
**    {{ image(url, 'cabecera grupo', {"class": "img-grupo-lapiz"}) }}          **
****  DEV: Cesarldb                                                             **
*********************************************************************************/
.navbar-lapices{
    position: absolute !important;
    left: 53%;
    margin-left: -120px !important;
    display: block;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: 90%;
}
/*
Estos son los lapices del navbar, el color tras .navbar-lapices-
es el nombre del grupo
*/
.navbar-lapices-morado{
    position:relative;
    background-image: url("../files/lapiz-cabecera-morado.png");
}
.navbar-lapices-azul{
    position:relative;
    background-image: url("../files/lapiz-cabecera-azul.png");
}
.navbar-lapices-cyan{
    position:relative;
    background-image: url("../files/lapiz-cabecera-cyan.png");
}
.navbar-lapices-naranja{
    position:relative;
    background-image: url("../files/lapiz-cabecera-naranja.png");
}
.navbar-lapices-amarillo{
    position:relative;
    background-image: url("../files/lapiz-cabecera-amarillo.png");
}
.navbar-lapices-verde{
    position:relative;
    background-image: url("../files/lapiz-cabecera-verde.png");
}

/*Centrado título grupo verde*/
#group-2 .space-col .titulo-grupo-lapiz {
    left:38% !important;
}

/*Centrado título grupo cyan*/
#group-3 .space-col .titulo-grupo-lapiz {
    left:39% !important;
}

/*Centrado título grupo naranja*/
#group-4 .space-col .titulo-grupo-lapiz {
    left:39% !important;
}

/*Centrado título grupo amarillo*/
#group-5 .space-col .titulo-grupo-lapiz {
    left:42% !important;
}


/*Centrado título grupo verde*/
#group-6 .space-col .titulo-grupo-lapiz {
    left:40% !important;
}

.navbar-brand{
    font-family: 'Jost';
    font-weight: 800;
    color: black !important;
}

.question-container-morado{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #864a8f4a;
    border-radius: 50px;
    margin: 10px;
}
.question-container-azul{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #d9edf7;
    border-radius: 50px;
    margin: 10px;
}
/*GRUPO 3*/
.question-container-cyan{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #88b1b9;
    border-radius: 50px;
    margin: 10px;
}

/*GRUPO 4*/
.question-container-naranja{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #db8432;
    border-radius: 50px;
    margin: 10px;
}

/*GRUPO 5*/
.question-container-amarillo{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #fdfb79;
    border-radius: 50px;
    margin: 10px;
}

/*GRUPO 6*/
.question-container-verde{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #90dd94;
    border-radius: 50px;
    margin: 10px;
}

/*GRUPO 6*/
.question-container-fin{
    margin-bottom: 1em;
    border: 0px solid #e7e7e7;
    background-color: #FFFFFF;
    margin-top: 0em;
    border: 5px solid #007ec6;
    border-radius: 50px;
    margin: 10px;
}


@media (max-width: 800px) {
.titulo-grupo-lapiz {
    position: absolute;
    text-align: center;
    margin: auto;
    display: block;
    color: white;
    font-weight: 700;
}
    .titulo-grupo-lapiz > h2 {

        color: white;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 0;
        margin-top: 5px;
        margin-left: -15px;
    }
    .dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility{
        padding:2px;
    }
}
/*********************************************************************
****            TABLA MATRICES VERDADERO/FALSO                      **
****            DEV: Cesarldb                                       **
*********************************************************************/

.verdadero{
    background-color: #f4fff4;
}
.falso{
    background-color: #fff4f4;
}
.aveces{
    background-color: #f9f9f9;
}
@media (min-width: 800px) {


}
/*********************************************************************
****            ESTILOS TEXTO TITULO Y PREGUNTAS                    **
****            DEV: Cesarldb                                       **
*********************************************************************/
.texto-intro{
    margin-top:20px;
    margin-bottom: 20px;
    font-family: 'Jost';
    color: hsl(0deg 0% 37%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: justify;
}
.titulo-intro{
    font-family: 'Jost';
    font-size: 1.7em;
    font-weight: 500;
    color: #646464;
    text-align: center;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.texto-preguntas{
    margin-top:10px;
    margin-bottom: 10px;
    font-family: 'Jost';
    color: hsl(0deg 0% 37%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: justify;
}
.titulo-preguntas{
    font-family: 'Jost';
    font-size: 1.7em;
    font-weight: 500;
    color: #646464;
    text-align: center;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.texto-reflexion{
    margin-top:10px;
    margin-bottom: 10px;
    font-family: 'Jost';
    color: hsl(0deg 0% 37%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
}

/*********************************************************************
****            ESTILOS IMÁGENES                                    **
****            DEV: Cesarldb                                       **
*********************************************************************/
@media (min-width: 800px) {
    
    .img-200 {
        width: 200px;
        margin: auto !important;
        display: block;
        padding: 10px;
        margin: 20px;
    }

    .img-300 {
        width: 300px;
        margin: auto !important;
        display: block;
        padding: 10px;
        margin: 20px;
    }
    .img-height-300 {
        height: 300px;
        margin: auto !important;
        display: block;
        padding: 10px;
        margin: 20px;
    }

    .img-450 {
        width: 300px;
        margin: auto;
        display: block;
    }

    .img-600 {
        width: 600px;
        margin: auto;
        display: block;
    }
}

@media (max-width: 800px) {
    .img-300 {
        max-width: 100%;
    }

    .img-450 {
        max-width: 100%;
    }

    .img-600 {
        max-width: 100%;
    }
     .img-200 {
        max-width: 100%;
    }
}



/*********************************************************************
****            POPUPS PERSONALIZADOS                               **
****            DEV: Cesarldb                                       **
*********************************************************************/
  .popup {
       display:none;
  }
  .swal2-title{
    margin-top:10px;
    margin-bottom: 10px;
    font-family: 'Jost' !important;
    color: hsl(0deg 0% 37%) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1.3em !important;
  }
  .swal2-confirm{
    background-color: #56AEFF !important;
    font-family: 'Jost' !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: 700 !important;
  }
  .swal2-confirm:hover{
    background-color: #f8c521 !important;
    font-family: 'Jost' !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: 700 !important;
  }
  .swal2-info{
    width: 100px !important;
    height: 100px !important;
  }

  .swal2-icon-content{
    font-size: 6.75em !important;
  }
  .swal2-popup{
      min-width: 50% !important
  }


/*********************************************************************
****            REPRODUCTOR DE AUDIO                                **
****            DEV: Cesarldb                                       **
*********************************************************************/
  
  audio::-webkit-media-controls-panel {
    background-color: #56AEFF;
  }
  /* audio::-webkit-media-controls-play-button {
    background-color: #f8c521;
    border-radius: 50%;
  } */
  audio::-webkit-media-controls-current-time-display {
    color: #fff;
  }
  audio::-webkit-media-controls-time-remaining-display {
    color: #fff;
  }
  audio::-webkit-media-controls-timeline {
    background-color: #f8c521;
    border-radius: 25px;
    margin-left: 10px;
    margin-right: 10px;
  }
  audio::-webkit-media-controls-play-button{
      background-color: #fff;
      border-radius: 50%;

  }
  audio::-webkit-media-controls-mute-button{
    background-color: #fff;
    border-radius: 25px;
    margin-left: 10px;
    margin-right: 10px;
}

.answers-list .bootstrap-buttons-div {
    left:33%;
}

/*Ajustes finales pòr id*/
  @media (min-width: 800px) {
#sortable-rank-71 > li,
#sortable-choice-71 > li {
    font-size:1.5em;
    min-height: 100% !important;
    max-height: unset !important;
}

#sortable-rank-126 > li,
#sortable-choice-126 > li {
    font-size:1.5em;
    min-height: 100% !important;
    max-height: unset !important;
}
}
#javatbd795521X11X40AO01 > label:before,
#javatbd795521X11X40AO02 > label:before,
#javatbd795521X11X40AO02 > label:after,
#javatbd795521X11X40AO01 > label:after{
    display:none;
}