@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900&display=swap');

html {
  min-height: 100%;
  position: relative;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif !important;
}

p {
  font-weight: 600 !important;
  color: #262626;
}

.navbar {
  /*background: -webkit-gradient(linear, 0 0,  0 100%, from(rgb(0, 123, 255)), to(rgba(204, 229, 255, 0.555)));*/
  background: rgba(204, 229, 255, 0.555);
  width: 100%;
  height: 10vh;
}

.navbar-brand {
  margin-left: 4em;
}

.titulo {
  font-size: 40px;
  font-weight: 900;
  text-align: right;
  color: #FFFFFF;
  background-color: #DC0054;
  padding: 10px 30px 0 0;
  border-radius: 30px 30px 0 0;
  margin-bottom: 0;
}

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

.borde-principal {
  border-radius: 0 0 15px 15px;
}

.encuesta {
  width: 100%;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 5%;
  height: auto;
  border: solid 2px rgb(0, 128, 121);
  border-radius: 10px;
}

/* Estilos para la pestaña bienvenida y despedida */
.marco-bienvenida,
.marco-despedida {
  border: 2px solid rgb(3, 55, 109);
}

.div-iconos-bienvenida,
.div-iconos-despedida {
  letter-spacing: 10px;
}

.texto-bienevenida,
.texto-despedida {
  letter-spacing: 2px;
}

#boton-siguiente:hover,
#btnEnviarEncuesta:hover {
  background: #00c29c;
  color: white;
}

#boton-siguiente,
#btnEnviarEncuesta {
  background: #009D7E;
  color: white;
  font-weight: 700;
}

.div-btn-enviar-encuesta {
  margin-right: 10%;
}

.div-btn-siguiente-encuesta {
  margin-right: 3%;
}

#seccion-preguntas {
  border: 2px solid rgb(3, 55, 109);
}

.btn-sig-bienvenida {
  display: flex;
  justify-content: end;
  align-items: end;
  position: relative;
  top: 1rem;
}

/* Estilos pregunta estrella */
label {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}

label.reset {
  font-size: 10px;
  border: 1px solid #000;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 2px 3px;
}

label.star {
  width: 30px;
  height: 27px;
}

.divLevel1 p, .divLevel2 p {
  /* font-size: 17px; */
  color: #005398;
}

.txt-question {
  word-wrap: break-word;
  white-space: normal;
}

/* ocultamos los radiobuttons */
input[class=rating] {
  display: none;
}

input[type=radio]+label.star svg path {
  fill: #ff9d00
}

/* estrellas a la derecha del radiobutton checked van blanco */
input[type=radio]:checked~label.star svg path {
  fill: #4a4a4a;
}

.star {
  margin-left: 2%;
}

.hrEstrella3 {
  left: 36%;
  width: 60%;
}

.hrEstrella2 {
  left: 22%;
  width: 75%;
}

#hrEstrella {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
}

.hrDespedida {
  width: 80%;
  position: relative;
  left: 10%;
  margin-top: 3%;
  margin-bottom: 3%;
}

.hrDespedida hr {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  width: 100%;
}

/* COLOR DE LOS CONTENEDORES DE LAS PREGUNTAS */
.divLevel1,
.divLevel2,
.divLevel3 {
  border: 2px solid rgb(3, 55, 109);
}

.divLevel4 {
  text-align: end;
  width: 75%;
  display: flex;
}

.select-question {
  border: 2px solid rgb(3, 55, 109);
}

/* Estilos para preguntas de observaciones */

#myTextArea {
  margin: 0;
  border: 2px solid rgb(3, 55, 109);
  background-color: transparent;
  color: black;
  caret-color: #555555;
  resize: none;
}

footer {
  width: 100%;
  height: auto;
  bottom: 0;
  position: relative;
  background-color: #F1F9FF;
  margin-top: auto;
  padding-top: 10px;
  color: #005398;
  /*background: -webkit-gradient(linear, 0 0,  0 100%, from(rgb(0, 123, 255)), to(rgba(204, 229, 255, 0.555)));*/
}

