/*
*Main Header
/*Estas clases se refieren a la transicion del navbar cuando haces scroll*/
.bg-light {
  background-size: cover;
  transition: "background 250ms ease-in";
}

.push-up {
  margin-top: 0px;
}

p {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.barra {
  height: 100px;
  background-color: #ffffff;
}

.bg-light.scrolled {
  box-shadow: 2px 2px 5px var(--color_font_background);
  background: var(--color_font_button) !important;
}

.bg-light.nav-bg-admin {
  background: var(--color_font_button) !important;
}

/*------------------------------------------------------------------------*/
.navbar-toggler {
  border: 0;
}

/*Estas etiquetas funcionan para cambiar el color de las letras al momento de usar el script del scrolled*/

/*Estas primeras 2 etiquetas cambian lo que esta dentro de la lista*/
hr {
  height: 2px;
  margin-top: 0rem;
  margin-bottom: 0rem;
  background-color: var(--color_font_title);
}

.bg-light > div > div > div > a > .header-color-strong {
  color: var(--color_font_footer) !important;
  font-size: 1.2rem !important;
}

.bg-light > div > div > div > a > .header-color-strong:hover {
  /*font-size: 1.2rem !important;*/
  text-decoration: underline;
}

.bg-light > div > div > div > a > .header-color-strong:focus {
  font-size: 1.2rem !important;
  text-decoration: underline;
}

.bg-light.scrolled > div > div > div > a > .header-color-strong {
  color: var(--color_font_footer) !important;
}

.bg-light.scrolled > div > div > div > a > .header-color-strong:hover {
  color: var(--color_font_title) !important;
}

.bg-light.nav-bg-admin > div > div > div > a > .header-color-strong {
  color: var(--color_font_footer) !important;
}

/*Estas otras 2 cambian otro campo especifico "iniciari sesion"*/
.bg-light > div > div > form > a > div > .header-color-strong {
  color: var(--color_font_footer) !important;
}

.bg-light.scrolled > div > div > form > div > a > .header-color-strong {
  color: var(--color_font_footer) !important;
}

.bg-light.nav-bg-admin > div > div > form > a > .header-color-strong {
  color: var(--color_font_footer) !important;
}

.dropdown.btn-link #user-dropdown {
  text-decoration: none !important;
  color: var(--color_font_footer) !important;
}

.dropdown.btn-link #user-dropdown:hover {
  text-decoration: none !important;
  color: var(--color_font_text) !important;
}

/*
        *Header for dashboards
*/

/* Esta etiqueta es para todos los dashboards - posiciona el dashboard bajo el navbar y lo pega con el*/
.margin-header {
  top: 100px;
  transition: 0.5s;
  background-color: #7E191B !important;
  color: #fff !important;
  z-index: 2;
}

/*Les deja un margen de distancia a las imagenes que estan en el dashboard*/
.mg-image {
  margin-left: 5px;
}

/*Los botones cambian de color con el hover*/
#color-switch.bg-primary {
  background-color: #600332 !important;
  color: var(--color_font_button);
}

/*Dashboard del ciudadano*/
/*Se modificara el margen del nav y el contenido para mejor dezpliegue*/
#dashboard {
  margin-bottom: 20px;
}

.nav-tabs .nav-link {
  color: var(--color_font_secundary);
}

/*Cambio de tamaño en los iconos de los dashboards*/
.size-logo-dashboard {
  font-size: 16pt;
}

.selected-option {
  background-color: #600332 !important;
}

.selected-option a {
  color: #fff !important;
}

.menu-mobile-main-procedures li a {
  text-decoration: none;
  color: black;
}

/*-----------------------------------------------------------------------------------------------------*/
/*Dashboard Admin*/

/*Se modifica el componente de buscar al momento de que cambia la resolucion en los 1375px*/
@media only screen and (max-width: 1375px) {
  #search-header {
    top: 60px;
    z-index: 0;
    position: relative;
    margin-top: 10px;
    margin-bottom: 65px;
  }
}

