/* Estilos CSS */

/* === FUENTES === */
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
    url('../fonts/roboto-v30-latin-300.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-300.woff') format('woff');
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local(''),
    url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-300italic.woff') format('woff');
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-regular.woff') format('woff');
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local(''),
    url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-italic.woff') format('woff');
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local(''),
    url('../fonts/roboto-v30-latin-500.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-500.woff') format('woff');
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local(''),
    url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-500italic.woff') format('woff');
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
    url('../fonts/roboto-v30-latin-700.woff2') format('woff2'),
    url('../fonts/roboto-v30-latin-700.woff') format('woff');
}

.form-control:focus {
  color: black !important;
}

html {
  font-size: 90%;
  /* Reduces the base size */
}

/* === GLOBALES - SIDEBAR === */
/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 58px 0 0;
  /* Height of navbar */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 600;
  background: #3e5baa;
  background-image: url("../img/background/sidebar-default.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
  }
}

.sidebar .active {
  border-radius: 5px;
  /*box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);*/
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  background-color: #2e24aa;
}

.list-group a {
  /*background: #7508d0;*/
  background-color: rgba(0, 0, 0, 0) !important;
  color: white;
}

.list-group-item {
  background-color: rgba(0, 0, 0, 0) !important;
}

.list-group li {
  border-bottom: rgba(0, 0, 0, 0.172) 0.1px solid !important;
}

.collapse .collapse-list li a {
  color: rgb(219, 219, 219) !important;
  background: none !important;
  padding-left: 10px;
}

.list-group .collapse {
  color: white;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  color: white !important;
}

/* === TABLAS === */
.table-top_buttons_container button,
.table-top_buttons_container a {
  margin-bottom: -3px;
  padding: 7px;
}

/*#table-busqueda {
  color: white;
}*/

/* Estilos de filtros de tabla (DataTables) */
.dataTables_length {
  margin-bottom: 7px;
}

.table-button {
  padding: 8px !important;
  padding-top: 4.5px !important;
  padding-bottom: 3px !important;
  margin-top: -2px !important;
  margin-bottom: -2px !important;
}

/* === MODALS === */
.modal {
  z-index: 1000;
}

.modal .form-control {
  border: 1px solid rgb(180, 180, 180) !important;
}

.modal .form-select {
  height: auto;
  padding: .25rem .75rem;
  padding-left: .3rem;
}

.modal .modal-header {
  background: #2e24aa;
  color: white;
}

.modal .btn-close {
  opacity: 0.7 !important;
}

.modal-dialog {
  width: 100% !important;
  margin: 1.75rem auto;
}

/* === ALERTAS === */
.global-alert-top-cont {
  width: 100%;
  position: fixed;
  display: flex;
  z-index: 3000;
  margin-top: -90px;
}

.global-alert-top {
  justify-content: center;
  width: 100%;
  padding: 7px;
  padding-left: 13px;
  padding-right: 13px;
  padding-bottom: 8px;
}

#main-navbar.alert-down {
  margin-top: 38px;
}

:not(nav) > .container.alert-down,
:not(nav) > .container-fluid.alert-down {
  margin-top: 90px !important;
}

#sidebarMenu.alert-down {
  padding-top: 86px !important;
}

/* === DATEPICKER JQUERY === */
#ui-datepicker-div {
  z-index: 10000 !important;
}

/* APIS Y DEMÁS */
/*#api-miembros-buscar-sugerencias {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
  height: auto;
  position: absolute;
  z-index: 9999;
  width: 400px;
}

.api-miembros-buscar-sugerencias_opcion {
  background-color: #EEEEEE;
  border-top: 1px solid #d6d4d4;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  float: left;
}*/

#api-miembros-buscar-sugerencias, #api-familias-buscar-sugerencias {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
  max-height: 20em;
  position: absolute;
  z-index: 0;
  width: 400px;
  overflow-y: scroll;
  /* Hide vertical scrollbar */
  overflow-x: hidden;
}

.modal #api-miembros-buscar-sugerencias, .modal #api-familias-buscar-sugerencias {
  z-index: 1;
}

.api-miembros-buscar-sugerencias_opcion, .api-familias-buscar-sugerencias_opcion {
  background-color: unset;
  border-top: 0px;
  cursor: pointer;
  padding: 1px;
  font-size: 15.5px;
  width: 100%;
  float: left;
  color: rgb(60, 60, 60) !important;
}

.api-miembros-buscar-sugerencias_opcion#non_clickable, .api-familias-buscar-sugerencias_opcion#non_clickable {
  cursor: not-allowed;
  /*background-color: #fbfbfb !important;*/
}

/* === MÓDULO INGRESOS === */
#secure_login-responsealert,
.general-responsealert {
  justify-content: center;
  position: fixed;
  z-index: 2;
  width: 100%;
  height: fit-content !important;
  padding: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 0px;
}

#tesoreria_ingresos_lista-deleteandedit_responsealert-cont {
  position: absolute;
}

/* === FORMS === */
.form-control {
  border: 1px solid #b3b3b3 !important;
}

.input-group .form-control {
  border-left: none !important;
  padding-left: 3px;
}

.input-group input.form-control:focus {
  outline: none !important;
  box-shadow: none;
  padding: 10px;
  border: 1px solid #3b71ca !important;
  border-left: 1px solid #3b71ca;
}

.input-group-text {
  width: 34px;
  padding: 10px;
  justify-content: center;
  border-right: none !important;
}

