:root {
    /* ↓ Legacy ↓ */
    --base-header-bg-color: #8A8D8F;
    --base-bg-color: #0464AD;
    --base-fg-color: #fff;
    --font-color: #3f4758;
    --font-color: #3f4758;
    --light-gray: #ebebeb;
    --white: #fff;
    --primary-color: #8A8D8F;
    --primary-green: #82A632;
    --primary-dark-gray: #39654E;
    --ar-font-sans-serif: "Inter", sans-serif;
    /* ↑ Legacy ↑ */
    /* ↓ New ↓ */
    /* ↓ Elevations ↓ */
    --color-level-0: #FFFFFF;
    --color-level-1: #F7F9FD;
    --color-level-2: #F2F4F7;
    --color-level-3: #E9EBEF;
    /* ↑ Elevations ↑ */
    /* ↓ Principals ↓ */
    --color-variant-border: #E5E5E5;
    --color-input-border: #B1B1B1;
    --color-grey-60: #8F9191; /* NEED AN OFICIAL NAME */
    --color-natural-border: #7F7F7F;
    --color-principal-grey: #8F9191;
    --color-grey-10: #181C1D; /* NEED AN OFICIAL NAME */
    --color-secondary-text: #5F6060; /* NEED AN OFICIAL NAME */
    /* ↑ Principals ↑ */
    /* ↓ Complementaries ↓ */
    --color-primary: #82A632;
    --color-primary-darker: #6F8C1F;
    --color-secondary: #223D72;
    --color-tertiary: #B28F45;
    --color-on-surface: #323232;
    /* ↑ Complementaries ↑ */
    /* ↓ States ↓ */
    --color-active: #82A632;
    --color-active-container: #DCF2EA;
    --color-error: #BD1204;
    --color-error-container: #FFE9E5;
    --color-warning: #EF9801;
    --color-warning-container: #FFF7EB;
    --color-inactive: #BBBBBB;
    --color-info-container: #DDEDFF;
    /* ↑ States ↑ */
    /* ↓ Support ↓ */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-support-1: #8292AA;
    --color-support-2: #9D8AA7;
    --color-support-3: #879674;
    --color-support-4: #B1886E;
    --color-support-5: #9E9065;
    --color-support-6: #B08591;
    --color-support-7: #75969D;
    --color-support-8: #45A8BA;
    --color-support-9: #E9949B;
    --color-support-10: #B4A3D6;
    --color-support-11: #91B492;
    --color-support-12: #92CCFF;
    --color-support-13: #FEB0CD;
    --color-support-14: #75D5DC;
    --color-primary-transparent: rgba(130, 166, 50, 0.5);
    --color-black-transparent: rgba(0, 0, 0, 0.2);
    --color-on-surface-transparent: rgba(50, 50, 50, 0.1);
    --color-light-surface-transparent: rgba(247, 246, 251, 0.1);
    --color-secondary-transparent: #223D721F;
    /* ↑ States ↑ */
    /* ↑ New ↑ */
    /* ↓ Icons ↓ */
    --icon-font-family: "ib-icomoon"; /* Icon font family */
    --icon-chevron-up: "\e967"; /* Unicode from .ib-chevron-up */
    --icon-chevron-down: "\ea6a"; /* Unicode from .ib-chevron-down */
    --icon-sort-up: "\e98f"; /* Unicode from .ib-sort-up */
    --icon-sort-down: "\e990"; /* Unicode from .ib-sort-down */
    --icon-simple-check: "\ea6c"; /* Unicode from .ib-simple-check */
    --icon-minus: "\ea6d"; /* Unicode from .ib-minus */
    --icon-star-empty: "\e92b"; /* Unicode from .ib-star-empty */
    --icon-star-filled: "\e92c"; /* Unicode from .ib-star-filled */
    /* ↑ Icons ↑ */
}

.background-level--0 {
    --background-color-level: var(--color-level-0);
}

.background-level--1 {
    --background-color-level: var(--color-level-1);
}

.background-level--2 {
    --background-color-level: var(--color-level-2);
}

.background-level--3 {
    --background-color-level: var(--color-level-3);
}
h1 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.5;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.5;
}

h3 {
    font-size: 16px;
    margin-bottom: 0;
    line-height: 1.5;
}

h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-text);
    margin-bottom: 0;
    line-height: 1.5;
}

h5, h6 {
    font-weight: 600; /* Semibold for headings or specific classes */
    margin-bottom: 0;
    line-height: 1.5;
}

.title-button__container {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.title-line__container {
    margin-bottom: 32px;
}

.title-line__button {
    margin-bottom: 17px;
}

.title-line__button:has(h1.title-line__title) {
    margin-bottom: 30px;
}

.title-line {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--color-variant-border);
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.title-line__title {
    color: var(--color-on-surface);
}
.title__instruction-message {
    display: block;
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin: 16px 0 32px 0;
}

.subtitle-line__container {
    margin-bottom: 16px;
}

.subtitle-line {
    width: 100%;
}

.subtitle-line--small {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-secondary-text);
    border-bottom: 1px solid var(--color-variant-border);
    padding-bottom: 3px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    h1 {
        font-size: 16px;
    }
}
.grid__container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 32px;
    width: 100%;
}

.grid__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grid__col-1 {
    grid-column: span 1;
}

.grid__col-2 {
    grid-column: span 2;
}

.grid__col-3 {
    grid-column: span 3;
}

.grid__col-4 {
    grid-column: span 4;
}

.grid__col-5 {
    grid-column: span 5;
}

.grid__col-6 {
    grid-column: span 6;
}

.grid__col-7 {
    grid-column: span 7;
}

.grid__col-8 {
    grid-column: span 8;
}

.grid__col-9 {
    grid-column: span 9;
}

.grid__col-10 {
    grid-column: span 10;
}

.grid__col-11 {
    grid-column: span 11;
}

.grid__col-12 {
    grid-column: span 12;
}

.grid__col-full {
    grid-column: 1 / -1;
}

