/*-----------------------------------------------*/
/*          ELEMENTOS GENERALES DE HTML          */
/*-----------------------------------------------*/

:root {
  --primary-color: #0A720A;
  --soft-primary-color: #F4F9F9;
  --red-color: #FC0404;
  --white-color: #FFFFFF;
}

/*-----------------------------------------------*/
/*                  FONT AND TEXT                */
/*-----------------------------------------------*/

.ff-montserrat{font-family: 'Montserrat', sans-serif !important;}

.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}

.fs-10 {font-size: 10px !important;}
.fs-11 {font-size: 11px !important;}
.fs-12 {font-size: 12px !important;}
.fs-13 {font-size: 13px !important;}
.fs-14 {font-size: 14px !important;}
.fs-15 {font-size: 15px !important;}
.fs-16 {font-size: 16px !important;}
.fs-17 {font-size: 17px !important;}
.fs-18 {font-size: 18px !important;}
.fs-20 {font-size: 20px !important;}
.fs-22 {font-size: 22px !important;}
.fs-24 {font-size: 24px !important;}
.fs-26 {font-size: 26px !important;}
.fs-28 {font-size: 28px !important;}
.fs-30 {font-size: 30px !important;}

.text-justify {text-align: justify !important;}
.text-primary-color {color: var(--primary-color);}
.text-red-color {color: var(--red-color);}
.text-white-color {color: var(--white-color);}

/*-----------------------------------------------*/
/*                      LOGIN                    */
/*-----------------------------------------------*/

.home-pag.login .main-cont h1, .home-pag.login .main-cont div.form-group label {
  font-weight: 600;
}
.home-pag.login .main-cont h1 {
  letter-spacing: 2.5px;
}
.home-pag.login .main-cont div.form-group label {
  letter-spacing: 1.25px;
}
.home-pag.login .main-cont div.form-group input {
  background-color: var(--soft-primary-color);
  border-radius: 8px !important;
}
.home-pag.login .main-cont #access_btton {
  max-width: 400px !important;
  letter-spacing: 0px;
  border-radius: 4px;
  font-size: 19px;
  font-weight: 400;
}
.home-pag.login .main-cont .terms a, .home-pag.login .main-cont .terms a:hover {
  color: var(--primary-color);
  letter-spacing: 0.9px;
  text-decoration: none;
  font-weight: 500 !important;
}
.home-pag.login .main-cont .terms a img {
  transform: scale(1.4);
}

@media only screen and (max-width: 992px) {
  .home-pag .home .main-cont {
    width: 100%;
  }
}

/*-----------------------------------------------*/
/*                    REGISTRO                   */
/*-----------------------------------------------*/

/* CONTAINER */
body.formulario-cliente-new-pag .body-cont {
  border: none !important;
}

/* FORM */
.formulario-cliente-new-pag .div-subtitle-section .subtitle {
  letter-spacing: 3.35px;
}
.formulario-cliente-new-pag .form-subtitle {
  color: var(--primary-color);
  letter-spacing: 1.35px;
  font-size: 22px;
  font-weight: 700;
  text-align: left !important;
  font-style: normal !important;
}
.formulario-cliente-new-pag div.form-group label {
  color: var(--primary-color);
  letter-spacing: 1.25px;
  font-size: 18px;
  font-weight: 500;
}
.formulario-cliente-new-pag div.form-group input {
  background-color: var(--soft-primary-color) !important;
  box-shadow: none !important;
  color: var(--primary-color);
  font-weight: 500;
}
.input-border {
  background-color: var(--soft-primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 8px !important;
}
/* CHECKBOX */
.formulario-cliente-new-pag div.form-check label,
.password div.form-check label {
  line-height: 1.3;
}
.formulario-cliente-new-pag div.form-check input[type="checkbox"] + label,
.password div.form-check input[type="checkbox"] + label {
  color: var(--red-color) !important;
}
.formulario-cliente-new-pag div.form-check input[type="checkbox"]:checked + label,
.password div.form-check input[type="checkbox"]:checked + label {
  color: var(--primary-color) !important;
}
.formulario-cliente-new-pag div.form-check input[type='checkbox']:checked:after,
.password div.form-check input[type='checkbox']:checked:after {
  content: '\2713';
  color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 11px;
  width: 100%;
  height: 100%;
}
.formulario-cliente-new-pag div.form-check input[type='checkbox'],
.password div.form-check input[type='checkbox'] {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  max-width: 14px !important;
  min-width: 14px !important;
  width: 14px !important;
  max-height: 14px !important;
  min-height: 14px !important;
  height: 14px !important;
  appearance:none;
  border-radius: 15% !important;
  border: 1px solid var(--primary-color);
  box-shadow: none;
  margin-top: 2px;
}
.formulario-cliente-new-pag .form-group-checkboxes {
  position: relative;
}
/* REGISTRO - HORIZONTAL LINE */
.formulario-cliente-new-pag hr {
  background-color: var(--primary-color);
}

/* BUTTON TOGGLE PASSWORD */
.toggle-password, .toggle-password:active, .toggle-password:hover {
  background-color: var(--soft-primary-color);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-left: none;
  border-top: 1px solid var(--primary-color);
  border-right: 1px solid var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  box-shadow: none;
  outline: none;
  max-width: 34px;
  min-width: 34px;
  width: 100%;
  height: 100%;
  color: var(--primary-color);
}
.form-control.input-toggle-password {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top: 1px solid var(--primary-color) !important;
  border-left: 1px solid var(--primary-color) !important;
  border-bottom: 1px solid var(--primary-color) !important;
  border-right: none !important;
}
/* SMALL ERROR */
.small-error, .small-error-password {
  color: var(--red-color);
  font-size: 12px;
  font-weight: 500;
}
.small-error {
  letter-spacing: 0.6px;
}
/* REGISTER BUTTON */
.formulario-cliente-new-pag #register_btton {
  max-width: 400px !important;
  width: 400px !important;
  height: 40px;
  letter-spacing: 0px;
  border-radius: 4px;
  font-size: 19px;
  font-weight: 400;
  display: block;
  padding: 0;
  margin-left: 50px;
}
/* BTN BACK (LOGIN SIDEBAR) */
.sidebar-btnLogin {
  position: absolute;
  left: 10%;
  bottom: 10%;
}
.sidebar-btnLogin a, .sidebar-btnLogin a:hover, .sidebar-btnLogin a:active {
  background-color: var(--primary-color);
  text-decoration: none;
  color: var(--white-color);
  font-size: 20px;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  margin: 0 auto;
  border-radius: 4px;
}