@media only screen and (max-width: 992px) {
  #main-logo {
    width: 150px;
    display: none !important;
    transition: 0s;
    height: auto !important;
  }

  .margin-header {
    top: 0px;
    position: -webkit-sticky;
    position: sticky;
    transition: 0s;
    background-color: var(--color_font_background) !important;
    z-index: 2;
  }

  .bg-light > div > div > a > .header-color-strong {
    color: var(--color_font_title) !important;
    font-size: 1rem !important;
  }

  .bg-light > div > div > a > .header-color-strong:hover {
    color: var(--color-font-text) !important;
    font-size: 1rem !important;
  }

  .bg-light {
    box-shadow: 2px 2px 5px var(--color_font_background);
    background: whitesmoke !important;
  }

  .bg-light > div > ul > li > a > .header-color-strong {
    color: var(--color_font_text);
    padding-left: 0rem;
    font-size: 1rem;
  }

  .bg-light > div > form > a > .header-color-strong {
    color: var(--color_font_text);
  }

  .split-li {
    padding-bottom: 1rem;
  }

  .my-bg-light {
    box-shadow: 2px 2px 5px var(--color_font_background);
    background: whitesmoke !important;
    margin-left: 0px;
  }

  .move-center {
    text-align: center;
  }

  .add-mb {
    margin-bottom: 10px;
  }

  .btn-save-documents {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0rem 0.5rem;
    background-color: var(--color_font_background) !important;
    color: var(--color_font_button) !important;
  }
}

.last-created .rc-table-tbody > tr:first-child {
  animation: breathing 4s infinite ease-in-out;
}

#AddressProfileForm div {
  margin-top: 0.25rem;
}

.custom-box-shadow {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

@keyframes breathing {
  0% { background-color: #ffffff; } /* Color inicial */
  50% { background-color: #e1e1e1; } /* Color intermedio */
  100% { background-color: #ffffff; } /* Color final, igual al inicial */
}

@media print {
  /* Definir estilos para el header y footer */
  @page {
    margin-top: 0px; /* Altura del header */
    margin-bottom: 0px; /* Altura del footer */
  }

  footer {
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0px; /* Altura del footer */
    background-color: #ccc;
    text-align: center;
  }
}

/* Small devices*/

@media (min-width: 1px) and (max-width: 575.98px) {
 .sare-requirement-title-section{
    width: 100% !important;  
 }

 .sare-benefits-information > div {
  justify-content: center !important;
 }


 #SAREINFO > div {
  width: 100% !important;
 }

 .sare-benefits-information h1 {
  font-size: 2rem !important;
 
 }

 .sare-benefits-information h2 {
  font-size: 1.5rem !important;
 
 }

 .sare-benefits-information h3 {
  font-size: 1.3rem !important;
 
 }

 #SAREINFO a,
 #SAREINFO button {
    width: 100% !important;
 }

}

@media (min-width: 576px) and (max-width: 1024.98px) {
  .sare-requirement-title-section{
    width: 100% !important;  
 }

 .sare-benefits-information > div {
  justify-content: center !important;
 }


 #SAREINFO > div {
  width: 100% !important;
 }
}

@media (min-width: 1025px) and (max-width: 1670.98px) {
  .sare-requirement-title-section {
    width: 100% !important;
  }

  .sare-benefits-list-point {
    width: 70px !important;
    height: 70px !important;
  }

  .sare-benefits-list-point > div {
    width: 55px !important;
    height: 55px !important;
    transform: translateY(14%);
  }

  .sare-benefits-information h1 {
    font-size: 2rem !important;
   
   }
  
   .sare-benefits-information h2 {
    font-size: 1.5rem !important;
   
   }
  
   .sare-benefits-information h3 {
    font-size: 1.3rem !important;
   
   }
}
/*
    * Archivo principal de las propiedades de los componentes

    - En este apartado podremos encontrar las propiedades especificas de las clases y propiedades de los
    componentes
*/

/* Estas clases cambian todos los colores y acciones de las clases btn-primary, usar 
esta clase en los botones
    *Buttons
*/
.btn-primary-reverse {
    border-color: var(--color_main_page) !important;
    background-color: #7E191B !important;
    color: #f5f5f5 !important;
    font-weight: bold !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
    border-color: #490326!important;
    background-color: #600332 !important;
    color: #f5f5f5 !important;
    font-weight: bold !important;
}

.btn-primary-active {
    border-color: #490326!important;
    background-color: #600332 !important;
    color: #f5f5f5 !important;
}


.btn-primary:hover {
    border-color: #4d0328 !important;
    background-color: #4d0328 !important;
    color: #f5f5f5 !important;
}

#delete-arrow > div > .dropdown-toggle::after {
    display: none;
}
/*------------------------------------------------------------------------------------*/