@media (max-width: 375px) {
    .grid__container {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .grid__col-1,
    .grid__col-2,
    .grid__col-3,
    .grid__col-4,
    .grid__col-5,
    .grid__col-6,
    .grid__col-7,
    .grid__col-8,
    .grid__col-9,
    .grid__col-10,
    .grid__col-11,
    .grid__col-12 {
        grid-column: span 12;
    }
}

@media (min-width: 576px) {
    .grid__col-sm-1 {
        grid-column: span 1;
    }

    .grid__col-sm-2 {
        grid-column: span 2;
    }

    .grid__col-sm-3 {
        grid-column: span 3;
    }

    .grid__col-sm-4 {
        grid-column: span 4;
    }

    .grid__col-sm-5 {
        grid-column: span 5;
    }

    .grid__col-sm-6 {
        grid-column: span 6;
    }

    .grid__col-sm-7 {
        grid-column: span 7;
    }

    .grid__col-sm-8 {
        grid-column: span 8;
    }

    .grid__col-sm-9 {
        grid-column: span 9;
    }

    .grid__col-sm-10 {
        grid-column: span 10;
    }

    .grid__col-sm-11 {
        grid-column: span 11;
    }

    .grid__col-sm-12 {
        grid-column: span 12;
    }
}

/*@media (min-width: 768px) {
    .grid__col-md-1 {
        grid-column: span 1;
    }

    .grid__col-md-2 {
        grid-column: span 2;
    }

    .grid__col-md-3 {
        grid-column: span 3;
    }

    .grid__col-md-4 {
        grid-column: span 4;
    }

    .grid__col-md-5 {
        grid-column: span 5;
    }

    .grid__col-md-6 {
        grid-column: span 6;
    }

    .grid__col-md-7 {
        grid-column: span 7;
    }

    .grid__col-md-8 {
        grid-column: span 8;
    }

    .grid__col-md-9 {
        grid-column: span 9;
    }

    .grid__col-md-10 {
        grid-column: span 10;
    }

    .grid__col-md-11 {
        grid-column: span 11;
    }

    .grid__col-md-12 {
        grid-column: span 12;
    }
}*/

/*@media (min-width: 992px) {
    .grid__col-lg-1 {
        grid-column: span 1;
    }

    .grid__col-lg-2 {
        grid-column: span 2;
    }

    .grid__col-lg-3 {
        grid-column: span 3;
    }

    .grid__col-lg-4 {
        grid-column: span 4;
    }

    .grid__col-lg-5 {
        grid-column: span 5;
    }

    .grid__col-lg-6 {
        grid-column: span 6;
    }

    .grid__col-lg-7 {
        grid-column: span 7;
    }

    .grid__col-lg-8 {
        grid-column: span 8;
    }

    .grid__col-lg-9 {
        grid-column: span 9;
    }

    .grid__col-lg-10 {
        grid-column: span 10;
    }

    .grid__col-lg-11 {
        grid-column: span 11;
    }

    .grid__col-lg-12 {
        grid-column: span 12;
    }
}*/

/*@media (min-width: 1200px) {
    .grid__col-xl-1 {
        grid-column: span 1;
    }

    .grid__col-xl-2 {
        grid-column: span 2;
    }

    .grid__col-xl-3 {
        grid-column: span 3;
    }

    .grid__col-xl-4 {
        grid-column: span 4;
    }

    .grid__col-xl-5 {
        grid-column: span 5;
    }

    .grid__col-xl-6 {
        grid-column: span 6;
    }

    .grid__col-xl-7 {
        grid-column: span 7;
    }

    .grid__col-xl-8 {
        grid-column: span 8;
    }

    .grid__col-xl-9 {
        grid-column: span 9;
    }

    .grid__col-xl-10 {
        grid-column: span 10;
    }

    .grid__col-xl-11 {
        grid-column: span 11;
    }

    .grid__col-xl-12 {
        grid-column: span 12;
    }
}*/

/*@media (min-width: 1400px) {
    .grid__col-xxl-1 {
        grid-column: span 1;
    }

    .grid__col-xxl-2 {
        grid-column: span 2;
    }

    .grid__col-xxl-3 {
        grid-column: span 3;
    }

    .grid__col-xxl-4 {
        grid-column: span 4;
    }

    .grid__col-xxl-5 {
        grid-column: span 5;
    }

    .grid__col-xxl-6 {
        grid-column: span 6;
    }

    .grid__col-xxl-7 {
        grid-column: span 7;
    }

    .grid__col-xxl-8 {
        grid-column: span 8;
    }

    .grid__col-xxl-9 {
        grid-column: span 9;
    }

    .grid__col-xxl-10 {
        grid-column: span 10;
    }

    .grid__col-xxl-11 {
        grid-column: span 11;
    }

    .grid__col-xxl-12 {
        grid-column: span 12;
    }
}*/

/* Offset classes (optional - for spacing) */
.grid__offset-1 {
    grid-column-start: 2;
}

.grid__offset-2 {
    grid-column-start: 3;
}

.grid__offset-3 {
    grid-column-start: 4;
}

.grid__offset-4 {
    grid-column-start: 5;
}

.grid__offset-5 {
    grid-column-start: 6;
}

.grid__offset-6 {
    grid-column-start: 7;
}

/* Utility classes for alignment */
.grid__container--center {
    justify-items: center;
}

.grid__container--start {
    justify-items: start;
}

.grid__container--end {
    justify-items: end;
}

.grid__container--stretch {
    justify-items: stretch;
}

/* Gap modifiers */
.grid__container--gap-sm {
    gap: 8px;
}

.grid__container--gap-md {
    gap: 16px;
}

.grid__container--gap-lg {
    gap: 24px;
}

.grid__container--gap-xl {
    gap: 32px;
}
/* ↓ Form Container ↓ */
.form__container {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}   

.form__row-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.form__container.form__container-max-width,
.form__row-container.form__container-max-width {
    width: 100%;
}

/* ESTO EXISTIA ANTES, SE CAMBIO POR LAS DOS REGLAS DEBAJO EL COMENTARIO EXISTE EN LO QUE SE VALIDA, 
    HECHO EL 1-8-25, SI SE COLOCA COMO ANTES HAY QUE VALIDAR LA PANTALLA DE DataStepInfo EN INTERNCIONALES
    YA QUE ESTA PANTALLA SE AFECTA POR LAS MONEDAS OCUPAR TODO EL ANCHO O EL CENTRO
*/
/*.form__container .form__input-container,
.form__container .form__input-select-container,
.form__container .form__input-radio-box-container,
.form__container .form__input-radio-group-container
.form__row-container .form__input-container,
.form__row-container .form__input-select-container,
.form__row-container .form__input-radio-box-container,
.form__row-container .form__input-radio-group-container {
    width: 360px;
}*/

.form__container > .form__input-container,
.form__container > .form__input-select-container,
.form__container > .form__input-radio-box-container,
.form__container > .form__input-radio-group-container {
    width: min(calc(100vw - 50px), 360px);
}

.form__row-container > .form__input-container,
.form__row-container > .form__input-select-container,
.form__row-container > .form__input-radio-box-container,
.form__row-container > .form__input-radio-group-container {
    flex: 1 1 calc(50% - 16px);
    min-width: min(calc(100vw - 50px), 360px);
}

/*.form__row-container.form__input-no-min-width > .form__input-container,
.form__row-container.form__input-no-min-width > .form__input-select-container,
.form__row-container.form__input-no-min-width > .form__input-radio-box-container,
.form__row-container.form__input-no-min-width > .form__input-radio-group-container {
    min-width: auto !important;
}*/

.form__container.form__input-max-width {
    align-items: start;
    flex: 1;
}

.form__container.form__input-max-width .form__input-container,
.form__container.form__input-max-width .form__input-select-container,
.form__container.form__input-max-width .form__input-radio-box-container,
.form__row-container.form__input-max-width .form__input-container,
.form__row-container.form__input-max-width .form__input-select-container,
.form__row-container.form__input-max-width .form__input-radio-box-container {
    width: 100%;
}

.form__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 48px;
    gap: 24px;
}
.form__input-group-container {
    display: flex;
    align-items: center;
    gap: 16px;
}
.form__input-group-container.form__input-group-container__align-start {
    align-items: start;
    flex: 1;
}

