@font-face {
 font-family: HelveticaNeueBold;
 font-weight: bold;
 src: url("../fonts/HelveticaNeueBold.otf") format("opentype");
}

@font-face {
 font-family: HelveticaNeueBlack;
 src: url("../fonts/HelveticaNeueHeavy.otf") format("opentype");
}

@font-face {
 font-family: HelveticaNeueLight;
 font-weight: lighter;
 src: url("../fonts/HelveticaNeueUltraLight.otf") format("opentype");
}

#app{
 width: 100%;
 height: fit-content;
 min-height: 100vh;
}

h1, h2, p, button{
 font-family: HelveticaNeueBold;
 color: white;
}

body {
 background-image: url(../img/fondo.jpg);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 margin: 0;
}

#app-container{
 min-height: calc(100vh - 140px);
}

/* Estilos Calificacion */

#viewCalificacion {
 flex: 1;
 overflow-y: auto;
}

#bodyCalificacion {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

#opciones {
 display: flex;
 justify-content: center;
}

img.mdf {
 object-fit: cover;
 vertical-align: middle;
}

#opciones img:hover {
 filter: grayscale(80%);
 border-radius: 40%;
}

.btn-general {
 background-color: rgb(241, 238, 238);
 color: black;
}

.btn-general:hover {
 background-color: rgb(99, 100, 102);
 color: rgb(241, 238, 238);
}

/* Respuesta */

.botonRespuesta{
 display: flex;
 flex-direction: column;
 align-items: center;
}

.opcion {
 width: 300px;
 color: white;
}

button.opcion {
 margin: 5px;
}

.opcion input[type="text"] {
 width: 100%;
 background: none;
 border: none;
 border-bottom: solid 2px;
 border-bottom-color: white;
 border-radius: 0px;
 color: white;
 padding: 0px;
}

.custom-form {
 border: solid 2px white;
 border-radius: 30px;
 padding: 10px;
 padding-bottom: 20px;
 margin: 30px;
}

/* Formulario */

.viewFormulario {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.headerFormulario {
 width: 100%;
}

#tituloFormulario {
 color: white;
 font-family: 'HelveticaNeueBlack';
 margin: 25px;
 font-size: 45px;
}

.bodyFormulario {
 min-width: 30vw;
 color: white;
}

input#phone::-webkit-input-placeholder {
 color: #ababab !important;
}

.form-check {
 height:30px
}
/*
input#numero::-webkit-input-placeholder {
 color: white;
}

.seleccion label {
 color: white;
 font-family: 'HelveticaNeueLight';
 font-size: large;
 margin: 3px;
}

.seleccion input[type="tel"] {
 margin-left: 10px;
 padding-left: 10px;
 border-radius: 20px;
 border: 0px;
 background-color: #ff4255a9;
 color: white;
 width: 140px;
}
*/

input#phone::-webkit-input-placeholder {
 color: white;
}

.seleccion label {
 color: white;
 font-family: 'HelveticaNeueLight';
 font-size: large;
 margin: 3px;
}

.seleccion input[type="tel"] {
 color: white;
 border-radius: 5px;
 border: 0px;
 background-color: #ff4255a9;
}

ul{
 background-color: #f03543;
}

#ci {
 border-radius: 7px;
 color: white;
 background-color: #ff4255a9;
 border-width: 0px;
 min-width: 240px;
}

.seleccion input[type="checkbox"] {
 display: none;
}

.seleccion .checkbox-icon {
 display: inline-block;
 width: 30px;
 height: 30px;
 background-image: url('../img/formulario/unchecked4.png');
 background-size: cover;
 cursor: pointer;
 vertical-align: middle;
 margin-right: 8px;
}

.seleccion input[type="checkbox"]:checked + .checkbox-icon {
 background-image: url('../img/formulario/checked3.png');
}

.seleccion .checkbox-icon {
 margin-left: 80px;
}

#txtCi{
  margin-left: 130px; 
  margin-right: 10px;
}

#txtNumero {
 margin-left: 40px;
 margin-right: 10px;
}

#sucursal {
 width: 340px;
}

textarea {
 margin: 5px 30px;
 resize: vertical;
 width: 340px;
 border-radius: 20px;
 background-color: rgb(128 128 128 / 66%);
 padding: 15px;
 color: white;
}

/* Carga */

.bodyCargando {
 display: flex;
 flex-direction: column;
 align-items: center;
 height: calc(100vh - 240px);
 justify-content: center;
}

#globoCargando {
 background-color: #ffffffcc;
 font-family: 'HelveticaNeueBold';
 font-size: 25px;
 padding: 20px;
 border-radius: 30px;
 color: #726e6d;
 margin-top: 60px;
 letter-spacing: -1px;
 line-height: 30px;
}

/* Orientacion horizontal */
@media (orientation: landscape) {
  img.mdf {
    max-width: 15vh;
  }
}

/* Orientación vertical */
@media (orientation: portrait) {
 img.mdf {
  max-height: 40vw;
 }

 h1 {
  font-size: 2.6em;
 }
 
 h2 {
  font-size: 2em;
 }
}

/* Footer */

footer {
 display: flex;
 flex-shrink: 0;
 justify-content: center;
}

footer img {
 width: 140px;
}


/* TODO validar y modificar los parametros OBrian */
@media (max-width: 453px) {
  .bodyFormulario {
    min-width: unset;
    width: 95vw;
    padding: 0 2vw;
  }
  #ci,
  #sucursal,
  textarea {
    min-width: unset;
    width: 90vw;
    max-width: 90vw;
  }
  .seleccion input[type="tel"] {
    width: 90vw;
    max-width: 90vw;
  }
  #txtCi,
  #txtNumero {
    margin-left: 0;
    margin-right: 0;
    display: block;
  }
  .seleccion label {
    font-size: 1em;
    margin: 2px 0;
  }
  .seleccion .checkbox-icon {
    margin-left: 0;
  }
  .dropdown {
    width: 100%;
  }
  .viewFormulario {
    padding: 0;
  }
  .opcion{
    width: 60vw;
    max-width: 60vw;
  }
  #txtRetroalimentacion{
    font-size: xx-large;
  }
}