@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

/* Agregar estilos para la lista de archivos */
.archivos-lista {
  display: flex;
  flex-direction: column; /* Cambiar dirección de los elementos a columna */
}

.archivos-lista .archivossubidos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  border-top: 1px solid #e5e5e5;
}

.archivos-lista .archivossubidos .delete-icon {
  cursor: pointer;
  margin-left: 5px;
  color: #d75656;
  font-size: 1.5em;
  font-weight: lighter;
}

.file-info {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.file-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.file-info-container div{
  color: #114491;
}

.pdf-icon {
  background-color: #62b0e5;
  padding: 1em;
  border-radius: 0.3em;
  margin-right: 1.5em;
  color: white;
  font-weight: 900;
  height: 3em;
}

.invalidoFiles {
  border: 2px solid red !important;
  border-radius: 1em;
  margin-bottom: 1em;
}

* {
    padding: 0;
    margin: 0;
    font-family: century gothic;
}
  
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
  
  
.ok {
  text-align: center;
  width: 100%;
  padding: 12px;
  background-color: #1e6;
  color: #fff;
}
.bad {
  text-align: center;
  width: 100%;
  padding: 12px;
  background-color: #a22;
  color: #fff;
} 

#Prescripcion {
  display: none;
}
  
.boton {
  padding: 4px 25px;
  background: rgb(235, 239, 241);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0;
}
  
.disabled {
  pointer-events: none;
}
.invalido {
  border: 2px solid red !important;
}
 
.alerta {
  color: red !important;
}  
  
.texto-justificado{
  text-align: justify;
}  

.breadcrumb {
  background-color: rgba(0,0,0,.03);
   border: 1px solid rgba(0,0,0,.125); 
}

#content {
  margin-bottom: 25px;
}

.adsbygoogle {
  margin-bottom: 15px;
}

img:focus {
        outline: none; /* Elimina el borde generado por el foco */
}

.no-focus:focus {
    outline: none;
}