.form__input-group-container .form__input-container,
.form__input-group-container .form__input-select-container,
.form__input-group-container .form__input-checkbox-container,
.form__input-group-container .form__input-radio-box-container {
    flex: 1;
    width: 100%;
}

.form__input-group-item {
    color: var(--color-input-border);
    font-size: 16px;
}
.form__input-group-item--bigger {
    font-size: 25px !important;
}

.form__input-one-column-width {
    max-width: 360px;
    width: 100%;
}
.form__input-two-column-width {
    max-width: calc(360px * 2 + 32px);
}
/* ↑ Form Container ↑ */

/* ↓ Inputs and Label Background ↓ */
.form__input,
.form__label,
.form__input:-webkit-autofill {
    background-color: var(--background-color-level, var(--color-level-0)) !important;
    box-shadow: 0 0 0px 1000px var(--background-color-level, var(--color-level-0)) inset !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--background-color-level, var(--color-level-0)) inset !important;
}
/* ↑ Inputs Label Background ↑ */

/* ↓ Inputs Elements ↓ */
.form__input-container {
    position: relative;
}

.form__input {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 6px 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-on-surface);
    -webkit-text-fill-color: var(--color-on-surface);
    background-clip: padding-box;
    border: 1px solid var(--color-input-border);
    border-radius: 12px !important;
}

textarea.form__input {
    height: 67px;
}

input[type="time"].form__input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto
}

.form__input:focus {
    outline: 0;
}

.form__input:focus:not(:disabled):not([readonly]):not(.input-validation-error):not(.form__input--error):not(.form__input--success),
.form__input:focus.sii-datepicker[readonly] {
    border-color: var(--color-secondary);
}

.form__label {
    font-size: 11px;
    color: var(--color-natural-border);
    position: absolute;
    top: -10px;
    bottom: 0px;
    left: 12px;
    pointer-events: none;
    transition: all 0.1s ease;
    display: none;
    padding: 0 4px;
    height: fit-content;
}

.form__input-icon {
    font-size: 20px;
    position: absolute;
    top: 12px;
    width: fit-content;
    pointer-events: none;
    color: var(--color-input-border);
}
.no-border.form__input-icon {
    font-size: 20px !important;
}

.form__input-icon--action {
    pointer-events: auto;
    cursor: pointer;
}

.form__input-additional-item {
    font-size: 12px;
    position: absolute;
    top: 14px;
    font-style: normal;
    width: fit-content;
    pointer-events: none;
    color: var(--color-on-surface);
}

.form__input-container > .form__input.form__input-additional-item--right:not([type='time']):not(.sii-datepicker):not(.form__input--line) {
    padding-right: 40px;
}

.form__input-container > .form__input-additional-item--right ~ .form__input-icon,
.form__input-container > .form__input-additional-item--right ~ .form__input-additional-item {
    right: 12px;
}

.form__input-container > .form__input.form__input-additional-item--left:not([type='time']):not(.sii-datepicker):not(.form__input--line) {
    padding-left: 40px;
}

.form__input-container > .form__input-additional-item--left ~ .form__input-icon,
.form__input-container > .form__input-additional-item--left ~ .form__input-additional-item {
    left: 12px;
}

.form__input-select-container > .form__input.form__input-additional-item--right {
    padding-right: 80px;
}

.form__input-select-container > .form__input.form__input-additional-item--right ~ .form__input-icon,
.form__input-select-container > .form__input.form__input-additional-item--right ~ .form__input-additional-item {
    right: 40px;
}

.form__input:focus ~ .form__label,
.form__input:focus ~ .form__input-icon {
    color: var(--color-secondary);
}

.form__label--shown,
.form__input:not(:placeholder-shown) ~ .form__label,
.form__input-container:has(.form__input:not(:placeholder-shown)) > .form__label,
.form__input:focus:not(:disabled):not([readonly]) ~ .form__label {
    display: block;
}

/* Always show label for sii-datepicker inputs when they have form__label--shown class */
.form__input.sii-datepicker ~ .form__label.form__label--shown,
.form__input-container:has(.form__input.sii-datepicker) > .form__label.form__label--shown,
.form__input-container .form__input.sii-datepicker ~ .form__label.form__label--shown {
    display: block !important;
}

/* Always show label for sii-datepicker inputs (sibling selector - broader browser support) */
.form__input.sii-datepicker ~ .form__label {
    display: block !important;
}

/* Always show label for sii-datepicker inputs (container selector - for :has() support) */
.form__input-container:has(.form__input.sii-datepicker) > .form__label {
    display: block !important;
}

.form__input:not(:placeholder-shown)::placeholder,
.form__input:focus:not(:disabled):not([readonly])::placeholder,
.form__input:not(:placeholder-shown)::-webkit-input-placeholder,
.form__input:focus:not(:disabled):not([readonly])::-webkit-input-placeholder {
    opacity: 0;
    color: transparent;
}

.form__input-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

.form__input-group_input {
    width: 100%;
}
/* ↑ Inputs Elements ↑ */

/* ↓ Inputs States ↓ */
.form__input:disabled,
.form__input[readonly]:not(.sii-datepicker),
.form__input:focus[readonly]:not(.sii-datepicker),
.form__input:disabled ~ .form__label,
.form__input[readonly]:not(.sii-datepicker) ~ .form__label,
.form__input:focus[readonly]:not(.sii-datepicker) ~ .form__label,
.form__input:disabled ~ .form__input-icon,
.form__input[readonly]:not(.sii-datepicker) ~ .form__input-icon,
.form__input:focus[readonly]:not(.sii-datepicker) ~ .form__input-icon,
.form__input:disabled ~ .form__input-additional-item,
.form__input[readonly]:not(.sii-datepicker) ~ .form__input-additional-item,
.form__input:focus[readonly]:not(.sii-datepicker) ~ .form__input-additional-item {
    color: var(--color-inactive);
    -webkit-text-fill-color: var(--color-inactive);
    border-color: var(--color-inactive);
}

.form__input.sii-datepicker[readonly].form__input--readonly {
    color: var(--color-inactive);
    -webkit-text-fill-color: var(--color-inactive);
    border-color: var(--color-inactive);
}