@media only screen and (min-width: 992px) {
  .formulario-cliente-new-pag .form-group-checkboxes {
    position: absolute !important;
  }
}

/*-----------------------------------------------*/
/*                  SIDEBAR ADMIN                */
/*-----------------------------------------------*/

/*SIDEBAR ADMIN*/
#sidebarAdmin {
  flex: 0 0 300px !important;
  background: linear-gradient(180deg, #0A720A, #59f38f);
  position: static;
  box-shadow: 0 0 0 0;
}

.nav-sidebarAdmin {
  width: 100%;
  height: 100%;
}

#div-imgLogo {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 5em;
}

#div-imgLogo img {
  height: 215px;
}

.div-contentSidebar {
  width: 100%;
  padding: 0 15%;
}

.div-rowSidebar {
  margin-bottom: 1.5em;
}

.div-rowSidebar h4, .div-rowSidebar label {
  margin: 0;
}

.sidebar-title {
  color: #0e4f0e;
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 0.2em !important;
}

.sidebar-info {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1.2em;
  letter-spacing: 0.62px;
}

#divTableDescargarTarjeta{
  max-height: 300px;
  overflow: auto;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#divTableDescargarCuenta{
  max-height: 300px;
  overflow: auto;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#sidebarAdmin .sidebar-options button {
  background-color: var(--white-color);
  color: var(--primary-color);
  border-radius: 5px;
  max-width: 32px !important;
  min-width: 32px;
  width: 32px;
  max-height: 32px;
  min-height: 32px;
  height: 32px;
}
#sidebarAdmin .sidebar-options button i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#sidebarAdmin #sidebarListOptions {
  list-style: none !important;
  padding-left: 0.5em;
}
#sidebarAdmin #sidebarListOptions li {
  background-color: var(--white-color);
  border-radius: 7px;
  height: 24px;
  margin-bottom: 0.5em;
}
#sidebarAdmin #sidebarListOptions li a, 
#sidebarAdmin #sidebarListOptions li a:hover, 
#sidebarAdmin #sidebarListOptions li a:active {
  position: relative;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer !important;
}
#sidebarAdmin #sidebarListOptions li a i {
  position: absolute;
  right: 10px;
  font-size: 18px;
}

/* .btn-logout {
 background-color: #0A720A;
 box-shadow: 0px 1px 3px #00000033;
 color: #FFFFFF;
 width: 100%;
 border-radius: 5px;
 padding: 0.3em 0;
}

.btn-logout a {
  width: 100%;
  color: white;
  font-size: 1.05em;
  font-weight: 300;
  letter-spacing: 0;
}

.btn-logout a:hover {
  color: white;
  text-decoration: none;
} */

@media (max-height: 768px) and (max-width: 1366px) {
  .profile-pag .header-section {
    margin-bottom: 40px;
  }
  #div-imgLogo img {
    height: 190px;
  }
  #div-imgLogo {
    margin-bottom: 4em;
  }
  .div-rowSidebar {
    margin-bottom: 2em;
  }
  table#table_id2.dataTable.no-footer {
    margin-bottom: 15px !important;
  }
}

@media only screen and (max-width: 992px) {
  #sidebarAdmin {
    display: none;
  }
}

/*-----------------------------------------------*/
/*                       CSS                     */
/*-----------------------------------------------*/

/*SECTION CONTENIDO*/
.main-cont {
  font-family: 'Montserrat', sans-serif;
  width: 80%;
  margin: 0 auto;
}

/*TÍTULO*/
.main-title {
  letter-spacing: 3.35px;
  /*font-size: 4em;*/
  font-size: 3.5vw;
  font-weight: 600;
  color: #065606;
  text-align: center;
}

#panel-cards .main-cont {
  width: 92%;
}

/*SUBTÍTULOS DE TABLAS*/
#row-table1 h2, #row-table2 h2 {
  letter-spacing: 1.25px;
  color: #065606;
  font-size: 1.5em;
  font-weight: 700;
}

#row-table2 h2 {
  position: relative;
  top: 40px
}

/*PROPIEDADES DEL THEAD (ENCABEZADOS DE TABLA)*/
table.dataTable thead th {
  font-size: 1em;
  font-weight: 400;
  color: #ffffff;
  background-color: #0A720A;
  text-align: center;
  box-shadow: -5px 0px 0px -4px #1EB453;
}

/*ICONOS DE LAS TABLAS Y BOTONES DE PÁGINAS*/
.icon-pencil {
  color: #248a2b;
  cursor: pointer;
  margin-left: 30px;
}

.icon-plus {
  color: #59B713;
  cursor: pointer;
}

.icon-minus {
  color: #B71313;
  cursor: pointer;
}

.icon-download {
  color: #248a2b;
  cursor: pointer;
}

.icon-arrow {
  color: #248a2b !important;
  font-weight: bold;
  font-size: 2em;
}

/*ESTATUS DE TARJETA (VERDE: Activa / ROJA: Inactiva)*/
.activa, .activa:hover {
  color: #59B713;
  font-weight: 600;
  text-decoration: none;
}

.inactiva, .inactiva:hover, .cancelada, .cancelada:hover   {
  color: #B71313;
  font-weight: 600;
  text-decoration: none;
}

