:root {
    --blue-main: #1B1F3D;
    --blue-secondary: #45509C;
    --orange-main: #F68321;
    --orange-secondary: #FDC54C;
    --bg-custom-dark: var(--blue-main);
    --color-custom-dark: #ffffff;
    --bg-custom-light: #ffffff;
    --color-custom-light: #181C32;
}

/* -------------------------------------------------------------------------- */
/*                                    Link                                    */
/* -------------------------------------------------------------------------- */
.lt-option-selected {
    background: var(--color-custom-main)!important;
}

/* -------------------------------------------------------------------------- */
/*                                    Otros                                   */
/* -------------------------------------------------------------------------- */
.scrollbar-linkdepago::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    /* display: none;  Ocultar scroll */
}

.scrollbar-linkdepago::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.scrollbar-linkdepago::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* Cambiamos el fondo cuando esté en active */
.scrollbar-linkdepago::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}
/* Ponemos un color de fondo y redondeamos las esquinas del track */
.scrollbar-linkdepago::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}
/* Cambiamos el fondo cuando esté en active o hover */
.scrollbar-linkdepago::-webkit-scrollbar-track:hover,
.scrollbar-linkdepago::-webkit-scrollbar-track:active {
background: #d4d4d4;
}

.scrollbar-linkdepago {
    height: auto !important;
    max-height: 700px !important;
    overflow-y: auto !important;
}

/* -------------------------------------------------------------------------- */
/*                                   Fondos                                   */
/* -------------------------------------------------------------------------- */
/* Principal */
.bg-custom-main{
    background-color: var(--color-custom-main);
}
.bg-custom-main.--text-main *{
    color: var(--color-custom-secondary)!important;
}
.bg-custom-main.--text-main .svg-icon svg g [fill] {
    fill: var(--color-custom-secondary)!important;
}
.bg-custom-main:hover{
    background-color: var(--color-custom-secondary);
}
.bg-custom-main.--no-hover:hover{
    background-color: var(--color-custom-main);
}
.bg-custom-main.--text-main:hover *{
    color: var(--color-custom-main)!important;
}
.bg-custom-main.--text-main:hover .svg-icon svg g [fill] {
    fill: var(--color-custom-main)!important;
}
.bg-custom-main.--text-main.--no-hover:hover *{
    color: var(--color-custom-secondary)!important;
}
.bg-custom-main.--text-main.--no-hover:hover .svg-icon svg g [fill] {
    fill: var(--color-custom-secondary)!important;
}

/* Secundario */
.bg-custom-secondary{
    background-color: var(--color-custom-secondary);
}
.bg-custom-secondary.--text-secondary *{
    color: var(--color-custom-main)!important;
}
.bg-custom-secondary.--text-secondary .svg-icon svg g [fill] {
    fill: var(--color-custom-main)!important;
}
.bg-custom-secondary:hover{
    background-color: var(--color-custom-main);
}
.bg-custom-secondary.--no-hover:hover{
    background-color: var(--color-custom-secondary);
}
.bg-custom-main.--text-secondary:hover *{
    color: var(--color-custom-secondary)!important;
}
.bg-custom-main.--text-secondary:hover .svg-icon svg g [fill] {
    fill: var(--color-custom-secondary)!important;
}
.bg-custom-main.--text-secondary.--no-hover:hover *{
    color: var(--color-custom-main)!important;
}
.bg-custom-main.--text-secondary.--no-hover:hover .svg-icon svg g [fill] {
    fill: var(--color-custom-main)!important;
}

/* -------------------------------------------------------------------------- */
/*                                    Texto                                   */
/* -------------------------------------------------------------------------- */
.text-custom-main{
    color: var(--color-custom-main)!important;
}

.text-custom-secondary{
    color: var(--color-custom-secondary)!important;
}

a.text-custom-main:hover,
a.text-custom-secondary:hover {
    opacity: 0.8;
}

.btn-simple-secundary{
    border: 2px solid var(--color-custom-main);
    background-color: var(--color-custom-main);
    color: var(--color-custom-secondary)!important;
}

.btn-simple-secundary i,
.btn-simple-secundary .svg-icon svg g [fill] {
    color: var(--color-custom-secondary)!important;
    fill: var(--color-custom-secondary)!important;
}

