@charset "UTF-8";

/*****************************************************************************
*    Proyecto: OLB AVM
*    Titulo: make_a_transfer.css
*    Desripcion: Estilos que se requieran en todas las paginas (i.e. botones, colores, links...)
******************************************************************************/
/*======================*/

/*****************************************************************************
*  Utilidades de Texto: Formato, Alineación y Tamaños
*  Clases para controlar el aspecto del texto de forma rápida y reutilizable
******************************************************************************/


p{
    color: #444444;
}

.datepickerDays{
   font-family: Lato; 
   color: #1b1c1e !important; 
   text-decoration: none !important;   
}

.datepickerDays:hover{
   font-family: Lato; 
   color: #1b1c1e !important; 
   text-decoration: none !important;   
   font-weight:bold;
}

a:not(.nav-link):not(.noBorderBlur):not(.datepickerDays):not(.primary-button):not(.secondary-button){
   font-family: Lato; 
   color: #006150; 
   text-decoration: underline;   
}

a:hover {
    font-family: Lato; 
    color: #006600 ; 
}

/*=== Peso del Texto ===*/
.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }
.text-light { font-weight: 300; }

/*=== Estilos ===*/
.text-italic { font-style: italic; }
.text-oblique { font-style: oblique; }
.text-no-italic { font-style: normal; }

/*=== Decoraciones ===*/
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-overline { text-decoration: overline; }
.text-no-decoration { text-decoration: none; }

/*=== Alineación ===*/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/*=== Tamaño de Texto ===*/
.text-small { font-size: 0.85em; }
.text-medium { font-size: 1em; }
.text-large { font-size: 1.25em; }
.text-xl { font-size: 1.5em; }
.text-xxl { font-size: 2em; }

/*=== Transformaciones ===*/
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/*=== Espaciado ===*/
.text-spacing-1 { letter-spacing: 1px; }
.text-spacing-2 { letter-spacing: 2px; }

/*=== Altura de línea ===*/
.text-height-1 { line-height: 1; }
.text-height-15 { line-height: 1.5; }
.text-height-2 { line-height: 2; }

/*****************************************************************************
*  Utilidades de Espaciado: Padding y Margin
*  Clases para controlar márgenes y rellenos hasta un máximo de 10em
******************************************************************************/

/*=== Padding ===*/

/* Padding general */
.p-0 { padding: 0; }
.p-1 { padding: 1em; }
.p-2 { padding: 2em; }
.p-3 { padding: 3em; }
.p-4 { padding: 4em; }
.p-5 { padding: 5em; }
.p-6 { padding: 6em; }
.p-7 { padding: 7em; }
.p-8 { padding: 8em; }
.p-9 { padding: 9em; }
.p-10 { padding: 10em; }

/* Padding por dirección */
.pt-0 {
    padding-top: 0em;
}

.pr-0 {
    padding-right: 0em;
}

.pb-0 {
    padding-bottom: 0em;
}

.pl-0 {
    padding-left: 0em;
}

.pt-1 { padding-top: 1em; }
.pr-1 { padding-right: 1em; }
.pb-1 { padding-bottom: 1em; }
.pl-1 { padding-left: 1em; }
.pl-10-4 { padding-left: 10.4em; }

/*=== Margin ===*/

/* Margin general */
.m-0 { margin: 0; }
.m-1 { margin: 1em; }
.m-2 { margin: 2em; }
.m-3 { margin: 3em; }
.m-4 { margin: 4em; }
.m-5 { margin: 5em; }
.m-6 { margin: 6em; }
.m-7 { margin: 7em; }
.m-8 { margin: 8em; }
.m-9 { margin: 9em; }
.m-10 { margin: 10em; }

/* Margin por dirección */
.mt-0 { margin-top: 0em !important; }
.mr-0 { margin-right: 0em !important; }
.mb-0 { margin-bottom: 0em !important; }
.ml-0 { margin-left: 0em !important; }

.mt-1 { margin-top: 1em; }
.mr-1 { margin-right: 1em; }
.mb-1 { margin-bottom: 1em; }
.ml-1 { margin-left: 1em; }

/*=== Variantes Responsive ===*/

/* Pequeñas (≤ 576px) */
@media (max-width: 576px) {
  .p-sm-0 { padding: 0; }
  .p-sm-2 { padding: 2em; }
  .pl-sm-0 { padding: 0em; }
  .m-sm-0 { margin: 0; }
  .m-sm-2 { margin: 2em; }
}

/* Medianas (≤ 768px) */
@media (max-width: 768px) {
  .p-md-0 { padding: 0; }
  .p-md-3 { padding: 3em; }
  .pl-md-0 { padding: 0em; }
  .m-md-0 { margin: 0; }
  .m-md-3 { margin: 3em; }
}

/* Grandes (≤ 1024px) */
@media (max-width: 1024px) {
  .p-lg-0 { padding: 0; }
  .p-lg-4 { padding: 4em; }
  .pl-lg-0 { padding: 0em; }
  .m-lg-0 { margin: 0; }
  .m-lg-4 { margin: 4em; }
}