.bloqueada, .bloqueada:hover {
  color: #0ef371;
  font-weight: 600;
  text-decoration: none;
}

.eliminar, .eliminar:hover {
  color: #0ef371;
  font-weight: 600;
  text-decoration: none;
}

.desbloquear, .desbloquear:hover {
  color: #23893b;
  font-weight: 600;
  text-decoration: none;
}

.bloqueado, .bloqueado:hover {
  color: #ff8000;
  font-weight: 600;
  text-decoration: none;
}

/*BOTONES (FLECHAS) DE ASCENDENTE Y DESCENDENTE DE LOS THEAD */
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
  line-height: 14px;
  font-size: 2.0em;
}

table.dataTable td{
  text-align: center;
}

/*DIV DE REGISTRO USUARIO (TABLE: "Cuenta principal")*/
.div-userCuenta {
  display: inline-grid;
  line-height: 1;
}

.div-userCuenta > small {
  text-align: left;
}

/*BORDES PARA LAS FILAS DE LAS TABLAS*/
table thead tr:first-child  th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

table thead tr:last-child  th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/*MARGIN BOTTOM DE TABLAS*/
table#table_id1.dataTable.no-footer {
  border-bottom: none;
  margin-bottom: 10px;
}

table#table_id2.dataTable.no-footer {
  border-bottom: none;
  margin-bottom: 30px;
}

/* TABLA #1 - SEPARADORES DE TD */
#table_id1 tr td {
  box-shadow: -5px 0px 0px -4px #1EB453;
  -webkit-box-shadow: -5px 0px 0px -4px #1EB453;
  -moz-box-shadow: -5px 0px 0px -4px #1EB453;
}
#table_id1 tr td:first-child {
  box-shadow: none !important;
}

/*FILAS PAR E IMPAR*/
.myOdd, .myEven {
  background: #FFFFFF ;
  box-shadow: 0px 1px 2.5px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 1px 2.5px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 1px 2.5px rgba(0,0,0,0.1);
  border-radius: 8px;
}

table#table_id1 tbody tr:first-child.myOdd,
table#table_id2 tbody tr:last-child.myOdd {
  box-shadow: 0 5px 10px -1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 5px 10px -1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 5px 10px -1px rgba(0,0,0,0.1);
}

/*TD DE LÍNEA DE CRÉDITO (TABLE: "Cuenta principal")*/
#tdMainAccountBalance {
  display: flex;
  justify-content: center;
  align-items: center;
}

#tdMainAccountBalance a i {
  margin-left: 30px;
}

/*CAMPO DE ESTATUS TARJETA (TABLE: "Cuentas asociadas")*/
/*table.dataTable tbody tr td:nth-child(4){
  display: flex !important;
  justify-content: space-evenly !important;
}*/

/*BUTTON ALTA TARJETA (TABLE: "Tarjetas asociadas")*/
#div-btnAltaTarjeta {
  width: 100%;
  padding: 0 15px;
  position: relative;
  top: 37px;
  height: 38px;
  background-color: #0A720A;
}

/*BUTTON ALTA TARJETA (TABLE: "Tarjetas asociadas")*/
#table_id2_filter label button {
  height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  border-radius: 4px !important;
}

/*INPUT SEARCH (TABLE: "Tarjetas asociadas")*/
.inputSearch {
  background-color: #fcfcfc !important;
  border-color: #b1b1b1 !important;
  padding-left: 15px !important;
  padding-right: 30px !important;
  width: 300px !important;
  
}

.inputSearch::placeholder {
  color: #b8b8b8 !important;
  font-weight: 500 ;
}

.inputSearch:focus {
  outline: none;
}

#table_id2_filter label {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  position: relative;
  margin-bottom: 2em;
}

#icon-search {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #BCBCBC;
  font-size: 20px;
}

/*.dataTables_filter .fa-search {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
}*/

/* TD DE REALIZAR PAGO (TABLA #1) */
.td-realizarPago button {
  border-radius: 4px !important;
  letter-spacing: 0px !important;
}
.td-realizarPago button a, .td-realizarPago button a:hover, .td-realizarPago button a:active {
  color: var(--white-color) !important;
  text-decoration: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* BTN DE CONSULTAR Y OCULTAR NIP */
.btn-consultarNIP, .mostrarNIP {
  display: flex;
}
.btn-consultarNIP, .mostrarNIP {
  max-width: 60px;
  min-width: 60px;
  width: 60px;
}
.btn-consultarNIP button, .mostrarNIP button {
  color: var(--primary-color) !important;
  font-weight: 400 !important;
}
.btn-consultarNIP button {
  background-color: var(--white-color) !important;
  height: 100% !important;
  width: 100% !important;
}
.btn-consultarNIP label {
  letter-spacing: 0px !important;
}
.mostrarNIP {
  flex-direction: column;
}
.mostrarNIP button {
  background-color: transparent !important;
  text-align: start;
  letter-spacing: 0px !important;
  width: fit-content !important;
}
.mostrarNIP input, .mostrarNIP input:focus {
  background-color: var(--soft-primary-color) !important;
  border-radius: 4px !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
}

/*TD DE ESTATUS TARJETA*/
.td-estatusTarjeta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/*TD DE RECURSOS*/
.td-recursos div, .td-recursos div a {
  display: flex !important;
  align-items: center !important;
}
.td-recursos div {
  justify-content: space-evenly !important;
  width: 100%;
  height: 100%;
}
.td-recursos div a {
  justify-content: center !important;
}
.td-recursos .icon-plus, .td-recursos .icon-minus {
  font-size: 32px !important;
}

/*TD DE ACCIONES*/
.td-acciones {
  display: flex;
  justify-content: space-around;
}
.td-acciones a, .td-acciones a:hover {
  color: var(--primary-color) !important;
  text-decoration: none !important;
}
.td-accionesv2 a, .td-acciones a:hover {
  color: var(--primary-color) !important;
  text-decoration: none !important;
}
.td-acciones a label {
  cursor: pointer !important;
}
.td-acciones a .icon-download {
  font-size: 32px !important;
}
.td-acciones a .icon-pencil {
  font-size: 26px !important;
  margin: 0 !important;
  min-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.td-acciones a .fa-credit-card {
  min-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*DIV DE PÁGINAS*/
#table_id_paginate {
  color: #0A720A !important;
}

/*BUTTON PÁGINA SELECCIONADA*/
.current {
  font-weight: bolder;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #0A720A !important;
  border: none;
  font-weight: 900;
  background: white;
}

/*BUTTONS DE OTRAS PÁGINAS*/
.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: #9B9B9B !important;
  border: none;
  border-radius: none;
  box-shadow: 5px 0px 0px -4px #a7a7a7;
}

/*SEPARADORES (BOXSHADOW) PARA LAS PÁGINAS*/
.dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
  box-shadow: none !important;
}