.form__input.sii-datepicker[readonly].form__input--readonly ~ .form__label,
.form__input.sii-datepicker[readonly].form__input--readonly ~ .form__input-icon {
    color: var(--color-inactive);
}

.form__input.input-validation-error,
.form__input.form__input--error,
.form__input.input-validation-error:focus,
.form__input.form__input--error:focus {
    border-color: var(--color-error);
}

.form__input.input-validation-error ~ .form__label,
.form__input.form__input--error ~ .form__label,
.form__input.input-validation-error:focus ~ .form__label,
.form__input.form__input--error:focus ~ .form__label,
.form__input.input-validation-error ~ .form__input-icon,
.form__input.form__input--error ~ .form__input-icon,
.form__input.input-validation-error:focus ~ .form__input-icon,
.form__input.form__input--error:focus ~ .form__input-icon {
    color: var(--color-error);
}

.form__input.form__input--success {
    border-color: var(--color-active);
}

.form__input.form__input--success ~ .form__label,
.form__input.form__input--success ~ .form__input-icon,
.form__input.form__input--success:focus ~ .form__label,
.form__input.form__input--success:focus ~ .form__input-icon {
    color: var(--color-active);
}
/* ↑ Inputs States ↑ */

/* ↓ Selects Inputs ↓ */
.form__input-select-container {
    position: relative;
}

.form__input-select-container select.form__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.form__input-select-container::after {
    content: var(--icon-chevron-down);
    font-family: var(--icon-font-family) !important;
    color: var(--color-input-border);
    position: absolute;
    top: 14px;
    right: 12px;
    pointer-events: none;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.form__input-select-container:focus-within::after {
    transform: rotate(180deg);
}
.form__input-select-container_group::after {
    right: 45px !important;
}
/* ↑ Selects Inputs ↑ */

/* ↓ Switch Inputs ↓ */
.form__input-switch-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    height: fit-content;
    margin: 0;
    gap: 8px;
}

.form__input-switch-container {
    position: relative;
    display: inline-block;
    width: 48px;
    min-width: 48px;
    height: 26px;
    margin: 0;
}

.form__input-switch {
    opacity: 0;
    width: 0;
    height: 0;
}

.form__input-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-variant-border);
    border: 1px solid var(--color-input-border);
    border-radius: 34px !important;
    -webkit-transition: .4s;
    transition: .4s;
}

.form__input-switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 5px;
    bottom: 5px;
    background-color: var(--color-input-border);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.form__input-switch:checked ~ .form__input-switch-slider {
    background-color: var(--color-primary);
}

.form__input-switch:focus ~ .form__input-switch-slider {
    box-shadow: 0 0 1px var(--color-primary);
}

.form__input-switch:checked ~ .form__input-switch-slider:before {
    height: 20px;
    width: 20px;
    left: -3px;
    bottom: 2px;
    background-color: var(--color-white);
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.form__input-switch-label {
    user-select: none;
}
/* ↑ Switch Inputs ↑ */

/* ↓ Checkbox Inputs ↓ */
.form__input-checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    width: fit-content;
    height: fit-content;
    gap: 8px;
}

.form__input-checkbox {
    display: none;
}

.form__input-checkbox-check {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    border: 2px solid var(--color-input-border);
    border-radius: 2px !important;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.form__input-checkbox ~ .form__input-checkbox-check::before {
    content: "";
    font-size: 16px;
    color: var(--color-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 18px;
    border-radius: 1px;
}

.form__input-checkbox:checked ~ .form__input-checkbox-check,
.form__input-checkbox:indeterminate ~ .form__input-checkbox-check,
.form__input-checkbox--indeterminate ~ .form__input-checkbox-check {
    border: 1px solid var(--color-primary);
}

.form__input-checkbox:checked ~ .form__input-checkbox-check::before {
    content: var(--icon-simple-check);
    font-family: var(--icon-font-family) !important;
    background-color: var(--color-primary);
}

.form__input-checkbox:indeterminate ~ .form__input-checkbox-check::before,
.form__input-checkbox--indeterminate ~ .form__input-checkbox-check::before {
    content: var(--icon-minus);
    font-family: var(--icon-font-family) !important;
    background-color: var(--color-primary);
}

.form__input-checkbox:disabled:not(:checked):not(:indeterminate):not(.form__input-checkbox--indeterminate) ~ .form__input-checkbox-check::before,
.form__input-checkbox[readonly]:not(:checked):not(:indeterminate):not(.form__input-checkbox--indeterminate) ~ .form__input-checkbox-check::before {
    background-color: var(--color-level-2);
}

.form__input-checkbox:disabled ~ .form__input-checkbox-label,
.form__input-checkbox[readonly] ~ .form__input-checkbox-label,
.form__input-checkbox:focus[readonly] ~ .form__input-checkbox-label {
    color: var(--color-inactive);
}

.form__input-checkbox-label {
    margin: 0;
}
/* ↑ Checkbox Inputs ↑ */

/* ↓ Radio Inputs ↓ */
.form__input-radio-group-container {
    width: 100%;
}
.form__input-radio-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}
.form__input-radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    width: fit-content;
    height: fit-content;
    gap: 8px;
}

.form__input-radio {
    display: none;
}

.form__input-radio-check {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    border: 1px solid var(--color-input-border);
    border-radius: 50% !important;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.form__input-radio ~ .form__input-radio-check::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.form__input-radio:checked ~ .form__input-radio-check {
    border-color: var(--color-primary);
}

.form__input-radio:checked ~ .form__input-radio-check::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form__input-radio-label {
    margin: 0;
    width: 100%;
}

.form__input-radio:disabled ~ .form__input-radio-check,
.form__input-radio[readonly] ~ .form__input-radio-check,
.form__input-radio:focus[readonly] ~ .form__input-radio-check,
.form__input-radio:disabled ~ .form__input-radio-label,
.form__input-radio[readonly] ~ .form__input-radio-label,
.form__input-radio:focus[readonly] ~ .form__input-radio-label {
    color: var(--color-inactive);
    -webkit-text-fill-color: var(--color-inactive);
    border-color: var(--color-inactive);
}
/* ↑ Radio Inputs ↑ */

/* ↓ Radio Box Inputs ↓ */
.form__input-radio-box-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px !important;
    background-color: var(--color-level-1);
    border-radius: 12px !important;
    width: fit-content;
    height: fit-content;
    margin: 0;
    gap: 8px;
}

.form__input-radio-box-container + .form__input-radio-box-container {
    margin-top: 12px;
}

.form__input-radio-box-container .form__input-radio ~ .form__input-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 4px;
}

.form__input-radio-box-container .form__input-radio:checked ~ .form__input-radio-label {
    color: var(--color-primary);
}
/* ↑ Radio Box Inputs ↑ */

