@import url('https://fonts.cdnfonts.com/css/montserrat');

:root{
    /*Variables Colores del ADN*/
    --azul-oscuro: #004F8D;
    --azul-claro: #82BDE0;
    --rosa: #D56599;
    --verde: #00893E;
    --naranja: #DD710F;
    --rojo: #C41220;
}
* {
    margin: 0;
    padding: 0
}

html {
    height: 100%
}

p {
    color: grey
}

#heading {
    /* text-transform: uppercase; */
    color: var(--azul-oscuro);
    font-weight: bold;
    font-family: 'Montserrat';
}
h2.semi-titulo {
    /* text-transform: uppercase; */
    color: var(--azul-oscuro);
    font-weight: 400;
    font-size: 25px;
    margin-left: 45px;
    margin-right: 45px;
    font-family: 'Montserrat';
}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.form-card {
    text-align: left
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform input,
#msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 16px;
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid var(--azul-oscuro);
    outline-width: 0
}

#msform .action-button {
    width: 100px;
    background: var(--azul-oscuro);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    float: right;
    border-radius: 35px;
}
.btn-azul {
    width: 100px;
    background: var(--azul-oscuro);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    float: right;
    border-radius: 35px;
}

#msform .action-button:hover,
#msform .action-button:focus {
    background-color: var(--azul-claro);
}

#msform .action-button-previous {
    width: 100px;
    background: var(--azul-claro);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;    
    border-radius: 35px;
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    background-color: #000000
}

.card {
    z-index: 0;
    border: none;
    position: relative;
  
}

.fs-title {
    font-size: 25px;
    color: var(--azul-oscuro);
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left;
    font-family: montserrat;
}

.purple-text {
    color: var(--azul-oscuro);
    font-weight: normal
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right;
    font-family: montserrat;
    font-style: italic;
}

.fieldlabels {
    color: gray;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}
ul {
     padding-left: 0rem!important;
}
#progressbar .active {
    color: var(--azul-oscuro)
}

#progressbar .activeCancel {
    color: var(--rojo)
}

#progressbar li.activeCancel:before,
#progressbar li.activeCancel:after {
    background: var(--rojo)
}
#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400
}

#progressbar #realizar:before {
    font-family: FontAwesome;
    content: "\f059"
}

#progressbar #identidad:before {
    font-family: FontAwesome;
    content: "\f577"
}

#progressbar #datos:before {
    font-family: FontAwesome;
    content: "\f2bb"
}
#progressbar #opinion:before {
    font-family: FontAwesome;
    content: "\f022"
}
#progressbar #paymenxt:before {
    font-family: FontAwesome;
    content: "\f030"
}

#progressbar #confirm:before {
    font-family: FontAwesome;
    content: "\f00c"
}

/*---------------------Iconos para la vista de consultas START-------------------------------*/
#progressbar #recibido:before {
    font-family: FontAwesome;
    content: "\f0e0"
}
#progressbar #validado:before {
    font-family: FontAwesome;
    content: "\f14a"
}
#progressbar #cancelado:before {
    font-family: FontAwesome;
    content: "\f00d"
}

#progressbar #en_revision:before {
    font-family: FontAwesome;
    content: "\f002"
}

.pointer{
    cursor:pointer;
}


/*---------------------Iconos para la vista de consultas END-------------------------------*/


#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    display: flex;
    justify-content: center;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: var(--azul-oscuro)
}

.textLI{
    font-family: montserrat !important;

}
.progress {
    height: 20px
}

.progress-bar {
    background-color: var(--azul-oscuro)
}

.fit-image {
    width: 100%;
    object-fit: cover
}

form#msform {
    margin: 20px;
}

#msform {
    margin: 20px;
}

#progreso{

    background-image:none !important;
    background-color: var(--azul-claro);
}

button.btn-opciones {
    width: 134px;
    height: 115px;
    font-family: montserrat;
    color: white;
    background-color: var(--azul-oscuro);
    border: none;
    border-radius: 12px;
    margin-top: 20px;
    display: inline-grid;
    -webkit-transition: all 0.2s 0.1s ease;
    -moz-transition: all 0.2s 0.1s ease;
    -o-transition: all 0.2s 0.1s ease;
    transition: all 0.2s 0.1s ease;
}