/*BOTONES DE PÁGINAS - "HOVER"*/
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #9B9B9B !important;
  border: none;
  background: white;
}

/*DIV DE BOTONES PARA CAMBIAR DE PÁGINA*/
.dataTables_wrapper #table_id2_paginate {
  display: flex;
  align-items: center;
}

/*DIV DE BOTONES DE PÁGINA (1,2,3,..)*/
.dataTables_wrapper #table_id2_paginate > span {
  position: relative;
  bottom: 5px;
}

/*CAMBIAR DE PÁGINA - BUTTON FIRST*/
.dataTables_wrapper .dataTables_paginate > a#table_id2_first {
  display: none !important;
}

/*CAMBIAR DE PÁGINA - BUTTON PREVIOUS*/
.dataTables_wrapper .dataTables_paginate > a#table_id2_previous {
  color: #0A720A !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 5px 0 0;
}

/*CAMBIAR DE PÁGINA - BUTTON LAST*/
.dataTables_wrapper .dataTables_paginate > a#table_id2_last {
  display: none !important;
}

/*CAMBIAR DE PÁGINA - BUTTON NEXT*/
.dataTables_wrapper .dataTables_paginate > a#table_id2_next {
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 5px;
}

/* FONDEO DE TARJETAS MASIVO */
.card-funding-massive h2 {
  letter-spacing: 1.25px;
  color: var(--primary-color);
  font-size: 1.5em;
  font-weight: 700;
}
.card-funding-massive button, .card-funding-massive a {
  letter-spacing: 0;
}
.card-funding-massive .btn-green, .card-funding-massive .btn-green:hover, .card-funding-massive .btn-green:active, 
.card-funding-massive .btn-blue, .card-funding-massive .btn-blue:hover, .card-funding-massive .btn-blue:active {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  text-decoration: none;
}
.card-funding-massive .btn-green {
  background-color: #1C91BA;
}
.card-funding-massive .btn-blue {
  background-color: #0A720A;
}
.card-funding-massive a, .card-funding-massive a:hover, .card-funding-massive a:active {
  color: var(--primary-color);
  text-decoration: underline;
}

/*-------------------------*/
/*DROPDOWN LIST*/
.dropdown-menu {
  padding: 0.3rem 0 0.3rem 0 !important;
  background-color: #f5f5f5 !important;
  border-color: #c8c8c8 !important;
  box-shadow: 0px 5px 10px #0000001A;
  border-radius: 3px !important;
}

.dropdown-item {
  padding: 0.3rem 2.5rem 0.3rem 0 !important;
  width: 90% !important;
  margin: 0 5% !important;
}

.item-center {
  border-top: 1px solid #888888 !important;
  border-bottom: 1px solid #888888 !important;;
}

.dropdown-item:focus, .dropdown-item:hover {
  background-color: #f5f5f5 !important;
}

/*-------------------------*/
/*BUTTON/LINK RETURN PAGE*/
.returnPage {
  font-family: 'Montserrat', sans-serif;
  color: #0A720A;
  font-weight: 500;
  font-size: 28px;
  display: flex;
  align-items: center;
}

.returnPage i.icon-arrow {
  font-size: 1.5em;
  margin-right: 16px;
}

a.returnPage:hover {
  color: #0A720A;
  text-decoration: none;
  font-weight: 500;
}

/*-------------------------*/
/*VIEW BALANCE*/
#divContentBalance {
  font-family: 'Montserrat', sans-serif;
  color: #0A720A;
}

#divContentBalance.main-cont {
  width: 75%;
}

#divTitleBalance {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

#divTitleBalance div {
  width: 100%;
}

.divColumn-50 {
  width: 50%;
}

.columnBalance1 {
  padding-right: 3%;
}

.columnBalance2 {
  padding-left: 3%;
}

#divTitleBalance div img {
 height: clamp(150px, 13vw, 247px);
}

#divTitleBalance div h1 {
  font-size: clamp(46px, 3.5vw, 59px);
  font-weight: 600;
  color: #065606;
  align-self: flex-end;
  width: 290px;
}

#divSubtitleBalance {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

#divSubtitleBalance h2 {
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 400;
  font-style: italic;
}

#divPaymentsBalance #columnPaymentsBalance1 {
  padding-right: 60px;
  padding-bottom: 80px;
}

#divPaymentsBalance #columnPaymentsBalance2 {
  padding-left: 60px;
}

#columnPaymentsBalance1 h3 {
  margin-bottom: 40px;
}

#columnPaymentsBalance1 label, #columnPaymentsBalance2 label {
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 600;
  margin-bottom: 30px;
}

#columnPaymentsBalance1 div label, #columnPaymentsBalance1 div input, #columnPaymentsBalance2 div label, #columnPaymentsBalance2 div input {
  width: 100%;
}