/* ↓ Simple Line Input ↓ */
.form__input--line {
    height: 35px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 2px;
    border-radius: 0px !important;
}

.form__input--line ~ .form__input-icon {
    top: 6px;
}
/* ↑ Simple Line Input ↑ */

/* ↓ Simple Line Amount Input ↓ */
.form__input-amount-container .form__input--line,
.form__input-amount-container input.form__input--line {
    font-size: 20px !important;
    font-weight: 600;
    text-align: center;
}

.form__input-amount-container .form__label {
    top: -5px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form__input-amount-container .form__input--line ~ .form__input-additional-item {
    font-size: 20px;
}

/* ↑ Simple Line Amount Input ↑ */

/* ↓ Star Inputs ↓ */
.form__input-favoite-star-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
}
.form__input-star-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    width: fit-content;
    height: fit-content;
    gap: 8px;
}

.form__input-star {
    display: none;
}

.form__input-star-icon {
    width: 20px;
    height: 20px;
}

.form__input-star ~ .form__input-star-icon::before {
    content: var(--icon-star-empty);
    font-family: var(--icon-font-family) !important;
    color: var(--color-tertiary);
    font-size: 20px;
}

.form__input-star:checked ~ .form__input-star-icon::before {
    content: var(--icon-star-filled);
}

.form__input-star-label {
    margin: 0;
}

.form__input-favoite-star-container .form__input-container,
.form__input-favoite-star-container .form__input-select-container,
.form__input-favoite-star-container .form__input-radio-box-container,
.form__input-favoite-star-container .form__input-radio-group-container,
.form__input-favoite-star-container .form__input-checkbox-container {
    width: 100%;
}
/* ↑ Star Inputs ↑ */

/* ↓ Chip Inputs ↓ */
.form__input-chip-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    width: fit-content;
    height: fit-content;
    gap: 8px;
}

.form__input-chip {
    display: none;
}

.form__input-chip-label {
    font-size: 12px;
    color: var(--color-secondary);
    border: 1px solid var(--color-variant-border);
    border-radius: 8px !important;
    background-color: var(--color-white);
    padding: 0 16px;
    line-height: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form__input-chip:checked ~ .form__input-chip-label,
.form__input-chip:indeterminate ~ .form__input-chip-label {
    background-color: var(--color-secondary);
    color: var(--color-white) !important;
    border: 1px solid var(--color-secondary);
}
/* ↑ Chip Inputs ↑ */

/* ↓ Tag Inputs ↓ */
.form__input-tag-group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form__input-tag-container {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    gap: 8px;
    height: 23px;
    padding: 4px 16px;
    margin: 0;
    cursor: pointer;
}

.form__input-tag {
    display: none;
}

.form__input-tag-check {
    display: none;
}

.form__input-tag:checked ~ .form__input-tag-check {
    display: flex;
    color: var(--color-level-0);
}

.form__input-tag:checked ~ .form__input-tag-text {
    color: var(--color-level-0);
}
/* ↑ Tag Inputs ↑ */

/* ↓ Message Or Error Under Input ↓ */
.required,
.required-inline,
.field-validation-error,
.form__input-message {
    display: inline-block;
    color: var(--color-natural-border);
    font-size: 10px;
    margin-left: 16px;
}

.form__input-message--success {
    color: var(--color-active);
}

.required,
.required-inline,
.field-validation-error,
.form__input-message--error {
    color: var(--color-error);
}

.required-inline {
    display: inline;
}

.field-validation-valid {
    display: none;
}

.form__input-checkbox-container + .required,
.form__input-checkbox-container + .required-inline,
.form__input-checkbox-container + .field-validation-error,
.form__input-checkbox-container + .form__input-message,
.form__input-radio-container + .required,
.form__input-radio-container + .required-inline,
.form__input-radio-container + .field-validation-error,
.form__input-radio-container + .form__input-message {
    margin-left: 28px;
}

.form__input-switch-wrapper + .required,
.form__input-switch-wrapper + .required-inline,
.form__input-switch-wrapper + .field-validation-error,
.form__input-switch-wrapper + .form__input-message {
    margin-left: 0;
}
/* ↑ Message Or Error Under Input ↑ */

@media (max-width: 425px) {
    .form__container.form__input-max-width {
        flex: auto;
        width: 100%;
    }
}

@media (max-width: 320px) {
    .form__footer * {
        flex: 1;
    }
}
.form-input-card__container {
    width: 100%;
}

.form-input-card__label {
    font-size: 14px;
    margin-bottom: 5px;
}

.form-input-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 56px;
    position: relative;
}

.form-input-card__input {
    visibility: hidden;
    height: 0px;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
}

.form-input-card__default {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    gap: 8px;
    font-size: 12px;
    color: var(--color-secondary);
    background: var(--color-level-1);
    border-radius: 12px !important;
    box-shadow: 0px 1px 2px var(--color-secondary-transparent);
    cursor: pointer;
}

.form-input-card__selected-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.form-input-card__selected-extra-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: default;
    width: 100%;
    gap: 16px;
}

.form-input-card__selected {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px !important;
    gap: 8px;
    font-size: 12px;
    background: var(--color-level-1);
    border-radius: 12px !important;
    box-shadow: 0px 1px 2px var(--color-secondary-transparent);
    cursor: pointer;
}

.form-input-card__default-icon {
    font-size: 24px;
}

.form-input-card__select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 10px;
    background: var(--color-level-1);
    border-radius: 12px !important;
    box-shadow: 0px 1px 2px var(--color-secondary-transparent);
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.form-input-card__options {
    display: flex;
    flex-direction: column;
    padding: 8px;
    max-height: 400px;
    overflow-y: auto;
    gap: 8px;
}

.form-input-card__option {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    cursor: pointer;
    color: var(--color-secondary-text);
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 12px !important;
    padding: 8px 16px;
    transition: all 0.2s ease-in-out;
}

.form-input-card__search-input-filter {
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
}

.form-input-card__select-modal .form-input-card__select {
    padding: 16px;
}

.form-input-card__select-modal .form-input-card__options {
    margin-top: 8px;
    max-height: 75vh;
}

.form-input-card__select-modal .form-input-card__option {
    background: var(--color-level-1);
    box-shadow: 0px 1px 2px var(--color-secondary-transparent);
}

.form-input-card__select-modal .form-input-card__option-divider {
    visibility: hidden;
    height: 0;
    width: 0;
}

.form-input-card__option:not(.form-input-card__selected):hover {
    border-color: var(--color-secondary);
}

.form-input-card__option--active {
    border-color: var(--color-secondary);
    background-color: var(--color-level-2);
}

.form-input-card__option-divider:not(:last-child):not(:nth-last-child(-n+2)) {
    border: 1px solid var(--color-variant-border);
}