/*****************************************************************************
*  Boton principal con todos sus estados
******************************************************************************/
.primary-button {
    text-align: center;
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #1B1E1C !important;
    padding: 12px 32px;
    border: 1px solid #996C00;
    border-radius: 5px;
    background: none;
    background-color: #FFC845;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 14.375em;
    height: auto;
    margin: 0.4em auto 0.50em auto;
    cursor: pointer;
    transition: all 0.5s ease;
    text-decoration: none !important;
}

    .primary-button:hover {
        font-family: Verdana,Arial,sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #1B1E1C !important;
        padding: 12px 32px;
        border: 1px solid #996C00;
        border-radius: 5px;
        background: none;
        background-color: #F2B521;
        display: inline-block;
        width: 14.375em;
        max-height: 5em;
        margin: 0.4em auto 0.50em auto;
        cursor: pointer;
        transition: all 0.5s ease;
        text-decoration: none !important;
    }

    .primary-button:disabled {
        font-family: Verdana,Arial,sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #1B1E1C !important;
        padding: 12px 32px;
        border: 1px solid #FFC845;
        border-radius: 5px;
        background: none;
        background-color: #F6F6F6;
        display: inline-block;
        width: 14.375em;
        height: auto;
        margin: 0.4em auto 0.50em auto;
        cursor: pointer;
        transition: all 0.5s ease;
        text-decoration: none !important;
    }

    .primary-button:focus {
        font-family: Verdana,Arial,sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #1B1E1C !important;
        padding: 12px 32px;
        border-radius: 5px;
        border: 1px solid #996C00;
        padding: 12px 32px;
        outline: 2px dotted #A7A8A9;
        outline-offset: 2px;
        background: none;
        background-color: #FFC845;
        display: inline-block;
        width: 14.375em;
        height: auto;
        margin: 0.4em auto 0.50em auto;
        cursor: pointer;
        text-decoration: none !important;
    }
/*======================*/

/*****************************************************************************
*  Boton secundario con todos sus estados
******************************************************************************/

.secondary-button{
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #1B1E1C;

    padding: 12px 32px;
    border: 1px solid #996C00;
    border-radius: 5px;

    background: none;
    background-color: #FFFFFF;
    

    display: inline-block;
    width: 14.375em;
    height: auto;
    margin: 0.4em auto 0.50em auto;
    
    cursor: pointer;
    
    transition: all 0.5s ease;
}

.secondary-button:hover{
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #1B1E1C;

    padding: 12px 32px;
    border: 1px solid #996C00;
    border-radius: 5px;

    background: none;
    background-color: #FFFFFF;
    

    display: inline-block;
    width: 14.375em;
    height: auto;
    margin: 0.4em auto 0.50em auto;
    
    cursor: pointer;
    transition: all 0.5s ease;
}

.secondary-button:disabled{
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #1B1E1C;

    padding: 12px 32px;
    border: 1px solid #7A7A7A;
    border-radius: 5px;

    background: none;
    background-color: #FFFFFF;
    

    display: inline-block;
    width: 14.375em;
    height: auto;
    margin: 0.4em auto 0.50em auto;
    
    cursor: pointer;
}

.secondary-button:focus{
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #202020;

    border: 1px solid #996C00;
    padding: 12px 32px;
    outline: 2px dotted #A7A8A9;
    outline-offset: 2px;   

    background: none;
    background-color: #FFFFFF;

    display: inline-block;
    width: 14.375em;
    height: auto;
    margin: 0.4em auto 0.50em auto;
    
    cursor: pointer;
}

/*======================*/

/*****************************************************************************
*  Ancho variable de los botones
******************************************************************************/
.btn-wide {
  width: 100%;
}

.btn-wide:hover {
  width: 100%;
}

.btn-wide:focus{
  width: 100%;
}

.btn-wide:disabled{
  width: 100%;
}
/*======================*/

.btn-small {
    width: 4.25em;
    height: 1.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
    
}

.btn-small:hover {
    width: 4.25em;
    height: 1.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
   
}

.btn-small:focus{
    width: 4.25em;
    height: 1.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
    
}

.btn-small:disabled{
    width: 4.25em;
    height: 1.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
}
/*======================*/
.btn-auto {
  width: auto;
}

.btn-auto:hover {
  width: auto;
}

.btn-auto:focus{
  width: auto;
}

.btn-auto:disabled{
  width: auto;
}
/*======================*/
.btn-medium {
    width: 9.563em;
    height: 2.688em;
    opacity: 1;
    padding: 0;
    font-size: 16px;
    margin-right: 1.5em;
}

.btn-medium:hover {
    width: 9.563em;
    height: 2.688em;
    opacity: 1;
    padding: 0;
    font-size: 16px;
    margin-right: 1.5em
}