#columnPaymentsBalance1 div input, #columnPaymentsBalance2 div input {
  height: clamp(35px, 3.5vw, 58px);
  border-radius: 19px !important;
  color: black !important;
  font-size: 40px;
  font-weight: 300;
  padding: 0 20px;
  margin-bottom: 30px;
}

#columnPaymentsBalance1 button, #columnPaymentsBalance2 button {
  letter-spacing: 0 !important;
}

#columnPaymentsBalance2 h3 {
  margin-bottom: 78px;
}

#columnPaymentsBalance2 button a, #columnPaymentsBalance2 button a:hover {
  color: white;
  text-decoration: none;
}

#divPaymentsBalance div h3, #divPaymentsBalance div h3 a {
  font-size: clamp(25px, 1.7vw, 32px);
  font-weight: 400;
  font-style: italic;
}

#divPaymentsBalance div h3 a {
  color: #7ff97f;
  text-decoration: underline;
}

/*-------------------------*/
/*VIEW SPEI*/
#divContentSpei {
  color: #0A720A;
}

#divContentSpei.main-cont {
  width: 85% !important;
}

#divContentSpei h1 {
  font-size: clamp(36px, 3.5vw, 59px);
  color: #065606;
}

#divContentSpei hr {
  background-color: #065606;
  height: 3px;
  margin: 45px 0;
}

#divContentSpei h2 {
  margin-left: 10px;
  margin-bottom: 32px;
  font-size: clamp(30px, 3vw, 50px);
}

#divContentSpei h2::before {
  content: "\f111";
  display: inline-block;
  width: clamp(20px, 2.5vw, 32px);
  height: clamp(20px, 2.5vw, 37px);
  color: transparent;
  position: relative;
  left: -10px;
  top: 11px;
  background: linear-gradient(180deg, #0A720A, #59f38f);
}

#divContentSpei h3 {
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 30px);
}

#divContentSpei p {
  font-size: clamp(20px, 1.7vw, 30px);
}

#divInfoGeneral .row div{
  padding: 0;
}

#divTotalToPay {
  background: transparent linear-gradient(180deg, #0A720A 0%, #2fab3b 41%, #1EB453 100%) 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
  height: 100%;
  width: 90%;
  display: grid;
  justify-content: center;
  color: white;
}

#divTotalToPay p {
  font-size: clamp(20px, 1.7vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  top: 10px;
}

#divTotalToPay h3 {
  font-size: clamp(45px, 3.2vw, 77px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -5px;
}

#divContentSpei hr:nth-child(4) {
  margin-top: 60px;
}

#divContentSpei th {
  color: #0A720A;
  font-weight: 700;
}

#divContentSpei th, #divContentSpei td {
  font-size: clamp(20px, 1.7vw, 30px) !important;
  padding-bottom: 48px;
}

#divPurchaseDetails td {
  padding-left: 60px;
}

#divPurchaseDetails .lastPurchaseDetails th, #divPurchaseDetails .lastPurchaseDetails td {
  padding-bottom: 10px;
}

#divStepsToPay h2 {
  margin-bottom: 46px;
}

.divColumn-49 {
  width: 49%;
}

#divPaymentInstructions {
  margin-bottom: 45px;
}

#divPaymentInstructions .span-verticalLine {
  margin: 0 1%;
}

#divPaymentOptionsBBVA {
  padding-right: 40px;
}

#divPaymentOptionsBBVA td, #divPaymentOptionsOthers td {
  padding-left: 16px;
}

#divPaymentOptionsOthers {
  padding-left: 30px;
}

#divPaymentOptionsBBVA h3, #divPaymentOptionsBBVA p, #divPaymentOptionsOthers h3, #divPaymentOptionsOthers p {
  margin-bottom: 36px;
}

#liInfoConvenio h3 {
  margin-bottom: 16px;
}
#liInfoConvenio p {
  margin-bottom: 46px;
}

#divContentSpei ol {
  font-size: clamp(20px, 1.7vw, 30px);
}

#divPaymentOptionsOthers th, #divPaymentOptionsOthers td {
  padding-bottom: 38px;
}

#divSpeiFooter {
  padding: 0 40px;
  margin-bottom: 75px;
}

#divSpeiFooter p {
  font-size: clamp(15px, 1.7vw, 25px);
  margin-bottom: 40px;
  text-align: justify;
}

#divSpeiFooter img {
  width: 100%;
}

#btnReturnSpei, #btnDownloadReference {
  width: 26vw;
  max-width: 475px;
}

.btnContentSpei {
  border-radius: 5px;
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 28px) !important;
  padding: 0;
}

#btnReturnSpei {
  border: 2px solid #0A720A;
  background-color: white;
  color: #0A720A;
}

#btnReturnSpei a {
  justify-content: center;
  font-size: clamp(18px, 1.5vw, 28px) !important;
}

#btnDownloadReference {
  margin-left: 3%;
}

#divBtnsSpei {
  margin-bottom: 135px;
}

.a-downloadReference, .a-downloadReference:hover {
  color: white !important;
  text-decoration: none;
}

@media only screen and (max-width: 1630px) {
  #divPurchaseDetails td {
    padding-left: 40px;
  }
  #divStepsToPay table tr {
    display: grid;
    padding-bottom: 16px;
  }
  #divStepsToPay table th, #divStepsToPay table td {
    padding: 0 16px 0 0;
  }
  #liInfoConvenio h3 {
    margin-bottom: 8px;
  }
}

@media only screen and (max-width: 1430px) {
  #divContentSpei h2::before {
    top: 7px;
  }
}

/*-----------------------------------------------*/
/*          BTN RETURN PAGE (ARROW LONG)         */
/*-----------------------------------------------*/

h1.main-title a.returnPage {
  font-size: 3.5vw ;
}

/*-----------------------------------------------*/
/*                     SUPPORT                   */
/*-----------------------------------------------*/

.support {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 600px;
  color: var(--primary-color);
}
.support p {
  letter-spacing: 1.2px;
}
.support h2 {
  letter-spacing: 0.8px;
  font-size: 40px;
}
.support h3 {
  padding-left: 55px;
}