.input-group .form-control:disabled {
  border-left: none !important;
  padding-left: 10.3px;
}

.input-group .form-select {
  border-left: none !important;
  padding-left: 5px;
  font-size: 15px;
}

/* === LOGIN/REG === */
#login-container-child {
  width: 30%;
}

#login-container-child .input-group-text {
  background: white;
  border: 1px solid #d6d6d6;
  height: 40px;
}

#login-container-child .input-group .form-control {
  height: 40px;
}

#login-container-child .input-group input.form-control:focus {
  outline: none !important;
  box-shadow: none;
  padding: 7px;
  border: 1px solid #b9b9b9 !important;
}

.loginreg-button,
.onboard-button,
.secure-buttons {
  color: white;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0);
  box-shadow: none;
}

.loginreg-button:hover,
.onboard-button:hover {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0);
  background: #3e5baa;
}

.flex-copy_footer {
  color: rgba(255, 255, 255, 0.365)
}

/* === SPINNER === */
.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  display: none;
  z-index: 1 !important;
  background: rgba(1, 1, 1, 0.8);
  width: 100vw;
  height: 100vh;
}


/* ===== MEDIA QUERIES ===== */

/* - - - Query | 1px - 346px - - - */
@media only screen and (min-width: 1px) and (max-width: 346px) {
  #login-container-child {
    width: 85% !important;
  }

  #login-container-child .text-center {
    font-size: 97% !important;
  }

  #login-container-child .text-center-big {
    font-size: 1.5em !important;
  }

  #login-container-child_logo {
    height: 3.3em;
  }

  #secure_login-responsealert {
    height: 4.5em;
    font-size: 0.9em;
  }

  .navbar-brand img {
    height: 1.7em !important;
  }


  /* COPYRIGHT FOOTER */
  .flex-copy_footer {
    width: 100%;
    display: flexbox;
    text-align: center;
  }

  .table-top_buttons_container button,
  .table-top_buttons_container a {
    margin-bottom: 4px;
    padding: 5px;
  }

  .table-top_buttons_container {
    margin-bottom: 5.5px;
  }

  .dataTables_filter {
    margin-bottom: 7px;
  }

}

/* - - - Query | 346px - 576px - - - */
@media only screen and (min-width: 346px) and (max-width: 576px) {
  #login-container-child {
    width: 85% !important;
  }

  #login-container-child .text-center {
    font-size: 97% !important;
  }

  #login-container-child .text-center-big {
    font-size: 1.5em !important;
  }

  #login-container-child_logo {
    height: 4em;
  }

  #secure_login-responsealert {
    height: 4.5em;
    font-size: 0.9em;
  }

  .navbar-brand img {
    height: 1.5em !important;
  }

  /* MODALS */
  .modal-body {
    height: 100vh !important;
    width: 35em;
  }

  /* COPYRIGHT FOOTER */
  .flex-copy_footer {
    width: 100%;
    display: flexbox;
    text-align: center;
  }

  .table-top_buttons_container button,
  .table-top_buttons_container a {
    margin-bottom: 4px;
    padding: 5px;
  }

  .table-top_buttons_container {
    margin-bottom: 5.5px;
  }

  .dataTables_filter {
    margin-bottom: 7px;
  }
}

/* - - - Bootstrap Breakpoint Query | Small (SM) - - - */
@media only screen and (min-width: 576px) and (max-width: 768px) {
  #login-container-child {
    width: 60%;
  }

  #login-container-child .text-center {
    font-size: 97% !important;
  }

  #login-container-child .text-center-big {
    font-size: 1.5em !important;
  }

  #login-container-child_logo {
    height: 4em;
  }

  #secure_login-responsealert {
    height: 4.4em;
    font-size: 0.9em;
  }

  .navbar-brand img {
    height: 2em !important;
  }

  /* COPYRIGHT FOOTER */
  .flex-copy_footer {
    width: 100%;
    display: flexbox;
    text-align: center;
  }
}

/* - - - Bootstrap Breakpoint Query | Medium (MD) - - - */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  #login-container-child {
    width: 50%;
  }

  #login-container-child .text-center {
    font-size: 97% !important;
  }

  #login-container-child .text-center-big {
    font-size: 1.9em !important;
  }

  #login-container-child_logo {
    height: 4em;
  }

  #secure_login-responsealert {
    height: 4.4em;
    font-size: 0.9em;
  }

  .navbar-brand img {
    height: 2em !important;
  }
}

/* - - - Bootstrap Breakpoint Query | Large (LG) - - - */
@media only screen and (min-width: 992px) {
  #login-container-child {
    width: 32%;
  }

  #login-container-child .text-center {
    font-size: 1.2em !important;
  }


  #login-container-child .text-center-big {
    font-size: 2.1em !important;
  }


  #login-container-child_logo {
    height: 4.5em;
  }

  .navbar-brand img {
    height: 1.9em !important;
  }

  .navbar {
    padding: 3.5px !important;
  }

  main {
    margin-left: 14%;
    /* Offset the main content to the right of the sidebar */
  }

  main.no-sidebar {
    padding: 25px;
  }

  #sidebarMenu {
    width: 14%;
  }
}

@media (max-width: 767.98px) {
  .modal-dialog.modal-responsive-custom {
    margin: 1rem auto;
    width: 95% !important;
  }

  .modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    margin: 1rem;
  }

  .modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
  }
}