/* Medias queries para hacerlo responsivo */
@media ((min-width: 800px)) {
  .divLevel2 {
    display: flex;
    background: #dcfbff;
    width: 75%;
    height: 100%;
    position: relative;
    left: 22%;
  }

  .divLevel3 {
    display: flex;
    background: #effdff;
    width: 60%;
    height: 100%;
    position: relative;
    left: 37%;
  }

  .principal {
    width: 80%;
    height: auto;
  }

  .divLevel1 {
    display: flex;
    background: #d3f4f9;
    height: auto;
  }

  .txt-question {
    height: 100%;
    width: 65%;
    display: flex;
    justify-content: center;
  }

  .div-estrellas {
    width: 35%;
    height: auto;
  }

  .div-stars {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    margin-top: 3%;
  }

  .div-stars svg {
    width: 100%;
    height: 100%;
  }

  .pregunta {
    font-size: small;
    text-align: justify;
    width: 95%;
    height: 100%;
    padding-top: 2%;
  }

  .calificacion {
    width: 100%;
    height: auto;
    margin-top: 2%;
    text-align: center;
    font-size: xx-small;
  }

  .pregunta-abierta {
    font-size: small;
    text-align: justify;
    width: 95%;
    height: 100%;
    padding-top: 2%;
  }

  .div-footer {
    display: flex;
    justify-content: center;
  }

  .texto-bienvenida {
    font-size: large;
  }

  .texto-despedida {
    font-size: large;
  }

  .div-textArea {
    width: 35%;
    height: auto;
  }

  .div-textArea textarea {
    width: 95%;
    height: 45px;
    font-size: x-small;
    margin-top: 2%;
    margin-left: 2%;
  }

  .div-select {
    width: 35%;
    height: 100%;
  }

  .div-select select {
    width: 95%;
    height: 100%;
    font-size: small;
    margin-top: 4%;
  }

  #comentarios-finales {
    width: 100%;
    height: auto;

  }

  #comentarios-finales p {
    margin-left: 70%;
  }

  #comentarios-finales textarea {
    height: 100%;
    width: 100%;
  }

  /* Pestaña de seleccionar datos */
  #div-seleccion-persona {
    display: block;
    width: 50%;
    position: relative;
    left: 25%;
  }

  .form-seleccion label {
    font-size: medium;
    margin-left: 12%;
  }

  #div-header-seleccion-persona {
    background: rgb(0, 79, 104);
    color: white;
  }

  #seleccionarEmpresa,
  #seleccionarNombre {
    border: 2px solid rgb(3, 55, 109);
    position: relative;
    left: 8%;
  }

  .div-btn-siguiente-datos-seleccionados {
    display: flex;
    justify-content: end;
    align-items: end;
  }

  #btnDatosSeleccionados {
    background: rgb(0, 79, 104);
    color: white;
  }

}

@media ((max-width: 575px) and (min-width: 0px)) {
  .principal h3 {
    font-size: large;
  }

  footer {
    font-size: small;
  }

  footer img {
    width: 100%;
  }

  p {
    font-size: small;
  }

  .texto-bienvenida {
    font-size: medium;
  }

  .texto-despedida {
    font-size: medium;
  }

  .titulo {
    font-size: medium;
    font-weight: 900;
  }

  .divLevel2 {
    background: #dcfbff;
    width: 75%;
    height: 100%;
    position: relative;
    left: 15%;
  }

  .divLevel3 {
    background: #effdff;
    width: 60%;
    height: 100%;
    position: relative;
    left: 30%;
  }

  .principal {
    width: 90%;
    height: auto;
  }

  .divLevel1 {
    height: 100%;
    background: #d3f4f9;
  }

  .div-estrellas {
    height: 100%;
  }

  .txt-question {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .div-stars {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .div-stars svg {
    width: 100%;
    height: 100%;
  }

  .pregunta {
    font-size: xx-small;
    margin-top: 3%;
    text-align: center;
    width: 95%;
  }

  .calificacion {
    text-align: center;
    font-size: xx-small;
  }

  .div-textArea {
    height: 100%;
    padding-left: 2%;
    padding-bottom: 2%;
    padding-right: 2%;
  }

  .div-textArea textarea {
    height: 40px;
  }

  .pregunta-abierta {
    font-size: xx-small;
    margin-top: 3%;
    width: 90%;
    text-align: center;
  }

  textarea::placeholder {
    font-size: xx-small;
  }

  .div-footer {
    display: block;
  }

  .div-slogan img {
    margin-left: 2%;
  }

  .texto-bienevenida {
    font-size: x-small;
  }

  .div-select {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
  }

  .div-select select {
    width: 90%;
    height: 25px;
    font-size: x-small;
  }

  .divLevel4 {
    display: block;
    width: auto;
    height: 100%;
  }

  #comentarios-finales {
    width: 100%;
    height: 100%;
  }

  #comentarios-finales textarea {
    font-size: x-small;
    width: 90%;
    margin-left: 5%;
  }

  /* Pestaña de seleccionar datos */
  #div-seleccion-persona {
    display: block;
    width: 100%;
  }

  #div-header-seleccion-persona {
    background: rgb(0, 79, 104);
    color: white;
  }

  #seleccionarEmpresa,
  #seleccionarNombre {
    border: 2px solid rgb(3, 55, 109);
    position: relative;
    left: 3%;
  }

  .form-seleccion label {
    font-size: small;
    margin-left: 12%;
  }

  .div-btn-siguiente-datos-seleccionados {
    display: flex;
    justify-content: end;
    align-items: end;
  }

  #btnDatosSeleccionados {
    background: rgb(0, 79, 104);
    color: white;
  }
}