/*-----------------------------------------------*/
/*                     PROFILE                   */
/*-----------------------------------------------*/

.profile {
  display: flex;
  flex-direction: column;
  color: var(--primary-color);
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  border-radius: 48px;
}
.profile .profile-pic {
  position: relative;
  max-width: 250px;
  min-width: 250px;
  width: 250px;
  max-height: 250px;
  min-height: 250px;
  height: 250px;
}
.profile .profile-pic img {
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  width: 100% !important;
  height: 100% !important;
}
.profile .profile-pic button {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 3px solid var(--white-color);
  max-width: 70px;
  min-width: 70px;
  width: 70px;
  max-height: 70px;
  min-height: 70px;
  height: 70px;
  font-size: 35px;
}
.profile .profile-content h2 {
  letter-spacing: 1.25px;
}
.profile .profile-content h3 {
  letter-spacing: 1px;
}
.profile-update {
  display: flex;
  justify-content: center;
}
.profile-update button {
  letter-spacing: 0px;
  border-radius: 4px;
  width: 400px;
}
.profile-update button a, .profile-update button a:hover, .profile-update button a:active {
  background-color: var(--primary-color);
  color: var(--white-color);
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/*-----------------------------------------------*/
/*                  PROFILE EDIT                 */
/*-----------------------------------------------*/

.profile-edit .form-group input.form-control {
  font-weight: 500 !important;
}

/*-----------------------------------------------*/
/*             PASSWORD / CONTRASEÑA             */
/*-----------------------------------------------*/

.password {
  font-family: 'Montserrat', sans-serif !important;
  background-color: var(--white-color);
  border-radius: 40px;
  width: 600px;
  display: flex;
  justify-content: center;
  color: var(--primary-color);
}
.password, .password-sms {
  box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
.password-content {
  width: 400px;
}
.password-content .form-group a, .password-content .form-group a:hover, .password-content .form-group a:active {
  color: var(--primary-color);
  letter-spacing: 0.75px;
  font-weight: 500;
}
.password h3 {
  letter-spacing: 0.4px;
}
.password .input-toggle-password {
  background-color: var(--soft-primary-color);
  height: 46px;
}
.password .toggle-password {
  background-color: var(--soft-primary-color);
  max-width: 40px !important;
  width: 40px !important;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password .password-form-label {
  letter-spacing: 1.25px;
}
.password .password-btn-submit button, .password-sms button {
  letter-spacing: 0px !important;
  border-radius: 8px !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  padding: 5px 0px !important;
  width: 100%;
}
.password-sms {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--primary-color);
  border-radius: 48px;
  width: 550px;
}
.password-sms-content {
  width: 100%;
  height: 100%;
}
.password-sms-content h3 {
  letter-spacing: 0.4px;
}
.password-sms-content input {
  background-color: var(--soft-primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: none;
  outline: none;
  text-align: center;
  width: 13%;
  height: 90px;
  font-size: 2.8em;
  font-weight: 600;
}
.password-sms button {
  max-width: 380px;
}

/*-----------------------------------------------*/
/*                     MODALES                    */
/*-----------------------------------------------*/

.modal .modal-dialog .modal-content {
  max-width: 460px !important;
  border-radius: 20px !important;
}

.close {
  color: #0A720A !important;
  opacity: 1 !important;
}

.close > span > i {
  font-size: 0.9em !important;
  position: relative;
  top: 0.3em !important;
}

.div-header {
  display: block;
}

.div-close {
  display: flex;
  justify-items: end;
  justify-content: end;
  padding: 0 2.5%;
}

.div-close span {
  font-size: 2em;
}

.div-title {
  text-align: center;
}

.div-title > h3 {
  letter-spacing: 0.2px;
  color: #0A720A;
  font-weight: 700;
  font-size: 1.4em !important;
}

.div-subtitle {
  text-align: center;
}

.div-subtitle > h5 {
  font-size: 1.1em !important;
}

#modal-incrementarTarjeta .div-title > h3 {
  color: #59B713 !important;
}

#modal-disminuirTarjeta .div-title > h3 {
  color: #B71313 !important;
}

.modal-body {
  padding: 1rem 10% 0 10% !important;
}

.div-numTarjeta, .div-nomUsuario, .div-saldo, .div-monto, .div-columnForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 0px;
}

.column-title, .column-info {
  color: #0A720A;
}

.column-title {
  font-weight: 600;
}

.column-info {
  padding-left: 15px;
}

.column-input, .column-inputMonto {
  background-color: #f6f6f6 !important;
  border-color: #60a961 !important;
  color: #0A720A !important;
  border-radius: 8px !important;
  width: 100%;
  margin-bottom: 1rem;
  padding-left: 15px;
  padding-right: 15px;
}

.column-input:focus, .column-inputMonto:focus {
  outline: none;
}

select.column-input  {
  height: 28px;
}

.modal-body > hr {
  background-color: #0A720A;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

#modal-incrementarTarjeta .modal-body .modal-footer .div-saldo {
  margin-bottom: 0.6rem;
}

.modal-footer {
  border: none !important;
  justify-content: center !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 0px;
  padding: 0.75em 10% 1.2em 10% !important;
}

#modal-incrementarTarjeta .modal-body .div-saldo > label {
  color: #59B713 !important;
}

#modal-disminuirTarjeta .modal-body .div-saldo > label {
  color: #B71313 !important;
}

.btn-Cancelar {
  background-color: white;
  border: 1px solid #0A720A;
  color: #0A720A;
}
.btn-Aceptar {
  background-color: #0A720A;
  color: white;
}

.btn-Aceptar, .btn-Cancelar {
  border-radius: 5px;
  font-weight: 500;
  padding-top: 5px;
  padding-bottom: 5px;
  padding: 3px 40px 3px 40px;
  text-align: center;
  letter-spacing: 0;
}