.form-input-card__option-divider:last-child:nth-last-child(-n+2) {
    display: none;
}

.form-input-card__option-icon {
    width: 24px;
}

.form-input-card__option-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 5px;
    color: var(--color-white);
    background: var(--color-secondary);
    border-radius: 50% !important;
}

.form-input-card__option-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
    word-break: break-word;
}

.form-input-card__option-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.form-input-card__option-group-item {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-input-card__option-group-item--right {
    align-items: flex-end;
}

.form-input-card__option-alias {
    font-size: 14px;
    color: var(--color-on-surface);
    word-break: keep-all;
}

.form-input-card__option-label {
    font-size: 11px;
    text-align: end;
}

.form-input-card__option-available-balance {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-tertiary);
    word-break: keep-all;
}

.form-input-card__option-no-content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    color: var(--color-secondary-text);
    padding: 16px;
    transition: all 0.2s ease-in-out;
    gap: 12px;
}

.form-input-card__option-no-content-img {
    width: 100px;
    height: 100px;
}
/*links*/
a {
    color: var(--color-secondary);
}

a:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

.button-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn {
    font-size: 14px !important;
    font-weight: 600;
    vertical-align: middle;
    padding: 15px 28px;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: 16px !important;
}

/*boton primario*/
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
    color: var(--color-white);
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
}

.btn-primary:disabled,
.btn-primary:disabled:hover {
    color: var(--color-white);
    border-color: var(--color-inactive);
    background-color: var(--color-inactive);
}

/*boton secundario*/
.btn-secondary {
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
    color: var(--color-primary-darker) !important;
    background-color: var(--color-white) !important;
    border-color: var(--color-primary-darker) !important;
}

.btn-secondary:disabled, .btn-tertiary:disabled, .btn-outline-primary:disabled {
    color: var(--color-inactive);    
    background-color: var(--color-white);
    border-color: var(--color-inactive);
}

/*boton terciario*/
.btn-tertiary,
.btn-outline-primary, 
.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show > .btn-outline-primary.dropdown-toggle {
    color: var(--color-natural-border);
    background-color: var(--color-white);
    border-color: var(--color-natural-border);
}

.btn-tertiary:hover,
.btn-outline-primary:hover {
    color: var(--color-secondary-text);
    background-color: var(--color-white);
    border-color: var(--color-secondary-text);
}

/*texto content link*/
.no-border {
    display: flex;
    align-items: center;
    color: var(--color-secondary) !important;
    font-size: 14px !important;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    gap: 8px;
    width: fit-content;
}
.no-border:hover,
.no-border:focus {
    outline: none;
    color: var(--color-secondary) !important;
    text-decoration: none;
}

.no-border--tertiary {
    color: var(--color-natural-border) !important;
    font-size: 14px;
    font-weight: 600;
}
.no-border--tertiary:hover {
    color: var(--color-on-surface);
}
.no-border--no-state,
.no-border--no-state:hover {
    color: var(--color-on-surface) !important;
    font-size: 12px !important;
    font-weight: 400;
}

.no-border__icon {
    font-size: 16px;
}

.ib-export {
    font-size: 18px;
}

/*estado en focus*/
.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none !important;
}

.button--block {
    width: 100%;
}

/*botones especificos del login*/
.client-login-btngroup {
    display: -ms-flexbox;
    max-width: 280px;
    width: 100%;
    position: relative;
    margin: 3rem 0;
    display: flex;
    align-items: center;
}

.client-login-btngroup .active {
    background: var(--color-secondary) !important;
    color: var(--color-white);
    width: 45%;
    z-index: 2;
}

.client-login-btngroup > * {
    height: 29px;
    padding: 5px;
    background: var(--color-level-3);
    -ms-flex: 1;
    text-decoration: none;
    position: absolute;
    width: 60%;
    z-index: 1;
    border-radius: 4rem;
    font-weight: 500;
}

.client-login-btngroup > *:first-child:not(.active) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.client-login-btngroup > *:last-child:not(.active) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.client-login-btngroup > *:first-child {
    left: 0;
}

.client-login-btngroup > *:last-child {
    right: 0;
}

/*Botones del AB*/
.btn-AB-status-active {
    color: var(--color-white);
    background: var(--color-natural-border);
}

.btn-AB-status-inactive {
    border: 1px solid transparent;
    background: var(--color-variant-border);
    color: black;
}

/*Botones transacciones recientes*/
.recent-transactions-dropbtn i {
    margin: 3px;
}

.recent-transactions-dropbtn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    -webkit-box-shadow: 1px 3px 4px 2px var(--color-black-transparent);
    box-shadow: 1px 3px 4px 2px var(--color-black-transparent);
    margin-bottom: 5px;
}
/* ↑ ↑ ↑ */
.copy-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-left: 6px;
    border: none;
    background: none;
    color: var(--color-secondary);
    vertical-align: middle;
    cursor: pointer !important;
}
.copy-btn:focus {
    outline: none;
}
.copy-btn > i {
    font-size: 14px;
    line-height: 1;
}

/* ============================================================================
   TABS
   ----------------------------------------------------------------------------
   Minimal markup. The .tabs__item class ALWAYS goes on the clickable element,
   so the click covers the whole tab and not just the text.

     <ul class="tabs tabs--chips">
         <li><a class="tabs__item" href="...">All</a></li>
     </ul>

     <div class="tabs tabs--chips">
         <a class="tabs__item" href="...">All</a>
     </div>

   Tab anatomy (icon and badge are optional):

     <a class="tabs__item" href="...">
         <i class="ib-add tabs__icon"></i>
         <span class="tabs__label">New transfer</span>
         <span class="tabs__badge">2</span>
     </a>

   Variants: tabs--line, tabs--chips, tabs--chips-vertical.
   Each client and each variant only redefines the tokens below, so no selector
   has to be duplicated to change the look.
   ============================================================================ */

.tabs {
    --tabs-gap: 12px;
    --tabs-margin: 23px 0 26px;
    --tabs-padding: 0 0 10px;
    --tab-padding: 5px 16px;
    --tab-gap: 8px;
    --tab-radius: 8px;
    --tab-font-size: 14px;
    --tab-font-weight: 500;
    --tab-font-weight-active: 600;
    --tab-line-height: 1.5;
    --tab-color: var(--color-natural-border);
    --tab-color-active: var(--color-secondary);
    --tab-bg: transparent;
    --tab-bg-active: transparent;
    --tab-border-width: 1px;
    --tab-border-color: transparent;
    --tab-border-color-active: transparent;
    --tab-icon-size: 18px;
    --tab-badge-bg: var(--color-level-3);
    --tab-badge-color: var(--color-secondary-text);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: var(--tabs-gap);
    margin: var(--tabs-margin);
    padding: var(--tabs-padding);
    overflow-x: auto;
    list-style: none;
}

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