/*Las Etiquetas con la propiedad de btn-link tendran el color asignado por la variable
    *Link Button
*/
.btn-link {
    color: var(--color_font_text);
}

.btn-link:hover {
    color: var(--color_font_title);
}
/*-----------------------------------------------------------------------------------*/

/*Los botones tipo outline tendran la propiedad siguiente
    * Outline button
*/

.btn-outline-secondary {
    color: var(--color_font_button);
}

/*-----------------------------------------------------------------------------------*/
/*Los estilos de scrollbar, Track, Thum*/

/**----------------------------------------------------------------------------------*/

/*Input Search de boostrap, se modifico su index por medio de una especificacion, cada vez que se use ese tipo de input
 usar este id*/
#searchBox.input {
    z-index: 0;
}
/*-------------------------------------------------------------------------------------*/

/* Estas clases son exclusivamente para la barra de busqueda*/
.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: white;
    border-radius: 30px;
    padding: 10px;
}

.search_input {
    color: black;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}

.searchbar:hover > .search_input {
    padding: 0 10px;
    width: 350px;
    caret-color: red;
    transition: width 0.4s linear;
}

.searchbar:hover > .search_icon {
    background: white;
    color: #e74c3c;
}

.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}
/*----------------------------------------------------------------------------*/
/*Los componentes nav-tabs de boostrap tienen por default usar un color gris cuando esta seleccionado, pero con esta propiedad
tendremos todos los nav-tabs con el color principal*/
.nav-tabs .nav-link.active {
    color: #7E191B;
}
.nav-pills .nav-link.active {
    background-color: #7E191B;
}
/*----------------------------------------------------------------------------*/
/*La propiedad de este acordio nos sirve para que el dropdown de nuestra mainpage no se sobre ponga*/
.accordion > .card {
    overflow: inherit;
}
/*Propiedades para el tamaño de la caja del video*/
.video {
    display: block;
    width: 100%;
    height: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 1000px;
}

/*La etiqueta de lista se modifica con la especificidad con el id de numbers-out*/
#numbers-out {
    list-style: none;
}
/*Mapbox componente */
.mapContainer {
    width: 100%;
    height: 800px;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 1500px;
}

canvas, .mapboxgl-canvas {
    height: 100% !important;
    width: 100% !important;
}

.modal-view-document canvas {
    width: 100% !important;
    height: 100% !important;
}

/*Table of boostrap properties force changed*/
.row.react-bootstrap-table-pagination {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.react-bootstrap-table-pagination-list.col-md-6.col-xs-6.col-sm-6.col-lg-6 {
    justify-content: center;
    display: flex;
}
/*-------------------------------------------*/

#content-pdf {
    margin-left: 80px;
    width: 650px;
    height: auto;
    font-size: 10px;
    padding-left: 10px;
}
@media only screen and (max-width: 768px) {
    .searchbar:hover > .search_input {
        padding: 0 8px;
        width: 190px;
        caret-color: var(--color_font_text);
        transition: width 0.4s linear;
    }
}

/*
    * Archivo principal de fuentes
    - En este apartado podremos encontrar la fuente que se importo desde la carpeta public/font/Seravek
*/



/*Las etiquetas h2 de la pagina tendran las siguiente propiedades*/
h1 {
    color: white;
    font-size: 2.5rem;
}

/*Las etiquetas h2 de la pagina tendran las siguiente propiedades*/
h2 {
    color: var(--color_font_title);
    font-weight: var(--font_weight);
}

.color_font_footer {
        color: var(--color_font_footer) !important;
}

/* etiquetas para los titulos */
.font-seravek-medium{
        font-family: "Seravek-medium";
}

.poppins-regular{
        font-family: "Poppins-Regular";
}

.poppins-bold{
        font-family: "Poppins-Bold";
}

@font-face {
        font-family: "Seravek-medium";
        src: local("Seravek-medium"), url(/static/media/Seravek-Medium.e1f6106ab15fd2c822e8.ttf) format("truetype");
}

@font-face {
        font-family: "Seravek";
        src: local("Seravek"), url(/static/media/Seravek.a15297f94d881117bbb7.ttf) format("truetype");
}

@font-face {
        font-family: "Poppins-Regular";
        src: local("Poppins-Regular"), url(/static/media/Poppins-Regular.8081832fc5cfbf634aa6.ttf) format("truetype");
}