.checkbox-big {
  width: 25px;
  max-width: 25px;
  min-width: 25px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
}
input[type="checkbox"].checkbox-big {
  accent-color: var(--primary-color);
}

.input-bold {
  font-weight: 600;
}
.input-bold::placeholder {
  font-weight: 500;
}

#modal-descargarCuenta .modal-body {
  display: flex !important;
  color: #0A720A !important;
  padding: 1rem 2% 2rem 2% !important;
}

#modal-descargarTarjeta .modal-body {
  display: flex !important;
  color: #0A720A !important;
  padding: 1rem 2% 2rem 2% !important;
}

.div-columnMovimientos {
  display: block;
  width: 49.9%;
  padding: 0 2%;
}

#titleDescargar {
  letter-spacing: 0.2px !important;
  font-weight: 700 !important;
  font-size: 1.7em !important;
  color: #0A720A !important;
  text-align: center !important;
}

.div-columnMovimientos > h3, .div-columnEstados > h3 {
  font-size: 1.5em;
  font-weight: 600;
}

.div-columnMovimientos > p, .div-columnEstados > p {
  font-size: 0.95em !important;
  margin-bottom: 0 !important;
}

.div-columnMovimientos > small {
  font-size: 0.6em;
}

.div-inputsFechas {
  width: 80%;
  margin: 0.4em 10% 1.5em auto;
  display: block;
}

.div-groupFecha > label {
  margin-bottom: 0 !important;
  font-weight: 600;
}

.div-groupFecha > input {
  width: 100%;
  border-radius: 5px !important;
  border-color: #0A720A !important;
}

.div-groupFecha > input:focus {
  outline: none;
}

.div-footerDescargar {
  display: flex;
  justify-content: center;
}

.span-verticalLine {
  display: inline-block;
  border: 1px solid #0A720A;
  margin: 0;
  max-width: 1px;
}

.div-columnEstados {
  width: 49.9%;
  padding: 0 3%;
}

#divTableDescargarCuenta, #divTableDescargarTarjeta {
  margin-top: 1.5em;
}

#thFirstTableDescargarCuenta, #thFirstTableDescargarTarjeta {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

#thLastTableDescargarCuenta, #thLastTableDescargarTarjeta {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

#tableModalDescargarCuenta thead tr td, #tableModalDescargarTarjeta thead tr td {
  font-size: 1em;
  font-weight: 400;
  color: #ffffff;
  background-color: #0A720A;
  text-align: center;
  box-shadow: -5px 0px 0px -4px #1EB453;
}

#tableModalDescargarCuenta tbody tr, #tableModalDescargarTarjeta tbody tr {
  background-color: transparent;
  background: #FFFFFF;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 5px 10px -1px #0000001A !important;
  border-radius: 8px;
}

.div-columnEstados > .div-footerDescargar {
  margin-top: 3em;
}

/*MODAL OTP*/
#modal-OTP .modal .modal-dialog .modal-content {
  max-width: 500px !important;
}
#modal-OTP .div-subtitle {
  color: #0A720A !important;
  font-size: 0.8em !important;
}

#modal-OTP .modal-body {
  display: flex !important;
  color: #0A720A !important;
  padding: 1rem 5% 2rem 5% !important;
  align-items: center;
  justify-content: space-between;
}

#modal-OTP .modal-body > input {
  width: 15%;
  font-size: 2.5em;
  text-align: center;
}

#modal-OTP .modal-body > input:focus {
  outline: none !important;
}

#modal-OTP .modal-footer {
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0.75em 10% 1.2em 10% !important;
}

/*MODAL ACTUALIZAR DATOS*/
#modal-actualizarDatosCliente, #modal-altaTarjeta {
  font-family: 'Montserrat', sans-serif !important;
}
#modal-actualizarDatosCliente .modal-body {
  padding: 1rem 5% 0 5% !important;
}

#modal-actualizarDatosCliente .modal-body hr, #modal-altaTarjeta .modal-body hr {
  background-color: #0A720A;
  height: 2px;
}

#modal-actualizarDatosCliente .modal-body form hr, #modal-altaTarjeta .modal-body form hr {
  margin-top: 0;
}

#modal-actualizarDatosCliente .div-title h3, #modal-altaTarjeta .div-title h3 {
  letter-spacing: 1.25px;
}
#modal-actualizarDatosCliente .div-sectionActualizar h4, #modal-actualizarDatosCliente .div-sectionActualizar p.column-title,
#modal-altaTarjeta .div-sectionActualizar h4, #modal-altaTarjeta .div-sectionActualizar p.column-title {
  letter-spacing: 0.85px;
}
#modal-actualizarDatosCliente .div-sectionActualizar p.column-title, #modal-altaTarjeta .div-sectionActualizar p.column-title {
  font-weight: 500;
}
#modal-actualizarDatosCliente .column-input, #modal-altaTarjeta .column-input {
  font-weight: 600;
  padding: 4px 15px;
  letter-spacing: 0.65px;
}
#modalActualizar-contacto .column-input {
  color: #9C9C9C !important;
}

.div-rowActualizarDatos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 0px;
}

.div-rowActualizarDatos p {
  margin-bottom: 0;
}

.div-sectionActualizar {
  padding: 0.5em 0 0.8em 0;
}

.div-sectionActualizar h4 {
  color: #0A720A;
  font-weight: 700;
}

/*MODAL ALTA TARJETA*/
#modal-altaTarjeta .modal-body form > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 0px;
}

/*MODAL COMERCIOS AFILIADOS*/
#modal-comerciosAfiliados div.modal-body {
  padding: 1rem 5% 2rem 5% !important;
}

#modal-comerciosAfiliados .modal-body .row div {
  max-width: 200px;
  max-height: 130px;
}

/*MODAL REFERENCIA PAGO EN COMERCIO*/
#modal-ReferenciaPagoComercio {
  font-family: 'Montserrat', sans-serif;
}