/************************ CELULAR ************************/
@media all and (min-width: 320px)  {

  input[type="submit"],
  [type="button"] {
    background-color: #569ad7;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 1.4em;
    padding: 0.8em;
    margin-top: 1em;
  }

  #btn-aceptar{
    width: 100% !important;
    margin: 5em 0em 3em 0em;
  }

  [type="button"] {
    cursor: pointer; /* "hand" cursor */
  }

  [type="submit"]:focus,
  [type="submit"]:hover {
      background-color: #119111;
  }
  [type="submit"] {
    cursor: pointer; /* "hand" cursor */
  }

  #btnDDJJ{
    width: 60%;
  }

  /* ----------------- HEADER ----------------- */
  .header{
    padding: 30px 0;
    background-image: linear-gradient(180deg,#e5e5e5 0%,#ffffff 100%)!important;
    display: flex;
    justify-content: center;
    padding: 2em !important;
  }
  .header figure{
    width: 25em;
  } 
  .header img{
    width: 100%;
  }

  /* ----------------- FOOTER ----------------- */
  /*@import url(https://fonts.googleapis.com/css?family=Lato:300,400,400i,500,500i,600,600i,700,700i,800|Open+Sans:400,400i,600,600i,700,700i,800&display=swap);
  */
  .footer{
      background-color: #165eb3;
       background-image: linear-gradient(180deg,#66b7ff 0%,#133766 100%)!important; 
      padding: 25px;
      position: relative;
      font-weight: 600;
      font-size: 12px;
      
  }
  .footer figure{
    width: 20em;
    margin-bottom: 3em;
  } 
  .footer img{
    width: 100%;
    height: 100%;

  }

  .contFoot{
    display: flex;
    flex-direction:row;
    margin-top: 1.5em;
  }
  .contFoot h3{
    color: white;
    font-size: large;
    font-weight: bold;
  }
  .contFoot a{
    color: #8bc6fa;
  }
  .contFoot a:focus,
  .contFoot a:hover{
    color: rgb(255, 255, 255);
    font-size: larger;
    font-weight: 700;
  }
  .footer p{
    font-weight: 100;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important;
    color:white;
  }
  .footer p strong{
    font-weight: 700;
  }
  .icons{
    margin-right: 1em;
    font-size: medium;
  }
  .contendores{
    width: 100%;
    margin-left: 1em;
  }
  .contenido{
    border-left: 0.1em solid #ffffff69;
    padding-left: 1em;
  }
  
  /* ----------------- TITULO DEL TRAMITE ----------------- */
  .title {
    padding: 12px;
    border-bottom: rgb(177, 177, 177) solid 0.1em;
    margin-top: 5em;  
    text-align: center;
  }
  .title h1{
    font-size: 2rem;
    color: #29343e;
    margin-bottom: 0;
    font-weight: 500;
    display: inline;
    line-height: 1.35rem; 
    font-weight: bold;
  }



  /* ----------------- GENERAL ----------------- */
  .contenedor {
    padding: 1em;
    display: flex;
    justify-content: center;
  }
  .h3{
    margin-bottom: 0 !important;
  }



  /* ----------------- FORM NUMERO DE PADRON ----------------- */
  .padron{
    padding: 2em;
    background-color: #ffffff !important;
    border-radius: 1em;
    margin-top: 3em;
    margin-bottom: 3em;
    box-shadow: 0 0 5em -0.8em rgba(207, 207, 207, 0.671);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .padron label{
    font-size: 1.5em;
    font-weight: 700 !important;
    color: #569ad7 !important;
  }
  .padron input-group-prepend{
    justify-content: center;
  } 
  .column label{
    font-weight: bold;
  }
  #inputGroupPrepend2{
    display: none;
  }  

  #padron {
    text-align: center !important; 
  }

  /* ----------------- DOCUMENTACION ----------------- */
  .arch{
    padding-top: 1em;
    margin-bottom: 1em;

  }
  .subtiDoc{
    font-weight: 700 !important;
    font-size: 1rem !important;
  }
  .smallDoc{
    color: #31454f59;
  }
  .tituloDoc{
    
    font-weight: 700 !important;
    color: #569ad7 !important;
  }
  .doc{
    margin: 0 !important;
  }
  .doc p{
    margin-bottom: 0 !important;
    margin-left: 0.5em;
    
  }
  .inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    display: none !important;
  }
  .inputfile + label {
    font-size: 1em;
    font-weight: 700;
    color: white;
    background-color: #569ad7;
    display: inline-block;
    padding: 0.5em;
    margin: 1em;
    
  }
   .arch .input-group{
    background-color: aliceblue;
  }
  .inputfile:focus + label,
  .inputfile + label:hover {
      background-color: #114491;
  }
  .inputfile + label {
    cursor: pointer; /* "hand" cursor */
  }
  
  .textito{
    margin-bottom: 0 !important;
  }

  /* ----------------- FORM CONTACTO ----------------- */
  
  .contenedorContacto{
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    padding: 1em;
    background-color: #ffffff;
    box-shadow: 0 0 5em -0.8em rgba(207, 207, 207, 0.671);
    border-radius: 1em;
  }
  .cont{
    font-weight: 700 !important;
    color: #569ad7 !important;
    font-size: 1.5em;
  }
  .miniTitleCont{
      color: #337ab79c;
      font-size: 0.9em !important;
  }
  .letrita{
    color: #31454f59;
  }

  /* .contenedorContacto input{
    border-color: aliceblue;
  } */

  /* ----------------- PAGAR ----------------- */
  .contenedorPago{
    margin-top: 8em;
    margin-bottom: 8em;
    width: 90%;
  }
  .contPago{
    background-color: #d7d7d757 !important;
    padding: 1em;
    margin: 1em 1em 0em 1em;
    border-radius: 1em;
  }
  .pago{
    font-weight: 700 !important;
    color: #569ad7 !important;
    font-size: 1.5em;
  }
  .textoLittle{
    color: #31454f59 !important;
  }
  
  .contenedorPago p {
    margin-bottom: 0 !important; 
    
  }
  .contenedorPago label{
    font-size: smaller;
   
  }
  #cargarBtn{
    width: 85%;
  }
  .contBoton{
    margin-top: 2em;
  }
  
  .contLink{
    margin-left: 2em !important;
    margin-bottom: 2em !important;
    visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .contLink p{
    margin-left: 0.3em;
  }
  
  .link{
    color: #569ad7c7 !important;
    
    font-size: smaller;
    
  }
  .link {
    cursor: pointer; /* "hand" cursor */
  }
  .link:focus,
  .link:hover {
      color: #5f7487 !important;
      text-decoration: underline;
  }
  
}

  

@media all and (min-width: 1024px) {
  /* ----------------- GENERAL ----------------- */
  .contenedor {
    padding: 2em 0em 2em 0em;
    width: 100%;
  }
  .contenedorbotones{
    padding: 4em 0em 0em 0em;
    width: 100%;
  }
  .h3{
    margin-bottom: 0 !important;
  }

  #formContacto{
    width: 100%;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
  }
  #mensaje {
    align-items: center;
  }
  #form{
    width: 60%;
  }


  .elemtLista:hover, .elemtLista:focus{
    background-color: #569ad7 !important;
    color: white !important;
  }
  /* ----------------- FORM CONTACTO ----------------- */
  .contenedorContacto{
    margin-top: 5em;
    margin-bottom: 1.75em;
    padding: 3em;
    background-color: #ffffff;
    box-shadow: 0 0 5em -0.8em rgba(207, 207, 207, 0.671);
    border-radius: 1em;

  }
  .cont{
    font-weight: 700 !important;
    color: #569ad7 !important;
  }
  .miniTitleCont{
      color: #337ab79c;
      font-size: 0.9em !important;
  }
  .letrita{
    color: #31454f59;
  }

  .inputsCont{
    margin-left: 1em;
  }
  

  .contFoot{
    display: flex;
    flex-direction:row;
    margin-top: 1.5em;
    width: 100%;
    margin-left: 5em;
  }

  .footer{
    display: flex;
    flex-direction: row;
    padding: 2em;
  }

}