@font-face {
        font-family: "Poppins-Bold";
        src: local("Poppins-Bold"), url(/static/media/Poppins-Bold.404e299be26d78e66794.ttf) format("truetype");
}

/*TABLES*/
#tableComponent table {
    width:100% !important;
}

/*RC TABLES STYLES*/
#tableCivicSection th,
#tableAppointments th,
#tableHistory th,
#tableParking {
    text-align: center !important;
}

#tableAppointments .rc-table-thead, 
#tableCivicSection .rc-table-thead,
#tableHistory .rc-table-thead,
#tableParking .rc-table-thead {
    border-bottom:1.5px solid #c8c8c8;
}

#tableAppointments .rc-table-thead .rc-table-cell,
#tableCivicSection .rc-table-thead .rc-table-cell,
#tableHistory .rc-table-thead .rc-table-cell,
#tableParking .rc-table-thead .rc-table-cell {
    padding: 0.5rem 0rem;
}

#tableAppointments .rc-table-row,
#tableCivicSection .rc-table-row,
#tableHistory .rc-table-row,
#tableParking .rc-table-row {
    border-bottom:1.5px solid #c8c8c8;
}


/*PAGINATION COMPONENT*/

.rc-table-row > td{
    padding: 1rem 0.1rem !important;
    text-align: center;
}

.rc-pagination {
    justify-content: center;
    list-style: none;
    display: flex;
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
}

.rc-pagination > li {
    background:#fbfbfb;
    width:40px;
    height:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--color_font_background);
    border-bottom:1px solid var(--color_font_background);
    border-right:1px solid var(--color_font_background);
    -webkit-user-select: none;
            user-select: none;
}

.rc-pagination > li:first-child {
    border:1px solid var(--color_font_background);
    border-top-left-radius:0.3rem;
    border-bottom-left-radius:0.3rem;
}

.rc-pagination > li:last-child {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.rc-pagination > li:hover {
    background-color:gray;
}

.rc-pagination-item-active {
    font-weight: bold;
    background-color: #600332 !important;
    color: #fff;
}

.status-table {
    font-weight: 1000;
}

/*this class is for changed color the status in tramites*/

.Pendiente {
    color: #686868 !important;
}
.Cancelado {
    color: #dc3545 !important;
}
.Revision {
    color: #c5b100 !important;
}
.Ventanilla {
    color: #ff851b !important;
}
.Impreso {
    color: #17a2b8 !important;
}
.ImpresoNegativa {
    color: #dc3545 !important;
}
.Entregado {
    color: #2451b3 !important;
}
.Entregado.negativa {
    color: #ccc904 !important;
}
.SolicitudRechazada {
    color: #a60606;
}
.Solicitud {
    color: #3d9970 !important;
}
.Pendiente.ciudadano {
    color: #50034ada !important;
}
.Pendiente.de.pago {
    color: #0400ffb9 !important;
}

.Pagado {
    color: #51b755 !important;
}

.Correccion {
    color: #9e428f !important;
}

.Listo {
    color: #51b755 !important;
}

/*
 *      Colores para status de las citas
 */

.Programada {
    color: #686868 !important;
}

.En.espera {
    color: #686868 !important;
}

.Atendiendo {
    color: #c5b100 !important;
}

.Concretada {
    color: #2451b3 !important;
}

.Reagendada {
    color: #50034ada !important;
}

.Cancelada {
    color: #dc3545 !important;
}

.Caducada {
    color: #dc3545 !important;
}

.RevisionSolicitud {
    color: blue;
}
#FORM_BUILDER {
    text-align: start !important;
}

/*MODAL VIEW DOCUMENT*/
.modal-view-document {
    width: 100%;
    height: 1200px;
    position: fixed;
    top:80px;
    left:0;
    z-index:2;
    background-color: rgba(255,255,255,0.70);
    display: flex;
    justify-content: center;
    align-items: start;
}

/*INPUT SIZES*/
.input-xl {
    font-size: 20px;
    height: 50px;
    padding: 10px 16px;
}

.input-lg {
    font-size: 18px;
    height: 46px;
    padding: 10px 16px;
}

.input-md {
    font-size: 1rem;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
}

.input-sm {
    font-size: 14px;
    height: 38px;
    padding: 10px 16px;
}

.input-xs {
    font-size: 12px;
    height: 34px;
    padding: 10px 16px;
}

/* FONT SIZES*/
.font-size-xs {
    font-size: 12px;
}