#modal-ReferenciaPagoComercio .div-title > h3 {
  color: #0A720A;
  font-weight: 500;
  font-size: 50px !important;
  text-align: left;
  width: 70%;
  margin: 0 auto;
  position: relative;
  top: -30px;
}

#modal-ReferenciaPagoComercio .modal-body {
  padding: 1rem 15% 0 14% !important;
  color: #0A720A !important;
  position: relative;
  top: -25px;
}

.div-columnReferenciaComercio {
  display: grid !important;
  grid-row-gap: 5px;
  margin-bottom: 25px;
}

.div-columnReferenciaComercio p {
  margin: 0 !important;
  font-size: 22px;
}

.textReferencia {
  font-weight: 300;
}

#div-VigenciaReferencia p {
  font-size: 24px;
  font-style: italic;
  margin-bottom: 5px;
}

#div-VigenciaReferencia h3 {
  font-size: 66px;
  font-weight: 700;
}

#modal-ReferenciaPagoComercio .modal-footer {
  display: flex !important;
  position: relative;
  top: -15px;
}

#modal-ReferenciaPagoComercio .modal-footer button {
  font-size: 18px;
}

/*-----------------------------------------------*/
/*          MODAL: UPDATE PROFILE PIC            */
/*-----------------------------------------------*/

#modal-updateProfilePic {
  font-family: 'Montserrat', sans-serif !important;
}
#modal-updateProfilePic .div-title h3 {
  text-transform: uppercase;
  letter-spacing: 1.25px;
}
#modal-updateProfilePic hr {
  background-color: var(--primary-color);
  height: 1px;
}
#modal-updateProfilePic .modal-body img {
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  max-width: 200px;
  min-width: 200px;
  width: 200px;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
}
#modal-updateProfilePic .file-drop-area {
  align-items: center;
}
.file-drop-area {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 0 15px;
}
.fake-btn {
  flex-shrink: 0;
  padding: 8px 15px;
  text-transform: uppercase;
}
.file-msg {
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
#modal-updateProfilePic .modal-footer {
  padding: 0 10% 1.2em 10% !important;
}

/*-----------------------------------------------*/
/*        MODAL: FONDEO DE TARJETAS MASIVO       */
/*-----------------------------------------------*/

#modal-cardsFunding .div-title h2 {
  color: var(--primary-color);
  letter-spacing: 1.25px;
  font-size: 25px;
  font-weight: 700;
}
#modal-cardsFunding .modal-body .file-drop-area {
  position: relative;
  flex-direction: row;
  justify-content: space-between;
}
#modal-cardsFunding .modal-body .file-drop-area .file-msg {
  border: 2px solid #dadada;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #fcfcfc;
  color: #d1d1d1;
  display: flex;
  width: 100%;
  height: 100%;
  letter-spacing: 1px;
}
#modal-cardsFunding .modal-body .file-drop-area .fake-btn {
  display: flex;
  justify-content: center;
  align-items: end;
  cursor: pointer;
  min-height: 39.6px;
  border: 2px solid var(--primary-color);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 3px;
  background-color: var(--white-color);
  color: var(--primary-color);
}
#modal-cardsFunding .modal-body .modal-btns {
  display: flex;
  justify-content: space-evenly;
}
#modal-cardsFunding .modal-body button {
  letter-spacing: 0;
  border-radius: 4px;
}
#modal-cardsFunding .modal-body button[type="submit"] {
  background-color: #abb02f;
}
/*-----------------------------------------------*/
/*        MODAL: FONDEO DE TARJETAS MASIVO       */
/*-----------------------------------------------*/

#modal-cardsImport .div-title h2 {
  color: var(--primary-color);
  letter-spacing: 1.25px;
  font-size: 25px;
  font-weight: 700;
}
#modal-cardsImport .modal-body .file-drop-area {
  position: relative;
  flex-direction: row;
  justify-content: space-between;
}
#modal-cardsImport .modal-body .file-drop-area .file-msg {
  border: 2px solid #dadada;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #fcfcfc;
  color: #d1d1d1;
  display: flex;
  width: 100%;
  height: 100%;
  letter-spacing: 1px;
}
#modal-cardsImport .modal-body .file-drop-area .fake-btn {
  display: flex;
  justify-content: center;
  align-items: end;
  cursor: pointer;
  min-height: 39.6px;
  border: 2px solid var(--primary-color);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 3px;
  background-color: var(--white-color);
  color: var(--primary-color);
}
#modal-cardsImport .modal-body .modal-btns {
  display: flex;
  justify-content: space-evenly;
}
#modal-cardsImport .modal-body button {
  letter-spacing: 0;
  border-radius: 4px;
}
#modal-cardsImport .modal-body button[type="submit"] {
  background-color: #abb02f;
}

/*-----------------------------------------------*/
/*           MODAL: MENSAJE / MESSAGE            */
/*-----------------------------------------------*/

#modal-message .modal-body h2 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--primary-color);
  letter-spacing: 2.25px;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  width: 100%;
  height: 100%;
}

.mi-title {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--primary-color); 
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  width: 100%;
  height: 100%;
}
#modal-message button.btn-Aceptar {
  padding: 5px 0px !important;
  width: 320px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

/*-----------------------------------------------*/
/*        MODAL: CERRAR SESIÓN / SIGN OFF        */
/*-----------------------------------------------*/

#modal-signOff {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--primary-color);
}
#modal-signOff hr {
  background-color: var(--primary-color);
  height: 2px;
}
#modal-signOff .div-title h2 {
  letter-spacing: 1.25px;
  font-size: 25px;
  font-weight: 700;
}
#modal-signOff .modal-body {
  color: var(--primary-color);
}
#modal-signOff .modal-body h3 {
  letter-spacing: 1.2px;
  font-size: 30px;
  font-weight: 500;
}
#modal-signOff a {
  text-decoration: none;
}