.btn-simple-secundary:hover,
.btn-simple-secundary:hover i,
.btn-simple-secundary:hover .svg-icon svg g [fill] {
    background-color: var(--color-custom-secondary);
    color: var(--color-custom-main)!important;
    fill: var(--color-custom-main)!important;
}
/* -------------------------------------------------------------------------- */
/*                       ESTILOS BOTÓN GROW SKEW REVERSE                      */
/* -------------------------------------------------------------------------- */
.btn-grow-skew-reverse-main {
    background: var(--color-custom-main); /* color de fondo */
    color: var(--color-custom-secondary)!important; /* color de fuente */
    border: 2px solid var(--color-custom-main); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-grow-skew-reverse-main .svg-icon svg g [fill],
.btn-grow-skew-reverse-main i {
    color: var(--color-custom-secondary)!important;
    fill: var(--color-custom-secondary)!important;
}
.btn-grow-skew-reverse-main:hover,
.btn-grow-skew-reverse-main:hover .svg-icon svg g [fill],
.btn-grow-skew-reverse-main:hover i {
    color: var(--color-custom-main)!important;/* color de fuente hover */
    fill: var(--color-custom-main)!important;
}
.btn-grow-skew-reverse-main::after {
    content: "";
    background: var(--color-custom-secondary); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease;
}
.btn-grow-skew-reverse-main:hover::after {
    transition: all 0.3s ease-out;
    transform: skewX(45deg) scale(1, 1);
}

/* -------------------------------------------------------------------------- */
/*                   ESTILOS BOTÓN GROW SKEW REVERSE OUTLINE                  */
/* -------------------------------------------------------------------------- */
.btn-outline-grow-skew-reverse-main {
    background: var(--color-custom-secondary); /* color de fondo */
    color: var(--color-custom-main)!important; /* color de fuente */
    border: 2px solid var(--color-custom-secondary); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-outline-grow-skew-reverse-main .svg-icon svg g [fill],
.btn-outline-grow-skew-reverse-main i {
    color: var(--color-custom-main)!important;
    fill: var(--color-custom-main)!important;
}
.btn-outline-grow-skew-reverse-main:hover,
.btn-outline-grow-skew-reverse-main:hover .svg-icon svg g [fill],
.btn-outline-grow-skew-reverse-main:hover i {
    color: var(--color-custom-secondary)!important;/* color de fuente hover */
    fill: var(--color-custom-secondary)!important;
}
.btn-outline-grow-skew-reverse-main::after {
    content: "";
    background: var(--color-custom-main); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease;
}
.btn-outline-grow-skew-reverse-main:hover::after {
    transition: all 0.3s ease-out;
    transform: skewX(45deg) scale(1, 1);
}

/* -------------------------------------------------------------------------- */
/*                           ESTILOS BOTÓN GROW BOX                           */
/* -------------------------------------------------------------------------- */
.btn-grow-box-main {
    background: var(--color-custom-main); /* color de fondo */
    color: var(--color-custom-secondary)!important; /* color de fuente */
    border: 2px solid var(--color-custom-main); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-grow-box-main .svg-icon svg g [fill],
.btn-grow-box-main i {
    color: var(--color-custom-secondary);
    fill: var(--color-custom-secondary);
}
.btn-grow-box-main:hover,
.btn-grow-box-main:hover .svg-icon svg g [fill],
.btn-grow-box-main:hover i {
    color: var(--color-custom-main)!important;/* color de fuente hover */
    fill: var(--color-custom-main)!important;
}
.btn-grow-box-main::after {
    content: "";
    background: var(--color-custom-secondary); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0, 0);
    transition: all 0.3s ease;
}
.btn-grow-box-main:hover::after {
    transition: all 0.3s ease-out;
    transform: scale(1, 1);
}

/* -------------------------------------------------------------------------- */
/*                       ESTILOS BOTÓN GROW BOX OUTLINE                       */
/* -------------------------------------------------------------------------- */
.btn-outline-grow-box-main {
    background: var(--color-custom-secondary); /* color de fondo */
    color: var(--color-custom-main)!important; /* color de fuente */
    border: 2px solid var(--color-custom-secondary); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-outline-grow-box-main .svg-icon svg g [fill],
.btn-outline-grow-box-main i {
    color: var(--color-custom-main)!important;
    fill: var(--color-custom-main)!important;
}
.btn-outline-grow-box-main:hover,
.btn-outline-grow-box-main:hover .svg-icon svg g [fill],
.btn-outline-grow-box-main:hover i {
    color: var(--color-custom-secondary)!important;/* color de fuente hover */
    fill: var(--color-custom-secondary)!important;
}
.btn-outline-grow-box-main::after {
    content: "";
    background: var(--color-custom-main); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0, 0);
    transition: all 0.3s ease;
}
.btn-outline-grow-box-main:hover::after {
    transition: all 0.3s ease-out;
    transform: scale(1, 1);
}

/* -------------------------------------------------------------------------- */
/*                           ESTILOS BOTÓN GROW SPIN                          */
/* -------------------------------------------------------------------------- */
.btn-grow-spin-main {
    background: var(--color-custom-main); /* color de fondo */
    color: var(--color-custom-secondary)!important; /* color de fuente */
    border: 2px solid var(--color-custom-main); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-grow-spin-main .svg-icon svg g [fill],
.btn-grow-spin-main i {
    color: var(--color-custom-secondary)!important;
    fill: var(--color-custom-secondary)!important;
}
.btn-grow-spin-main:hover,
.btn-grow-spin-main:hover .svg-icon svg g [fill],
.btn-grow-spin-main:hover i {
    color: var(--color-custom-main)!important;/* color de fuente hover */
    fill: var(--color-custom-main)!important;
}
.btn-grow-spin-main::after {
    content: "";
    background: var(--color-custom-secondary); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0, 0) rotate(-180deg);
    transition: all 0.3s ease;
}
.btn-grow-spin-main:hover::after {
    transition: all 0.3s ease-out;
    transform: scale(1, 1) rotate(0deg);
}

/* -------------------------------------------------------------------------- */
/*                       ESTILOS BOTÓN GROW SPIN OUTLINE                      */
/* -------------------------------------------------------------------------- */
.btn-outline-grow-spin-main {
    background: var(--color-custom-secondary); /* color de fondo */
    color: var(--color-custom-main)!important; /* color de fuente */
    border: 2px solid var(--color-custom-secondary); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-outline-grow-spin-main .svg-icon svg g [fill],
.btn-outline-grow-spin-main i {
    color: var(--color-custom-main)!important;
    fill: var(--color-custom-main)!important;
}
.btn-outline-grow-spin-main:hover,
.btn-outline-grow-spin-main:hover .svg-icon svg g [fill],
.btn-outline-grow-spin-main:hover i {
    color: var(--color-custom-secondary)!important;/* color de fuente hover */
    fill: var(--color-custom-secondary)!important;
}
.btn-outline-grow-spin-main::after {
    content: "";
    background: var(--color-custom-main); /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0, 0) rotate(-180deg);
    transition: all 0.3s ease;
}
.btn-outline-grow-spin-main:hover::after {
    transition: all 0.3s ease-out;
    transform: scale(1, 1) rotate(0deg);
}

/* -------------------------------------------------------------------------- */
/*                          ESTILOS BOTÓN SLIDE CLOSE                         */
/* -------------------------------------------------------------------------- */
.btn-slide-close-main {
    background: var(--color-custom-main); /* color de fondo */
    color: var(--color-custom-secondary)!important; /* color de fuente */
    border: 2px solid var(--color-custom-main); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-slide-close-main .svg-icon svg g [fill],
.btn-slide-close-main i {
    color: var(--color-custom-secondary);
    fill: var(--color-custom-secondary);
}
.btn-slide-close-main:before, .btn-slide-close-main:after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: -50%;
    background-color: var(--color-custom-secondary); /* color de fondo hover */
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.btn-slide-close-main:after {
    left: 100%;
}
.btn-slide-close-main:hover,
.btn-slide-close-main:hover .svg-icon svg g [fill],
.btn-slide-close-main:hover i {
    color: var(--color-custom-main)!important; /* color de fuente hover */
    fill: var(--color-custom-main)!important;
}
.btn-slide-close-main:hover:before {
    left: 0;
}
.btn-slide-close-main:hover:after {
    left: 50%;
}

/* -------------------------------------------------------------------------- */
/*                      ESTILOS BOTÓN SLIDE CLOSE OUTLINE                     */
/* -------------------------------------------------------------------------- */
.btn-outline-slide-close-main {
    background: var(--color-custom-secondary); /* color de fondo */
    color: var(--color-custom-main)!important; /* color de fuente */
    border: 2px solid var(--color-custom-secondary); /* tamaño y color de borde */
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.btn-outline-slide-close-main .svg-icon svg g [fill],
.btn-outline-slide-close-main i {
    color: var(--color-custom-main);
    fill: var(--color-custom-main);
}
.btn-outline-slide-close-main:before, .btn-outline-slide-close-main:after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: -50%;
    background-color: var(--color-custom-main); /* color de fondo hover */
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.btn-outline-slide-close-main:after {
    left: 100%;
}
.btn-outline-slide-close-main:hover,
.btn-outline-slide-close-main:hover .svg-icon svg g [fill],
.btn-outline-slide-close-main:hover i {
    color: var(--color-custom-secondary)!important; /* color de fuente hover */
    fill: var(--color-custom-secondary)!important;
}
.btn-outline-slide-close-main:hover:before {
    left: 0;
}
.btn-outline-slide-close-main:hover:after {
    left: 50%;
}