button.btn-opciones:hover {
    width: 135px;
    height: 116px;
    background-color: var(--azul-claro);
    -webkit-transition: all 0.4s 0.1s ease;
    -moz-transition: all 0.4s 0.1s ease;
    -o-transition: all 0.4s 0.1s ease;
    transition: all 0.4s 0.1s ease;
}
button.btn-opciones:hover > .li-btn{
    font-size: 50px;
    -webkit-transition: all 0.2s 0.1s ease;
    -moz-transition: all 0.2s 0.1s ease;
    -o-transition: all 0.2s 0.1s ease;
    transition: all 0.2s 0.1s ease;
}
button.btn-opciones  .li-btn{
   
    font-size: 40px;
    font-style: normal;
    -webkit-transition: all 0.2s 0.1s ease;
    -moz-transition: all 0.2s 0.1s ease;
    -o-transition: all 0.2s 0.1s ease;
    transition: all 0.2s 0.1s ease;
}


.opciones{
    text-align: center;
}
.btn-opciones #sugerencia:before {
    font-family: FontAwesome;
    content: "\f0eb"
    
}
.btn-opciones #anonimo:before {
    font-family: FontAwesome;
    content: "\f21b"
    
}
.btn-opciones #identificado:before {
    font-family: FontAwesome;
    content: "\f2c1"
    
}
.btn-opciones #persona_externa:before {
    font-family: FontAwesome;
    content: "\f406"
    
}
.btn-opciones #persona_interna:before {
    font-family: FontAwesome;
    content: "\f4fc"
    
}


/*.btn-opciones #denuncia:before {
    font-family: FontAwesome;
    content: "\f071"
    
}
*/
/*
.btn-opciones #reclamacion:before {
    font-family: FontAwesome;
    content: "\f06a"
   

    
}
*/
.btn-opciones #agradecimiento:before {
    font-family: FontAwesome;
    content: "\f59c"
    
}


.inputInvisible {
    visibility: hidden;
}

img.img_opiniones {
    width: 3rem;
    height: 3rem;
}

p.mensaje_alerta {
    color: red;
    font-weight: 500;
    
}


.row {
  
    margin-right: -5px !important; 
   margin-left: -5px !important;  
}
/*
.contenedor-campos {
    margin-left: 15px;
    margin-right: 15px;
}*/






/**----------------------STILOS DEL INPUT-----------------------*/

.contenedor-btn-file > i {
    margin-right: 15px;
}

.botonCentrado {
    display: flex !important;
    align-items: center !important;
    /* flex-direction: column; */
    justify-content: center !important;
}

.contenedor-btn-file.bordeado {
    background-color: #fff;
    border: 2px solid var(--azul-oscuro);
    color: var(--azul-oscuro);
}

.contenedor-btn-file.bordeado:hover {
    background-color:var(--azul-oscuro);
    border: 2px solid var(--azul-oscuro);
    color: var(--azul-oscuro);
}

.contenedor-btn-file.bordeado:hover>#letrabtn {

    color:white;
}
.contenedor-btn-file.bordeado:hover>#icono {

    color:white;
}

.contenedor-btn-file {
    display: inline-block;
    position: relative;
    background-color:var(--azul-oscuro);
    color: #fff;
    border: 0;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);
    overflow: hidden;
    transition: ease-out 120ms background-color;
}

.contenedor-btn-file label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    cursor: pointer;
}
.contenedor-btn-file input[type="file"] {
    appearance: none;
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}





#dropzone ol {
    padding-left: 0;
}

#dropzone li, #dropzone>p {
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 10px;
}

#dropzone img {
    height: 64px;
    width: 50px;
    order: 1;
    object-fit: cover;
}

#dropzone p {
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
    text-align: center;

    /*Limitar el overflow*/
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}

.preview {
    text-align: center;
}

.img-file{

    border-radius: 10px;
}