@media ((max-width: 800px) and (min-width: 575px)) {
  .principal {
    width: 90%;
    height: auto;
  }

  .titulo {
    font-size: x-large;
    font-weight: 900;
  }

  .divLevel1 {
    display: flex;
    background: #d3f4f9;
  }

  .divLevel2 {
    display: flex;
    background: #dcfbff;
    width: 80%;
    position: relative;
    left: 15%;
  }

  .divLevel3 {
    display: flex;
    background: #effdff;
    width: 70%;
    position: relative;
    left: 23%;
  }

  .txt-question {
    width: 60%;
    display: flex;
  }

  .div-estrellas {
    width: 40%;
    height: auto;
  }

  .div-stars {
    height: auto;
    width: 100%;
    display: flex;
    margin-top: 3%;
    justify-content: space-evenly;
  }

  .pregunta {
    font-size: x-small;
    text-align: justify;
    margin: 5%;
    width: 95%;
    white-space: normal;
    word-wrap: break-word;
  }

  .div-stars svg {
    width: 100%;
    height: 100%;
  }

  .calificacion {
    text-align: center;
    width: 100%;
    height: auto;
    margin-top: 2%;
    font-size: xx-small;
    color: #4a4a4a;
  }

  .pregunta-abierta {
    font-size: x-small;
    margin: 5%;
    width: 95%;
    text-align: justify;
    white-space: normal;
    word-wrap: break-word;
  }

  .div-textArea {
    height: auto;
    width: 40%;
  }

  .div-textArea textarea {
    height: 40px;
    width: 95%;
    margin-top: 5%;
    font-size: xx-small;
  }

  .div-select {
    width: 40%;
    height: auto;
  }

  #comentarios-finales {
    height: auto;
    width: 100%;
  }

  #comentarios-finales textarea {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 1vh;
  }

  #comentarios-finales p {
    text-align: end;
  }

  .div-select select {
    font-size: xx-small;
    width: 95%;
    height: 26px;
    margin-top: 8%;
  }

  .div-footer {
    display: block;
  }

  .div-slogan img {
    margin-left: 25%;
  }

  textarea {
    font-size: xx-small;
  }

  .texto-bienvenida {
    font-size: large;
  }

  .texto-despedida {
    font-size: large;
  }

  /* Pestaña de seleccionar datos */
  #div-seleccion-persona {
    display: block;
    width: 80%;
    position: relative;
    left: 10%;
  }

  .form-seleccion label {
    font-size: medium;
    margin-left: 12%;
  }

  #div-header-seleccion-persona {
    background: rgb(0, 79, 104);
    color: white;
  }

  #seleccionarEmpresa,
  #seleccionarNombre {
    border: 2px solid rgb(3, 55, 109);
    position: relative;
    left: 8%;
  }

  .div-btn-siguiente-datos-seleccionados {
    display: flex;
    justify-content: end;
    align-items: end;
  }

  #btnDatosSeleccionados {
    background: rgb(0, 79, 104);
    color: white;
  }

}