.tabs--no-margin {
    --tabs-margin: 0;
}

.tabs--no-margin-bottom {
    --tabs-margin: 23px 0 0;
}

/* Wrapper elements (li or div) add no styling: they just let the tab through. */
.tabs > li,
.tabs > div:not(.tabs__item) {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabs__item,
.tabs__item:hover,
.tabs__item:focus {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    gap: var(--tab-gap);
    padding: var(--tab-padding);
    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: var(--tab-font-weight);
    line-height: var(--tab-line-height);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    color: var(--tab-color);
    background-color: var(--tab-bg);
    border: var(--tab-border-width) solid var(--tab-border-color);
    border-radius: var(--tab-radius);
    cursor: pointer;
}

.tabs__item--active,
.tabs__item--active:hover,
.tabs__item--active:focus {
    font-weight: var(--tab-font-weight-active);
    color: var(--tab-color-active);
    background-color: var(--tab-bg-active);
    border-color: var(--tab-border-color-active);
}

.tabs__icon {
    flex-shrink: 0;
    font-size: var(--tab-icon-size);
    line-height: 1;
}

.tabs__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modifiers */
.tabs__item--hidden {
    display: none;
}

.tabs__panels--centered {
    display: flex;
    justify-content: center;
}

.tabs--clipped-panels ~ .tabs__panels .tabs__panel {
    overflow: hidden;
}

.tabs__badge {
    flex-shrink: 0;
    margin-left: auto;
    box-sizing: border-box;
    min-width: 28px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    border-radius: 6px;
    background-color: var(--tab-badge-bg);
    color: var(--tab-badge-color);
}

/* Variant: line */
.tabs--line {
    --tabs-gap: 24px;
    --tab-padding: 0 2px 6px;
    --tab-radius: 0;
    --tab-border-width: 0;
}

.tabs--line .tabs__item {
    border-bottom: 2px solid transparent;
}

.tabs--line .tabs__item--active {
    border-bottom-color: var(--tab-color-active);
}

/* Variant: horizontal chips */
.tabs--chips {
    --tab-padding: 3px 16px;
    --tab-color: var(--color-secondary);
    --tab-bg: var(--color-level-0);
    --tab-border-color: var(--color-variant-border);
    --tab-color-active: var(--color-white);
    --tab-bg-active: var(--color-secondary);
    --tab-border-color-active: var(--color-secondary);
}

/* Variant: vertical chips */
.tabs--chips-vertical {
    --tabs-gap: 8px;
    --tabs-padding: 0;
    --tab-radius: 12px;
    --tab-color: var(--color-secondary);
    --tab-bg: var(--color-level-0);
    --tab-border-color: var(--color-variant-border);
    --tab-color-active: var(--color-secondary);
    --tab-bg-active: var(--color-level-1);
    --tab-border-color-active: var(--color-level-1);
    --tab-indicator-width: 2px;
    --tab-indicator-color: var(--color-secondary);

    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 240px;
}

.tabs--chips-vertical .tabs__item {
    position: relative;
    width: 100%;
}

.tabs--chips-vertical .tabs__item--active::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--tab-border-width));
    top: calc(-1 * var(--tab-border-width));
    bottom: calc(-1 * var(--tab-border-width));
    width: 18px;
    border-left: var(--tab-indicator-width) solid var(--tab-indicator-color);
    border-radius: var(--tab-radius) 0 0 var(--tab-radius);
}

/* Layout and panels */
.tabs-group {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.tabs-group--side {
    flex-direction: row;
}

.tabs__panels {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tabs-panels-min-height, auto);
}

.tabs-group--side .tabs__panels {
    margin: 0 30px;
}

.tabs__panel {
    display: none;
}

.tabs__panel--active {
    display: block;
}

@media (max-width: 670PX) {
    .tabs-group--side {
        flex-direction: column;
        width: 100%;
    }

    .tabs-group--side .tabs__panels {
        margin: 0;
    }

    .tabs--chips-vertical {
        min-width: auto;
    }
}


/* ↓ Vertical Stepper ↓ */
.vertical__stepper {
    display: flex;
    flex-direction: column;
}

.vertical__step {
    position: relative;
    height: 26px;
    list-style: none;
    color: var(--color-natural-border);
    margin-bottom: 32px;
}

.vertical__step:last-child {
    margin-bottom: 0;
}

.vertical__step::before {
    content: '';
    position: absolute;
    top: 33px;
    left: 12px;
    height: 18px;
    width: 2px;
    background-color: var(--color-input-border);
}

.vertical__step:last-child::before {
    display: none;
}

.vertical__step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    border: 1px solid var(--color-natural-border);
    position: absolute;
    left: 0;
    top: 0;
}

.vertical__step-title {
    position: relative;
    top: 4px;
    left: 34px;
}

.vertical__step--current .vertical__step-circle {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.vertical__step--current .vertical__step-title {
    color: var(--color-secondary);
}

.vertical__step--done .vertical__step-circle {
    color: var(--color-white);
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}

.vertical__step--done .vertical__step-title {
    color: var(--color-secondary);
}

.vertical__step.vertical__step--done::before {
    background-color: var(--color-secondary);
}
/* ↑ Vertical Stepper ↑ */

/* ↓ Horizontal Stepper ↓ */
.horizontal__stepper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 63px;
    height: 12px;
    width: 100%;
}

.horizontal__stepper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--color-variant-border);
    z-index: 0;
    border-radius: 2px;
}

.horizontal__step-progress {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: var(--color-secondary);
    z-index: 1;
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
    --stepper-steps: 4;
    --stepper-dot-radius: 6px;
}

.horizontal__step-progress-3 {
    --stepper-steps: 3;
}

.horizontal__step-progress-5 {
    --stepper-steps: 5;
}

.horizontal__step-progress[data-step="1"] {
    width: calc(1 * 50% / var(--stepper-steps) - var(--stepper-dot-radius));
}

.horizontal__step-progress[data-step="2"] {
    width: calc(3 * 50% / var(--stepper-steps) - var(--stepper-dot-radius));
}

.horizontal__step-progress[data-step="3"] {
    width: calc(5 * 50% / var(--stepper-steps) - var(--stepper-dot-radius));
}

.horizontal__step-progress[data-step="4"] {
    width: calc(7 * 50% / var(--stepper-steps) - var(--stepper-dot-radius));
}

.horizontal__step-progress[data-step="5"] {
    width: calc(9 * 50% / var(--stepper-steps) - var(--stepper-dot-radius));
}

.horizontal__step-progress.horizontal__step-progress--done {
    width: 100%;
    background-color: var(--color-active);
}

.horizontal-step {
    position: relative;
    z-index: 2;
    top: 0;
    text-align: center;
    flex: 1;
    font-size: 12px;
    color: var(--color-secondary-text);
}