.contEliminar {
    align-items: center;
    /* text-align: center; */
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
}
.btn-Eliminar:hover {
color: red;
cursor: pointer;
}
.contTexto {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.contImg{
    cursor: pointer;
   
}

.imgModal{
    max-width: 100%;
}


.selectPerform{
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 16px;
}

a.link-c {
    color: var(--azul-claro);
    font-family: 'Montserrat';
}

.cargando {
    color: var(--azul-oscuro) !important;
    width: 4rem !important;    
    height: 4rem !important;
}

.input-consulta {
    width: 85% !important;
    text-align: center !important;
    text-transform: uppercase;
}

h3.fs-title.subtitle {
    font-size: 16px;
    font-weight: 700;
}
.montP{
    font-family: 'Montserrat';
    font-size: 16px;

}


/*Estilos de cuerpo */
ul
{
  margin:0;
  padding:0;
  display:flex;
}
/*ul li
{
  list-style:none;
  position:relative;
  width:20px;
  height:20px;
  background:#ccc;
  margin:0 20px;
  border-radius:50%;
  cursor:pointer;
  transition:.5s;
}*/
/*ul li:hover
{
  background:#86ff3d;
  box-shadow:0 0 0 4px #333,
             0 0 0 6px #86ff3d;
            
}*/
/*ul li .content
{
  position:absolute;
  bottom :55px;
  background:rgb(27, 26, 26);
  padding:20px;
  border-radius:4px;
  width:400px;
  visibility:hidden;
  visibility:visible;
  opacity:0;
  transition:.5s;
  
  transform:translatex(-50%) translatey(-20px);
}

ul li:hover .content
{
  visibility:visible;
  opacity:1;
  transform:translatex(-50%) translatey(0px);
}

ul li .content:before
{
  content:'';
  width:30px;
  height:30px;
  background:rgb(20, 19, 19);
  position:absolute;
  bottom:-10px;
  left:215px;
  transform:rotate(45deg);
    
}
*/

/*---------*/
p.contenid-parrafo {
    background-color: bisque;
    border-radius: 10px;
   
}
p.contenid-parrafo:before {
    content:'';
    display: block;
    position: absolute;
    width:30px;
    height:30px;
    background:rgb(20, 19, 19);
   top: 23;
   
    /*left:215px;*/
    transform:rotate(45deg);
}


.flecha_invisible{
    visibility:hidden;
}
.imagenFlecha{

    width: 43px;
    margin-top: 20px;

}

.mensaje_estado {
    background-color: var(--azul-oscuro);
    border-radius: 9px;
    margin-top: -39px;
    min-height: 250px;
}


p.mensaje-cuerpo {
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 28px;
    text-align: justify;
}


/*MEDIA QUERIES PARA CONSULTAS ADN Te Escucha*/
@media (max-width: 500px) {
    .mensaje_estado {
        
        margin-top: -58px ;
        min-height: 151px;
    }


  }
  /*
  @media (min-width: 471px)and (max-width: 499px) {
    .mensaje_estado {
        
        margin-top: -33px ;
        min-height: 151px;
    }


  }


  @media (min-width: 403px)and (max-width: 437px) {
    .mensaje_estado {
        
        margin-top: -37px ;
        min-height: 151px;
    }
  }
  @media (max-width: 400px) {
    .mensaje_estado {
        
        margin-top: -36px ;
        min-height: 151px;
    }


  }*/

  /*Iphone XR  */
  @media (min-width: 375px)and (max-width: 414px) {
    .mensaje_estado {
        
        margin-top: -36px ;
        min-height: 151px;
    }

    .textLI {
        font-family: montserrat !important;
        font-size: 12px;
    }
  }
    /*iPHONE SE  */
    @media (min-width: 313px)and (max-width: 375px) {
        .mensaje_estado {
            
            margin-top: -36px ;
            min-height: 151px;
        }
    
        .textLI {
            font-family: montserrat !important;
            font-size: 10px;
        }
      }
    /*SG S8  */
    @media (min-width: 300px)and (max-width: 360px) {
        .mensaje_estado {
            
            margin-top: -36px ;
            min-height: 151px;
        }
    
        .textLI {
            font-family: montserrat !important;
            font-size: 10px;
        }
      }

      
    


    /*--------------------------------------ESTILOS DEL CHAT------------------------------------------------*/
    /*PARTE DELANTERA*/
    .abrir-chat{
        color: #ffffff !important; /*Cambiar este color cuando la implementacion*/
        cursor: pointer;
        text-decoration: underline !important;
    }

 
    /*BACKOFICCE*/