.font-size-sm {
    font-size: 14px;
}

.font-size-md {
    font-size: 16px;
}

.font-size-lg {
    font-size: 18px;
}

.font-size-xl {
    font-size: 20px;
}

.font-size-2xl {
    font-size: 24px;
}

.font-weight-bold {
    font-weight: bold;
}

.font-weight-normal {
    font-weight: normal;
}


/*La separacion que tendra el card con el banner en la mainpage*/
.card-margin-top {
    margin-top: -30px;
}

/*La separacion que tendra el card con el banner de la seccion del procedure*/
.margin-top-procedure {
    margin-top: -20px;
}

/*Esta especificacion es exclusiva para las listas con la etiqueta ul*/
.padding-ul {
    padding-left: 0;
}

#citizen-document-viewer {
    width: 100%;
    height: 900px;
    min-height: 700px;
}

/*Estos margenes se utilizan en varias secciones del body, ya que hay secciones que proveen datos como las tablas
.En las tablas tambien habran margenes que afectan la separacion de los componentes, ya que son parte del body*/
.mg-top-body {
    margin-top: 120px;
}

.mg-bot-body {
    margin-bottom: 30px;
}

.input-no-borders {
    border-style:none;
    border-bottom:1px solid #cccccc;
    transition: all 0.1s ease;
}

.input-no-borders:focus {
    border-bottom: 2px solid #691625;
    outline: none;
}

.custom-link {
    font-size: 0.90rem;
    cursor: pointer;
}

.custom-link:hover {
    text-decoration: underline;
}

.logo-ensenada-desktop {
    min-width: 270px;
    max-width: 270px;
}

.logo-ensenada-mobile {
    min-width: 250px;
    max-width: 250px;
}

.border-dotted {
    border: 3px dotted #dadada;
}

.border-dotted:hover {
    border: 3px dotted #691625;
}

.btn-custom-small-invisible {
    border-style: none;
    font-size: 13px;
    padding: .2rem .7rem;
    border:1px solid #a1a1a1;
}

.btn-custom-small-invisible:hover {
    background-color:  #e9e9e9;
}

/*Posicion del logo para las pantallas de Login, Registro y recuperacion de contraseña*/
.brand_logo_container {
    height: 220px;
    width: 220px;
    top: 130px;
    border-radius: 50%;
    background: #600332;
    text-align: center;
    z-index: 1;
    border:0.55rem solid #d4c19c;
    color: #d4c19c;
    box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.61);
    -webkit-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.61);
    -moz-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.61);
}

.brand_logo_container > .brand_title {
    color: #d4c19c;
    font-weight: bold;
    transform: translateY(-5px);
    font-size: 3.5rem;
}

.brand_logo_container > .brand_info {
    border-top: 3px solid #d4c19c;
    padding-top: 10px !important;
}

.brand_logo_container p {
    transform: translateY(-6px);
    line-height: 1.1;
    padding-left: 10px;
    padding-right: 10px;
    font-size:0.90rem;
}

.brand_logo {
    height: 170px;
    width: 170px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid white;
}

/*Alinea la parte de contactos y los hace responsivos para que se acomoden si entran mas contactos*/
.contact-flex-alignt {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.lock-logo {
    width: 250px;
    height: auto;
}

.container-alert {
    max-width: 350px;
    height: auto;
}

.bg-custom-primary {
    background-color: #600332 !important;
    color: "#fff" !important;
}

.dropdown-menu {
    z-index: 10000;
}

  

/*RESPONSIVE UPLOAD FILES SECTIONS*/
@media (min-width: 0px) and (max-width: 991.98px) {

    #citizen-document-viewer {
        height: 600px;
    }
}
:root {
  --primary-color: #600332;
  --primary-hover: #490326;
  --text-dark: #1a1a1a;
  --text-light: #666666;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-700: #374151;
  --gray-900: #111827;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  background-color: #f9fafb;
  background-color: var(--gray-50);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.btn {
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #600332;
  background-color: var(--primary-color);
  color: #ffffff;
  color: var(--white);
}

.btn-primary:hover {
  background-color: #490326;
  background-color: var(--primary-hover);
}

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--gray-200);
  border-radius: 0.375rem;
  font-size: 1rem;
}

.input:focus {
  outline: none;
  border-color: #600332;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(126, 25, 27, 0.2);
}

/*# sourceMappingURL=main.f6c7b8c5.css.map*/