.horizontal-step::before {
    content: '';
    display: block;
    box-sizing: border-box;
    margin: 0 auto 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    border: solid 2px var(--color-secondary);
}

.horizontal-step--active {
    font-weight: 700;
    color: var(--color-secondary);
}

.horizontal-step--active::before {
    background-color: var(--color-level-0);
    box-shadow: 0 0 0 3px var(--background-color-level, var(--color-level-0));
}

.horizontal-step--active ~ .horizontal-step::before {
    background-color: var(--color-level-0);
    border-color: var(--color-variant-border);
    box-shadow: none;
}

.horizontal-step--completed {
    font-weight: normal;
    color: var(--color-secondary-text);
}

.horizontal-step--completed::before {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: none;
}

.horizontal__step-progress--done ~ .horizontal-step::before,
.horizontal__step-progress--done ~ .horizontal-step.horizontal-step--completed::before {
    background-color: var(--color-active);
    border-color: var(--color-active);
    box-shadow: none;
}

.horizontal-step__subtitle {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: normal;
    color: var(--color-secondary-text);
}
/* ↑ Horizontal Stepper ↑ */

.helper__stepper--not-show {
    visibility: hidden;
    margin: 0;
}

@media (max-width: 320px) {
    .horizontal__stepper {
        display: none;
    }
}
.alert__container {
    display: flex;
    justify-content: center;
}

.alert__content {
    display: flex;
    flex-direction: column;
    background-color: var(--color-info-container);
    border-radius: 12px !important;
    margin-bottom: 24px;
    padding: 8px 16px;
    gap: 3px;
}

.alert__message {
    display: flex;
    gap: 10px;
    word-break: break-word;
}

.alert__message-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alert__icon {
    font-size: 12px;
    margin-top: 3px;
}

.alert__icon--success {
    color: var(--color-active);
}

.alert__title {
    font-weight: bold;
}

.alert__list {
    margin-bottom: 0px;
    padding-left: 35px !important;
}

.alert__content--top-margin {
    margin-top: 24px;
}

.alert__content--no-margin-bottom {
    margin-bottom: 0;
}

.alert__content--transparent {
    background-color: transparent !important;
}

.alert__content--success {
    background-color: var(--color-active-container);
}

.alert__content--error {
    background-color: var(--color-error-container);
}

.alert__content--warning {
    background-color: var(--color-warning-container);
}

.alert__content--sm {
    width: min(90vw, 360px);
}

.alert-page-haeader__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    gap: 8px;
}

.alert-page-haeader__icon {
    font-size: 44px;
    color: var(--color-warning);
}

.alert-page-haeader__message {
    margin-bottom: 24px;
}
.generic-otp-token__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.generic-otp-token__title {
    font-size: 12px;
    font-weight: 600;
}
.generic-otp-token {
    display: flex;
    flex-direction: row;
    margin-bottom: 12px;
}
.generic-otp-token__caracter {
    width: 32px;
    height: 38px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--color-variant-border);
    border-radius: 4px !important;
    text-align: center;
    padding: 0;
}
.generic-otp-token__caracter:focus {
    outline: none;
    border: 1px solid var(--color-secondary);
}
.generic-otp-token__caracter--fill {
    border: 1px solid var(--color-input-border);
}
.generic-otp-token__caracter + .generic-otp-token__caracter {
    margin-left: 4px;
}
.generic-otp-token__resend-time-container {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 4px;
}
.generic-otp-token__resend-button-container {
    display: flex;
    gap: 8px;
}
.generic-otp-token__resend-message {
    font-size: 14px;
    margin-bottom: 55px
}
.generic-otp-token__error-container {
    border: 1px solid var(--color-error);
    border-radius: 12px !important;
    padding: 10px;
    color: var(--color-error);
    width: 360px;
}
.generic-otp-token__error-message {
    margin-bottom: 10px;
}
.generic-otp-token__error-code {
    text-align: end;
} 
/*chips*/
.chip {
    font-size: 12px;
    color: var(--color-secondary);
    border: 1px solid var(--color-variant-border);
    border-radius: 8px !important;
    background-color: var(--color-white);
    padding: 4px 16px;
    justify-items:center;
}

.chip.active-chip {
    background-color: var(--color-secondary);
    color: var(--color-white) !important;
    border: 1px solid var(--color-secondary);
}

.chip:focus {
    border: 1px solid var(--color-secondary) !important;
}
.context-modal {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--color-secondary-transparent);
    z-index: 1050;
    padding: 0;
    display: none;
}

.context-modal--priority {
    z-index: 2000 !important;
}

.context-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.context-modal__header-title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-on-surface);
}

.context-modal__header-title--centered {
    text-align: center;
}

.context-modal__body {
    padding: 16px 24px;
    font-size: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.context-modal__body--overflow {
    overflow-y: initial;
    overflow-x: initial;
}

.context-modal__body--sm-text {
    font-size: 12px;
}

.context-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: none;
    padding: 16px 24px 24px 24px;
    background: none;
    gap: 8px;
}

.context-modal__footer--center {
    justify-content: center;
}

.context-modal__arrow {
    position: absolute;
    width: 24px;
    height: 12px;
    overflow: visible;
    pointer-events: none;
    background: transparent;
    /* Arrow will be positioned dynamically via JS */
}

.context-modal__arrow--top {
    top: -12px;
    left: 32px;
}
.context-modal__arrow--bottom {
    bottom: -12px;
    left: 32px;
}

.context-modal__arrow-shape {
    width: 24px;
    height: 12px;
    display: block;
}

.context-modal__arrow--top .context-modal__arrow-shape {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid var(--color-bg-level--1);
}
.context-modal__arrow--bottom .context-modal__arrow-shape {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--color-bg-level--1);
}

/** Modal Error **/
.modal-body.modal-error__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px !important;
}
.modal-error__body-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.modal-error__header-icon {
    font-size: 56px;
    color: var(--color-principal-grey);
}
.modal-error__header-title {
    color: var(--color-principal-grey);
}
.modal-error__body-messages-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
}
.modal-error__body-message {
    font-size: 14px;
    margin-bottom: 24px;
}
.modal-error__body-contact {
    margin-bottom: 0px;
}
.modal-error__body-error-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}
.modal-error__body-list-item {
    display: flex;
    border-bottom: 1px solid var(--color-variant-border);
    padding-bottom: 4px;
    gap: 4px;
}
.modal-error__body-list-item-code {
    color: var(--color-error);
}
.modal-error__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.modal-error__footer--button {
    width: 50%;
    margin: 0 !important;
}
.modal-error__footer-error-code {
    display: flex;
    justify-content: flex-end;
    color: var(--color-principal-grey);
    font-size: 11px;
    width: 100%;
    margin: 0 !important;
    gap: 3px;
}
/** Modal Error **/