.btn-medium:focus{
    width: 9.563em;
    height: 2.688em;
    opacity: 1;
    padding: 0;
    font-size: 16px;
    margin-right: 1.5em;
    outline: 2px dotted #A7A8A9;
    outline-offset: 2px;   
}

.btn-medium:disabled{
    width: 9.563em;
    height: 2.688em;
    opacity: 1;
    padding: 0;
    font-size: 16px;
    margin-right: 1.5em}

/*****************************************************************************
*  Boton redondo
******************************************************************************/
.btn-rounded{
  border-radius: 24px;
}

.btn-rounded:hover {
  border-radius: 24px;
}

.btn-rounded:focus{
  border-radius: 24px;
}

.btn-rounded:disabled{
  border-radius: 24px;
}

/*======================*/

/* Pantallas pequeñas (≤ 576px) */
@media (max-width: 576px) {
  .btn-sm-wide {
    width: 100%;
  }

  .btn-sm-auto {
    width: auto;
  }
}

/* Pantallas medianas (≤ 768px) */
@media (max-width: 768px) {
  .btn-md-wide {
    width: 100%;
  }

  .btn-md-auto {
    width: auto;
  }
}
/*======================*/


/*****************************************************************************
*  Utilidades Flexbox
*  Clases base y variantes responsive para layouts flexibles
******************************************************************************/

/*=== Clases base ===*/

/* Contenedor flex general */
.flex {
  display: flex;
}

/* Dirección de los elementos */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}


/* Alineación horizontal (main axis) */
.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

/* Alineación vertical (cross axis) */
.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-stretch {
  align-items: stretch;
}

/* Control del ajuste de elementos */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/*=== Variantes Responsive ===*/

/* Pantallas pequeñas (≤ 576px) */
@media (max-width: 576px) {
  .flex-sm-column {
    flex-direction: column;
  }

  .flex-sm-row {
    flex-direction: row;
  }

  .flex-sm-center {
    justify-content: center;
    align-items: center;
  }
  
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
}

/* Pantallas medianas (≤ 768px) */
@media (max-width: 768px) {
  .flex-md-column {
    flex-direction: column;
  }

  .flex-md-row {
    flex-direction: row;
  }

  .flex-md-center {
    justify-content: center;
    align-items: center;
  }
  
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
}

/* Pantallas grandes (≤ 1024px) */
@media (max-width: 1024px) {
  .flex-lg-row {
    flex-direction: row;
  }

  .flex-lg-column {
    flex-direction: column;
  }

  .flex-lg-center {
    justify-content: center;
    align-items: center;
  }
}

/*****************************************************************************
*  Utilidades de Espaciado (Gap)
*  Clases para controlar el espacio entre elementos flex o grid
******************************************************************************/

/*=== Clases base ===*/

/* Sin espacio entre elementos */
.gap-0 {
  gap: 0;
}

/* Espacios pequeños */
.gap-xs {
  gap: 0.25rem; /* 4px */
}

.gap-sm {
  gap: 0.5rem; /* 8px */
}

/* Espacio estándar / medio */
.gap-md {
  gap: 1rem; /* 16px */
}

/* Espacios grandes */
.gap-lg {
  gap: 1.5rem; /* 24px */
}

.gap-xl {
  gap: 2rem; /* 32px */
}

/*=== Variantes Responsive ===*/

/* Pantallas pequeñas (≤ 576px) */
@media (max-width: 576px) {
  .gap-sm-0 {
    gap: 0;
  }

  .gap-sm-md {
    gap: 1rem;
  }

  .gap-sm-lg {
    gap: 1.5rem;
  }
}

/* Pantallas medianas (≤ 768px) */
@media (max-width: 768px) {
  .gap-md-0 {
    gap: 0;
  }

  .gap-md-md {
    gap: 1rem;
  }

  .gap-md-lg {
    gap: 1.5rem;
  }
}

/* Pantallas grandes (≤ 1024px) */
@media (max-width: 1024px) {
  .gap-lg-0 {
    gap: 0;
  }

  .gap-lg-md {
    gap: 1rem;
  }

  .gap-lg-xl {
    gap: 2rem;
  }
}


/*Log out button*/
.logoutBtn {
    width: 4.25em ;
    height: 2.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
    display:flex;
    justify-content: center;
    align-items: center;
    top:1em;
    position:relative;
    left:1.4em;
}
.logoutBtn:focus {
    width: 4.25em;
    height: 2.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1em;
    position: relative;
    left: 1.4em;
}
.logoutBtn:hover {
    width: 4.25em;
    height: 2.963em;
    opacity: 1;
    padding: 0;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1em;
    position: relative;
    left: 1.4em;
}



/*skitp stop content button sytles*/
.buttonMainContent {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1B1E1C !important;
    background-color: #FFC845;
    border: 2px solid #1B1E1C;
    width: 180px;
    height: 44px;
    position: fixed;
    top: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-decoration: none !important;
}