@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/**
 * @name UPAEP-UIKIT-CSS
 * @description Librería de estilos para el desarrollo de aplicaciones web
 * @version 2.3.3
 * @autor Mario Montes Gómez
 * @create 23/Noviembre/2023
 * @date 22/Julio/2025
 */

/*? ------ Variables Globaes ------ */
:root {
    /*? upaep-gradient */
    --upaep-gradient-dark: rgba(0, 0, 0, 0.4);
    --upaep-gradient-white: rgba(255, 255, 255, 0.5);
    --upaep-gradient1: transparent linear-gradient(90deg, #FF000A 0%, #A91CAE 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient2: transparent linear-gradient(90deg, #E40C22 0%, #21345C 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient3: transparent linear-gradient(90deg, #FFC400 0%, #F15A24 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient4: transparent linear-gradient(90deg, #E40C22 0%, #FF000A 100%) 0% 0% no-repeat padding-box;
    --upaep-gradient5: transparent linear-gradient(90deg, #3FA9F5 0%, #280FBC 100%) 0% 0% no-repeat padding-box;
    /*? upaep shadow */
    --upaep-box-shadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    /*? upaep colors */
    --upaep-color-red: #E30921;
    --upaep-color-cherry: #920318;
    --upaep-color-grey: #909496;
    --upaep-color-light-grey: #B5BABD;
    --upaep-color-dark-grey: #52565A;
    --upaep-color-blue-primary: #1D335B;
    --upaep-color-blue-primary-hover: #234885;
    --upaep-color-blue-light: #D3EFFF;
    --upaep-color-yellow-primary: #FECB15;
    --upaep-color-gold: #CDA434;
    --upaep-color-background: #F5F5F5;
    --upaep-color-tenue-gray: #EEEEEE;
    --upaep-color-ingenierias: #003E92;
    --upaep-color-economico-administrativas: #930d19;
    --upaep-color-negocios: #930d19;
    --upaep-color-artes-humanidades: #F36A10;
    --upaep-color-ciecnias-creativas: #511F7F;
    --upaep-color-ciecnias-humanas-sociales: #F36A10;
    --upaep-color-ciencias-sociales: #9F0000;
    --upaep-color-ciencias-biologicas: #00A894;
    --upaep-color-ciencias-vida-salud: #00A894;
    --upaep-color-ciencias-salud: #0079c7;
    --upaep-color-ciencias-medicas: #0079c7;
    --upaep-color-lenguas-cultura: #FFA800;
    --upaep-color-error-light: #FEC4CA;
    --upaep-color-error-hover-light: #F6B7BE;
    --upaep-color-success-light: #B9F0D4;
    --upaep-color-success-hover-light: #9AE1BD;
    --upaep-color-warning-light: #F5DC80;
    --upaep-color-warning-hover-light: #E9D071;
    --upaep-color-error: #DC3545;
    --upaep-color-error-hover: #bc2433;
    --upaep-color-success: #28A745;
    --upaep-color-success-hover: #1f973a;
    --upaep-color-warning: #FFC107;
    --upaep-color-warning-hover: #e5ac03;
    --upaep-color-white: #FFFFFF;
    --upaep-color-white-hover: #FEFEFE;
    --upaep-color-black: #000000;
    --upaep-color-primary: #e10023;
    --upaep-color-primary-hover: #c2001e;
    --upaep-color-secondary: #fecb15;
    --upaep-color-secondary-hover: #eeba00;
    --upaep-color-tertiary: #d0d0d0;
    --upaep-color-tertiary-hover: #b8b8b8;
    --upaep-color-whats: #25d366;
    --upaep-color-dissabled: #EFEFEF;
    --upaep-color-dissabled-red: #F5ACB7;
    --upaep-color-dissabled-error: #EEBBC0;
    --upaep-color-dissabled-yellow: #FEEEB3;
    --upaep-color-dissabled-warning: #F9E5A9;
    --upaep-color-dissabled-success: #B3DDBD;
    --upaep-color-border-red: #B9001D;
    --upaep-color-border-grey: #8E9396;
    --upaep-color-border-grey-icon: #E8E8E8;
    --upaep-color-border-dissabled: #D6D6D6;
    --upaep-color-border-error: #BC2433;
    --upaep-color-border-warning: #E5AC03;
    --upaep-color-blue-link: #0085FF;
    --upaep-color-blue-link-hover: #0865c5;
    --upaep-color-blue-sky: #437EEA;
    --upaep-color-blue-sky-hover: #3564BC;
    --upaep-color-blue-sky-light: #C3DAFA;
    --upaep-color-blue-sky-light-hover: #9ac3f6;
    --upaep-color-none: none;
    /*? color educacion continua*/
    --upaep-color-educacion-continnua-ingenieria: #004494;
    --upaep-color-educacion-continnua-administracion: #A6091E;
    --upaep-color-educacion-continnua-gastronomia: #E20026;
    --upaep-color-educacion-continnua-desarrollo-organizacional: #E8526B;
    --upaep-color-educacion-continnua-humanidades: #EE7F00;
    --upaep-color-educacion-continnua-arquitectura: #6D1F80;
    --upaep-color-educacion-continnua-educacion: #E75113;
    --upaep-color-educacion-continnua-derecho: #BC5A15;
    --upaep-color-educacion-continnua-comunicacion: #A64D94;
    --upaep-color-educacion-continnua-ciencias-biologicas: #00AA9B;
    --upaep-color-educacion-continnua-salud: #0081C7;
    --upaep-color-educacion-continnua-lengua-cultura: #FABB00;
    --upaep-color-educacion-continnua-relaciones-internacionales: #FFEF44;
    --upaep-color-educacion-continnua-soft-skills: #8E959A;
    /*? color colegios / altum / prepas */
    --upaep-color-preescolar: #5AB437;
    --upaep-color-primaria: #FFD700;
    --upaep-color-secundaria: #FF8200;
    --upaep-color-prepa: #734DC6;
    --upaep-color-altum: #FB002B;
    /*? upaep font family */
    --upaep-ff-fira-sans: 'Fira Sans', sans-serif;
    --upaep-ff-fira-sans-condensed: 'Fira Sans Condensed', sans-serif;
    --upaep-ff-fira-sans-extracondensed: "Fira Sans Extra Condensed", sans-serif;
    --upaep-ff-merriweather: 'Merriweather', serif;
    --upaep-ff-merriweather-sans: 'Merriweather Sans', sans-serif;
    --upaep-ff-roboto: 'Roboto', sans-serif;
    --upaep-ff-roboto-condensed: "Roboto Condensed", sans-serif;
    --upaep-ff-fontawesome: 'FontAwesome';
    --upaep-ff-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --upaep-ff-space-mono: "Space Mono", monospace;
    /*? upaep font weight */
    --upaep-fw-bolder: bolder;
    --upaep-fw-bold: bold;
    --upaep-fw-900: 900;
    --upaep-fw-800: 800;
    --upaep-fw-700: 700;
    --upaep-fw-semibold: 600;
    --upaep-fw-medium: 500;
    --upaep-fw-regular: 400;
    --upaep-fw-light: 300;
    --upaep-fw-200: 200;
    --upaep-fw-100: 100;
    --upaep-fw-normal: normal;
    --upaep-fw-lighter: lighter;
    /*? upaep font style */
    --upaep-fs-italic: italic;
    --upaep-fs-normal: normal;
    --upaep-fs-oblique: oblique;
    --upaep-fs-inherit: inherit;
    --upaep-fs-initial: initial;
    --upaep-fs-unset: unset;
    /*? upaep font size */
    --upaep-fz2: .125rem;
    --upaep-fz4: .25rem;
    --upaep-fz6: .375rem;
    --upaep-fz8: .5rem;
    --upaep-fz10: .625rem;
    --upaep-fz12: .75rem;
    --upaep-fz14: .875rem;
    --upaep-fz15: .9375rem;
    --upaep-fz16: 1rem;
    --upaep-fz18: 1.125rem;
    --upaep-fz20: 1.25rem;
    --upaep-fz22: 1.375rem;
    --upaep-fz24: 1.5rem;
    --upaep-fz25: 1.5625rem;
    --upaep-fz26: 1.625rem;
    --upaep-fz28: 1.75rem;
    --upaep-fz30: 1.875rem;
    --upaep-fz32: 2rem;
    --upaep-fz34: 2.125rem;
    --upaep-fz36: 2.25rem;
    --upaep-fz38: 2.375rem;
    --upaep-fz40: 2.5rem;
    --upaep-fz42: 2.625rem;
    --upaep-fz44: 2.75rem;
    --upaep-fz46: 2.875rem;
    --upaep-fz48: 3rem;
    --upaep-fz50: 3.125rem;
    --upaep-fz52: 3.25rem;
    --upaep-fz54: 3.375rem;
    --upaep-fz56: 3.5rem;
    --upaep-fz58: 3.625rem;
    --upaep-fz60: 3.75rem;
    /*? size */
    --upaep-size-xxs: 360px;
    --upaep-size-xs: 375px;
    --upaep-size-sm: 480px;
    --upaep-size-md: 924px;
    --upaep-size-lg: 1024px;
    --upaep-size-xl: 1450px;
    --upaep-size-xxl: 1920px;
    /*? orientation */
    --upaep-portrait: portrait;
    --upaep-landscape: landscape;
    /*? z-index */
    --upaep-zindex-btn-float: 100;
    --upaep-zindex-menubar: 100;
    --upaep-zindex-tag: 1000;
    --upaep-zindex-footer: 1010;
    --upaep-zindex-header: 1010;
    --upaep-zindex-dropdown: 1015;
    --upaep-zindex-autocomplete: 1015;
    --upaep-zindex-selectpicker: 1015;
    --upaep-zindex-timepicker: 1015;
    --upaep-zindex-datepicker: 1015;
    --upaep-zindex-sticky: 1020;
    --upaep-zindex-fixed: 1030;
    --upaep-zindex-backdrop: 1035;
    --upaep-zindex-sidebar: 1050;
    --upaep-zindex-navbar: 1060;
    --upaep-zindex-tooltip: 1080;
    --upaep-zindex-popover: 1100;
    --upaep-zindex-offcanvas-backdrop: 1120;
    --upaep-zindex-offcanvas: 1130;
    --upaep-zindex-modal-backdrop: 1150;
    --upaep-zindex-modal: 1200;
    --upaep-zindex-spinner: 1210;
    --upaep-zindex-notification-container: 1220;
    --upaep-zindex-notification: 1250;
    --upaep-zindex-coffi: 1300;
    /*? otros */
    --gutter-y: 0;
    --gutter-x: 1.5rem;
    --secondary: #52565A;
    --primary: #ab0909;
    --colorblue: #1f335c;
    --colorblue1: #86B7FE;
    --colorblue2: #18172c;
    --colorblue-light: #EAEFF6;
    --colordark: #212529;
    --colordark2: #333333;
    --colordark3: #52565a;
    --colorred: #e10023;
    --colorred: #dc3545;
    --colorred: #ab0909;
    --colorgreen: #198754;
    --colorgreen1: #067703;
    --colorgreen2: #3ae38b;
    --colorgreen3: #B9EFD3;
    --colorpink: #F2CED4;
    --colorgrey1: #8f9496;
    --colorgrey2: #cfcfcf;
    --colorgrey3: #eeeeee;
    --colorgrey4: #e8e9ed;
    --colorgrey5: #434257;
    --colorgrey6: #ced4da;
    --colorgrey7: #dee2e6;
    --coloryellow: #ffcc00;

    --gradient: linear-gradient(0deg, #e4406f 0%, #ca2374 50%, #9c297f 100%);
    --gradient1: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(255, 14, 144, 1) 23%, rgba(253, 29, 29, 1) 49%, rgba(232, 22, 58, 1) 75%, rgba(219, 7, 7, 1) 100%);
    --gradient2: linear-gradient(135deg, #e8a038 0, #ee9637 8.33%, #f38a38 16.67%, #f77c3a 25%, #f96d3d 33.33%, #fa5b41 41.67%, #f94646 50%, #f72b4c 58.33%, #f40055 66.67%, #ef005f 75%, #ea006a 83.33%, #e20077 91.67%, #d90085 100%);
    --gradient3: linear-gradient(135deg, #b962e9 0, #cc58db 5%, #dc4ecc 10%, #e844bc 15%, #f23bab 20%, #f9349a 25%, #fd3189 30%, #ff3178 35%, #ff3667 40%, #fd3d56 45%, #f94646 50%, #f34f36 55%, #eb5924 60%, #e2620d 65%, #d86b00 70%, #cc7300 75%, #bf7a00 80%, #b18100 85%, #a38700 90%, #938d00 95%, #839100 100%);
}

/*? ------ Global ------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*? ------ html tag ------ */
body {
    font-family: var(--upaep-ff-fira-sans);
    font-display: swap;

    &:has(.upaep__modal:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__offcanvas:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__view-sidebar.is-offcanvas:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__navbar-collapse:is(.is-show)) {
        overflow: hidden;
    }

    &:has(.upaep__tooltip:is(.is-show)) {
        overflow-x: hidden;
    }
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 1px solid;
    opacity: 0.25;
}

p {
    margin: 0 0 1rem 0;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
}

address {
    margin: 0 0 1rem 0;
    font-style: normal;
    line-height: inherit;
}

ol,
ul {
    padding: 0 0 0 2rem;
}

ol,
ul,
dl {
    margin: 0 0 1rem 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin: 0;
}

dt {
    font-weight: var(--upaep-fw-700);
}

dd {
    margin: 0 0 0.5rem 0;
}

blockquote {
    margin: 0 0 1rem;
}

b,
strong {
    font-weight: var(--upaep-fw-bolder);
}

small,
.small {
    font-size: var(--upaep-fz14);
}

mark,
.mark {
    padding: .25rem;
    color: var(--upaep-color-black);
    background-color: var(--upaep-color-background);
}

sub,
sup {
    position: relative;
    font-size: var(--upaep-fz12);
    line-height: 0;
    vertical-align: baseline;
}

sub {
    inset: auto auto -.25rem auto;
}

sup {
    inset: -.5rem auto auto auto;
}

a {
    color: var(--upaep-color-blue-link);
    text-decoration: underline;

    &:hover {
        color: var(--upaep-color-blue-link-hover);
    }

    &:not([href]):not([class]),
    &:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }
}

pre,
code,
kbd,
samp {
    font-family: var(--upaep-ff-monospace);
    font-size: var(--upaep-fz16);
}

pre {
    display: block;
    margin: 0 0 1rem 0;
    overflow: auto;
    font-size: var(--upaep-fz14);
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: var(--upaep-fz14);
    color: #d63384;
    word-wrap: break-word;
}

a>code {
    color: inherit;
}

kbd {
    padding: 0.1875rem 0.375rem;
    font-size: var(--upaep-fz14);
    color: var(--upaep-color-white);
    background-color: var(--upaep-color-black);
    border-radius: 0.25rem;
}

kbd kbd {
    padding: 0;
    font-size: var(--upaep-fz16);
}

figure {
    margin: 0 0 1rem;
}

img,
svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

caption {
    pad: .5rem 0 .5rem 0;
    color: var(--upaep-color-dark-grey);
    text-align: left;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

label {
    display: inline-block;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
    cursor: pointer;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

button,
select {
    text-transform: none;
}

select {
    word-wrap: normal;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
}

legend+* {
    clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

::-webkit-inner-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
}

output {
    display: inline-block;
}

iframe {
    border: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

progress {
    vertical-align: baseline;
}

footer {
    --footer-bg: var(--upaep-color-black);
    --footer-width: 100%;
    --footer-minheigth: 60px;
    --footer-padding: 40px 0;
    --footer-zindex: var(--upaep-zindex-footer);
    --footer-border-top: 2px solid #ac241e;
    background-color: var(--footer-bg);
    width: var(--footer-width);
    padding: var(--footer-padding);
    z-index: var(--footer-zindex);
    position: relative;
    float: left;
}

header {
    --header-bg: #e6e6e6;
    --header-position: relative;
    --header-width: 100%;
    --header-height: auto;
    --header-zindex: var(--upaep-zindex-header);
    --header-float: left;
    --header-inset: ;
    width: var(--header-width);
    height: var(--header-height);
    background-color: var(--header-bg);
    position: var(--header-position);
    z-index: var(--header-zindex);
    float: var(--header-float);
    inset: var(--header-inset);
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

.upaep__block {
    --upaep-block-width: 100%;
    --upaep-block-height: auto;
    --upaep-block-padding: 1.5rem;
    --upaep-block-margin: 1rem 0;
    --upaep-block-border-size: 1px;
    --upaep-block-border-style: solid;
    --upaep-block-border-color: var(--upaep-color-border-grey);
    --upaep-block-border-radius: 10px;
    --upaep-block-bg: #f8f9fa;
    --upaep-block-example-bg: transparent;
    --upaep-block-code-bg: transparent;
    --upaep-block-dom-bg: transparent;
    --upaep-block-actions-bg: transparent;
    width: var(--upaep-block-width);
    height: var(--upaep-block-height);
    padding: var(--upaep-block-padding);
    margin: var(--upaep-block-margin);
    border: var(--upaep-block-border-size) var(--upaep-block-border-style) var(--upaep-block-border-color);
    border-radius: var(--upaep-block-border-radius);
    background: var(--upaep-block-bg);
    position: relative;

    .upaep__block-example {
        background: var(--upaep-block-example-bg);
        width: 100%;
        height: auto;
        padding: 1.5rem;
        margin: 1rem 0;
        display: flex;
        align-items: center;
        position: relative;

        .upaep__block-dom {
            background: var(--upaep-block-dom-bg);
            width: 50%;
            height: auto;
            padding: 1rem;
        }

        .upaep__block-actions {
            background: var(--upaep-block-actions-bg);
            width: 50%;
            height: auto;
            padding: 1rem;
        }

        .upaep__block-icon-code {
            position: absolute;
            inset: auto 10px 10px auto;
            cursor: pointer;
            font-size: var(--upaep-fz20);
            color: var(--upaep-color-dark-grey);

            &::before {
                font-family: var(--upaep-ff-fontawesome);
                content: "\f121";
            }

            &:hover {
                color: var(--upaep-color-black);
            }
        }
    }

    .upaep__block-content {
        background: var(--upaep-block-example-bg);
        width: 100%;
        height: auto;
        padding: 1.5rem;
        margin: 1rem 0;

        .upaep__block-icon-copy {
            position: absolute;
            inset: 10px 10px auto auto;
            cursor: pointer;
            font-size: var(--upaep-fz20);
            color: var(--upaep-color-dark-grey);

            &::before {
                font-family: var(--upaep-ff-fontawesome);
                content: "\f0c5";
            }

            &:hover {
                color: var(--upaep-color-black);
            }
        }

        .upaep__block-code-type {
            font-size: var(--upaep-fz18);
            color: var(--upaep-color-dark-grey);
            font-weight: var(--upaep-fw-bold);
            margin: .5rem 0;
        }

        .upaep__block-code {
            .token.punctuation {
                color: #999;
            }

            .token.attr-name,
            .token.builtin,
            .token.char,
            .token.inserted,
            .token.selector,
            .token.string {
                color: #690;
            }

            .token.atrule,
            .token.attr-value,
            .token.keyword {
                color: #07a;
            }

            code[class*=language-],
            pre[class*=language-] {
                color: #000;
                background: 0 0;
                text-shadow: 0 1px #fff;
                font-family: "Fira Sans", sans-serif;
                text-align: left;
                white-space: pre;
                word-spacing: normal;
                word-break: normal;
                word-wrap: normal;
                line-height: 1.5;
                -moz-tab-size: 4;
                tab-size: 4;
                -webkit-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
                font-size: 15.55555px;
            }

            .token.boolean,
            .token.constant,
            .token.deleted,
            .token.number,
            .token.property,
            .token.symbol,
            .token.tag {
                color: #905;
            }
        }
    }

}

/*? ------ General ------ */

.sliderBanner {
    & .carousel-indicators {
        margin: 10px 0;
    }

    & .__indicator {
        background: var(--upaep-color-white);
        border-radius: 50px;
        width: 15px;
        height: 15px;
        border: 0;

        &.active {
            background: var(--upaep-color-red);
        }
    }
}

.__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.upaep__fullscreen,
.__fullscreen,
.fullscreen {
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.upaep__difuminado {
    height: 175px;
    left: 0;
    right: 0;
    opacity: 0;
    position: absolute;
}

.upaep__difuminado.__bottom {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .0001), #fff);
    bottom: 0;
}

.upaep__difuminado.__top {
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .0001), #fff);
    top: 0;
}

.upaep__backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0 auto auto 0;
    z-index: var(--upaep-zindex-backdrop);
    background: var(--upaep-gradient-dark);

    &.__offcanvas {
        z-index: var(--upaep-zindex-offcanvas-backdrop);
    }

    &.__modal {
        z-index: var(--upaep-zindex-modal-backdrop);
    }
}

.upaep__backdrop:not(.is-show) {
    display: none;
}

.offcanvasAccesos {
    background: var(--upaep-color-white);
    transition: transform .5s ease-in !important;
}

.offcanvasAccesos .accmenu-items {
    color: var(--upaep-color-dark-grey);
}

.offcanvasAccesos .upaep__menu-item {
    color: var(--upaep-color-dark-grey);
}

.offcanvasAccesos .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu {
    background: var(--upaep-color-white);
    transition: transform .5s ease-in !important;
}

.offcanvasMenu .offcanvas-header {
    justify-content: end;
}

.offcanvasMenu .offcanvas-header .__close {
    font-size: var(--upaep-fz30);
    cursor: pointer;
    margin: 0 1rem;
}

.offcanvasMenu .upaep__menu-items {
    color: var(--upaep-color-black);
}

.offcanvasMenu .upaep__menu-item {
    color: var(--upaep-color-black);
}

.offcanvasMenu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-black);
}

.offcanvasMenu.__black {
    background: var(--upaep-color-black);
}

.offcanvasMenu.__black .upaep__menu-items {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .upaep__menu-item {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__black .offcanvas-header .__close {
    color: var(--upaep-color-white);
}

.offcanvasMenu.__white {
    background: var(--upaep-color-white);
}

.offcanvasMenu.__white .upaep__menu-items {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .upaep__menu-item {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__link a {
    color: var(--upaep-color-dark-grey);
}

.offcanvasMenu.__white .offcanvas-header .__close {
    color: var(--upaep-color-dark-grey);
}

/*? ------ Estructura ------ */

.upaep__main {
    --upaep-main-width: 100%;
    --upaep-main-height: auto;
    --upaep-main-padding: 1rem;
    --upaep-main-margin: 0;
    --upaep-main-bg: transparent;
    width: var(--upaep-main-width);
    height: var(--upaep-main-height);
    padding: var(--upaep-main-padding);
    margin: var(--upaep-main-margin);
    background: var(--upaep-main-bg);
}

.upaep__panel {
    width: 100%;
    background: var(--upaep-color-white);
}

.upaep__panel-2 {
    position: relative;
}

.upaep__section {
    --upaep-section-width: 100%;
    --upaep-section-height: auto;
    --upaep-section-minheight: 200px;
    --upaep-section-padding: 0;
    --upaep-section-margin: 0;
    --upaep-section-bg: ;
    position: relative;
    width: var(--upaep-section-width);
    height: var(--upaep-section-height);
    min-height: var(--upaep-section-minheight);
    padding: var(--upaep-section-padding);
    margin: var(--upaep-section-margin);
    background: var(--upaep-section-bg);
}

.upaep__titles {
    padding: 1rem;
}

.upaep__content {
    --upaep-content-width: 100%;
    --upaep-content-height: auto;
    --upaep-content-padding: 0;
    --upaep-content-margin: 0;
    width: var(--upaep-content-width);
    height: var(--upaep-content-height);
    padding: var(--upaep-content-padding);
    margin: var(--upaep-content-margin);
}

.upaep__top {
    --upaep-top-width: 100%;
    --upaep-top-height: auto;
    --upaep-top-padding: 2rem;
    width: var(--upaep-top-width);
    height: var(--upaep-top-height);
    padding: var(--upaep-top-padding);
}

.upaep__bottom {
    --upaep-bottom-width: 100%;
    --upaep-bottom-height: auto;
    --upaep-bottom-padding: 2rem;
    width: var(--upaep-bottom-width);
    height: var(--upaep-bottom-height);
    padding: var(--upaep-bottom-padding);
}

.upaep__left {
    --upaep-left-width: 100%;
    --upaep-left-height: auto;
    --upaep-left-padding: 2rem;
    width: var(--upaep-left-width);
    height: var(--upaep-left-height);
    padding: var(--upaep-left-padding);
}

.upaep__right {
    --upaep-right-width: 100%;
    --upaep-right-height: auto;
    --upaep-right-padding: 2rem;
    width: var(--upaep-right-width);
    height: var(--upaep-right-height);
    padding: var(--upaep-right-padding);
}

.upaep__center {
    --upaep-center-width: 100%;
    --upaep-center-height: auto;
    --upaep-center-padding: 2rem;
    width: var(--upaep-center-width);
    height: var(--upaep-center-height);
    padding: var(--upaep-center-padding);
}

.upaep__banner {
    --upaep-banner-width: 100%;
    --upaep-banner-height: 100vh;
    --upaep-banner-padding: 0;
    --upaep-banner-margin: 0;
    --upaep-banner-bg: transparent;
    --upaep-banner-inner-width: 100%;
    --upaep-banner-inner-height: 100%;
    --upaep-banner-card-width: 100%;
    --upaep-banner-card-height: 100%;
    --upaep-banner-card-overlay-width: 100%;
    --upaep-banner-card-overlay-height: 100%;
    --upaep-banner-card-overlay-inset: 0;
    --upaep-banner-card-overlay-content-width: 100%;
    --upaep-banner-card-overlay-content-height: 100%;
    --upaep-banner-underline-width: 100%;
    --upaep-banner-underline-height: 15px;
    --upaep-banner-underline-bg: var(--upaep-color-red);
    --upaep-banner-underline-inset: auto auto 0 0;
    --upaep-banner-resource-width: auto;
    --upaep-banner-resource-height: 100%;
    --upaep-banner-resource-bg: var(--upaep-color-black);
    --upaep-banner-videocontrols: ;
    --upaep-banner-form-width: 35%;
    --upaep-banner-form-height: 100%;
    --upaep-banner-form-content-width: 100%;
    --upaep-banner-form-content-height: 100%;
    --upaep-banner-form-content-padding: 1rem;
    --upaep-banner-form-content-bg: rgba(0, 0, 0, 0.6);
    --upaep-banner-title-fz: var(--upaep-fz56);
    --upaep-banner-title-fw: var(--upaep-fw-bold);
    --upaep-banner-title-color: var(--upaep-color-white);
    --upaep-banner-title-padding: 0;
    --upaep-banner-title-margin: 1rem;
    --upaep-banner-title-textshadow: 3px 3px 3px var(--upaep-color-black);
    --upaep-banner-subtitle-fz: var(--upaep-fz18);
    --upaep-banner-subtitle-fw: var(--upaep-fw-regular);
    --upaep-banner-subtitle-color: var(--upaep-color-white);
    --upaep-banner-subtitle-padding: 0;
    --upaep-banner-subtitle-margin: 1rem;
    --upaep-banner-subtitle-textshadow: 3px 3px 3px var(--upaep-color-black);
    --upaep-banner-text-fz: var(--upaep-fz16);
    --upaep-banner-text-fw: var(--upaep-fw-regular);
    --upaep-banner-text-color: var(--upaep-color-white);
    --upaep-banner-text-padding: 0;
    --upaep-banner-text-margin: 0;
    --upaep-banner-text-textshadow: 3px 3px 3px var(--upaep-color-black);
    width: var(--upaep-banner-width);
    height: var(--upaep-banner-height);
    padding: var(--upaep-banner-padding);
    margin: var(--upaep-banner-margin);
    background: var(--upaep-banner-bg);
}

.upaep__banner-parallax {
    position: relative;
}

.upaep__banner-inner {
    width: var(--upaep-banner-inner-width);
    height: var(--upaep-banner-inner-height);
    position: fixed;
    overflow: hidden;
}

.upaep__banner-card {
    width: var(--upaep-banner-card-width);
    height: var(--upaep-banner-card-height);
    position: relative;
}

.upaep__banner-card-overlay {
    width: var(--upaep-banner-card-overlay-width);
    height: var(--upaep-banner-card-overlay-height);
    inset: var(--upaep-banner-card-overlay-inset);
    position: absolute;
}

.upaep__banner-card-overlay .upaep__banner-card-overlay-content {
    width: var(--upaep-banner-card-overlay-content-width);
    height: var(--upaep-banner-card-overlay-content-height);
}

.upaep__banner-card.upaep__banner-underline::after {
    width: var(--upaep-banner-underline-width);
    height: var(--upaep-banner-underline-height);
    background: var(--upaep-banner-underline-bg);
    inset: var(--upaep-banner-underline-inset);
    position: absolute;
    content: "";
}

.upaep__banner-card.upaep__banner-underline.__ingenierias,
.upaep__banner-card.upaep__banner-underline.__college-engineering {
    --upaep-banner-underline-bg: var(--upaep-color-ingenierias);
}

.upaep__banner-card.upaep__banner-underline.__economico-administrativas,
.upaep__banner-card.upaep__banner-underline.__college-economic-administrative {
    --upaep-banner-underline-bg: var(--upaep-color-economico-administrativas);
}

.upaep__banner-card.upaep__banner-underline.__negocios,
.upaep__banner-card.upaep__banner-underline.__escuela-de-negocios,
.upaep__banner-card.upaep__banner-underline.__economico-negocios,
.upaep__banner-card.upaep__banner-underline.__college-business {
    --upaep-banner-underline-bg: var(--upaep-color-negocios);
}

.upaep__banner-card.upaep__banner-underline.__artes-humanidades,
.upaep__banner-card.upaep__banner-underline.__college-arts-humanities {
    --upaep-banner-underline-bg: var(--upaep-color-artes-humanidades);
}

.upaep__banner-card.upaep__banner-underline.__humana-sociales,
.upaep__banner-card.upaep__banner-underline.__ciencias-humanas-sociales,
.upaep__banner-card.upaep__banner-underline.__human-social-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-artes-humanidades);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-creativas,
.upaep__banner-card.upaep__banner-underline.__college-creative-sciences,
.upaep__banner-card.upaep__banner-underline.__creative-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciecnias-creativas);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-sociales,
.upaep__banner-card.upaep__banner-underline.__college-social-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-sociales);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-biologicas,
.upaep__banner-card.upaep__banner-underline.__college-biological-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-biologicas);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-de-la-vida-la-salud:after,
.upaep__banner-card.upaep__banner-underline.__ciencias-vida-salud,
.upaep__banner-card.upaep__banner-underline.__life-health-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-vida-salud);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-salud,
.upaep__banner-card.upaep__banner-underline.__ciencias-de-la-salud,
.upaep__banner-card.upaep__banner-underline.__college-health-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-salud);
}

.upaep__banner-card.upaep__banner-underline.__ciencias-medicas,
.upaep__banner-card.upaep__banner-underline.__college-medical-sciences {
    --upaep-banner-underline-bg: var(--upaep-color-ciencias-medicas);
}

.upaep__banner-card.upaep__banner-underline.__lenguas-cultura,
.upaep__banner-card.upaep__banner-underline.__estudios-de-lengua-cultura,
.upaep__banner-card.upaep__banner-underline.__college-languages-culture {
    --upaep-banner-underline-bg: var(--upaep-color-lenguas-cultura);
}

.upaep__banner-resource {
    width: var(--upaep-banner-resource-width);
    height: var(--upaep-banner-resource-height);
    background: var(--upaep-banner-resource-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upaep__banner-card .video-controls {
    width: auto;
    height: auto;
    position: absolute;
    inset: auto 0 5% auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.upaep__banner-card .video-controls .controls.reproduce.is-play::before {
    content: '\f144';
}

.upaep__banner-card .video-controls .controls.reproduce.is-pause::before {
    content: '\f28b';
}

.upaep__banner-card .video-controls .controls.volume.is-max::before {
    content: '\f028';
}

.upaep__banner-card .video-controls .controls.volume.is-min::before {
    content: '\f6a9';
}

.upaep__banner-card .video-controls .controls {
    width: 50px;
    height: 50px;
    font-family: var(--upaep-ff-fontawesome);
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--upaep-fz30);
    color: var(--upaep-color-white);
    filter: var(--upaep-drop-shadow);
    cursor: pointer;
    margin: .5rem;
}

.upaep__banner-resource:has(video) {
    background: var(--upaep-color-black);
}

.upaep__banner-card-form {
    width: var(--upaep-banner-form-width);
    height: var(--upaep-banner-form-height);
}

.upaep__banner-card-form .form_content {
    width: var(--upaep-banner-form-content-width);
    height: var(--upaep-banner-form-content-height);
    padding: var(--upaep-banner-form-content-padding);
    background: var(--upaep-banner-form-content-bg);
}

.upaep__banner-card-texts {
    width: 100%;
    height: 100%;
    color: var(--upaep-color-white);
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: end;
}

.upaep__banner-card-texts .upaep__banner-card-title>* {
    font-size: var(--upaep-banner-title-fz);
    font-weight: var(--upaep-banner-title-fw);
    color: var(--upaep-banner-title-color);
    padding: var(--upaep-banner-title-padding);
    margin: var(--upaep-banner-title-margin);
    text-shadow: var(--upaep-banner-title-textshadow);
    line-height: 20px;
}

.upaep__banner-card-texts .upaep__banner-card-subtitle>* {
    font-size: var(--upaep-banner-subtitle-fz);
    font-weight: var(--upaep-banner-subtitle-fw);
    color: var(--upaep-banner-subtitle-color);
    padding: var(--upaep-banner-subtitle-padding);
    margin: var(--upaep-banner-subtitle-margin);
    text-shadow: var(--upaep-banner-subtitle-textshadow);
}

.upaep__banner-card-texts p {
    font-size: var(--upaep-banner-text-fz);
    font-weight: var(--upaep-banner-text-fw);
    color: var(--upaep-banner-text-color);
    padding: var(--upaep-banner-text-padding);
    margin: var(--upaep-banner-text-margin);
    text-shadow: var(--upaep-banner-text-textshadow);
}

.upaep__banner-card a[data-upress] {
    cursor: pointer;
}

.upaep__banner-form {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 10;
}

.upaep__banner-buttons {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 10;
}

.upaep__banner-secondary {
    --upaep-banner-secondary-width: 100%;
    --upaep-banner-secondary-height: auto;
    --upaep-banner-secondary-img-width: 100%;
    --upaep-banner-secondary-img-height: auto;
    --upaep-banner-secondary-img-objectfit: contain;
    width: var(--upaep-banner-secondary-width);
    height: var(--upaep-banner-secondary-height);

    img {
        width: var(--upaep-banner-secondary-img-width);
        height: var(--upaep-banner-secondary-img-height);
        object-fit: var(--upaep-banner-secondary-img-objectfit);
    }
}

.upaep__masonry {
    --upaep-masonry-width: 100%;
    --upaep-masonry-height: auto;
    --upaep-masonry-columns: 360px 2;
    --upaep-masonry-column-gap: 20px;
    --upaep-masonry-item-width: 100%;
    --upaep-masonry-item-height: auto;
    --upaep-masonry-item-margin: 0 0 20px 0;
    --upaep-masonry-item-padding: 1rem;
    width: var(--upaep-masonry-width);
    height: var(--upaep-masonry-height);
    columns: var(--upaep-masonry-columns);
    column-gap: var(--upaep-masonry-column-gap);
    transition: all .5s;
}

.upaep__masonry-item {
    width: var(--upaep-masonry-item-width);
    height: var(--upaep-masonry-item-height);
    margin: var(--upaep-masonry-item-margin);
    padding: var(--upaep-masonry-item-padding);
    display: inline-block;
    box-sizing: border-box;
    transition: all .5s;

    &.is-inactive {
        display: none;
    }
}

.upaep__contacto {
    --upaep-contacto-width: 100%;
    --upaep-contacto-height: auto;
    --upaep-contacto-minheight: 100vh;
    --upaep-contacto-bg: var(--upaep-color-black);
    --upaep-contacto-content-width: 100%;
    --upaep-contacto-content-height: auto;
    width: var(--upaep-contacto-width);
    height: var(--upaep-contacto-height);
    min-height: var(--upaep-contacto-minheight);
    background: var(--upaep-contacto-bg);
    border-bottom: 1px solid;
}

.upaep__contacto-content {
    width: var(--upaep-contacto-content-width);
    height: var(--upaep-contacto-content-height);
    display: flex;
    justify-content: center;
}

.form_content iframe {
    width: 100%;
    height: 85vh;
}

.formContacto {
    width: 80%;
    height: 100%;
    border-radius: 10px;
    padding: 1rem;
    background: var(--colordark);

    & .ratio {
        height: 75vh;
    }

    & iframe {
        height: 100%;
    }

    &:has(.g-recaptcha) {
        iframe {
            height: 80px;
        }
    }
}

.upaep__asesor-content {
    width: 100%;
}

.upaep__contacta-asesor {
    width: 100%;
    height: 100%;
    background: var(--colordark);
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.asesor_line {
    --upaep-line-width: 85%;
    --upaep-line-bg: var(--upaep-color-white);
    --upaep-line-border-color: var(--upaep-color-white);
    --upaep-line-border-radius: 10px;
    -margin: 1rem auto;
}

.upaep__contacta-info,
.upaep__contacta-form {
    --upaep-contacta-info-width: 100%;
    --upaep-contacta-info-height: 100%;
    width: var(--upaep-contacta-info-width);
    height: var(--upaep-contacta-info-height);
}

.upaep__contacta-info-item {
    --upaep-contacta-info-item-width: auto;
    --upaep-contacta-info-item-height: auto;
    --upaep-contacta-info-item-padding: 0 1rem;
    --upaep-contacta-info-item-margin: 1rem;
    --upaep-contacta-info-itemimg-width: 60px;
    --upaep-contacta-info-itemimg-img-width: 60px;
    --upaep-contacta-info-itemimg-img-height: 60px;
    --upaep-contacta-info-itemimg-img-margin: 0 auto;
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz18);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-regular);
    --upaep-contacta-info-itemtext-text-color: var(--upaep-color-white);
    --upaep-contacta-info-itemtext-text-padding: 0;
    --upaep-contacta-info-itemtext-text-margin: 0;
    width: var(--upaep-contacta-info-item-width);
    height: var(--upaep-contacta-info-item-height);
    padding: var(--upaep-contacta-info-item-padding);
    margin: var(--upaep-contacta-info-item-margin);
    display: flex;
    align-items: center;
    gap: 10px;

    & a {
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    & .upaep__contacta-info-img {
        width: var(--upaep-contacta-info-itemimg-width);

        & img {
            width: var(--upaep-contacta-info-itemimg-img-width);
            height: var(--upaep-contacta-info-itemimg-img-height);
            margin: var(--upaep-contacta-info-itemimg-img-margin);
            display: block;
        }
    }

    & .upaep__contacta-info-text {
        width: 90%;

        & p,
        & p a {
            font-size: var(--upaep-contacta-info-itemtext-text-fz);
            font-weight: var(--upaep-contacta-info-itemtext-text-fw);
            color: var(--upaep-contacta-info-itemtext-text-color);
            padding: var(--upaep-contacta-info-itemtext-text-padding);
            margin: var(--upaep-contacta-info-itemtext-text-margin);
        }
    }

    & .upaep__btn {
        --upaep-btn-margin: 0;
        max-width: 165px;
    }
}

.upaep__contacta-info-item.__whats {
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz28);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-bold);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__saludo {
    color: var(--upaep-color-red);
    font-size: var(--upaep-fz28);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__encargado {
    color: var(--upaep-color-white);
    font-size: var(--upaep-fz18);
}

.upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__text {
    color: var(--upaep-color-white);
    font-size: var(--upaep-fz18);
    font-weight: bold;
}

.upaep__contacta-info-item.__tel {
    --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz28);
    --upaep-contacta-info-itemtext-text-fw: var(--upaep-fw-bold);
}

.upaep__contacta-horario {
    padding: 1rem;
    width: 80%;

    & .__text {
        font-size: var(--upaep-fz22);
        color: var(--upaep-color-white);
    }

    & .__horario {
        font-size: var(--upaep-fz22);
        color: var(--upaep-color-white);
        font-weight: bold;
    }
}

.upaep__formulario {
    --upaep-formulario-width: 100%;
    --upaep-formulario-height: auto;
    --upaep-formulario-padding: 2rem;
    --upaep-formulario-margin: 0;
    --upaep-formulario-bg: transparent;
    --upaep-formulario-border-size: 1px;
    --upaep-formulario-border-style: solid;
    --upaep-formulario-border-color: var(--upaep-color-border-grey);
    --upaep-formulario-border-radius: 10px;
    width: var(--upaep-formulario-width);
    height: var(--upaep-formulario-height);
    padding: var(--upaep-formulario-padding);
    margin: var(--upaep-formulario-margin);
    background: var(--upaep-formulario-bg);
    border: var(--upaep-formulario-border-size) var(--upaep-formulario-border-style) var(--upaep-formulario-border-color);
    border-radius: var(--upaep-formulario-border-radius);
}

.upaep__container,
.upaep__container-fluid,
.upaep__container-xxl,
.upaep__container-xl,
.upaep__container-lg,
.upaep__container-md,
.upaep__container-sm {
    width: 100%;
    padding: 0 calc(1.5rem * 0.5) 0 calc(1.5rem * 0.5);
    margin: 0 auto;
}

.upaep__group {
    --upaep-group-count-width: 25px;
    --upaep-group-count-height: 25px;
    --upaep-group-count-padding: .5rem;
    --upaep-group-count-margin: 0;
    --upaep-group-count-border-radius: 50%;
    --upaep-group-count-bg: var(--upaep-color-blue-primary);
    --upaep-group-count-fz: var(--upaep-fz18);
    --upaep-group-count-fw: var(--upaep-fw-normal);
    --upaep-group-count-color: var(--upaep-color-white);

    .upaep__group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        font-size: var(--upaep-fz20);
        font-weight: var(--upaep-fw-bold);
        margin: 0 0 .5rem 0;

        .upaep__group-title {
            display: flex;
            gap: 5px;
        }

        .upaep__group-count {
            width: var(--upaep-group-count-width);
            height: var(--upaep-group-count-height);
            padding: var(--upaep-group-count-padding);
            margin: var(--upaep-group-count-margin);
            border-radius: var(--upaep-group-count-border-radius);
            background: var(--upaep-group-count-bg);
            font-size: var(--upaep-group-count-fz);
            font-weight: var(--upaep-group-count-fw);
            color: var(--upaep-group-count-color);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
        }

        .upaep__group-text {
            color: var(--upaep-color-black);
        }
    }

    .upaep__group-inputs {
        width: 100%;
    }

    .upaep__group-inputs-duplicate {
        width: 100%;
    }

    .upaep__group-button {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-margin: 0 0 1rem 0;

            .__icon-plus {
                width: 20px;
                height: 20px;
            }
        }
    }

    .upaep__group-text {
        color: var(--upaep-color-dark-grey);
        font-size: var(--upaep-fz18);
        font-weight: var(--upaep-fw-regular);
    }
}

.upaep__clone-nodes {
    --upaep-clone-nodes-margin: 1rem 0;
    --upaep-clone-nodes-padding: .5rem;
    --upaep-clone-nodes-bg: ;
    --upaep-clone-nodes-border-size: ;
    --upaep-clone-nodes-border-style: ;
    --upaep-clone-nodes-border-color: ;
    --upaep-clone-nodes-border-radius: 10px;
    --upaep-clone-counter-padding: 0 .75rem;
    --upaep-clone-counter-margin: 0;
    --upaep-clone-counter-fz: var(--upaep-fz16);
    --upaep-clone-counter-fw: var(--upaep-fw-semibold);
    --upaep-clone-counter-color: var(--upaep-color-white);
    --upaep-clone-counter-bg: var(--upaep-color-blue-primary);
    --upaep-clone-counter-border-radius: 50px;
    --upaep-clone-counter-minwidth: 30px;
    --upaep-clone-counter-minheight: 30px;
    --upaep-clone-node-width: 100%;
    --upaep-clone-node-col: 1;
    --upaep-clone-node-gap: 10px;
    --upaep-clone-node-margin: 0;
    --upaep-clone-node-header-padding: 0 0 .25rem 0;
    --upaep-clone-node-header-bg: ;
    --upaep-clone-node-header-borde-bottom-size: 2px;
    --upaep-clone-node-header-borde-bottom-style: solid;
    --upaep-clone-node-header-borde-bottom-color: #dbdcdd;
    --upaep-clone-node-title-fz: var(--upaep-fz18);
    --upaep-clone-node-title-fw: var(--upaep-fw-bold);
    --upaep-clone-node-title-color: var(--upaep-color-dark-grey);
    --upaep-clone-node-inner-bg: ;
    --upaep-clone-node-inner-margin: 0;
    --upaep-clone-node-inner-padding: .5rem 0 0 0;
    width: 100%;
    height: auto;
    margin: var(--upaep-clone-nodes-margin);
    padding: var(--upaep-clone-nodes-padding);
    background: var(--upaep-clone-nodes-bg);
    border: var(--upaep-clone-nodes-border-size) var(--upaep-clone-nodes-border-style) var(--upaep-clone-nodes-border-color);
    border-radius: var(--upaep-clone-nodes-border-radius);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .upaep__clone-nodes-wrapper {
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &> :only-child {
            .upaep__clone-node-delete {
                display: none;
            }
        }
    }

    &.is-group {
        .upaep__clone-nodes-wrapper {
            display: flex;
            flex-direction: row;
            gap: var(--upaep-clone-node-gap);
            flex-wrap: wrap;
        }

        .upaep__clone-node {
            --upaep-clone-node-width: calc(100% / 12 * calc(12 / var(--upaep-clone-node-col)) - var(--upaep-clone-node-gap));
        }
    }

    &.is-inline {
        &:has(.upaep__clone-node-inner> :only-child) {
            .upaep__clone-node {
                align-items: center;
            }

            .upaep__clone-node-delete {
                margin: 0;
            }
        }

        .upaep__clone-node-delete {
            margin: .5rem 0 0 0;
        }

        .upaep__clone-node-header {
            display: none;
        }
    }

    .upaep__clone-node {
        width: var(--upaep-clone-node-width);
        gap: var(--upaep-clone-node-gap);
        margin: var(--upaep-clone-node-margin);
        display: flex;
        align-items: start;
    }

    .upaep__clone-node-counter {
        padding: var(--upaep-clone-counter-padding);
        margin: var(--upaep-clone-counter-margin);
        font-size: var(--upaep-clone-counter-fz);
        font-weight: var(--upaep-clone-counter-fw);
        color: var(--upaep-clone-counter-color);
        background: var(--upaep-clone-counter-bg);
        border-radius: var(--upaep-clone-counter-border-radius);
        min-width: var(--upaep-clone-counter-minwidth);
        min-height: var(--upaep-clone-counter-minheight);
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .upaep__clone-node-header {
        gap: var(--upaep-clone-node-gap);
        padding: var(--upaep-clone-node-header-padding);
        background: var(--upaep-clone-node-header-bg);
        border-bottom: var(--upaep-clone-node-header-borde-bottom-size) var(--upaep-clone-node-header-borde-bottom-style) var(--upaep-clone-node-header-borde-bottom-color);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__clone-node-title {
        font-size: var(--upaep-clone-node-title-fz);
        font-weight: var(--upaep-clone-node-title-fw);
        color: var(--upaep-clone-node-title-color);
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .upaep__clone-node-header-template {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .upaep__clone-node-wrapper {
        width: 100%;
    }

    .upaep__clone-node-inner {
        width: 100%;
        background: var(--upaep-clone-node-inner-bg);
        margin: var(--upaep-clone-node-inner-margin);
        padding: var(--upaep-clone-node-inner-padding);
    }

    .upaep__clone-node-template {
        width: 100%;
    }

    .upaep__clone-node-delete {
        width: auto;
        flex: 0 0 auto;
        animation: a_fadeIn .3s ease-in-out;
    }

    .upaep__clone-nodes-button {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }
    }
}

/*? ------ Tipografía ------ */

/*? html tag */
h1,
.upaep__h1 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-semibold);
    --h-fz: var(--upaep-fz48);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h2,
.upaep__h2 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-regular);
    --h-fz: var(--upaep-fz34);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h3,
.upaep__h3 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-bold);
    --h-fz: var(--upaep-fz24);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

/*? html tag */
h4,
.upaep__h4 {
    --h-color: inset;
    --h-fw: var(--upaep-fw-medium);
    --h-fz: var(--upaep-fz20);
    --h-lineheight: 1.2;
    --h-margin: 0 0 .5rem 0;
    color: var(--h-color);
    font-size: var(--h-fz);
    font-weight: var(--h-fw);
    line-height: var(--h-lineheight);
    margin: var(--h-margin);
}

.upaep__title {
    --upaep-title-color: var(--upaep-color-blue-primary);
    --upaep-title-fw: var(--upaep-fw-semibold);
    --upaep-title-fz: var(--upaep-fz48);
    --upaep-title-lineheight: 1.2;
    --upaep-title-margin: 0 0 .5rem 0;
    --upaep-title-padding: 0;
    --upaep-title-align: center;
    color: var(--upaep-title-color);
    font-size: var(--upaep-title-fz);
    font-weight: var(--upaep-title-fw);
    line-height: var(--upaep-title-lineheight);
    margin: var(--upaep-title-margin);
    padding: var(--upaep-title-padding);
    text-align: var(--upaep-title-align);
}

.upaep__subtitle {
    --upaep-subtitle-color: var(--upaep-color-black);
    --upaep-subtitle-fw: var(--upaep-fw-regular);
    --upaep-subtitle-fz: var(--upaep-fz16);
    --upaep-subtitle-lineheight: 1.2;
    --upaep-subtitle-margin: 0 0 .5rem 0;
    --upaep-subtitle-padding: 0;
    --upaep-subtitle-align: center;
    color: var(--upaep-subtitle-color);
    font-size: var(--upaep-subtitle-fz);
    font-weight: var(--upaep-subtitle-fw);
    line-height: var(--upaep-subtitle-lineheight);
    margin: var(--upaep-subtitle-margin);
    padding: var(--upaep-subtitle-padding);
    text-align: var(--upaep-subtitle-align);
}

.upaep__subtitle-2 {
    --upaep-subtitle-color: var(--upaep-color-black);
    --upaep-subtitle-fw: var(--upaep-fw-regular);
    --upaep-subtitle-fz: var(--upaep-fz14);
    --upaep-subtitle-lineheight: 1.2;
    --upaep-subtitle-margin: 0 0 .5rem 0;
    --upaep-subtitle-padding: 0;
    --upaep-subtitle-align: start;
    color: var(--upaep-subtitle-color);
    font-size: var(--upaep-subtitle-fz);
    font-weight: var(--upaep-subtitle-fw);
    line-height: var(--upaep-subtitle-lineheight);
    margin: var(--upaep-subtitle-margin);
    padding: var(--upaep-subtitle-padding);
    text-align: var(--upaep-subtitle-align);
}

.upaep__text {
    --upaep-text-color: inset;
    --upaep-text-fw: var(--upaep-fw-medium);
    --upaep-text-fz: var(--upaep-fz16);
    --upaep-text-margin: 0 0 .5rem 0;
    --upaep-text-padding: 0;
    --upaep-text-align: start;
    color: var(--upaep-text-color);
    font-size: var(--upaep-text-fz);
    font-weight: var(--upaep-text-fw);
    margin: var(--upaep-text-margin);
    padding: var(--upaep-text-padding);
    text-align: var(--upaep-text-align);
}

.upaep__subtext {
    --upaep-subtext-color: inset;
    --upaep-subtext-fw: var(--upaep-fw-medium);
    --upaep-subtext-fz: var(--upaep-fz14);
    --upaep-subtext-margin: 0 0 .5rem 0;
    --upaep-subtext-padding: 0;
    --upaep-subtext-align: start;
    color: var(--upaep-subtext-color);
    font-size: var(--upaep-subtext-fz);
    font-weight: var(--upaep-subtext-fw);
    padding: var(--upaep-subtext-padding);
    text-align: var(--upaep-subtext-align);
}

.upaep__caption {
    --upaep-caption-color: var(--upaep-color-black);
    --upaep-caption-fw: var(--upaep-fw-medium);
    --upaep-caption-fz: var(--upaep-fz12);
    --upaep-caption-margin: 0 0 .5rem 0;
    color: var(--upaep-caption-color);
    font-size: var(--upaep-caption-fz);
    font-weight: var(--upaep-caption-fw);
}

.upaep__overline {
    --upaep-overline-color: var(--upaep-color-black);
    --upaep-overline-fw: var(--upaep-fw-medium);
    --upaep-overline-fz: var(--upaep-fz10);
    --upaep-overline-margin: 0 0 .5rem 0;
    color: var(--upaep-overline-color);
    font-size: var(--upaep-overline-fz);
    font-weight: var(--upaep-overline-fw);
}

.upaep__line {
    --upaep-line-width: 100%;
    --upaep-line-height: 5px;
    --upaep-line-bg: var(--upaep-color-red);
    --upaep-line-opacity: 1;
    --upaep-line-border-size: 1px;
    --upaep-line-border-style: solid;
    --upaep-line-border-color: var(--upaep-color-red);
    --upaep-line-border-radius: 0;
    width: var(--upaep-line-width);
    height: var(--upaep-line-height);
    background: var(--upaep-line-bg);
    opacity: var(--upaep-line-opacity);
    border: var(--upaep-line-border-size) var(--upaep-line-border-style) var(--upaep-line-border-color);
    border-radius: var(--upaep-line-border-radius);
}

/*? ------ Button ------ */
.upaep__btn {
    --upaep-btn-width: auto;
    --upaep-btn-height: auto;
    --upaep-btn-padding: .625rem 1.5rem;
    --upaep-btn-margin: 1rem;
    --upaep-btn-border-size: 1px;
    --upaep-btn-border-color: var(--upaep-color-background);
    --upaep-btn-border-radius: 10px;
    --upaep-btn-text-align: center;
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-fw: var(--upaep-fw-medium);
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-cont-fw: var(--upaep-fw-regular);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-bg: var(--upaep-color-background);
    --upaep-btn-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-btn-hover-border-size: 1px;
    --upaep-btn-hover-border-color: var(--upaep-color-tenue-gray);
    --upaep-btn-hover-color: ;
    --upaep-btn-disabled-bg: var(--upaep-color-background);
    --upaep-btn-disabled-border-color: var(--upaep-color-background);
    --upaep-btn-opacity-disabled: .6;
    --upaep-btn-color-underline: var(--upaep-color-red);
    --upaep-btn-icon-left: ;
    --upaep-btn-icon-left-color: ;
    --upaep-btn-icon-right: ;
    --upaep-btn-icon-right-color: ;
    font-size: var(--upaep-btn-fz);
    font-weight: var(--upaep-btn-fw);
    color: var(--upaep-btn-color);
    border: var(--upaep-btn-border-size) solid var(--upaep-btn-border-color);
    width: var(--upaep-btn-width);
    height: var(--upaep-btn-height);
    padding: var(--upaep-btn-padding);
    margin: var(--upaep-btn-margin);
    background: var(--upaep-btn-bg);
    border-radius: var(--upaep-btn-border-radius);
    text-align: var(--upaep-btn-text-align);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    opacity: var(--upaep-btn-opacity);
    gap: 5px;
    position: relative;
    overflow: hidden;

    & p,
    & a,
    & span {
        margin: 0;
        text-decoration: none;
        color: var(--upaep-btn-cont-color);
        font-size: var(--upaep-btn-cont-fz);
        font-weight: var(--upaep-btn-cont-fw);
    }

    &>p::before,
    &>a::before,
    &>span::before {
        content: var(--upaep-btn-icon-left);
        font-family: var(--upaep-ff-fontawesome);
        color: var(--upaep-btn-icon-left-color);
        margin: 0 .5rem;
    }

    &>p::after,
    &>a::after,
    &>span::after {
        content: var(--upaep-btn-icon-right);
        font-family: var(--upaep-ff-fontawesome);
        color: var(--upaep-btn-icon-right-color);
        margin: 0 .5rem;
    }

    &:hover p,
    &:hover a,
    &:hover span {
        color: var(--upaep-btn-hover-cont-color);
    }

    &:hover {
        color: var(--upaep-btn-hover-color);
        background: var(--upaep-btn-hover-bg);
        border: var(--upaep-btn-hover-border-size) solid var(--upaep-btn-hover-border-color);
    }

    &:disabled {
        color: var(--upaep-btn-disabled-color);
        background: var(--upaep-btn-disabled-bg);
        border: var(--upaep-btn-border-size) solid var(--upaep-btn-disabled-border-color);
        opacity: var(--upaep-btn-opacity-disabled);
        pointer-events: none;
    }

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 70%);
    }
}

.upaep__btn.__icon-left-plus {
    --upaep-btn-icon-left: '\2b';
}

.upaep__btn.__icon-right-plus {
    --upaep-btn-icon-right: '\2b';
}

.upaep__btn.__icon-left-carret {
    --upaep-btn-icon-left: '\f0d9';
}

.upaep__btn.__icon-right-carret {
    --upaep-btn-icon-right: '\f0da';
}

.upaep__btn.__icon-left-arrow {
    --upaep-btn-icon-left: '\f060';
}

.upaep__btn.__icon-right-arrow {
    --upaep-btn-icon-right: '\f061';
}

.upaep__btn.__icon-left-check {
    --upaep-btn-icon-left: '\f00c';
}

.upaep__btn.__icon-right-check {
    --upaep-btn-icon-right: '\f00c';
}

.upaep__btn.__icon-left-circle-check {
    --upaep-btn-icon-left: '\f058';
}

.upaep__btn.__icon-right-circle-check {
    --upaep-btn-icon-right: '\f058';
}

.upaep__btn.__icon-left-xmark {
    --upaep-btn-icon-left: '\f00d';
}

.upaep__btn.__icon-right-xmark {
    --upaep-btn-icon-right: '\f00d';
}

.upaep__btn.__icon-left-circle-xmark {
    --upaep-btn-icon-left: '\f057';
}

.upaep__btn.__icon-right-circle-xmark {
    --upaep-btn-icon-right: '\f057';
}

.upaep__btn.__rounded {
    --upaep-btn-border-radius: 50px;
}

.upaep__btn.__sm {
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-width: 130px;
}

.upaep__btn.__lg {
    --upaep-btn-fz: var(--upaep-fz16);
    --upaep-btn-width: 282px;
}

.upaep__btn.__my-0 {
    --upaep-btn-margin: 0 1rem;
}

.upaep__btn.__mx-0 {
    --upaep-btn-margin: 1rem 0;
}

.upaep__btn.__m-0 {
    --upaep-btn-margin: 0;
}

a.upaep__underline,
p.upaep__underline,
.upaep__btn.upaep__underline,
.upaep__btn.__underline,
a.__underline,
p.__underline {
    position: relative;
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: var(--upaep-color-none);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-color-none);
    --upaep-btn-hover-border-color: var(--upaep-color-color-none);
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-none);
    --upaep-btn-disabled-border-color: var(--upaep-color-none);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 0;

    &::before,
    &::before,
    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        transform: scaleX(0);
        background-color: var(--upaep-btn-color-underline);
        transform-origin: bottom center;
        transition: transform .25s ease-out;
        z-index: 5;
    }

    &:hover::before,
    &:hover::before,
    &:hover::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}


a.upaep__link,
p.upaep__link,
a.__link,
p.__link {
    --upaep-link-fz: var(--upaep-fz18);
    --upaep-link-fw: var(--upaep-fw-bold);
    --upaep-link-color: var(--upaep-color-black);
    --upaep-link-color-underline: var(--upaep-color-red);
    --upaep-link-margin: 1rem;
    --upaep-link-icon: ;
    --upaep-link-icon-color: var(--upaep-color-red);
    --upaep-link-icon-margin: 0 5px;
    font-size: var(--upaep-link-fz);
    font-weight: var(--upaep-link-fw);
    color: var(--upaep-link-color);
    margin: var(--upaep-link-margin);
    position: relative;
    text-decoration: none;
    cursor: pointer;

    &::before,
    &::before {
        content: "";
        position: absolute;
        inset: auto auto -1px 0;
        height: 3px;
        width: 100%;
        transform: scaleX(0);
        background-color: var(--upaep-link-color-underline);
        transform-origin: bottom center;
        transition: transform .25s ease-out;
        z-index: 5;
    }

    &:hover::before,
    &:hover::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }

    &::after {
        content: var(--upaep-link-icon);
        color: var(--upaep-link-icon-color);
        margin: var(--upaep-link-icon-margin);
        font-family: var(--upaep-ff-fontawesome);
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
    }

    &.__icon-arrow {
        --upaep-link-icon: '\f061';
    }

    &.__icon-circle-arrow {
        --upaep-link-icon: '\f0a9';
    }

    &.__icon-chevron {
        --upaep-link-icon: '\f054';
    }

    &.__icon-circle-chevron {
        --upaep-link-icon: '\f138';
    }
}

.upaep__btn.__primary {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-primary);
    --upaep-btn-border-color: var(--upaep-color-primary);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-primary);
    --upaep-btn-disabled-border-color: var(--upaep-color-primary);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(150, 8, 29) 0, rgba(150, 8, 29) 40%, rgba(150, 8, 29) 50%, rgba(150, 8, 29) 60%, rgba(150, 8, 29) 70%);
    }
}

.upaep__btn.__secondary {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: var(--upaep-color-secondary);
    --upaep-btn-border-color: var(--upaep-color-secondary);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-secondary-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-secondary-hover);
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-secondary);
    --upaep-btn-disabled-border-color: var(--upaep-color-secondary);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(205, 135, 1) 0, rgba(205, 135, 1) 40%, rgba(205, 135, 1) 50%, rgba(205, 135, 1) 60%, rgba(205, 135, 1) 70%);
    }
}

.upaep__btn.__tertiary {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: var(--upaep-color-tertiary);
    --upaep-btn-border-color: var(--upaep-color-tertiary);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-tertiary-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-tertiary-hover);
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-tertiary);
    --upaep-btn-disabled-border-color: var(--upaep-color-tertiary);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(136, 136, 136) 0, rgba(136, 136, 136) 40%, rgba(136, 136, 136) 50%, rgba(136, 136, 136) 60%, rgba(136, 136, 136) 70%);
    }
}

.upaep__btn.__blue {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-blue-primary);
    --upaep-btn-border-color: var(--upaep-color-blue-primary);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-blue-primary-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-blue-primary-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-blue-primary);
    --upaep-btn-disabled-border-color: var(--upaep-color-blue-primary);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(26, 46, 81) 0, rgba(26, 46, 81) 40%, rgba(26, 46, 81) 50%, rgba(26, 46, 81) 60%, rgba(26, 46, 81) 70%);
    }
}

.upaep__btn.__grey {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--colordark3);
    --upaep-btn-border-color: var(--colordark3);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #3e3e3e;
    --upaep-btn-hover-border-color: #3e3e3e;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--colordark3);
    --upaep-btn-disabled-border-color: var(--colordark3);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(93, 93, 93) 0, rgba(93, 93, 93) 40%, rgba(93, 93, 93) 50%, rgba(93, 93, 93) 60%, rgba(93, 93, 93) 70%);
    }
}

.upaep__btn.__black {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-black);
    --upaep-btn-border-color: var(--upaep-color-black);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #292929;
    --upaep-btn-hover-border-color: #292929;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-black);
    --upaep-btn-disabled-border-color: var(--upaep-color-black);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(61, 61, 61) 0, rgba(61, 61, 61) 40%, rgba(61, 61, 61) 50%, rgba(61, 61, 61) 60%, rgba(61, 61, 61) 70%);
    }
}

.upaep__btn.__dark {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: #212529;
    --upaep-btn-border-color: #212529;
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: #424649;
    --upaep-btn-hover-border-color: #424649;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: #212529;
    --upaep-btn-disabled-border-color: #212529;

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(36, 38, 40)0, rgba(36, 38, 40)40%, rgba(36, 38, 40)50%, rgba(36, 38, 40)60%, rgba(36, 38, 40)70%);
    }
}

.upaep__btn.__light {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: #f8f9fa;
    --upaep-btn-border-color: #f8f9fa;
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: #d3d4d5;
    --upaep-btn-hover-border-color: #d3d4d5;
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: #f8f9fa;
    --upaep-btn-disabled-border-color: #f8f9fa;

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(171, 173, 175) 0, rgba(171, 173, 175) 40%, rgba(171, 173, 175) 50%, rgba(171, 173, 175) 60%, rgba(171, 173, 175) 70%);
    }
}

.upaep__btn.__error {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-error);
    --upaep-btn-border-color: var(--upaep-color-error);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-error-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-error-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-error);
    --upaep-btn-disabled-border-color: var(--upaep-color-error);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(153, 24, 44) 0, rgba(153, 24, 44) 40%, rgba(153, 24, 44) 50%, rgba(153, 24, 44) 60%, rgba(153, 24, 44) 70%);
    }
}

.upaep__btn.__success {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-success);
    --upaep-btn-border-color: var(--upaep-color-success);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-success-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-success-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-success);
    --upaep-btn-disabled-border-color: var(--upaep-color-success);

    .circle-ripple {
        color: rgba(28, 121, 50);
        --upaep-ripple-bg: radial-gradient(circle, rgba(28, 121, 50) 0, rgba(28, 121, 50) 40%, rgba(28, 121, 50) 50%, rgba(28, 121, 50) 60%, rgba(28, 121, 50) 70%);
    }
}

.upaep__btn.__warning {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: var(--upaep-color-warning);
    --upaep-btn-border-color: var(--upaep-color-warning);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-warning-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-warning-hover);
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-warning);
    --upaep-btn-disabled-border-color: var(--upaep-color-warning);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(206, 138, 0) 0, rgba(206, 138, 0) 40%, rgba(206, 138, 0) 50%, rgba(206, 138, 0) 60%, rgba(206, 138, 0) 70%);
    }
}

.upaep__btn.__sky,
.upaep__btn.__blue-sky {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-blue-sky);
    --upaep-btn-border-color: var(--upaep-color-blue-sky);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-blue-sky-hover);
    --upaep-btn-hover-border-color: var(--upaep-color-blue-sky-hover);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-blue-sky);
    --upaep-btn-disabled-border-color: var(--upaep-color-blue-sky);

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(49, 83, 156) 0, rgba(49, 83, 156) 40%, rgba(49, 83, 156) 50%, rgba(49, 83, 156) 60%, rgba(49, 83, 156) 70%);
    }
}

.upaep__btn.__slice {
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    transition: width 1s;
    justify-content: start;

    & img {
        width: 55px;
        height: 55px;
        padding: .5rem;
        margin: 0 .2rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }

}

.upaep__btn.__contacto {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-red);
    --upaep-btn-border-color: var(--upaep-color-red);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-red);
    --upaep-btn-hover-border-color: var(--upaep-color-red);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-red);
    --upaep-btn-disabled-border-color: var(--upaep-color-red);
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    position: fixed;
    z-index: var(--upaep-zindex-btn-float);
    inset: auto 0 0 auto;
    transition: width 1s;
    justify-content: start;

    & img {
        width: 45px;
        height: 45px;
        padding: 0;
        margin: 0 .5rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(171, 9, 27) 0, rgba(171, 9, 27) 40%, rgba(171, 9, 27) 50%, rgba(171, 9, 27) 60%, rgba(171, 9, 27) 70%);
    }
}

.upaep__btn.__whats {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-whats);
    --upaep-btn-bg: var(--upaep-color-whats);
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-whats);
    --upaep-btn-hover-border-color: var(--upaep-color-whats);
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-whats);
    --upaep-btn-disabled-border-color: var(--upaep-color-whats);
    --upaep-btn-width: 60px;
    --upaep-btn-height: 60px;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 1rem;
    --upaep-btn-width-transition: 170px;
    box-shadow: var(--upaep-box-shadow);
    overflow: hidden;
    position: fixed;
    z-index: var(--upaep-zindex-btn-float);
    inset: auto 0 10% auto;
    transition: width 1s;
    justify-content: start;

    & img {
        width: 45px;
        height: 45px;
        padding: 0;
        margin: 0 .5rem;
        object-fit: cover;
    }

    & span {
        max-width: 0;
        font-size: var(--upaep-fz20);
        color: var(--upaep-color-white);
        margin: 0 5px;
    }

    &:hover {
        width: var(--upaep-btn-width-transition);
    }

    .circle-ripple {
        --upaep-ripple-bg: radial-gradient(circle, rgba(22, 163, 75) 0, rgba(22, 163, 75) 40%, rgba(22, 163, 75) 50%, rgba(22, 163, 75) 60%, rgba(22, 163, 75) 70%);
    }
}

.upaep__btn.__flotante {
    --upaep-btn-position: fixed;
    --upaep-btn-inset: 10% 0 0 10%;
    position: var(--upaep-btn-position);
    inset: var(--upaep-btn-inset);
    z-index: var(--upaep-zindex-btn-float);
}

.upaep__btn-up {
    position: fixed;
    bottom: 5%;
    right: 0;
    display: none;
    cursor: pointer;
    z-index: 100;
    background: none;
    border: none;

    &::before {
        font-family: 'FontAwesome';
        content: '\f139';
        color: var(--upaep-color-red);
        font-size: 3rem;
        margin: 0 15px;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    }
}

.upaep__btn-down {
    position: absolute;
    bottom: 5%;
    left: 46%;
    cursor: pointer;
    background: none;
    border: none;

    &::before {
        font-family: 'FontAwesome';
        content: '\f103';
        color: var(--upaep-color-white);
        font-size: 3rem;
        margin: 0 15px;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    }
}

.upaep__btn.__tab {
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-bg: var(--upaep-color-red);
    --upaep-btn-border-color: none;
    --upaep-btn-border-radius: 10px 10px 0 0;
    --upaep-btn-hover-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-red);
    --upaep-btn-hover-border-color: none;
    --upaep-btn-hover-border-radius: 10px 10px 0 0;
    --upaep-btn-disabled-color: var(--upaep-color-white);
    --upaep-btn-disabled-bg: var(--upaep-color-red);
    --upaep-btn-disabled-border-color: var(--upaep-color-red);

    &:not(.is-active) {
        --upaep-btn-bg: none;
    }
}

.upaep__btn.__modalidad {
    min-width: 100px;
    --upaep-btn-height: 25px;
    --upaep-btn-padding: 0;
    --upaep-btn-color: var(--upaep-color-light-grey);
    --upaep-btn-cont-color: var(--upaep-color-light-grey);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-light-grey);
    --upaep-btn-border-radius: 10px 10px 0 0;
    --upaep-btn-hover-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-border-radius: 10px 10px 0 0;
    --upaep-btn-disabled-color: var(--upaep-color-light-grey);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-light-grey);
}

.upaep__btn.__menu {
    --upaep-btn-width: 165px;
    --upaep-btn-height: 35px;
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-cont-fw: var(--upaep-fw-bold);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-border-radius: 50px;
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-white);
    --upaep-btn-hover-border-radius: 50px;
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-light-grey);

    & a {
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-direction: row-reverse;
        padding: 0;
    }

    & img {
        height: 25px;
        width: 25px;
        margin: 5px;
    }

    & span {
        font-size: var(--upaep-fz14);
    }
}

.upaep__btn.__back {
    --upaep-btn-width: 35px;
    --upaep-btn-height: 35px;
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .5rem;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-color: var(--upaep-color-red);
    --upaep-btn-cont-color: var(--upaep-color-red);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-hover-color: var(--upaep-color-red);
    --upaep-btn-hover-bg: var(--upaep-color-background);
    --upaep-btn-hover-border-color: var(--upaep-color-background);
    --upaep-btn-disabled-color: var(--upaep-color-red);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-white);
    box-shadow: var(--upaep-box-shadow);

    &.__back-top {
        position: fixed;
        inset: auto 10px 10px auto;

        .__icon-back {
            rotate: 90deg;
        }
    }
}

.upaep__btn.__delete {
    --upaep-btn-width: 35px;
    --upaep-btn-height: 35px;
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .5rem;
    --upaep-btn-border-radius: 50px;
    --upaep-btn-color: var(--upaep-color-red);
    --upaep-btn-cont-color: var(--upaep-color-red);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-hover-color: var(--upaep-color-red);
    --upaep-btn-hover-bg: var(--upaep-color-background);
    --upaep-btn-hover-border-color: var(--upaep-color-background);
    --upaep-btn-disabled-color: var(--upaep-color-red);
    --upaep-btn-disabled-bg: var(--upaep-color-white);
    --upaep-btn-disabled-border-color: var(--upaep-color-white);

    img {
        width: 25px;
        height: 25px;
    }
}

.upaep__btn.__spinner-inactive {
    .__spinner {
        display: none;
    }
}


.upaep__btn.__radio {
    --upaep-btn-margin: 0;
    --upaep-btn-checked-color: var(--upaep-color-white);
    --upaep-btn-checked-bg: var(--upaep-color-dark-grey);
    --upaep-btn-checked-border-color: var(--upaep-color-dark-grey);
    transition: background .5s, color .5s;

    input[type="radio"] {
        display: none;
    }

    &:has(input[type="radio"]:checked) {
        transition: background .5s, color .5s;
        color: var(--upaep-btn-checked-color);
        background: var(--upaep-btn-checked-bg);
        border-color: var(--upaep-btn-checked-border-color);
    }

    &:has(input[type="radio"]:invalid) {
        transition: background .5s, color .5s;
        border-color: var(--upaep-color-error);
    }

    &:has(input[type="radio"]:valid) {
        transition: background .5s, color .5s;
        border-color: var(--upaep-color-success);
    }
}

.upaep__btn.__checkbox {
    --upaep-btn-margin: 0;
    --upaep-btn-checked-color: var(--upaep-color-white);
    --upaep-btn-checked-bg: var(--upaep-color-dark-grey);
    --upaep-btn-checked-border-color: var(--upaep-color-dark-grey);
    transition: background .5s, color .5s;

    input[type="checkbox"] {
        display: none;
    }

    &:has(input[type="checkbox"]:checked) {
        transition: background .5s, color .5s;
        color: var(--upaep-btn-checked-color);
        background: var(--upaep-btn-checked-bg);
        border-color: var(--upaep-btn-checked-border-color);
    }

    &:has(input[type="checkbox"]:invalid) {
        transition: background .5s, color .5s;
        border-color: var(--upaep-color-error);
    }

    &:has(input[type="checkbox"]:valid) {
        transition: background .5s, color .5s;
        border-color: var(--upaep-color-success);
    }
}

/*? ------ Button Group ------ */
.upaep__btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;

    &.__separate {
        gap: .8rem
    }

    &.__vertical {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    &.__divisor {
        --divisor-width: 1px;
        --divisor-height: 25px;
        --divisor-bg: var(--upaep-color-tenue-gray);
        --divisor-inset: calc(50% - (var(--divisor-height) / 2)) 0 auto auto;

        .upaep__btn:not(:last-child)::after {
            content: "";
            position: absolute;
            translate: -50%;
            width: var(--divisor-width);
            height: var(--divisor-height);
            background: var(--divisor-bg);
            inset: var(--divisor-inset);
        }

        &.__vertical {
            --divisor-inset: auto auto 0 calc(50% - (var(--divisor-height) / 2));

            .upaep__btn:not(:last-child)::after {
                translate: 0;
                height: var(--divisor-width);
                width: var(--divisor-height);
            }
        }
    }

    .upaep__btn {
        --upaep-btn-margin: 0;
    }

    &:not(.__separate) {
        .upaep__btn {
            --upaep-btn-border-radius: 0;

            &:not(.__rounded):first-child {
                --upaep-btn-border-radius: 10px 0 0 10px;
            }

            &:not(.__rounded):last-child {
                --upaep-btn-border-radius: 0 10px 10px 0;
            }

            &:is(.__rounded):first-child {
                --upaep-btn-border-radius: 50px 0 0 50px;
            }

            &:is(.__rounded):last-child {
                --upaep-btn-border-radius: 0 50px 50px 0;
            }
        }

        &.__vertical {
            .upaep__btn {
                --upaep-btn-margin: 0;
                --upaep-btn-border-radius: 0;

                &:first-child {
                    --upaep-btn-border-radius: 10px 10px 0 0;
                }

                &:last-child {
                    --upaep-btn-border-radius: 0 0 10px 10px;
                }
            }
        }
    }


}

.upaep__btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*? ------ Ripple ------ */
.upaep__ripple {
    position: relative;
    overflow: hidden;
}

.circle-ripple {
    --upaep-ripple-width: 100px;
    --upaep-ripple-height: 100px;
    --upaep-ripple-bg: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 70%);
    --upaep-ripple-bg: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    --upaep-ripple-timgin: .3s;
    width: var(--upaep-ripple-width);
    height: var(--upaep-ripple-height);
    background: var(--upaep-ripple-bg);
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: scale-ripple var(--upaep-ripple-timgin) ease-in-out;
}

@keyframes scale-ripple {
    to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/*? ------ Header y Footer ------ */

.upaep__header {
    --upaep-header-width: 100%;
    --upaep-header-height: auto;
    --upaep-header-bg: var(--upaep-color-background);
    --upaep-header-up-width: 100%;
    --upaep-header-up-height: 65px;
    --upaep-header-right-width: 150px;
    --upaep-header-right-height: 100%;
    --upaep-header-right-bg: var(--upaep-color-red);
    --upaep-header-logo-margin: 0 1rem;
    --upaep-header-logo-padding: 10px 15px;
    --upaep-header-logo-width: 130px;
    --upaep-header-titulod-color: var(--upaep-color-dark-grey);
    --upaep-header-titulod-fw: var(--upaep-fw-bold);
    --upaep-header-titulod-fz: var(--upaep-fz28);
    --upaep-header-center-position: absolute;
    --upaep-header-language-width: 33px;
    --upaep-header-language-bg: var(--colordark);
    --upaep-header-language-border-radius: 50%;
    --upaep-header-language-padding: 5px;
    --upaep-header-menu-color: var(--upaep-color-white);
    --upaep-header-menu-fz: var(--upaep-fz15);
    --upaep-header-menu-fw: var(--upaep-fw-bold);
    --upaep-header-menu-margin: 0 0 0 1.5rem;
    --upaep-header-menu-padding: 0;
    --upaep-header-down-width: 100%;
    --upaep-header-down-height: 40px;
    --upaep-header-down-padding: 0;
    --upaep-header-down-bg: var(--colordark);
    --upaep-header-titutlom-color: var(--upaep-color-white);
    --upaep-header-titutlom-fz: var(--upaep-fz20);
    --upaep-header-titutlom-fw: var(--upaep-fw-bold);
    --upaep-header-titutlom-margin: 0 1rem;
    width: var(--upaep-header-width);
    height: var(--upaep-header-height);
    background: var(--upaep-header-bg);
}

.upaep__header-up,
.upaep__header__up {
    width: var(--upaep-header-up-width);
    height: var(--upaep-header-up-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upaep__header-left,
.upaep__header__left {
    display: flex;
    align-items: center;
}

.upaep__header-logo,
.upaep__header__logo {
    margin: var(--upaep-header-logo-margin);
    padding: var(--upaep-header-logo-padding);
}

.upaep__header-logo img,
.upaep__header__logo img {
    width: var(--upaep-header-logo-width);
}

.upaep__header-titulo_d,
.upaep__header__titulo_d {
    color: var(--upaep-header-titulod-color);
    font-weight: var(--upaep-header-titulod-fw);
    font-size: var(--upaep-header-titulod-fz);
    margin: 0;
}

.upaep__header-center,
.upaep__header__center {
    position: var(--upaep-header-center-position);
    right: 11rem;
}

.upaep__button-language img,
.upaep__button__language img {
    width: var(--upaep-header-language-width);
    cursor: pointer;
}

.upaep__header-right,
.upaep__header__right {
    width: var(--upaep-header-right-width);
    height: var(--upaep-header-right-height);
    background: var(--upaep-header-right-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    cursor: pointer;
}

.upaep__header-menu span,
.upaep__header__menu span {
    color: var(--upaep-header-menu-color);
    font-size: var(--upaep-header-menu-fz);
    font-weight: var(--upaep-header-menu-fw);
    margin: var(--upaep-header-menu-margin);
    padding: var(--upaep-header-menu-padding);
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__header-down,
.upaep__header__down {
    width: var(--upaep-header-down-width);
    height: var(--upaep-header-down-height);
    background: var(--upaep-header-down-bg);
    display: flex;
    align-items: center;
}

.upaep__header_titulo_m,
.upaep__header__titulo_m {
    color: var(--upaep-header-titutlom-color);
    font-size: var(--upaep-header-titutlom-fz);
    font-weight: var(--upaep-header-titutlom-fw);
    margin: var(--upaep-header-titutlom-margin);
    display: flex;
    align-items: center;
    height: 100%;
}

footer:has(.upaep__footer .upaep__footer-simple) {
    --footer-width: 100%;
    --footer-bg: #4d4d4d;
    --footer-padding: 15px 0px;
    min-height: var(--footer-minheigth);
    border-top: var(--footer-border-top);
    text-align: center;
}

.upaep__footer {
    --upaep-footer-width: 100%;
    --upaep-footer-height: auto;
    --upaep-footer-bg: var(--upaep-color-black);
    --upaep-footer-simple-width: 100%;
    --upaep-footer-simple-bg: #4d4d4d;
    --upaep-footer-simple-img-width: 500px;
    --upaep-footer-up-maxwidth: 1400px;
    --upaep-footer-up-width: 100%;
    --upaep-footer-up-height: auto;
    --upaep-footer-up-padding: 1rem;
    --upaep-footer-up-margin: 0 auto;
    --upaep-footer-up_content-width: 100%;
    --upaep-footer-up_content-height: auto;
    --upaep-footer-up_content-padding: 0;
    --upaep-footer-up_content-margin: 0 auto;
    --upaep-footer-content-width: 100%;
    --upaep-footer-content-height: auto;
    --upaep-footer-content-padding: 1rem;
    --upaep-footer-content-margin: .5rem;
    --upaep-footer-content-color: var(--upaep-color-white);
    --upaep-footer-list-item-fz: var(--upaep-fz14);
    --upaep-footer-list-item-padding: .5rem 1rem;
    --upaep-footer-list-item-color: var(--upaep-color-white);
    --upaep-footer-logo-width: 100%;
    --upaep-footer-logo-height: auto;
    --upaep-footer-logo-padding: 1rem;
    --upaep-footer-logo-maxwidth: 110px;
    --upaep-footer-logo-maxheight: 250px;
    --upaep-footer-direccion-width: 50%;
    --upaep-footer-direccion-margin: 1rem auto;
    --upaep-footer-direccion-fz: var(--upaep-fz12);
    --upaep-footer-direccion-color: var(--upaep-color-tenue-gray);
    --upaep-footer-telefono-width: 65%;
    --upaep-footer-telefono-margin: 1rem auto;
    --upaep-footer-telefono-fz: var(--upaep-fz18);
    --upaep-footer-telefono-fw: var(--upaep-fw-bold);
    --upaep-footer-siguenos-width: 100%;
    --upaep-footer-siguenos-height: auto;
    --upaep-footer-siguenos-padding: 2rem;
    --upaep-footer-siguenos-p-fw: var(--upaep-fw-bold);
    --upaep-footer-siguenos-a-width: 25%;
    --upaep-footer-siguenos-a-margin: 0 1rem 1rem 0;
    --upaep-footer-siguenos-img-width: 35px;
    --upaep-footer-siguenos-img-height: 35px;
    --upaep-footer-siguenos-img-padding: 0 auto;
    --upaep-footer-banners-width: 100%;
    --upaep-footer-banners-height: auto;
    --upaep-footer-banners-padding: 0 2rem;
    --upaep-footer-banners-img-width: 125px;
    --upaep-footer-banners-img-height: auto;
    --upaep-footer-banners-img-padding: 0px 17px 15px 0;
    --upaep-footer-banners-img-margin: 0 15px 0 0;
    width: var(--upaep-footer-width);
    height: var(--upaep-footer-height);
    background: var(--upaep-footer-bg);
}

.upaep__footer:has(.upaep__footer-simple) {
    --upaep-footer-bg: var(--upaep-color-dark-grey);
}

.upaep__footer .upaep__footer-simple {
    width: var(--upaep-footer-simple-width);
    background: var(--upaep-footer-simple-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__footer .upaep__footer-simple img {
    width: var(--upaep-footer-simple-img-width);
}

.upaep__footer-up,
.upaep__footer__up {
    max-width: var(--upaep-footer-up-maxwidth);
    width: var(--upaep-footer-up-width);
    height: var(--upaep-footer-up-height);
    padding: var(--upaep-footer-up-padding);
    margin: var(--upaep-footer-up-margin);
}

.upaep__footer-up_content,
.upaep__footer__up_content {
    width: var(--upaep-footer-up_content-width);
    height: var(--upaep-footer-up_content-height);
    padding: var(--upaep-footer-up_content-padding);
    margin: var(--upaep-footer-up_content-margin);
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.upaep__footer-left,
.upaep__footer-center,
.upaep__footer-right,
.upaep__footer__left,
.upaep__footer__center,
.upaep__footer__right {
    width: var(--upaep-footer-content-width);
    height: var(--upaep-footer-content-height);
    padding: var(--upaep-footer-content-padding);
    margin: var(--upaep-footer-content-margin);
    color: var(--upaep-footer-content-color);
}

.upaep__footer .upaep__list-item {
    font-size: var(--upaep-footer-list-item-fz);
    padding: var(--upaep-footer-list-item-padding);
    text-align: start;
}

.upaep__footer .upaep__list-item a {
    color: var(--upaep-footer-list-item-color);
}

.upaep__footer-logo,
.upaep__footer_logo {
    width: var(--upaep-footer-logo-width);
    height: var(--upaep-footer-logo-height);
    padding: var(--upaep-footer-logo-padding);
    display: flex;
    justify-content: center;
}

.upaep__footer-logo img,
.upaep__footer_logo img {
    max-width: var(--upaep-footer-logo-maxwidth);
    max-height: var(--upaep-footer-logo-maxheight);
    object-fit: cover;
}

.upaep__footer-direccion,
.upaep__footer_direccion {
    width: var(--upaep-footer-direccion-width);
    margin: var(--upaep-footer-direccion-margin);
    font-size: var(--upaep-footer-direccion-fz);
    color: var(--upaep-footer-direccion-color);
    text-align: center;
}

.upaep__footer-telefono,
.upaep__footer_telefono {
    width: var(--upaep-footer-telefono-width);
    margin: var(--upaep-footer-telefono-margin);
    font-size: var(--upaep-footer-telefono-fz);
    font-weight: var(--upaep-footer-telefono-fw);
    text-align: center;
}

.upaep__footer-siguenos,
.upaep__footer_siguenos {
    width: var(--upaep-footer-siguenos-width);
    height: var(--upaep-footer-siguenos-height);
    padding: var(--upaep-footer-siguenos-padding);
}

.upaep__footer-siguenos p,
.upaep__footer_siguenos p {
    padding: var(--upaep-footer-siguenos-p-fw);
}

.upaep__footer-redessociales,
.upaep__footer_redessociales {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.upaep__footer-siguenos a,
.upaep__footer_siguenos a {
    width: var(--upaep-footer-siguenos-a-width);
    margin: var(--upaep-footer-siguenos-a-margin);
    text-decoration: none;
    flex: 0 0 auto;
}

.upaep__footer-siguenos img,
.upaep__footer_siguenos img {
    width: var(--upaep-footer-siguenos-img-width);
    height: var(--upaep-footer-siguenos-img-height);
    margin: var(--upaep-footer-siguenos-img-padding);
}

.upaep__footer-banners,
.upaep__footer_banners {
    width: var(--upaep-footer-banners-width);
    height: var(--upaep-footer-banners-height);
    padding: var(--upaep-footer-banners-padding);
}

.upaep__footer-banners img,
.upaep__footer_banners img {
    width: var(--upaep-footer-banners-img-width);
    height: var(--upaep-footer-banners-img-height);
    padding: var(--upaep-footer-banners-img-padding);
    margin: var(--upaep-footer-banners-img-margin);
}

/*? ------ Card ------ */
.upaep__card {
    --upaep-card-minwidth: 0;
    --upaep-card-maxwidth: auto;
    --upaep-card-minheight: 0;
    --upaep-card-maxheight: auto;
    --upaep-card-width: 100%;
    --upaep-card-height: 100%;
    --upaep-card-margin: 1rem;
    --upaep-card-padding: ;
    --upaep-card-position: relative;
    --upaep-card-a-width: auto;
    --upaep-card-a-height: auto;
    --upaep-card-bg: ;
    --upaep-card-border-size: 0;
    --upaep-card-border-style: solid;
    --upaep-card-border-color: var(--upaep-color-background);
    --upaep-card-border-radius: 10px;
    --upaep-card-header-width: 100%;
    --upaep-card-header-height: auto;
    --upaep-card-header-padding: .5rem 1rem;
    --upaep-card-header-bg: ;
    --upaep-card-header-border-bottom-size: 1px;
    --upaep-card-header-border-bottom-color: var(--gradientwhite);
    --upaep-card-header-fz: var(--upaep-fz22);
    --upaep-card-header-fw: var(--upaep-fw-bold);
    --upaep-card-header-color: var(--upaep-color-black);
    --upaep-card-header-align: center;
    --upaep-card-footer-width: 100%;
    --upaep-card-footer-height: auto;
    --upaep-card-footer-padding: .5rem 1rem;
    --upaep-card-footer-bg: ;
    --upaep-card-footer-border-top-size: 1px;
    --upaep-card-footer-border-top-color: var(--gradientwhite);
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 100%;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-margin: 0;
    --upaep-card-content-border-radius: 0;
    --upaep-card-content-bg: ;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 100%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-content-bg: ;
    --upaep-card-img-width: 100%;
    --upaep-card-img-height: 100%;
    --upaep-card-img-padding: 0;
    --upaep-card-img-objectfit: cover;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-icon_content-width: 100%;
    --upaep-card-icon_content-height: 100%;
    --upaep-card-icon_content-border-radius: 10px 10px 0 0;
    --upaep-card-icon-bg: ;
    --upaep-card-icon-width: 100%;
    --upaep-card-icon-height: 100%;
    --upaep-card-icon-objectfit: cover;
    --upaep-card-icon-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: ;
    --upaep-card-title-width: auto;
    --upaep-card-title-height: auto;
    --upaep-card-title-fz: var(--upaep-fz20);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-margin: 0;
    --upaep-card-title-padding: 0;
    --upaep-card-title-color: var(--upaep-color-black);
    --upaep-card-title-align: start;
    --upaep-card-subtitle-width: auto;
    --upaep-card-subtitle-height: auto;
    --upaep-card-subtitle-fz: var(--upaep-fz20);
    --upaep-card-subtitle-fw: var(--upaep-fw-bold);
    --upaep-card-subtitle-margin: 0;
    --upaep-card-subtitle-padding: 0;
    --upaep-card-subtitle-color: var(--upaep-color-black);
    --upaep-card-subtitle-align: start;
    --upaep-card-text-width: auto;
    --upaep-card-text-height: auto;
    --upaep-card-text-padding: 0;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-regular);
    --upaep-card-text-margin: 0;
    --upaep-card-text-color: var(--upaep-color-black);
    --upaep-card-text-align: start;
    min-width: var(--upaep-card-minwidth);
    max-width: var(--upaep-card-maxwidth);
    min-height: var(--upaep-card-minheight);
    max-height: var(--upaep-card-maxheight);
    width: var(--upaep-card-width);
    height: var(--upaep-card-height);
    margin: var(--upaep-card-margin);
    padding: var(--upaep-card-padding);
    position: var(--upaep-card-position);
    border: var(--upaep-card-border-size) var(--upaep-card-border-style) var(--upaep-card-border-color);
    border-radius: var(--upaep-card-border-radius);
    box-shadow: var(--upaep-card-boxshadow);
    background: var(--upaep-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    word-wrap: break-word;

    & a:not(.upaep__btn) {
        text-decoration: none;
        width: var(--upaep-card-a-width);
        height: var(--upaep-card-a-height);
    }

    & .upaep__card-header {
        width: var(--upaep-card-header-width);
        height: var(--upaep-card-header-height);
        padding: var(--upaep-card-header-padding);
        background: var(--upaep-card-header-bg);
        border-bottom: var(--upaep-card-header-border-bottom-size) solid var(--upaep-card-header-border-bottom-color);
        font-size: var(--upaep-card-header-fz);
        font-weight: var(--upaep-card-header-fw);
        color: var(--upaep-card-header-color);
        text-align: var(--upaep-card-header-align);

        p {
            margin: 0;
        }
    }

    & .upaep__card-footer {
        width: var(--upaep-card-footer-width);
        height: var(--upaep-card-footer-height);
        padding: var(--upaep-card-footer-padding);
        background: var(--upaep-card-footer-bg);
        border-top: var(--upaep-card-footer-border-top-size) solid var(--upaep-card-footer-border-top-color);
    }

    & .upaep__card-content {
        flex: 1 1 auto;
        width: var(--upaep-card-content-width);
        height: var(--upaep-card-content-height);
        padding: var(--upaep-card-content-padding);
        margin: var(--upaep-card-content-margin);
        background: var(--upaep-card-content-bg);
        border-radius: var(--upaep-card-content-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-img {
        width: var(--upaep-card-img-content-width);
        height: var(--upaep-card-img-content-height);
        border-radius: var(--upaep-card-img-content-border-radius);
        background: var(--upaep-card-img-content-bg);
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            width: var(--upaep-card-img-width);
            height: var(--upaep-card-img-height);
            object-fit: var(--upaep-card-img-objectfit);
            border-radius: var(--upaep-card-img-border-radius);
            padding: var(--upaep-card-img-padding);
        }
    }

    & .upaep__card-icon {
        width: var(--upaep-card-icon_content-width);
        height: var(--upaep-card-icon_content-height);
        border-radius: var(--upaep-card-img-content-border-radius);
        box-shadow: var(--upaep-box-shadow);
        background: var(--upaep-card-icon-bg);
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            width: var(--upaep-card-icon-width);
            height: var(--upaep-card-icon-height);
            object-fit: var(--upaep-card-icon-objectfit);
            border-radius: var(--upaep-card-icon-border-radius);
        }
    }


    & .upaep__card-texts {
        width: 100%;
    }

    & .upaep__card-button {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .upaep__card-title {
        width: var(--upaep-card-title-width);
        height: var(--upaep-card-title-height);
        font-size: var(--upaep-card-title-fz);
        font-weight: var(--upaep-card-title-fw);
        margin: var(--upaep-card-title-margin);
        padding: var(--upaep-card-title-padding);
        color: var(--upaep-card-title-color);
        text-align: var(--upaep-card-title-align);
    }

    & .upaep__card-subtitle {
        width: var(--upaep-card-subtitle-width);
        height: var(--upaep-card-subtitle-height);
        font-size: var(--upaep-card-subtitle-fz);
        font-weight: var(--upaep-card-subtitle-fw);
        margin: var(--upaep-card-subtitle-margin);
        padding: var(--upaep-card-subtitle-padding);
        color: var(--upaep-card-subtitle-color);
        text-align: var(--upaep-card-subtitle-align);
    }

    & .upaep__card-text {
        width: var(--upaep-card-text-width);
        height: var(--upaep-card-text-height);
        padding: var(--upaep-card-text-padding);
        font-size: var(--upaep-card-text-fz);
        font-weight: var(--upaep-card-text-fw);
        margin: var(--upaep-card-text-margin);
        padding: var(--upaep-card-text-padding);
        color: var(--upaep-card-text-color);
        text-align: var(--upaep-card-text-align);
    }
}

.upaep__card.__basic {
    --upaep-card-width: 300px;
    --upaep-card-height: 400px;
    --upaep-card-margin: 1rem;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-text-fz: var(--upaep-fz14);
}

.upaep__card.__img {
    --upaep-card-maxwidth: 300px;
    --upaep-card-height: 400px;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-content-height: 50%;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-text-width: 100%;
    --upaep-card-text-height: auto;
    --upaep-card-text-fz: var(--upaep-fz20);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--upaep-color-blue-primary);
    --upaep-card-text-align: center;
}

.upaep__card.__icons {
    --upaep-card-maxwidth: 250px;
    --upaep-card-minheight: 250px;
    --upaep-card-height: 250px;
    --upaep-card-margin: 1rem 0;
    --upaep-card-content-padding: 0;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-icon_content-width: 80px;
    --upaep-card-icon_content-height: 80px;
    --upaep-card-img-content-bg: var(--upaep-clor-white);
    --upaep-card-icon-width: auto;
    --upaep-card-icon-height: 50px;
    --upaep-card-icon-bg: var(--upaep-color-white);
    --upaep-card-img-content-border-radius: 50px;
    --upaep-card-icon-border-radius: 50px;
    --upaep-card-text-height: 50%;
    --upaep-card-text-padding: .5rem;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--upaep-color-blue-primary);
    --upaep-card-text-align: center;

    & .upaep__card-content {
        flex-direction: column;
    }

    & a {
        text-decoration: none;
        width: 100%;
        height: 100%;
    }

    & .upaep__card-text {
        display: flex;
        justify-content: center;
        align-items: center;

        p {
            margin: 0;
        }
    }

    & .__overlay {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.upaep__card.__slice {
    --upaep-card-width: 300px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 10px 0;
    --upaep-card-padding: 0;
    --upaep-card-bg: none;
    --upaep-card-border-size: 1px;
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: auto;
    --upaep-card-content-margin: 0;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-border-radius: 10px;
    --upaep-card-content-bg: var(--upaep-color-white);
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-black);
    --upaep-card-title-align: center;
    --upaep-card-title-height: 40px;
    transition: height .5s;

    & .upaep__card-slice-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        margin: 0;
    }

    & .upaep__card-title {
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
        }
    }

    & a {
        text-decoration: none;
        color: var(--upaep-color-black);
        font-weight: var(--upaep-fw-bold);
    }

}

.upaep__card.__sliced {
    --upaep-card-width: 300px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 0;
    --upaep-card-padding: 0;
    --upaep-card-bg: none;
    --upaep-card-border-size: 1px;
    --upaep-card-border-color: var(--upaep-color-background);
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 100%;
    --upaep-card-content-margin: 0;
    --upaep-card-content-padding: 0;
    --upaep-card-content-bg: var(--upaep-color-white);
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-border-radius: 10px 10px 0 0;
    --upaep-card-boxshadow: 1px 2px 8px rgb(60 60 60 / 40%);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-black);
    --upaep-card-title-align: center;
    --upaep-card-title-height: 100%;
    --upaep-card-text-height: 100%;
    transition: height .5s;

    & .upaep__card-content {
        width: 100%;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        border-radius: 10px;
        cursor: pointer;
    }


    & .upaep__card-title {
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
        }
    }

    &:hover .upaep__card-text {
        --upaep-card-text-padding: 1rem;
    }

    & a {
        text-decoration: none;
        color: var(--upaep-color-black);
        font-weight: var(--upaep-fw-bold);
    }
}

.upaep__card.__news {
    --upaep-card-minheight: 400px;
    --upaep-card-maxwidth: 400px;
    --upaep-card-width: 100%;
    --upaep-card-height: 100%;
    --upaep-card-border-size: 0;
    --upaep-card-border-radius: 0;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 0;
    --upaep-card-img-width: 100%;
    --upaep-card-img-height: 250px;
    --upaep-card-img-objectfit: cover;
    --upaep-card-img-border-radius: 0;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz25);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-dark-grey);
    --upaep-card-title-align: start;
    --upaep-card-text-fz: var(--upaep-fz14);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-text-color: var(--upaep-color-dark-grey);
    justify-content: start;

    >a {
        width: 100%;
        height: 100%;
    }

    & .upaep__card-content {
        flex-direction: column;
        align-items: start;
        justify-content: start;

        .upaep__card-title {
            line-height: 31px;
        }

        >span {
            width: auto;
            margin: 1rem 0 0;
            font-size: var(--upaep-fz18);
            text-align: start;
            position: relative;
            font-style: italic;
            color: var(--upaep-color-blue-link);

            &::after {
                font-family: var(--upaep-ff-fontawesome);
                font-style: normal;
                content: "\f0da";
                position: absolute;
                inset: auto;
                margin: 0 0 0 5px;
            }

            &:hover {

                color: var(--upaep-color-blue-link-hover);
            }
        }
    }

    @media(width <=480px) {
        --upaep-card-title-fz: var(--upaep-fz18);
    }
}

.upaep__card.__bicolor {
    --upaep-card-width: 275px;
    --upaep-card-height: 275px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-content-padding: 1rem;
    --upaep-card-content-margin: 0;
    --upaep-card-content-border-radius: 0 0 10px 10px;
    --upaep-card-content-bg: transparent linear-gradient(180deg, #FFFEFE 0%, #D3DAE8 100%);
    --upaep-card-img-content-bg: transparent linear-gradient(180deg, #BF171E 0%, #FF000A 100%);
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-content-border-radius: 10px 10px 0 0;
    --upaep-card-img-width: 50%;
    --upaep-card-img-padding: 1rem;
    --upaep-card-img-objectfit: contain;
    --upaep-card-boxshadow: ;
    --upaep-card-title-fz: var(--upaep-fz20);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-black);
    --upaep-card-title-align: center;
}

.upaep__card.__contacta {
    --upaep-card-bg: var(--upaep-color-black);
    --upaep-card-margin: 0;
    --upaep-card-border-size: none;
    --upaep-card-border-color: var(--upaep-color-background);
    --upaep-card-header-bg: var(--upaep-color-red);
    --upaep-card-header-border-bottom-color: var(--gradientwhite);
    --upaep-card-header-color: var(--upaep-color-white);
}

.upaep__card.__no-results,
.upaep__card.__no-resultados,
.upaep__card.__noresultados {
    --upaep-card-height: 300px;
    --upaep-card-margin: 2rem 0;
    --upaep-card-padding: 2rem;
    --upaep-card-bg: none;
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: auto;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: auto;
    --upaep-card-img-width: 200px;
    --upaep-card-img-height: 200px;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-color: var(--upaep-color-white);
    --upaep-card-text-fz: var(--upaep-fz14);

    &:not(.is-active) {
        display: none;
    }
}

.upaep__card.__adn {
    --upaep-card-height: 400px;
    --upaep-card-margin: 0;
    --upaep-card-border-radius: 0;
    --upaep-card-bg: url('../img/Fondo_ADN_1850.webp') no-repeat center center;
    background-size: cover;
}

.upaep__card.__program {
    --upaep-card-width: 100%;
    --upaep-card-height: auto;
    --upaep-card-margin: 0;
    --upaep-card-border-size: 0;
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: none;
    --upaep-card-title-fz: var(--upaep-fz24);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-black);
    --upaepr-card-header-mark-width: 65px;
    --upaepr-card-header-mark-height: 20px;
    --upaepr-card-header-mark-margin: 5px;
    --upaepr-card-header-mark-bg: var(--upaep-color-red);

    & .upaep__card-header {
        display: flex;
        align-items: center;
    }

    & .upaep__card-header .upaep__card-title {
        margin: 0;
    }

    & .upaep__card-header::before {
        width: var(--upaepr-card-header-mark-width);
        height: var(--upaepr-card-header-mark-height);
        margin: var(--upaepr-card-header-mark-margin);
        background: var(--upaepr-card-header-mark-bg);
        content: '';
        display: inline-flex;
    }
}

.upaep__card.__program.__ingenierias {
    --upaepr-card-header-mark-bg: var(--upaep-color-ingenierias);
}

.upaep__card.__program.__economico-administrativas {
    --upaepr-card-header-mark-bg: var(--upaep-color-economico-administrativas);
}

.upaep__card.__program.__economico-negocios {
    --upaepr-card-header-mark-bg: var(--upaep-color-negocios);
}

.upaep__card.__program.__artes-humanidades {
    --upaepr-card-header-mark-bg: var(--upaep-color-artes-humanidades);
}

.upaep__card.__program.__ciencias-humanas-sociales,
.upaep__card.__program.__humana-sociales {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciecnias-humanas-sociales);
}

.upaep__card.__program.__ciencias-creativas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciecnias-creativas);
}

.upaep__card.__program.__ciencias-sociales {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-sociales);
}

.upaep__card.__program.__ciencias-biologicas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-biologicas);
}

.upaep__card.__program.__ciencias-vida-salud {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-vida-salud);
}

.upaep__card.__program.__ciencias-salud {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-salud);
}

.upaep__card.__program.__ciencias-medicas {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-medicas);
}

.upaep__card.__program.__lenguas-cultura {
    --upaepr-card-header-mark-bg: var(--upaep-color-lenguas-cultura);
}

.upaep__card.__program.__escuela-negocios {
    --upaepr-card-header-mark-bg: var(--upaep-color-negocios);
}

.upaep__card.__program.__general {
    --upaepr-card-header-mark-bg: var(--upaep-color-ciencias-salud);
}

.upaep__card.__claustro {
    --upaep-card-width: 250px;
    --upaep-card-height: 400px;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 60%;
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: none;
    --upaep-card-text-color: var(--upaep-color-white);
    --upaep-card-text-align: center;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 40%;
    --upaep-card-content-bg: var(--upaep-color-red);
    --upaep-card-content-border-radius: 0 0 10px 10px;

    & .upaep__card-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;

        & .upaep__card-top {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .upaep__card-text {
                width: 100%;
                height: auto;
                color: var(--upaep-color-white);
                text-align: center;
                font-size: var(--upaep-fz14);
                font-weight: bold;
            }
        }

        & .upaep__card-center {
            width: 100%;
            height: 35%;
            display: flex;
            justify-content: center;
            align-items: center;

            & .upaep__card-text {
                width: 100%;
                height: auto;
                color: var(--upaep-color-white);
                text-align: center;
                font-size: var(--upaep-fz14);
                font-weight: var(--upaep-fw-regular);
            }
        }

        & .upaep__card-bottom {
            width: 100%;
            height: 25%;
            display: flex;
            justify-content: center;
            align-items: center;

            & img {
                width: 85px;
                height: 85%;
            }
        }
    }
}

.upaep__card.__claustro-interncional {
    --upaep-card-width: 250px;
    --upaep-card-height: 450px;
    --upaep-card-margin: 1rem;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 10px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 50%;
    --upaep-card-content-bg: var(--upaep-color-tenue-gray);
    --upaep-card-footer-bg: var(--upaep-color-tenue-gray);
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-img-width: 175px;
    --upaep-card-img-height: 175px;
    --upaep-card-img-border-radius: 0;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz14);
    --upaep-card-text-align: center;

    &:not(.__img-no-border) {
        --upaep-card-content-bg: var(--upaep-color-white);
        --upaep-card-footer-bg: var(--upaep-color-white);
        --upaep-card-img-border-radius: 50%;

        .upaep__card-img {
            align-items: center;

            img {
                box-shadow: var(--upaep-box-shadow);
            }
        }
    }

    .upaep__card-img {
        align-items: end;
    }

    .upaep__card-content {
        flex-direction: column;
        justify-content: start;
    }

    .upaep__card-text {
        &.__campus {
            --upaep-card-text-color: #184FB7;
            --upaep-card-text-fz: var(--upaep-fz12);
            letter-spacing: 3.36px;
        }

        &.__pais {
            --upaep-card-text-color: var(--upaep-color-dark-grey);
            --upaep-card-text-fz: var(--upaep-fz12);
            --upaep-card-text-fw: var(--upaep-fw-regular);
            letter-spacing: 3.36px;
        }

        &:has(.__shorthand),
        &:has(.__name) {
            --upaep-card-text-color: var(--upaep-color-dark-grey);
            --upaep-card-text-fz: var(--upaep-fz18);
            --upaep-card-text-fw: var(--upaep-fw-bold);
        }
    }

    .upaep__card-footer {
        border-radius: 0 0 10px 10px;
    }

    .upaep__line {
        --upaep-line-height: 1px;
        --upaep-line-bg: none;
        --upaep-line-border-style: dashed;
        --upaep-line-border-color: #FFA800;
        margin: .5rem 0;
    }

    .upaep__card-button {
        height: auto;

        .upaep__btn {
            --upaep-btn-height: 32px;
        }
    }

    .upaep__btn.__more {
        padding: .35rem 1rem;
        margin: .5rem auto;
    }

    .__icon-flag {
        width: 30px;
        height: auto;
        object-fit: cover;
        margin: 0 auto .5rem;
        display: block;
        box-shadow: var(--upaep-box-shadow);
    }
}

.upaep__card.__plan-estudios {
    --upaep-card-width: 90%;
    --upaep-card-height: auto;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: var(--upaep-box-shadow);
    --upaep-card-text-color: var(--upaep-color-black);
    --upaep-card-text-align: center;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 40%;
    --upaep-card-content-padding: 1rem 2rem;
    --upaep-card-content-bg: var(--upaep-color-white);
    --upaep-card-content-border-radius: 10px;
    --upaep-card-title-fz: var(--upaep-fz18);

    & .upaep__card-title {
        margin: 0;
    }

    & .upaep__card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;

        & .upaep__card-texts {
            width: 100%;
        }

        & .upaep__card-unidad {
            width: 60px;

            & p {
                width: 50px;
                height: 50px;
                border-radius: 50px;
                background: var(--upaep-color-blue-primary);
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--upaep-color-white);
                margin: 0;
            }
        }
    }
}

.upaep__cards.__chess {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.upaep__card.__chess {
    --upaep-card-chess-bg: ;
    --upaep-card-content-width: 50%;
    --upaep-card-content-height: 50vh;
    --upaep-card-content-padding: 1.5rem;
    --upaep-card-img-border-radius: 0;
    --upaep-card-img-content-width: 50%;
    --upaep-card-img-content-height: 50vh;
    --upaep-card-icon-width: 65px;
    --upaep-card-icon-height: 65px;
    --upaep-card-icon-objectfit: contain;
    --upaep-card-icon_content-height: auto;
    --upaep-card-title-fz: var(--upaep-fz24);
    --upaep-card-title-color: var(--upaep-color-white);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-color: var(--upaep-color-white);
    display: flex;
    flex: 1;
    margin: 0;

    &.__r {
        flex-direction: row-reverse;
        width: 100%;
    }

    &.__l {
        flex-direction: row;
        width: 100%;
    }

    .upaep__card-content {
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .upaep__card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: none;
    }

    .upaep__card-texts {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upaep__card-text {
        word-wrap: break-word;
        text-wrap: balance;
        text-align: center;
    }
}

.upaep__card.__payment {
    --upaep-card-width: 400px;
    --upaep-card-height: 300px;
    --upaep-card-margin: 0;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 100%;
    --upaep-card-img-content-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz30);
    --upaep-card-title-color: var(--upaep-color-red);
    --upaep-card-text-fz: var(--upaep-fz20);

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

    .upaep__card-titles {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .upaep__card-total {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__card-button {
        width: 100%;
        height: 20%;

        .upaep__btn {
            --upaep-btn-color: var(--upaep-color-white);
            --upaep-btn-cont-color: var(--upaep-color-white);
            --upaep-btn-bg: var(--upaep-color-primary);
            --upaep-btn-border-color: var(--upaep-color-primary);
            --upaep-btn-hover-color: var(--upaep-color-white);
            --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
            --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
            --upaep-btn-disabled-color: var(--upaep-color-white);
            --upaep-btn-disabled-bg: var(--upaep-color-primary);
            --upaep-btn-disabled-border-color: var(--upaep-color-primary);
            --upaep-btn-margin: 1rem 0;
        }
    }

    .upaep__card-text {
        display: flex;
        align-items: center;

        .__total {
            font-size: var(--upaep-fz50);
        }

        .__point {
            font-size: var(--upaep-fz50);
        }

        .__decimal {
            font-size: var(--upaep-fz0);
        }
    }
}

.upaep__card.__trinity {
    --upaep-card-width: 100%;
    --upaep-card-height: 150px;
    --upaep-card-margin: 1rem 0;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 15px;
    --upaep-card-content-width: 100%;
    --upaep-card-content-height: 30%;
    --upaep-card-img-content-width: 50%;
    --upaep-card-img-content-height: 100%;
    --upaep-card-img-content-bg: var(--upaep-color-blue-primary);
    --upaep-card-img-content-border-radius: 10px 0 0 10px;
    --upaep-card-img-width: 50%;
    --upaep-card-img-height: 50%;
    --upaep-card-boxshadow: 0px 0px 8px #0000007D;
    --upaep-card-title-fz: var(--upaep-fz22);
    --upaep-card-title-color: var(--upaep-color-dark-grey);
    --upaep-card-text-fz: var(--upaep-fz14);
    transition: width .5s;

    a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

/*? ------ Inputfields ------ */

.upaep__input {
    --upaep-input-width: 100%;
    --upaep-input-height: auto;
    --upaep-input-padding: .35rem .75rem;
    --upaep-input-margin: 0 0 .5rem 0;
    --upaep-input-fz: var(--upaep-fz16);
    --upaep-input-fw: var(--upaep-fw-regular);
    --upaep-input-color: var(--upaep-color-dark-grey);
    --upaep-input-bg: var(--upaep-color-white);
    --upaep-input-opacity: 1;
    --upaep-input-border-size: 2px;
    --upaep-input-border-color: var(--upaep-color-border-grey);
    --upaep-input-border-radius: 10px;
    --upaep-input-boxshadow: ;
    --upaep-input-appearance: none;
    --upaep-input-placeholder-fz: var(--upaep-fz16);
    --upaep-input-placeholder-fw: var(--upaep-fw-regular);
    --upaep-input-placeholder-color: #909496;
    --upaep-input-placeholder-opacity: 1;
    --upaep-input-focus-color: ;
    --upaep-input-focus-bg: var(--upaep-color-white);
    --upaep-input-focus-border-size: 2px;
    --upaep-input-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-input-focus-outline: 0;
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-input-disabled-bg: var(--upaep-color-tenue-gray);
    --upaep-input-disabled-opacity: .5;
    --upaep-input-readonly-bg: var(--upaep-color-tenue-gray);
    --upaep-input-readonly-opacity: 1;
    --upaep-input-hover-bg: var(--upaep-color-white);
    --upaep-input-hover-border-size: 2px;
    --upaep-input-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-input-hover-fz: var(--upaep-fz16);
    --upaep-input-hover-fw: var(--upaep-fw-regular);
    --upaep-input-hover-color: var(--upaep-color-dark-grey);
    --upaep-input-border-bottom-size: 2px;
    --upaep-input-border-bottom-color: var(--upaep-color-dark-grey);
    width: var(--upaep-input-width);
    height: var(--upaep-input-height);
    padding: var(--upaep-input-padding);
    margin: var(--upaep-input-margin);
    font-size: var(--upaep-input-fz);
    font-weight: var(--upaep-input-fw);
    color: var(--upaep-input-color);
    background: var(--upaep-input-bg);
    box-shadow: var(--upaep-input-boxshadow);
    border: var(--upaep-input-border-size) solid var(--upaep-input-border-color);
    border-radius: var(--upaep-input-border-radius);
    opacity: var(--upaep-input-opacity);
    display: block;
    line-height: 1.5;
    appearance: var(--upaep-input-appearance);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:disabled {
        background: var(--upaep-input-disabled-bg);
        opacity: var(--upaep-input-disabled-opacity);
    }

    &[readonly] {
        background: var(--upaep-input-readonly-bg);
        opacity: var(--upaep-input-readonly-opacity);
        border: 0;
    }

    &::placeholder {
        color: var(--upaep-input-placeholder-color);
        font-size: var(--upaep-input-placeholder-fz);
        font-weight: var(--upaep-input-placeholder-fw);
        opacity: var(--upaep-input-placeholder-opacity);
    }

    &:hover:not(:disabled):not([readonly]) {
        background: var(--upaep-input-hover-bg);
        border: var(--upaep-input-hover-border-size) solid var(--upaep-input-hover-border-color);
        font-size: var(--upaep-input-hover-fz);
        font-weight: var(--upaep-input-hover-fw);
        color: var(--upaep-input-hover-color);
        border-bottom: var(--upaep-input-border-bottom-size) solid var(--upaep-input-border-bottom-color);
    }

    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background: var(--upaep-input-focus-bg);
        border: var(--upaep-input-focus-border-size) solid var(--upaep-input-focus-border-color);
        outline: var(--upaep-input-focus-outline);
        box-shadow: var(--upaep-input-focus-boxshadow);
        color: var(--upaep-input-focus-color);
        border-bottom: var(--upaep-input-border-bottom-size) solid var(--upaep-input-border-bottom-color);
    }
}

.upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea),
.upaep__input-group:not(.__float-icon):has(span~.upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea)) .upaep__input {
    --upaep-input-border-radius: 50px;
    --upaep-input-padding: .35rem 1rem;
}

.upaep__input-group:is(.__float-icon) .upaep__input.__rounded:not([type="color"]):not([type="range"]):not(textarea) {
    --upaep-input-border-radius: 50px;
}

.upaep__input-group .upaep__selectpicker {
    --upaep-selectpicker-margin: 0;
}

.upaep__input[type=file] {
    overflow: hidden;
}

.upaep__input[type=file]:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--upaep-color-white);
}

.upaep__input[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.upaep__input::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--upaep-color-black);
    background: var(--upaep-color-tenue-gray);
    pointer-events: none;
    border: 0;
    border-inline-end-width: var(--bs-border-width);
    border-radius: 0;
    transition: color 0.15s ease-in-out, background 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.upaep__input[type="color"] {
    --upaep-input-width: 3rem;
    --upaep-input-height: 2.5rem;
    --upaep-input-padding: .35rem;
}

.upaep__input[type="color"]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.upaep__input[type="range"] {
    --upaep-input-width: 100%;
    --upaep-input-height: 1.5rem;
    --upaep-input-padding: 0;
    --upaep-input-appearance: auto;
}

.upaep__input.__underline {
    --upaep-input-border-size: 0;
    --upaep-input-border-color: var(--upaep-color-border-grey);
    --upaep-input-border-radius: 0;
    --upaep-input-focus-border-size: 0;
    --upaep-input-focus-boxshadow: 0px 3px 0px 0px var(--upaep-color-border-grey);
    --upaep-input-hover-border-size: 0;
    border-bottom: var(--upaep-input-border-bottom-size) solid var(--upaep-input-border-bottom-color);
}

.was-validated .upaep__input:valid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.__validated .upaep__input:valid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.upaep__input.is-success,
.upaep__input.is-valid {
    --upaep-input-border-color: var(--upaep-color-success);
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--upaep-color-success);
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-input-hover-border-color: var(--upaep-color-success-hover);
    --upaep-input-border-bottom-color: var(--upaep-color-success);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    &:not([type="color"]):not([type="range"]):not(textarea):not(.__icon) {
        --upaep-input-padding: .35rem 1.8rem .35rem 1rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-success);
    }
}

.was-validated .upaep__input:is(.__underline):valid,
.__validated .upaep__input:is(.__underline):valid,
.upaep__input:is(.__underline).is-success,
.upaep__input:is(.__underline).is-valid {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(40, 167, 69, 0.25);
}

.upaep__input.is-warning {
    --upaep-input-border-color: var(--upaep-color-warning);
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--upaep-color-warning);
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-input-hover-border-color: var(--upaep-color-warning-hover);
    --upaep-input-border-bottom-color: var(--upaep-color-warning);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-warning);
    }
}

.upaep__input:is(.__underline).is-warning {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(255, 193, 7, 0.25);
}

.was-validated .upaep__input:invalid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.__validated .upaep__input:invalid:not(.upaep__input-tokenfield):not(.upaep__input.__selectpicker):not(.upaep__autocomplete-input),
.upaep__input.is-error,
.upaep__input.is-invalid {
    --upaep-input-border-color: var(--upaep-color-error);
    --upaep-input-boxshadow: ;
    --upaep-input-focus-border-color: var(--upaep-color-error);
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-input-hover-border-color: var(--upaep-color-error-hover);
    --upaep-input-border-bottom-color: var(--upaep-color-error);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    &:not([type="color"]):not([type="range"]):not(textarea):not(.__icon) {
        --upaep-input-padding: .35rem 1.8rem .35rem 1rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-error);
    }
}

.was-validated .upaep__input:is(.__underline):invalid,
.__validated .upaep__input:is(.__underline):invalid,
.upaep__input:is(.__underline).is-error,
.upaep__input:is(.__underline).is-invalid {
    --upaep-input-focus-boxshadow: 0 3px 0 0 rgba(220, 53, 69, 0.25);
}

.upaep__input.__black {
    --upaep-input-color: var(--upaep-color-white);
    --upaep-input-bg: var(--upaep-color-black);
    --upaep-input-border-color: var(--upaep-color-border-grey);
    --upaep-input-boxshadow: ;
    --upaep-input-placeholder-color: var(--upaep-color-white);
    --upaep-input-focus-color: var(--upaep-color-white);
    --upaep-input-focus-bg: var(--upaep-color-black);
    --upaep-input-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    --upaep-input-disabled-bg: #292929;
    --upaep-input-readonly-bg: #292929;
    --upaep-input-hover-bg: #292929;
    --upaep-input-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-input-hover-color: var(--upaep-color-white);
}

.upaep__input[type=file].__black:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--upaep-color-black);
}

.upaep__input.__black::-webkit-calendar-picker-indicator,
.upaep__input.__black::-webkit-datetime-edit-fields-wrapper,
.upaep__input.__black::-webkit-datetime-edit-text,
.upaep__input.__black::-webkit-datetime-edit-minute,
.upaep__input.__black::-webkit-datetime-edit-hour-field,
.upaep__input.__black::-webkit-datetime-edit-day-field,
.upaep__input.__black::-webkit-datetime-edit-month-field,
.upaep__input.__black::-webkit-datetime-edit-year-field,
.upaep__input.__dark::-webkit-calendar-picker-indicator,
.upaep__input.__dark::-webkit-datetime-edit-fields-wrapper,
.upaep__input.__dark::-webkit-datetime-edit-text,
.upaep__input.__dark::-webkit-datetime-edit-minute,
.upaep__input.__dark::-webkit-datetime-edit-hour-field,
.upaep__input.__dark::-webkit-datetime-edit-day-field,
.upaep__input.__dark::-webkit-datetime-edit-month-field,
.upaep__input.__dark::-webkit-datetime-edit-year-field {
    filter: invert(1);
}

.upaep__input.__dark {
    --upaep-input-color: var(--upaep-color-white);
    --upaep-input-bg: var(--colordark);
    --upaep-input-border-color: var(--upaep-color-border-grey);
    --upaep-input-boxshadow: ;
    --upaep-input-placeholder-color: var(--upaep-color-white);
    --upaep-input-focus-color: var(--upaep-color-white);
    --upaep-input-focus-bg: var(--colordark);
    --upaep-input-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-input-focus-boxshadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    --upaep-input-disabled-bg: #414448;
    --upaep-input-readonly-bg: #414448;
    --upaep-input-hover-bg: #414448;
    --upaep-input-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-input-hover-color: var(--upaep-color-white);
}

.upaep__input[type=file].__dark:hover:not(:disabled):not([readonly]) {
    --upaep-input-hover-bg: var(--colordark);
}

.upaep__input.__underline.__black,
.upaep__input.__underline.__dark {
    --upaep-input-border-bottom-color: var(--upaep-color-white);
}

.upaep__select {
    --upaep-select-width: 100%;
    --upaep-select-height: auto;
    --upaep-select-padding: .35rem .75rem;
    --upaep-select-margin: 0 0 .5rem 0;
    --upaep-select-fz: var(--upaep-fz16);
    --upaep-select-fw: var(--upaep-fw-regular);
    --upaep-select-color: var(--upaep-color-dark-grey);
    --upaep-select-bg: var(--upaep-color-white);
    --upaep-select-opacity: 1;
    --upaep-select-border-size: 2px;
    --upaep-select-border-color: var(--upaep-color-border-grey);
    --upaep-select-border-radius: 10px;
    --upaep-select-boxshadow: ;
    --upaep-select-appearance: none;
    --upaep-select-bg-img: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjAxLjQgMzQyLjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTYwLTE2MGMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyMjQgMjc0LjcgODYuNiAxMzcuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MHoiLz48L3N2Zz4=");
    --upaep-select-bg-icon: none;
    --upaep-select-bg-disabled: var(--upaep-color-background);
    --upaep-select-disabled-opacity: .5;
    --upaep-select-focus-bg: var(--upaep-color-white);
    --upaep-select-focus-color: var(--upaep-color-dark-grey);
    --upaep-select-focus-border-size: 2px;
    --upaep-select-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-select-focus-outline: 0;
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(106, 130, 153, 0.25);
    width: var(--upaep-select-width);
    height: var(--upaep-select-height);
    padding: var(--upaep-select-padding);
    margin: var(--upaep-select-margin);
    font-size: var(--upaep-select-fz);
    font-weight: var(--upaep-select-fw);
    color: var(--upaep-select-color);
    -webkit-appearance: var(--upaep-select-appearance);
    -moz-appearance: var(--upaep-select-appearance);
    appearance: var(--upaep-select-appearance);
    background-color: var(--upaep-select-bg);
    background-image: var(--upaep-select-bg-img), var(--upaep-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem 1rem;
    border: var(--upaep-select-border-size) solid var(--upaep-select-border-color);
    border-radius: var(--upaep-select-border-radius);
    box-shadow: var(--upaep-select-boxshadow);
    display: block;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:disabled {
        background-color: var(--upaep-select-bg-disabled);
        opacity: var(--upaep-select-disabled-opacity);
    }

    &:hover:not(:disabled) {
        --upaep-select-border-color: var(--upaep-color-dark-grey);
    }

    &:focus:not(:disabled) {
        border: var(--upaep-select-focus-border-size) solid var(--upaep-select-focus-border-color);
        outline: var(--upaep-select-focus-outline);
        box-shadow: var(--upaep-select-focus-boxshadow);
        color: var(--upaep-select-focus-color);
        background-color: var(--upaep-select-focus-bg);
    }

    &[multiple] {
        background-image: none;
        --upaep-select-border-radius: 10px;
        --upaep-select-padding: .75rem;
    }
}

.upaep__select.__rounded {
    --upaep-select-border-radius: 50px;
}

.upaep__select.__black {
    --upaep-select-color: var(--upaep-color-white);
    --upaep-select-bg: var(--upaep-color-black);
    --upaep-select-bg-disabled: #292929;
    --upaep-select-border-color: var(--upaep-color-border-grey);
    --upaep-select-bg-img: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjAxLjQgMzQyLjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTYwLTE2MGMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyMjQgMjc0LjcgODYuNiAxMzcuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=");
}

.upaep__select.__black:focus:hover:not(:disabled),
.upaep__select.__black:focus:not(:disabled) {
    --upaep-select-focus-color: var(--upaep-color-white);
    --upaep-select-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-select-focus-outline: 0;
}

.upaep__select.__dark {
    --upaep-select-color: var(--upaep-color-white);
    --upaep-select-bg: var(--colordark);
    --upaep-select-bg-disabled: #414448;
    --upaep-select-border-color: var(--upaep-color-border-grey);
    --upaep-select-bg-img: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjAxLjQgMzQyLjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTYwLTE2MGMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyMjQgMjc0LjcgODYuNiAxMzcuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=");
}

.upaep__select.__dark:focus:hover:not(:disabled),
.upaep__select.__dark:focus:not(:disabled) {
    --upaep-select-focus-color: var(--upaep-color-white);
    --upaep-select-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-select-focus-outline: 0;
}

.was-validated .upaep__select:valid,
.__validated .upaep__select:valid,
.upaep__select.is-success,
.upaep__select.is-valid {
    --upaep-select-border-color: var(--upaep-color-success);
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--upaep-color-success);
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 1.5rem 1rem, 1.5rem 1.2rem;

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: right 0.75rem center, center right 2.25rem;
        background-size: 1.5rem 1rem, 1.5rem 1.2rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-success);
    }
}

.upaep__select.is-warning {
    --upaep-select-border-color: var(--upaep-color-warning);
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--upaep-color-warning);
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-warning);
    }
}

.was-validated .upaep__select:invalid,
.__validated .upaep__select:invalid,
.upaep__select.is-error,
.upaep__select.is-invalid {
    --upaep-select-border-color: var(--upaep-color-error);
    --upaep-select-boxshadow: ;
    --upaep-select-focus-border-color: var(--upaep-color-error);
    --upaep-select-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 1.5rem 1rem, 1.5rem 1.2rem;

    &:hover:not(:disabled):not([readonly]),
    &:focus:hover:not(:disabled):not([readonly]),
    &:focus:not(:disabled):not([readonly]) {
        --upaep-select-bg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        background-position: right 0.75rem center, center right 2.25rem;
        background-size: 1.5rem 1rem, 1.5rem 1.2rem;
    }

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-error);
    }
}

/*? ------ Controles de selección ------ */
.upaep__checkbox {
    --upaep-checkbox-width: 20px;
    --upaep-checkbox-height: 20px;
    --upaep-checkbox-bg: var(--upaep-color-white);
    --upaep-checkbox-border-size: 2px;
    --upaep-checkbox-border-style: solid;
    --upaep-checkbox-border-color: var(--upaep-color-border-grey);
    --upaep-checkbox-border-radius: 5px;
    --upaep-checkbox-margin: .25rem;
    --upaep-checkbox-hover-bg: var(--upaep-color-white);
    --upaep-checkbox-hover-border-size: 2px;
    --upaep-checkbox-hover-border-style: solid;
    --upaep-checkbox-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-checkbox-focus-bg: var(--upaep-color-white);
    --upaep-checkbox-focus-border-size: 2px;
    --upaep-checkbox-focus-border-style: solid;
    --upaep-checkbox-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-checkbox-active-bg: var(--upaep-color-white);
    --upaep-checkbox-active-border-size: 2px;
    --upaep-checkbox-active-border-style: solid;
    --upaep-checkbox-active-border-color: var(--upaep-color-dark-grey);
    --upaep-checkbox-checked-bg: var(--upaep-color-white);
    --upaep-checkbox-checked-content: '\f00c';
    --upaep-checkbox-checked-fz: var(--upaep-fz15);
    --upaep-checkbox-checked-fw: var(--upaep-fw-bold);
    --upaep-checkbox-checked-color: var(--upaep-color-dark-grey);
    --upaep-checkbox-checked-inset: -30% auto auto 5%;
    --upaep-checkbox-checked-scale: .5;
    width: var(--upaep-checkbox-width);
    height: var(--upaep-checkbox-height);
    background: var(--upaep-checkbox-bg);
    border: var(--upaep-checkbox-border-size) var(--upaep-checkbox-border-style) var(--upaep-checkbox-border-color);
    border-radius: var(--upaep-checkbox-border-radius);
    margin: var(--upaep-checkbox-margin);
    flex-shrink: 0;
    vertical-align: top;
    appearance: none;
    position: relative;
    cursor: pointer;

    &:checked {
        background: var(--upaep-checkbox-checked-bg);

        &:hover {
            background: var(--upaep-checkbox-checked-bg);
        }
    }

    &:checked::before {
        font-size: var(--upaep-checkbox-checked-fz);
        font-weight: var(--upaep-checkbox-checked-fw);
        color: var(--upaep-checkbox-checked-color);
        inset: var(--upaep-checkbox-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        scale: var(--upaep-checkbox-checked-scale);
        rotate: 45deg;
        width: 80%;
        height: 150%;
        border: 5px solid var(--upaep-checkbox-checked-color);
        border-left: 0;
        border-top: 0;
        content: '';
        animation: a_zoomIn .25s;
        position: absolute;
    }

    &:hover:not(:checked) {
        background: var(--upaep-checkbox-hover-bg);
        border: var(--upaep-checkbox-hover-border-size) var(--upaep-checkbox-hover-border-style) var(--upaep-checkbox-hover-border-color);
    }

    &:focus:checked {
        background: var(--upaep-checkbox-focus-bg);
        box-shadow: var(--upaep-checkbox-focus-boxshadow);
        border: var(--upaep-checkbox-focus-border-size) var(--upaep-checkbox-focus-border-style) var(--upaep-checkbox-focus-border-color);

    }

    &:active {
        filter: brightness(90%);
        background: var(--upaep-checkbox-active-bg);
    }

    &:disabled,
    &:disabled+.upaep__label {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    &~.upaep__label,
    &~span .upaep__label {
        cursor: pointer;
    }
}

.was-validated .upaep__checkbox:invalid,
.__validated .upaep__checkbox:invalid,
.upaep__checkbox.__error,
.upaep__checkbox.is-invalid {
    --upaep-checkbox-border-color: var(--upaep-color-error);
    --upaep-checkbox-hover-border-color: var(--upaep-color-error-hover);
    --upaep-checkbox-focus-border-color: var(--upaep-color-error);
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-checkbox-active-border-color: var(--upaep-color-error);
    --upaep-checkbox-checked-color: var(--upaep-color-error);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-error);
    }
}

.upaep__checkbox.__warning {
    --upaep-checkbox-border-color: var(--upaep-color-warning);
    --upaep-checkbox-hover-border-color: var(--upaep-color-warning-hover);
    --upaep-checkbox-focus-border-color: var(--upaep-color-warning);
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-checkbox-active-border-color: var(--upaep-color-warning);
    --upaep-checkbox-checked-color: var(--upaep-color-warning);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-warning);
    }
}

.was-validated .upaep__checkbox:valid,
.__validated .upaep__checkbox:valid,
.upaep__checkbox.__success,
.upaep__checkbox.is-valid {
    --upaep-checkbox-border-color: var(--upaep-color-success);
    --upaep-checkbox-hover-border-color: var(--upaep-color-success-hover);
    --upaep-checkbox-focus-border-color: var(--upaep-color-success);
    --upaep-checkbox-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-checkbox-active-border-color: var(--upaep-color-success);
    --upaep-checkbox-checked-color: var(--upaep-color-success);

    &~.upaep__label,
    &~span .upaep__label {
        --upaep-label-color: var(--upaep-color-success);
    }
}

.upaep__checkbox.__switch {
    --upaep-checkbox-checked-inset: 0;
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--upaep-color-border-grey);
    --upaep-checkbox-hover-bg: var(--upaep-color-border-grey);
    --upaep-checkbox-focus-bg: var(--upaep-color-border-grey);
    --upaep-checkbox-active-bg: var(--upaep-color-border-grey);
    --upaep-checkbox-checked-bg: var(--upaep-color-border-grey);
    --upaep-checkbox-checked-scale: .8;

    &::before {
        content: '';
        font-size: var(--upaep-checkbox-checked-fz);
        font-weight: var(--upaep-checkbox-checked-fw);
        color: var(--upaep-checkbox-checked-color);
        background: var(--upaep-checkbox-checked-color);
        inset: var(--upaep-checkbox-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        width: 50%;
        height: 100%;
        border-radius: 50%;
        animation: none;
        scale: .8;
        transition: all .25s;
        position: absolute;
    }

    &:checked:before {
        animation: none;
        rotate: 0deg;
        transform: translateX(100%);
    }
}

.was-validated .upaep__checkbox.__switch:invalid,
.__validated .upaep__checkbox.__switch:invalid,
.upaep__checkbox.__switch.is-error,
.upaep__checkbox.__switch.__error {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--upaep-color-error);
    --upaep-checkbox-hover-bg: var(--upaep-color-error);
    --upaep-checkbox-focus-bg: var(--upaep-color-error);
    --upaep-checkbox-active-bg: var(--upaep-color-error);
    --upaep-checkbox-checked-bg: var(--upaep-color-error);
}

.upaep__checkbox.__switch.is-warning,
.upaep__checkbox.__switch.__warning {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--upaep-color-warning);
    --upaep-checkbox-hover-bg: var(--upaep-color-warning);
    --upaep-checkbox-focus-bg: var(--upaep-color-warning);
    --upaep-checkbox-active-bg: var(--upaep-color-warning);
    --upaep-checkbox-checked-bg: var(--upaep-color-warning);
}

.was-validated .upaep__checkbox.__switch:valid,
.__validated .upaep__checkbox.__switch:valid,
.upaep__checkbox.__switch.is-success,
.upaep__checkbox.__switch.__success {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--upaep-color-success);
    --upaep-checkbox-hover-bg: var(--upaep-color-success);
    --upaep-checkbox-focus-bg: var(--upaep-color-success);
    --upaep-checkbox-active-bg: var(--upaep-color-success);
    --upaep-checkbox-checked-bg: var(--upaep-color-success);
}

.upaep__checkbox.__switch.__bicolor {
    --upaep-checkbox-width: 35px;
    --upaep-checkbox-border-radius: 50px;
    --upaep-checkbox-checked-content: '\f111';
    --upaep-checkbox-checked-fz: var(--upaep-fz14);
    --upaep-checkbox-checked-color: var(--upaep-color-white);
    --upaep-checkbox-bg: var(--upaep-color-success);
    --upaep-checkbox-active-bg: var(--upaep-color-success);
    --upaep-checkbox-focus-bg: var(--upaep-color-success);
    --upaep-checkbox-hover-bg: var(--upaep-color-success);
    --upaep-checkbox-checked-bg: #FF4D5F;

    &:checked {
        --upaep-checkbox-active-bg: #FF4D5F;
        --upaep-checkbox-hover-bg: #FF4D5F;
        --upaep-checkbox-focus-bg: #FF4D5F;
    }
}

.upaep__radio {
    --upaep-radio-width: 20px;
    --upaep-radio-height: 20px;
    --upaep-radio-bg: var(--upaep-color-white);
    --upaep-radio-border-size: 2px;
    --upaep-radio-border-style: solid;
    --upaep-radio-border-color: var(--upaep-color-border-grey);
    --upaep-radio-border-radius: 50px;
    --upaep-radio-margin: .25rem;
    --upaep-radio-hover-bg: var(--upaep-color-white);
    --upaep-radio-hover-border-size: 2px;
    --upaep-radio-hover-border-style: solid;
    --upaep-radio-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-radio-focus-bg: var(--upaep-color-white);
    --upaep-radio-focus-border-size: 2px;
    --upaep-radio-focus-border-style: solid;
    --upaep-radio-focus-border-color: var(--upaep-color-dark-grey);
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-radio-active-bg: var(--upaep-color-white);
    --upaep-radio-active-border-size: 2px;
    --upaep-radio-active-border-style: solid;
    --upaep-radio-active-border-color: var(--upaep-color-dark-grey);
    --upaep-radio-checked-content: '\f111';
    --upaep-radio-checked-fz: var(--upaep-fz10);
    --upaep-radio-checked-fw: var(--upaep-fw-bold);
    --upaep-radio-checked-color: var(--upaep-color-dark-grey);
    --upaep-radio-checked-scale: .65;
    --upaep-radio-checked-inset: 0;
    width: var(--upaep-radio-width);
    height: var(--upaep-radio-height);
    background: var(--upaep-radio-bg);
    border: var(--upaep-radio-border-size) var(--upaep-radio-border-style) var(--upaep-radio-border-color);
    border-radius: var(--upaep-radio-border-radius);
    margin: var(--upaep-radio-margin);
    flex-shrink: 0;
    vertical-align: top;
    appearance: none;
    position: relative;
    cursor: pointer;

    &:checked::before {
        font-size: var(--upaep-radio-checked-fz);
        font-weight: var(--upaep-radio-checked-fw);
        color: var(--upaep-radio-checked-color);
        background: var(--upaep-radio-checked-color);
        inset: var(--upaep-radio-checked-inset);
        font-family: var(--upaep-ff-fontawesome);
        scale: var(--upaep-radio-checked-scale);
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: a_zoomIn .25s;
        position: absolute;
    }

    &:hover {
        background: var(--upaep-radio-hover-bg);
        border: var(--upaep-radio-hover-border-size) var(--upaep-radio-hover-border-style) var(--upaep-radio-hover-border-color);
    }

    &:focus {
        background: var(--upaep-radio-focus-bg);
        box-shadow: var(--upaep-radio-focus-boxshadow);
        border: var(--upaep-radio-focus-border-size) var(--upaep-radio-focus-border-style) var(--upaep-radio-focus-border-color);
    }

    &:active {
        filter: brightness(90%);
    }

    &:disabled,
    &:disabled+.upaep__label {
        pointer-events: none;
        filter: none;
        opacity: 0.5;
    }

    &~.upaep__label,
    &~span .upaep__label {
        cursor: pointer;
    }
}

.was-validated .upaep__radio:invalid,
.__validated .upaep__radio:invalid,
.upaep__radio.__error {
    --upaep-radio-border-color: var(--upaep-color-error);
    --upaep-radio-hover-border-color: var(--upaep-color-error-hover);
    --upaep-radio-focus-border-color: var(--upaep-color-error);
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-radio-active-border-color: var(--upaep-color-error);
    --upaep-radio-checked-color: var(--upaep-color-error);
}

.upaep__radio.__warning {
    --upaep-radio-border-color: var(--upaep-color-warning);
    --upaep-radio-hover-border-color: var(--upaep-color-warning-hover);
    --upaep-radio-focus-border-color: var(--upaep-color-warning);
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-radio-active-border-color: var(--upaep-color-warning);
    --upaep-radio-checked-color: var(--upaep-color-warning);
}

.was-validated .upaep__radio:valid,
.__validated .upaep__radio:valid,
.upaep__radio.__success {
    --upaep-radio-border-color: var(--upaep-color-success);
    --upaep-radio-hover-border-color: var(--upaep-color-success-hover);
    --upaep-radio-focus-border-color: var(--upaep-color-success);
    --upaep-radio-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-radio-active-border-color: var(--upaep-color-success);
    --upaep-radio-checked-color: var(--upaep-color-success);
}

/*? ------ Label ------ */
.upaep__label {
    --upaep-label-width: auto;
    --upaep-label-height: auto;
    --upaep-label-bg: ;
    --upaep-label-fz: var(--upaep-fz14);
    --upaep-label-fw: var(--upaep-fw-medium);
    --upaep-label-color: var(--upaep-color-dark-grey);
    --upaep-label-padding: 0;
    --upaep-label-margin: 0 0 .25rem;
    --upaep-label-border-size: 0;
    --upaep-label-border-color: ;
    --upaep-label-transform: ;
    width: var(--upaep-label-width);
    height: var(--upaep-label-height);
    background: var(--upaep-label-bg);
    font-size: var(--upaep-label-fz);
    font-weight: var(--upaep-label-fw);
    color: var(--upaep-label-color);
    padding: var(--upaep-label-padding);
    margin: var(--upaep-label-margin);
    border: var(--upaep-label-border-size) solid var(--upaep-label-border-color);
    display: flex;
    align-items: center;
    transform: var(--upaep-label-transform);
}

.__dark~.upaep__label,
.__black~.upaep__label {
    --upaep-label-color: var(--upaep-color-white);
}

input:not([type=radio]):not([type=checkbox]):required~label:not(.file__label)::before,
textarea:required~label::before,
select:required~label::before,
.upaep__input:required&~.upaep__label::before,
.upaep__select:required&~.upaep__label::before,
.upaep__label.is-required::before,
.upaep__label.__required::before,
.upaep__input-text.is-required::before,
.upaep__input-text.__required::before {
    font-family: var(--upaep-ff-fontawesome);
    font-size: var(--upaep-fz10);
    content: "\002A";
    color: var(--upaep-color-red);
    padding: 0 5px;
}

/*? ------ input-group ------ */
.upaep__input-group {
    --upaep-group-width: auto;
    --upaep-group-height: auto;
    --upaep-group-padding: .5rem 0;
    --upaep-group-margin: 0;
    --upaep-group-fz: var(--upaep-fz14);
    --upaep-group-fw: var(--upaep-fw-regular);
    --upaep-group-color: var(--upaep-color-dark-grey);
    --upaep-group-bg: var(--upaep-color-background);
    --upaep-group-border-size: 2px;
    --upaep-group-border-color: var(--upaep-color-border-grey);
    --upaep-group-border-radius: 10px;
    --upaep-group-text-fz: var(--upaep-fz16);
    --upaep-group-text-fw: var(--upaep-fw-bold);
    --upaep-group-text-color: var(--upaep-color-dark-grey);
    --upaep-group-text-padding: .35rem .75rem;
    --upaep-group-text-bg: var(--upaep-color-white);
    --upaep-group-text-border-size: 2px;
    --upaep-group-text-border-style: solid;
    --upaep-group-text-border-color: var(--upaep-color-border-grey);
    --upaep-group-text-border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: var(--upaep-group-margin);
    padding: var(--upaep-group-padding);

    &:not(.__float-label) .upaep__label {
        --upaep-label-padding: 0;
        --upaep-label-margin: 0 .5rem;
    }

    & .upaep__input:not([type=range]) {
        --upaep-input-padding: .5rem;
        --upaep-input-margin: 0 .5rem;
    }

    & .upaep__select {
        --upaep-select-padding: .5rem;
        --upaep-select-margin: 0;
    }

    & .upaep__textarea {
        --upaep-textarea-padding: .5rem;
        --upaep-textarea-margin: 0 .5rem;
    }

    &.__first-label .upaep__label {
        order: 0;
    }

    &.__first-label .upaep__select,
    &.__first-label .upaep__textarea,
    &.__first-label .upaep__input {
        order: 1;
    }

    &>.upaep__input,
    &>.upaep__input-floating,
    &>.upaep__select {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        --upaep-input-margin: 0;
    }

    &:has(span)>.upaep__input,
    &:has(span)>.upaep__input-floating,
    &:has(span)>.upaep__select {
        width: 1%;
    }

    /* group-text */
    & .upaep__input-group-text {
        font-size: var(--upaep-group-text-fz);
        font-weight: var(--upaep-group-text-fw);
        color: var(--upaep-group-text-color);
        padding: var(--upaep-group-text-padding);
        background: var(--upaep-group-text-bg);
        border: var(--upaep-group-text-border-size) var(--upaep-group-text-border-style) var(--upaep-group-text-border-color);
        border-radius: var(--upaep-group-text-border-radius);
        display: flex;
        align-items: center;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
    }

    &:not(.__float-label):not(.__float-icon):not(.has-validation):not(.__feedback)>:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        --upaep-group-text-border-radius: 10px 0 0 10px;
    }

    &:has(span)>:not(:first-child):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.upaep__input-icon) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        --upaep-group-text-border-radius: 0 10px 10px 0;
    }

    &.__float-icon.__icon-left {
        .upaep__input-icon {
            --upaep-input-icon-iset: auto auto auto 5px !important;
        }

        .upaep__input {
            --upaep-input-padding: .35rem 1rem .35rem 3rem !important;
        }

        .upaep__select {
            --upaep-select-padding: .5rem .5rem .5rem 3rem;
        }
    }

    &.__float-icon.__icon-right {
        .upaep__input-icon {
            --upaep-input-icon-iset: auto 5px auto auto !important;
        }

        &:has(.upaep__select~.upaep__input-icon) .upaep__input-icon {
            --upaep-input-icon-iset: auto 20px auto auto !important;
        }

        .upaep__input {
            --upaep-input-padding: .35rem 3rem .35rem 1rem !important;
            background-position: right calc(0.375em + 1.8rem) center;

            &:hover:not(:disabled):not([readonly]),
            &:focus:hover:not(:disabled):not([readonly]),
            &:focus:not(:disabled):not([readonly]) {
                background-position: right calc(0.375em + 1.8rem) center !important;
            }
        }

        .upaep__select {
            --upaep-select-padding: .5rem .5rem .2rem 3rem;
            background-position: right 0.75rem center, center right 3.5rem;

            &:hover:not(:disabled):not([readonly]),
            &:focus:hover:not(:disabled):not([readonly]),
            &:focus:not(:disabled):not([readonly]) {
                background-position: right 0.75rem center, center right 3.5rem;
            }
        }
    }

}

/*? ------ input-icon ------ */
.upaep__input-icon {
    --upaep-input-icon-width: 40px;
    --upaep-input-icon-height: 40px;
    --upaep-input-icon-padding: .5rem;
    --upaep-input-icon-margin: 0 .5rem;
    --upaep-input-icon-border-size: 0;
    --upaep-input-icon-border-color: ;
    --upaep-input-icon-border-radius: 10px;
    --upaep-input-icon-bg: transparent;
    --upaep-input-icon-img-width: 100%;
    --upaep-input-icon-img-height: 100%;
    --upaep-input-icon-fz: var(--upaep-fz16);
    --upaep-input-icon-fw: var(--upaep-fw-bold);
    --upaep-input-icon-color: var(--upaep-color-red);
    --upaep-input-icon-boxhadow: ;
    --upaep-input-icon-hover-border-size: 0;
    --upaep-input-icon-hover-border-color: ;
    --upaep-input-icon-hover-border-radius: 10px;
    --upaep-input-icon-hover-fz: var(--upaep-fz16);
    --upaep-input-icon-hover-fw: var(--upaep-fw-bold);
    --upaep-input-icon-hover-color: var(--upaep-color-red);
    --upaep-input-icon-hover-boxhadow: ;
    --upaep-input-icon-cursor: default;
    --upaep-input-icon-iset: ;
    width: var(--upaep-input-icon-width);
    height: var(--upaep-input-icon-height);
    padding: var(--upaep-input-icon-padding);
    margin: var(--upaep-input-icon-margin);
    border-radius: var(--upaep-input-icon-border-radius);
    border: var(--upaep-input-icon-border-size) solid var(--upaep-input-icon-border-color);
    box-shadow: var(--upaep-input-icon-boxhadow);
    cursor: var(--upaep-input-icon-cursor);
    inset: var(--upaep-input-icon-iset);
    background: var(--upaep-input-icon-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    &>* {
        font-size: var(--upaep-input-icon-fz);
        font-weight: var(--upaep-input-icon-fw);
        color: var(--upaep-input-icon-color);
        width: var(--upaep-input-icon-img-width);
        height: var(--upaep-input-icon-img-height);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &>*:hover {
        font-size: var(--upaep-input-icon-hover-fz);
        font-weight: var(--upaep-input-icon-hover-fw);
        color: var(--upaep-input-icon-hover-color);
    }

    &:hover {
        border-radius: var(--upaep-input-icon-hover-border-radius);
        border: var(--upaep-input-icon-hover-border-size) solid var(--upaep-input-icon-hover-border-color);
        box-shadow: var(--upaep-input-icon-hover-boxhadow);
    }
}


/*? ------ float-label ------ */
.upaep__input-group.__float-label ::placeholder {
    --upaep-input-placeholder-color: transparent;
}

.upaep__input-group.__float-label .upaep__label {
    --upaep-label-margin: .5rem;
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.upaep__input-group.__icon-left.__float-label .upaep__label {
    inset: 0 auto auto 20px;
}

.upaep__input-group.__float-label input:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-white);
}

.upaep__input-group.__float-label input.__black:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea.__black:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select.__black:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input.__black:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-black);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label input.__dark:not(:placeholder-shown)~label,
.upaep__input-group.__float-label textarea.__dark:not(:placeholder-shown)~label,
.upaep__input-group.__float-label input.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label textarea.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__textarea.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__select.__dark:not(:placeholder-shown)&~.upaep__label,
.upaep__input-group.__float-label .upaep__input.__dark:not(:placeholder-shown)&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--colordark);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input:focus~label,
.upaep__input-group.__float-label .upaep__input:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input.__black:focus~label,
.upaep__input-group.__float-label .upaep__input.__black:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--upaep-color-black);
    --upaep-label-color: var(--upaep-color-white);
}

.upaep__input-group.__float-label .upaep__input.__dark:focus~label,
.upaep__input-group.__float-label .upaep__input.__dark:focus&~.upaep__label {
    --upaep-label-transform: scale(.8) translateY(-.8rem) translateX(1rem);
    --upaep-label-padding: 0 .5rem;
    --upaep-label-bg: var(--colordark);
    --upaep-label-color: var(--upaep-color-white);
}

/*? ------ checks / radios -----  */

.upaep__checkbox-group,
.upaep__radio-group {
    display: flex;
    flex-direction: row;

    & .upaep__label {
        --upaep-label-padding: 0;
        --upaep-label-margin: 0;
    }
}

.upaep__checkbox-group.__first-label .upaep__label,
.upaep__radio-group.__first-label .upaep__label {
    order: 0;
}

.upaep__checkbox-group.__first-label .upaep__checkbox,
.upaep__radio-group.__first-label .upaep__radio {
    order: 1;
}

.upaep__checkboxs,
.upaep__radios {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.upaep__checkboxs.__inline,
.upaep__radios.__inline {
    flex-direction: row;
    gap: 10px;
}

/*? ------ Feedbacks ------ */
.upaep__feedback {
    --upaep-feedback-width: 100%;
    --upaep-feedback-margin: .25rem 0;
    --upaep-feedback-fz: var(--upaep-fz14);
    --upaep-feedback-fw: var(--upaep-fw-bold);
    --upaep-feedback-color: var(--upaep-color-dark-grey);
    width: var(--upaep-feedback-width);
    margin: var(--upaep-feedback-margin);
    font-size: var(--upaep-feedback-fz);
    font-weight: var(--upaep-feedback-fw);
    color: var(--upaep-feedback-color);
    display: none;

    &.is-show {
        display: block;
    }
}

.was-validated :valid,
.__validated :valid,
.was-validated .upaep__autocomplete:has( :valid),
.__validated .upaep__autocomplete:has( :valid),
.was-validated .upaep__tokenfield:has( :valid),
.__validated .upaep__tokenfield:has( :valid),
.was-validated .upaep__selectpicker:has( :valid),
.__validated .upaep__selectpicker:has( :valid),
.was-validated .upaep__dropzone:has( :valid),
.__validated .upaep__dropzone:has( :valid),
.was-validated .upaep__radio-group:has( :valid),
.__validated .upaep__radio-group:has( :valid),
.was-validated .upaep__checkbox-group:has( :valid),
.__validated .upaep__checkbox-group:has( :valid),
.was-validated .upaep__input-container:has( :valid),
.__validated .upaep__input-container:has( :valid),
.was-validated .upaep__input-wrapper:has( :valid),
.__validated .upaep__input-wrapper:has( :valid),
.is-valid,
.is-success {

    &~span .upaep__feedback.__valid,
    &~span .upaep__feedback.__success,
    &~.upaep__feedback.__valid,
    &~.upaep__feedback.__success {
        display: block;
    }
}

.was-validated .upaep__input-container:has([type="radio"]:valid),
.__validated .upaep__input-container:has([type="radio"]:valid),
.was-validated .upaep__input-container:has([type="checkbox"]:valid),
.__validated .upaep__input-container:has([type="checkbox"]:valid) {

    .upaep__feedback.__valid,
    .upaep__feedback.__success {
        display: block;
    }
}

.was-validated :invalid,
.__validated :invalid,
.was-validated .upaep__autocomplete:has( :invalid),
.__validated .upaep__autocomplete:has( :invalid),
.was-validated .upaep__tokenfield:has( :invalid),
.__validated .upaep__tokenfield:has( :invalid),
.was-validated .upaep__selectpicker:has( :invalid),
.__validated .upaep__selectpicker:has( :invalid),
.was-validated .upaep__dropzone:has( :invalid),
.__validated .upaep__dropzone:has( :invalid),
.was-validated .upaep__radio-group:has( :invalid),
.__validated .upaep__radio-group:has( :invalid),
.was-validated .upaep__checkbox-group:has( :invalid),
.__validated .upaep__checkbox-group:has( :invalid),
.was-validated .upaep__input-container:has( :invalid),
.__validated .upaep__input-container:has( :invalid),
.was-validated .upaep__input-wrapper:has( :invalid),
.__validated .upaep__input-wrapper:has( :invalid),
.is-invalid,
.is-error {

    &~span .upaep__feedback.__invalid,
    &~span .upaep__feedback.__error,
    &~.upaep__feedback.__invalid,
    &~.upaep__feedback.__error {
        display: block;
    }
}

.was-validated .upaep__input-container:has([type="radio"]:invalid),
.__validated .upaep__input-container:has([type="radio"]:invalid),
.was-validated .upaep__input-container:has([type="checkbox"]:invalid),
.__validated .upaep__input-container:has([type="checkbox"]:invalid) {

    .upaep__feedback.__invalid,
    .upaep__feedback.__error {
        display: block;
    }
}

.is-warning {

    &~span .upaep__feedback.__warning,
    &~.upaep__feedback.__warning {
        display: block;
    }
}

.upaep__feedback.__invalid,
.upaep__feedback.__error {
    --upaep-feedback-color: var(--upaep-color-error);
}

.upaep__feedback.__valid,
.upaep__feedback.__success {
    --upaep-feedback-color: var(--upaep-color-success);
}

.upaep__feedback.__warning {
    --upaep-feedback-color: var(--upaep-color-warning);
}

/*? ------ Agrupamiento de inputs ------ */
.upaep__input-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;

    & .upaep__btn:not(.__dropzone),
    & .upaep__input,
    & .upaep__select {
        margin: 0;
    }

    .upaep__btn {
        --upaep-btn-padding: .35rem .75rem
    }

    &>.upaep__input,
    &>.upaep__select,
    &>.upaep__input-wrapper,
    &>.upaep__selectpicker {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin: 0;
    }

    &:not(.is-feedback)> :not(:last-child):not(.upaep__input-wrapper),
    &:not(.is-feedback)> :not(:last-child):not(.upaep__input-wrapper).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn,
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__input,
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__select,
    &:not(.is-feedback)>.upaep__input-wrapper:not(:last-child)>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &.is-feedback> :nth-last-child(n+3):not(.upaep__input-wrapper),
    &.is-feedback> :nth-last-child(n+3):not(.upaep__input-wrapper).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn,
    &.is-feedback>.upaep__input-wrapper:nth-last-child(n+3)>.upaep__input,
    &.is-feedback>.upaep__input-wrapper:nth-last-child(n+3)>.upaep__select,
    &.is-feedback>.upaep__input-wrapper:nth-last-child(n+3)>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &> :not(:first-child):not(.upaep__feedback),
    &> :not(:first-child):not(.upaep__feedback).upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &>.upaep__input-wrapper:not(:first-child)>.upaep__input,
    &>.upaep__input-wrapper:not(:first-child)>.upaep__select,
    &>.upaep__input-wrapper:not(:first-child)>.upaep__selectpicker .upaep__selectpicker-btn .upaep__btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &>.is-hide {
        display: none;
    }

    &:has(>:first-child.is-hide) {

        &>.upaep__input:not(:first-child),
        &>.upaep__select:not(:first-child),
        &>.upaep__input-wrapper:not(:first-child)>.upaep__input,
        &>.upaep__input-wrapper:not(:first-child)>.upaep__select {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
        }
    }

    &:has(>:last-child.is-hide) {
        > :not(:last-child):not(.upaep__input-wrapper) {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }
    }
}

.upaep__input-addon {
    --upaep-input-addon-padding: 0.25rem 0.75rem;
    --upaep-input-addon-bg: #f9fafb;
    --upaep-input-addon-border-size: 2px;
    --upaep-input-addon-border-style: solid;
    --upaep-input-addon-border-color: var(--upaep-color-border-grey);
    --upaep-input-addon-border-radius: 10px;
    padding: var(--upaep-input-addon-padding);
    background: var(--upaep-input-addon-bg);
    border: var(--upaep-input-addon-border-size) var(--upaep-input-addon-border-style)var(--upaep-input-addon-border-color);
    border-radius: var(--upaep-input-addon-border-radius);
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.5;

    &.__rounded {
        --upaep-input-addon-border-radius: 50px;
    }
}

.upaep__input-text {
    --upaep-input-text-fz: var(--upaep-fz14);
    --upaep-input-text-fw: var(--upaep-fw-medium);
    --upaep-input-text-color: var(--upaep-color-dark-grey);
    --upaep-input-text-margin: 0 0 .25rem;
    --upaep-input-text-padding: 0;
    font-size: var(--upaep-input-text-fz);
    font-weight: var(--upaep-input-text-fw);
    color: var(--upaep-input-text-color);
    margin: var(--upaep-input-text-margin);
    padding: var(--upaep-input-text-padding);
}

.upaep__input-wrapper {
    position: relative;

    .upaep__input-icon {
        &.__left {
            --upaep-input-icon-iset: auto auto auto 5px;
        }

        &.__right {
            --upaep-input-icon-iset: auto 5px auto auto;
        }
    }

    &:has(.upaep__input-icon.__left) {

        .upaep__input.__rounded,
        .upaep__input {
            --upaep-input-padding: .35rem 1rem .35rem 3rem;
        }

        .upaep__select.__rounded,
        .upaep__select {
            --upaep-select-padding: .5rem .5rem .5rem 3rem;
        }
    }

    .upaep__feedback {
        width: 100%;
    }

    &:has(.upaep__label.__float) {

        ::placeholder {
            --upaep-input-placeholder-color: transparent;
        }

        &:has(>:is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), [type="date"])),
        &:has(>:is(label.active, :focus+label, [placeholder]:not(:placeholder-shown)+label, select+label)) {

            .upaep__label {
                --upaep-label-transform: scale(0.8) translate(-10%, -1rem);
            }
        }

        .upaep__input,
        .upaep__select {
            padding-top: 1rem;
        }

        .upaep__label {
            position: absolute;
            inset: 50% auto auto 0;
            translate: 0 -50%;
            white-space: nowrap;
            pointer-events: none;
            transition: all .2s;
            display: flex;
            gap: .25rem;
            padding: 0 .5rem;
        }
    }
}

/*? ------ Tags ------ */
.upaep__tag {
    --upaep-tag-width: auto;
    --upaep-tag-height: auto;
    --upaep-tag-minwidth: 90px;
    --upaep-tag-minheight: 2.5rem;
    --upaep-tag-maxwidth: auto;
    --upaep-tag-maxheight: auto;
    --upaep-tag-border-size: 2px;
    --upaep-tag-border-style: solid;
    --upaep-tag-border-color: var(--upaep-color-border-grey);
    --upaep-tag-border-radius: 50px;
    --upaep-tag-padding: .2rem;
    --upaep-tag-margin: .5rem;
    --upaep-tag-bg: var(--upaep-color-white);
    --upaep-tag-boxshadow: ;
    --upaep-tag-text-fz: var(--upaep-fz16);
    --upaep-tag-text-fw: var(--upaep-fw-medium);
    --upaep-tag-text-color: var(--upaep-color-black);
    --upaep-tag-text-margin: 0 .5rem;
    --upaep-tag-text-padding: 0;
    --upaep-tag-close-fz: var(--upaep-fz16);
    --upaep-tag-close-fw: var(--upaep-fw-bold);
    --upaep-tag-close-color: var(--upaep-color-black);
    --upaep-tag-close-margin: 0 .5rem;
    --upaep-tag-close-padding: 0;
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    width: var(--upaep-tag-width);
    height: var(--upaep-tag-height);
    min-width: var(--upaep-tag-minwidth);
    min-height: var(--upaep-tag-minheight);
    max-width: var(--upaep-tag-maxwidth);
    max-height: var(--upaep-tag-maxheight);
    border: var(--upaep-tag-border-size) var(--upaep-tag-border-style) var(--upaep-tag-border-color);
    border-radius: var(--upaep-tag-border-radius);
    padding: var(--upaep-tag-padding);
    margin: var(--upaep-tag-margin);
    background: var(--upaep-tag-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: var(--upaep-zindex-tag);
    cursor: default;

    &:hover,
    &:focus,
    &.is-selected {
        box-shadow: var(--upaep-tag-hover-boxshadow);
    }

    & span,
    & .upaep__tag-text {
        font-size: var(--upaep-tag-text-fz);
        font-weight: var(--upaep-tag-text-fw);
        color: var(--upaep-tag-text-color);
        margin: var(--upaep-tag-text-margin);
        padding: var(--upaep-tag-text-padding);
    }

    & span small,
    & .upaep__tag-text small {
        font-size: var(--upaep-fz12);
    }

    & i,
    & .upaep__tag-close {
        font-size: var(--upaep-tag-close-fz);
        font-weight: var(--upaep-tag-close-fw);
        color: var(--upaep-tag-close-color);
        margin: var(--upaep-tag-close-margin);
        padding: var(--upaep-tag-close-padding);
        cursor: pointer;
    }

    & i:hover,
    & .upaep__tag-close:hover {
        scale: 1.2;
    }
}

.upaep__tag.__black {
    --upaep-tag-border-color: var(--upaep-color-border-grey);
    --upaep-tag-bg: var(--upaep-color-black);
    --upaep-tag-text-color: var(--upaep-color-white);
    --upaep-tag-close-color: var(--upaep-color-white);
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
}

.upaep__tag.__dark {
    --upaep-tag-border-color: var(--upaep-color-border-grey);
    --upaep-tag-bg: var(--colordark);
    --upaep-tag-text-color: var(--upaep-color-white);
    --upaep-tag-close-color: var(--upaep-color-white);
    --upaep-tag-hover-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
}

.upaep__tag-group {
    --upaep-taggroup-width: 100%;
    --upaep-taggroup-height: auto;
    --upaep-taggroup-padding: .2rem .35rem;
    --upaep-taggroup-margin: 0;
    --upaep-taggroup-border-size: 1px;
    --upaep-taggroup-border-style: solid;
    --upaep-taggroup-border-color: var(--upaep-color-border-grey);
    --upaep-taggroup-border-bottom-size: 1px;
    --upaep-taggroup-border-bottom-style: solid;
    --upaep-taggroup-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-taggroup-border-radius: 10px;
    --upaep-taggroup-color: transparent;
    width: var(--upaep-taggroup-width);
    height: var(--upaep-taggroup-height);
    padding: var(--upaep-taggroup-padding);
    margin: var(--upaep-taggroup-margin);
    border: var(--upaep-taggroup-border-size) var(--upaep-taggroup-border-style) var(--upaep-taggroup-border-color);
    border-bottom: var(--upaep-taggroup-border-bottom-size) var(--upaep-taggroup-border-bottom-style) var(--upaep-taggroup-border-bottom-color);
    border-radius: var(--upaep-taggroup-border-radius);
    color: var(--upaep-taggroup-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/*? ------ Dropzone ------ */
.upaep__dropzone {
    --uapep-dropzone-width: 100%;
    --uapep-dropzone-height: auto;
    --uapep-dropzone-label-width: 100%;
    --uapep-dropzone-label-height: auto;
    --uapep-dropzone-content-width: 100%;
    --uapep-dropzone-content-height: auto;
    --uapep-dropzone-content-padding: 1rem;
    --uapep-dropzone-content-border-size: 2px;
    --uapep-dropzone-content-border-style: solid;
    --uapep-dropzone-content-border-color: var(--upaep-color-border-grey);
    --uapep-dropzone-content-border-radius: 10px;
    --uapep-dropzone-content-boxshadow: ;
    --uapep-dropzone-content-cursor: pointer;
    --uapep-dropzone-content-outline-size: 0;
    --uapep-dropzone-content-outline-color: var(--upaep-color-border-grey);
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --uapep-dropzone-content-icon-fz: var(--upaep-fz20);
    --uapep-dropzone-content-icon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-icon-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-content-label-fz: var(--upaep-fz16);
    --uapep-dropzone-content-label-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-label-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-content-label-margin: 0 0 .5rem;
    --uapep-dropzone-content-textfile-fz: var(--upaep-fz16);
    --uapep-dropzone-content-textfile-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-textfile-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-content-dragdrop-fz: var(--upaep-fz14);
    --uapep-dropzone-content-dragdrop-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-dragdrop-color: var(--upaep-color-red);
    --uapep-dropzone-content-dragdrop-margin: 0;
    --uapep-dropzone-content-textaccept-fz: var(--upaep-fz14);
    --uapep-dropzone-content-textaccept-fw: var(--upaep-fw-bold);
    --uapep-dropzone-content-textaccept-color: var(--upaep-color-red);
    --uapep-dropzone-content-textaccept-margin: .5rem 0;
    --uapep-dropzone-load-deletetext-fz: var(--upaep-fz12);
    --uapep-dropzone-load-deletetext-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-deletetext-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-load-deleteicon-fz: var(--upaep-fz14);
    --uapep-dropzone-load-deleteicon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-deleteicon-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-load-hover-deletetext-fz: var(--upaep-fz12);
    --uapep-dropzone-load-hover-deletetext-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-hover-deletetext-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-load-hover-deleteicon-fz: var(--upaep-fz14);
    --uapep-dropzone-load-hover-deleteicon-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-hover-deleteicon-color: var(--upaep-color-red);
    --uapep-dropzone-load-hover-delete-label-width: 90%;
    --uapep-dropzone-load-delete-label-fz: var(--upaep-fz16);
    --uapep-dropzone-load-delete-label-fw: var(--upaep-fw-bold);
    --uapep-dropzone-load-delete-label-color: var(--upaep-color-dark-grey);
    --uapep-dropzone-load-delete-label-margin: 0;
    width: var(--uapep-dropzone-width);
    height: var(--uapep-dropzone-height);

    &:has(input[readonly]) {
        opacity: 1;
        background: var(--upaep-color-tenue-gray);
    }

    &:has(input[disabled]) {
        opacity: .5;
        background: var(--upaep-color-tenue-gray);
    }

    & .file__input,
    &>input[type=file] {
        display: none;
    }

    & label {
        width: var(--uapep-dropzone-label-width);
        height: var(--uapep-dropzone-label-height);
    }

    & .upaep__dropzone-content {
        width: var(--uapep-dropzone-content-width);
        height: var(--uapep-dropzone-content-height);
        padding: var(--uapep-dropzone-content-padding);
        border: var(--uapep-dropzone-content-border-size) var(--uapep-dropzone-content-border-style) var(--uapep-dropzone-content-border-color);
        border-radius: var(--uapep-dropzone-content-border-radius);
        box-shadow: var(--uapep-dropzone-content-boxshadow);
        cursor: var(--uapep-dropzone-content-cursor);
        outline: var(--uapep-dropzone-content-outline-size) solid var(--uapep-dropzone-content-outline-color);

        &:hover {
            box-shadow: var(--uapep-dropzone-content-hover-boxshadow);
        }

        &:has(.upaep__dropzone-load.is-dragover) {
            --uapep-dropzone-content-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
        }

        & .upaep__dropzone-load:not(.is-active) {
            display: none;
        }
    }

    & .upaep__dropzone-icon {
        font-size: var(--uapep-dropzone-content-icon-fz);
        color: var(--uapep-dropzone-content-icon-fw);
        font-weight: var(--uapep-dropzone-content-icon-color);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-textlabel {
        font-size: var(--uapep-dropzone-content-label-fz);
        font-weight: var(--uapep-dropzone-content-label-fw);
        color: var(--uapep-dropzone-content-label-color);
        margin: var(--uapep-dropzone-content-label-margin);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        & .upaep__btn.__dropzone {
            --upaep-btn-width: 90%;
            --upaep-btn-border-size: 2px;
            --upaep-btn-border-color: var(--upaep-color-red);
            --upaep-btn-fz: var(--upaep-fz14);
            --upaep-btn-fw: var(--upaep-fw-bold);
            --upaep-btn-color: var(--upaep-color-red);
            --upaep-btn-cont-color: var(--upaep-color-red);
            --upaep-btn-bg: var(--upaep-color-background);
            --upaep-btn-hover-bg: var(--upaep-color-tenue-gray);
            --upaep-btn-hover-border-size: 2px;
            --upaep-btn-hover-border-color: var(--upaep-color-border-grey);
            --upaep-btn-hover-color: var(--upaep-color-dark-grey);
            --upaep-btn-hover-cont-color: var(--upaep-color-dark-grey);
        }
    }

    & .upaep__dragdrop {
        font-size: var(--uapep-dropzone-content-dragdrop-fz);
        font-weight: var(--uapep-dropzone-content-dragdrop-fw);
        color: var(--uapep-dropzone-content-dragdrop-color);
        margin: var(--uapep-dropzone-content-dragdrop-margin);
    }

    & .upaep__dropzone-textaccept {
        font-size: var(--uapep-dropzone-content-textaccept-fz);
        font-weight: var(--uapep-dropzone-content-textaccept-fw);
        color: var(--uapep-dropzone-content-textaccept-color);
        margin: var(--uapep-dropzone-content-textaccept-margin);
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
    }

    & .upaep__dropzone-load,
    & .upaep__dropzone-load-delete {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 5;
    }

    & .upaep__dropzone-load-delete:not(.is-active) {
        display: none;
    }

    & .upaep__dropzone-delete {
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &:not(:hover) .__text {
            display: none;
        }

        & .__icon {
            font-size: var(--uapep-dropzone-load-deleteicon-fz);
            font-weight: var(--uapep-dropzone-load-deleteicon-fw);
            color: var(--uapep-dropzone-load-deleteicon-color);
            text-align: end;
        }

        &:hover .__icon {
            font-size: var(--uapep-dropzone-load-hover-deleteicon-fz);
            font-weight: var(--uapep-dropzone-load-hover-deleteicon-fw);
            color: var(--uapep-dropzone-load-hover-deleteicon-color);
            text-align: end;
        }

        & .__text {
            font-size: var(--uapep-dropzone-load-deletetext-fz);
            font-weight: var(--uapep-dropzone-load-deletetext-fw);
            color: var(--uapep-dropzone-load-deletetext-color);
            text-align: end;
            position: absolute;
            right: -50px;
        }

        &:hover .__text {
            font-size: var(--uapep-dropzone-load-hover-deletetext-fz);
            font-weight: var(--uapep-dropzone-load-hover-deletetext-fw);
            color: var(--uapep-dropzone-load-hover-deletetext-color);
            text-align: end;
            position: absolute;
            right: -50px;
        }
    }

    & .upaep__dropzone-load-delete-header {
        width: 100%;
        min-height: 1.5rem;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        & .upaep__dropzone-load-delete-label {
            width: var(--uapep-dropzone-load-delete-label-width);
            font-size: var(--uapep-dropzone-load-delete-label-fz);
            font-weight: var(--uapep-dropzone-load-delete-label-fw);
            color: var(--uapep-dropzone-load-delete-label-color);
            margin: var(--uapep-dropzone-load-delete-label-margin);
            text-align: start;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
        }
    }

    .upaep__dropzone-textfile {
        font-size: var(--uapep-dropzone-content-textfile-fz);
        font-weight: var(--uapep-dropzone-content-textfile-fw);
        color: var(--uapep-dropzone-content-textfile-color);
        margin: 0;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        display: flex;
        flex-direction: column;

        & span {
            margin: 0 5px;
        }

        & .__size {
            font-size: var(--upaep-fz12);
        }
    }

    & .upaep__dropzone-load-delete-content.__horizontal {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: row;

        & .upaep__dropzone-icon {
            width: 50px;
            margin: 0;
        }

        & .upaep__dropzone-textfile {
            width: 100%;
            margin: 0;
            text-align: start;
        }
    }

    .upaep__dropzone-load-confirm {
        position: absolute;
        bottom: 0px;
        background: #25d366;
        width: 100%;
        left: 0;
        color: white;
        padding: 0 1rem;
        border-radius: 10px;
        animation: slideInLeft 2s;

        & p {
            margin: 0;
        }
    }

    .upaep__dropzone-load-delete-inner {
        width: 100%;
    }

    .upaep__dropzone-load-delete-item {
        &:not(:only-child) {
            margin: 1rem 0;
            padding: .5rem;
            border-bottom: 2px solid #828282;
        }
    }

}

.upaep__dropzone.is-initialized {
    --upaep-dropzone-status-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-status-fz: var(--upaep-fz18);
    --upaep-dropzone-status-fw: var(--upaep-fw-regular);
    --upaep-dropzone-status-padding: .25rem;
    --upaep-dropzone-dragdrop-width: 100%;
    --upaep-dropzone-dragdrop-height: 100%;
    --upaep-dropzone-dragdrop-padding: 1rem;
    --upaep-dropzone-dragdrop-bg: var(--upaep-color-white);
    --upaep-dropzone-dragdrop-border-size: 2px;
    --upaep-dropzone-dragdrop-border-style: dashed;
    --upaep-dropzone-dragdrop-border-color: #B8BABC;
    --upaep-dropzone-dragdrop-border-radius: 10px;
    --upaep-dropzone-dragdrop-hover-bg: var(--upaep-color-white);
    --upaep-dropzone-dragdrop-hover-border-size: 2px;
    --upaep-dropzone-dragdrop-hover-border-style: dashed;
    --upaep-dropzone-dragdrop-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-dropzone-title-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-title-fz: var(--upaep-fz18);
    --upaep-dropzone-title-fw: var(--upaep-fw-bold);
    --upaep-dropzone-title-align: center;
    --upaep-dropzone-subtitle-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-subtitle-fz: var(--upaep-fz16);
    --upaep-dropzone-subtitle-fw: var(--upaep-fw-bold);
    --upaep-dropzone-subtitle-align: center;
    --upaep-dropzone-formatsize-color: var(--upaep-color-blue-primary);
    --upaep-dropzone-formatsize-fz: var(--upaep-fz14);
    --upaep-dropzone-formatsize-fw: var(--upaep-fw-regular);
    --upaep-dropzone-formatsize-align: center;
    --upaep-dropzone-file-bg: var(--upaep-color-background);
    --upaep-dropzone-file-padding: .5rem;
    --upaep-dropzone-file-margin: 0 0 1rem;
    --upaep-dropzone-file-border-radius: 10px;
    --upaep-dropzone-file-title-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-file-title-fz: var(--upaep-fz16);
    --upaep-dropzone-file-title-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-title-align: start;
    --upaep-dropzone-file-icon-size: 30px;
    --upaep-dropzone-file-icon-height: 30px;
    --upaep-dropzone-file-icon-color: var(--upaep-color-success);
    --upaep-dropzone-file-icon-fz: var(--upaep-fz28);
    --upaep-dropzone-file-text-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-file-text-fz: var(--upaep-fz18);
    --upaep-dropzone-file-name-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-file-name-fz: var(--upaep-fz15);
    --upaep-dropzone-file-name-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-size-color: var(--upaep-color-dark-grey);
    --upaep-dropzone-file-size-fz: var(--upaep-fz12);
    --upaep-dropzone-file-size-fw: var(--upaep-fw-semibold);
    --upaep-dropzone-file-delete-width: 20px;
    --upaep-dropzone-file-delete-height: 20px;
    --upaep-dropzone-file-delete-color: var(--upaep-color-black);
    --upaep-dropzone-file-delete-fz: var(--upaep-fz16);
    --upaep-dropzone-file-delete-hover-color: var(--upaep-color-red);

    &.is-initialized {
        height: 100%;
    }

    &.is-rejected {
        --upaep-dropzone-status-color: var(--upaep-color-error);
    }

    &.is-approved {
        --upaep-dropzone-status-color: var(--upaep-color-success);
    }

    &.is-revision {
        --upaep-dropzone-status-color: var(--upaep-color-blue-sky);
    }

    &.is-upload:not(:has(input[type=file][multiple])) {
        .upaep__dropzone-area {
            display: none;
        }
    }

    &.is-uploading {
        .upaep__dropzone-dragdrop {
            background: var(--upaep-dropzone-dragdrop-hover-bg);
            border: var(--upaep-dropzone-dragdrop-hover-border-size) var(--upaep-dropzone-dragdrop-hover-border-style) var(--upaep-dropzone-dragdrop-hover-border-color);
            box-shadow: var(--upaep-dropzone-dragdrop-hover-boxshadow);
        }
    }

    &:not(.is-upload) {
        .upaep__dropzone-simple {
            display: none;
        }

        .upaep__dropzone-files-clear {
            display: none;
        }
    }

    .upaep__dropzone-area {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .upaep__dropzone-inner {
        width: 100%;
        height: 100%;
        padding: 1rem;
        display: flex;
        gap: 1rem;
    }

    .upaep__dropzone-status {
        color: var(--upaep-dropzone-status-color);
        font-size: var(--upaep-dropzone-status-fz);
        font-weight: var(--upaep-dropzone-status-fw);
        padding: var(--upaep-dropzone-status-padding);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: .5rem;
    }

    .upaep__dropzonse-status-icon {
        width: 100%;
        flex: 1 0 0;
    }

    .upaep__dropzone-status-text {
        width: 100%;
        margin: 0;
    }

    .upaep__dropzone-label {
        width: 100%;
        height: 100%;
    }

    .upaep__dropzone-dragdrop {
        width: var(--upaep-dropzone-dragdrop-width);
        height: var(--upaep-dropzone-dragdrop-height);
        padding: var(--upaep-dropzone-dragdrop-padding);
        background: var(--upaep-dropzone-dragdrop-bg);
        border: var(--upaep-dropzone-dragdrop-border-size) var(--upaep-dropzone-dragdrop-border-style) var(--upaep-dropzone-dragdrop-border-color);
        border-radius: var(--upaep-dropzone-dragdrop-border-radius);
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &:hover {
            background: var(--upaep-dropzone-dragdrop-hover-bg);
            border: var(--upaep-dropzone-dragdrop-hover-border-size) var(--upaep-dropzone-dragdrop-hover-border-style) var(--upaep-dropzone-dragdrop-hover-border-color);
            box-shadow: var(--upaep-dropzone-dragdrop-hover-boxshadow);
        }
    }

    .upaep__dropzone-title {
        color: var(--upaep-dropzone-title-color);
        font-size: var(--upaep-dropzone-title-fz);
        font-weight: var(--upaep-dropzone-title-fw);
        text-align: var(--upaep-dropzone-title-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-subtitle {
        color: var(--upaep-dropzone-subtitle-color);
        font-size: var(--upaep-dropzone-subtitle-fz);
        font-weight: var(--upaep-dropzone-subtitle-fw);
        text-align: var(--upaep-dropzone-subtitle-align);
        word-wrap: break-word;
    }

    .upaep_dropzone-button {
        width: auto;

        .upaep__btn {
            --upaep-btn-margin: .5rem auto;
        }
    }

    .upaep__dropzone-formatsize {
        color: var(--upaep-dropzone-formatsize-color);
        font-size: var(--upaep-dropzone-formatsize-fz);
        font-weight: var(--upaep-dropzone-formatsize-fw);
        text-align: var(--upaep-dropzone-formatsize-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-preview {
        width: 100%;
    }

    .upaep__dropzone-simple {
        width: 100%;

        .upaep__dropzone-file {
            height: 100%;
        }

        &:not(:has(.upaep__dropzone-file-title:empty)) .upaep__dropzone-file-delete {
            position: absolute;
            inset: 8px 8px auto auto;
        }
    }

    .upaep__dropzone-files {
        width: 100%;
        height: 100%;
        list-style: none;
        padding: .5rem;
        margin: 0;
    }

    .upaep__dropzone-multiple {
        width: 50%;

        .upaep__dropzone-files {
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }

    }

    .upaep__dropzone-files-clear {
        width: 100%;
        display: flex;
        justify-content: end;

        .upaep__btn {
            --upaep-btn-padding: .5rem .75rem;
            --upaep-btn-margin: .5rem;
        }
    }

    .upaep__dropzone-file {
        background: var(--upaep-dropzone-file-bg);
        padding: var(--upaep-dropzone-file-padding);
        border-radius: var(--upaep-dropzone-file-border-radius);
        box-shadow: var(--upaep-box-shadow);
        width: 100%;
        position: relative;

        &:not(:only-child) {
            margin: var(--upaep-dropzone-file-margin);
        }
    }

    .upaep__dropzone-file-inner {
        width: 100%;
        display: flex;
        gap: .5rem;
        align-items: center;
        justify-content: start;
    }

    .upaep__dropzone-file-header {
        width: 100%;
        display: flex;
        gap: .5rem;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__dropzone-file-title {
        color: var(--upaep-dropzone-file-title-color);
        font-size: var(--upaep-dropzone-file-title-fz);
        font-weight: var(--upaep-dropzone-file-title-fw);
        text-align: var(--upaep-dropzone-file-title-align);
        word-wrap: break-word;
    }

    .upaep__dropzone-file-icon {
        width: var(--upaep-dropzone-file-icon-width);
        height: var(--upaep-dropzone-file-icon-height);
        color: var(--upaep-dropzone-file-icon-color);
        font-size: var(--upaep-dropzone-file-icon-fz);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upaep__dropzone-file-text {
        width: calc(100% - var(--upaep-dropzone-file-icon-size) - calc(var(--upaep-dropzone-file-delete-width) * 2));
        color: var(--upaep-dropzone-file-text-color);
        font-size: var(--upaep-dropzone-file-text-fz);
        word-wrap: break-word;
    }

    .upaep__dropzone-file-name {
        color: var(--upaep-dropzone-file-name-color);
        font-size: var(--upaep-dropzone-file-name-fz);
        font-weight: var(--upaep-dropzone-file-name-fw);
        margin: 0;
        line-height: 1.2;
    }

    .upaep__dropzone-file-size {
        color: var(--upaep-dropzone-file-size-color);
        font-size: var(--upaep-dropzone-file-size-fz);
        font-weight: var(--upaep-dropzone-file-size-fw);
        margin: 0;
        line-height: 1.2;
    }

    .upaep__dropzone-file-delete {
        width: var(--upaep-dropzone-file-delete-width);
        height: var(--upaep-dropzone-file-delete-height);
        color: var(--upaep-dropzone-file-delete-color);
        font-size: var(--upaep-dropzone-file-delete-fz);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        inset: 8px 8px auto auto;

        &:hover {
            color: var(--upaep-dropzone-file-delete-hover-color);
        }
    }

}

.upaep__dropzone.__load-noborder:has(.upaep__dropzone-load-delete.is-active) .upaep__dropzone-content {
    border: none;
}

.upaep__dropzone.__load-boxshadow:has(.upaep__dropzone-load-delete.is-active) {
    --uapep-dropzone-content-boxshadow: var(--upaep-box-shadow);
}

.upaep__dropzone:has(.upaep__dropzone-load-delete.is-active) .upaep__dropzone-content:hover {
    --uapep-dropzone-content-cursor: default;
}

.upaep__dropzone:has(.file__input:required) .upaep__dropzone-textlabel::before {
    font-family: var(--upaep-ff-fontawesome);
    content: '\2a';
    color: var(--upaep-color-red);
    margin: 5px;
    font-size: var(--upaep-fz10);
}

.upaep__dropzone-multiple-item .__icon,
.upaep__dropzone-load .__icon,
.upaep__dropzone-load-delete-content .__icon {
    font-family: var(--upaep-ff-fontawesome);
    font-size: var(--upaep-fz30);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    &.__regular {
        font-weight: var(--upaep-fw-medium);
    }

    &.__file {
        font-weight: var(--upaep-fw-medium);

        &::before {
            content: '\f15b';
        }
    }

    &.__check::before {
        content: '\f058';
        color: #25d366;
    }
}


.was-validated .upaep__dropzone:has(input[type=file]:invalid),
.__validated .upaep__dropzone:has(input[type=file]:invalid),
.upaep__dropzone:has(input[type=file].is-error),
.upaep__dropzone:has(input[type=file].is-invalid) {
    --uapep-dropzone-content-border-color: var(--upaep-color-error);
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--upaep-color-error);
    --upaep-dropzone-dragdrop-hover-border-color: var(--upaep-color-error);
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.upaep__dropzone:has(input[type=file].is-warning) {
    --uapep-dropzone-content-border-color: var(--upaep-color-warning);
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--upaep-color-warning);
    --upaep-dropzone-dragdrop-hover-border-color: var(--upaep-color-warning);
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.was-validated .upaep__dropzone:has(input[type=file]:valid),
.__validated .upaep__dropzone:has(input[type=file]:valid),
.upaep__dropzone:has(input[type=file].is-success),
.upaep__dropzone:has(input[type=file].is-valid) {
    --uapep-dropzone-content-border-color: var(--upaep-color-success);
    --uapep-dropzone-content-hover-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --upaep-dropzone-dragdrop-border-color: var(--upaep-color-success);
    --upaep-dropzone-dragdrop-hover-border-color: var(--upaep-color-success);
    --upaep-dropzone-dragdrop-hover-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/*? ------ Loader ------ */
.upaep__spinner {
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: var(--upaep-zindex-spinner);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;

    &.__white {
        background: var(--upaep-gradient-white);
    }

    &.__dark {
        background: var(--upaep-gradient-dark);
    }

    &:not(.is-active) {
        display: none;
    }

    &.__realtive {
        position: relative !important;
        height: auto !important;
    }
}

.upaep__loader-1,
.upaep__loader1 {
    --upaep-loader-width: 56px;
    --upaep-loader-height: 56px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    --upaep-loader-primary-width: 33.6px;
    --upaep-loader-primary-height: 33.6px;
    --upaep-loader-secondary-width: 56px;
    --upaep-loader-secondary-height: 56px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
        border-radius: 50%;
        position: absolute;
        content: '';
        display: block;
    }

    &::before {
        width: var(--upaep-loader-primary-width);
        height: var(--upaep-loader-primary-height);
        border: 6.7px solid var(--upaep-loader-color-primary);
        border-bottom-color: transparent;
        border-left-color: transparent;
        animation: rotation1 0.75s infinite linear reverse;
    }


    &::after {
        animation: rotation1 0.5s infinite linear;
        border: 6.7px solid var(--upaep-loader-color-secondary);
        height: var(--upaep-loader-secondary-width);
        width: var(--upaep-loader-secondary-height);
        border-right-color: transparent;
        border-top-color: transparent;
    }
}

@keyframes rotation1 {
    to {
        transform: rotate(360deg);
    }
}

.upaep__loader-2,
.upaep__loader2 {
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    --upaep-loader-primary-width: 56px;
    --upaep-loader-primary-height: 56px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-primary-width);
    height: var(--upaep-loader-primary-height);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 6.5px solid;
    border-color: var(--upaep-loader-color-primary) var(--upaep-loader-color-primary) transparent;
    box-sizing: border-box;
    animation: rotation2 1s linear infinite;

    &::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 6.5px solid;
        border-color: transparent var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary);
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-radius: 50%;
        animation: rotationBack2 0.5s linear infinite;
        transform-origin: center center;
    }
}

@keyframes rotation2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


.upaep__loader-3,
.upaep__loader3 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    --upaep-loader-color-tertiary: var(--upaep-color-dark-grey);
    --upaep-loader-primary-width: 40px;
    --upaep-loader-primary-height: 40px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 6.5px solid;
    border-color: var(--upaep-loader-color-primary) var(--upaep-loader-color-primary) transparent transparent;
    box-sizing: border-box;
    animation: rotation3 1s linear infinite;

    &::after,
    &::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 6.5px solid;
        border-color: transparent transparent var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary);
        width: var(--upaep-loader-primary-width);
        height: var(--upaep-loader-primary-height);
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotationBack3 0.5s linear infinite;
        transform-origin: center center;
    }

    &::before {
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-color: var(--upaep-loader-color-tertiary) var(--upaep-loader-color-tertiary) transparent transparent;
        animation: rotation3 1.5s linear infinite;
    }
}

@keyframes rotation3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.upaep__loader-4,
.upaep__loader4 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    --upaep-loader-primary-width: 40px;
    --upaep-loader-primary-height: 40px;
    --upaep-loader-secondary-width: 30px;
    --upaep-loader-secondary-height: 30px;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    display: grid;
    border: 6.5px solid #0000;
    border-radius: 50%;
    border-right-color: var(--upaep-loader-color-primary);
    animation: rotation4 1s infinite linear;

    &::before,
    &::after {
        content: "";
        grid-area: 1/1;
        margin: 2.2px;
        border: inherit;
        border-radius: 50%;
        animation: rotation4 2s infinite;
    }

    &::before {
        border-right-color: var(--upaep-loader-color-secondary);
    }

    &.upaep__loader4::after {
        margin: 8.9px;
        animation-duration: 3s;
    }
}

@keyframes rotation4 {
    100% {
        transform: rotate(1turn);
    }
}

.upaep__loader-5,
.upaep__loader5 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    --upaep-loader-primary-width: 60px;
    --upaep-loader-primary-height: 60px;
    --upaep-loader-secondary-width: 60px;
    --upaep-loader-secondary-height: 60px;
    width: var(--upaep-loader-primary-width);
    height: var(--upaep-loader-primary-height);
    border-radius: 50%;
    display: inline-block;
    border-top: 6.5px solid var(--upaep-loader-color-primary);
    border-right: 6.5px solid transparent;
    box-sizing: border-box;
    animation: rotation5 1s linear infinite;

    &::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: var(--upaep-loader-secondary-width);
        height: var(--upaep-loader-secondary-height);
        border-radius: 50%;
        border-left: 6.5px solid var(--upaep-loader-color-secondary);
        border-bottom: 6.5px solid transparent;
        animation: rotation5 0.5s linear infinite reverse;
    }
}

@keyframes rotation5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.upaep__loader-6,
.upaep__loader6 {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    display: grid;
    animation: rotation6 4s infinite;


    &::before,
    &::after {
        content: "";
        grid-area: 1/1;
        border: 8px solid;
        border-radius: 50%;
        border-color: var(--upaep-loader-color-secondary) var(--upaep-loader-color-secondary) #0000 #0000;
        mix-blend-mode: darken;
        animation: rotation6 1s infinite linear;
    }

    &::after {
        border-color: #0000 #0000 var(--upaep-loader-color-primary) var(--upaep-loader-color-primary);
        animation-direction: reverse;
    }
}

@keyframes rotation6 {
    100% {
        transform: rotate(1turn)
    }
}

.upaep__loader-bounce,
.upaep__loader_bounce {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-red);
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: loaderbounce 3.5s linear 0s infinite normal none;
}

@keyframes loaderbounce {
    0% {}

    10% {
        transform: translate(0, -50%) rotate(90deg);
    }

    20% {
        transform: translate(0) rotate(90deg);
    }

    30% {
        transform: translate(0, -50%) rotate(180deg);
    }

    40% {
        transform: translate(0) rotate(180deg);
    }

    50% {
        transform: translate(0, -50%) rotate(270deg);
    }

    60% {
        transform: translate(0) rotate(270deg);
    }

    70% {
        transform: translate(0, -50%) rotate(360deg);
    }

    80% {
        transform: translate(0) rotate(360deg);
    }

    100% {}
}


.upaep__loader-scaledown,
.upaep__loader_scaledown {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-red);
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: rotate-scaledown 1s linear infinite both;
}

@keyframes rotate-scaledown {
    0% {
        transform: scale(1) rotateZ(0);
    }

    50% {
        transform: scale(0.5) rotateZ(180deg);
    }

    100% {
        transform: scale(1) rotateZ(360deg);
    }
}

.upaep__loader-rotate,
.upaep__loader_rotate {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-red);
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    background: var(--upaep-loader-color-primary);
    display: block;
    animation: rotate-center 1s ease-in-out infinite both;
}

@keyframes rotate-center {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.upaep__loader-basic,
.spinner_basic {
    --upaep-loader-width: 60px;
    --upaep-loader-height: 60px;
    --upaep-loader-color-primary: var(--upaep-color-red);
    --upaep-loader-color-secondary: var(--upaep-color-dark-grey);

    &::before {
        content: '';
        display: block;
        height: var(--upaep-loader-width);
        width: var(--upaep-loader-height);
        -webkit-animation: spin .5s infinite linear;
        animation: spin .5s infinite linear;
        border: 6px var(--upaep-loader-color-primary) solid;
        border-left-color: var(--upaep-loader-color-secondary);
        border-radius: 100%;
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.upaep_logo::before {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 5px;
    content: "";
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDE1MC41IDE1MC41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNTAuNSAxNTAuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGMDAwMDt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxNTAuNSIgaGVpZ2h0PSIxNTAuNSIvPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTkyLjYsODcuMWMwLDExLjMtNS41LDE3LjgtMTcuMywxNy44Yy0xMS44LDAtMTcuMy02LjQtMTcuMy0xNy44VjIzLjVINDUuNHY2My44YzAsMTguOSwxMS44LDI4LjQsMjkuOSwyOC40DQoJCWMxOC4yLDAsMjkuOS05LjUsMjkuOS0yOC40VjIzLjZMOTIuNiwzNi4yVjg3LjF6IE0xMjAuNSw4Ny40VjIzLjVoLTEyLjZ2NjMuOGMwLDIwLjctMTIuOSwzMS4xLTMyLjYsMzEuMQ0KCQljLTE5LjYsMC0zMi42LTEwLjQtMzIuNi0zMS4xVjIzLjVoMEwzMC4xLDM2djUxLjRjMCwyOCwxOS4yLDQxLjgsNDUuMiw0MS44QzEwMS4zLDEyOS4zLDEyMC41LDExNS41LDEyMC41LDg3LjQiLz4NCjwvZz4NCjwvc3ZnPg0K');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.upaep_logo_transparente::before {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 5px;
    content: "";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAADlElEQVR4Xu2aIVAjQRBFkUgkMhKJPIlEIpGRSOTJSNydu3PEIQ+H5BwSeTISeRLZNy/TW2w+O1ubkEyWq35VU1R2d/70/u3uHVI5OAiCIAiCIAiCIAiGYmZHaRyncdExzvX6beJrM3TdZhzqnL2RgvmWxlkaU+tmoXO2heU1ry2vX+JI5+0Fy0ZBdbPsbb3xm2VvRkFVs2x1rXGbZatGQTWz7P064zXL3hsFVcyy7jXGaZZ1GwU7N8vK+qM1q0QNsxYq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7IRZCjoq7Hw6s86tbNaL6myClc26spGa9aqROBiFYV28qs4mJJ2/KuxcWv7RWieqU4209osG41AKX/Rgiw8/XRVswUMiu7rYyoPaiLT4H43GuUljogdbXKjWOlh/mZ2m8VUPOlvplxuRFr/XaByOH1q5VG5Uax2Yr4IOmc66P/WE86ha1UiLf9donGUTT3/nesLBxI1KkXk+v4sHv2ahJ5y5yNXDehqp5Z7Vd/5O9YaQ5t2qUAt6FWVY4kr1qmH559slyDpKotTX4NYG/tSa69L4sTp9BUqQrJvpiRYT1a1KCuBRI3LYVmDmVE8ImElGHKs2WH5RcH7RntQBb2DWK5Xo/vpVg/WbcWs5I37J8RJkx3Mav9N48s9DePJYSo0frjX26lg2o3RTZBd9i2swYRegS/mVNsGwLFGNfS9YeRMIGHZm+Ybu5NxHIfsoPZp6qfxgpjHvDcuZ8ygBtsEwypXrMLaUiUNBb1lWlh9Enx49cdBLpBopoBPrf7rAZpEMa0wjM4aCQZRcYzqjtM9rYM6pxjoKrL9vNHAD3OTE53DTZAdvMxo0hs7978yPo7vsOczz433Z1DBtxzc6LDf00rcRbbiGEsE4soW+Q3YutxCWMxBjms0t5q3zkphKaOPEciYsJPha8BAuNaZRYzkrHuRGdg098ERj+TRYLjHKbZcsbJ//920Ty02cbzCH7uSHQg/7XCW3DpbLE+Pmtl7GNS+Ee8vZOlHt/x7LWcdbsHnrYSRmMPh85ufHtbEMgiAIgiAIgmDk/AOMWLsXg6YxngAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.upaep__loader-grow,
.upaep__loader-border {
    display: inline-block;
    width: var(--upaep-loader-width);
    height: var(--upaep-loader-height);
    vertical-align: var(--upaep-loader-vertical-align);
    border-radius: 50%;
    animation: var(--upaep-loader-animation-speed) linear infinite var(--upaep-loader-animation-name);
}

.upaep__loader-border {
    --upaep-loader-width: 1rem;
    --upaep-loader-height: 1rem;
    --upaep-loader-vertical-align: -0.125em;
    --upaep-loader-border-size: 0.25em;
    --upaep-loader-animation-speed: 0.8s;
    --upaep-loader-animation-name: spinnerBorder;
    border: var(--upaep-loader-border-size) solid currentcolor;
    border-right-color: transparent;
}

.upaep__loader-grow {
    --upaep-loader-width: 1rem;
    --upaep-loader-height: 1rem;
    --upaep-loader-vertical-align: -0.125em;
    --upaep-loader-animation-speed: 0.8s;
    --upaep-loader-animation-name: spinnerGrow;
    background-color: currentcolor;
    opacity: 0;
}

@keyframes spinnerBorder {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinnerGrow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.upaep__loader-swap {
    --upaep-loader-size: 50px;
    --upaep-loader-color-primary: var(--upaep-color-dark-grey);
    --upaep-loader-color-secondary: var(--upaep-color-red);

    &:after,
    &:before {
        border-radius: 100%;
        content: '';
        height: var(--upaep-loader-size);
        width: var(--upaep-loader-size);
        opacity: .5;
        position: absolute;
    }

    &:after {
        animation: swap 1.5s -0.75s infinite;
        background-color: var(--upaep-loader-color-primary);
    }

    &:before {
        animation: swap 1.5s infinite;
        background-color: var(--upaep-loader-color-secondary);
    }
}

@keyframes swap {

    0%,
    100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

/*? ------ Navegación ------ */
.upaep__content-botones-menu,
.upaep__menu-bar {
    --upaep-menubar-width: auto;
    --upaep-menubar-maxwidth: auto;
    --upaep-menubar-height: auto;
    --upaep-menubar-position: relative;
    --upaep-menubar-inset: 0 0 auto auto;
    --upaep-menubar-scale: 1;
    --upaep-menubar-content-width: auto;
    --upaep-menubar-content-height: auto;
    --upaep-menubar-content-bg: rgb(0 0 0 / 31%);
    --upaep-menubar-content-padding: 1rem .5rem;
    --upaep-menubar-content-border-radius: 50px;
    --upaep-menubar-content-filter: var(--upaep-drop-shadow);
    --upaep-menubar-content-direction: column;
    --upaep-menubar-content-icon-width: 50px;
    --upaep-menubar-content-icon-height: 50px;
    --upaep-menubar-content-icon-bg: var(--upaep-color-white);
    --upaep-menubar-content-icon-padding: .8rem;
    --upaep-menubar-content-text-fz: var(--upaep-fz14);
    --upaep-menubar-content-text-fw: var(--upaep-fw-bold);
    --upaep-menubar-content-text-color: var(--upaep-color-white);
    --upaep-menubar-content-text-margin: 0;
    --upaep-menubar-content-text-align: center;
    --upaep-menubar-content-item-padding: 1rem 0;
    --upaep-menubar-content-item-margin: 0;
    --upaep-menubar-content-item-direction: column;
    --upaep-menubar-content-item-scale: 1;
    width: var(--upaep-menubar-width);
    max-width: var(--upaep-menubar-maxwidth);
    height: var(--upaep-menubar-height);
    position: var(--upaep-menubar-position);
    inset: var(--upaep-menubar-inset);
    scale: var(--upaep-menubar-scale);
    display: flex;
    justify-content: center;
    z-index: var(--upaep-zindex-menubar);
}

.upaep__content-botones-menu .upaep__banner-buttons,
.upaep__menu-bar .upaep__menu-bar-content {
    width: var(--upaep-menubar-content-width);
    max-width: var(--upaep-menubar-content-maxwidth);
    height: var(--upaep-menubar-content-height);
    background: var(--upaep-menubar-content-bg);
    padding: var(--upaep-menubar-content-padding);
    border-radius: var(--upaep-menubar-content-border-radius);
    filter: var(--upaep-menubar-content-filter);
    flex-direction: var(--upaep-menubar-content-direction);
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: all .5s;
}

.upaep__content-botones-menu .upaep__content-button-circle,
.upaep__menu-bar .upaep__menu-bar-item {
    padding: var(--upaep-menubar-content-item-padding);
    margin: var(--upaep-menubar-content-item-margin);
    flex-direction: var(--upaep-menubar-content-item-direction);
    scale: var(--upaep-menubar-content-item-scale);
    display: flex;
    align-items: center;
    gap: 5px;
    flex: auto;
    transition: all .5s;
}

.upaep__content-botones-menu .upaep__content-button-circle .upaep__btn.__menu-circle {
    --upaep-btn-padding: .8rem;
    --upaep-btn-margin: 0;
    --upaep-btn-border-color: var(--upaep-color-white);
    --upaep-btn-border-radius: 50px;
    --upaep-btn-width: 50px;
    --upaep-btn-height: 50px;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-color: var(--upaep-color-white);
}

.upaep__content-botones-menu .upaep__content-button-circle .upaep__btn.__menu-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.upaep__menu-bar a.upaep__menu-bar-item {
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.upaep__menu-bar a.upaep__menu-bar-item:hover {
    text-decoration: none;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-icon {
    width: var(--upaep-menubar-content-icon-width);
    height: var(--upaep-menubar-content-icon-height);
    background: var(--upaep-menubar-content-icon-bg);
    padding: var(--upaep-menubar-content-icon-padding);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.upaep__menu-bar .upaep__menu-bar-item .upaep__menu-bar-text p,
.upaep__content-botones-menu .upaep__text-menu {
    font-size: var(--upaep-menubar-content-text-fz);
    font-weight: var(--upaep-menubar-content-text-fw);
    color: var(--upaep-menubar-content-text-color);
    margin: var(--upaep-menubar-content-text-margin);
    text-align: var(--upaep-menubar-content-text-align);
    font-family: var(--upaep-ff-fira-sans-condensed);
}

.upaep__menu-bar.__red {
    --upaep-menubar-content-bg: var(--upaep-color-red);
}

.upaep__menu-bar.is-scrolling {
    --upaep-menubar-position: fixed;
    --upaep-menubar-content-bg: none;
}

.upaep__menu-bar.__horizontal {
    --upaep-menubar-width: 100%;
    --upaep-menubar-position: relative;
    --upaep-menubar-inset: auto auto 20px 0;
    --upaep-menubar-content-width: 80%;
    --upaep-menubar-content-padding: .5rem;
    --upaep-menubar-content-direction: row;
    --upaep-menubar-content-icon-bg: var(--upaep-color-white);
    --upaep-menubar-content-icon-padding: .5rem;
    --upaep-menubar-content-text-fz: var(--upaep-fz18);
    --upaep-menubar-content-text-color: var(--upaep-color-white);
    --upaep-menubar-content-item-padding: 0 .5rem;
    --upaep-menubar-content-item-direction: row;

    &.is-scrolling {
        --upaep-menubar-width: 100%;
        --upaep-menubar-content-direction: row;
        animation: fadeOut .5s forwards;
    }
}


@keyframes fadeOut {
    to {
        display: none;
        opacity: 0;
    }
}

/*? ------ Notificaciones / toast ------ */
.upaep__notification,
.upaep__toast {
    --upaep-notification-width: 350px;
    --upaep-notification-height: auto;
    --upaep-notification-maxwidth: 100%;
    --upaep-notification-padding: 0;
    --upaep-notification-margin: .5rem;
    --upaep-notification-border-size: 1px;
    --upaep-notification-border-style: solid;
    --upaep-notification-border-color: var(--upaep-color-border-grey);
    --upaep-notification-border-radius: 10px;
    --upaep-notification-boxshadow: var(--upaep-box-shadow);
    --upaep-notification-bg: var(--upaep-color-white);
    --upaep-notification-position: relative;
    --upaep-notification-inset: ;
    --upaep-notification-animation: fade_in;
    --upaep-notification-animation-duration: .55s;
    --upaep-notification-close-content: "\f057";
    --upaep-notification-close-fz: var(--upaep-fz20);
    --upaep-notification-close-fw: var(--upaep-fw-bold);
    --upaep-notification-close-color: var(--upaep-color-dark-grey);
    --upaep-notification-close-padding: 0 .5rem;
    --upaep-notification-close-margin: 0;
    --upaep-notification-close-hover-content: "\f057";
    --upaep-notification-close-hover-fz: var(--upaep-fz20);
    --upaep-notification-close-hover-fw: var(--upaep-fw-bold);
    --upaep-notification-close-hover-color: var(--upaep-color-black);
    --upaep-notification-close-hover-padding: 0 .5rem;
    --upaep-notification-close-hover-margin: 0;
    --upaep-notification-header-padding: .5rem .75rem;
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-radius: 10px 10px 0 0;
    --upaep-notification-header-border-bottom-size: 1px;
    --upaep-notification-header-border-bottom-style: solid;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-notification-header-title-fz: var(--upaep-fz18);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-black);
    --upaep-notification-header-title-padding: 0 .5rem;
    --upaep-notification-header-title-margin: 0 auto 0 0;
    --upaep-notification-content-padding: .5rem;
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-icons-width: 100%;
    --upaep-notification-content-icons-height: auto;
    --upaep-notification-content-icons-padding: 0 .35rem;
    --upaep-notification-content-icons-margin: 0;
    --upaep-notification-content-icon-width: 100%;
    --upaep-notification-content-icon-height: auto;
    --upaep-notification-content-icon-content: ;
    --upaep-notification-content-icon-fz: var(--upaep-fz20);
    --upaep-notification-content-icon-fw: var(--upaep-fw-bold);
    --upaep-notification-content-icon-color: var(--upaep-color-black);
    --upaep-notification-content-icon-margin: 0;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-animation-duration: 1s;
    --upaep-notification-content-texts-width: 100%;
    --upaep-notification-content-texts-height: auto;
    --upaep-notification-content-texts-padding: 0 .35rem;
    --upaep-notification-content-texts-margin: 0;
    --upaep-notification-content-text-fz: var(--upaep-fz16);
    --upaep-notification-content-text-fw: var(--upaep-fw-regular);
    --upaep-notification-content-text-color: var(--upaep-color-black);
    --upaep-notification-content-text-margin: 0;
    width: var(--upaep-notification-width);
    height: var(--upaep-notification-height);
    max-width: var(--upaep-notification-maxwidth);
    padding: var(--upaep-notification-padding);
    margin: var(--upaep-notification-margin);
    border: var(--upaep-notification-border-size) var(--upaep-notification-border-style) var(--upaep-notification-border-color);
    border-radius: var(--upaep-notification-border-radius);
    box-shadow: var(--upaep-notification-boxshadow);
    background: var(--upaep-notification-bg);
    animation: var(--upaep-notification-animation) var(--upaep-notification-animation-duration);
    position: var(--upaep-notification-position);
    inset: var(--upaep-notification-inset);
    pointer-events: auto;

    &:not(.is-show) {
        display: none;
    }

    & .upaep__notification-close {
        &::before {
            content: var(--upaep-notification-close-content);
            font-size: var(--upaep-notification-close-fz);
            font-weight: var(--upaep-notification-close-fw);
            color: var(--upaep-notification-close-color);
            padding: var(--upaep-notification-close-padding);
            margin: var(--upaep-notification-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-notification-close-hover-content);
            font-size: var(--upaep-notification-close-hover-fz);
            font-weight: var(--upaep-notification-close-hover-fw);
            color: var(--upaep-notification-close-hover-color);
            padding: var(--upaep-notification-close-hover-padding);
            margin: var(--upaep-notification-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 10px 10px auto auto;
        }
    }

}

.upaep__notification .upaep__notification-header,
.upaep__toast .upaep__toast-header {
    padding: var(--upaep-notification-header-padding);
    background: var(--upaep-notification-header-bg);
    border-radius: var(--upaep-notification-header-border-radius);
    border-bottom: var(--upaep-notification-header-border-bottom-size) var(--upaep-notification-header-border-bottom-style) var(--upaep-notification-header-border-bottom-color);
    display: flex;
    align-items: center;
}

.upaep__notification .upaep__notification-header .upaep__notification-header-title,
.upaep__toast .upaep__toast-header .upaep__notification-header-title {
    font-size: var(--upaep-notification-header-title-fz);
    font-weight: var(--upaep-notification-header-title-fw);
    color: var(--upaep-notification-header-title-color);
    padding: var(--upaep-notification-header-title-padding);
    margin: var(--upaep-notification-header-title-margin);
}

.upaep__notification .upaep__notification-content,
.upaep__toast .upaep__toast-content {
    padding: var(--upaep-notification-content-padding);
    background: var(--upaep-notification-content-bg);
    display: flex;
    align-items: center;
}

.upaep__notification .upaep__notification-content .upaep__notification-icons,
.upaep__toast .upaep__toast-content .upaep__toast-icons {
    width: var(--upaep-notification-content-icons-width);
    height: var(--upaep-notification-content-icons-height);
    padding: var(--upaep-notification-content-icons-padding);
    margin: var(--upaep-notification-content-icons-margin);
    animation: var(--upaep-notification-content-icon-animation) var(--upaep-notification-content-icon-animation-duration);
}

.upaep__notification .upaep__notification-content .upaep__notification-icons .upaep__notification-icon,
.upaep__toast .upaep__toast-content .upaep__toast-icons .upaep__toast-icon {
    width: var(--upaep-notification-content-icon-width);
    height: var(--upaep-notification-content-icon-height);
    font-size: var(--upaep-notification-content-icon-fz);
    font-weight: var(--upaep-notification-content-icon-fw);
    color: var(--upaep-notification-content-icon-color);
    margin: var(--upaep-notification-content-icon-margin);
    display: flex;
    justify-content: center;
    object-fit: cover;
}

.upaep__notification .upaep__notification-content .upaep__notification-icons .upaep__notification-icon::before,
.upaep__toast .upaep__toast-content .upaep__toast-icons .upaep__toast-icon::before {
    content: var(--upaep-notification-content-icon-content);
    font-family: var(--upaep-ff-fontawesome);
}

.upaep__notification .upaep__notification-content .upaep__notification-texts,
.upaep__toast .upaep__toast-content .upaep__toast-texts {
    width: var(--upaep-notification-content-texts-width);
    height: var(--upaep-notification-content-texts-height);
    padding: var(--upaep-notification-content-texts-padding);
    margin: var(--upaep-notification-content-texts-margin);
}

.upaep__notification .upaep__notification-content .upaep__notification-texts .upaep__notification-text,
.upaep__toast .upaep__toast-content .upaep__toast-texts .upaep__toast-text {
    font-size: var(--upaep-notification-content-text-fz);
    font-weight: var(--upaep-notification-content-text-fw);
    color: var(--upaep-notification-content-text-color);
    margin: var(--upaep-notification-content-text-margin);
    text-wrap: balance;
}

.upaep__notification .upaep__notification-content:has(.upaep__notification-icons~.upaep__notification-texts),
.upaep__toast .upaep__toast-content:has(.upaep__toast-icons~.upaep__toast-texts) {
    --upaep-notification-content-icons-width: 10%;
    --upaep-notification-content-texts-width: 90%;
}

.upaep__notification-container {
    --upaep__notification-position: absolute;
    --upaep__notification-zindex: var(--upaep-zindex-notification-container);
    --upaep__notification-inset: ;
    position: var(--upaep__notification-position);
    inset: var(--upaep__notification-inset);
    z-index: var(--upaep__notification-zindex);
    max-width: 100%;
    pointer-events: none;
}

.upaep__notification.__fixed,
.upaep__toast.__fixed {
    --upaep-notification-position: fixed;
    z-index: var(--upaep-zindex-notification);
}

.upaep__notification.__top-center:is(.__fixed),
.upaep__toast.__top-center:is(.__fixed) {
    --upaep-notification-inset: 10px 50% auto 50%;
    transform: translateX(-50%);
}

.upaep__notification.__bottom-center:is(.__fixed),
.upaep__toast.__bottom-center:is(.__fixed) {
    --upaep-notification-inset: auto 50% 10px 50%;
    transform: translateX(-50%);
}

.upaep__notification.__top-right:is(.__fixed),
.upaep__toast.__top-right:is(.__fixed) {
    --upaep-notification-inset: 10px 10px auto auto;
}

.upaep__notification.__top-left:is(.__fixed),
.upaep__toast.__top-left:is(.__fixed) {
    --upaep-notification-inset: 10px auto auto 10px;
}

.upaep__notification.__bottom-right:is(.__fixed),
.upaep__toast.__bottom-right:is(.__fixed) {
    --upaep-notification-inset: auto 10px 10px auto;
}

.upaep__notification.__bottom-left:is(.__fixed),
.upaep__toast.__bottom-left:is(.__fixed) {
    --upaep-notification-inset: auto auto 10px 10px;
}

.upaep__notification.__error,
.upaep__toast.__error {
    --upaep-notification-border-color: var(--upaep-color-border-grey);
    --upaep-notification-bg: var(--upaep-color-error);
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--upaep-color-white);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-white);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-white);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f06a';
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz24);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--upaep-color-error-light);
        --upaep-notification-close-color: var(--upaep-color-error);
        --upaep-notification-close-hover-color: var(--upaep-color-error-hover);
        --upaep-notification-header-border-bottom-color: var(--upaep-color-error);
        --upaep-notification-header-title-color: var(--upaep-color-error);
        --upaep-notification-content-text-color: var(--upaep-color-error);
        --upaep-notification-content-icon-color: var(--upaep-color-error);
    }
}

.upaep__notification.__warning,
.upaep__toast.__warning {
    --upaep-notification-border-color: var(--upaep-color-border-grey);
    --upaep-notification-bg: var(--upaep-color-warning);
    --upaep-notification-close-color: var(--upaep-color-dark-grey);
    --upaep-notification-close-hover-color: var(--upaep-color-black);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-black);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-black);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-black);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f071';
    --upaep-notification-content-icon-color: var(--upaep-color-black);
    --upaep-notification-content-icon-fz: var(--upaep-fz24);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--upaep-color-warning-light);
        --upaep-notification-close-color: #FFA800;
        --upaep-notification-close-hover-color: var(--upaep-color-warning-hover);
        --upaep-notification-header-border-bottom-color: #FFA800;
        --upaep-notification-header-title-color: #FFA800;
        --upaep-notification-content-text-color: #FFA800;
        --upaep-notification-content-icon-color: #FFA800;
    }
}

.upaep__notification.__success,
.upaep__toast.__success {
    --upaep-notification-border-color: var(--upaep-color-border-grey);
    --upaep-notification-bg: var(--upaep-color-success);
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--upaep-color-white);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-white);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-white);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f058';
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz24);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: var(--upaep-color-success-light);
        --upaep-notification-close-color: var(--upaep-color-success);
        --upaep-notification-close-hover-color: var(--upaep-color-success-hover);
        --upaep-notification-header-border-bottom-color: var(--upaep-color-success);
        --upaep-notification-header-title-color: var(--upaep-color-success);
        --upaep-notification-content-text-color: var(--upaep-color-success);
        --upaep-notification-content-icon-color: var(--upaep-color-success);
    }
}

.upaep__notification.__info,
.upaep__toast.__info {
    --upaep-notification-border-color: #253b83;
    --upaep-notification-bg: var(--upaep-color-blue-sky);
    --upaep-notification-close-color: var(--upaep-color-background);
    --upaep-notification-close-hover-color: var(--upaep-color-white);
    --upaep-notification-header-bg: transparent;
    --upaep-notification-header-border-bottom-color: var(--upaep-color-white);
    --upaep-notification-header-title-fw: var(--upaep-fw-bold);
    --upaep-notification-header-title-color: var(--upaep-color-white);
    --upaep-notification-content-bg: transparent;
    --upaep-notification-content-text-fw: var(--upaep-fw-bold);
    --upaep-notification-content-text-color: var(--upaep-color-white);
    --upaep-notification-animation: showNotification-right;
    --upaep-notification-content-icon-animation: ;
    --upaep-notification-content-icon-content: '\f05a';
    --upaep-notification-content-icon-color: var(--upaep-color-white);
    --upaep-notification-content-icon-fz: var(--upaep-fz24);
    --upaep-notification-content-icon-fw: var(--upaep-fw-regular);

    &.__light {
        --upaep-notification-bg: #c3dafa;
        --upaep-notification-close-color: #253b83;
        --upaep-notification-close-hover-color: #2950cc;
        --upaep-notification-header-border-bottom-color: #253b83;
        --upaep-notification-header-title-color: #253b83;
        --upaep-notification-content-text-color: #253b83;
        --upaep-notification-content-icon-color: #253b83;
    }
}

@keyframes showNotification-right {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showNotification-up {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

/*? ------ Overlays ------ */
[upaep-modal] {
    cursor: pointer;
}

.upaep__modal {
    --upaep-modal-position: fixed;
    --upaep-modal-zindex: var(--upaep-zindex-modal);
    --upaep-modal-overflow: auto;
    --upaep-modal-dialog-width: auto;
    --upaep-modal-dialog-height: auto;
    --upaep-modal-dialog-margin: .5rem auto;
    --upaep-modal-dialog-maxwidth: 500px;
    --upaep-modal-dialog-transform: ;
    --upaep-modal-dialog-align: start;
    --upaep-modal-dialog-minheight: calc(100% - 1.75rem * 2);
    --upaep-modal-content-width: 100%;
    --upaep-modal-content-height: auto;
    --upaep-modal-content-maxheight: auto;
    --upaep-modal-content-bg: var(--upaep-color-white);
    --upaep-modal-content-border-size: 1px;
    --upaep-modal-content-border-style: solid;
    --upaep-modal-content-border-color: var(--upaep-color-border-grey);
    --upaep-modal-content-border-radius: 10px;
    --upaep-modal-content-animation: zoomIn;
    --upaep-modal-content-animation-duration: .65s;
    --upaep-modal-content-overflow: auto;
    --upaep-modal-header-bg: transparent;
    --upaep-modal-header-padding: 1rem 1.5rem;
    --upaep-modal-header-border-bottom-size: 1px;
    --upaep-modal-header-border-bottom-style: solid;
    --upaep-modal-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-modal-header-border-radius: 10px 10px 0 0;
    --upaep-modal-title-fz: var(--upaep-fz18);
    --upaep-modal-title-fw: var(--upaep-fw-bold);
    --upaep-modal-title-color: var(--upaep-color-black);
    --upaep-modal-title-margin: 0;
    --upaep-modal-title-padding: 0;
    --upaep-modal-title-lineheight: 1.5;
    --upaep-modal-close-content: "\f057";
    --upaep-modal-close-fz: var(--upaep-fz22);
    --upaep-modal-close-fw: var(--upaep-fw-bold);
    --upaep-modal-close-color: var(--upaep-color-dark-grey);
    --upaep-modal-close-padding: 0 .5rem;
    --upaep-modal-close-margin: 0;
    --upaep-modal-close-hover-content: "\f057";
    --upaep-modal-close-hover-fz: var(--upaep-fz22);
    --upaep-modal-close-hover-fw: var(--upaep-fw-bold);
    --upaep-modal-close-hover-color: var(--upaep-color-black);
    --upaep-modal-close-hover-padding: 0 .5rem;
    --upaep-modal-close-hover-margin: 0;
    --upaep-modal-body-bg: transparent;
    --upaep-modal-body-padding: 1rem 1.5rem;
    --upaep-modal-body-color: var(--upaep-color-black);
    --upaep-modal-body-overflow: ;
    --upaep-modal-footer-bg: transparent;
    --upaep-modal-footer-padding: .5rem .75rem;
    --upaep-modal-footer-border-top-size: 1px;
    --upaep-modal-footer-border-top-style: solid;
    --upaep-modal-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-modal-footer-border-radius: 0 0 10px 10px;
    position: var(--upaep-modal-position);
    z-index: var(--upaep-modal-zindex);
    overflow: var(--upaep-modal-overflow);
    inset: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    background: transparent;
    border: none;
    padding: 0;

    & .upaep__modal-dialog {
        width: var(--upaep-modal-dialog-width);
        height: var(--upaep-modal-dialog-height);
        max-width: var(--upaep-modal-dialog-maxwidth);
        min-height: var(--upaep-modal-dialog-minheight);
        margin: var(--upaep-modal-dialog-margin);
        transform: var(--upaep-modal-dialog-transform);
        align-items: var(--upaep-modal-dialog-align);
        display: flex;
        position: relative;
        pointer-events: none;
    }

    & .upaep__modal-content {
        width: var(--upaep-modal-content-width);
        height: var(--upaep-modal-content-height);
        max-height: var(--upaep-modal-content-maxheight);
        background: var(--upaep-modal-content-bg);
        border: var(--upaep-modal-content-border-size) var(--upaep-modal-content-border-style) var(--upaep-modal-content-border-color);
        border-radius: var(--upaep-modal-content-border-radius);
        animation: var(--upaep-modal-content-animation) var(--upaep-modal-content-animation-duration) ease;
        overflow: var(--upaep-modal-content-overflow);
        position: relative;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        background-clip: padding-box;
        outline: 0;
    }

    & .upaep__modal-header {
        background: var(--upaep-modal-header-bg);
        padding: var(--upaep-modal-header-padding);
        border-bottom: var(--upaep-modal-header-border-bottom-size) var(--upaep-modal-header-border-bottom-style) var(--upaep-modal-header-border-bottom-color);
        border-radius: var(--upaep-modal-header-border-radius);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    & .upaep__modal-title {
        font-size: var(--upaep-modal-title-fz);
        font-weight: var(--upaep-modal-title-fw);
        color: var(--upaep-modal-title-color);
        margin: var(--upaep-modal-title-margin);
        padding: var(--upaep-modal-title-padding);
        line-height: var(--upaep-modal-title-lineheight);
    }

    & .upaep__modal-close {
        &::before {
            content: var(--upaep-modal-close-content);
            font-size: var(--upaep-modal-close-fz);
            font-weight: var(--upaep-modal-close-fw);
            color: var(--upaep-modal-close-color);
            padding: var(--upaep-modal-close-padding);
            margin: var(--upaep-modal-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-modal-close-hover-content);
            font-size: var(--upaep-modal-close-hover-fz);
            font-weight: var(--upaep-modal-close-hover-fw);
            color: var(--upaep-modal-close-hover-color);
            padding: var(--upaep-modal-close-hover-padding);
            margin: var(--upaep-modal-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 5px 0 auto auto;
        }
    }

    & .upaep__modal-body {
        background: var(--upaep-modal-body-bg);
        padding: var(--upaep-modal-body-padding);
        overflow-y: var(--upaep-modal-body-overflow);
        position: relative;
        flex: 1 1 auto;
        color: var(--upaep-modal-body-color);
    }

    & .upaep__modal-footer {
        background: var(--upaep-modal-footer-bg);
        padding: var(--upaep-modal-footer-padding);
        border-top: var(--upaep-modal-footer-border-top-size) var(--upaep-modal-footer-border-top-style) var(--upaep-modal-footer-border-top-color);
        border-radius: var(--upaep-modal-footer-border-radius);
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
}

dialog:is(.upaep__modal):-internal-dialog-in-top-layer::backdrop {
    --upaep-modal-backdrop-bg: rgba(0, 0, 0, .4);
    background: var(--upaep-modal-backdrop-bg);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.upaep__modal.__centered {
    --upaep-modal-dialog-align: center;
}

.upaep__modal.__scrollable {
    --upaep-modal-overflow: hidden;
    --upaep-modal-dialog-height: calc(100% - .85rem * 2);
    --upaep-modal-content-maxheight: 100%;
    --upaep-modal-content-overflow: hidden;
    --upaep-modal-body-overflow: auto;
}

.upaep__modal.__sm {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-xxs);
}

.upaep__modal.__md {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-md);
}

.upaep__modal.__lg {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-lg);
}

.upaep__modal.__xl {
    --upaep-modal-dialog-maxwidth: var(--upaep-size-xl);
}

.upaep__modal.__fullscreen {
    --upaep-modal-overflow: hidden;
    --upaep-modal-dialog-width: 100%;
    --upaep-modal-dialog-height: 100%;
    --upaep-modal-dialog-maxwidth: none;
    --upaep-modal-dialog-margin: 0;
    --upaep-modal-content-height: 100%;
    --upaep-modal-content-maxheight: 100%;
    --upaep-modal-content-overflow: hidden;
    --upaep-modal-body-overflow: auto;
}

.upaep__modal.__black {
    --upaep-modal-content-bg: var(--upaep-color-black);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
    --upaep-modal-body-color: var(--upaep-color-white);
}

.upaep__modal.__dark {
    --upaep-modal-content-bg: var(--colordark);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
    --upaep-modal-body-color: var(--upaep-color-white);
}

.upaep__modal.__header-red {
    --upaep-modal-header-bg: var(--upaep-color-red);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.__header-blue {
    --upaep-modal-header-bg: var(--upaep-color-blue-primary);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.__header-grey {
    --upaep-modal-header-bg: var(--upaep-color-dark-grey);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.__header-black {
    --upaep-modal-header-bg: var(--upaep-color-black);
    --upaep-modal-title-color: var(--upaep-color-white);
    --upaep-modal-close-color: var(--upaep-color-background);
    --upaep-modal-close-hover-color: var(--upaep-color-white);
}

.upaep__modal.is-static .upaep__modal-dialog {
    animation: shakeX .65s;
}

@keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

/*? ------ Offcanvas ------ */
.upaep__offcanvas {
    --upaep-offcanvas-width: 100%;
    --upaep-offcanvas-height: 100vh;
    --upaep-offcanvas-maxwidth: 400px;
    --upaep-offcanvas-inset: 0 auto 0 0;
    --upaep-offcanvas-transform: translateX(0);
    --upaep-offcanvas-bg: var(--upaep-color-white);
    --upaep-offcanvas-zindex: var(--upaep-zindex-offcanvas);
    --upaep-offcanvas-boxshadow: var(--upaep-box-shadow);
    --upaep-offcanvas-header-bg: transparent;
    --upaep-offcanvas-header-padding: .5rem .75rem;
    --upaep-offcanvas-header-border-bottom-size: 1px;
    --upaep-offcanvas-header-border-bottom-style: solid;
    --upaep-offcanvas-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-offcanvas-title-fz: var(--upaep-fz18);
    --upaep-offcanvas-title-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-title-color: var(--upaep-color-black);
    --upaep-offcanvas-title-margin: 0;
    --upaep-offcanvas-title-padding: 0;
    --upaep-offcanvas-title-lineheight: 1.5;
    --upaep-offcanvas-close-content: "\f057";
    --upaep-offcanvas-close-fz: var(--upaep-fz22);
    --upaep-offcanvas-close-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-close-color: var(--upaep-color-dark-grey);
    --upaep-offcanvas-close-padding: 0 .5rem;
    --upaep-offcanvas-close-margin: 0;
    --upaep-offcanvas-close-hover-content: "\f057";
    --upaep-offcanvas-close-hover-fz: var(--upaep-fz22);
    --upaep-offcanvas-close-hover-fw: var(--upaep-fw-bold);
    --upaep-offcanvas-close-hover-color: var(--upaep-color-black);
    --upaep-offcanvas-close-hover-padding: 0 .5rem;
    --upaep-offcanvas-close-hover-margin: 0;
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-content-padding: .5rem .75rem;
    --upaep-offcanvas-content-fz: var(--upaep-fz16);
    --upaep-offcanvas-content-fw: var(--upaep-fw-medium);
    --upaep-offcanvas-content-color: var(--upaep-color-black);
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-padding: .5rem .75rem;
    --upaep-offcanvas-footer-border-top-size: 1px;
    --upaep-offcanvas-footer-border-top-style: solid;
    --upaep-offcanvas-footer-border-top-color: var(--upaep-color-border-grey);
    width: var(--upaep-offcanvas-width);
    height: var(--upaep-offcanvas-height);
    max-width: var(--upaep-offcanvas-maxwidth);
    background: var(--upaep-offcanvas-bg);
    box-shadow: var(--upaep-offcanvas-boxshadow);
    transform: var(--upaep-offcanvas-transform);
    inset: var(--upaep-offcanvas-inset);
    z-index: var(--upaep-offcanvas-zindex);
    position: fixed;
    display: flex;
    flex-direction: column;
    outline: 0;
    transition: transform 0.3s ease-in-out;

    &:not(.is-show) {
        --upaep-offcanvas-transform: translateX(-100%);

        &.__right {
            --upaep-offcanvas-transform: translateX(100%);
        }

        &.__bottom {
            --upaep-offcanvas-transform: translateY(100%);
        }

        &.__top {
            --upaep-offcanvas-transform: translateY(-100%);
        }
    }

    &.__right {
        --upaep-offcanvas-inset: 0 0 0 auto;
    }

    &.__bottom {
        --upaep-offcanvas-maxwidth: 100%;
        --upaep-offcanvas-height: 400px;
        --upaep-offcanvas-inset: auto auto 0 0;
    }

    &.__top {
        --upaep-offcanvas-maxwidth: 100%;
        --upaep-offcanvas-height: 400px;
        --upaep-offcanvas-inset: 0 auto auto 0;
    }

    & .upaep__offcanvas-header {
        background: var(--upaep-offcanvas-header-bg);
        padding: var(--upaep-offcanvas-header-padding);
        border-bottom: var(--upaep-offcanvas-header-border-bottom-size) var(--upaep-offcanvas-header-border-bottom-style) var(--upaep-offcanvas-header-border-bottom-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    & .upaep__offcanvas-title {
        font-size: var(--upaep-offcanvas-title-fz);
        font-weight: var(--upaep-offcanvas-title-fw);
        color: var(--upaep-offcanvas-title-color);
        margin: var(--upaep-offcanvas-title-margin);
        padding: var(--upaep-offcanvas-title-padding);
        line-height: var(--upaep-offcanvas-title-lineheight);
    }

    & .upaep__offcanvas-close {
        &::before {
            content: var(--upaep-offcanvas-close-content);
            font-size: var(--upaep-offcanvas-close-fz);
            font-weight: var(--upaep-offcanvas-close-fw);
            color: var(--upaep-offcanvas-close-color);
            padding: var(--upaep-offcanvas-close-padding);
            margin: var(--upaep-offcanvas-close-margin);
            font-family: var(--upaep-ff-fontawesome);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            cursor: pointer;
        }

        &:hover::before {
            content: var(--upaep-offcanvas-close-hover-content);
            font-size: var(--upaep-offcanvas-close-hover-fz);
            font-weight: var(--upaep-offcanvas-close-hover-fw);
            color: var(--upaep-offcanvas-close-hover-color);
            padding: var(--upaep-offcanvas-close-hover-padding);
            margin: var(--upaep-offcanvas-close-hover-margin);
        }

        &.__sup {
            position: absolute;
            inset: 5px 0 auto auto;
        }
    }

    & .upaep__offcanvas-content {
        background: var(--upaep-offcanvas-content-bg);
        padding: var(--upaep-offcanvas-content-padding);
        font-size: var(--upaep-offcanvas-content-fz);
        font-weight: var(--upaep-offcanvas-content-fw);
        color: var(--upaep-offcanvas-content-color);
        flex-grow: 1;
        overflow-y: auto;
    }

    & .upaep__offcanvas-footer {
        background: var(--upaep-offcanvas-footer-bg);
        padding: var(--upaep-offcanvas-footer-padding);
        border-top: var(--upaep-offcanvas-footer-border-top-size) var(--upaep-offcanvas-footer-border-top-style) var(--upaep-offcanvas-footer-border-top-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.upaep__offcanvas.__sm {
    --upaep-offcanvas-maxwidth: var(--upaep-size-xxs);
}

.upaep__offcanvas.__lg {
    --upaep-offcanvas-maxwidth: var(--upaep-size-lg);
}

.upaep__offcanvas.__xl {
    --upaep-offcanvas-maxwidth: var(--upaep-size-xl);
}

.upaep__offcanvas.__fullscreen {
    --upaep-offcanvas-width: 100%;
    --upaep-offcanvas-height: 100%;
    --upaep-offcanvas-maxwidth: none;
    --upaep-offcanvas-margin: 0;
}

.upaep__offcanvas.__dark {
    --upaep-offcanvas-bg: var(--colordark);
    --upaep-offcanvas-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-offcanvas-title-color: var(--upaep-color-white);
    --upaep-offcanvas-close-color: var(--upaep-color-background);
    --upaep-offcanvas-close-hover-color: var(--upaep-color-white);
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-offcanvas-content-color: var(--upaep-color-white);
}

.upaep__offcanvas.__black {
    --upaep-offcanvas-bg: var(--upaep-color-black);
    --upaep-offcanvas-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-offcanvas-title-color: var(--upaep-color-white);
    --upaep-offcanvas-close-color: var(--upaep-color-background);
    --upaep-offcanvas-close-hover-color: var(--upaep-color-white);
    --upaep-offcanvas-content-bg: transparent;
    --upaep-offcanvas-footer-bg: transparent;
    --upaep-offcanvas-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-offcanvas-content-color: var(--upaep-color-white);
}

/*? ------ Paginación ------ */
.upaep__pagination {
    --upaep-pagination-width: auto;
    --upaep-pagination-height: auto;
    --upaep-pagination-padding: .5rem;
    --upaep-pagination-margin: 0;
    --upaep-pagination-bg: ;
    --upaep-pagination-justify: end;
    --upaep-pagination-number-minwidth: 25px;
    --upaep-pagination-number-minheight: 25px;
    --upaep-pagination-number-padding: 0 .25rem;
    --upaep-pagination-number-bg: ;
    --upaep-pagination-number-fz: var(--upaep-fz14);
    --upaep-pagination-number-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-color: var(--upaep-color-dark-grey);
    --upaep-pagination-number-hover-bg: var(--upaep-color-red);
    --upaep-pagination-number-hover-fz: var(--upaep-fz14);
    --upaep-pagination-number-hover-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-hover-color: var(--upaep-color-white);
    --upaep-pagination-number-active-bg: var(--upaep-color-red);
    --upaep-pagination-number-active-fz: var(--upaep-fz14);
    --upaep-pagination-number-active-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-active-color: var(--upaep-color-white);
    --upaep-pagination-number-active-hover-bg: var(--upaep-color-red);
    --upaep-pagination-number-active-hover-fz: var(--upaep-fz14);
    --upaep-pagination-number-active-hover-fw: var(--upaep-fw-bold);
    --upaep-pagination-number-active-hover-color: var(--upaep-color-white);
    --upaep-pagination-points-colors: var(--upaep-color-dark-grey);
    width: var(--upaep-pagination-width);
    height: var(--upaep-pagination-height);
    padding: var(--upaep-pagination-padding);
    margin: var(--upaep-pagination-margin);
    background: var(--upaep-pagination-bg);
    justify-content: var(--upaep-pagination-justify);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    & .upaep__btn {
        --upaep-btn-margin: 0;

        &.change_elements {
            --upaep-btn-padding: .5rem;
            --upaep-btn-margin: 0;
            --upaep-btn-border-color: var(--upaep-color-white);
            --upaep-btn-border-radius: 50px;
            --upaep-btn-fz: var(--upaep-fz14);
            --upaep-btn-fw: var(--upaep-fw-bold);
            --upaep-btn-bg: var(--upaep-color-white);
            --upaep-btn-hover-bg: var(--upaep-color-tenue-gray);
            --upaep-btn-hover-border-size: 1px;
            --upaep-btn-hover-border-color: var(--upaep-color-tenue-gray);
            --upaep-btn-hover-color: ;

            img {
                width: 15px;
                height: 15px;
            }

            &[data-move="back_"]::before {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f104';
                margin: 0 5px;
                color: var(--upaep-color-red);
            }

            &[data-move="next_"]::after {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f105';
                margin: 0 5px;
                color: var(--upaep-color-red);
            }
        }
    }

    & .upaep__pagination-paginate {
        width: auto;
        height: auto;
        display: inline-flex;
        gap: 5px;
    }

    & .upaep__pagination-points,
    & .pagination_points {
        margin: 0 .5rem;
        text-decoration: none;
        color: var(--upaep-pagination-points-colors);
        cursor: default;
    }

    & .upaep__pagination-number,
    & .pagination_number {
        min-width: var(--upaep-pagination-number-minwidth);
        min-height: var(--upaep-pagination-number-minheight);
        background: var(--upaep-pagination-number-bg);
        padding: var(--upaep-pagination-number-padding);
        font-size: var(--upaep-pagination-number-fz);
        font-weight: var(--upaep-pagination-number-fw);
        color: var(--upaep-pagination-number-color);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        text-decoration: none;

        &.is-disabled {
            opacity: .5;
            pointer-events: none;
            cursor: no-drop;
        }

        &:hover {
            width: var(--upaep-pagination-number-hover-width);
            height: var(--upaep-pagination-number-hover-height);
            background: var(--upaep-pagination-number-hover-bg);
            font-size: var(--upaep-pagination-number-hover-fz);
            font-weight: var(--upaep-pagination-number-hover-fw);
            color: var(--upaep-pagination-number-hover-color);
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &.is-active {
            width: var(--upaep-pagination-number-active-width);
            height: var(--upaep-pagination-number-active-height);
            background: var(--upaep-pagination-number-active-bg);
            font-size: var(--upaep-pagination-number-active-fz);
            font-weight: var(--upaep-pagination-number-active-fw);
            color: var(--upaep-pagination-number-active-color);
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                width: var(--upaep-pagination-number-active-hover-width);
                height: var(--upaep-pagination-number-active-hover-height);
                background: var(--upaep-pagination-number-active-hover-bg);
                font-size: var(--upaep-pagination-number-active-hover-fz);
                font-weight: var(--upaep-pagination-number-active-hover-fw);
                color: var(--upaep-pagination-number-active-hover-color);
                border-radius: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.upaep__pagination.__lineal {
    gap: 0;

    & .upaep__btn.change_elements:first-child {
        --upaep-btn-border-radius: 50px 0 0 50px;
    }

    & .upaep__btn.change_elements:last-child {
        --upaep-btn-border-radius: 0 50px 50px 0;
    }
}

/*? ------ Table ------ */
.upaep__table {
    --upaep-table-width: 100%;
    --upaep-table-height: auto;
    --upaep-table-margin: 0 0 1rem 0;
    --upaep-table-padding: .5rem;
    --upaep-table-bg: var(--upaep-color-white);
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-size: 1px;
    --upaep-table-thead-border-bottom-style: solid;
    --upaep-table-thead-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-thead-bg: transparent;
    --upaep-table-thead-fz: var(--upaep-fz16);
    --upaep-table-thead-fw: var(--upaep-fw-bold);
    --upaep-table-thead-color: var(--upaep-color-black);
    --upaep-table-thead-minwidth: 0;
    --upaep-table-thead-maxwidth: auto;
    --upaep-table-caption-padding: .35rem;
    --upaep-table-caption-border-bottom-size: 1px;
    --upaep-table-caption-border-bottom-style: solid;
    --upaep-table-caption-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-tbody-border-bottom-size: 0;
    --upaep-table-tbody-border-bottom-style: solid;
    --upaep-table-tbody-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-fz: var(--upaep-fz14);
    --upaep-table-tbody-fw: var(--upaep-fw-regular);
    --upaep-table-tbody-color: var(--upaep-color-black);
    --upaep-table-tbody-align: start;
    --upaep-table-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-table-hover-fz: var(--upaep-fz14);
    --upaep-table-hover-fw: var(--upaep-fw-regular);
    --upaep-table-hover-color: var(--upaep-color-black);
    --upaep-table-active-bg: var(--upaep-color-tenue-gray);
    --upaep-table-active-fz: var(--upaep-fz14);
    --upaep-table-active-fw: var(--upaep-fw-regular);
    --upaep-table-active-color: var(--upaep-color-black);
    --upaep-table-striped-bg: var(--upaep-color-white);
    --upaep-table-striped-fz: var(--upaep-fz14);
    --upaep-table-striped-fw: var(--upaep-fw-regular);
    --upaep-table-striped-color: var(--upaep-color-black);
    --upaep-table-striped-hover-bg: var(--upaep-color-background);
    --upaep-table-striped-hover-fz: var(--upaep-fz14);
    --upaep-table-striped-hover-fw: var(--upaep-fw-regular);
    --upaep-table-striped-hover-color: var(--upaep-color-black);
    --upaep-table-striped-active-bg: var(--upaep-color-tenue-gray);
    --upaep-table-striped-active-fz: var(--upaep-fz14);
    --upaep-table-striped-active-fw: var(--upaep-fw-regular);
    --upaep-table-striped-active-color: var(--upaep-color-black);
    --upaep-table-align: middle;
    width: var(--upaep-table-width);
    height: var(--upaep-table-height);
    margin: var(--upaep-table-margin);
    padding: var(--upaep-table-padding);
    background: var(--upaep-table-bg);
    border: var(--upaep-table-border-size) var(--upaep-table-border-style) var(--upaep-table-border-color);
    border-radius: var(--upaep-table-border-radius);
    vertical-align: var(--upaep-table-align);

    & thead tr {
        border-bottom: var(--upaep-table-thead-border-bottom-size) var(--upaep-table-thead-border-bottom-style) var(--upaep-table-thead-border-bottom-color);
        background: var(--upaep-table-thead-bg);
        font-size: var(--upaep-table-thead-fz);
        font-weight: var(--upaep-table-thead-fw);
        color: var(--upaep-table-thead-color);
    }

    &>:not(caption)>*>* {
        padding: var(--upaep-table-caption-padding);
        border-bottom: var(--upaep-table-caption-border-bottom-size) var(--upaep-table-caption-border-bottom-style) var(--upaep-table-caption-border-bottom-color);
        min-width: var(--upaep-table-thead-minwidth);
        max-width: var(--upaep-table-thead-maxwidt);
        text-align: center;
    }

    & tbody {
        border-bottom: var(--upaep-table-tbody-border-bottom-size) var(--upaep-table-tbody-border-bottom-style) var(--upaep-table-tbody-border-bottom-color);

        & tr {
            background: var(--upaep-table-tbody-bg);
            font-size: var(--upaep-table-tbody-fz);
            font-weight: var(--upaep-table-tbody-fw);
            color: var(--upaep-table-tbody-color);
            text-align: var(--upaep-table-tbody-align);
        }
    }

    &.__striped {
        &>tbody>tr:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-bg);
            font-size: var(--upaep-table-striped-fz);
            font-weight: var(--upaep-table-striped-fw);
            color: var(--upaep-table-striped-color);
        }

        &.__hover>tbody>tr:hover:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-hover-bg);
            font-size: var(--upaep-table-striped-hover-fz);
            font-weight: var(--upaep-table-striped-hover-fw);
            color: var(--upaep-table-striped-hover-color);
        }

        &>tbody>tr.is-active:nth-of-type(odd)>* {
            background: var(--upaep-table-striped-active-bg);
            font-size: var(--upaep-table-striped-active-fz);
            font-weight: var(--upaep-table-striped-active-fw);
            color: var(--upaep-table-striped-active-color);
        }
    }

    &.__hover>tbody>tr:hover>* {
        background: var(--upaep-table-hover-bg);
        font-size: var(--upaep-table-hover-fz);
        font-weight: var(--upaep-table-hover-fw);
        color: var(--upaep-table-hover-color);
    }

    &>tbody>tr.is-active>* {
        background: var(--upaep-table-active-bg);
        font-size: var(--upaep-table-active-fz);
        font-weight: var(--upaep-table-active-fw);
        color: var(--upaep-table-active-color);
    }
}

.upaep__table.__bordered {
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: var(--upaep-color-border-grey);
}

.upaep__table.__borderless>:not(caption)>*>* {
    --upaep-table-caption-border-bottom-size: 0;
}

.upaep__table.__primary {
    --upaep-table-bg: var(--upaep-color-white);
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-thead-bg: var(--upaep-color-dark-grey);
    --upaep-table-thead-color: var(--upaep-color-white);
    --upaep-table-caption-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--upaep-color-black);
    --upaep-table-hover-bg: var(--upaep-color-light-grey);
    --upaep-table-hover-color: var(--upaep-color-black);
    --upaep-table-active-bg: var(--upaep-color-light-grey);
    --upaep-table-active-color: var(--upaep-color-black);
    --upaep-table-striped-bg: var(--upaep-color-tenue-gray);
    --upaep-table-striped-color: var(--upaep-color-black);
    --upaep-table-striped-hover-bg: var(--upaep-color-light-grey);
    --upaep-table-striped-hover-color: var(--upaep-color-black);
    --upaep-table-striped-active-bg: var(--upaep-color-light-grey);
    --upaep-table-striped-active-color: var(--upaep-color-black);
}

.upaep__table.__secondary {
    --upaep-table-bg: var(--upaep-color-white);
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-thead-bg: var(--upaep-color-dark-grey);
    --upaep-table-thead-color: var(--upaep-color-white);
    --upaep-table-caption-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--upaep-color-black);
    --upaep-table-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-table-hover-color: var(--upaep-color-black);
    --upaep-table-active-bg: var(--upaep-color-tenue-gray);
    --upaep-table-active-color: var(--upaep-color-black);
    --upaep-table-striped-bg: var(--upaep-color-blue-primary);
    --upaep-table-striped-color: var(--upaep-color-white);
    --upaep-table-striped-hover-bg: var(--upaep-color-blue-primary-hover);
    --upaep-table-striped-hover-color: var(--upaep-color-white);
    --upaep-table-striped-active-bg: var(--upaep-color-blue-primary);
    --upaep-table-striped-active-color: var(--upaep-color-white);
}

.upaep__table.__minimalist,
.upaep__table.__customtable,
.upaep__table.__datatable {
    --upaep-table-bg: var(--upaep-color-white);
    --upaep-table-border-size: 1px;
    --upaep-table-border-style: solid;
    --upaep-table-border-color: transparent;
    --upaep-table-border-radius: 10px;
    --upaep-table-thead-border-bottom-color: #A6A6A6;
    --upaep-table-thead-bg: var(--upaep-color-white);
    --upaep-table-thead-color: var(--upaep-color-black);
    --upaep-table-thead-minwidth: 100px;
    --upaep-table-caption-border-bottom-size: 0;
    --upaep-table-caption-border-bottom-color: #A6A6A6;
    --upaep-table-tbody-border-bottom-size: 1px;
    --upaep-table-tbody-bg: transparent;
    --upaep-table-tbody-color: var(--upaep-color-black);
    --upaep-table-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-table-hover-color: var(--upaep-color-black);
    --upaep-table-active-bg: var(--upaep-color-tenue-gray);
    --upaep-table-active-color: var(--upaep-color-black);
    --upaep-table-striped-bg: var(--upaep-color-white);
    --upaep-table-striped-color: var(--upaep-color-black);
    --upaep-table-striped-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-table-striped-hover-color: var(--upaep-color-black);
    --upaep-table-striped-active-bg: var(--upaep-color-white);
    --upaep-table-striped-active-color: var(--upaep-color-black);
    --upaep-table-margin: 0 0 .5rem;
    border-collapse: collapse;

    & tbody tr:last-child td {
        padding: .35rem .35rem 1rem .35rem;
    }
}

.upaep__table-content {
    --upaep-table-content-width: 100%;
    --upaep-table-content-height: auto;
    --upaep-table-content-padding: 1rem;
    --upaep-table-content-margin: 1rem;
    --upaep-table-content-bg: var(--upaep-color-white);
    --upaep-table-content-boxshadow: var(--upaep-box-shadow);
    --upaep-table-content-border-size: 0;
    --upaep-table-content-border-style: solid;
    --upaep-table-content-border-color: var(--upaep-color-border-grey);
    --upaep-table-content-border-radius: 10px;
    --upaep-table-content-track-color: var(--upaep-color-background);
    --upaep-table-content-thumb-color: var(--upaep-color-border-grey);
    --upaep-table-content-track-hover-color: var(--upaep-color-tenue-gray);
    --upaep-table-content-thumb-hover-color: var(--upaep-color-border-grey);
    width: var(--upaep-table-content-width);
    height: var(--upaep-table-content-height);
    padding: var(--upaep-table-content-padding);
    margin: var(--upaep-table-content-margin);
    background: var(--upaep-table-content-bg);
    box-shadow: var(--upaep-table-content-boxshadow);
    border: var(--upaep-table-content-border-size) var(--upaep-table-content-border-style) var(--upaep-table-content-border-color);
    border-radius: var(--upaep-table-content-border-radius);

    &.__responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: var(--upaep-table-content-thumb-color) var(--upaep-table-content-track-color);

        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        &::-webkit-scrollbar-track {
            background: var(--upaep-table-content-track-color);
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background: var(--upaep-table-content-thumb-color);
            border-radius: 10px;
        }

        &::-webkit-scrollbar-track:hover {
            background: var(--upaep-table-content-track-hover-color);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--upaep-table-content-thumb-hover-color);
        }
    }
}

/*? ------ CustomTable ------ */
.table_config_container,
.upaep__customtable {
    --upaep-customtable-width: 100%;
    --upaep-customtable-height: auto;
    --upaep-customtable-padding: 1rem;
    --upaep-customtable-margin: 1rem auto;
    --upaep-customtable-bg: var(--upaep-color-white);
    --upaep-customtable-boxshadow: var(--upaep-box-shadow);
    --upaep-customtable-border-size: 0;
    --upaep-customtable-border-style: solid;
    --upaep-customtable-border-color: var(--upaep-color-border-grey);
    --upaep-customtable-border-radius: 10px;
    --upaep-customtable-track-color: var(--upaep-color-background);
    --upaep-customtable-thumb-color: var(--upaep-color-grey);
    --upaep-customtable-track-hover-color: var(--upaep-color-tenue-gray);
    --upaep-customtable-thumb-hover-color: var(--upaep-color-border-grey);
    --upaep-customtable-search-width: 100%;
    --upaep-customtable-search-height: auto;
    --upaep-customtable-search-padding: .5rem 1rem;
    --upaep-customtable-search-margin: 0;
    --upaep-customtable-search-bg: transparent;
    --upaep-customtable-search-justify: end;
    --upaep-customtable-search-label-fz: var(--upaep-fz16);
    --upaep-customtable-search-label-fw: var(--upaep-fw-semibold);
    --upaep-customtable-search-label-color: var(--upaep-color-dark-grey);
    --upaep-customtable-search-label-padding: 0;
    --upaep-customtable-content-width: 100%;
    --upaep-customtable-content-height: auto;
    --upaep-customtable-content-padding: 0;
    --upaep-customtable-content-margin: 0;
    --upaep-customtable-content-bg: transparent;
    --upaep-customtable-content-justify: center;
    --upaep-customtable-pagination-width: 100%;
    --upaep-customtable-pagination-height: auto;
    --upaep-customtable-pagination-padding: 0;
    --upaep-customtable-pagination-margin: 0;
    --upaep-customtable-pagination-bg: transparent;
    --upaep-customtable-pagination-justify: end;
    width: var(--upaep-customtable-width);
    height: var(--upaep-customtable-height);
    padding: var(--upaep-customtable-padding);
    margin: var(--upaep-customtable-margin);
    background: var(--upaep-customtable-bg);
    box-shadow: var(--upaep-customtable-boxshadow);
    border: var(--upaep-customtable-border-size) var(--upaep-customtable-border-style) var(--upaep-customtable-border-color);
    border-radius: var(--upaep-customtable-border-radius);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.table_config_container .table_search,
.upaep__customtable .upaep__customtable-search {
    width: var(--upaep-customtable-search-width);
    height: var(--upaep-customtable-search-height);
    padding: var(--upaep-customtable-search-padding);
    margin: var(--upaep-customtable-search-margin);
    background: var(--upaep-customtable-search-bg);
    justify-content: var(--upaep-customtable-search-justify);
    display: flex;
    align-items: center;
    gap: 5px;

    &>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.search_value) {
            gap: 5px;
        }
    }

    & div:has(.search_value) .search_value:not(.upaep__input) {
        width: auto;
        height: auto;
        padding: .35rem 2.5rem .35rem .75rem;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDIwOGMwIDQ1LjktMTQuOSA4OC4zLTQwIDEyMi43TDUwMi42IDQ1Ny40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDMzMC43IDM3NmMtMzQuNCAyNS4yLTc2LjggNDAtMTIyLjcgNDBDOTMuMSA0MTYgMCAzMjIuOSAwIDIwOFM5My4xIDAgMjA4IDBTNDE2IDkzLjEgNDE2IDIwOHpNMjA4IDM1MmExNDQgMTQ0IDAgMSAwIDAtMjg4IDE0NCAxNDQgMCAxIDAgMCAyODh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+") transparent no-repeat;
        background-color: var(--upaep-color-white);
        background-position: 95% 50%;
        background-size: 22px;
        border-radius: 50px;
    }
}

.table_config_container .table_search label,
.upaep__customtable .upaep__customtable-search label {
    font-size: var(--upaep-customtable-search-label-fz);
    font-weight: var(--upaep-customtable-search-label-fw);
    color: var(--upaep-customtable-search-label-color);
    padding: var(--upaep-customtable-search-label-padding);
    margin: 0;
}

.table_config_container .table_search .upaep__input.search_value,
.upaep__customtable .upaep__customtable-search .upaep__input.search_value {
    --upaep-input-width: auto;
    --upaep-input-height: auto;
    --upaep-input-padding: .35rem 2.5rem .35rem .75rem;
    --upaep-input-margin: 0;
    --upaep-input-border-radius: 50px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDIwOGMwIDQ1LjktMTQuOSA4OC4zLTQwIDEyMi43TDUwMi42IDQ1Ny40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDMzMC43IDM3NmMtMzQuNCAyNS4yLTc2LjggNDAtMTIyLjcgNDBDOTMuMSA0MTYgMCAzMjIuOSAwIDIwOFM5My4xIDAgMjA4IDBTNDE2IDkzLjEgNDE2IDIwOHpNMjA4IDM1MmExNDQgMTQ0IDAgMSAwIDAtMjg4IDE0NCAxNDQgMCAxIDAgMCAyODh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+") transparent no-repeat;
    background-position: 95% 50%;
    background-size: 22px;
    background-color: var(--upaep-color-white);
}

.table_config_container .table_search .upaep__input.search_value:focus,
.upaep__customtable .upaep__customtable-search .upaep__input.search_value:focus {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDIwOGMwIDQ1LjktMTQuOSA4OC4zLTQwIDEyMi43TDUwMi42IDQ1Ny40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDMzMC43IDM3NmMtMzQuNCAyNS4yLTc2LjggNDAtMTIyLjcgNDBDOTMuMSA0MTYgMCAzMjIuOSAwIDIwOFM5My4xIDAgMjA4IDBTNDE2IDkzLjEgNDE2IDIwOHpNMjA4IDM1MmExNDQgMTQ0IDAgMSAwIDAtMjg4IDE0NCAxNDQgMCAxIDAgMCAyODh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+") transparent no-repeat;
    background-position: 200px;
    background-size: 22px;
    background-position: 95% 50%;
    background-color: var(--upaep-color-white);
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    width: var(--upaep-customtable-content-width);
    height: var(--upaep-customtable-content-height);
    padding: var(--upaep-customtable-content-padding);
    margin: var(--upaep-customtable-content-margin);
    background: var(--upaep-customtable-content-bg)
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    scrollbar-color: var(--upaep-customtable-thumb-color) var(--upaep-customtable-track-color);
}

.table_config_container .table_content::-webkit-scrollbar,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table_config_container .table_content::-webkit-scrollbar-track,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-track {
    background: var(--upaep-customtable-track-color);
    border-radius: 10px;
}

.table_config_container .table_content::-webkit-scrollbar-thumb,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-thumb {
    background: var(--upaep-customtable-thumb-color);
    border-radius: 10px;
}

.table_config_container .table_content::-webkit-scrollbar-track:hover,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-track:hover {
    background: var(--upaep-customtable-track-hover-color);
}

.table_config_container .table_content::-webkit-scrollbar-thumb:hover,
.upaep__customtable .upaep__customtable-content::-webkit-scrollbar-thumb:hover {
    background: var(--upaep-customtable-thumb-hover-color);
}

.table_config_container .table_content thead th div,
.upaep__customtable .upaep__customtable-content thead th div {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.table_config_container .table_content thead th div .upaep__input.search_by_column,
.upaep__customtable .upaep__customtable-content thead th div .upaep__input.search_by_column {
    --upaep-input-width: 200px;
    --upaep-input-height: 2rem;
    --upaep-input-padding: .35rem .75rem;
    --upaep-input-margin: 0;
    --upaep-input-border-radius: 50px;
}

.table_config_container .table_content thead th div .search_by_column,
.upaep__customtable .upaep__customtable-content thead th div .search_by_column {
    width: 200px;
    height: 2rem;
    padding: .35rem .75rem;
    margin: 0;
    border-radius: 50px;
}

.table_config_container .table_content thead>tr,
.upaep__customtable .upaep__customtable-content thead>tr {
    th {
        position: relative;
        align-content: end;
        line-height: normal;

        &[data-field] {
            &::after {
                content: '';
                background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy43LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDIxLjIgNDUuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEuMiA0NS4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojNTI1NjVBO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM4RTkzOTY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8ZyBpZD0iR3J1cG9fMzM3MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MTQgMSkiPg0KCTxwYXRoIGlkPSJUcmF6YWRvXzUyNTciIGNsYXNzPSJzdDAiIGQ9Ik0xOC44LDMzLjVsLTkuNiw5LjZsLTkuNi05LjYiLz4NCgk8cGF0aCBpZD0iVHJhemFkb181NTk3IiBjbGFzcz0ic3QxIiBkPSJNLTAuNCw5LjZMOS4yLDBsOS42LDkuNiIvPg0KPC9nPg0KPC9zdmc+DQo=') center center no-repeat;
                background-size: 15px 30px;
                width: 18px;
                height: 100%;
                position: absolute;
                inset: 0 0 auto auto;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .5s;
            }

            &.sort_asc {
                &::after {
                    content: '';
                    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy43LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDIxLjIgNDUuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEuMiA0NS4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojOEU5Mzk2O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM1MjU2NUE7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8ZyBpZD0iR3J1cG9fMzIzMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MTQgMSkiPg0KCTxwYXRoIGlkPSJUcmF6YWRvXzUyNTciIGNsYXNzPSJzdDAiIGQ9Ik0xOC44LDMzLjVsLTkuNiw5LjZsLTkuNi05LjYiLz4NCgk8cGF0aCBpZD0iVHJhemFkb181NTk3IiBjbGFzcz0ic3QxIiBkPSJNLTAuNCw5LjZMOS4yLDBsOS42LDkuNiIvPg0KPC9nPg0KPC9zdmc+DQo=') center center no-repeat;
                    background-size: 15px 30px;
                    width: 18px;
                    height: 100%;
                    position: absolute;
                    inset: 0 0 auto auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all .5s;
                }
            }
        }
    }
}

.table_config_container .table_pagination,
.upaep__customtable .upaep__customtable-pagination {
    .total_registers {
        font-size: var(--upaep-fz14);
        font-weight: var(--upaep-fw-semibold);
        color: var(--upaep-color-dark-grey);
    }
}

.table_config_container .table_pagination,
.upaep__customtable .upaep__customtable-pagination {
    width: var(--upaep-customtable-pagination-width);
    height: var(--upaep-customtable-pagination-height);
    padding: var(--upaep-customtable-pagination-padding);
    margin: var(--upaep-customtable-pagination-margin);
    background: var(--upaep-customtable-pagination-bg);
    justify-content: var(--upaep-customtable-pagination-justify);
    display: flex;
    align-items: center;
    gap: .25rem;

    &:has(>div) div {
        display: flex;
        align-items: center;
        gap: 10px;

        .navigation_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;

            &:hover {
                scale: 1.1;
            }
        }

        .pagination_number:not(.is-active) {
            color: var(--upaep-color-dark-grey);
            font-size: var(--upaep-fz14);
            font-weight: var(--upaep-fw-semibold);
            user-select: none;
        }
    }

    &:has(.upaep__pagination) {

        img.navigate_first_page,
        img.change_elements,
        img.naviagate_last_page,
        .before_button,
        .after_button {
            display: none !important;
        }
    }

    .upaep__pagination {
        --upaep-pagination-padding: 0;
    }
}

.table_config_container .table_content,
.upaep__customtable .upaep__customtable-content {
    --upaep-customtable-icon-collapse-inactive: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTI0Ni42IDI3OC42YzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zbC0xMjgtMTI4Yy05LjItOS4yLTIyLjktMTEuOS0zNC45LTYuOXMtMTkuOCAxNi42LTE5LjggMjkuNmwwIDI1NmMwIDEyLjkgNy44IDI0LjYgMTkuOCAyOS42czI1LjcgMi4yIDM0LjktNi45bDEyOC0xMjh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+");
    --upaep-customtable-icon-collapse-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTEzNy40IDM3NC42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDEyOC0xMjhjOS4yLTkuMiAxMS45LTIyLjkgNi45LTM0LjlzLTE2LjYtMTkuOC0yOS42LTE5LjhMMzIgMTkyYy0xMi45IDAtMjQuNiA3LjgtMjkuNiAxOS44cy0yLjIgMjUuNyA2LjkgMzQuOWwxMjggMTI4eiIgZmlsbD0iI2UzMDkyMSIvPjwvc3ZnPg==");
    --upaep-customtable-icon-size-collapse-inactive: 10px 15px;
    --upaep-customtable-icon-size-collapse-active: 10px 15px;

    tr.tr-collapse {
        td {
            --upaep-table-hover-bg: none;
            animation: a_fadeIn .3s ease-in-out;
        }
    }

    td.is-collapse {
        position: relative;
        cursor: pointer;

        &::after {
            content: '';
            background: var(--upaep-customtable-icon-collapse-inactive) center center no-repeat;
            background-size: var(--upaep-customtable-icon-size-collapse-inactive);
            width: 18px;
            height: 100%;
            position: absolute;
            inset: 0 auto auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &.is-show {
            &::after {
                background: var(--upaep-customtable-icon-collapse-active) center center no-repeat;
                background-size: var(--upaep-customtable-icon-size-collapse-active);
            }
        }
    }

    .td-btn-collapse {
        width: auto;
        position: relative;
        cursor: pointer;

        .__btn-collapse {
            --upaep-btn-width: 35px;
            --upaep-btn-height: 35px;
            --upaep-btn-margin: 0 auto;
            --upaep-btn-padding: .5rem;
            --upaep-btn-border-radius: 50%;

            &::after {
                content: '';
                background: var(--upaep-customtable-icon-collapse-inactive) center center no-repeat;
                background-size: 10px 15px;
                width: 18px;
                height: 100%;
                position: absolute;
                inset: auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &.is-show {
            .__btn-collapse::after {
                background: var(--upaep-customtable-icon-collapse-active) center center no-repeat;
                background-size: 10px 15px;
            }
        }
    }

    .td-collapse-template {
        padding: .5rem;
        border-bottom: 1px solid var(--upaep-color-tenue-gray);
    }

}

.table_config_container .table_footer_container,
.upaep__customtable .table_footer_container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    >* {
        flex: 1 1 0;
    }

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

    .upaep__select.change_rows_selector {
        --upaep-select-width: 80px;
        --upaep-select-margin: 0;
    }
}

.table_config_container:has(.upaep__table.__no-shadow),
.upaep__customtable:has(.upaep__table.__no-shadow) {
    --upaep-customtable-boxshadow: none;
}

.table_config_container:has(.upaep__table.__customtable),
.upaep__customtable:has(.upaep__table.__customtable) {
    --upaep-customtable-search-bg: var(--upaep-color-tenue-gray);
    --upaep-customtable-search-padding: .8rem;
    --upaep-customtable-search-justify: space-between;

    .table_content thead th div {
        align-items: center;
    }

    .table_search {
        width: 100%;
        border-radius: 5px;

        &>div:not(:has(.search_value)) {
            gap: 0;
        }

        .upaep__btn {
            --upaep-btn-fz: var(--upaep-fz16);
            --upaep-btn-margin: .5rem;

            &.download_excel {
                --upaep-btn-padding: 0.5rem 1.5rem;
                --upaep-btn-margin: 0;
                gap: .625rem;

                img {
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }
}

.table_config_container .is-sticky:is(th, td),
.upaep__customtable .is-sticky:is(th, td) {
    position: sticky !important;
    inset: auto auto auto 0;
    background: var(--upaep-color-white);
    box-shadow: inset rgba(0, 0, 0, 0.25) -4px -2px 0px -2px;
    z-index: 5;
}

.upaep__btn.__trinity {
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-bg: #f8f9fa;
    --upaep-btn-border-color: #f8f9fa;
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-bg: #d3d4d5;
    --upaep-btn-hover-border-color: #d3d4d5;
    --upaep-btn-disabled-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: #f8f9fa;
    --upaep-btn-disabled-border-color: #f8f9fa;
    --upaep-btn-height: 35px;
    --upaep-btn-width: 35px;
    --upaep-btn-border-radius: 50%;
    --upaep-btn-padding: .05rem;
    --upaep-btn-margin: 0 auto;

    img {
        width: 26px;
        cursor: pointer;
    }

    &:is(.upaep__dropdown-btn, .__dropdown)::after {
        display: none;
    }
}

/*? ------ Tabs ------ */
.upaep__tab {
    --upaep-tab-width: 100%;
    --upaep-tab-height: auto;
    --upaep-tab-padding: 2rem;
    --upaep-tab-margin: 0;
    --upaep-tab-border-size: 0;
    --upaep-tab-border-style: solid;
    --upaep-tab-border-color: var(--upaep-color-border-grey);
    --upaep-tab-border-radius: 10px;
    --upaep-tab-boxshadow: var(--upaep-bx-shadow);
    --upaep-tab-tabs-width: auto;
    --upaep-tab-tabs-height: auto;
    --upaep-tab-tabs-paddig: 0;
    --upaep-tab-tabs-margin: 0 1rem;
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabs-border-bottom-size: 3px;
    --upaep-tab-tabs-border-bottom-style: solid;
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-red);
    --upaep-tab-tabsitem-justify: space-around;
    --upaep-tab-tabitem-width: auto;
    --upaep-tab-tabitem-height: auto;
    --upaep-tab-tabitem-minheight: 35px;
    --upaep-tab-tabitem-min-width: 90px;
    --upaep-tab-tabitem-max-width: auto;
    --upaep-tab-tabitem-padding: .5rem;
    --upaep-tab-tabitem-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabitem-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-bg: var(--upaep-color-white);
    --upaep-tab-tabitem-active-padding: .5rem;
    --upaep-tab-tabitem-active-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-active-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-active-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-active-bg: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-padding: .5rem;
    --upaep-tab-tabitem-hover-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-hover-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-hover-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-hover-bg: var(--upaep-color-red);
    --upaep-tab-tabitem-active-hover-padding: .5rem;
    --upaep-tab-tabitem-active-hover-fz: var(--upaep-fz16);
    --upaep-tab-tabitem-active-hover-fw: var(--upaep-fw-bold);
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-hover-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-active-hover-bg: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-boxshadow: ;
    --upaep-tab-tabitem-underline-width: 100%;
    --upaep-tab-tabitem-underline-height: 3px;
    --upaep-tab-tabitem-underline-color: var(--upaep-color-red);
    --upaep-tab-tabscontent-width: 100%;
    --upaep-tab-tabscontent-height: auto;
    --upaep-tab-tabscontent-padding: 1.5rem;
    --upaep-tab-tabscontent-margin: 0;
    --upaep-tab-tabscontent-bg: var(--upaep-color-white);
    --upaep-tab-tabscontent-border-radius: 10px;
    --upaep-tab-tabscontent-boxshadow: ;
    --upaep-tab-tabcontent-width: 100%;
    --upaep-tab-tabcontent-height: auto;
    --upaep-tab-tabcontent-padding: 1.5rem;
    --upaep-tab-tabcontent-margin: 0;
    --upaep-tab-tabcontent-bg: var(--upaep-color-white);
    --upaep-tab-tabcontent-border-radius: 10px;
    --upaep-tab-tabscontent-second-width: 100%;
    --upaep-tab-tabscontent-second-height: auto;
    --upaep-tab-tabscontent-second-padding: 1.5rem;
    --upaep-tab-tabscontent-second-margin: 0;
    --upaep-tab-tabscontent-second-bg: var(--upaep-color-white);
    --upaep-tab-tabscontent-second-border-radius: 10px;
    --upaep-tab-tabscontent-second-boxshadow: ;
    --upaep-tab-tabcontent-second-width: 100%;
    --upaep-tab-tabcontent-second-height: auto;
    --upaep-tab-tabcontent-second-padding: 1.5rem;
    --upaep-tab-tabcontent-second-margin: 0;
    --upaep-tab-tabcontent-second-bg: var(--upaep-color-white);
    --upaep-tab-tabcontent-second-border-radius: 10px;
    width: var(--upaep-tab-width);
    height: var(--upaep-tab-height);
    padding: var(--upaep-tab-padding);
    margin: var(--upaep-tab-margin);
    border: var(--upaep-tab-border-size) var(--upaep-tab-border-style) var(--upaep-tab-border-color);
    border-radius: var(--upaep-tab-border-radius);
    box-shadow: var(--upaep-tab-boxshadow);

    & .upaep__tabs {
        width: var(--upaep-tab-tabs-width);
        height: var(--upaep-tab-tabs-height);
        padding: var(--upaep-tab-tabs-paddig);
        margin: var(--upaep-tab-tabs-margin);
        border-bottom: var(--upaep-tab-tabs-border-bottom-size) var(--upaep-tab-tabs-border-bottom-style) var(--upaep-tab-tabs-border-bottom-color);
        justify-content: var(--upaep-tab-tabs-justify);
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;

        & .upaep__tab-item a,
        & .upaep__tab-item {
            width: var(--upaep-tab-tabitem-width);
            min-height: var(--upaep-tab-tabitem-minheight);
            height: var(--upaep-tab-tabitem-height);
            min-width: var(--upaep-tab-tabitem-min-width);
            max-width: var(--upaep-tab-tabitem-max-width);
            padding: var(--upaep-tab-tabitem-padding);
            font-size: var(--upaep-tab-tabitem-fz);
            font-weight: var(--upaep-tab-tabitem-fw);
            color: var(--upaep-tab-tabitem-color);
            border-radius: var(--upaep-tab-tabitem-border-radius);
            background: var(--upaep-tab-tabitem-bg);
            box-shadow: var(--upaep-tab-tabitem-hover-boxshadow);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            white-space: initial;
            outline: none;
            line-height: normal;
            letter-spacing: normal;
            user-select: none;
            vertical-align: middle;
            flex-shrink: 0;
            cursor: pointer;
            text-wrap: balance;
            text-decoration: none;
            word-break: break-word;
            transition: box-shadow, transform, opacity, background .2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        & .upaep__tab-item.is-active a,
        & .upaep__tab-item.is-active {
            padding: var(--upaep-tab-tabitem-active-padding);
            font-size: var(--upaep-tab-tabitem-active-fz);
            font-weight: var(--upaep-tab-tabitem-active-fw);
            color: var(--upaep-tab-tabitem-active-color);
            border-radius: var(--upaep-tab-tabitem-active-border-radius);
            background: var(--upaep-tab-tabitem-active-bg);
        }

        & .upaep__tab-item:hover a,
        & .upaep__tab-item:hover {
            padding: var(--upaep-tab-tabitem-hover-padding);
            font-size: var(--upaep-tab-tabitem-hover-fz);
            font-weight: var(--upaep-tab-tabitem-hover-fw);
            color: var(--upaep-tab-tabitem-hover-color);
            border-radius: var(--upaep-tab-tabitem-hover-border-radius);
            background: var(--upaep-tab-tabitem-hover-bg);
        }

        & .upaep__tab-item.is-active:hover a,
        & .upaep__tab-item.is-active:hover {
            padding: var(--upaep-tab-tabitem-active-hover-padding);
            font-size: var(--upaep-tab-tabitem-active-hover-fz);
            font-weight: var(--upaep-tab-tabitem-active-hover-fw);
            color: var(--upaep-tab-tabitem-active-hover-color);
            border-radius: var(--upaep-tab-tabitem-active-hover-border-radius);
            background: var(--upaep-tab-tabitem-active-hover-bg);
        }
    }

    & .upaep__tabs-item {
        width: 100%;
        display: flex;
        justify-content: var(--upaep-tab-tabsitem-justify);
        align-items: center;
    }

    & .upaep__tabs-content {
        width: var(--upaep-tab-tabscontent-width);
        height: var(--upaep-tab-tabscontent-height);
        padding: var(--upaep-tab-tabscontent-padding);
        margin: var(--upaep-tab-tabscontent-margin);
        background: var(--upaep-tab-tabscontent-bg);
        border-radius: var(--upaep-tab-tabscontent-border-radius);
        box-shadow: var(--upaep-tab-tabscontent-boxshadow);

        & .upaep__tab-content {
            width: var(--upaep-tab-tabcontent-width);
            height: var(--upaep-tab-tabcontent-height);
            padding: var(--upaep-tab-tabcontent-padding);
            margin: var(--upaep-tab-tabcontent-margin);
            background: var(--upaep-tab-tabcontent-bg);
            border-radius: var(--upaep-tab-tabcontent-border-radius);
            animation: a_fadeIn 1.5s;

            &:not(.is-active) {
                display: none;
            }
        }

        &.__second {
            width: var(--upaep-tab-tabscontent-second-width);
            height: var(--upaep-tab-tabscontent-second-height);
            padding: var(--upaep-tab-tabscontent-second-padding);
            margin: var(--upaep-tab-tabsconten-secondt-margin);
            background: var(--upaep-tab-tabscontent-second-bg);
            border-radius: var(--upaep-tab-tabscontent-second-border-radius);
            box-shadow: var(--upaep-tab-tabscontent-second-boxshadow);

            & .upaep__tab-content.__second:not(.is-active) {
                display: none;
            }

            & .upaep__tab-content.__second {
                width: var(--upaep-tab-tabcontent-second-width);
                height: var(--upaep-tab-tabcontent-second-height);
                padding: var(--upaep-tab-tabcontent-second-padding);
                margin: var(--upaep-tab-tabcontent-second-margin);
                background: var(--upaep-tab-tabcontent-second-bg);
                border-radius: var(--upaep-tab-tabcontent-second-border-radius);
                animation: a_fadeIn 1.5s;
            }
        }

    }

    & .upaep__tab-img {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &.__vertical {
        display: flex;
        --upaep-tab-tabitem-width: 100%;
        --upaep-tab-tabitem-border-radius: 0;
        --upaep-tab-tabitem-hover-border-radius: 0;
        --upaep-tab-tabitem-active-border-radius: 0;
        --upaep-tab-tabsitem-justify: start;

        .upaep__tabs {
            border-bottom: none;
            border-right: var(--upaep-tab-tabs-border-bottom-size) var(--upaep-tab-tabs-border-bottom-style) var(--upaep-tab-tabs-border-bottom-color);
            align-items: start;

            .upaep__tab-item a:first-child,
            .upaep__tab-item:first-child {
                --upaep-tab-tabitem-border-radius: 10px 10px 0 0;
                --upaep-tab-tabitem-hover-border-radius: 10px 10px 0 0;
                --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
            }

            .upaep__tab-item a:last-child,
            .upaep__tab-item:last-child {
                --upaep-tab-tabitem-border-radius: 0 0 10px 10px;
                --upaep-tab-tabitem-hover-border-radius: 0 0 10px 10px;
                --upaep-tab-tabitem-active-border-radius: 0 0 10px 10px;
            }
        }

        .upaep__tabs-item {
            flex-direction: column;
            height: 100%;
        }
    }

    &.__space-balance {
        .upaep__tabs {

            .upaep__tab-item a,
            .upaep__tab-item {
                flex: 1 0 0;
            }
        }
    }

    &.tabs-indicator {
        --upaep-tab-tabitem-bg: none;
        --upaep-tab-tabitem-active-bg: none;
        --upaep-tab-tabitem-active-hover-bg: none;
        --upaep-tab-tabitem-underline-color: none;
        --upaep-tab-indicator: var(--upaep-color-red);

        .upaep__tab-item a,
        .upaep__tab-item {
            z-index: 2;
            transition: all 0.5s;

            &.__indicator {
                position: absolute;
                inset: 0;
                background: var(--upaep-tab-indicator);
                z-index: 1;
            }
        }
    }
}

.upaep__tab.__left {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: start;
}

.upaep__tab.__center {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: center;
}

.upaep__tab.__right {
    --upaep-tab-tabs-justify: space-around;
    --upaep-tab-tabsitem-justify: end;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item,
.upaep__tab.__center .upaep__tabs .upaep__tab-item,
.upaep__tab.__right .upaep__tabs .upaep__tab-item {
    --upaep-tab-tabitem-border-radius: 0;
    --upaep-tab-tabitem-active-border-radius: 10px 10px 0 0;
    --upaep-tab-tabitem-hover-border-radius: 0;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item:first-child,
.upaep__tab.__center .upaep__tabs .upaep__tab-item:first-child,
.upaep__tab.__right .upaep__tabs .upaep__tab-item:first-child {
    --upaep-tab-tabitem-border-radius: 10px 0 0 0;
    --upaep-tab-tabitem-active-border-radius: 10px 0 0 0;
    --upaep-tab-tabitem-hover-border-radius: 10px 0 0 0;
}

.upaep__tab.__left .upaep__tabs .upaep__tab-item:last-child,
.upaep__tab.__center .upaep__tabs .upaep__tab-item:last-child,
.upaep__tab.__right .upaep__tabs .upaep__tab-item:last-child {
    --upaep-tab-tabitem-border-radius: 0 10px 0 0;
    --upaep-tab-tabitem-active-border-radius: 0 10px 0 0;
    --upaep-tab-tabitem-hover-border-radius: 0 10px 0 0;
}

.upaep__tab.tab-underline,
.upaep__tab.__underline {
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-white);
    --upaep-tab-tabitem-color: var(--upaep-color-black);
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-hover-bg: none;
}

.upaep__tab.tab-line {
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-white);
    --upaep-tab-tabitem-color: var(--upaep-color-black);
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-hover-bg: none;
}

.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item::before {
    width: var(--upaep-tab-tabitem-underline-width);
    height: var(--upaep-tab-tabitem-underline-height);
    background: var(--upaep-tab-tabitem-underline-color);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom center;
    transition: transform .25s ease-out;
    z-index: 5;
}

.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item.is-active::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item.is-active::before,
.upaep__tab.tab-underline .upaep__tabs .upaep__tab-item:hover::before,
.upaep__tab.__underline .upaep__tabs .upaep__tab-item:hover::before {
    transform: scaleX(1);
    transform-origin: bottom center;
}

.upaep__tab.tab-line .upaep__tab-line,
.upaep__tab.__line .upaep__tab-line {
    width: 90px;
    height: 5px;
    background-color: var(--upaep-color-red);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    transition: all .3s ease;
    margin: 0 0 5px;
}

.upaep__tab.tab-content-second,
.upaep__tab.__content-second {
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-white);
    --upaep-tab-tabitem-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-bg: none;
    --upaep-tab-tabitem-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-bg: none;
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-red);
    --upaep-tab-tabitem-active-hover-bg: none;
}

.tab-overlay {
    width: 100%;
    height: 100%;
    position: relative;
}

.tab-overlay-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upaep__tab.__dragger {
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-white);
    --upaep-tab-tabitem-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabitem-bg: none;
    --upaep-tab-tabitem-active-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-bg: var(--upaep-color-red);
    --upaep-tab-tabitem-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-hover-bg: var(--upaep-color-red);
    --upaep-tab-tabitem-active-hover-color: var(--upaep-color-white);
    --upaep-tab-tabitem-active-hover-bg: var(--upaep-color-red);
    --upaep-tab-tabs-border-bottom-color: var(--upaep-color-red);
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-next {
    background: linear-gradient(to left, var(--upaep-color-white) 50%, transparent);
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-prev {
    background: linear-gradient(to right, var(--upaep-color-white) 50%, transparent);
}

.upaep__tab.__dragger .upaep__tabs .upaep__tabs-prev,
.upaep__tab.__dragger .upaep__tabs .upaep__tabs-next {
    align-items: center;
    display: flex;
    flex: 0 1 50px;
    justify-content: center;
    min-width: 50px;
    cursor: pointer;
    border-radius: 10px;
}

.upaep__tab.__dragger .upaep__tab-prev:hover::before {
    opacity: 1;
}

.upaep__tab.__dragger .upaep__tab-prev::before {
    font-family: var(--upaep-ff-fontawesome);
    content: "\f137";
    color: var(--upaep-color-red);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    pointer-events: auto;
    opacity: .5;
    font-size: var(--upaep-fz22);
}

.upaep__tab.__dragger .upaep__tab-next:hover::before {
    opacity: 1;
}

.upaep__tab.__dragger .upaep__tab-next::before {
    font-family: var(--upaep-ff-fontawesome);
    content: "\f138";
    color: var(--upaep-color-red);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    pointer-events: auto;
    opacity: 0.5;
    font-size: var(--upaep-fz22);
}

.upaep__tab.__dragger .upaep__tabs-prev:not(.is-active) {
    animation: fade_out .5s forwards;
}

.upaep__tab.__dragger .upaep__tabs-next:not(.is-active) {
    animation: fade_out .5s forwards;
}

.upaep__tab.__dragger .upaep__tabs-item {
    contain: content;
    display: flex;
    align-items: end;
    flex: 1 1 auto;
    overflow: hidden;
    gap: 5px;
    cursor: grab;
    height: auto;
}

.upaep__tab.__dragger .upaep__tabs-item.is-dragging {
    cursor: grabbing;
}

@keyframes fade_in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade_out {
    to {
        display: none;
        opacity: 0;
    }
}

.upaep__tab.__trinity {
    --upaep-tab-padding: 0;
    --upaep-tab-margin: 2rem 0;
    --upaep-tab-boxshadow: var(--upaep-box-shadow);
    --upaep-tab-tabs-margin: 0;
    --upaep-tab-tabsitem-justify: space-between;
    --upaep-tab-tabitem-bg: #E1E1E1;
    --upaep-tab-tabitem-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabitem-border-radius: 0;
    --upaep-tab-tabitem-hover-bg: #C1C1C1;
    --upaep-tab-tabitem-hover-color: var(--upaep-color-dark-grey);
    --upaep-tab-tabcontent-padding: 1.5rem 0;

    .upaep__tabs-item {
        border-radius: 10px 10px 0 0;
        background: #E1E1E1;
        align-items: normal;
    }

    .upaep__tab-item {
        flex: 1 0 0;
        text-align: center;

        &:not(:first-child):not(:last-child) {
            --upaep-tab-tabitem-active-border-radius: 0;
            --upaep-tab-tabitem-hover-border-radius: 0;
            --upaep-tab-tabitem-active-hover-border-radius: 0;
        }

        &:is(:first-child) {
            --upaep-tab-tabitem-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-active-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-hover-border-radius: 10px 0 0 0;
            --upaep-tab-tabitem-active-hover-border-radius: 10px 0 0 0;
        }

        &:is(:last-child) {
            --upaep-tab-tabitem-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-active-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-hover-border-radius: 0 10px 0 0;
            --upaep-tab-tabitem-active-hover-border-radius: 0 10px 0 0;
        }
    }
}

/*? ------ Menu ------ */
.upaep__menu {
    --upaep-menu-width: 100%;
    --upaep-menu-height: auto;
    --upaep-menu-padding: 0;
    --upaep-menu-margin: 0;
    --upaep-menu-bg: transparent;
    --upaep-menu-items-width: 100%;
    --upaep-menu-items-padding: 0 3rem;
    --upaep-menu-list-width: 25%;
    --upaep-menu-list-padding: 0;
    --upaep-menu-list-item-fz: var(--upaep-fz24);
    --upaep-menu-list-item-fw: var(--upaep-fw-regular);
    --upaep-menu-list-item-color: var(--upaep-color-black);
    --upaep-menu-list-item-margin: 1rem .5rem;
    --upaep-menu-list-item-padding: 0;
    --upaep-menu-list-item-width: auto;
    --upaep-menu-list-item-active-fz: var(--upaep-fz24);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--upaep-color-dark-grey);
    --upaep-menu-list-item-active-margin: 1rem .5rem;
    --upaep-menu-list-item-active-padding: 0;
    --upaep-menu-list-item-active-width: auto;
    --upaep-menu-list-item-hover-fz: var(--upaep-fz24);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--upaep-color-red);
    --upaep-menu-list-item-hover-margin: 1rem .5rem;
    --upaep-menu-list-item-hover-padding: 0;
    --upaep-menu-list-item-hover-width: auto;
    --upaep-menu-list-item-mark-content: '\f054';
    --upaep-menu-list-item-mark-ff: var(--upaep-ff-fontawesome);
    --upaep-menu-list-item-mark-fz: var(--upaep-fz18);
    --upaep-menu-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-mark-color: var(--upaep-color-red);
    --upaep-menu-list-item-mark-margin: 0 5px;
    --upaep-menu-content-width: 75%;
    --upaep-menu-content-height: auto;
    --upaep-menu-content-padding: 1rem;
    --upaep-menu-content-border-left-size: 2px;
    --upaep-menu-content-border-left-style: solid;
    --upaep-menu-content-border-left-color: var(--upaep-color-red);
    --upaep-submenu-list-width: 100%;
    --upaep-submenu-list-padding: 0;
    --upaep-submenu-list-width: 30%;
    --upaep-submenu-list-height: auto;
    --upaep-submenu-list-padding: 0;
    --upaep-submenu-list-item-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-fw: var(--upaep-fw-regular);
    --upaep-submenu-list-item-color: var(--upaep-color-black);
    --upaep-submenu-list-item-margin: 1rem 0;
    --upaep-submenu-list-item-padding: 0;
    --upaep-submenu-list-item-width: auto;
    --upaep-submenu-list-item-active-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-active-color: var(--upaep-color-red);
    --upaep-submenu-list-item-active-margin: 1rem 0;
    --upaep-submenu-list-item-active-padding: 0;
    --upaep-submenu-list-item-active-width: auto;
    --upaep-submenu-list-item-hover-fz: var(--upaep-fz20);
    --upaep-submenu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-hover-color: var(--upaep-color-red);
    --upaep-submenu-list-item-hover-margin: 1rem 0;
    --upaep-submenu-list-item-hover-padding: 0;
    --upaep-submenu-list-item-hover-width: auto;
    --upaep-submenu-list-item-mark-content: '\f054';
    --upaep-submenu-list-item-mark-ff: var(--upaep-ff-fontawesome);
    --upaep-submenu-list-item-mark-fz: var(--upaep-fz18);
    --upaep-submenu-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-submenu-list-item-mark-color: var(--upaep-color-red);
    --upaep-submenu-list-item-mark-margin: 0 5px;
    --upaep-submenu-content-width: 70%;
    --upaep-submenu-content-height: auto;
    --upaep-submenu-content-padding: 0;
    width: var(--upaep-menu-width);
    height: var(--upaep-menu-height);
    padding: var(--upaep-menu-padding);
    margin: var(--upaep-menu-margin);
    background: var(--upaep-menu-bg);

    & .upaep__menu-desktop,
    & .upaep__menu__desktop,
    & .upaep__menu-mobile,
    & .upaep__menu__mobile {
        width: 100%;
        height: auto;
    }

    & .upaep__menu-items {
        width: var(--upaep-menu-items-width);
        padding: var(--upaep-menu-items-padding);
        display: flex;

        & .upaep__menu-list {
            width: var(--upaep-menu-list-width);
            padding: var(--upaep-menu-list-padding);

            & .upaep__menu-list-item {
                display: flex;

                & a {
                    font-size: var(--upaep-menu-list-item-fz);
                    font-weight: var(--upaep-menu-list-item-fw);
                    color: var(--upaep-menu-list-item-color);
                    margin: var(--upaep-menu-list-item-margin);
                    padding: var(--upaep-menu-list-item-padding);
                    width: var(--upaep-menu-list-item-width);
                    text-decoration: none;
                    cursor: pointer;
                    position: relative;

                    &::before {
                        content: var(--upaep-menu-list-item-mark-content);
                        font-family: var(--upaep-menu-list-item-mark-ff);
                        font-size: var(--upaep-menu-list-item-mark-fz);
                        font-weight: var(--upaep-menu-list-item-mark-fw);
                        color: var(--upaep-menu-list-item-mark-color);
                        margin: var(--upaep-menu-list-item-mark-margin);
                    }
                }

                &.is-active a {
                    font-size: var(--upaep-menu-list-item-active-fz);
                    font-weight: var(--upaep-menu-list-item-active-fw);
                    color: var(--upaep-menu-list-item-active-color);
                    margin: var(--upaep-menu-list-item-active-margin);
                    padding: var(--upaep-menu-list-item-active-padding);
                    width: var(--upaep-menu-list-item-active-width);
                }

                &:not(.is-active) a:hover {
                    font-size: var(--upaep-menu-list-item-hover-fz);
                    font-weight: var(--upaep-menu-list-item-hover-fw);
                    color: var(--upaep-menu-list-item-hover-color);
                    margin: var(--upaep-menu-list-item-hover-margin);
                    padding: var(--upaep-menu-list-item-hover-padding);
                    width: var(--upaep-menu-list-item-hover-width);
                }

                &.__link a::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 1%;
                    height: 2px;
                    width: 100%;
                    transform: scaleX(0);
                    background-color: var(--upaep-color-red);
                    transform-origin: bottom center;
                    transition: transform .25s ease-out;
                    z-index: 5;
                }

                &.__link a:hover::after {
                    transform: scaleX(1);
                }
            }
        }

        & .upaep__menu-content {
            width: var(--upaep-menu-content-width);
            height: var(--upaep-menu-content-height);
            padding: var(--upaep-menu-content-padding);
            border-left: var(--upaep-menu-content-border-left-size) var(--upaep-menu-content-border-left-style) var(--upaep-menu-content-border-left-color);
        }
    }

    & .upaep__menu-item:not(.is-active) {
        display: none;
    }

    & .upaep__submenu-item {
        display: flex;

        &:not(.is-active) {
            display: none;
        }

        & .upaep__submenu-list {
            width: var(--upaep-submenu-list-width);
            padding: var(--upaep-submenu-list-padding);

            & .upaep__submenu-list-item {
                width: var(--upaep-submenu--item-width);
                height: var(--upaep-submenu-list-item-height);
                padding: var(--upaep-submenu-list-item-padding);
                display: flex;

                & a {
                    font-size: var(--upaep-submenu-list-item-fz);
                    font-weight: var(--upaep-submenu-list-item-fw);
                    color: var(--upaep-submenu-list-item-color);
                    margin: var(--upaep-submenu-list-item-margin);
                    padding: var(--upaep-submenu-list-item-padding);
                    width: var(--upaep-submenu-list-item-width);
                    text-decoration: none;
                    cursor: pointer;
                    position: relative;

                    &::before {
                        content: var(--upaep-submenu-list-item-mark-content);
                        font-family: var(--upaep-submenu-list-item-mark-ff);
                        font-size: var(--upaep-submenu-list-item-mark-fz);
                        font-weight: var(--upaep-submenu-list-item-mark-fw);
                        color: var(--upaep-submenu-list-item-mark-color);
                        margin: var(--upaep-submenu-list-item-mark-margin);
                    }
                }

                &.is-active a {
                    font-size: var(--upaep-submenu-list-item-active-fz);
                    font-weight: var(--upaep-submenu-list-item-active-fw);
                    color: var(--upaep-submenu-list-item-active-color);
                    margin: var(--upaep-submenu-list-item-active-margin);
                    padding: var(--upaep-submenu-list-item-active-padding);
                    width: var(--upaep-submenu-list-item-active-width);
                }

                &:not(.is-active) a:hover {
                    font-size: var(--upaep-submenu-list-item-hover-fz);
                    font-weight: var(--upaep-submenu-list-item-hover-fw);
                    color: var(--upaep-submenu-list-item-hover-color);
                    margin: var(--upaep-submenu-list-item-hover-margin);
                    padding: var(--upaep-submenu-list-item-hover-padding);
                    width: var(--upaep-submenu-list-item-hover-width);
                }

                &.__link a::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 1%;
                    height: 2px;
                    width: 100%;
                    transform: scaleX(0);
                    background-color: var(--upaep-color-red);
                    transform-origin: bottom center;
                    transition: transform .25s ease-out;
                    z-index: 5;
                }

                &.__link a:hover::after {
                    transform: scaleX(1);
                }
            }
        }

        & .upaep__submenu-content {
            width: var(--upaep-submenu-content-width);
            height: var(--upaep-submenu-content-height);
            padding: var(--upaep-submenu-content-padding);
        }

    }

    .upaep__accordion_header.__input a,
    div#busqueda a {
        display: none;
    }

    .menu-search {
        width: 100%;
    }

    .menu-search--movil {

        &>div {
            width: 300px !important;
        }

        &>div>div {
            padding: 0px;
            width: 100% !important;
        }
    }


    .menu_principal_temporal {
        display: block;
        padding: 40px;
        list-style: disc;

        .list-unstyled {
            padding: revert;
            list-style: circle;
        }

        a {
            color: #020202;
            font-size: 18px;
        }
    }

    .menu-search {
        .gsc-input {
            padding: 0 !important;
        }

        .gsc-input-box {
            border-radius: 25px 0 0 25px;
            height: 35px;

            td {
                height: 100%;
            }
        }

        .gsc-search-button-v2 {
            height: 35px;
            border-radius: 0 25px 25px 0;
            padding: 10px 15px;
        }

        .gsc-clear-button {
            display: none;
        }
    }


    .menu-search--movil {
        .gsc-input {
            padding: 0 !important;
        }

        .gsc-input-box {
            border-radius: 25px 0 0 25px;
            height: 35px;

            td {
                height: 100%;
            }
        }

        .gsc-search-button-v2 {
            height: 35px;
            border-radius: 0 25px 25px 0;
            padding: 10px 15px;
        }

        .gsc-clear-button {
            display: none;
        }
    }

}


.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__secondary a {
    --upaep-menu-list-item-fz: var(--upaep-fz14);
    --upaep-menu-list-item-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-margin: .5rem;
    --upaep-menu-list-item-padding: 0 .5rem;
    --upaep-menu-list-item-active-fz: var(--upaep-fz14);
    --upaep-menu-list-item-active-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-active-margin: .5rem;
    --upaep-menu-list-item-active-padding: 0 .5rem;
    --upaep-menu-list-item-hover-fz: var(--upaep-fz14);
    --upaep-menu-list-item-hover-mark-fz: var(--upaep-fz14);
    --upaep-menu-list-item-hover-margin: .5rem;
    --upaep-menu-list-item-hover-padding: 0 .5rem;
}

.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__title a {
    --upaep-menu-list-item-fz: var(--upaep-fz30);
    --upaep-menu-list-item-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-color: var(--upaep-color-white);
    --upaep-menu-list-item-active-fz: var(--upaep-fz30);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--upaep-color-white);
    --upaep-menu-list-item-hover-fz: var(--upaep-fz30);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--upaep-color-white);
    --upaep-menu-list-item-mark-content: '';
    --upaep-menu-list-item-mark-margin: 0;
    cursor: auto;
    border-bottom: 2px solid var(--upaep-color-red);
}

.upaep__menu .upaep__menu-items .upaep__menu-list .upaep__menu-list-item.__subtitle a {
    --upaep-menu-list-item-fz: var(--upaep-fz18);
    --upaep-menu-list-item-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-color: var(--upaep-color-red);
    --upaep-menu-list-item-padding: var(0 1rem);
    --upaep-menu-list-item-active-fz: var(--upaep-fz18);
    --upaep-menu-list-item-active-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-active-color: var(--upaep-color-red);
    --upaep-menu-list-item-active-padding: var(0 1rem);
    --upaep-menu-list-item-hover-fz: var(--upaep-fz18);
    --upaep-menu-list-item-hover-fw: var(--upaep-fw-bold);
    --upaep-menu-list-item-hover-color: var(--upaep-color-red);
    --upaep-menu-list-item-hover-padding: var(0 1rem);
    --upaep-menu-list-item-mark-content: '';
    --upaep-menu-list-item-mark-margin: 0;
    cursor: auto;
}

/*? ------ Breadcrumb ------ */
.upaep__breadcrumb {
    --upaep-breadcrumb-width: auto;
    --upaep-breadcrumb-height: auto;
    --upaep-breadcrumb-padding: .5rem;
    --upaep-breadcrumb-margin: 0 5px;
    --upaep-breadcrumb-bg: var(--upaep-color-white);
    --upaep-breadcrumb-border-size: 0;
    --upaep-breadcrumb-border-style: solid;
    --upaep-breadcrumb-border-color: transparent;
    --upaep-breadcrumb-border-radius: 0;
    --upaep-breadcrumb-item-fz: var(--upaep-fz16);
    --upaep-breadcrumb-item-fw: var(--upaep-fw-regular);
    --upaep-breadcrumb-item-color: var(--upaep-color-black);
    --upaep-breadcrumb-item-margin: 0 5px;
    --upaep-breadcrumb-item-padding: 0;
    --upaep-breadcrumb-item-active-fz: var(--upaep-fz16);
    --upaep-breadcrumb-item-active-fw: var(--upaep-fw-bold);
    --upaep-breadcrumb-item-active-color: var(--upaep-color-black);
    --upaep-breadcrumb-divider: "\f105";
    --upaep-breadcrumb-divider-ff: var(--upaep-ff-fontawesome);
    --upaep-breadcrumb-divider-fz: var(--upaep-fz16);
    --upaep-breadcrumb-divider-fw: var(--upaep-fw-medium);
    --upaep-breadcrumb-divider-color: var(--upaep-color-red);

    & .upaep__breadcrumb-content {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 5px;
        width: var(--upaep-breadcrumb-width);
        height: var(--upaep-breadcrumb-height);
        padding: var(--upaep-breadcrumb-padding);
        margin: var(--upaep-breadcrumb-margin);
        background: var(--upaep-breadcrumb-bg);
        border: var(--upaep-breadcrumb-border-size) var(--upaep-breadcrumb-border-style) var(--upaep-breadcrumb-border-color);
        border-radius: var(--upaep-breadcrumb-border-radius);
    }

    & .upaep__breadcrumb-item+.upaep__breadcrumb-item::before {
        content: var(--upaep-breadcrumb-divider);
        font-family: var(--upaep-breadcrumb-divider-ff);
        font-size: var(--upaep-breadcrumb-divider-fz);
        font-weight: var(--upaep-breadcrumb-divider-fw);
        color: var(--upaep-breadcrumb-divider-color);
        margin-right: 10px;
    }

    & .upaep__breadcrumb-item * {
        font-size: var(--upaep-breadcrumb-item-fz);
        font-weight: var(--upaep-breadcrumb-item-fw);
        color: var(--upaep-breadcrumb-item-color);
        margin: var(--upaep-breadcrumb-item-margin);
        padding: var(--upaep-breadcrumb-item-padding);
        cursor: pointer;
        text-decoration: none;
    }

    & .upaep__breadcrumb-item.is-active * {
        font-size: var(--upaep-breadcrumb-item-active-fz);
        font-weight: var(--upaep-breadcrumb-item-active-fw);
        color: var(--upaep-breadcrumb-item-active-color);
    }
}

/*? ------ Progressbar ------ */
.upaep__progressbar,
.upaep__progressbar-stacked {
    --upaep-progressbar-height: 1rem;
    --upaep-progressbar-font-size: 0.75rem;
    --upaep-progressbar-bg: var(--upaep-color-tenue-gray);
    --upaep-progressbar-border-size: ;
    --upaep-progressbar-border-style: ;
    --upaep-progressbar-border-color: ;
    --upaep-progressbar-border-radius: 8px;
    --upaep-progressbar-content-width: ;
    --upaep-progressbar-content-border-radius: ;
    --upaep-progressbar-content-fz: var(--upaep-fz14);
    --upaep-progressbar-content-fw: var(--upaep-fw-bold);
    --upaep-progressbar-content-color: var(--upaep-color-white);
    --upaep-progressbar-content-bg: var(--upaep-color-red);
    --upaep-progressbar-content-transition: width 0.6s ease;
    --upaep-progressbar-circle-width: 20px;
    --upaep-progressbar-circle-height: 20px;
    --upaep-progressbar-circle-color: var(--upaep-color-red);
    height: var(--upaep-progressbar-height);
    font-size: var(--upaep-progressbar-font-size);
    background-color: var(--upaep-progressbar-bg);
    border: var(--upaep-progressbar-border-size) var(--upaep-progressbar-border-style) var(--upaep-progressbar-border-color);
    border-radius: var(--upaep-progressbar-border-radius);
    display: flex;
    overflow: hidden;


    &.__striped {
        .upaep__progressbar-content {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: var(--upaep-progressbar-height) var(--upaep-progressbar-height);
        }
    }

    &.__animated-striped {
        .upaep__progressbar-content {
            animation: 1s linear infinite a_progressbar;
        }
    }

    .upaep__progressbar-content {
        width: var(--upaep-progressbar-content-width);
        border-radius: var(--upaep-progressbar-content-border-radius);
        font-size: var(--upaep-progressbar-content-fz);
        font-weight: var(--upaep-progressbar-content-fw);
        color: var(--upaep-progressbar-content-color);
        background-color: var(--upaep-progressbar-content-bg);
        transition: var(--upaep-progressbar-content-transition);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        position: relative;
    }

    &.__simple {
        --upaep-progressbar-height: 10px;
        --upaep-progressbar-content-border-radius: var(--upaep-progressbar-border-radius);
        overflow: visible;

        .upaep__progressbar-content {
            overflow: visible;

            &::before {
                width: var(--upaep-progressbar-circle-width);
                height: var(--upaep-progressbar-circle-height);
                background: var(--upaep-progressbar-circle-color);
                content: "";
                position: absolute;
                right: -10px;
                border-radius: 50px;
            }
        }
    }
}

.upaep__progressbar-stacked {
    >.upaep__progressbar {
        transition: var(--upaep-progressbar-content-transition);
        overflow: visible;

        >.upaep__progressbar-content {
            width: 100%;
        }
    }
}

@keyframes a_progressbar {
    0% {
        background-position-x: 1rem;
    }
}

/*? ------ PtogressTracker ------ */
.upaep__progresstracker {
    --upaep-progresstracker-width: 100%;
    --upaep-progresstracker-height: auto;
    --upaep-progresstracker-margin: 1rem auto;
    --upaep-progresstracker-padding: 1rem;
    --upaep-progresstracker-bg: transparent;
    --upaep-progresstracker-border-size: 0;
    --upaep-progresstracker-border-style: solid;
    --upaep-progresstracker-border-color: var(--upaep-color-border-grey);
    --upaep-progresstracker-border-radius: 10px;
    --upaep-progresstracker-step-width: 30px;
    --upaep-progresstracker-step-height: 30px;
    --upaep-progresstracker-step-margin: 0;
    --upaep-progresstracker-step-padding: 0;
    --upaep-progresstracker-bar-order: 0;
    --upaep-progresstracker-bar-width: 0;
    --upaep-progresstracker-bar-height: 4px;
    --upaep-progresstracker-bar-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-bar-inset: 14px 24px auto;
    --upaep-progresstracker-bar-active-width: 0;
    --upaep-progresstracker-bar-active-height: 4px;
    --upaep-progresstracker-bar-active-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-bar-active-inset: 14px 24px auto;
    --upaep-progresstracker-bar-complete-width: 100%;
    --upaep-progresstracker-bar-complete-height: 4px;
    --upaep-progresstracker-bar-complete-bg: var(--upaep-color-red);
    --upaep-progresstracker-bar-complete-inset: 14px 24px auto;
    --upaep-progresstracker-mark-order: 1;
    --upaep-progresstracker-mark-width: 25px;
    --upaep-progresstracker-mark-height: 25px;
    --upaep-progresstracker-mark-padding: .5rem;
    --upaep-progresstracker-mark-margin: 0;
    --upaep-progresstracker-mark-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-border-size: 4px;
    --upaep-progresstracker-mark-border-style: solid;
    --upaep-progresstracker-mark-border-color: var(--upaep-color-border-grey);
    --upaep-progresstracker-mark-border-radius: 50px;
    --upaep-progresstracker-mark-active-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-active-border-size: 5px;
    --upaep-progresstracker-mark-active-border-style: solid;
    --upaep-progresstracker-mark-active-border-color: var(--upaep-color-red);
    --upaep-progresstracker-mark-complete-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-complete-border-size: 5px;
    --upaep-progresstracker-mark-complete-border-style: solid;
    --upaep-progresstracker-mark-complete-border-color: var(--upaep-color-red);
    --upaep-progresstracker-line-width: 100%;
    --upaep-progresstracker-line-height: 4px;
    --upaep-progresstracker-line-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-line-inset: 10px -4px auto auto;
    --upaep-progresstracker-line-active-width: 100%;
    --upaep-progresstracker-line-active-height: 4px;
    --upaep-progresstracker-line-active-bg: var(--upaep-color-red);
    --upaep-progresstracker-line-active-inset: 10px -4px auto auto;
    --upaep-progresstracker-line-complete-width: 100%;
    --upaep-progresstracker-line-complete-height: 4px;
    --upaep-progresstracker-line-complete-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-line-complete-inset: 10px -4px auto auto;
    --upaep-progresstracker-texts-order: 2;
    --upaep-progresstracker-texts-bg: transparent;
    --upaep-progresstracker-title-fz: var(--upaep-fz16);
    --upaep-progresstracker-title-fw: var(--upaep-fw-bold);
    --upaep-progresstracker-title-color: var(--upaep-color-black);
    --upaep-progresstracker-title-padding: 0;
    --upaep-progresstracker-title-margin: 0;
    --upaep-progresstracker-title-align: start;
    --upaep-progresstracker-text-fz: var(--upaep-fz14);
    --upaep-progresstracker-text-fw: var(--upaep-fw-medium);
    --upaep-progresstracker-text-color: var(--upaep-color-black);
    --upaep-progresstracker-text-padding: 0;
    --upaep-progresstracker-text-margin: 0;
    --upaep-progresstracker-text-align: start;

    width: var(--upaep-progresstracker-width);
    height: var(--upaep-progresstracker-height);
    margin: var(--upaep-progresstracker-margin);
    padding: var(--upaep-progresstracker-padding);
    background: var(--upaep-progresstracker-bg);
    border: var(--upaep-progresstracker-border-size) var(--upaep-progresstracker-border-style) var(--upaep-progresstracker-border-color);
    border-radius: var(--upaep-progresstracker-border-radius);
    display: flex;
    list-style: none;

    & .upaep__progresstracker-step {
        flex: 1 1 0%;
        min-width: 24px;
        width: var(--upaep-progresstracker-step-width);
        height: var(--upaep-progresstracker-step-height);
        margin: var(--upaep-progresstracker-step-margin);
        padding: var(--upaep-progresstracker-step-padding);
        transition: all 1s;
        display: grid;

        &:last-child {
            flex-grow: 0;

            & .upaep__progresstracker-bar,
            & .upaep__progresstracker-mark::after {
                opacity: 0;
            }
        }

        & .upaep__progresstracker-bar {
            width: var(--upaep-progresstracker-bar-width);
            height: var(--upaep-progresstracker-bar-height);
            background: var(--upaep-progresstracker-bar-bg);
            inset: var(--upaep-progresstracker-bar-inset);
            order: var(--upaep-progresstracker-bar-order);
            position: relative;
            z-index: 1;
            transition: all 2000ms linear 0s;
        }

        & .upaep__progresstracker-mark {
            display: block;
            position: relative;
            order: var(--upaep-progresstracker-mark-order);

            &::before {
                width: var(--upaep-progresstracker-mark-width);
                height: var(--upaep-progresstracker-mark-height);
                padding: var(--upaep-progresstracker-mark-padding);
                margin: var(--upaep-progresstracker-mark-margin);
                background: var(--upaep-progresstracker-mark-bg);
                border: var(--upaep-progresstracker-mark-border-size) var(--upaep-progresstracker-mark-border-style) var(--upaep-progresstracker-mark-border-color);
                border-radius: var(--upaep-progresstracker-mark-border-radius);
                content: attr(data-text);
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                z-index: 20;
                transition: background .3s, border .3s;
            }

            &[data-text]::before {
                --upaep-progresstracker-mark-width: 25px;
                --upaep-progresstracker-mark-height: 25px;
                --upaep-progresstracker-mark-padding: .6rem;
                --upaep-progresstracker-mark-border-size: 3px;
                font-weight: var(--upaep-fw-bold);
                font-size: var(--upaep-fz14);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &::after {
                width: var(--upaep-progresstracker-line-width);
                height: var(--upaep-progresstracker-line-height);
                background: var(--upaep-progresstracker-line-bg);
                inset: var(--upaep-progresstracker-line-inset);
                content: "";
                display: block;
                position: absolute;
                transition: background 0.3s;
            }
        }

        & .upaep__progresstracker-texts {
            background: var(--upaep-progresstracker-texts-bg);
            order: var(--upaep-progresstracker-texts-order);
            display: block;
            padding: .5rem;
            text-overflow: ellipsis;

            & .upaep__progresstracker-title {
                font-size: var(--upaep-progresstracker-title-fz);
                font-weight: var(--upaep-progresstracker-title-fw);
                color: var(--upaep-progresstracker-title-color);
                padding: var(--upaep-progresstracker-title-padding);
                margin: var(--upaep-progresstracker-title-margin);
                text-align: var(--upaep-progresstracker-title-align);
            }

            & .upaep__progresstracker-text {
                font-size: var(--upaep-progresstracker-text-fz);
                font-weight: var(--upaep-progresstracker-text-fw);
                color: var(--upaep-progresstracker-text-color);
                padding: var(--upaep-progresstracker-text-padding);
                margin: var(--upaep-progresstracker-text-margin);
                text-align: var(--upaep-progresstracker-text-align);
            }
        }

        &.is-active,
        &.is-progress {
            & .upaep__progresstracker-mark::after {
                width: var(--upaep-progresstracker-line-active-width);
                height: var(--upaep-progresstracker-line-active-height);
                background: var(--upaep-progresstracker-line-active-bg);
                inset: var(--upaep-progresstracker-line-active-inset);
            }

            & .upaep__progresstracker-bar {
                width: var(--upaep-progresstracker-bar-active-width);
                height: var(--upaep-progresstracker-bar-active-height);
                background: var(--upaep-progresstracker-bar-active-bg);
                inset: var(--upaep-progresstracker-bar-active-inset);
            }

            & .upaep__progresstracker-mark::before {
                background: var(--upaep-progresstracker-mark-active-bg);
                border: var(--upaep-progresstracker-mark-active-border-size) var(--upaep-progresstracker-mark-active-border-style) var(--upaep-progresstracker-mark-active-border-color);
                animation: markeractive 1s;
            }
        }

        &.is-complete {
            & .upaep__progresstracker-mark::after {
                width: var(--upaep-progresstracker-line-complete-width);
                height: var(--upaep-progresstracker-line-complete-height);
                background: var(--upaep-progresstracker-line-complete-bg);
                inset: var(--upaep-progresstracker-line-complete-inset);
            }

            & .upaep__progresstracker-mark::before {
                background: var(--upaep-progresstracker-mark-complete-bg);
                border: var(--upaep-progresstracker-mark-complete-border-size) var(--upaep-progresstracker-mark-complete-border-style) var(--upaep-progresstracker-mark-complete-border-color);
                animation: markercomplete 1s;
            }

            & .upaep__progresstracker-bar {
                width: var(--upaep-progresstracker-bar-complete-width);
                height: var(--upaep-progresstracker-bar-complete-height);
                background: var(--upaep-progresstracker-bar-complete-bg);
                inset: var(--upaep-progresstracker-bar-complete-inset);
            }
        }
    }

    &.__texts .upaep__progresstracker-step:last-child {
        flex-grow: 1;
    }
}

@keyframes markeractive {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes markercomplete {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.upaep__progresstracker.__vertical {
    flex-direction: column;
    --upaep-progresstracker-width: auto;
    --upaep-progresstracker-height: 100%;
    --upaep-progresstracker-step-width: auto;
    --upaep-progresstracker-mark-bg: var(--upaep-color-white);
    --upaep-progresstracker-line-width: 4px;
    --upaep-progresstracker-line-height: 100%;
    --upaep-progresstracker-line-inset: 22px auto auto 10px;
    --upaep-progresstracker-line-active-width: 4px;
    --upaep-progresstracker-line-active-height: 100%;
    --upaep-progresstracker-line-active-inset: 22px auto auto 10px;
    --upaep-progresstracker-line-complete-width: 4px;
    --upaep-progresstracker-line-complete-height: 100%;
    --upaep-progresstracker-line-complete-inset: 22px auto auto 10px;
    --upaep-progresstracker-bar-width: 4px;
    --upaep-progresstracker-bar-height: 0;
    --upaep-progresstracker-bar-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-bar-inset: 22px auto auto 14px;
    --upaep-progresstracker-bar-active-width: 4px;
    --upaep-progresstracker-bar-active-height: 0;
    --upaep-progresstracker-bar-active-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-bar-active-inset: 22px auto auto 14px;
    --upaep-progresstracker-bar-complete-width: 4px;
    --upaep-progresstracker-bar-complete-height: 95%;
    --upaep-progresstracker-bar-complete-bg: var(--upaep-color-red);
    --upaep-progresstracker-bar-complete-inset: 22px auto auto 14px;

    & .upaep__progresstracker-step {
        display: flex;
    }

    & .upaep__progresstracker-texts {
        padding: 0 .5rem .5rem .5rem;
    }
}

.upaep__progresstracker.__center:not(.__vertical) {
    --upaep-progresstracker-title-align: center;
    --upaep-progresstracker-text-align: center;
    --upaep-progresstracker-mark-margin: 0 auto;
    --upaep-progresstracker-line-inset: 10px -50% auto auto;
    --upaep-progresstracker-line-active-inset: 10px -50% auto auto;
    --upaep-progresstracker-line-complete-inset: 10px -50% auto auto;
    --upaep-progresstracker-bar-inset: 14px -50% auto auto;
    --upaep-progresstracker-bar-active-inset: 14px -50% auto auto;
    --upaep-progresstracker-bar-complete-inset: 14px -50% auto auto;
}

.upaep__progresstracker.__right:not(.__vertical) {
    --upaep-progresstracker-title-align: end;
    --upaep-progresstracker-text-align: end;
    --upaep-progresstracker-mark-margin: 0 0 0 auto;
    --upaep-progresstracker-line-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-line-active-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-line-complete-inset: 10px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-inset: 14px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-active-inset: 14px calc(-100% + 18px) auto auto;
    --upaep-progresstracker-bar-complete-inset: 14px calc(-100% + 18px) auto auto;
}

.upaep__progresstracker.__left:is(.__vertical) {
    --upaep-progresstracker-title-align: end;
    --upaep-progresstracker-text-align: end;
    --upaep-progresstracker-mark-margin: 0 0 0 auto;
}

.upaep__progresstracker.__left:is(.__vertical),
.upaep__progresstracker.__texts.__texts-top:not(.__vertical) {
    --upaep-progresstracker-bar-order: 1;
    --upaep-progresstracker-mark-order: 2;
    --upaep-progresstracker-texts-order: 0;
}

.upaep__progresstracker:is(.__inline) {
    --upaep-progresstracker-bar-order: 1;
    --upaep-progresstracker-mark-order: 2;
    --upaep-progresstracker-texts-order: 0;
    --upaep-progresstracker-texts-bg: var(--upaep-color-white);
}

.upaep__progresstracker.__inline .upaep__progresstracker-step,
.upaep__progresstracker.__inline .upaep__progresstracker-mark {
    display: flex;
    align-items: center;
}

.upaep__progresstracker.__inline .upaep__progresstracker-mark {
    flex-grow: 1;
}

.upaep__progresstracker.__inline .upaep__progresstracker-texts {
    position: relative;
    z-index: 30;
    max-width: 70%;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

.upaep__progresstracker.__trafficlight {
    --upaep-progresstracker-bg: transparent;
    --upaep-progresstracker-bar-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-bar-active-bg: var(--upaep-color-warning);
    --upaep-progresstracker-bar-complete-bg: var(--upaep-color-success);
    --upaep-progresstracker-mark-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-border-color: var(--upaep-color-border-grey);
    --upaep-progresstracker-mark-active-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-active-border-color: var(--upaep-color-warning);
    --upaep-progresstracker-mark-complete-bg: var(--upaep-color-white);
    --upaep-progresstracker-mark-complete-border-color: var(--upaep-color-success);
    --upaep-progresstracker-line-bg: var(--upaep-color-border-grey);
    --upaep-progresstracker-line-active-bg: var(--upaep-color-warning);
    --upaep-progresstracker-line-complete-bg: var(--upaep-color-warning);
    --upaep-progresstracker-title-color: var(--upaep-color-black);
    --upaep-progresstracker-text-color: var(--upaep-color-black);
}

/*? ------ Accordion ------ */
.upaep__accordion {
    --upaep-accordion-width: 100%;
    --upaep-accordion-height: auto;
    --upaep-accordion-margin: 0;
    --upaep-accordion-padding: 0;
    --upaep-accordion-bg: transparent;
    --upaep-accordion-item-width: 100%;
    --upaep-accordion-item-height: auto;
    --upaep-accordion-item-margin: 0;
    --upaep-accordion-item-padding: 0;
    --upaep-accordion-header-width: 100%;
    --upaep-accordion-header-height: 50px;
    --upaep-accordion-header-padding: 1rem;
    --upaep-accordion-header-border-radius: 0;
    --upaep-accordion-header-bg: var(--upaep-color-white);
    --upaep-accordion-header-fz: var(--upaep-fz16);
    --upaep-accordion-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-header-color: var(--upaep-color-black);
    --upaep-accordion-header-padding: 1rem;
    --upaep-accordion-header-border-size: 1px;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-header-border-bottom-size: 0;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-header-width: 100%;
    --upaep-accordion-active-header-height: 50px;
    --upaep-accordion-active-header-padding: 1rem;
    --upaep-accordion-active-header-border-radius: 10px 10px 0 0;
    --upaep-accordion-active-header-bg: var(--upaep-color-white);
    --upaep-accordion-active-header-fz: var(--upaep-fz16);
    --upaep-accordion-active-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-active-header-color: var(--upaep-color-black);
    --upaep-accordion-active-header-padding: 1rem;
    --upaep-accordion-active-header-border-size: 1px;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-header-border-bottom-size: 1px;
    --upaep-accordion-active-header-border-bottom-style: solid;
    --upaep-accordion-active-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDgwYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMyVjIyNEg0OGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMkgxOTJWNDMyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMjg4SDQwMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgyNTZWODB6Ii8+PC9zdmc+');
    --upaep-accordion-header-markinactive-width: 30px;
    --upaep-accordion-header-markinactive-height: 30px;
    --upaep-accordion-header-markinactive-bgsize: 20px;
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDMyIDI1NmMwIDE3LjctMTQuMyAzMi0zMiAzMkw0OCAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJsMzUyIDBjMTcuNyAwIDMyIDE0LjMgMzIgMzJ6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive-width: 30px;
    --upaep-accordion-header-markactive-height: 30px;
    --upaep-accordion-header-markactive-bgsize: 20px;
    --upaep-accordion-content-width: 100%;
    --upaep-accordion-content-height: 0;
    --upaep-accordion-content-padding: 0;
    --upaep-accordion-content-bg: var(--upaep-color-white);
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-content-border-bottom-size: 0;
    --upaep-accordion-content-border-bottom-style: solid;
    --upaep-accordion-content-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-accordion-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-active-content-padding: 0;
    --upaep-accordion-active-content-bg: var(--upaep-color-white);
    --upaep-accordion-active-content-border-size: 1px;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-content-border-bottom-size: 1px;
    --upaep-accordion-active-content-border-bottom-style: solid;
    --upaep-accordion-active-content-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-content-border-radius: 0 0 10px 10px;
    width: var(--upaep-accordion-width);
    height: var(--upaep-accordion-height);
    margin: var(--upaep-accordion-margin);
    padding: var(--upaep-accordion-padding);
    background: var(--upaep-accordion-bg);

    & .upaep__accordion_item,
    & .upaep__accordion-item {
        width: var(--upaep-accordion-item-width);
        height: var(--upaep-accordion-item-height);
        margin: var(--upaep-accordion-item-margin);
        padding: var(--upaep-accordion-item-padding);

        &.is-active {

            >.upaep__accordion_header,
            >.upaep__accordion-header {
                width: var(--upaep-accordion-active-header-width);
                height: var(--upaep-accordion-active-header-height);
                padding: var(--upaep-accordion-active-header-padding);
                background: var(--upaep-accordion-active-header-bg);
                border-radius: var(--upaep-accordion-active-header-border-radius);
                border: var(--upaep-accordion-active-header-border-size) var(--upaep-accordion-active-header-border-style) var(--upaep-accordion-active-header-border-color);
                border-bottom: var(--upaep-accordion-active-header-border-bottom-size) var(--upaep-accordion-active-header-border-bottom-style) var(--upaep-accordion-active-header-border-bottom-color);
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                transition: border-radius .5s ease-in;

                & a {
                    font-size: var(--upaep-accordion-active-header-fz);
                    font-weight: var(--upaep-accordion-active-header-fw);
                    color: var(--upaep-accordion-active-header-color);
                    padding: var(--upaep-accordion-active-header-padding);
                    text-decoration: none;
                }

                &::after {
                    content: '';
                    width: var(--upaep-accordion-header-markactive-width);
                    height: var(--upaep-accordion-header-markactive-height);
                    background-size: var(--upaep-accordion-header-markactive-bgsize);
                    background-image: var(--upaep-accordion-header-markactive);
                    background-repeat: no-repeat;
                    background-position: right center;
                    margin-left: auto;
                }

            }
        }

        &:not(.is-active) .upaep__accordion_header::after,
        &:not(.is-active) .upaep__accordion-header::after {
            content: '';
            width: var(--upaep-accordion-header-markinactive-width);
            height: var(--upaep-accordion-header-markinactive-height);
            background-size: var(--upaep-accordion-header-markinactive-bgsize);
            background-image: var(--upaep-accordion-header-markinactive);
            background-repeat: no-repeat;
            background-position: right center;
            margin-left: auto;
        }

        &.is-active .upaep__accordion_content.is-active {
            --upaep-accordion-content-height: auto;
            --upaep-accordion-content-padding: 1rem;
        }

        &:has(>.__link),
        &:has(>.__subtitle),
        &:has(>.__input) {
            --upaep-accordion-header-markinactive: ;
            --upaep-accordion-header-markactive: ;
        }
    }

    &:not(.__rounded) {

        & .upaep__accordion_item,
        & .upaep__accordion-item {
            &:not(:last-child) {
                border-bottom: var(--upaep-accordion-header-border-bottom-size) var(--upaep-accordion-header-border-bottom-style) var(--upaep-accordion-header-border-bottom-color);
            }
        }

        .upaep__accordion_item:first-child .upaep__accordion_header,
        .upaep__accordion-item:first-child .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 10px 10px 0 0;
            --upaep-accordion-active-content-border-radius: 0;
        }

        .upaep__accordion_item:last-child .upaep__accordion_header,
        .upaep__accordion-item:last-child .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 0 0 10px 10px;
            --upaep-accordion-active-content-border-radius: 0;
        }

        .upaep__accordion_item:not(:first-child):not(:last-child) .upaep__accordion_header,
        .upaep__accordion-item:not(:first-child):not(:last-child) .upaep__accordion-header {
            --upaep-accordion-header-border-radius: 0;
            --upaep-accordion-active-content-border-radius: 0;
        }
    }

    &.__rounded {

        & .upaep__accordion_item.is-active,
        & .upaep__accordion-item.is-active {
            &:not(:last-child) {
                border-bottom: var(--upaep-accordion-header-border-bottom-size) var(--upaep-accordion-header-border-bottom-style) var(--upaep-accordion-header-border-bottom-color);
                border-radius: 10px;
            }
        }
    }


    & .upaep__accordion_header,
    & .upaep__accordion-header {
        width: var(--upaep-accordion-header-width);
        height: var(--upaep-accordion-header-height);
        padding: var(--upaep-accordion-header-padding);
        background: var(--upaep-accordion-header-bg);
        border-radius: var(--upaep-accordion-header-border-radius);
        border: var(--upaep-accordion-header-border-size) var(--upaep-accordion-header-border-style) var(--upaep-accordion-header-border-color);
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: border-radius .5s ease-in;

        & a,
        & a:hover {
            font-size: var(--upaep-accordion-header-fz);
            font-weight: var(--upaep-accordion-header-fw);
            color: var(--upaep-accordion-header-color);
            padding: var(--upaep-accordion-header-padding);
            text-decoration: none;
        }

        &::after {
            content: '';
            width: var(--upaep-accordion-header-markinactive-width);
            height: var(--upaep-accordion-header-markinactive-height);
            background-size: var(--upaep-accordion-header-markinactive-bgsize);
            background-image: var(--upaep-accordion-header-markinactive);
            background-repeat: no-repeat;
            background-position: right center;
            margin-left: auto;
        }
    }

    & .upaep__accordion-content,
    & .upaep__accordion_content {
        width: var(--upaep-accordion-content-width);
        height: var(--upaep-accordion-content-height);
        padding: var(--upaep-accordion-content-padding);
        background: var(--upaep-accordion-content-bg);
        border: var(--upaep-accordion-content-border-size) var(--upaep-accordion-content-border-style) var(--upaep-accordion-content-border-color);
        border-bottom: var(--upaep-accordion-content-border-bottom-size) var(--upaep-accordion-content-border-bottom-style) var(--upaep-accordion-content-border-bottom-color);
        border-radius: var(--upaep-accordion-content-border-radius);
        overflow: hidden;
        transition: all .5s ease;

        &.is-active {
            background: var(--upaep-accordion-active-content-bg);
            border: var(--upaep-accordion-active-content-border-size) var(--upaep-accordion-active-content-border-style) var(--upaep-accordion-active-content-border-color);
            border-bottom: var(--upaep-accordion-active-content-border-bottom-size) var(--upaep-accordion-active-content-border-bottom-style) var(--upaep-accordion-active-content-border-bottom-color);
            border-radius: var(--upaep-accordion-active-content-border-radius);
            overflow: hidden;
            transition: all .5s ease;
        }

        &:not(.is-active) {
            --upaep-accordion-content-height: 0;
        }
    }
}

.upaep__accordion.__rounded {
    --upaep-accordion-item-margin: 1rem 0;
    --upaep-accordion-header-border-radius: 50px;
    --upaep-accordion-active-header-border-radius: 10px 10px 0 0;
    --upaep-accordion-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-active-content-border-radius: 0 0 10px 10px;
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-active-header-border-bottom-size: 1px;
}

.upaep__accordion.__borderless {
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--upaep-color-border-grey);
}

.upaep__accordion.__underline:not(.__rounded) {
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-style: solid;
    --upaep-accordion-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-style: solid;
    --upaep-accordion-active-header-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-content-border-size: 0;
    --upaep-accordion-content-border-style: solid;
    --upaep-accordion-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-style: solid;
    --upaep-accordion-active-content-border-color: var(--upaep-color-border-grey);
    --upaep-accordion-header-border-bottom-size: 1px;
    --upaep-accordion-header-border-bottom-style: solid;
    --upaep-accordion-header-border-bottom-color: var(--upaep-color-border-grey);
}

.upaep__accordion.icon__circle,
.upaep__accordion.__icon-circle {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTIzMiAzNDRWMjgwSDE2OGMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNGg2NFYxNjhjMC0xMy4zIDEwLjctMjQgMjQtMjRzMjQgMTAuNyAyNCAyNHY2NGg2NGMxMy4zIDAgMjQgMTAuNyAyNCAyNHMtMTAuNyAyNC0yNCAyNEgyODB2NjRjMCAxMy4zLTEwLjcgMjQtMjQgMjRzLTI0LTEwLjctMjQtMjR6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTE4NCAyMzJIMzI4YzEzLjMgMCAyNCAxMC43IDI0IDI0cy0xMC43IDI0LTI0IDI0SDE4NGMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNHoiLz48L3N2Zz4=');
}

.upaep__accordion.icon__chevron,
.upaep__accordion.__icon-chevron {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjMzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDBsMTkyIDE5MmMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwyNTYgMTczLjMgODYuNiAzNDIuNmMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBzLTEyLjUtMzIuOCAwLTQ1LjNsMTkyLTE5MnoiLz48L3N2Zz4=');
}

.upaep__accordion.icon__circle-chevron,
.upaep__accordion.__icon-circle-chevron {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDBhMjU2IDI1NiAwIDEgMCAwIDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwek0xMzUgMjQxYy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsODcgODcgODctODdjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45TDI3MyAzNDVjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwTDEzNSAyNDF6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTM3NyAyNzFjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlzLTI0LjYgOS40LTMzLjkgMGwtODctODctODcgODdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwcy05LjQtMjQuNiAwLTMzLjlMMjM5IDE2N2M5LjQtOS40IDI0LjYtOS40IDMzLjkgMEwzNzcgMjcxeiIvPjwvc3ZnPg==');
}

.upaep__accordion.icon__caret,
.upaep__accordion.__icon-caret {
    --upaep-accordion-header-markinactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTM3LjQgMzc0LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTI4LTEyOGM5LjItOS4yIDExLjktMjIuOSA2LjktMzQuOXMtMTYuNi0xOS44LTI5LjYtMTkuOEwzMiAxOTJjLTEyLjkgMC0yNC42IDcuOC0yOS42IDE5LjhzLTIuMiAyNS43IDYuOSAzNC45bDEyOCAxMjh6Ii8+PC9zdmc+');
    --upaep-accordion-header-markactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTgyLjYgMTM3LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwbC0xMjggMTI4Yy05LjIgOS4yLTExLjkgMjIuOS02LjkgMzQuOXMxNi42IDE5LjggMjkuNiAxOS44SDI4OGMxMi45IDAgMjQuNi03LjggMjkuNi0xOS44czIuMi0yNS43LTYuOS0zNC45bC0xMjgtMTI4eiIvPjwvc3ZnPg==');
}

.upaep__accordion.__spacing {
    --upaep-accordion-item-margin: .5rem 0;
}

/*? ------ menu-mobile accordion ------ */
.upaep__menu .upaep__menu-mobile .upaep__accordion,
.upaep__menu .upaep__menu__mobile .upaep__accordion {
    --upaep-accordion-header-border-radius: 10px;
    --upaep-accordion-header-bg: var(--upaep-color-white);
    --upaep-accordion-header-fz: var(--upaep-fz18);
    --upaep-accordion-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-header-color: var(--upaep-color-dark-grey);
    --upaep-accordion-header-border-size: 0;
    --upaep-accordion-header-border-radius: 0;
    --upaep-accordion-active-header-border-radius: 0;
    --upaep-accordion-active-header-bg: var(--upaep-color-white);
    --upaep-accordion-active-header-fz: var(--upaep-fz18);
    --upaep-accordion-active-header-fw: var(--upaep-fw-bold);
    --upaep-accordion-active-header-color: var(--upaep-color-dark-grey);
    --upaep-accordion-active-header-border-size: 0;
    --upaep-accordion-active-header-border-bottom-size: 0;
    --upaep-accordion-content-bg: var(--upaep-color-white);
    --upaep-accordion-content-border-radius: 0;
    --upaep-accordion-active-content-bg: var(--upaep-color-white);
    --upaep-accordion-active-content-border-size: 0;
    --upaep-accordion-active-content-border-radius: 0;
    --upaep-accordion-active-content-border-bottom-size: 2px;
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__link::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__input::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__title::after,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__subtitle::after {
    --upaep-accordion-header-markinactive: '';
    --upaep-accordion-header-markactive: '';
}


.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion-header.__title,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__title {
    --upaep-accordion-header-color: var(--upaep-color-red);
    --upaep-accordion-active-header-color: var(--upaep-color-red);
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion-header.__subtitle,
.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__subtitle {
    --upaep-accordion-header-color: var(--upaep-color-red);
    --upaep-accordion-active-header-color: var(--upaep-color-red);
}

.upaep__menu .upaep__menu-mobile .upaep__accordion .upaep__accordion_header.__link.__secondary,
.upaep__menu .upaep__menu__mobile .upaep__accordion .upaep__accordion_header.__link.__secondary {
    --upaep-accordion-header-padding: 0 0 0 1.5rem;
    --upaep-accordion-active-header-padding: 0 0 0 1.5rem;
}

/*? ------ List ------ */

.upaep__list {
    --upaep-list-width: 100%;
    --upaep-list-height: auto;
    --upaep-list-maxwidth: auto;
    --upaep-list-padding: 0 0 0 1rem;
    --upaep-list-margin: .5rem;
    --upaep-list-bg: transparent;
    --upaep-list-border-radius: 10px;
    --upaep-list-item-width: 100%;
    --upaep-list-item-height: 100%;
    --upaep-list-item-padding: .75rem .5rem;
    --upaep-list-item-margin: 0;
    --upaep-list-item-color: inset;
    --upaep-list-item-bg: transparent;
    --upaep-list-item-border-size: 0;
    --upaep-list-item-border-style: solid;
    --upaep-list-item-border-color: var(--upaep-color-border-grey);
    --upaep-list-item-border-bottom-size: 1px;
    --upaep-list-item-border-bottom-style: solid;
    --upaep-list-item-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-list-item-border-radius: 0;
    --upaep-list-item-mark-content: '\f0da';
    --upaep-list-item-mark-fz: var(--upaep-fz14);
    --upaep-list-item-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-mark-color: var(--upaep-color-red);
    --upaep-list-item-mark-padding: .25rem .5rem;
    --upaep-list-item-mark-inset: auto auto auto -20px;
    --upaep-list-item-hover-color: inset;
    --upaep-list-item-hover-bg: var(--colorgrey7);
    --upaep-list-item-hover-border-size: 0;
    --upaep-list-item-hover-border-style: solid;
    --upaep-list-item-hover-border-color: var(--upaep-color-border-grey);
    --upaep-list-item-hover-border-bottom-size: 1px;
    --upaep-list-item-hover-border-bottom-style: solid;
    --upaep-list-item-hover-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-list-item-hover-mark-content: '\f0da';
    --upaep-list-item-hover-mark-fz: var(--upaep-fz14);
    --upaep-list-item-hover-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-hover-mark-color: var(--upaep-color-red);
    --upaep-list-item-active-color: inset;
    --upaep-list-item-active-bg: var(--colorgrey7);
    --upaep-list-item-active-border-size: 0;
    --upaep-list-item-active-border-style: solid;
    --upaep-list-item-active-border-color: var(--upaep-color-border-grey);
    --upaep-list-item-active-border-bottom-size: 1px;
    --upaep-list-item-active-border-bottom-style: solid;
    --upaep-list-item-active-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-list-item-active-mark-content: '\f0da';
    --upaep-list-item-active-mark-fz: var(--upaep-fz14);
    --upaep-list-item-active-mark-fw: var(--upaep-fw-bold);
    --upaep-list-item-active-mark-color: var(--upaep-color-red);
    width: var(--upaep-list-width);
    height: var(--upaep-list-height);
    max-width: var(--upaep-list-maxwidth);
    padding: var(--upaep-list-padding);
    margin: var(--upaep-list-margin);
    background: var(--upaep-list-bg);
    border-radius: var(--upaep-list-border-radius);
    display: flex;
    flex-direction: column;

    &:not(.__style-normal) {
        .upaep__list-item {
            display: flex;
        }
    }

    & .upaep__list-item {
        width: var(--upaep-list-item-width);
        height: var(--upaep-list-item-height);
        padding: var(--upaep-list-item-padding);
        margin: var(--upaep-list-item-margin);
        color: var(--upaep-list-item-color);
        background: var(--upaep-list-item-bg);
        border: var(--upaep-list-item-border-size) var(--upaep-list-item-border-style) var(--upaep-list-item-border-color);
        border-radius: var(--upaep-list-item-border-radius);
        position: relative;
        text-decoration: none;

        &.is-active {
            color: var(--upaep-list-item-active-color);
            background: var(--upaep-list-item-active-bg);
            border: var(--upaep-list-item-active-border-size) var(--upaep-list-item-active-border-style) var(--upaep-list-item-active-border-color);
        }

        &.is-inactive {
            display: none;
        }

        & a {
            text-decoration: none;
        }

        &::before {
            content: var(--upaep-list-item-mark-content);
            font-size: var(--upaep-list-item-mark-fz);
            font-weight: var(--upaep-list-item-mark-fw);
            color: var(--upaep-list-item-mark-color);
            padding: var(--upaep-list-item-mark-padding);
            inset: var(--upaep-list-item-mark-inset);
            font-family: var(--upaep-ff-fontawesome);
        }

        &.is-active::before {
            content: var(--upaep-list-item-active-mark-content);
            font-size: var(--upaep-list-item-active-mark-fz);
            font-weight: var(--upaep-list-item-active-mark-fw);
            color: var(--upaep-list-item-active-mark-color);
        }
    }

    &.__hover {
        & .upaep__list-item:not(.is-active):hover {
            color: var(--upaep-list-item-hover-color);
            background: var(--upaep-list-item-hover-bg);
            border: var(--upaep-list-item-hover-border-size) var(--upaep-list-item-hover-border-style) var(--upaep-list-item-hover-border-color);
        }

        & .upaep__list-item:not(.is-active):hover::before {
            content: var(--upaep-list-item-hover-mark-content);
            font-size: var(--upaep-list-item-hover-mark-fz);
            font-weight: var(--upaep-list-item-hover-mark-fw);
            color: var(--upaep-list-item-hover-mark-color);
        }
    }

    &:not(.__flush) {
        & .upaep__list-item:first-child {
            --upaep-list-item-border-radius: 10px 10px 0 0;
        }

        & .upaep__list-item:last-child {
            --upaep-list-item-border-radius: 0 0 10px 10px;
        }
    }
}

.upaep__list.__nomark {
    --upaep-list-item-mark-content: '';
    --upaep-list-item-mark-padding: 0;
    --upaep-list-item-active-mark-content: '';
    --upaep-list-item-active-mark-padding: 0;
}

.upaep__list.__borderless {
    --upaep-list-item-border-size: 0;
    --upaep-list-item-border-color: none;
}

.upaep__list.__bordered {
    --upaep-list-item-border-size: 1px;
    --upaep-list-item-hover-border-size: 1px;
    --upaep-list-item-active-border-size: 1px;
}

.upaep__list.__horizontal,
.upaep__list.__inline {
    flex-direction: row;
}

.upaep__list.__flush .upaep__list-item:not(:last-child) {
    border-bottom: var(--upaep-list-item-border-bottom-size) var(--upaep-list-item-border-bottom-style) var(--upaep-list-item-border-bottom-color);
}

.upaep__list.__flush.__hover .upaep__list-item:not(.is-active):not(:last-child):hover {
    border-bottom: var(--upaep-list-item-hover-border-bottom-size) var(--upaep-list-item-hover-border-bottom-style) var(--upaep-list-item-hover-border-bottom-color);
}

.upaep__list.__flush .upaep__list-item:not(:last-child).is-active {
    border-bottom: var(--upaep-list-item-active-border-bottom-size) var(--upaep-list-item-active-border-bottom-style) var(--upaep-list-item-active-border-bottom-color);
}

.upaep__list.__program .upaep__list-item:not(.is-inactive) {
    display: flex;
    align-items: start;
}

.upaep__list.__program .upaep__list-item a {
    cursor: pointer;
}

/*? ------ Modal ------ */
.upaep__modal-dark .modal-header {
    background: var(--upaep-color-red);
    color: var(--upaep-color-white);
}

.upaep__modal-dark .modal-body {
    background: var(--upaep-color-black);
    color: var(--upaep-color-white);
}

.upaep__modal-black .modal-header {
    background: var(--upaep-color-black);
    color: var(--upaep-color-white);
}

.upaep__modal-black .modal-body {
    background: var(--upaep-color-black);
    color: var(--upaep-color-white);
}

.upaep__modal-white .modal-header {
    background: var(--upaep-color-red);
    color: var(--upaep-color-white);
}

.upaep__modal-white .modal-body {
    background: var(--upaep-color-white);
    color: var(--upaep-color-black);
}

.upaep__modal-blue .modal-header {
    background: var(--upaep-color-blue-primary);
    color: var(--upaep-color-white);
}

.upaep__modal-blue .modal-body {
    background: var(--upaep-color-white);
    color: var(--upaep-color-black);
}

.upaep__modal-darkblue .modal-header {
    background: var(--upaep-color-blue-primary);
    color: var(--upaep-color-white);
}

.upaep__modal-darkblue .modal-body {
    background: var(--upaep-color-black);
    color: var(--upaep-color-white);
}

.upaep__modal-simple .modal-header {
    background: var(--upaep-color-white);
    color: var(--upaep-color-black);
    border: none;
    padding: 1rem 1rem 0;
}

.upaep__modal-simple .modal-body {
    background: var(--upaep-color-white);
    color: var(--upaep-color-black);
}

h1.upaep__title_modal {
    font-size: 25px;
    font-weight: bold;
}

.upaep_modal_noborder .modal-header {
    border: none;
}

.upaep__modal-header {
    border: none !important;
}

.upaep__modal_body {
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.upaep__close-red {
    color: var(--upaep-color-red);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-blue {
    color: var(--upaep-color-blue-primary);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-black {
    color: var(--upaep-color-black);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__close-white {
    color: var(--upaep-color-white);
    font-size: 30px;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.upaep__modal-header {
    padding: 30px;
}

.upaep__modal-body {
    padding: 10px 30px 30px;
}

.modal-backdrop.show {
    opacity: .5;
    width: 100%;
    height: 100%;
}

#modalUpress {
    p:has(sup) {
        margin: 1rem 0;
    }

    sup {
        line-height: 1.5;
    }
}

/*? ------ Selectpicker ------ */
.upaep__selectpicker {
    --upaep-selectpicker-width: 100%;
    --upaep-selectpicker-height: auto;
    --upaep-selectpicker-margin: .5rem 0;
    --upaep-selectpicker-padding: 0;
    --upaep-selectpicker-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-selectpicker-border-radius: 10px;
    --upaep-selectpicker-content-width: 100%;
    --upaep-selectpicker-content-height: auto;
    --upaep-selectpicker-content-margin: 5px 0;
    --upaep-selectpicker-content-padding: .5rem;
    --upaep-selectpicker-content-border-size: 2px;
    --upaep-selectpicker-content-border-style: solid;
    --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-content-border-radius: 10px;
    --upaep-selectpicker-content-bg: var(--upaep-color-white);
    --upaep-selectpicker-list-width: 100%;
    --upaep-selectpicker-list-height: auto;
    --upaep-selectpicker-list-maxheight: 250px;
    --upaep-selectpicker-list-padding: .5rem 0;
    --upaep-selectpicker-list-margin: 0;
    --upaep-selectpicker-list-item-width: 100%;
    --upaep-selectpicker-list-item-height: auto;
    --upaep-selectpicker-list-item-padding: .5rem 1rem;
    --upaep-selectpicker-list-item-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-optg-fz: var(--upaep-fz14);
    --upaep-selectpicker-optg-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-optg-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-optg-bg: var(--upaep-color-white);
    --upaep-selectpicker-optg-padding: .5rem 1rem;
    --upaep-selectpicker-opt-fz: var(--upaep-fz16);
    --upaep-selectpicker-opt-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-bg: var(--upaep-color-white);
    --upaep-selectpicker-opt-padding: .5rem 1rem;
    --upaep-selectpicker-opt-selected-padding: .5rem 1rem;
    --upaep-selectpicker-opt-selected-fz: var(--upaep-fz16);
    --upaep-selectpicker-opt-selected-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-padding: .5rem 1rem;
    --upaep-selectpicker-opt-hover-fz: var(--upaep-fz16);
    --upaep-selectpicker-opt-hover-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-hover-bg: var(--colorgrey7);
    --upaep-selectpicker-opt-disabled-padding: .5rem 1rem;
    --upaep-selectpicker-opt-disabled-fz: var(--upaep-fz16);
    --upaep-selectpicker-opt-disabled-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-disabled-bg: var(--colorgrey7);
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-tags-bg: var(--upaep-color-white);
    --upaep-selectpicker-proload-bg: var(--upaep-color-white);
    --upaep-selectpicker-proload-border-radius: 10px;
    --upaep-selectpicker-proload-padding: .5rem;
    --upaep-selectpicker-proload-text-fz: var(--upaep-fz16);
    --upaep-selectpicker-proload-text-fw: var(--upaep-fw-medium);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-proload-spinner-width: 2rem;
    --upaep-selectpicker-proload-spinner-height: 2rem;
    --upaep-selectpicker-proload-spinner-color-primary: var(--upaep-color-red);
    --upaep-selectpicker-proload-spinner-color-secondary: var(--upaep-color-dark-grey);
    --upaep-selectpicker-notify-bg: var(--colorgrey7);
    --upaep-selectpicker-notify-fz: var(--upaep-fz16);
    --upaep-selectpicker-notify-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-notify-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-mark-size: .45rem;
    --upaep-selectpicker-btn-mark-color: ;
    --upaep-selectpicker-btn-padding: 0 1rem 0 1rem;
    --upaep-selectpicker-btn-bg: var(--upaep-color-white);
    --upaep-selectpicker-btn-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-fw: var(--upaep-fw-normal);
    --upaep-selectpicker-btn-fz: var(--upaep-fz14);
    --upaep-selectpicker-btn-border-radius: 10px;
    --upaep-selectpicker-btn-border-size: 2px;
    --upaep-selectpicker-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-hover-bg: var(--upaep-color-white);
    --upaep-selectpicker-btn-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-hover-fz: var(--upaep-fz14);
    --upaep-selectpicker-btn-hover-fw: var(--upaep-fw-normal);
    --upaep-selectpicker-btn-hover-border-radius: 10px;
    --upaep-selectpicker-btn-hover-border-size: 2px;
    --upaep-selectpicker-btn-hover-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-selected-bg: var(--upaep-color-white);
    --upaep-selectpicker-btn-selected-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-selected-fz: ;
    --upaep-selectpicker-btn-selected-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-btn-selected-border-radius: ;
    --upaep-selectpicker-btn-selected-border-size: ;
    --upaep-selectpicker-btn-selected-border-color: ;
    --upaep-selectpicker-counter-size: 25px;
    --upaep-selectpicker-counter-padding: .5rem;
    --upaep-selectpicker-counter-border-radius: var(--upaep-selectpicker-counter-size);
    --upaep-selectpicker-counter-bg: ;
    --upaep-selectpicker-counter-color: ;
    --upaep-selectpicker-counter-fz: ;
    --upaep-selectpicker-counter-fw: ;
    --upaep-selectpicker-counter-selected-bg: ;
    --upaep-selectpicker-counter-selected-color: ;
    --upaep-selectpicker-counter-selected-fz: ;
    --upaep-selectpicker-counter-selected-fw: ;

    width: var(--upaep-selectpicker-width);
    height: var(--upaep-selectpicker-height);
    margin: var(--upaep-selectpicker-margin);
    padding: var(--upaep-selectpicker-padding);
    border-radius: var(--upaep-selectpicker-border-radius);
    min-height: 2.65rem;
    position: relative;

    &:hover .upaep__selectpicker-btn .upaep__btn:focus {
        box-shadow: var(--upaep-selectpicker-boxshadow);
    }

    &.__disabled {
        opacity: .5;
        pointer-events: none;
    }

    &:has(select:disabled) {
        opacity: .5;
        pointer-events: none;

        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-color-background);
        }
    }

    &:has(select.__rounded) {
        --upaep-selectpicker-proload-border-radius: 50px;

        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-border-radius: 50px;
        }
    }

    & select {
        display: none;
    }

    & small {
        margin: 0 .5rem;
        opacity: .8;
    }

    & .upaep__selectpicker-overlay {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    & .upaep__selectpicker-btn {
        width: 100%;
        height: auto;
        border-radius: 10px;
        position: relative;
    }

    &:not(.is-show) .upaep__btn .__close {
        display: none;
    }

    &.is-show .upaep__btn .__open {
        display: none;
    }

    & .upaep__selectpicker-content {
        width: var(--upaep-selectpicker-content-width);
        height: var(--upaep-selectpicker-content-height);
        margin: var(--upaep-selectpicker-content-margin);
        padding: var(--upaep-selectpicker-content-padding);
        border: var(--upaep-selectpicker-content-border-size) var(--upaep-selectpicker-content-border-style) var(--upaep-selectpicker-content-border-color);
        border-radius: var(--upaep-selectpicker-content-border-radius);
        background: var(--upaep-selectpicker-content-bg);
        overflow: hidden;
        position: absolute;
        z-index: var(--upaep-zindex-selectpicker);
        transition: height .5s;
        animation: a_fadeIn .5s forwards;

        & .upaep__selectpicker-header {
            width: 100%;
            min-height: 40px;
            height: auto;
            border-bottom: 1px solid var(--upaep-color-border-grey);
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>* {
                font-size: var(--upaep-selectpicker-header-fz);
                font-weight: var(--upaep-selectpicker-header-fw);
                color: var(--upaep-selectpicker-header-color);
            }

            & span {
                padding: 0 1rem;
            }

            & i {
                padding: 0 1rem;
                cursor: pointer;

                &:hover {
                    filter: var(--upaep-drop-shadow);
                }
            }
        }

        & .upaep__selectpicker-search {
            width: 100%;
            padding: .5rem;
            position: relative;

            & i {
                color: #191919;
                position: absolute;
                width: 20px;
                height: 20px;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            & input::placeholder {
                color: var(--upaep-color-black) !important;
                font-size: var(--upaep-fz16) !important;
            }

            & .upaep__input.__selectpicker {
                --upaep-input-margin: 0;
                --upaep-input-border-radius: 50px;
                --upaep-input-padding: .35rem 1.5rem .35rem 2rem !important;
                --upaep-input-focus-bg: var(--upaep-color-white);
            }
        }

        & .upaep__selectpicker-selectall {
            width: 100%;
            display: flex;
            padding: .5rem;
            gap: 5px;

            & .upaep__btn.__selectedall {
                --upaep-btn-width: 100%;
                --upaep-btn-height: 100%;
                --upaep-btn-border-radius: 10px;
                --upaep-btn-border-color: var(--upaep-color-border-grey);
                --upaep-btn-bg: var(--upaep-color-white);
                --upaep-btn-margin: 0;
                min-height: 2rem;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .upaep__label {
                color: var(--upaep-selectpicker-header-color);
            }
        }

        & .upaep__selectpicker-list {
            width: var(--upaep-selectpicker-list-width);
            height: var(--upaep-selectpicker-list-height);
            max-height: var(--upaep-selectpicker-list-maxheight);
            padding: var(--upaep-selectpicker-list-padding);
            margin: var(--upaep-selectpicker-list-margin);
            list-style: none;
            overflow-y: auto;
            scrollbar-color: var(--upaep-color-border-grey) tansparent;
            scrollbar-width: thin;

            .upaep__selectpicker-items {
                padding: 0 0 0 .25rem;

                .upaep__selectpicker-label {
                    font-size: var(--upaep-selectpicker-optg-fz);
                    font-weight: var(--upaep-selectpicker-optg-fw);
                    color: var(--upaep-selectpicker-optg-color);
                    background: var(--upaep-selectpicker-optg-bg);
                    padding: var(--upaep-selectpicker-optg-padding);
                    border-bottom: 1px solid var(--upaep-color-border-grey);
                    cursor: default;

                    &.is-inactive {
                        display: none;
                    }

                    &.is-disabled {
                        opacity: .5;
                    }
                }
            }

            & .upaep__selectpicker-item {
                width: var(--upaep-selectpicker-list-item-width);
                height: var(--upaep-selectpicker-list-item-height);
                padding: var(--upaep-selectpicker-list-item-padding);
                color: var(--upaep-selectpicker-list-item-color);
                min-height: 35px;
                display: flex;
                align-items: center;
                word-wrap: break-word;
                word-break: break-word;

                &.optg {
                    font-size: var(--upaep-selectpicker-optg-fz);
                    font-weight: var(--upaep-selectpicker-optg-fw);
                    color: var(--upaep-selectpicker-optg-color);
                    background: var(--upaep-selectpicker-optg-bg);
                    padding: var(--upaep-selectpicker-optg-padding);
                    border-bottom: 1px solid var(--upaep-color-border-grey);
                    cursor: default;
                }

                &.opt {
                    font-size: var(--upaep-selectpicker-opt-fz);
                    font-weight: var(--upaep-selectpicker-opt-fw);
                    color: var(--upaep-selectpicker-opt-color);
                    background: var(--upaep-selectpicker-opt-bg);
                    padding: var(--upaep-selectpicker-opt-padding);
                    cursor: pointer;

                    &.is-selected {
                        font-size: var(--upaep-selectpicker-opt-selected-fz);
                        font-weight: var(--upaep-selectpicker-opt-selected-fw);
                        color: var(--upaep-selectpicker-opt-selected-color);
                        background: var(--upaep-selectpicker-opt-selected-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                    }

                    &.is-preselect:not(.is-selected):not(.is-disabled),
                    &:hover:not(.is-selected):not(.is-disabled) {
                        font-size: var(--upaep-selectpicker-opt-hover-fz);
                        font-weight: var(--upaep-selectpicker-opt-hover-fw);
                        color: var(--upaep-selectpicker-opt-hover-color);
                        background: var(--upaep-selectpicker-opt-hover-bg);
                    }

                    &.is-disabled {
                        font-size: var(--upaep-selectpicker-opt-disabled-fz);
                        font-weight: var(--upaep-selectpicker-opt-disabled-fw);
                        color: var(--upaep-selectpicker-opt-disabled-color);
                        background: var(--upaep-selectpicker-opt-disabled-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                        opacity: .5;
                        cursor: not-allowed;

                        input[type=checkbox] {
                            pointer-events: none;
                        }
                    }
                }
            }
        }

        & .upaep__selectpicker-notify {
            background: var(--upaep-selectpicker-notify-bg);
            font-size: var(--upaep-selectpicker-notify-fz);
            font-weight: var(--upaep-selectpicker-notify-fw);
            color: var(--upaep-selectpicker-notify-color);
            min-height: 2.65rem;
            width: 100%;
            text-align: center;
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    & .upaep__selectpicker-preload {
        background: var(--upaep-selectpicker-proload-bg);
        border: 2px solid var(--upaep-color-border-grey);
        border-radius: var(--upaep-selectpicker-proload-border-radius);
        padding: var(--upaep-selectpicker-proload-padding);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
        cursor: default;

        & .spin_basic:before {
            height: var(--upaep-selectpicker-proload-spinner-width);
            width: var(--upaep-selectpicker-proload-spinner-height);
            border: 6px var(--upaep-selectpicker-proload-spinner-color-primary) solid;
            border-left-color: var(--upaep-selectpicker-proload-spinner-color-secondary);
            content: '';
            display: block;
            -webkit-animation: spin_basic .5s infinite linear;
            animation: spin_basic .5s infinite linear;
            border-radius: 100%;
        }

        & .upaep__selectpicker-spintext {
            font-size: var(--upaep-selectpicker-proload-text-fz);
            font-weight: var(--upaep-selectpicker-proload-text-fw);
            color: var(--upaep-selectpicker-proload-text-color);
        }
    }

    &:not(.is-show) .upaep__selectpicker-content {
        display: none;
    }

    &.__mark .upaep__selectpicker-item {
        display: flex;
        justify-content: space-between;

        &:not(.is-selected) .__mark {
            display: none;
        }
    }

    &.__checkbox {
        --upaep-selectpicker-opt-fw: var(--upaep-fw-normal);
        --upaep-selectpicker-opt-selected-bg: none;
        --upaep-selectpicker-opt-selected-color: var(--upaep-color-black);
        --upaep-selectpicker-opt-selected-fw: var(--upaep-fw-bold);
        --upaep-selectpicker-opt-hover-bg: #dee2e6;
        --upaep-selectpicker-opt-hover-fw: var(--upaep-fw-normal);
        --upaep-selectpicker-counter-selected-bg: var(--upaep-color-blue-primary);
        --upaep-selectpicker-counter-selected-color: var(--upaep-color-white);

        .upaep__selectpicker-item {
            display: flex;
            justify-content: start;
            gap: .5rem;

            .upaep__checkbox {
                --upaep-checkbox-checked-color: var(--upaep-color-white);
                --upaep-checkbox-focus-bg: var(--upaep-color-success);
                --upaep-checkbox-active-bg: var(--upaep-color-success);
                --upaep-checkbox-checked-bg: var(--upaep-color-success);
            }
        }
    }

    &.__tag .upaep__selectpicker-tags {
        background: var(--upaep-selectpicker-tags-bg);
        width: 100%;
        border-radius: 10px;
        color: transparent;
        margin: .2rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.upaep__tag-group.is-inactive) {
            animation: fadeOut .3s forwards;
        }

        .upaep__tag-group.is-inactive,
        .upaep__tag-group:empty {
            animation: fadeOut .3s forwards;
        }
    }

    &.is-selected {
        .upaep__selectpicker-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-selectpicker-btn-selected-bg);
            --upaep-btn-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-cont-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-border-color: var(--upaep-selectpicker-btn-selected-border-color);
            --upaep-btn-hover-bg: var(--upaep-selectpicker-btn-selected-bg);
            --upaep-btn-hover-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-hover-cont-color: var(--upaep-selectpicker-btn-selected-color);
            --upaep-btn-hover-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-hover-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
            --upaep-btn-hover-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-hover-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
            --upaep-btn-hover-border-color: var(--upaep-selectpicker-btn-selected-border-color);
        }

        .upaep__selectpicker-counter {
            background: var(--upaep-selectpicker-counter-selected-bg);
            color: var(--upaep-selectpicker-counter-selected-color);
            font-size: var(--upaep-selectpicker-counter-selected-fz);
            font-weight: var(--upaep-selectpicker-counter-selected-fw);
        }
    }

    &.__clear-selection {
        &:not(:has(.upaep__selectpicker-item.is-selected)) {
            .upaep__selectpicker-clear {
                display: none;
            }
        }

        .upaep__selectpicker-clear {
            width: 30px;
            height: 30px;
            padding: .5rem;
            border-radius: 5px;
            position: absolute;
            inset: 50% 0 auto 80%;
            translate: 0 -50%;
            z-index: 10;
            align-items: center;
            justify-content: center;

            &:hover {
                filter: var(--upaep-drop-shadow);
            }
        }
    }

    .upaep__selectpicker-counter {
        width: var(--upaep-selectpicker-counter-size);
        height: var(--upaep-selectpicker-counter-size);
        padding: var(--upaep-selectpicker-counter-padding);
        border-radius: var(--upaep-selectpicker-counter-border-radius);
        background: var(--upaep-selectpicker-counter-bg);
        color: var(--upaep-selectpicker-counter-color);
        font-size: var(--upaep-selectpicker-counter-fz);
        font-weight: var(--upaep-selectpicker-counter-fw);
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

.was-validated,
.__validated {
    .upaep__selectpicker {
        &:has(select:valid) {
            --upaep-selectpicker-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);

            .upaep__selectpicker-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-success);
                --upaep-btn-hover-border-color: var(--upaep-color-success);
                background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJtNDI0LTI5NiAyODItMjgyLTU2LTU2LTIyNiAyMjYtMTE0LTExNC01NiA1NiAxNzAgMTcwWm01NiAyMTZxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==);
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }

        &:has(select:invalid) {
            --upaep-selectpicker-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

            .upaep__selectpicker-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-error);
                --upaep-btn-hover-border-color: var(--upaep-color-error);
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNNDgwLTI4MHExNyAwIDI4LjUtMTEuNVQ1MjAtMzIwcTAtMTctMTEuNS0yOC41VDQ4MC0zNjBxLTE3IDAtMjguNSAxMS41VDQ0MC0zMjBxMCAxNyAxMS41IDI4LjVUNDgwLTI4MFptLTQwLTE2MGg4MHYtMjQwaC04MHYyNDBabTQwIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIiBmaWxsPSIjZGMzNTQ1Ii8+PC9zdmc+");
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

                &::after {
                    margin: 0 1rem 0 0;
                }
            }
        }
    }
}

.upaep__selectpicker:has(.upaep__select.__no-h-auto) .upaep__selectpicker-btn .upaep__btn {
    min-height: 2.65rem;
    max-height: 2.65rem;

    & span {
        min-height: 2.65rem;
        max-height: 2.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.upaep__selectpicker-btn .upaep__btn {
    --upaep-btn-width: 100%;
    --upaep-btn-border-radius: var(--upaep-selectpicker-btn-border-radius);
    --upaep-btn-border-size: var(--upaep-selectpicker-btn-border-size);
    --upaep-btn-hover-border-size: var(--upaep-selectpicker-btn-border-size);
    --upaep-btn-border-color: var(--upaep-selectpicker-btn-border-color);
    --upaep-btn-bg: var(--upaep-selectpicker-btn-bg);
    --upaep-btn-padding: var(--upaep-selectpicker-btn-padding);
    --upaep-btn-margin: 0;
    --upaep-btn-fw: var(--upaep-fw-bold);
    --upaep-btn-color: var(--upaep-selectpicker-btn-color);
    --upaep-btn-cont-color: var(--upaep-selectpicker-btn-color);
    --upaep-btn-cont-fz: var(--upaep-selectpicker-btn-fz);
    --upaep-btn-cont-fw: var(--upaep-selectpicker-btn-fw);
    --upaep-btn-hover-bg: var(--upaep-selectpicker-btn-selected-bg);
    --upaep-btn-hover-color: var(--upaep-selectpicker-btn-selected-color);
    --upaep-btn-hover-cont-color: var(--upaep-selectpicker-btn-selected-color);
    --upaep-btn-hover-fz: var(--upaep-selectpicker-btn-selected-fz);
    --upaep-btn-hover-cont-fz: var(--upaep-selectpicker-btn-selected-fz);
    --upaep-btn-hover-fw: var(--upaep-selectpicker-btn-selected-fw);
    --upaep-btn-hover-cont-fw: var(--upaep-selectpicker-btn-selected-fw);
    --upaep-btn-hover-border-color: var(--upaep-selectpicker-btn-selected-border-color);
    --upaep-btn-disabled-bg: var(--upaep-color-background);
    --upaep-btn-disabled-border-color: var(--upaep-color-background);
    --upaep-selectpicker-btn-mark-size: .45rem;
    --upaep-selectpicker-btn-mark-color: ;
    min-height: 2.65rem;
    position: relative;

    & span {
        width: 100%;
        height: 100%;
        min-height: 2.65rem;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 1rem 0 0;
        overflow: hidden;
        gap: .5rem;
    }

    &::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: var(--upaep-selectpicker-btn-mark-size) solid var(--upaep-selectpicker-btn-mark-color);
        border-right: var(--upaep-selectpicker-btn-mark-size) solid transparent;
        border-bottom: 0;
        border-left: var(--upaep-selectpicker-btn-mark-size) solid transparent;
        transition: all .5s;
    }
}

.upaep__selectpicker.__rounded {
    --upaep-selectpicker-proload-border-radius: 50px;
}

.upaep__selectpicker.__rounded .upaep__selectpicker-btn .upaep__btn {
    --upaep-btn-border-radius: 50px;
}

.upaep__selectpicker.is-show .upaep__selectpicker-btn .upaep__btn::after {
    transform: rotate(-180deg);
}

.upaep__selectpicker-item.__no-result,
.upaep__selectpicker-item.is-inactive {
    display: none !important;
}

.upaep__selectpicker-item.is-active {
    display: block !important;
}


.upaep__selectpicker .upaep__selectpicker-preload:not(.is-active) {
    display: none !important;
}

@keyframes spin_basic {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.upaep__selectpicker.__dark {
    --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-content-bg: var(--colordark);
    --upaep-selectpicker-list-item-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-bg: var(--colordark);
    --upaep-selectpicker-opt-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-bg: var(--colordark);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-hover-bg: var(--colorgrey7);
    --upaep-selectpicker-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-disabled-bg: var(--colorgrey7);
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--upaep-color-white);
    --upaep-selectpicker-tags-bg: var(--colordark);
    --upaep-selectpicker-proload-bg: var(--colordark);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-bg: var(--colordark);
    --upaep-selectpicker-btn-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-hover-bg: var(--upaep-selectpicker-btn-hover-bg);
    --upaep-selectpicker-btn-hover-color: var(--upaep-selectpicker-btn-hover-color);
    --upaep-selectpicker-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-selected-bg: var(--colordark);
    --upaep-selectpicker-btn-selected-color: var(--upaep-color-white);
}

.upaep__selectpicker.__black {
    --upaep-selectpicker-content-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-content-bg: var(--upaep-color-black);
    --upaep-selectpicker-list-item-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-color: var(--upaep-color-white);
    --upaep-selectpicker-optg-bg: var(--upaep-color-black);
    --upaep-selectpicker-opt-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-bg: var(--upaep-color-black);
    --upaep-selectpicker-opt-selected-color: var(--upaep-color-white);
    --upaep-selectpicker-opt-selected-bg: var(--upaep-color-grey);
    --upaep-selectpicker-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-hover-bg: var(--colorgrey7);
    --upaep-selectpicker-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-opt-disabled-bg: var(--colorgrey7);
    --upaep-selectpicker-header-fz: var(--upaep-fz14);
    --upaep-selectpicker-header-fw: var(--upaep-fw-bold);
    --upaep-selectpicker-header-color: var(--upaep-color-white);
    --upaep-selectpicker-tags-bg: var(--upaep-color-black);
    --upaep-selectpicker-proload-bg: var(--upaep-color-black);
    --upaep-selectpicker-proload-text-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-border-color: var(--upaep-color-border-grey);
    --upaep-selectpicker-btn-hover-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-hover-color: var(--upaep-color-white);
    --upaep-selectpicker-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-selectpicker-btn-selected-bg: var(--upaep-color-black);
    --upaep-selectpicker-btn-selected-color: var(--upaep-color-white);
}

/*? ------ autocomplete ------ */
.upaep__autocomplete {
    --upaep-autocomplete-width: 100%;
    --upaep-autocomplete-height: auto;
    --upaep-autocomplete-margin: .5rem 0;
    --upaep-autocomplete-padding: 0;
    --upaep-autocomplete-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    --upaep-autocomplete-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDIwOGMwIDQ1LjktMTQuOSA4OC4zLTQwIDEyMi43TDUwMi42IDQ1Ny40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDMzMC43IDM3NmMtMzQuNCAyNS4yLTc2LjggNDAtMTIyLjcgNDBDOTMuMSA0MTYgMCAzMjIuOSAwIDIwOFM5My4xIDAgMjA4IDBTNDE2IDkzLjEgNDE2IDIwOHpNMjA4IDM1MmExNDQgMTQ0IDAgMSAwIDAtMjg4IDE0NCAxNDQgMCAxIDAgMCAyODh6IiBmaWxsPSIjZTMwOTIxIi8+PC9zdmc+");
    --upaep-autocomplete-border-radius: 10px;
    --upaep-autocomplete-content-width: 100%;
    --upaep-autocomplete-content-height: auto;
    --upaep-autocomplete-content-margin: 5px 0;
    --upaep-autocomplete-content-padding: .5rem;
    --upaep-autocomplete-content-border-size: 2px;
    --upaep-autocomplete-content-border-style: solid;
    --upaep-autocomplete-content-border-color: var(--upaep-color-border-grey);
    --upaep-autocomplete-content-border-radius: 10px;
    --upaep-autocomplete-content-bg: var(--upaep-color-white);
    --upaep-autocomplete-list-width: 100%;
    --upaep-autocomplete-list-height: auto;
    --upaep-autocomplete-list-maxheight: 250px;
    --upaep-autocomplete-list-padding: .5rem 0;
    --upaep-autocomplete-list-margin: 0;
    --upaep-autocomplete-list-item-width: 100%;
    --upaep-autocomplete-list-item-height: auto;
    --upaep-autocomplete-list-item-padding: .5rem 1rem;
    --upaep-autocomplete-list-item-color: var(--upaep-color-black);
    --upaep-autocomplete-optg-fz: var(--upaep-fz14);
    --upaep-autocomplete-optg-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-optg-color: var(--upaep-color-black);
    --upaep-autocomplete-optg-bg: var(--upaep-color-white);
    --upaep-autocomplete-optg-padding: .5rem 1rem;
    --upaep-autocomplete-opt-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-color: var(--upaep-color-black);
    --upaep-autocomplete-opt-bg: var(--upaep-color-white);
    --upaep-autocomplete-opt-padding: .5rem 1rem;
    --upaep-autocomplete-opt-selected-padding: .5rem 1rem;
    --upaep-autocomplete-opt-selected-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-selected-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-padding: .5rem 1rem;
    --upaep-autocomplete-opt-hover-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-hover-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-hover-bg: var(--colorgrey7);
    --upaep-autocomplete-opt-disabled-padding: .5rem 1rem;
    --upaep-autocomplete-opt-disabled-fz: var(--upaep-fz16);
    --upaep-autocomplete-opt-disabled-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-disabled-bg: var(--colorgrey7);
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--upaep-color-black);
    --upaep-autocomplete-tags-bg: var(--upaep-color-white);
    --upaep-autocomplete-proload-bg: var(--upaep-color-white);
    --upaep-autocomplete-proload-border-radius: 10px;
    --upaep-autocomplete-proload-padding: .5rem;
    --upaep-autocomplete-proload-text-fz: var(--upaep-fz16);
    --upaep-autocomplete-proload-text-fw: var(--upaep-fw-medium);
    --upaep-autocomplete-proload-text-color: var(--upaep-color-black);
    --upaep-autocomplete-proload-spinner-width: 2rem;
    --upaep-autocomplete-proload-spinner-height: 2rem;
    --upaep-autocomplete-proload-spinner-color-primary: var(--upaep-color-red);
    --upaep-autocomplete-proload-spinner-color-secondary: var(--upaep-color-dark-grey);
    --upaep-autocomplete-notify-bg: var(--colorgrey7);
    --upaep-autocomplete-notify-fz: var(--upaep-fz16);
    --upaep-autocomplete-notify-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-notify-color: var(--upaep-color-black);
    --upaep-autocomplete-counter-size: 25px;
    --upaep-autocomplete-counter-padding: .5rem;
    --upaep-autocomplete-counter-border-radius: var(--upaep-autocomplete-counter-size);
    --upaep-autocomplete-counter-bg: ;
    --upaep-autocomplete-counter-color: ;
    --upaep-autocomplete-counter-fz: ;
    --upaep-autocomplete-counter-fw: ;
    --upaep-autocomplete-counter-selected-bg: ;
    --upaep-autocomplete-counter-selected-color: ;
    --upaep-autocomplete-counter-selected-fz: ;
    --upaep-autocomplete-counter-selected-fw: ;
    width: var(--upaep-autocomplete-width);
    height: var(--upaep-autocomplete-height);
    margin: var(--upaep-autocomplete-margin);
    padding: var(--upaep-autocomplete-padding);
    border-radius: var(--upaep-autocomplete-border-radius);
    min-height: 2.65rem;
    position: relative;

    &:hover .upaep__autocomplete-btn .upaep__btn,
    &:hover .upaep__autocomplete-btn .upaep__btn:focus {
        box-shadow: var(--upaep-autocomplete-boxshadow);
    }

    &.__disabled {
        opacity: .5;
        pointer-events: none;
    }

    &:not(.is-edit) {
        .upaep__autocomplete-input {
            /* animation: fadeOut .25s forwards; */
            opacity: 0;
            display: none;
        }
    }

    &.is-edit {
        .upaep__autocomplete-btn .upaep__btn {
            /* animation: fadeOut .25s forwards; */
            opacity: 0;
            display: none;
        }
    }

    .upaep__autocomplete-input:hover:not(:disabled):not([readonly]),
    .upaep__autocomplete-input:focus:not(:disabled):not([readonly]),
    .upaep__autocomplete-input {
        width: 100%;
        height: 2.75rem;
        margin: 0;
        padding: .35rem 2.5rem .35rem .75rem;
        background: var(--upaep-autocomplete-icon) calc(100% - 20px) center transparent no-repeat;
        background-color: var(--upaep-color-white);
        background-size: 22px;
        border-radius: 50px;
        inset: 0;
    }

    &:has(.upaep__input:disabled) {
        opacity: .5;
        pointer-events: none;

        .upaep__autocomplete-btn .upaep__btn {
            --upaep-btn-bg: var(--upaep-color-background);
        }
    }

    &:has(.upaep__input.__rounded) {
        --upaep-autocomplete-proload-border-radius: 50px;

        .upaep__autocomplete-btn .upaep__btn {
            --upaep-btn-border-radius: 50px;
        }
    }

    &>input {
        display: none;
    }

    & small {
        margin: 0 .5rem;
        opacity: .8;
    }

    & .upaep__autocomplete-overlay {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    & .upaep__autocomplete-btn {
        width: 100%;
        height: auto;
        border-radius: 10px;
        position: relative;

        .upaep__btn {
            /* position: absolute; */
            inset: 0;
        }
    }

    &:not(.is-show) .upaep__btn .__close {
        display: none;
    }

    &.is-show {
        .upaep__btn .__open {
            display: none;
        }

        .upaep__autocomplete-btn .upaep__btn {
            animation: fadeOut .3s forwards;
        }
    }

    & .upaep__autocomplete-content {
        width: var(--upaep-autocomplete-content-width);
        height: var(--upaep-autocomplete-content-height);
        margin: var(--upaep-autocomplete-content-margin);
        padding: var(--upaep-autocomplete-content-padding);
        border: var(--upaep-autocomplete-content-border-size) var(--upaep-autocomplete-content-border-style) var(--upaep-autocomplete-content-border-color);
        border-radius: var(--upaep-autocomplete-content-border-radius);
        background: var(--upaep-autocomplete-content-bg);
        overflow: hidden;
        position: absolute;
        z-index: var(--upaep-zindex-autocomplete);
        transition: height .5s;
        animation: a_fadeIn .5s forwards;

        & .upaep__autocomplete-header {
            width: 100%;
            min-height: 40px;
            height: auto;
            border-bottom: 1px solid var(--upaep-color-border-grey);
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>* {
                font-size: var(--upaep-autocomplete-header-fz);
                font-weight: var(--upaep-autocomplete-header-fw);
                color: var(--upaep-autocomplete-header-color);
            }

            & span {
                padding: 0 1rem;
            }

            & i {
                padding: 0 1rem;
                cursor: pointer;

                &:hover {
                    filter: var(--upaep-drop-shadow);
                }
            }
        }

        & .upaep__autocomplete-search {
            width: 100%;
            padding: .5rem;
            position: relative;

            & i {
                color: #191919;
                position: absolute;
                width: 20px;
                height: 20px;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            & input::placeholder {
                color: var(--upaep-color-black) !important;
                font-size: var(--upaep-fz16) !important;
            }

            & .upaep__input.__autocomplete {
                --upaep-input-margin: 0;
                --upaep-input-border-radius: 50px;
                --upaep-input-padding: .35rem 1.5rem .35rem 2rem;
                --upaep-input-focus-bg: var(--upaep-color-white);
            }
        }

        & .upaep__autocomplete-selectall {
            width: 100%;
            display: flex;
            padding: .5rem;
            gap: 5px;

            & .upaep__btn.__selectedall {
                --upaep-btn-width: 100%;
                --upaep-btn-height: 100%;
                --upaep-btn-border-radius: 10px;
                --upaep-btn-border-color: var(--upaep-color-border-grey);
                --upaep-btn-bg: var(--upaep-color-white);
                --upaep-btn-margin: 0;
                min-height: 2rem;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .upaep__label {
                color: var(--upaep-autocomplete-header-color);
            }
        }

        & .upaep__autocomplete-list {
            width: var(--upaep-autocomplete-list-width);
            height: var(--upaep-autocomplete-list-height);
            max-height: var(--upaep-autocomplete-list-maxheight);
            padding: var(--upaep-autocomplete-list-padding);
            margin: var(--upaep-autocomplete-list-margin);
            list-style: none;
            overflow-y: auto;
            scrollbar-color: var(--upaep-color-border-grey) tansparent;
            scrollbar-width: thin;

            .upaep__autocomplete-items {
                padding: 0 0 0 .25rem;

                .upaep__autocomplete-label {
                    font-size: var(--upaep-autocomplete-optg-fz);
                    font-weight: var(--upaep-autocomplete-optg-fw);
                    color: var(--upaep-autocomplete-optg-color);
                    background: var(--upaep-autocomplete-optg-bg);
                    padding: var(--upaep-autocomplete-optg-padding);
                    border-bottom: 1px solid var(--upaep-color-border-grey);
                    cursor: default;

                    &.is-inactive {
                        display: none;
                    }

                    &.is-disabled {
                        opacity: .5;
                    }
                }
            }

            & .upaep__autocomplete-item {
                width: var(--upaep-autocomplete-list-item-width);
                height: var(--upaep-autocomplete-list-item-height);
                padding: var(--upaep-autocomplete-list-item-padding);
                color: var(--upaep-autocomplete-list-item-color);
                min-height: 35px;
                display: flex;
                align-items: center;
                word-wrap: break-word;
                word-break: break-word;

                &.optg {
                    font-size: var(--upaep-autocomplete-optg-fz);
                    font-weight: var(--upaep-autocomplete-optg-fw);
                    color: var(--upaep-autocomplete-optg-color);
                    background: var(--upaep-autocomplete-optg-bg);
                    padding: var(--upaep-autocomplete-optg-padding);
                    border-bottom: 1px solid var(--upaep-color-border-grey);
                    cursor: default;
                }

                &.opt {
                    font-size: var(--upaep-autocomplete-opt-fz);
                    font-weight: var(--upaep-autocomplete-opt-fw);
                    color: var(--upaep-autocomplete-opt-color);
                    background: var(--upaep-autocomplete-opt-bg);
                    padding: var(--upaep-autocomplete-opt-padding);
                    cursor: pointer;

                    &.is-selected {
                        font-size: var(--upaep-autocomplete-opt-selected-fz);
                        font-weight: var(--upaep-autocomplete-opt-selected-fw);
                        color: var(--upaep-autocomplete-opt-selected-color);
                        background: var(--upaep-autocomplete-opt-selected-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                    }

                    &.is-preselect:not(.is-selected):not(.is-disabled),
                    &:hover:not(.is-selected):not(.is-disabled) {
                        font-size: var(--upaep-autocomplete-opt-hover-fz);
                        font-weight: var(--upaep-autocomplete-opt-hover-fw);
                        color: var(--upaep-autocomplete-opt-hover-color);
                        background: var(--upaep-autocomplete-opt-hover-bg);
                    }

                    &.is-disabled {
                        font-size: var(--upaep-autocomplete-opt-disabled-fz);
                        font-weight: var(--upaep-autocomplete-opt-disabled-fw);
                        color: var(--upaep-autocomplete-opt-disabled-color);
                        background: var(--upaep-autocomplete-opt-disabled-bg);
                        border-bottom: 1px solid var(--upaep-gradient-white);
                        opacity: .5;
                        cursor: not-allowed;
                    }
                }
            }
        }

        & .upaep__autocomplete-notify {
            background: var(--upaep-autocomplete-notify-bg);
            font-size: var(--upaep-autocomplete-notify-fz);
            font-weight: var(--upaep-autocomplete-notify-fw);
            color: var(--upaep-autocomplete-notify-color);
            min-height: 2.65rem;
            width: 100%;
            text-align: center;
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    & .upaep__autocomplete-preload {
        background: var(--upaep-autocomplete-proload-bg);
        border: 2px solid var(--upaep-color-border-grey);
        border-radius: var(--upaep-autocomplete-proload-border-radius);
        padding: var(--upaep-autocomplete-proload-padding);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 10;
        cursor: default;

        & .spin_basic:before {
            height: var(--upaep-autocomplete-proload-spinner-width);
            width: var(--upaep-autocomplete-proload-spinner-height);
            border: 6px var(--upaep-autocomplete-proload-spinner-color-primary) solid;
            border-left-color: var(--upaep-autocomplete-proload-spinner-color-secondary);
            content: '';
            display: block;
            -webkit-animation: spin_basic .5s infinite linear;
            animation: spin_basic .5s infinite linear;
            border-radius: 100%;
        }

        & .upaep__autocomplete-spintext {
            font-size: var(--upaep-autocomplete-proload-text-fz);
            font-weight: var(--upaep-autocomplete-proload-text-fw);
            color: var(--upaep-autocomplete-proload-text-color);
        }
    }

    &:not(.is-show) .upaep__autocomplete-content {
        display: none;
    }

    &.__mark .upaep__autocomplete-item {
        display: flex;
        justify-content: space-between;

        &:not(.is-selected) .__mark {
            display: none;
        }
    }

    &.__tag .upaep__autocomplete-tags {
        background: var(--upaep-autocomplete-tags-bg);
        width: 100%;
        border-radius: 10px;
        color: transparent;
        margin: .2rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &:has(.upaep__tag-group.is-inactive) {
            animation: fadeOut .3s forwards;
        }

        .upaep__tag-group.is-inactive,
        .upaep__tag-group:empty {
            animation: fadeOut .3s forwards;
        }
    }

    .upaep__autocomplete-counter {
        width: var(--upaep-autocomplete-counter-size);
        height: var(--upaep-autocomplete-counter-size);
        padding: var(--upaep-autocomplete-counter-padding);
        border-radius: var(--upaep-autocomplete-counter-border-radius);
        background: var(--upaep-autocomplete-counter-bg);
        color: var(--upaep-autocomplete-counter-color);
        font-size: var(--upaep-autocomplete-counter-fz);
        font-weight: var(--upaep-autocomplete-counter-fw);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.is-selected {
        .upaep__autocomplete-counter {
            background: var(--upaep-autocomplete-counter-selected-bg);
            color: var(--upaep-autocomplete-counter-selected-color);
            font-size: var(--upaep-autocomplete-counter-selected-fz);
            font-weight: var(--upaep-autocomplete-counter-selected-fw);
        }
    }

    &:has(.upaep__input.__search) {
        .upaep__btn {
            background: var(--upaep-autocomplete-icon) calc(100% - 20px) center transparent no-repeat;
            background-color: var(--upaep-color-white);
            background-size: 22px;

            &::after {
                display: none;
            }
        }
    }
}

.was-validated,
.__validated {
    .upaep__autocomplete {
        &:has(>input:valid) {
            --upaep-autocomplete-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);

            .upaep__autocomplete-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-success);
            }
        }

        &:has(>input:invalid) {
            --upaep-autocomplete-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

            .upaep__autocomplete-btn .upaep__btn {
                --upaep-btn-border-color: var(--upaep-color-error);
            }
        }
    }
}

.upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-width: 100%;
    --upaep-btn-height: 100%;
    --upaep-btn-border-radius: 10px;
    --upaep-btn-border-size: 2px;
    --upaep-btn-border-color: var(--upaep-color-border-grey);
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-padding: 0 1rem 0 1rem;
    --upaep-btn-margin: 0;
    --upaep-btn-fw: var(--upaep-fw-bold);
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-cont-color: var(--upaep-color-black);
    --upaep-btn-cont-fw: var(--upaep-fw-bold);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-hover-bg: var(--upaep-color-white);
    --upaep-btn-hover-border-size: 2px;
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-disabled-bg: var(--upaep-color-background);
    --upaep-btn-disabled-border-color: var(--upaep-color-background);
    --upaep-autocomplete-btn-mark-size: .45rem;
    --upaep-autocomplete-btn-mark-color: ;
    min-height: 2.65rem;
    position: relative;

    & span {
        width: 100%;
        height: 100%;
        min-height: 2.65rem;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 1rem 0 .5rem;
        overflow: hidden;
        text-align: start;
    }

    &::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: var(--upaep-autocomplete-btn-mark-size) solid var(--upaep-autocomplete-btn-mark-color);
        border-right: var(--upaep-autocomplete-btn-mark-size) solid transparent;
        border-bottom: 0;
        border-left: var(--upaep-autocomplete-btn-mark-size) solid transparent;
        transition: all .5s;
    }
}

.upaep__autocomplete.__dark {
    --upaep-autocomplete-content-border-color: var(--upaep-color-border-grey);
    --upaep-autocomplete-content-bg: var(--colordark);
    --upaep-autocomplete-list-item-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-bg: var(--colordark);
    --upaep-autocomplete-opt-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-bg: var(--colordark);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-hover-bg: var(--colorgrey7);
    --upaep-autocomplete-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-disabled-bg: var(--colorgrey7);
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--upaep-color-white);
    --upaep-autocomplete-tags-bg: var(--colordark);
    --upaep-autocomplete-proload-bg: var(--colordark);
    --upaep-autocomplete-proload-text-color: var(--upaep-color-white);
}

.upaep__autocomplete.__dark .upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-border-color: var(--upaep-color-border-grey);
    --upaep-btn-bg: var(--colordark);
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--colordark);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--upaep-color-white);
}

.upaep__autocomplete.__black {
    --upaep-autocomplete-content-border-color: var(--upaep-color-border-grey);
    --upaep-autocomplete-content-bg: var(--upaep-color-black);
    --upaep-autocomplete-list-item-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-color: var(--upaep-color-white);
    --upaep-autocomplete-optg-bg: var(--upaep-color-black);
    --upaep-autocomplete-opt-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-bg: var(--upaep-color-black);
    --upaep-autocomplete-opt-selected-color: var(--upaep-color-white);
    --upaep-autocomplete-opt-selected-bg: var(--upaep-color-grey);
    --upaep-autocomplete-opt-hover-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-hover-bg: var(--colorgrey7);
    --upaep-autocomplete-opt-disabled-color: var(--upaep-color-dark-grey);
    --upaep-autocomplete-opt-disabled-bg: var(--colorgrey7);
    --upaep-autocomplete-header-fz: var(--upaep-fz14);
    --upaep-autocomplete-header-fw: var(--upaep-fw-bold);
    --upaep-autocomplete-header-color: var(--upaep-color-white);
    --upaep-autocomplete-tags-bg: var(--upaep-color-black);
    --upaep-autocomplete-proload-bg: var(--upaep-color-black);
    --upaep-autocomplete-proload-text-color: var(--upaep-color-white);
}

.upaep__autocomplete.__black .upaep__autocomplete-btn .upaep__btn {
    --upaep-btn-border-color: var(--upaep-color-border-grey);
    --upaep-btn-bg: var(--upaep-color-black);
    --upaep-btn-color: var(--upaep-color-white);
    --upaep-btn-cont-color: var(--upaep-color-white);
    --upaep-btn-hover-bg: var(--upaep-color-black);
    --upaep-btn-hover-border-color: var(--upaep-color-dark-grey);
    --upaep-btn-hover-color: var(--upaep-color-white);
}

/*? ------ Signature ------ */
.upaep__signature {
    --upaep-signature-width: 100%;
    --upaep-signature-height: auto;
    --upaep-signature-content-width: 100%;
    --upaep-signature-content-height: auto;
    --upaep-signature-canvas-bg: var(--upaep-color-white);
    --upaep-signature-canvas-border-size: 1px;
    --upaep-signature-canvas-border-style: solid;
    --upaep-signature-canvas-border-color: var(--upaep-color-border-grey);
    --upaep-signature-canvas-border-radius: 10px;
    --upaep-signature-canvas-margin: 1rem 0;
    --upaep-signature-preview-width: 100%;
    --upaep-signature-preview-height: auto;
    --upaep-signature-preview-bg: var(--upaep-color-white);
    --upaep-signature-preview-border-size: 1px;
    --upaep-signature-preview-border-style: solid;
    --upaep-signature-preview-border-color: var(--upaep-color-border-grey);
    --upaep-signature-preview-border-radius: 10px;
    width: var(--upaep-signature-width);
    height: var(--upaep-signature-height);

    & .upaep__signature-content {
        width: var(--upaep-signature-content-width);
        height: var(--upaep-signature-content-height);
    }

    & .upaep__signature-canvas {
        display: flex;
        justify-content: center;
        align-items: center;

        & .upaep__canvas {
            background: var(--upaep-signature-canvas-bg);
            border: var(--upaep-signature-canvas-border-size) var(--upaep-signature-canvas-border-style) var(--upaep-signature-canvas-border-color);
            border-radius: var(--upaep-signature-canvas-border-radius);
            margin: var(--upaep-signature-canvas-margin);

            &:hover {
                cursor: crosshair;
            }
        }
    }

    & .upaep__signature-group {
        margin: 1rem 0 0 0;
    }

    & .upaep__signature-buttons {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    & .upaep__signature-preview {
        width: var(--upaep-signature-preview-width);
        height: var(--upaep-signature-preview-height);

        & .upaep__signature-preview-content {
            background: var(--upaep-signature-preview-bg);
            width: 100%;
            min-height: 200px;
            display: flex;
            justify-content: center;

            & img {
                width: 100%;
                max-width: 610px;
                border: var(--upaep-signature-preview-border-size) var(--upaep-signature-preview-border-style) var(--upaep-signature-preview-border-color);
                border-radius: var(--upaep-signature-preview-border-radius);
            }
        }
    }
}

.upaep__signature:not(.is-preview) .upaep__signature-preview {
    display: none;
}

.upaep__signature:not(.is-preview) .upaep__btn.__signature.__reuse,
.upaep__signature:not(.is-preview) .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature.is-preview .upaep__signature-canvas {
    display: none;
}

.upaep__signature.is-preview .upaep__btn.__signature.__clear,
.upaep__signature.is-preview .upaep__btn.__signature.__save {
    display: none;
}

.upaep__signature.is-resignature .upaep__btn.__signature.__clear,
.upaep__signature.is-resignature .upaep__btn.__signature.__save,
.upaep__signature.is-resignature .upaep__btn.__signature.__reuse {
    display: block;
}

.upaep__signature.is-resignature .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature.is-saved .upaep__btn.__signature.__clear,
.upaep__signature.is-saved .upaep__btn.__signature.__save,
.upaep__signature.is-saved .upaep__btn.__signature.__reuse,
.upaep__signature.is-saved .upaep__btn.__signature.__resignature {
    display: none;
}

.upaep__signature .__color-range {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 1rem 0;
}

.upaep__signature .__range-signature {
    accent-color: var(--upaep-color-blue-primary);
}

/*? ------ Collapse ------ */
.upaep__collapse:not(.is-show) {
    display: none;
}

.is-collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;

    &.__horizontal {
        width: 0;
        height: auto;
        transition: width 0.35s ease;
    }
}

.upaep__card.__ejemplo {
    --upaep-card-border-size: 1px;
    --upaep-card-border-color: var(--upaep-color-border-grey);
    --upaep-card-margin: 0;
    --upaep-card-width: 100%;
}

/*? ------ Skeleton ------ */
.upaep__skeleton {
    --upaep-skeleton-width: auto;
    --upaep-skeleton-height: auto;
    --upaep-skeleton-margin: 0;
    --upaep-skeleton-padding: 0;
    --upaep-skeleton-border-radius: inherit;
    --upaep-skeleton-bg: linear-gradient(90deg, hsl(0, 0%, 80%) 0px, hsl(0, 0%, 90%) 40px, hsl(0, 0%, 80%) 80px);
    --upaep-skeleton-animation: move;
    --upaep-skeleton-animation-duration: 2s;
    --upaep-skeleton-bg-image: ;
    width: var(--upaep-skeleton-width);
    height: var(--upaep-skeleton-height);
    margin: var(--upaep-skeleton-margin);
    padding: var(--upaep-skeleton-padding);
    background: var(--upaep-skeleton-bg);
    animation: var(--upaep-skeleton-animation) var(--upaep-skeleton-animation-duration) infinite;
    background-size: 300%;
    background-position: 100% 0;
    border-radius: var(--upaep-skeleton-border-radius);
    position: relative;

    &:not(.is-active) {
        display: none;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-skeleton-bg-image) no-repeat center center;
        background-size: 100px 60px;
    }

    &.__icon-img {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDYwLjcgMjguNyAzMiA2NCAzMkg0NDhjMzUuMyAwIDY0IDI4LjcgNjQgNjRWNDE2YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY5NnpNMzIzLjggMjAyLjVjLTQuNS02LjYtMTEuOS0xMC41LTE5LjgtMTAuNXMtMTUuNCAzLjktMTkuOCAxMC41bC04NyAxMjcuNkwxNzAuNyAyOTdjLTQuNi01LjctMTEuNS05LTE4LjctOXMtMTQuMiAzLjMtMTguNyA5bC02NCA4MGMtNS44IDcuMi02LjkgMTcuMS0yLjkgMjUuNHMxMi40IDEzLjYgMjEuNiAxMy42aDk2IDMySDQyNGM4LjkgMCAxNy4xLTQuOSAyMS4yLTEyLjhzMy42LTE3LjQtMS40LTI0LjdsLTEyMC0xNzZ6TTExMiAxOTJhNDggNDggMCAxIDAgMC05NiA0OCA0OCAwIDEgMCAwIDk2eiIvPjwvc3ZnPg==');
    }

    &.__icon-video {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDYwLjcgMjguNyAzMiA2NCAzMkg0NDhjMzUuMyAwIDY0IDI4LjcgNjQgNjRWNDE2YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY5NnpNNDggMzY4djMyYzAgOC44IDcuMiAxNiAxNiAxNkg5NmM4LjggMCAxNi03LjIgMTYtMTZWMzY4YzAtOC44LTcuMi0xNi0xNi0xNkg2NGMtOC44IDAtMTYgNy4yLTE2IDE2em0zNjgtMTZjLTguOCAwLTE2IDcuMi0xNiAxNnYzMmMwIDguOCA3LjIgMTYgMTYgMTZoMzJjOC44IDAgMTYtNy4yIDE2LTE2VjM2OGMwLTguOC03LjItMTYtMTYtMTZINDE2ek00OCAyNDB2MzJjMCA4LjggNy4yIDE2IDE2IDE2SDk2YzguOCAwIDE2LTcuMiAxNi0xNlYyNDBjMC04LjgtNy4yLTE2LTE2LTE2SDY0Yy04LjggMC0xNiA3LjItMTYgMTZ6bTM2OC0xNmMtOC44IDAtMTYgNy4yLTE2IDE2djMyYzAgOC44IDcuMiAxNiAxNiAxNmgzMmM4LjggMCAxNi03LjIgMTYtMTZWMjQwYzAtOC44LTcuMi0xNi0xNi0xNkg0MTZ6TTQ4IDExMnYzMmMwIDguOCA3LjIgMTYgMTYgMTZIOTZjOC44IDAgMTYtNy4yIDE2LTE2VjExMmMwLTguOC03LjItMTYtMTYtMTZINjRjLTguOCAwLTE2IDcuMi0xNiAxNnpNNDE2IDk2Yy04LjggMC0xNiA3LjItMTYgMTZ2MzJjMCA4LjggNy4yIDE2IDE2IDE2aDMyYzguOCAwIDE2LTcuMiAxNi0xNlYxMTJjMC04LjgtNy4yLTE2LTE2LTE2SDQxNnpNMTYwIDEyOHY2NGMwIDE3LjcgMTQuMyAzMiAzMiAzMkgzMjBjMTcuNyAwIDMyLTE0LjMgMzItMzJWMTI4YzAtMTcuNy0xNC4zLTMyLTMyLTMySDE5MmMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ6bTMyIDE2MGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ2NjRjMCAxNy43IDE0LjMgMzIgMzIgMzJIMzIwYzE3LjcgMCAzMi0xNC4zIDMyLTMyVjMyMGMwLTE3LjctMTQuMy0zMi0zMi0zMkgxOTJ6Ii8+PC9zdmc+');
    }

    &.__icon-yt {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxOCIgdmlld0JveD0iMCAwIDU3NiA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNTQ5LjcgMTI0LjFjLTYuMy0yMy43LTI0LjgtNDIuMy00OC4zLTQ4LjZDNDU4LjggNjQgMjg4IDY0IDI4OCA2NFMxMTcuMiA2NCA3NC42IDc1LjVjLTIzLjUgNi4zLTQyIDI0LjktNDguMyA0OC42LTExLjQgNDIuOS0xMS40IDEzMi4zLTExLjQgMTMyLjNzMCA4OS40IDExLjQgMTMyLjNjNi4zIDIzLjcgMjQuOCA0MS41IDQ4LjMgNDcuOEMxMTcuMiA0NDggMjg4IDQ0OCAyODggNDQ4czE3MC44IDAgMjEzLjQtMTEuNWMyMy41LTYuMyA0Mi0yNC4yIDQ4LjMtNDcuOCAxMS40LTQyLjkgMTEuNC0xMzIuMyAxMS40LTEzMi4zczAtODkuNC0xMS40LTEzMi4zem0tMzE3LjUgMjEzLjVWMTc1LjJsMTQyLjcgODEuMi0xNDIuNyA4MS4yeiIvPjwvc3ZnPg==');
    }

    &.__icon-vimeo {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDQ4IDk2YzAtMzUuMy0yOC43LTY0LTY0LTY0SDY0QzI4LjcgMzIgMCA2MC43IDAgOTZWNDE2YzAgMzUuMyAyOC43IDY0IDY0IDY0SDM4NGMzNS4zIDAgNjQtMjguNyA2NC02NFY5NnpNMzE4LjUgMzA5LjVDMjc1IDM2NiAyMzguMiAzOTQuMyAyMDguMSAzOTQuM2MtMTguNyAwLTM0LjQtMTcuMi00Ny4zLTUxLjZjLTMuOC0xMy45LTcuMy0yNi45LTEwLjUtMzljLTE4LjItNjguMy0yOC42LTEwNy40LTQ2LjItMTA3LjRjLTIuNCAwLTEwLjggNS0yNS4xIDE1LjFMNjQgMTkyYzctNi4xIDEzLjktMTIuNCAyMC42LTE4LjVjMjkuMS0yNi4zIDU1LjYtNTAuMyA3My41LTUxLjljMjQuOS0yLjQgNDAuMiAxNC42IDQ2IDUxLjFjMjAuNSAxMjkuNiAyOS42IDE0OS4yIDY2LjggOTAuNWMxMy40LTIxLjIgMjAuNi0zNy4yIDIxLjUtNDguM2MzLjQtMzIuOC0yNS42LTMwLjYtNDUuMi0yMi4yYzE1LjctNTEuNSA0NS44LTc2LjUgOTAuMS03NS4xYzMyLjkgMSA0OC40IDIyLjQgNDYuNSA2NGMtMS40IDMxLjEtMjMuMiA3My44LTY1LjMgMTI3Ljl6Ii8+PC9zdmc+');
    }

    &.__icon-file {
        --upaep-skeleton-bg-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA2NEMwIDI4LjcgMjguNyAwIDY0IDBIMjI0VjEyOGMwIDE3LjcgMTQuMyAzMiAzMiAzMkgzODRWNDQ4YzAgMzUuMy0yOC43IDY0LTY0IDY0SDY0Yy0zNS4zIDAtNjQtMjguNy02NC02NFY2NHptMzg0IDY0SDI1NlYwTDM4NCAxMjh6Ii8+PC9zdmc+');
    }

    &.__glow {
        animation: glow 2s ease-in-out infinite;
    }

    &.__wave {
        mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
        mask-size: 200% 100%;
        animation: wave 2s linear infinite;
    }

    &.__banner {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100%;
        --upaep-skeleton-border-radius: 10px;
    }

    &.__img {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100%;
        --upaep-skeleton-border-radius: 0;
        --upaep-skeleton-margin: 0 0 1rem 0;
    }

    &.__icon {
        --upaep-skeleton-width: 100px;
        --upaep-skeleton-height: 100px;
        --upaep-skeleton-border-radius: 50px;
        --upaep-skeleton-margin: 0 0 1rem 0;
    }

    &.__text {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 15px;
        --upaep-skeleton-border-radius: 10px;
        --upaep-skeleton-margin: 0 0 1rem 0;

        &.__75 {
            --upaep-skeleton-width: 75%;
        }

        &.__50 {
            --upaep-skeleton-width: 50%;
        }

        &.__25 {
            --upaep-skeleton-width: 25%;
        }
    }

    &.__paragraph {
        --upaep-skeleton-width: 100%;
        --upaep-skeleton-height: 100px;
        --upaep-skeleton-border-radius: 10px;
        --upaep-skeleton-margin: 0 0 1rem 0;

        &.__75 {
            --upaep-skeleton-width: 75%;
        }

        &.__50 {
            --upaep-skeleton-width: 50%;
        }

        &.__25 {
            --upaep-skeleton-width: 25%;
        }
    }
}

@keyframes move {
    to {
        background-position: -100%;
    }
}

@keyframes glow {
    50% {
        opacity: .6;
    }
}

@keyframes wave {
    100% {
        mask-position: -200% 0%;
    }
}

/*? ------ Dashboard ------ */
.container__Header {
    width: 100%;
    position: fixed;
    inset: 0 0 auto auto;
    z-index: 10;

    & header.upaep__container__comp_dft {
        --header-width: calc(100% - 240px);
        --header-height: 60px;
        --header-bg: #E30921;
        --header-float: none;
        --header-position: fixed;
        inset: 0 0 auto auto;
        color: var(--upaep-color-white);
        padding: 1.5rem .5rem;
        text-align: center;
        display: flex;
        align-items: center;

        & .upaep__logo_comp_dft {
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;

            & #hamb-menu {
                width: 40px;
                cursor: pointer;
            }
        }

        & .upaep__center__comp_dft {
            width: 100%;
            display: flex;
            justify-content: end;
            align-items: center;
            padding: 0 0 0 2rem;
            gap: 2rem;
        }

        & .upaep__name__comp_dft {
            width: fit-content;
            height: 100%;
            display: flex;
            justify-content: end;
            align-items: center;

            & #upaep__name__comp__user {
                font-size: var(--upaep-fz15);
                font-weight: var(--upaep-fw-bold);
                margin: 0 0 0 1rem;
                color: var(--upaep-color-white);
                padding: 0px 20px;
                cursor: pointer;
                width: max-content;
            }
        }

        & .upaep__icons__comp_dft {
            width: fit-content;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;

            & #icon-logout {
                width: 30px;
                height: 30px;
                background-color: white;
                border-radius: 5px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;

                & #icon_log {
                    width: 70%;
                }
            }
        }
    }
}

.container__Sidebar {
    & .loader_sidebar {
        width: auto;
        position: fixed;
        inset: 10rem auto auto 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        transition: all 0.35s ease-in;
        z-index: 9999;
    }

    & .sidebar {
        position: fixed;
        inset: 0 auto auto 0;
        width: 240px;
        min-height: 100vh;
        height: 100vh;
        background: #52565A;
        padding: 0px .75rem;
        text-align: center;
        box-shadow: 7px 0 60px rgba(0, 0, 0, 0.05);
        transition: width 0.3s ease;
        z-index: 100;

        & .cont-logo {
            height: 60px;
            padding: .5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & .cont-logo-upaep {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: start;
                align-items: center;

                & #logo-sidebar {
                    height: 100%;
                    padding: .25rem;
                    cursor: pointer;
                    border-radius: 10px;
                }
            }

            & #hamb-menu {
                width: 40px;
                cursor: pointer;
                transition: width 1.5s ease;
            }
        }

        & ul {
            width: 100%;
            list-style: none;
            padding: 0;
            margin: 1rem 0rem;
            font-size: var(--upaep-fz15);
            font-weight: var(--upaep-fw-regular);
            color: var(--upaep-color-white);
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-decoration: none;
            gap: 1rem;

            & li {
                min-height: 30px;
                display: flex;
                align-items: center;
                text-align: start;
                padding: .5rem;
                opacity: 1;
                cursor: pointer;
                overflow: hidden;
                transition: background 0.3s ease;
                border-radius: 10px;
                gap: .5rem;

                & img {
                    width: 25px;
                    height: 25px;
                    object-fit: cover;
                }

                & a {
                    text-decoration: none;
                    color: var(--upaep-color-white);
                }

                &:hover {
                    background: #6a6f74;
                }
            }
        }

        & .contenedorInferior {
            position: absolute;
            bottom: 20px;
        }
    }
}

.container__Main {
    transition: padding-left .3s ease;
    padding: 20px 10px 20px 320px;
    margin: 4rem 0 0 0;
    min-height: calc(100vh - 90px);

    &:not(:has(.accesosGeneral)) {
        flex: 1;
    }

    &.opened-sidebar {
        padding: 0px 40px 20px 320px;
    }
}

.container__Footer {
    & footer {
        --footer-bg: #1b1f22;
        --footer-padding: 20px 0 20px 280px;
        --footer-border-top: none;
        color: var(--upaep-color-white);
        text-align: center;
        transition: padding-left 0.3s ease;
        float: none;
        width: auto;

        & p {
            margin: 0;
        }
    }
}

.upaep__dashboard {
    --upaep-dashboard-sidebar-width: 300px;
    --upaep-dashboard-sidebar-height: 100vh;
    --upaep-dashboard-sidebar-bg: #4D4D4D;
    --upaep-dashboard-sidebar-header-width: 100%;
    --upaep-dashboard-sidebar-header-height: 68px;
    --upaep-dashboard-sidebar-header-padding: .5rem;
    --upaep-dashboard-sidebar-header-bg: transparent;
    --upaep-dashboard-sidebar-header-boxshadow: ;
    --upaep-dashboard-sidebar-header-border-bottom-size: 1px;
    --upaep-dashboard-sidebar-header-border-bottom-style: solid;
    --upaep-dashboard-sidebar-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-dashboard-sidebar-body-width: 100%;
    --upaep-dashboard-sidebar-body-height: 100%;
    --upaep-dashboard-sidebar-body-padding: .5rem;
    --upaep-dashboard-sidebar-body-bg: transparent;
    --upaep-dashboard-sidebar-footer-width: 100%;
    --upaep-dashboard-sidebar-footer-height: 68px;
    --upaep-dashboard-sidebar-footer-padding: .5rem;
    --upaep-dashboard-sidebar-footer-bg: transparent;
    --upaep-dashboard-sidebar-footer-boxshadow: ;
    --upaep-dashboard-sidebar-footer-border-top-size: 1px;
    --upaep-dashboard-sidebar-footer-border-top-style: solid;
    --upaep-dashboard-sidebar-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-dashboard-content-width: 100%;
    --upaep-dashboard-content-height: 100vh;
    --upaep-dashboard-content-padding: 0;
    --upaep-dashboard-content-bg: var(--upaep-color-white);
    --upaep-dashboard-content-header-width: 100%;
    --upaep-dashboard-content-header-height: 68px;
    --upaep-dashboard-content-header-padding: .5rem .35rem;
    --upaep-dashboard-content-header-bg: #b90114;
    --upaep-dashboard-content-header-boxshadow: var(--upaep-box-shadow);
    --upaep-dashboard-content-body-width: 100%;
    --upaep-dashboard-content-body-height: 100%;
    --upaep-dashboard-content-body-padding: 1rem;
    --upaep-dashboard-content-body-bg: transparent;
    --upaep-dashboard-content-footer-width: 100%;
    --upaep-dashboard-content-footer-height: 68px;
    --upaep-dashboard-content-footer-padding: .5rem;
    --upaep-dashboard-content-footer-bg: var(--upaep-color-black);
    --upaep-dashboard-content-footer-boxshadow: ;
    --upaep-dashboard-items-width: 100%;
    --upaep-dashboard-items-height: auto;
    --upaep-dashboard-items-margin: 1rem 0;
    --upaep-dashboard-items-padding: 0;
    --upaep-dashboard-item-width: 100%;
    --upaep-dashboard-item-height: auto;
    --upaep-dashboard-item-margin: .5rem 0;
    --upaep-dashboard-item-padding: .5rem .35rem;
    --upaep-dashboard-item-border-radius: 0;
    --upaep-dashboard-item-fz: var(--upaep-fz15);
    --upaep-dashboard-item-fw: var(--upaep-fw-regular);
    --upaep-dashboard-item-color: var(--upaep-color-white);
    --upaep-dashboard-item-hover-bg: var(--upaep-gradient-white);
    --upaep-dashboard-item-border-bottom-size: 1px;
    --upaep-dashboard-item-border-bottom-style: solid;
    --upaep-dashboard-item-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-dashboard-item-content-width: 100%;
    --upaep-dashboard-item-content-height: 0;
    --upaep-dashboard-item-content-bg: #3d3d3d;
    --upaep-dashboard-item-content-padding: 0 .35rem;
    --upaep-dashboard-item-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+');
    width: 100%;
    height: 100%;
    display: flex;

    & .upaep__dashboard-sidebar {
        width: var(--upaep-dashboard-sidebar-width);
        height: var(--upaep-dashboard-sidebar-height);
        background: var(--upaep-dashboard-sidebar-bg);
        transition: width .5s ease;

        & .upaep__dashboard-sidebar-header {
            width: var(--upaep-dashboard-sidebar-header-width);
            height: var(--upaep-dashboard-sidebar-header-height);
            padding: var(--upaep-dashboard-sidebar-header-padding);
            background: var(--upaep-dashboard-sidebar-header-bg);
            box-shadow: var(--upaep-dashboard-sidebar-header-boxshadow);
            border-bottom: var(--upaep-dashboard-sidebar-header-border-bottom-size) var(--upaep-dashboard-sidebar-header-border-bottom-style) var(--upaep-dashboard-sidebar-header-border-bottom-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            gap: 10px;

        }

        & .upaep__dashboard-sidebar-body {
            width: var(--upaep-dashboard-sidebar-body-width);
            height: var(--upaep-dashboard-sidebar-body-height);
            padding: var(--upaep-dashboard-sidebar-body-padding);
            background: var(--upaep-dashboard-sidebar-body-bg);
            content: '';
            overflow-y: auto;

            &::-webkit-scrollbar-track-piece {
                background-color: #d7dadb;
                border-radius: 0;
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: var(--upaep-color-border-grey);
            }

            & .upaep__dashboard-items {
                width: var(--upaep-dashboard-items-width);
                height: var(--upaep-dashboard-items-height);
                margin: var(--upaep-dashboard-items-margin);
                padding: var(--upaep-dashboard-items-padding);
                list-style: none;
                transition: background .5s ease-in-out;

                &:not(.__borderless) {
                    .upaep__dashboard-item {

                        &:not(:last-child):not(.__borderless) {
                            border-bottom: var(--upaep-dashboard-item-border-bottom-size) var(--upaep-dashboard-item-border-bottom-style) var(--upaep-dashboard-item-border-bottom-color);
                        }
                    }
                }

                & .upaep__dashboard-item {
                    width: var(--upaep-dashboard-item-width);
                    height: var(--upaep-dashboard-item-height);
                    margin: var(--upaep-dashboard-item-margin);
                    padding: var(--upaep-dashboard-item-padding);
                    border-radius: var(--upaep-dashboard-item-border-radius);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;

                    & .upaep__dashboard-item-group {
                        text-decoration: none;
                        font-size: var(--upaep-dashboard-item-fz);
                        font-weight: var(--upaep-dashboard-item-fw);
                        color: var(--upaep-dashboard-item-color);
                        min-height: 2rem;
                        display: flex;
                        align-items: start;
                        gap: 5px;

                        .upaep__dashboard-item-icon {
                            width: 2rem;
                            height: 2rem;
                            position: relative;

                            &::before {
                                position: absolute;
                                inset: 0;
                                content: '';
                                background: var(--upaep-dashboard-item-icon) center center no-repeat;
                            }
                        }

                        .upaep__dashboard-item-text {
                            width: 100%;
                            padding: .25rem 0 0 0;
                        }
                    }

                    &:hover:not(.is-active) {
                        --upaep-dashboard-item-border-radius: 10px;
                        --upaep-dashboard-item-fw: var(--upaep-fw-bold);
                        background: var(--upaep-dashboard-item-hover-bg);
                    }

                    &.__item {
                        &>.upaep__dashboard-item-group {
                            &::before {
                                font-family: var(--upaep-ff-fontawesome);
                                content: '\f0d7';
                                position: absolute;
                                inset: auto 15px auto auto;
                                transition: all .5s;
                            }
                        }

                        &.is-active {
                            border-radius: 10px;
                            background: var(--upaep-dashboard-item-content-bg);
                            --upaep-dashboard-item-fw: var(--upaep-fw-regular);

                            &>.upaep__dashboard-item-group {
                                &::before {
                                    rotate: 180deg;
                                }
                            }

                            &>.upaep__dashboard-item-content {
                                --upaep-dashboard-item-content-height: auto;
                                min-height: 2rem;
                                overflow: hidden;
                                transition: all .5s ease;
                            }
                        }

                        .upaep__dashboard-item-content {
                            width: var(--upaep-dashboard-item-content-width);
                            height: var(--upaep-dashboard-item-content-height);
                            background: var(--upaep-dashboard-item-content-bg);
                            padding: var(--upaep-dash-board-item-content-padding);
                            min-height: 0;
                            overflow: hidden;
                            transition: all 0.35s ease;
                        }

                    }
                }
            }
        }

        &:has(.upaep__dashboard-sidebar-header~.upaep__dashboard-sidebar-body) {
            --upaep-dashboard-sidebar-body-height: calc(100vh - 68px);
        }

        &:has(.upaep__dashboard-sidebar-body~.upaep__dashboard-sidebar-footer) {
            --upaep-dashboard-sidebar-body-height: calc(100vh - 136px);
        }

        &:has(.upaep__dashboard-sidebar-body~.upaep__dashboard-sidebar-footer):not(:has(.upaep__dashboard-sidebar-header)) {
            --upaep-dashboard-sidebar-body-height: calc(100vh - 68px);
        }

        & .upaep__dashboard-sidebar-footer {
            width: var(--upaep-dashboard-sidebar-footer-width);
            height: var(--upaep-dashboard-sidebar-footer-height);
            padding: var(--upaep-dashboard-sidebar-footer-padding);
            background: var(--upaep-dashboard-sidebar-footer-bg);
            box-shadow: var(--upaep-dashboard-sidebar-footer-boxshadow);
            border-top: var(--upaep-dashboard-sidebar-footer-border-top-size) var(--upaep-dashboard-sidebar-footer-border-top-style) var(--upaep-dashboard-sidebar-footer-border-top-color);
            display: flex;
            align-items: center;
            flex-shrink: 0;
            gap: 10px;
        }

        &.is-collapsing {
            --upaep-dashboard-sidebar-width: 85px;

            .upaep__dashboard-item-text {
                display: none;
            }
        }
    }

    & .upaep__dashboard-content {
        width: var(--upaep-dashboard-content-width);
        height: var(--upaep-dashboard-content-height);
        padding: var(--upaep-dashboard-content-padding);
        background: var(--upaep-dashboard-content-bg);
        overflow: hidden;

        & .upaep__dashboard-header {
            width: var(--upaep-dashboard-content-header-width);
            height: var(--upaep-dashboard-content-header-height);
            padding: var(--upaep-dashboard-content-header-padding);
            background: var(--upaep-dashboard-content-header-bg);
            box-shadow: var(--upaep-dashboard-content-header-boxshadow);
        }

        & .upaep__dashboard-body {
            width: var(--upaep-dashboard-content-body-width);
            height: var(--upaep-dashboard-content-body-height);
            padding: var(--upaep-dashboard-content-body-padding);
            background: var(--upaep-dashboard-content-body-bg);
            content: '';
            overflow-y: auto;

            &::-webkit-scrollbar-track-piece {
                background-color: #d7dadb;
                border-radius: 0;
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: var(--upaep-color-border-grey);
            }
        }

        &:has(.upaep__dashboard-header~.upaep__dashboard-body) {
            --upaep-dashboard-content-body-height: calc(100vh - 68px);
        }

        &:has(.upaep__dashboard-body~.upaep__dashboard-footer) {
            --upaep-dashboard-content-body-height: calc(100vh - 136px);
        }

        &:has(.upaep__dashboard-body~.upaep__dashboard-footer):not(:has(.upaep__dashboard-header)) {
            --upaep-dashboard-content-body-height: calc(100vh - 68px);
        }

        & .upaep__dashboard-footer {
            width: var(--upaep-dashboard-content-footer-width);
            height: var(--upaep-dashboard-content-footer-height);
            padding: var(--upaep-dashboard-content-footer-padding);
            background: var(--upaep-dashboard-content-footer-bg);
            box-shadow: var(--upaep-dashboard-content-footer-boxshadow);
        }
    }

    &:has(.upaep__dashboard-sidebar.is-collapsing) {

        & .upaep__dashboard-action-menu {
            .upaep__dashboard-action-menu-desktop .upaep__icon {
                transition: all .5s;
                rotate: 180deg;
            }

            .upaep__dashboard-action-menu-mobile {
                transition: all .5s;
            }
        }
    }


    & .upaep__dashboard-action-menu {
        width: 55px;
        cursor: pointer;

        .upaep__dashboard-action-menu-desktop .upaep__icon {
            transition: all .5s;
        }

        .upaep__dashboard-action-menu-mobile {
            transition: all .5s;
        }
    }

    @keyframes fadeOut {
        to {
            display: none;
            opacity: 0;
        }
    }
}

.upaep__dashboard.__light {
    --upaep-dashboard-sidebar-bg: var(--upaep-color-white);
    --upaep-dashboard-sidebar-header-bg: transparent;
    --upaep-dashboard-sidebar-header-boxshadow: ;
    --upaep-dashboard-sidebar-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-dashboard-sidebar-body-bg: transparent;
    --upaep-dashboard-sidebar-footer-bg: transparent;
    --upaep-dashboard-sidebar-footer-boxshadow: ;
    --upaep-dashboard-sidebar-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-dashboard-content-bg: var(--upaep-color-white);
    --upaep-dashboard-content-header-bg: #4D4D4D;
    --upaep-dashboard-content-body-bg: transparent;
    --upaep-dashboard-content-footer-bg: #7c7c7c;
    --upaep-dashboard-content-footer-boxshadow: ;
    --upaep-dashboard-item-hover-bg: #dcdcdc;
    --upaep-dashboard-item-color: var(--upaep-color-black);
    --upaep-dashboard-item-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-dashboard-item-content-bg: #efefef;
    --upaep-dashboard-item-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6Ii8+PC9zdmc+');
}

/*? ------ Sidebar ------ */
.upaep__sidebar {
    --upaep-sidebar-width: 300px;
    --upaep-sidebar-height: 100vh;
    --upaep-sidebar-bg: var(--upaep-color-white);
    --upaep-sidebar-boxshadow: var(--upaep-box-shadow);
    --upaep-sidebar-position: relative;
    --upaep-sidebar-inset: ;
    --upaep-sidebar-header-width: 100%;
    --upaep-sidebar-header-height: 68px;
    --upaep-sidebar-header-padding: .5rem;
    --upaep-sidebar-header-bg: transparent;
    --upaep-sidebar-header-boxshadow: ;
    --upaep-sidebar-header-border-bottom-size: 1px;
    --upaep-sidebar-header-border-bottom-style: solid;
    --upaep-sidebar-header-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-sidebar-body-width: 100%;
    --upaep-sidebar-body-height: 100%;
    --upaep-sidebar-body-padding: .5rem;
    --upaep-sidebar-body-bg: transparent;
    --upaep-sidebar-footer-width: 100%;
    --upaep-sidebar-footer-height: 68px;
    --upaep-sidebar-footer-padding: .5rem;
    --upaep-sidebar-footer-bg: transparent;
    --upaep-sidebar-footer-boxshadow: ;
    --upaep-sidebar-footer-border-top-size: 1px;
    --upaep-sidebar-footer-border-top-style: solid;
    --upaep-sidebar-footer-border-top-color: var(--upaep-color-border-grey);
    --upaep-sidebar-items-width: 100%;
    --upaep-sidebar-items-height: auto;
    --upaep-sidebar-items-margin: 1rem 0;
    --upaep-sidebar-items-padding: 0;
    --upaep-sidebar-item-width: 100%;
    --upaep-sidebar-item-height: auto;
    --upaep-sidebar-item-margin: .5rem 0;
    --upaep-sidebar-item-padding: .5rem .35rem;
    --upaep-sidebar-item-fz: var(--upaep-fz15);
    --upaep-sidebar-item-fw: var(--upaep-fw-regular);
    --upaep-sidebar-item-color: var(--upaep-color-black);
    --upaep-sidebar-item-bg: ;
    --upaep-sidebar-item-border-bottom-size: 1px;
    --upaep-sidebar-item-border-bottom-style: solid;
    --upaep-sidebar-item-border-bottom-color: var(--upaep-color-border-grey);
    --upaep-sidebar-item-border-radius: 0;
    --upaep-sidebar-item-active-fz: var(--upaep-fz15);
    --upaep-sidebar-item-active-fw: var(--upaep-fw-bold);
    --upaep-sidebar-item-active-color: var(--upaep-color-black);
    --upaep-sidebar-item-active-bg: #dcdcdc;
    --upaep-sidebar-item-active-border-radius: 10px;
    --upaep-sidebar-item-hover-fz: var(--upaep-fz15);
    --upaep-sidebar-item-hover-fw: var(--upaep-fw-bold);
    --upaep-sidebar-item-hover-color: var(--upaep-color-black);
    --upaep-sidebar-item-hover-bg: #dcdcdc;
    --upaep-sidebar-item-hover-border-radius: 10px;
    --upaep-sidebar-item-content-width: 100%;
    --upaep-sidebar-item-content-height: 0;
    --upaep-sidebar-item-content-bg: #efefef;
    --upaep-sidebar-item-content-padding: 0 .35rem;
    --upaep-sidebar-item-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6Ii8+PC9zdmc+');


    width: var(--upaep-sidebar-width);
    height: var(--upaep-sidebar-height);
    background: var(--upaep-sidebar-bg);
    box-shadow: var(--upaep-sidebar-boxshadow);
    position: var(--upaep-sidebar-position);
    inset: var(--upaep-sidebar-inset);
    z-index: var(--upaep-zindex-sidebar);
    transition: width .5s ease;

    & .upaep__sidebar-content {
        background: var(--upaep-sidebar-bg);
    }

    & .upaep__sidebar-header {
        width: var(--upaep-sidebar-header-width);
        height: var(--upaep-sidebar-header-height);
        padding: var(--upaep-sidebar-header-padding);
        background: var(--upaep-sidebar-header-bg);
        box-shadow: var(--upaep-sidebar-header-boxshadow);
        border-bottom: var(--upaep-sidebar-header-border-bottom-size) var(--upaep-sidebar-header-border-bottom-style) var(--upaep-sidebar-header-border-bottom-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        gap: 10px;

    }

    & .upaep__sidebar-body {
        width: var(--upaep-sidebar-body-width);
        height: var(--upaep-sidebar-body-height);
        padding: var(--upaep-sidebar-body-padding);
        background: var(--upaep-sidebar-body-bg);
        content: '';
        overflow-y: auto;

        &::-webkit-scrollbar-track-piece {
            background-color: #d7dadb;
            border-radius: 0;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: var(--upaep-color-border-grey);
        }

        & .upaep__sidebar-items {
            width: var(--upaep-sidebar-items-width);
            height: var(--upaep-sidebar-items-height);
            margin: var(--upaep-sidebar-items-margin);
            padding: var(--upaep-sidebar-items-padding);
            list-style: none;
            transition: background .5s ease-in-out;

            &:not(.__borderless) {
                .upaep__sidebar-item {

                    &:not(:last-child):not(.__borderless) {
                        border-bottom: var(--upaep-sidebar-item-border-bottom-size) var(--upaep-sidebar-item-border-bottom-style) var(--upaep-sidebar-item-border-bottom-color);
                    }
                }
            }

            & .upaep__sidebar-item {
                width: var(--upaep-sidebar-item-width);
                height: var(--upaep-sidebar-item-height);
                margin: var(--upaep-sidebar-item-margin);
                padding: var(--upaep-sidebar-item-padding);
                border-radius: var(--upaep-sidebar-item-border-radius);
                background: var(--upaep-sidebar-item-bg);
                cursor: pointer;
                position: relative;
                overflow: hidden;

                & .upaep__sidebar-item-group {
                    text-decoration: none;
                    font-size: var(--upaep-sidebar-item-fz);
                    font-weight: var(--upaep-sidebar-item-fw);
                    color: var(--upaep-sidebar-item-color);
                    min-height: 2rem;
                    display: flex;
                    align-items: start;
                    gap: 5px;

                    .upaep__sidebar-item-icon {
                        width: 2rem;
                        height: 2rem;
                        position: relative;

                        &::before {
                            position: absolute;
                            inset: 0;
                            content: '';
                            background: var(--upaep-sidebar-item-icon) center center no-repeat;
                        }
                    }

                    .upaep__sidebar-item-text {
                        width: 100%;
                        padding: .25rem 0 0 0;
                    }
                }

                &:hover:not(.is-active) {
                    background: var(--upaep-sidebar-item-hover-bg);
                    border-radius: var(--upaep-sidebar-item-hover-border-radius);

                    &>.upaep__sidebar-item-group {
                        font-size: var(--upaep-sidebar-item-hover-fz);
                        font-weight: var(--upaep-sidebar-item-hover-fw);
                        color: var(--upaep-sidebar-item-hover-color);
                    }
                }

                &.is-active {
                    background: var(--upaep-sidebar-item-active-bg);
                    border-radius: var(--upaep-sidebar-item-active-border-radius);

                    &>.upaep__sidebar-item-group {
                        font-size: var(--upaep-sidebar-item-active-fz);
                        font-weight: var(--upaep-sidebar-item-active-fw);
                        color: var(--upaep-sidebar-item-active-color);
                    }
                }

                &.__item {
                    &>.upaep__sidebar-item-group {
                        &::before {
                            font-family: var(--upaep-ff-fontawesome);
                            content: '\f0d7';
                            position: absolute;
                            inset: auto 15px auto auto;
                            transition: all .5s;
                        }
                    }

                    &.is-active {
                        background: var(--upaep-sidebar-item-content-bg);

                        &>.upaep__sidebar-item-group {
                            &::before {
                                rotate: 180deg;
                            }
                        }

                        &>.upaep__sidebar-item-content {
                            --upaep-sidebar-item-content-height: auto;
                            min-height: 2rem;
                            overflow: hidden;
                            transition: all .5s ease;
                        }
                    }

                    .upaep__sidebar-item-content {
                        width: var(--upaep-sidebar-item-content-width);
                        height: var(--upaep-sidebar-item-content-height);
                        background: var(--upaep-sidebar-item-content-bg);
                        padding: var(--upaep-dash-board-item-content-padding);
                        min-height: 0;
                        overflow: hidden;
                        transition: all 0.35s ease;
                    }

                }
            }
        }
    }

    &:has(.upaep__sidebar-header~.upaep__sidebar-body) {
        --upaep-sidebar-body-height: calc(100vh - 68px);
    }

    &:has(.upaep__sidebar-body~.upaep__sidebar-footer) {
        --upaep-sidebar-body-height: calc(100vh - 136px);
    }

    &:has(.upaep__sidebar-body~.upaep__sidebar-footer):not(:has(.upaep__sidebar-header)) {
        --upaep-sidebar-body-height: calc(100vh - 68px);
    }

    & .upaep__sidebar-footer {
        width: var(--upaep-sidebar-footer-width);
        height: var(--upaep-sidebar-footer-height);
        padding: var(--upaep-sidebar-footer-padding);
        background: var(--upaep-sidebar-footer-bg);
        box-shadow: var(--upaep-sidebar-footer-boxshadow);
        border-top: var(--upaep-sidebar-footer-border-top-size) var(--upaep-sidebar-footer-border-top-style) var(--upaep-sidebar-footer-border-top-color);
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 10px;
    }

    &.is-collapsing {
        --upaep-sidebar-width: 85px;

        .upaep__sidebar-item-text {
            display: none;
        }
    }


    &:has(.upaep__sidebar.is-collapsing) {

        & .upaep__sidebar-action-menu {
            .upaep__sidebar-action-menu-desktop .upaep__icon {
                transition: all .5s;
                rotate: 180deg;
            }

            .upaep__sidebar-action-menu-mobile {
                transition: all .5s;
            }
        }
    }


    & .upaep__sidebar-action-menu {
        width: 55px;
        cursor: pointer;

        .upaep__sidebar-action-menu-desktop .upaep__icon {
            transition: all .5s;
        }

        .upaep__sidebar-action-menu-mobile {
            transition: all .5s;
        }
    }

    @keyframes fadeOut {
        to {
            display: none;
            opacity: 0;
        }
    }
}

/*? ------ Tooltip ------ */
[upaep-tooltip] {
    cursor: pointer;
}

.upaep__tooltip {
    --upaep-tooltip-width: auto;
    --upaep-tooltip-height: auto;
    --upaep-tooltip-maxwidth: 200px;
    --upaep-tooltip-padding: .5rem;
    --upaep-tooltip-margin: ;
    --upaep-tooltip-fz: var(--upaep-fz14);
    --upaep-tooltip-fw: var(--upaep-fw-regular);
    --upaep-tooltip-color: var(--upaep-color-white);
    --upaep-tooltip-bg: var(--upaep-color-black);
    --upaep-tooltip-border-size: 2px;
    --upaep-tooltip-border-style: solid;
    --upaep-tooltip-border-color: var(--upaep-color-border-grey);
    --upaep-tooltip-border-radius: .5rem;
    --upaep-tooltip-opacity: .9;
    --upaep-tooltip-zindex: var(--upaep-zindex-tooltip);
    --upaep-tooltip-inset: 0 auto auto 0;
    --upaep-tooltip-arrow-width: 1rem;
    --upaep-tooltip-arrow-height: calc(var(--upaep-tooltip-arrow-width) / 2);
    --upaep-tooltip-arrow-bg: var(--upaep-color-black);
    --upaep-tooltip-arrow-inset: 0 auto auto 0;
    --upaep-tooltip-arrow-border-width: ;
    --upaep-tooltip-arrow-border-color: var(--upaep-tooltip-border-color);
    --upaep-tooltip-header-paddig: .5rem;
    --upaep-tooltip-header-margin: 0;
    --upaep-tooltip-header-bg: #6d6d6d;
    --upaep-tooltip-header-border-radius: .5rem .5rem 0 0;
    --upaep-tooltip-header-fz: var(--upaep-fz14);
    --upaep-tooltip-header-fw: var(--upaep-fw-regular);
    --upaep-tooltip-header-color: var(--upaep-color-white);
    --upaep-tooltip-body-paddig: .5rem;
    --upaep-tooltip-body-margin: 0;
    --upaep-tooltip-body-bg: transparent;
    --upaep-tooltip-body-border-radius: 0 0 .5rem .5rem;
    --upaep-tooltip-body-fz: var(--upaep-fz14);
    --upaep-tooltip-body-fw: var(--upaep-fw-regular);
    --upaep-tooltip-body-color: var(--upaep-color-white);
    max-width: var(--upaep-tooltip-maxwidth);
    margin: var(--upaep-tooltip-margin);
    border: var(--upaep-tooltip-border-size) var(--upaep-tooltip-border-style) var(--upaep-tooltip-border-color);
    border-radius: var(--upaep-tooltip-border-radius);
    background: var(--upaep-tooltip-bg);
    z-index: var(--upaep-tooltip-zindex);
    font-size: var(--upaep-tooltip-fz);
    font-weight: var(--upaep-tooltip-fw);
    color: var(--upaep-tooltip-color);
    inset: var(--upaep-tooltip-inset);
    opacity: var(--upaep-tooltip-opacity);
    position: absolute;
    display: block;
    word-wrap: break-word;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;

    &:not(.is-show) {
        display: none;
    }

    .upaep__tooltip-arrow {
        display: block;
        width: var(--upaep-tooltip-arrow-width);
        height: var(--upaep-tooltip-arrow-height);
        position: absolute;

        &::before,
        &::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
            border-width: var(--upaep-tooltip-arrow-border-width);
        }

        &::before {
            inset: var(--upaep-tooltip-arrow-inset);
        }
    }

    &.__arrow-top,
    &[upaep-tooltip-position="top"] {
        --upaep-tooltip-arrow-inset: 1px auto auto auto;
        --upaep-tooltip-arrow-border-width: var(--upaep-tooltip-arrow-height) calc(var(--upaep-tooltip-arrow-width) * 0.5) 0;

        & .upaep__tooltip-arrow {
            &::before {
                border-top-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-top-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-bottom,
    &[upaep-tooltip-position="bottom"] {
        --upaep-tooltip-arrow-inset: -1px auto auto auto;
        --upaep-tooltip-arrow-border-width: 0 calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height);

        & .upaep__tooltip-arrow {
            &::before {
                border-bottom-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-bottom-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-right,
    &[upaep-tooltip-position="right"] {
        --upaep-tooltip-arrow-inset: auto auto auto -1px;
        --upaep-tooltip-arrow-border-width: calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height) calc(var(--upaep-tooltip-arrow-width) * 0.5) 0;

        & .upaep__tooltip-arrow {
            width: var(--upaep-tooltip-arrow-height);
            height: var(--upaep-tooltip-arrow-width);

            &::before {
                border-right-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-right-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    &.__arrow-left,
    &[upaep-tooltip-position="left"] {
        --upaep-tooltip-arrow-inset: auto auto auto 1px;
        --upaep-tooltip-arrow-border-width: calc(var(--upaep-tooltip-arrow-width) * 0.5) 0 calc(var(--upaep-tooltip-arrow-width) * 0.5) var(--upaep-tooltip-arrow-height);

        & .upaep__tooltip-arrow {
            width: var(--upaep-tooltip-arrow-height);
            height: var(--upaep-tooltip-arrow-width);

            &::before {
                border-left-color: var(--upaep-tooltip-arrow-border-color);
            }

            &::after {
                border-left-color: var(--upaep-tooltip-arrow-bg);
            }
        }
    }

    .upaep__tooltip-inner {
        width: 100%;
        height: 100%;
        padding: var(--upaep-tooltip-padding);
        border-radius: var(--upaep-tooltip-border-radius);
    }

    .upaep__tooltip-content {
        width: 100%;
        height: 100%;
        border-radius: var(--upaep-tooltip-border-radius);
    }

    &:not(:has(.upaep__tooltip-header)):not(:has(.upaep__tooltip-body)) {
        .upaep__tooltip-content {
            padding: var(--upaep-tooltip-padding);
            opacity: var(--upaep-tooltip-opacity);
        }
    }

    .upaep__tooltip-header {
        padding: var(--upaep-tooltip-header-paddig);
        margin: var(--upaep-tooltip-header-margin);
        background: var(--upaep-tooltip-header-bg);
        border-radius: var(--upaep-tooltip-header-border-radius);
        font-size: var(--upaep-tooltip-header-fz);
        font-weight: var(--upaep-tooltip-header-fw);
        color: var(--upaep-tooltip-header-color);
    }

    .upaep__tooltip-body {
        padding: var(--upaep-tooltip-body-paddig);
        margin: var(--upaep-tooltip-body-margin);
        background: var(--upaep-tooltip-body-bg);
        border-radius: var(--upaep-tooltip-body-border-radius);
        font-size: var(--upaep-tooltip-body-fz);
        font-weight: var(--upaep-tooltip-body-fw);
        color: var(--upaep-tooltip-body-color);
    }
}

[data-tooltip],
.__data-tooltip {
    --data-tooltip-maxwidth: 200px;
    --data-tooltip-padding: .35rem .5rem;
    --data-tooltip-margin: 0 .5rem;
    --data-tooltip-border-radius: 10px;
    --data-tooltip-bg: var(--upaep-color-black);
    --data-tooltip-color: var(--upaep-color-white);
    --data-tooltip-fz: var(--upaep-fz14);
    --data-tooltip-inset: 0 0 auto auto;
    position: relative;

    &::after {
        max-width: var(--data-tooltip-maxwidth);
        padding: var(--data-tooltip-padding);
        margin: var(--data-tooltip-margin);
        border-radius: var(--data-tooltip-border-radius);
        background: var(--data-tooltip-bg);
        color: var(--data-tooltip-color);
        font-size: var(--data-tooltip-fz);
        inset: var(--data-tooltip-inset);
        content: attr(data-text);
        position: absolute;
        opacity: .8;
        transition: opacity .5s;
    }

    &:not(:hover)::after {
        display: none;
    }

    &[data-tooltip="bottom"] {
        --data-tooltip-inset: auto auto 0 50%;
    }

    &[data-tooltip="top"] {
        --data-tooltip-inset: 0 auto auto 50%;
    }

    &[data-tooltip="left"] {
        --data-tooltip-inset: 0 auto auto 0;
    }

    &[data-tooltip="right"] {
        --data-tooltip-inset: 0 0 auto auto;
    }
}

/*? ------ Popover ------ */
[upaep-popover] {
    cursor: pointer;
}

.upaep__popover {
    --upaep-popover-width: auto;
    --upaep-popover-height: auto;
    --upaep-popover-maxwidth: 200px;
    --upaep-popover-padding: .5rem;
    --upaep-popover-margin: ;
    --upaep-popover-fz: var(--upaep-fz14);
    --upaep-popover-fw: var(--upaep-fw-regular);
    --upaep-popover-color: var(--upaep-color-white);
    --upaep-popover-bg: var(--upaep-color-black);
    --upaep-popover-border-size: 2px;
    --upaep-popover-border-style: solid;
    --upaep-popover-border-color: var(--upaep-color-border-grey);
    --upaep-popover-border-radius: .5rem;
    --upaep-popover-opacity: .9;
    --upaep-popover-zindex: var(--upaep-zindex-popover);
    --upaep-popover-inset: 0 auto auto 0;
    --upaep-popover-arrow-width: 1rem;
    --upaep-popover-arrow-height: calc(var(--upaep-popover-arrow-width) / 2);
    --upaep-popover-arrow-bg: var(--upaep-color-black);
    --upaep-popover-arrow-inset: 0 auto auto 0;
    --upaep-popover-arrow-border-width: ;
    --upaep-popover-arrow-border-color: var(--upaep-popover-border-color);
    --upaep-popover-header-paddig: .5rem;
    --upaep-popover-header-margin: 0;
    --upaep-popover-header-bg: #6d6d6d;
    --upaep-popover-header-border-radius: .5rem .5rem 0 0;
    --upaep-popover-header-fz: var(--upaep-fz14);
    --upaep-popover-header-fw: var(--upaep-fw-regular);
    --upaep-popover-header-color: var(--upaep-color-white);
    --upaep-popover-body-paddig: .5rem;
    --upaep-popover-body-margin: 0;
    --upaep-popover-body-bg: transparent;
    --upaep-popover-body-border-radius: 0 0 .5rem .5rem;
    --upaep-popover-body-fz: var(--upaep-fz14);
    --upaep-popover-body-fw: var(--upaep-fw-regular);
    --upaep-popover-body-color: var(--upaep-color-white);
    max-width: var(--upaep-popover-maxwidth);
    margin: var(--upaep-popover-margin);
    border: var(--upaep-popover-border-size) var(--upaep-popover-border-style) var(--upaep-popover-border-color);
    border-radius: var(--upaep-popover-border-radius);
    background: var(--upaep-popover-bg);
    z-index: var(--upaep-popover-zindex);
    font-size: var(--upaep-popover-fz);
    font-weight: var(--upaep-popover-fw);
    color: var(--upaep-popover-color);
    inset: var(--upaep-popover-inset);
    opacity: var(--upaep-popover-opacity);
    position: absolute;
    display: block;
    word-wrap: break-word;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;

    &:not(.is-show) {
        display: none;
    }

    .upaep__popover-arrow {
        display: block;
        width: var(--upaep-popover-arrow-width);
        height: var(--upaep-popover-arrow-height);
        position: absolute;

        &::before,
        &::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
            border-width: var(--upaep-popover-arrow-border-width);
        }

        &::before {
            inset: var(--upaep-popover-arrow-inset);
        }
    }

    &.__arrow-top,
    &[upaep-popover-position="top"] {
        --upaep-popover-arrow-inset: 1px auto auto auto;
        --upaep-popover-arrow-border-width: var(--upaep-popover-arrow-height) calc(var(--upaep-popover-arrow-width) * 0.5) 0;

        & .upaep__popover-arrow {
            &::before {
                border-top-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-top-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-bottom,
    &[upaep-popover-position="bottom"] {
        --upaep-popover-arrow-inset: -1px auto auto auto;
        --upaep-popover-arrow-border-width: 0 calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height);

        & .upaep__popover-arrow {
            &::before {
                border-bottom-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-bottom-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-right,
    &[upaep-popover-position="right"] {
        --upaep-popover-arrow-inset: auto auto auto -1px;
        --upaep-popover-arrow-border-width: calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height) calc(var(--upaep-popover-arrow-width) * 0.5) 0;

        & .upaep__popover-arrow {
            width: var(--upaep-popover-arrow-height);
            height: var(--upaep-popover-arrow-width);

            &::before {
                border-right-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-right-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    &.__arrow-left,
    &[upaep-popover-position="left"] {
        --upaep-popover-arrow-inset: auto auto auto 1px;
        --upaep-popover-arrow-border-width: calc(var(--upaep-popover-arrow-width) * 0.5) 0 calc(var(--upaep-popover-arrow-width) * 0.5) var(--upaep-popover-arrow-height);

        & .upaep__popover-arrow {
            width: var(--upaep-popover-arrow-height);
            height: var(--upaep-popover-arrow-width);

            &::before {
                border-left-color: var(--upaep-popover-arrow-border-color);
            }

            &::after {
                border-left-color: var(--upaep-popover-arrow-bg);
            }
        }
    }

    .upaep__popover-inner {
        width: 100%;
        height: 100%;
        padding: var(--upaep-popover-padding);
        border-radius: var(--upaep-popover-border-radius);
    }

    .upaep__popover-content {
        width: 100%;
        height: 100%;
        border-radius: var(--upaep-popover-border-radius);
    }

    &:not(:has(.upaep__popover-header)):not(:has(.upaep__popover-body)) {
        .upaep__popover-content {
            padding: var(--upaep-popover-padding);
            opacity: var(--upaep-popover-opacity);
        }
    }

    .upaep__popover-header {
        padding: var(--upaep-popover-header-paddig);
        margin: var(--upaep-popover-header-margin);
        background: var(--upaep-popover-header-bg);
        border-radius: var(--upaep-popover-header-border-radius);
        font-size: var(--upaep-popover-header-fz);
        font-weight: var(--upaep-popover-header-fw);
        color: var(--upaep-popover-header-color);
    }

    .upaep__popover-body {
        padding: var(--upaep-popover-body-paddig);
        margin: var(--upaep-popover-body-margin);
        background: var(--upaep-popover-body-bg);
        border-radius: var(--upaep-popover-body-border-radius);
        font-size: var(--upaep-popover-body-fz);
        font-weight: var(--upaep-popover-body-fw);
        color: var(--upaep-popover-body-color);
    }
}

/*? ------ Slide ------ */
.upaep__slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: .5rem;

    .upaep__slide-item {
        position: relative;
        inset: 0;
        float: left;
        width: 100%;
        margin-right: -100%;
        backface-visibility: hidden;
        transition: transform .6s ease-in-out;
    }

    .upaep__slide-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-clip: padding-box;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: .5rem;
        outline: 0;
        width: 100%;
        height: 100%;
    }

    .upaep__slide-header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        border-top-left-radius: calc(.5rem - (1px));
        border-top-right-radius: calc(.5rem - (1px));
    }

    .upaep__slide-footer {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        padding: calc(1rem - .5rem * .5);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom-right-radius: calc(.5rem - (1px));
        border-bottom-left-radius: calc(.5rem - (1px));
    }

    .upaep__slide-body {
        position: relative;
        flex: 1 1 auto;
        padding: 1rem;
    }

    .upaep__slide-show {
        width: 100%;
        height: auto;
        padding: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__slide-close {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border: 2px solid;
        margin: 5px;
        font-size: var(--upaep-fz20);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .upaep__slide-btn.__top-right,
    .upaep__slide-close.__top-right {
        position: absolute;
        inset: 0 0 auto auto;
    }

    .upaep__slide-close.__top-left,
    .upaep__slide-btn.__top-left {
        position: absolute;
        inset: 0 auto auto 0;
    }

    .upaep__slide-close.__top-center,
    .upaep__slide-btn.__top-center {
        position: absolute;
        inset: 0 auto auto 50%;
    }

    .upaep__slide-close.__bottom-right,
    .upaep__slide-btn.__bottom-right {
        position: absolute;
        inset: auto 0 0 auto;
    }

    .upaep__slide-close.__bottom-left,
    .upaep__slide-btn.__bottom-left {
        position: absolute;
        inset: auto 0 auto 0;
    }

    .upaep__slide-close.__bottom-center,
    .upaep__slide-btn.__bottom-center {
        position: absolute;
        inset: auto 0 auto 50%;
    }

    .is-slide_inright {
        animation: 1s slide_inright both;
    }

    .is-slide_outright {
        animation: 1s slide_outright both;
    }

    .is-slide_inleft {
        animation: 1s slide_inleft both;
    }

    .is-slide_outleft {
        animation: 1s slide_outleft both;
    }

    .upaep__slide-left:not(.is-active) {
        transform: translateX(-150%);
    }

    .upaep__slide-right:not(.is-active) {
        transform: translateX(150%);
    }

    @keyframes slide_inright {
        0% {
            transform: translate3d(100%, 0, 0);
            visibility: visible;
        }

        100% {
            transform: translateZ(0);
        }
    }

    @keyframes slide_outright {
        0% {
            transform: translateZ(0);
        }

        100% {
            transform: translate3d(100%, 0, 0);
            visibility: hidden;
        }
    }

    @keyframes slide_inleft {
        0% {
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }

        100% {
            transform: translateZ(0);
        }
    }

    @keyframes slide_outleft {
        0% {
            transform: translateZ(0);
        }

        100% {
            transform: translate3d(-100%, 0, 0);
            visibility: hidden;
        }
    }
}

/*? ------ Splide ------ */
.upaep__splide {
    --upaep-splide-width: 100%;
    --upaep-splide-height: 100vh;
    --upaep-splide-margin: 0 auto;
    --upaep-splide-padding: 0;
    --upaep-splide-inner-width: 100%;
    --upaep-splide-inner-height: 100%;
    --upaep-splide-inner-margin: 0;
    --upaep-splide-inner-padding: 0;
    --upaep-splide-inner-transition: transform .5s ease-in;
    --upaep-splide-item-width: 100%;
    --upaep-splide-item-height: 100%;
    --upaep-splide-item-margin: 0;
    --upaep-splide-item-padding: 1rem;
    --upaep-splide-item-transition: transform .5s ease-in;
    width: var(--upaep-splide-width);
    height: var(--upaep-splide-height);
    margin: var(--upaep-splide-margin);
    padding: var(--upaep-splide-padding);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.is-toLeft {
        .upaep__splide-inner {
            &.is-change {
                transform: translate(-100%, 0);
            }
        }
    }

    &.is-toRight {
        .upaep__splide-inner {
            transform: translate(-100%, 0);

            &.is-change {
                transform: translate(0, 0);
            }
        }
    }

    .upaep__splide-inner {
        width: var(--upaep-splide-inner-width);
        height: var(--upaep-splide-inner-height);
        margin: var(--upaep-splide-inner-margin);
        padding: var(--upaep-splide-inner-padding);
        transition: var(--upaep-splide-inner-transition);
        position: relative;
        z-index: 1;
        display: flex;
        box-sizing: content-box;

        &.is-change {
            transform: translate(-100%, 0);
        }
    }

    .upaep__splide-item {
        width: var(--upaep-splide-item-width);
        height: var(--upaep-splide-item-height);
        margin: var(--upaep-splide-item-margin);
        padding: var(--upaep-splide-item-padding);
        transition: var(--upaep-splide-item-transition);
        flex-shrink: 0;
        position: relative;
        display: block;
    }

    &.__vertical {
        &.is-toTop {
            .upaep__splide-inner {
                &.is-change {
                    transform: translate(0, -100%);
                }
            }
        }

        &.is-toBottom {
            .upaep__splide-inner {
                transform: translate(0, -100%);

                &.is-change {
                    transform: translate(0, 0);
                }
            }
        }

        .upaep__splide-inner {
            flex-direction: column;

            &.is-change {
                transform: translate(0, -100%);
            }
        }
    }


}

/*? ------ carousel ------ */
.upaep__carousel {
    --upaep-slider-width: 100%;
    --upaep-slider-height: 100%;
    --upaep-slider-margin: 0 auto;
    --upaep-slider-padding: 0;
    --upaep-slider-bg: ;
    --upaep-slider-wrapper-width: 100%;
    --upaep-slider-wrapper-height: 100%;
    --upaep-slider-wrapper-padding: 0;
    --upaep-slider-wrapper-margin: 0;
    --upaep-slider-wrapper-transition-timing: ;
    --upaep-slider-slide-width: 100%;
    --upaep-slider-slide-height: 100%;
    --upaep-slider-slide-padding: 0;
    --upaep-slider-slide-margin: 0 10px 0 0;
    --upaep-slider-slide-bg: ;
    --upaep-slider-navigation-size: 30px;
    --upaep-slider-navigation-fz: var(--upaep-fz30);
    --upaep-slider-navigation-margin: .5rem;
    --upaep-slider-navigation-color: var(--upaep-color-white);
    --upaep-slider-navigation-bg: ;
    --upaep-slider-navigation-next-inset: 50% 10px auto auto;
    --upaep-slider-navigation-prev-inset: 50% auto auto 10px;
    --upaep-slider-pagination-width: 100%;
    --upaep-slider-pagination-inset: auto auto 10px 0;
    --upaep-slider-pagination-bullet-width: 15px;
    --upaep-slider-pagination-bullet-height: 15px;
    --upaep-slider-pagination-bullet-margin: 0;
    --upaep-slider-pagination-bullet-border-radius: 50%;
    --upaep-slider-pagination-bullet-bg: var(--upaep-color-border-grey);
    --upaep-slider-pagination-bullet-opacity: .5;
    --upaep-slider-pagination-bullet-active-bg: var(--upaep-color-dark-grey);
    --upaep-slider-pagination-bullet-active-opacity: 1;
    width: var(--upaep-slider-width);
    height: var(--upaep-slider-height);
    margin: var(--upaep-slider-margin);
    padding: var(--upaep-slider-padding);
    background: var(--upaep-slider-bg);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.__vertical {
        touch-action: pan-x;

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

    &:not(.__vertical) {
        touch-action: pan-y;
    }

    &.__autoheight {
        --upaep-slider-height: auto;
        --upaep-slider-slide-height: auto;

        .upaep__carousel-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }
    }

    .upaep__carousel-wrapper {
        width: var(--upaep-slider-wrapper-width);
        height: var(--upaep-slider-wrapper-height);
        padding: var(--upaep-slider-wrapper-padding);
        margin: var(--upaep-slider-wrapper-margin);
        position: relative;
        z-index: 1;
        display: flex;
        transition: transform .3s;
        box-sizing: content-box;
    }

    .upaep__carousel-slide {
        width: var(--upaep-slider-slide-width);
        height: var(--upaep-slider-slide-height);
        padding: var(--upaep-slider-slide-padding);
        margin: var(--upaep-slider-slide-margin);
        background: var(--upaep-slider-slide-bg);
        flex-shrink: 0;
        position: relative;
        transition-property: transform;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__carousel-next,
    .upaep__carousel-prev {
        position: absolute;
        width: calc(var(--upaep-slider-navigation-size));
        height: var(--upaep-slider-navigation-size);
        margin: var(--upaep-slider-navigation-margin);
        color: var(--upaep-slider-navigation-color);
        background: var(--upaep-slider-navigation-bg);
        font-size: var(--upaep-slider-navigation-fz);
        filter: var(--upaep-drop-shadow);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &.__disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none
        }

        &.__hidden {
            opacity: 0;
            cursor: auto;
            pointer-events: none
        }
    }

    .upaep__carousel-next {
        inset: var(--upaep-slider-navigation-next-inset);
    }

    .upaep__carousel-prev {
        inset: var(--upaep-slider-navigation-prev-inset);
    }

    .thick-arrow-left {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(135deg);
    }

    .thick-arrow-right {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(315deg);
    }

    .thick-arrow-down {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(45deg);
    }

    .thick-arrow-up {
        width: 25px;
        height: 25px;
        border: 10px solid #333;
        border-left: 0;
        border-top: 0;
        transform: rotate(225deg);
    }

    .upaep__carousel-pagination {
        width: var(--upaep-slider-pagination-width);
        inset: var(--upaep-slider-pagination-inset);
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;

        &.__hidden {
            opacity: 0;
        }

        &.__disabled {
            display: none;
        }

        &.__dynamic {
            overflow: hidden;
            font-size: 0;
        }

        &.__clickeable {
            .upaep__carousel-bullet {
                cursor: pointer;
            }
        }

        &:not(.__no-clickeable) {
            .upaep__carousel-bullet {
                cursor: pointer;
            }
        }

        &.__vertical {
            --upaep-slider-pagination-inset: 50% 10px auto auto;
            --upaep-slider-pagination-bullet-margin: 5px;

            .upaep__carousel-bullet {
                transform: translate3d(0px, -50%, 0);
            }
        }

        .upaep__carousel-bullet {
            width: var(--upaep-slider-pagination-bullet-width);
            height: var(--upaep-slider-pagination-bullet-height);
            margin: var(--upaep-slider-pagination-bullet-margin);
            border-radius: var(--upaep-slider-pagination-bullet-border-radius);
            background: var(--upaep-slider-pagination-bullet-bg);
            opacity: var(--upaep-slider-pagination-bullet-opacity);
            filter: var(--upaep-drop-shadow);
            display: inline-block;

            &.is-active {
                background: var(--upaep-slider-pagination-bullet-active-bg);
                opacity: var(--upaep-slider-pagination-bullet-active-opacity);
            }

            &:only-child {
                display: none;
            }
        }
    }

}

/*? ------ slider ------ */
.upaep__slider {
    --upaep-slider-width: 100%;
    --upaep-slider-height: 100%;
    --upaep-slider-margin: 0 auto;
    --upaep-slider-padding: 0;
    --upaep-slider-bg: var(--upaep-color-white);
    --upaep-slider-border-radius: 10px;
    --upaep-slider-wrapper-width: 100%;
    --upaep-slider-wrapper-height: 100%;
    --upaep-slider-wrapper-padding: 0;
    --upaep-slider-wrapper-margin: 0;
    --upaep-slider-wrapper-transition-timing: ;
    --upaep-slider-slide-width: 100%;
    --upaep-slider-slide-height: 100%;
    --upaep-slider-slide-padding: 0;
    --upaep-slider-slide-margin: 0 10px 0 0;
    --upaep-slider-slide-bg: var(--upaep-color-tenue-gray);
    --upaep-slider-navigation-size: 30px;
    --upaep-slider-navigation-fz: var(--upaep-fz30);
    --upaep-slider-navigation-margin: .5rem;
    --upaep-slider-navigation-color: var(--upaep-color-dark-grey);
    --upaep-slider-navigation-bg: ;
    --upaep-slider-navigation-next-inset: 45% 10px auto auto;
    --upaep-slider-navigation-prev-inset: 45% auto auto 10px;
    --upaep-slider-pagination-width: 100%;
    --upaep-slider-pagination-inset: auto auto 10px 0;
    --upaep-slider-pagination-bullet-width: 15px;
    --upaep-slider-pagination-bullet-height: 15px;
    --upaep-slider-pagination-bullet-margin: 0 5px;
    --upaep-slider-pagination-bullet-border-radius: 50%;
    --upaep-slider-pagination-bullet-bg: var(--upaep-color-border-grey);
    --upaep-slider-pagination-bullet-opacity: .5;
    --upaep-slider-pagination-bullet-active-bg: var(--upaep-color-dark-grey);
    --upaep-slider-pagination-bullet-active-opacity: 1;
    --upaep-slider-pagination-bullet-scale: ;
    --upaep-slider-pagination-bullet-scale-active: 1;
    --upaep-slider-pagination-bullet-scale-active-next: .8;
    --upaep-slider-pagination-bullet-scale-active-next-next: .6;
    --upaep-slider-pagination-bullet-scale-active-prev: .8;
    --upaep-slider-pagination-bullet-scale-active-prev-prev: .6;
    width: var(--upaep-slider-width);
    height: var(--upaep-slider-height);
    margin: var(--upaep-slider-margin);
    padding: var(--upaep-slider-padding);
    background: var(--upaep-slider-bg);
    border-radius: var(--upaep-slider-border-radius);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.__vertical {
        touch-action: pan-x;

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

    &:not(.__vertical) {
        touch-action: pan-y;
    }

    &.__autoheight {
        --upaep-slider-height: auto;
        --upaep-slider-slide-height: auto;

        .upaep__slider-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }
    }

    &.__grid {
        &>.upaep__slider-wrapper {
            flex-wrap: wrap;
            flex-direction: column;
        }

        .upaep__slider-slide {
            transition: all .5s;
        }
    }

    &.__fade {
        &>.upaep__slider-wrapper {
            transform: none !important;
        }

        .upaep__slider-slide {
            animation: a_fadeIn .5s ease-in;
            position: absolute;

            &:not(.is-active) {
                display: none;
            }
        }
    }

    .upaep__slider-wrapper {
        width: var(--upaep-slider-wrapper-width);
        height: var(--upaep-slider-wrapper-height);
        padding: var(--upaep-slider-wrapper-padding);
        margin: var(--upaep-slider-wrapper-margin);
        position: relative;
        z-index: 1;
        display: flex;
        transition: transform .3s;
        box-sizing: content-box;
    }

    .upaep__slider-slide {
        width: var(--upaep-slider-slide-width);
        height: var(--upaep-slider-slide-height);
        padding: var(--upaep-slider-slide-padding);
        margin: var(--upaep-slider-slide-margin);
        background: var(--upaep-slider-slide-bg);
        flex-shrink: 0;
        position: relative;
        transition-property: transform;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upaep__slider-next,
    .upaep__slider-prev {
        position: absolute;
        width: calc(var(--upaep-slider-navigation-size));
        height: var(--upaep-slider-navigation-size);
        margin: var(--upaep-slider-navigation-margin);
        color: var(--upaep-slider-navigation-color);
        background: var(--upaep-slider-navigation-bg);
        font-size: var(--upaep-slider-navigation-fz);
        filter: var(--upaep-drop-shadow);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &.__disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none
        }

        &.__hidden {
            opacity: 0;
            cursor: auto;
            pointer-events: none
        }
    }

    .upaep__slider-next {
        inset: var(--upaep-slider-navigation-next-inset);
    }

    .upaep__slider-prev {
        inset: var(--upaep-slider-navigation-prev-inset);
    }

    .upaep__slider-pagination {
        width: var(--upaep-slider-pagination-width);
        inset: var(--upaep-slider-pagination-inset);
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;

        &.__hidden {
            opacity: 0;
        }

        &.__disabled {
            display: none;
        }

        &.__dynamic {
            overflow: hidden;
            font-size: 0;
        }

        &.__clickeable {
            .upaep__slider-bullet {
                cursor: pointer;
            }
        }

        &:not(.__no-clickeable) {
            .upaep__slider-bullet {
                cursor: pointer;
            }
        }

        &.__vertical {
            --upaep-slider-pagination-inset: 50% 10px auto auto;
            --upaep-slider-pagination-bullet-margin: 5px;

            .upaep__slider-bullet {
                transform: translate3d(0px, -50%, 0);
            }
        }

        &.__dynamic {
            padding: .5rem 0;

            .upaep__slider-bullet {
                transition: all .5s ease-in;

                &.is-active {
                    scale: var(--upaep-slider-pagination-bullet-scale-active);
                }

                &.is-active-next {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-next);
                }

                &.is-active-next-next {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-next-next);
                }

                &.is-active-prev {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-prev);
                }

                &.is-active-prev-prev {
                    scale: var(--upaep-slider-pagination-bullet-scale-active-prev-prev);
                }

                &:not(.is-active):not(.is-active-next):not(.is-active-next-next):not(.is-active-prev):not(.is-active-prev-prev) {
                    display: none;
                }
            }
        }

        .upaep__slider-bullet {
            width: var(--upaep-slider-pagination-bullet-width);
            height: var(--upaep-slider-pagination-bullet-height);
            margin: var(--upaep-slider-pagination-bullet-margin);
            border-radius: var(--upaep-slider-pagination-bullet-border-radius);
            background: var(--upaep-slider-pagination-bullet-bg);
            opacity: var(--upaep-slider-pagination-bullet-opacity);
            scale: var(--upaep-slider-pagination-bullet-scale);
            filter: var(--upaep-drop-shadow);
            display: inline-block;
            transition: all 1s ease-in;

            &.is-active {
                background: var(--upaep-slider-pagination-bullet-active-bg);
                opacity: var(--upaep-slider-pagination-bullet-active-opacity);
                transition: all 1s ease-in;
            }

            &:only-child {
                display: none;
            }
        }
    }

}

/*? ------ Navbar ------ */
.upaep__navbar {
    --upaep-navbar-width: 100%;
    --upaep-navbar-height: auto;
    --upaep-navbar-padding: .5rem .35rem;
    --upaep-navbar-margin: 0;
    --upaep-navbar-bg: var(--upaep-color-white);
    --upaep-navbar-boxshadow: var(--upaep-box-shadow);
    --upaep-navbar-brand-fz: var(--upaep-fz16);
    --upaep-navbar-brand-fw: var(--upaep-fz-regular);
    --upaep-navbar-brand-color: var(--upaep-color-black);
    --upaep-navbar-brand-bg: transparent;
    --upaep-navbar-items-width: auto;
    --upaep-navbar-items-height: auto;
    --upaep-navbar-items-padding: .5rem;
    --upaep-navbar-items-margin: 0;
    --upaep-navbar-item-padding: .5rem .35rem;
    --upaep-navbar-item-margin: 0;
    --upaep-navbar-item-fz: var(--upaep-fz16);
    --upaep-navbar-item-fw: var(--upaep-fz-regular);
    --upaep-navbar-item-color: var(--upaep-color-black);
    --upaep-navbar-item-bg: transparent;
    --upaep-navbar-item-hover-fz: var(--upaep-fz16);
    --upaep-navbar-item-hover-fw: var(--upaep-fz-regular);
    --upaep-navbar-item-hover-color: var(--upaep-color-black);
    --upaep-navbar-item-hover-bg: transparent;
    --upaep-navbar-item-active-fz: var(--upaep-fz16);
    --upaep-navbar-item-active-fw: var(--upaep-fz-regular);
    --upaep-navbar-item-active-color: var(--upaep-color-black);
    --upaep-navbar-item-active-bg: transparent;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .upaep__navbar-content {
        width: var(--upaep-navbar-width);
        height: var(--upaep-navbar-height);
        padding: var(--upaep-navbar-padding);
        margin: var(--upaep-navbar-margin);
        background: var(--upaep-navbar-bg);
        box-shadow: var(--upaep-navbar-boxshadow);
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .upaep__navbar-brand {
        text-decoration: none;
        font-size: var(--upaep-navbar-brand-fz);
        font-weight: var(--upaep-navbar-brand-fw);
        color: var(--upaep-navbar-brand-color);
        background: var(--upaep-navbar-brand-bg);
    }

    .upaep__navbar-collapse {
        background: var(--upaep-navbar-bg);
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
    }

    .upaep__navbar-items {
        width: var(--upaep-navbar-items-width);
        height: var(--upaep-navbar-items-height);
        padding: var(--upaep-navbar-items-padding);
        margin: var(--upaep-navbar-items-margin);
        display: flex;
        list-style: none;
        gap: .5rem;

        .upaep__navbar-item,
        .upaep__navbar-link {
            padding: var(--upaep-navbar-item-padding);
            margin: var(--upaep-navbar-item-margin);
            font-size: var(--upaep-navbar-item-fz);
            font-weight: var(--upaep-navbar-item-fw);
            color: var(--upaep-navbar-item-color);
            background: var(--upaep-navbar-item-bg);
            text-decoration: none;

            &:hover:not(.is-active) {
                background: var(--upaep-navbar-item-hover-bg);

                &:first-child {
                    font-size: var(--upaep-navbar-item-hover-fz);
                    font-weight: var(--upaep-navbar-item-hover-fw);
                    color: var(--upaep-navbar-item-hover-color);
                }
            }

            &.is-active {
                font-size: var(--upaep-navbar-item-active-fz);
                font-weight: var(--upaep-navbar-item-active-fw);
                color: var(--upaep-navbar-item-active-color);
                background: var(--upaep-navbar-item-active-bg);
            }
        }
    }
}

/** ------- nuevo ------- */
.upaep__navbar.__menu {
    --upaep-navbar-items-padding: 0 .5rem;
    --upaep-navbar-item-fz: var(--upaep-fz20);
    --upaep-navbar-item-color: var(--upaep-color-dark-grey);
    --upaep-navbar-item-hover-fz: var(--upaep-fz20);
    --upaep-navbar-item-hover-color: var(--upaep-color-dark-grey);
    --upaep-navbar-item-active-fz: var(--upaep-fz20);
    --upaep-navbar-item-active-color: var(--upaep-color-dark-grey);


    --upaep-navbar-logo-width: 120px;
    --upaep-navbar-logo-height: 100%;
    --upaep-navbar-principal-width: 100%;
    --upaep-navbar-principal-height: 28px;
    --upaep-navbar-principal-padding: .5rem 1rem;
    --upaep-navbar-principal-bg: var(--upaep-color-black);
    --upaep-navbar-menu-principal-color: var(--upaep-color-white);
    --upaep-navbar-menu-principal-fz: var(--upaep-fz12);
    --upaep-navbar-menu-principal-fw: var(--upaep-fw-regular);
    --upaep-navbar-btn-mark-size: .45em;
    --upaep-navbar-btn-mark-color: ;
    --upaep-navbar-primary-width: 100%;
    --upaep-navbar-primary-height: auto;
    --upaep-navbar-primary-padding: 0;
    --upaep-navbar-primary-bg: #E6E6E6;
    --upaep-navbar-primary-title-color: var(--upaep-color-black);
    --upaep-navbar-primary-title-fz: var(--upaep-fz24);
    --upaep-navbar-primary-title-fw: var(--upaep-fw-bold);
    --upaep-navbar-secondary-width: 100%;
    --upaep-navbar-secondary-height: 47px;
    --upaep-navbar-secondary-padding: 0 1.25rem;
    --upaep-navbar-secondary-bg: var(--upaep-color-black);
    --upaep-navbar-secondary-title-color: var(--upaep-color-white);
    --upaep-navbar-secondary-title-fz: var(--upaep-fz20);
    --upaep-navbar-secondary-title-fw: var(--upaep-fw-bold);

    .upaep__navbar-principal {
        width: var(--upaep-navbar-principal-width);
        height: var(--upaep-navbar-principal-height);
        padding: var(--upaep-navbar-principal-padding);
        background: var(--upaep-navbar-principal-bg);

        .upaep__navbar-menu-principal {
            color: var(--upaep-navbar-menu-principal-color);
            font-size: var(--upaep-navbar-menu-principal-fz);
            font-weight: var(--upaep-navbar-menu-principal-fw);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-width: 90px;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: 0;
                --upaep-btn-border-radius: 5px;
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-cont-color: var(--upaep-color-white);
                --upaep-btn-bg: none;
                --upaep-btn-border-color: none;
                --upaep-btn-hover-color: #dee2e6;
                --upaep-btn-hover-bg: none;
                --upaep-btn-hover-border-color: none;
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: none;
                --upaep-btn-disabled-border-color: none;

                &::after {
                    display: inline-block;
                    margin-left: 0.255em;
                    vertical-align: 0.255em;
                    content: "";
                    border-top: var(--upaep-navbar-btn-mark-size) solid var(--upaep-navbar-btn-mark-color);
                    border-right: var(--upaep-navbar-btn-mark-size) solid transparent;
                    border-bottom: 0;
                    border-left: var(--upaep-navbar-btn-mark-size) solid transparent;
                    transition: transform .25s ease-in;
                }

                /* &:hover::after {
                    transform: rotate(-180deg);
                } */
            }

        }
    }

    .upaep__navbar-primary {
        width: var(--upaep-navbar-primary-width);
        height: var(--upaep-navbar-primary-height);
        padding: var(--upaep-navbar-primary-padding);
        background: var(--upaep-navbar-primary-bg);
        display: flex;
        align-items: center;
        gap: 2rem;

        .upaep__navbar-logo {
            width: var(--upaep-navbar-logo-width);
            height: var(--upaep-navbar-logo-height);
            margin: 0 0 0 1rem;
        }

        .upaep__navbar-primary-title {
            color: var(--upaep-navbar-primary-title-color);
            font-size: var(--upaep-navbar-primary-title-fz);
            font-weight: var(--upaep-navbar-primary-title-fw);
            width: 100%;
        }

        .upaep__navbar-primary-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: end;
        }

        .upaep__navbar-primary-language {
            cursor: pointer;
            align-content: center;

            .upaep__img {
                --upaep-img-width: 30px;
                --upaep-img-height: 30px;
            }
        }

        .upaep__navbar-menu {
            width: auto;
            height: 100%;

            .upaep__btn {
                --upaep-btn-width: 125px;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: .5rem;
                --upaep-btn-border-radius: 0;
                --upaep-btn-fz: var(--upaep-fz14);
                --upaep-btn-cont-fz: var(--upaep-fz14);
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-cont-color: var(--upaep-color-white);
                --upaep-btn-bg: var(--upaep-color-primary);
                --upaep-btn-border-color: var(--upaep-color-primary);
                --upaep-btn-hover-color: var(--upaep-color-white);
                --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
                --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: var(--upaep-color-primary);
                --upaep-btn-disabled-border-color: var(--upaep-color-primary);
                clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                justify-content: end;
            }
        }
    }

    .upaep__navbar-secondary {
        width: var(--upaep-navbar-secondary-width);
        height: var(--upaep-navbar-secondary-height);
        padding: var(--upaep-navbar-secondary-padding);
        background: var(--upaep-navbar-secondary-bg);
        display: flex;
        align-items: center;
        gap: 2rem;

        .upaep__navbar-secondary-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: end;
            gap: 1rem;
        }

        .upaep__navbar-secondary-title {
            width: 100%;
            color: var(--upaep-navbar-secondary-title-color);
            font-size: var(--upaep-navbar-secondary-title-fz);
            font-weight: var(--upaep-navbar-secondary-title-fw);
        }

        .upaep__navbar-secondary-language {
            align-content: center;
            cursor: pointer;

            .upaep__img {
                --upaep-img-width: 30px;
                --upaep-img-height: 30px;
            }
        }

        .upaep__navbar-menu-secondary {
            color: var(--upaep-navbar-menu-principal-color);
            font-size: var(--upaep-navbar-menu-principal-fz);
            font-weight: var(--upaep-navbar-menu-principal-fw);
            width: auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-width: 40px;
                --upaep-btn-height: 100%;
                --upaep-btn-margin: 0;
                --upaep-btn-padding: 0;
                --upaep-btn-border-radius: 5px;
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-cont-color: var(--upaep-color-white);
                --upaep-btn-bg: none;
                --upaep-btn-border-color: none;
                --upaep-btn-hover-color: #dee2e6;
                --upaep-btn-hover-bg: none;
                --upaep-btn-hover-border-color: none --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: none;
                --upaep-btn-disabled-border-color: none;

                &::after {
                    display: inline-block;
                    margin-left: 0;
                    vertical-align: 0.255em;
                    content: "";
                    border-top: var(--upaep-navbar-btn-mark-size) solid var(--upaep-navbar-btn-mark-color);
                    border-right: var(--upaep-navbar-btn-mark-size) solid transparent;
                    border-bottom: 0;
                    border-left: var(--upaep-navbar-btn-mark-size) solid transparent;
                    transition: transform .25s ease-in;
                }

                /* &:hover::after {
                    transform: rotate(-180deg);
                } */
            }

        }
    }

}

@media(980px <=width) {
    .upaep__navbar.__menu {

        .upaep__navbar-collapse:not(.is-show) {
            background: none;
        }

        .upaep__navbar-principal,
        .upaep__navbar-secondary {
            display: none;
        }
    }
}

@media(width<=980px) {
    .upaep__navbar.__menu {
        .upaep__navbar-primary-title {
            display: none;
        }

        .upaep__navbar-primary {
            .upaep__navbar-logo {
                margin: 0;
            }
        }

        &:not(.__submarca) {
            .upaep__navbar-primary-language {
                display: none;
            }
        }

        .upaep__dropdown {
            --upaep-dropdown-border-size: 0;
            --upaep-dropdown-item-padding: .25rem .5rem;
            --upaep-dropdown-margin: .5rem 0;
        }

        &:not(.__offcanvas) {
            &.__submenu {
                .upaep__navbar-primary {
                    .upaep__navbar-collapse {
                        inset: 107px auto auto 50%;
                    }
                }
            }

            .upaep__navbar-primary {
                .upaep__navbar-collapse {
                    width: 100%;
                    position: absolute;
                    inset: 80px auto auto 50%;
                    z-index: 1015;
                    translate: -50%;
                }
            }
        }
    }

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

        .upaep__dropzone-files {
            max-height: 150px;
        }

        .upaep__dropzone-multiple {
            width: 100%;
        }
    }
}

/*? ------ icons / logos ------ */
.upaep__icon {
    --upaep-icon-width: 50px;
    --upaep-icon-height: 50px;
    --upaep-icon-padding: .5rem;
    --upaep-icon-margin: 0;
    --upaep-icon-bg: transparent;
    --upaep-icon-border-radius: 0;
    --upaep-icon: ;
    --upaep-logo-size: 25px;
    width: var(--upaep-icon-width);
    height: var(--upaep-icon-height);
    padding: var(--upaep-icon-padding);
    margin: var(--upaep-icon-margin);
    background: var(--upaep-icon-bg);
    border-radius: var(--upaep-icon-border-radius);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-icon) center center no-repeat;
        background-size: var(--upaep-logo-size);
    }

    &.__ {
        --upaep-icon: url('');

        &.__white {
            --upaep-icon: url('');
        }
    }

    &.__angle-left {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMCIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDEuNCAyMzMuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MGMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDEwOS4zIDI1NiAyNDYuNiAxMTguNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTYwIDE2MHoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMCIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNNDEuNCAyMzMuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNsMTYwIDE2MGMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDEwOS4zIDI1NiAyNDYuNiAxMTguNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTYwIDE2MHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }

    &.__menu-hamburguer {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NEg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMkg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMySDQxNmMxNy43IDAgMzIgMTQuMyAzMiAzMnoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NEg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMkg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMySDQxNmMxNy43IDAgMzIgMTQuMyAzMiAzMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }

    &.__xmark {
        --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiLz48L3N2Zz4=');

        &.__white {
            --upaep-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=');
        }
    }
}

.upaep__logo {
    --upaep-logo-width: 100px;
    --upaep-logo-height: 50px;
    --upaep-logo-padding: .5rem;
    --upaep-logo-margin: 0;
    --upaep-logo-bg: transparent;
    --upaep-logo-border-radius: 0;
    --upaep-logo: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDEzMC43IDM3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzAuNyAzNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQoJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xXyk7ZmlsbDojODc4RTk0O30NCgkuc3Qye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTt9DQoJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30NCgkuc3Q1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzVfKTtmaWxsOiNGRkZGRkY7fQ0KCS5zdDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNV8pO2ZpbGw6I0UxMDAyMzt9DQo8L3N0eWxlPg0KPGc+DQoJPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjEzMC43IiBoZWlnaHQ9IjM3Ii8+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPGRlZnM+DQoJCQkJCTxyZWN0IGlkPSJTVkdJRF8yMF8iIHg9IjMuOCIgeT0iMy4zIiB3aWR0aD0iMTIzLjMiIGhlaWdodD0iMzAuMyIvPg0KCQkJCTwvZGVmcz4NCgkJCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzFfIj4NCgkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMjBfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJPC9jbGlwUGF0aD4NCgkJCQk8cmVjdCB4PSIzNy43IiB5PSIzLjMiIGNsYXNzPSJzdDEiIHdpZHRoPSI4OS40IiBoZWlnaHQ9IjMwLjMiLz4NCgkJCTwvZz4NCgkJCTxnPg0KCQkJCTxkZWZzPg0KCQkJCQk8cmVjdCBpZD0iU1ZHSURfMTJfIiB4PSIzLjgiIHk9IjMuMyIgd2lkdGg9IjEyMy4zIiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQk8L2RlZnM+DQoJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCQkJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzEyXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCQkJCTwvY2xpcFBhdGg+DQoJCQkJPGcgY2xhc3M9InN0MiI+DQoJCQkJCTxnPg0KCQkJCQkJPGRlZnM+DQoJCQkJCQkJPHJlY3QgaWQ9IlNWR0lEXzE5XyIgeD0iMy44IiB5PSIzLjMiIHdpZHRoPSIxMjMuMyIgaGVpZ2h0PSIzMC4zIi8+DQoJCQkJCQk8L2RlZnM+DQoJCQkJCQk8ZGVmcz4NCgkJCQkJCQk8cmVjdCBpZD0iU1ZHSURfMThfIiB4PSIzLjgiIHk9IjMuMyIgd2lkdGg9IjEyMy4zIiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQkJCTwvZGVmcz4NCgkJCQkJCTxkZWZzPg0KCQkJCQkJCTxyZWN0IGlkPSJTVkdJRF8xNF8iIHg9IjMuOCIgeT0iMy4zIiB3aWR0aD0iMTIzLjMiIGhlaWdodD0iMzAuMyIvPg0KCQkJCQkJPC9kZWZzPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF8zXyI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMTlfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF80XyIgY2xhc3M9InN0MyI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMThfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF81XyIgY2xhc3M9InN0NCI+DQoJCQkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMTRfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJCQk8L2NsaXBQYXRoPg0KCQkJCQkJPHBhdGggY2xhc3M9InN0NSIgZD0iTTExMS41LDE4LjN2LTQuNWgyLjJjMS42LDAsMi41LDAuOCwyLjUsMi4zYzAsMS40LTAuOCwyLjMtMi41LDIuM0gxMTEuNXogTTExMS41LDIyLjJoMi40DQoJCQkJCQkJYzQuNCwwLDYuOS0yLjYsNi45LTYuMXMtMi41LTYuMi02LjktNi4yaC03LjF2MTcuMmg0LjdWMjIuMnogTTkxLjgsMjcuMWgxMi42di0zLjloLTcuOXYtM2g2LjR2LTMuN2gtNi40di0yLjloNy42VjkuOUg5MS44DQoJCQkJCQkJVjI3LjF6IE04MS42LDE4LjFsMS42LDMuNmgtMy4yTDgxLjYsMTguMXogTTg1LjYsMjcuMWg0LjhMODEuOSw5LjdjLTAuMS0wLjItMC4yLTAuMi0wLjMsMGwtOC41LDE3LjVoNC42bDAuOS0yLjFoNi4xDQoJCQkJCQkJTDg1LjYsMjcuMXogTTY2LjQsMTguM3YtNC41aDIuMmMxLjUsMCwyLjUsMC44LDIuNSwyLjNjMCwxLjQtMC44LDIuMy0yLjUsMi4zSDY2LjR6IE02Ni40LDIyLjJoMi40YzQuNCwwLDYuOS0yLjYsNi45LTYuMQ0KCQkJCQkJCVM3My4yLDEwLDY4LjgsMTBoLTcuMXYxNy4yaDQuN1YyMi4yeiBNNTEuNywyNy4zYzQuNCwwLDcuNi0yLjMsNy42LTYuOVY5LjloLTQuN3YxMC41YzAsMi0wLjksMy4xLTIuOSwzLjENCgkJCQkJCQljLTIsMC0yLjktMS4xLTIuOS0zLjFWOS45aC00Ljd2MTAuNkM0NC4xLDI1LjEsNDcuMywyNy4zLDUxLjcsMjcuMyIvPg0KCQkJCQkJPHJlY3QgeD0iMy44IiB5PSIzLjMiIGNsYXNzPSJzdDYiIHdpZHRoPSIzMC44IiBoZWlnaHQ9IjMwLjMiLz4NCgkJCQkJCTxwYXRoIGNsYXNzPSJzdDUiIGQ9Ik0yMi44LDIwLjljMCwyLjMtMS4xLDMuNi0zLjYsMy42cy0zLjYtMS4zLTMuNi0zLjZWOGgtMi42djEyLjhjMCwzLjgsMi41LDUuOCw2LjIsNS44czYuMi0yLDYuMi01LjhWOA0KCQkJCQkJCWwtMi42LDIuNlYyMC45eiBNMjguNSwyMVY4aC0yLjZ2MTIuOGMwLDQuMi0yLjcsNi4zLTYuNyw2LjNzLTYuNy0yLjEtNi43LTYuM1Y4bDAsMEwxMCwxMC42VjIxYzAsNS43LDMuOSw4LjQsOS4yLDguNA0KCQkJCQkJCUMyNC42LDI5LjQsMjguNSwyNi42LDI4LjUsMjEiLz4NCgkJCQkJPC9nPg0KCQkJCTwvZz4NCgkJCTwvZz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K');
    --upaep-logo-size: auto;
    width: var(--upaep-logo-width);
    height: var(--upaep-logo-height);
    padding: var(--upaep-logo-padding);
    margin: var(--upaep-logo-margin);
    background: var(--upaep-logo-bg);
    border-radius: var(--upaep-logo-border-radius);
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--upaep-logo) center center no-repeat;
        background-size: var(--upaep-logo-size);
    }

    &.__ {
        --upaep-logo: url('');

        &.__white {
            --upaep-logo: url('');
        }
    }
}

/*? ------ Images ------ */
.upaep__img {
    --upaep-img-width: 100%;
    --upaep-img-height: 100%;
    --upaep-img-padding: 0;
    --upaep-img-margin: 0;
    --upaep-img-border-size: 0;
    --upaep-img-border-style: solid;
    --upaep-img-border-color: var(--upaep-color-border-grey);
    --upaep-img-border-radius: 0;
    width: var(--upaep-img-width);
    height: var(--upaep-img-height);
    padding: var(--upaep-img-padding);
    margin: var(--upaep-img-margin);
    border: var(--upaep-img-border-size) var(--upaep-img-border-style) var(--upaep-img-border-color);
    border-radius: var(--upaep-img-border-radius);

    &.__fluid {
        --upaep-img-height: auto;
        max-width: 100%;
    }

    &.__thumbnail {
        --upaep-img-bg: ;
        --upaep-img-padding: 0.25rem;
        --upaep-img-border-radius: 10px;
        --upaep-img-border-size: 1px;
        --upaep-img-height: auto;
        background: var(--upaep-img-bg);
        max-width: 100%;
    }

    &.__sm {
        --upaep-img-width: 30px;
        --upaep-img-height: 30px;
    }

    &.__md {
        --upaep-img-width: 600px;
        --upaep-img-height: 600px;
    }

    &.__lg {
        --upaep-img-width: 1000px;
        --upaep-img-height: 1000px;
    }
}

.upaep__figure {
    --upaep-figure-margin: 0 0 .5rem 0;
    --upaep-figure-fz: var(--upaep-fz12);
    --upaep-figure-color: var(--upaep-color-dark-grey);
    display: inline-block;

    .upaep__figure-img {
        margin: var(--upaep-figure-margin);
        line-height: 1;
    }

    .upaep__figure-caption {
        font-size: var(--upaep-figure-fz);
        color: var(--upaep-figure-color);
    }
}

/*? ------ Badge ------ */
.upaep__badge {
    --upaep-badge-width: auto;
    --upaep-badge-height: auto;
    --upaep-badge-padding: .35rem .5rem;
    --upaep-badge-margin: 0;
    --upaep-badge-bg: var(--upaep-color-dark-grey);
    --upaep-badge-border-radius: 5px;
    --upaep-badge-fz: var(--upaep-fz14);
    --upaep-badge-fw: var(--upaep-fw-regular);
    --upaep-badge-color: var(--upaep-color-white);
    --upaep-badge-position: relative;
    --upaep-badge-inset: ;
    width: var(--upaep-badge-width);
    height: var(--upaep-badge-height);
    padding: var(--upaep-badge-padding);
    margin: var(--upaep-badge-margin);
    background: var(--upaep-badge-bg);
    border-radius: var(--upaep-badge-border-radius);
    font-size: var(--upaep-badge-fz);
    font-weight: var(--upaep-badge-fw);
    color: var(--upaep-badge-color);
    position: var(--upaep-badge-position);
    inset: var(--upaep-badge-inset);
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;

    &.__rounded {
        --upaep-badge-padding: .35rem;
        --upaep-badge-border-radius: 50px;
    }
}

/*? ------ Steps ------ */
.upaep__steps {
    --upaep-steps-width: 100%;
    --upaep-steps-height: auto;
    --upaep-steps-padding: .35rem;
    --upaep-steps-margin: 0;
    --upaep-steps-items-width: 100%;
    --upaep-steps-items-height: auto;
    --upaep-steps-items-padding: 0;
    --upaep-steps-items-margin: 0;
    --upaep-steps-items-bg: var(--upaep-color-background);
    --upaep-steps-items-border-radius: 10px 10px 0 0;
    --upaep-steps-item-minheight: 3rem;
    --upaep-steps-item-padding: .65rem;
    --upaep-steps-item-margin: 0;
    --upaep-steps-item-align: center;
    --upaep-steps-item-border-radius: 0;
    --upaep-steps-item-fz: var(--upaep-fz18);
    --upaep-steps-item-fw: var(--upaep-fw-medium);
    --upaep-steps-item-color: var(--upaep-color-black);
    --upaep-steps-item-bg: var(--upaep-color-background);
    --upaep-steps-item-opacity: .5;
    --upaep-steps-item-active-fz: var(--upaep-fz18);
    --upaep-steps-item-active-fw: var(--upaep-fw-medium);
    --upaep-steps-item-active-color: var(--upaep-color-white);
    --upaep-steps-item-active-bg: var(--upaep-color-red);
    --upaep-steps-item-active-opacity: 1;
    --upaep-steps-item-complete-fz: var(--upaep-fz18);
    --upaep-steps-item-complete-fw: var(--upaep-fw-medium);
    --upaep-steps-item-complete-color: var(--upaep-color-black);
    --upaep-steps-item-complete-bg: transparent;
    --upaep-steps-item-complete-opacity: .8;
    --upaep-steps-text-margin: 0;
    --upaep-steps-text-padding: 0;
    --upaep-steps-icon-width: 30px;
    --upaep-steps-icon-height: 30px;
    --upaep-steps-icon-margin: 0;
    --upaep-steps-icon-padding: 0;
    --upaep-steps-icon-img-objectfit: cover;
    --upaep-steps-info-fz: var(--upaep-fz14);
    --upaep-steps-info-fw: ;
    --upaep-steps-info-color: ;
    --upaep-steps-info-margin: 0;
    --upaep-steps-info-padding: 0;
    width: var(--upaep-steps-width);
    height: var(--upaep-steps-height);
    padding: var(--upaep-steps-padding);
    margin: var(--upaep-steps-margin);

    .upaep__steps-items {
        width: var(--upaep-steps-items-width);
        height: var(--upaep-steps-items-height);
        padding: var(--upaep-steps-items-padding);
        margin: var(--upaep-steps-items-margin);
        background: var(--upaep-steps-items-bg);
        border-radius: var(--upaep-steps-items-border-radius);
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 5px;

        .upaep__steps-item {
            min-height: var(--upaep-steps-item-minheight);
            padding: var(--upaep-steps-item-padding);
            margin: var(--upaep-steps-item-margin);
            border-radius: var(--upaep-steps-item-border-radius);
            text-align: var(--upaep-steps-item-align);
            font-size: var(--upaep-steps-item-fz);
            font-weight: var(--upaep-steps-item-fw);
            color: var(--upaep-steps-item-color);
            background: var(--upaep-steps-item-bg);
            opacity: var(--upaep-steps-item-opacity);
            text-wrap: balance;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1 0 0;
            transition: all .5s ease;

            &:has(.upaep__steps-icon) {
                gap: 10px;
                flex-wrap: nowrap;

                .upaep__steps-texts {
                    width: calc(100% - var(--upaep-steps-icon-width));
                }
            }

            &:first-child {
                --upaep-steps-item-border-radius: 10px 0 0 0;
            }

            &:last-child {
                --upaep-steps-item-border-radius: 0 10px 0 0;
            }

            &.is-active {
                font-size: var(--upaep-steps-item-active-fz);
                font-weight: var(--upaep-steps-item-active-fw);
                color: var(--upaep-steps-item-active-color);
                background: var(--upaep-steps-item-active-bg);
                opacity: var(--upaep-steps-item-active-opacity);
            }

            &.is-complete {
                font-size: var(--upaep-steps-item-complete-fz);
                font-weight: var(--upaep-steps-item-complete-fw);
                color: var(--upaep-steps-item-complete-color);
                background: var(--upaep-steps-item-complete-bg);
                opacity: var(--upaep-steps-item-complete-opacity);
            }

            &:not(.is-active) {
                .upaep__steps-info {
                    display: none;
                }
            }

            .upaep__steps-icon {
                width: var(--upaep-steps-icon-width);
                height: var(--upaep-steps-icon-height);
                margin: var(--upaep-steps-icon-margin);
                padding: var(--upaep-steps-icon-padding);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: var(--upaep-steps-icon-img-objectfit);
                }
            }

            .upaep__steps-text {
                margin: var(--upaep-steps-text-margin);
                padding: var(--upaep-steps-text-padding);
            }

            .upaep__steps-info {
                font-size: var(--upaep-steps-info-fz);
                font-weight: var(--upaep-steps-info-fw);
                color: var(--upaep-steps-info-color);
                margin: var(--upaep-steps-info-margin);
                padding: var(--upaep-steps-info-padding);
                cursor: pointer;
            }
        }
    }

    &.__vertical {
        --upaep-steps-width: auto;
        --upaep-steps-items-border-radius: 10px;

        .upaep__steps-items {
            flex-direction: column;
            align-items: normal;

            .upaep__steps-item {
                flex: auto;

                &:first-child {
                    --upaep-steps-item-border-radius: 10px 10px 0 0;
                }

                &:last-child {
                    --upaep-steps-item-border-radius: 0 0 10px 10px;
                }
            }
        }
    }

    &.__items-start {
        .upaep__steps-item {
            justify-content: start;
        }
    }

    &.__items-end {
        .upaep__steps-item {
            justify-content: end;
        }
    }

    &.__items-center {
        .upaep__steps-item {
            justify-content: center;
        }
    }

    &.__items-evenly {
        .upaep__steps-item {
            justify-content: space-evenly;
        }
    }

    &.__items-between {
        .upaep__steps-item {
            justify-content: space-between;
        }
    }

    &.__items-around {
        .upaep__steps-item {
            justify-content: space-around;
        }
    }
}

.upaep__steps.__simple {
    --upaep-steps-items-bg: transparent;
    --upaep-steps-items-border-radius: 10px 10px 0 0;
    --upaep-steps-item-align: start;
    --upaep-steps-item-color: var(--upaep-color-black);
    --upaep-steps-item-bg: transparent;
    --upaep-steps-item-active-fw: var(--upaep-fw-bold);
    --upaep-steps-item-active-color: var(--upaep-color-black);
    --upaep-steps-item-active-bg: transparent;
    --upaep-steps-item-complete-color: var(--upaep-color-black);
}

/*? ------ Tracker ------ */

.upaep__tracker {
    --upaep-tracker-width: 100%;
    --upaep-tracker-height: auto;
    --upaep-tracker-padding: .5rem;
    --upaep-tracker-margin: 0;
    --upaep-tracker-bg: ;
    --upaep-tracker-transition-timing: .5s;
    --upaep-tracker-item-opacity: .5;
    --upaep-tracker-item-mark-size: 30px;
    --upaep-tracker-item-mark-bg: ;
    --upaep-tracker-item-icon-color: var(--upaep-color-black);
    --upaep-tracker-item-icon-fz: var(--upaep-fz18);
    --upaep-tracker-item-icon-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-mark-border-size: 4px;
    --upaep-tracker-item-mark-border-style: solid;
    --upaep-tracker-item-mark-border-color: #ddd;
    --upaep-tracker-item-line-width: 4px;
    --upaep-tracker-item-line-bg: #ddd;
    --upaep-tracker-item-dot-size: 12px;
    --upaep-tracker-item-dot-bg: #ddd;
    --upaep-tracker-item-title-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-title-fz: var(--upaep-fz18);
    --upaep-tracker-item-title-fw: var(--upaep-fw-regular);
    --upaep-tracker-item-text-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-text-fz: var(--upaep-fz14);
    --upaep-tracker-item-text-fw: var(--upaep-fw-regular);
    --upaep-tracker-item-progress-mark-border-color: var(--upaep-color-blue-sky);
    --upaep-tracker-item-progress-mark-bg: var(--upaep-color-blue-sky);
    --upaep-tracker-item-progress-mark-color: var(--upaep-color-white);
    --upaep-tracker-item-progress-dot-bg: var(--upaep-color-white);
    --upaep-tracker-item-progress-line-bg: var(--upaep-color-blue-sky);
    --upaep-tracker-item-progress-title-color: var(--upaep-color-black);
    --upaep-tracker-item-progress-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-progress-text-color: var(--upaep-color-black);
    --upaep-tracker-item-progress-text-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-complete-mark-border-color: var(--upaep-color-success);
    --upaep-tracker-item-complete-mark-bg: var(--upaep-color-success);
    --upaep-tracker-item-complete-mark-color: var(--upaep-color-white);
    --upaep-tracker-item-complete-dot-bg: var(--upaep-color-white);
    --upaep-tracker-item-complete-line-bg: var(--upaep-color-success);
    --upaep-tracker-item-complete-title-color: var(--upaep-color-black);
    --upaep-tracker-item-complete-title-fw: var(--upaep-fw-bold);
    --upaep-tracker-item-complete-text-color: var(--upaep-color-black);
    --upaep-tracker-item-complete-text-fw: var(--upaep-fw-bold);
    width: var(--upaep-tracker-width);
    height: var(--upaep-tracker-height);
    padding: var(--upaep-tracker-padding);
    margin: var(--upaep-tracker-margin);
    background: var(--upaep-tracker-bg);

    .upaep__tracker-wrapper {
        display: flex;
        flex-direction: column;
    }

    .upaep__tracker-item {
        min-height: calc(var(--upaep-tracker-item-mark-size) * 2);
        position: relative;
        display: flex;
        flex: 1;
        gap: 10px;
        opacity: var(--upaep-tracker-item-opacity);

        &:last-child {
            .upaep__tracker-line {
                display: none;
            }
        }

        &.is-progress {
            --upaep-tracker-item-opacity: 1;

            .upaep__tracker-mark {
                border-color: var(--upaep-tracker-item-progress-mark-border-color);
                background: var(--upaep-tracker-item-progress-mark-bg);
                color: var(--upaep-tracker-item-progress-mark-color);
                animation: markeractive 1s ease-in-out;
            }

            .upaep__tracker-dot {
                background: var(--upaep-tracker-item-progress-dot-bg);
            }

            .upaep__tracker-line {
                &::before {
                    background: var(--upaep-tracker-item-progress-line-bg);
                    height: 100%;
                }
            }

            .upaep__tracker-title {
                color: var(--upaep-tracker-item-progress-title-color);
                font-weight: var(--upaep-tracker-item-progress-title-fw);
            }

            .upaep__tracker-text {
                color: var(--upaep-tracker-item-progress-text-color);
                font-weight: var(--upaep-tracker-item-progress-text-fw);
            }

            .upaep__tracker-progress {
                --upaep-tracker-progress-color: var(--upaep-tracker-item-progress-line-bg);
            }
        }

        &.is-complete {
            --upaep-tracker-item-opacity: 1;

            .upaep__tracker-mark {
                border-color: var(--upaep-tracker-item-complete-mark-border-color);
                background: var(--upaep-tracker-item-complete-mark-bg);
                color: var(--upaep-tracker-item-complete-mark-color);
                animation: markercomplete 1s ease-in-out;
            }

            .upaep__tracker-dot {
                background: var(--upaep-tracker-item-complete-dot-bg);
            }

            .upaep__tracker-line {
                &::before {
                    background: var(--upaep-tracker-item-progress-line-bg);
                    height: 100%;
                }

                &::after {
                    background: var(--upaep-tracker-item-complete-line-bg);
                    height: 100%;
                }
            }

            .upaep__tracker-title {
                color: var(--upaep-tracker-item-complete-title-color);
                font-weight: var(--upaep-tracker-item-complete-title-fw);
            }

            .upaep__tracker-text {
                color: var(--upaep-tracker-item-complete-text-color);
                font-weight: var(--upaep-tracker-item-complete-text-fw);
            }

            .upaep__tracker-progress {
                --upaep-tracker-progress-color: var(--upaep-tracker-item-complete-line-bg);
            }
        }
    }

    .upaep__tracker-mark {
        width: var(--upaep-tracker-item-mark-size);
        height: var(--upaep-tracker-item-mark-size);
        background: var(--upaep-tracker-item-mark-bg);
        border-radius: var(--upaep-tracker-item-mark-size);
        border: var(--upaep-tracker-item-mark-border-size) var(--upaep-tracker-item-mark-border-style) var(--upaep-tracker-item-mark-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upaep__tracker-icon {
        color: var(--upaep-tracker-item-icon-color);
        font-size: var(--upaep-tracker-item-icon-fz);
        font-weight: var(--upaep-tracker-item-icon-fw);
    }

    .upaep__tracker-content {
        padding: 0;
    }

    .upaep__tracker-line {
        height: calc(100% - var(--upaep-tracker-item-mark-size));
        width: var(--upaep-tracker-item-line-width);
        background: var(--upaep-tracker-item-line-bg);
        position: absolute;
        inset-inline-start: 0;
        inset: var(--upaep-tracker-item-mark-size) auto auto calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2));

        &::before,
        &::after {
            content: "";
            position: absolute;
            inset: auto;
            height: 0;
            width: var(--upaep-tracker-item-line-width);
            transition: background var(--upaep-tracker-transition-timing) ease-in-out, width var(--upaep-tracker-transition-timing) ease-in-out
        }
    }

    .upaep__tracker-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upaep__tracker-dot {
        width: var(--upaep-tracker-item-dot-size);
        height: var(--upaep-tracker-item-dot-size);
        background: var(--upaep-tracker-item-dot-bg);
        border-radius: var(--upaep-tracker-item-dot-size);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upaep__tracker-title {
        color: var(--upaep-tracker-item-title-color);
        font-size: var(--upaep-tracker-item-title-fz);
        font-weight: var(--upaep-tracker-item-title-fw);
    }

    .upaep__tracker-text {
        color: var(--upaep-tracker-item-text-color);
        font-size: var(--upaep-tracker-item-text-fz);
        font-weight: var(--upaep-tracker-item-text-fw);
    }

    &.items-align-left {
        .upaep__tracker-mark {
            order: 1;
        }

        .upaep__tracker-content {
            order: 0;
        }

        .upaep__tracker-line {
            inset: var(--upaep-tracker-item-mark-size) auto auto calc(var(--upaep-tracker-item-mark-size) / 2);
        }
    }

    &:not(.tracker-vertical) {
        .upaep__tracker-wrapper {
            flex-direction: row;
        }

        .upaep__tracker-item {
            flex-direction: column;
            align-items: center;
            text-align: center;

            &.is-progress {

                .upaep__tracker-line {
                    &::before {
                        background: var(--upaep-tracker-item-progress-line-bg);
                        width: 100%;
                    }
                }
            }

            &.is-complete {

                .upaep__tracker-dot {
                    background: var(--upaep-tracker-item-complete-dot-bg);
                }

                .upaep__tracker-line {
                    &::before {
                        background: var(--upaep-tracker-item-progress-line-bg);
                        width: 100%;
                    }

                    &::after {
                        background: var(--upaep-tracker-item-complete-line-bg);
                        width: 100%;
                    }
                }
            }
        }

        .upaep__tracker-line {
            width: calc(100% - var(--upaep-tracker-item-mark-size));
            height: var(--upaep-tracker-item-line-width);
            inset: calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) auto auto calc(50% + var(--upaep-tracker-item-mark-size) / 2);

            &::before,
            &::after {
                content: "";
                position: absolute;
                inset: 0;
                width: 0;
                height: var(--upaep-tracker-item-line-width);
                transition: background var(--upaep-tracker-transition-timing) ease-in-out, all var(--upaep-tracker-transition-timing) ease-in-out
            }
        }

        .upaep__tracker-content {
            width: 200px;
        }

        &.items-align-up {
            .upaep__tracker-item {
                flex-direction: column-reverse;
            }

            .upaep__tracker-line {
                width: calc(100% - var(--upaep-tracker-item-mark-size));
                height: var(--upaep-tracker-item-line-width);
                inset: auto auto calc((var(--upaep-tracker-item-mark-size) / 2) - (var(--upaep-tracker-item-line-width) / 2)) calc(50% + var(--upaep-tracker-item-mark-size) / 2);
            }
        }
    }

    &.only-dots {
        --upaep-tracker-item-mark-bg: transparent;
        --upaep-tracker-item-mark-border-color: transparent;
        --upaep-tracker-item-progress-mark-bg: transparent;
        --upaep-tracker-item-progress-mark-border-color: transparent;
        --upaep-tracker-item-progress-dot-bg: var(--upaep-color-blue-sky);
        --upaep-tracker-item-complete-mark-bg: transparent;
        --upaep-tracker-item-complete-mark-border-color: transparent;
        --upaep-tracker-item-complete-dot-bg: var(--upaep-color-success);
        --upaep-tracker-item-error-mark-bg: transparent;
        --upaep-tracker-item-error-mark-border-color: transparent;
        --upaep-tracker-item-error-dot-bg: var(--upaep-color-error);
    }

    &.only-progress {
        --upaep-tracker-item-mark-bg: transparent;
        --upaep-tracker-item-mark-border-color: transparent;
        --upaep-tracker-item-progress-mark-bg: transparent;
        --upaep-tracker-item-progress-mark-border-color: transparent;
        --upaep-tracker-item-progress-dot-bg: var(--upaep-color-blue-sky);
        --upaep-tracker-item-complete-mark-bg: transparent;
        --upaep-tracker-item-complete-mark-border-color: transparent;
        --upaep-tracker-item-complete-dot-bg: var(--upaep-color-success);
        --upaep-tracker-item-error-mark-bg: transparent;
        --upaep-tracker-item-error-mark-border-color: transparent;
        --upaep-tracker-item-error-dot-bg: var(--upaep-color-error);
    }

    &.only-border {
        --upaep-tracker-item-mark-bg: transparent;
        --upaep-tracker-item-progress-mark-bg: transparent;
        --upaep-tracker-item-complete-mark-bg: transparent;
        --upaep-tracker-item-error-mark-bg: transparent;
    }

    &.counter-dots {
        --upaep-tracker-item-counter-color: var(--upaep-color-white);
        --upaep-tracker-item-counter-fz: var(--upaep-fz12);

        .upaep__tracker-wrapper {
            counter-reset: count 0;
        }

        .upaep__tracker-item {
            counter-increment: count 1;
        }

        .upaep__tracker-dot {
            position: relative;
            color: var(--upaep-tracker-item-counter-color);
            font-size: var(--upaep-tracker-item-counter-fz);

            &::after {
                position: absolute;
                inset: auto;
                content: counter(count, decimal);
            }

        }
    }

    &.checked-complete {
        .upaep__tracker-item.is-complete {
            .upaep__tracker-dot::after {
                position: absolute;
                inset: auto;
                font-family: var(--upaep-ff-fontawesome);
                content: '\f00c';
            }
        }
    }

    @media(width<=480px) {
        margin: 1rem 0;
        padding: 1rem;
        min-height: 150px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
}

.upaep__tracker-progress {
    --upaep-tracker-progress-size: var(--upaep-tracker-item-mark-size);
    --upaep-tracker-progress-base: #dddddd;
    --upaep-tracker-progress-fz: var(--upaep-fz12);
    --upaep-tracker-progress-fw: var(--upaep-fw-bold);
    --upaep-tracker-progress-color: var(--upaep-color-blue-sky);
    --upaep-tracker-progress-inset: auto 10px 10px auto;
    --upaep-tracker-progress-timing: 1s;
    --upaep-tracker-progress-margin: 0;
    --upaep-tracker-progress-padding: .25rem;
    --upaep-tracker-progress-percent: 0;
    --upaep-tracker-progress-circle-rotate: rotate(0deg);
    --upaep-tracker-progress-circle-size: 100%;
    --upaep-tracker-progress-circle-stroke-width: 25px;
    --upaep-tracker-progress-circle-radius: calc((var(--upaep-tracker-progress-circle-size) - var(--upaep-tracker-progress-circle-stroke-width)) / 2);
    --upaep-tracker-progress-circle-circumference: calc(var(--upaep-tracker-progress-circle-radius) * pi * 2);
    --upaep-tracker-progress-circle-dash: calc((var(--upaep-tracker-progress-percent) * var(--upaep-tracker-progress-circle-circumference)) / 100);
    width: var(--upaep-tracker-progress-size);
    height: var(--upaep-tracker-progress-size);
    inset: var(--upaep-tracker-progress-inset);
    color: var(--upaep-tracker-progress-color);
    font-size: var(--upaep-tracker-progress-fz);
    font-weight: var(--upaep-tracker-progress-fw);
    margin: var(--upaep-tracker-progress-margin);
    padding: var(--upaep-tracker-progress-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;

    svg {
        position: absolute;
        inset: auto;
        width: var(--upaep-tracker-progress-size);

        circle {
            cx: calc(var(--upaep-tracker-progress-circle-size) / 2);
            cy: calc(var(--upaep-tracker-progress-circle-size) / 2);
            r: var(--upaep-tracker-progress-circle-radius);
            stroke-width: var(--upaep-tracker-progress-circle-stroke-width);
            fill: none;
            stroke-linecap: round;

            &.circle-base {
                stroke: var(--upaep-tracker-progress-base);
            }

            &.circle-primary {
                transform: var(--upaep-tracker-progress-circle-rotate);
                transform-origin: calc(var(--upaep-tracker-progress-circle-size) / 2) calc(var(--upaep-tracker-progress-circle-size) / 2);
                stroke-dasharray: var(--upaep-tracker-progress-circle-dash) calc(var(--upaep-tracker-progress-circle-circumference) - var(--upaep-tracker-progress-circle-dash));
                stroke: var(--upaep-tracker-progress-color);
                transition: stroke-dasharray var(--upaep-tracker-progress-timing) linear;
            }
        }

    }
}

.upaep__tracker.__counter-checked {
    --upaep-tracker-item-mark-size: 35px;
    --upaep-tracker-item-dot-size: 20px;
    --upaep-tracker-item-opacity: .6;
    --upaep-tracker-item-mark-bg: none;
    --upaep-tracker-item-mark-border-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-icon-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-line-bg: var(--upaep-color-dark-grey);
    --upaep-tracker-item-dot-bg: var(--upaep-color-dark-grey);
    --upaep-tracker-item-progress-mark-bg: none;
    --upaep-tracker-item-progress-mark-border-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-progress-icon-color: var(--upaep-color-dark-grey);
    --upaep-tracker-item-progress-line-bg: var(--upaep-color-dark-grey);
    --upaep-tracker-item-progress-dot-bg: var(--upaep-color-dark-grey);
    --upaep-tracker-item-complete-mark-bg: none;
    --upaep-tracker-item-complete-mark-border-color: var(--upaep-color-success);
    --upaep-tracker-item-complete-icon-color: var(--upaep-color-success);
    --upaep-tracker-item-complete-line-bg: var(--upaep-color-success);
    --upaep-tracker-item-complete-dot-bg: var(--upaep-color-success);

    .upaep__tracker-wrapper {
        counter-reset: count 0;
    }

    &.tracker-vertical .upaep__tracker-content {
        width: 100%;
    }

    .upaep__tracker-item {
        counter-increment: count 1;

        &.is-rejected {
            --upaep-tracker-item-progress-mark-bg: none;
            --upaep-tracker-item-progress-mark-border-color: var(--upaep-color-error);
            --upaep-tracker-item-progress-icon-color: var(--upaep-color-error);
            --upaep-tracker-item-progress-line-bg: var(--upaep-color-error);
            --upaep-tracker-item-progress-dot-bg: var(--upaep-color-error);


            .upaep__tracker-dot::after {
                position: absolute;
                inset: auto;
                font-family: var(--upaep-ff-fontawesome);
                content: '\f00d';
            }
        }
    }

    .upaep__tracker-dot {
        position: relative;
        font-size: var(--upaep-fz12);
        color: var(--upaep-color-white);

        &::after {
            position: absolute;
            inset: auto;
            content: counter(count, decimal);
        }
    }

    .upaep__tracker-item.is-complete {

        .upaep__tracker-dot::after {
            position: absolute;
            inset: auto;
            font-family: var(--upaep-ff-fontawesome);
            content: '\f00c';
        }
    }
}

@keyframes markerScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes markeractive {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes markercomplete {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*? ------ Scrollspy ------ */
.upaep__scrollspy {
    --upaep-scrollspy-width: 100%;
    --upaep-scrollspy-height: auto;
    --upaep-scrollspy-margin: 0;
    --upaep-scrollspy-padding: .5rem 1rem;
    --upaep-scrollspy-position: sticky;
    --upaep-scrollspy-inset: ;
    --upaep-scrollspy-bg: transparent;
    --upaep-scrollspy-item-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-fw: var(--upaep-fw-regular);
    --upaep-scrollspy-item-color: var(--upaep-color-black);
    --upaep-scrollspy-item-bg: transparent;
    --upaep-scrollspy-item-margin: 0;
    --upaep-scrollspy-item-padding: .75rem .5rem;
    --upaep-scrollspy-item-border-radius: 10px;
    --upaep-scrollspy-item-hover-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-hover-fw: var(--upaep-fw-bold);
    --upaep-scrollspy-item-hover-color: var(--upaep-color-black);
    --upaep-scrollspy-item-hover-bg: #dee2e6;
    --upaep-scrollspy-item-active-fz: var(--upaep-fz14);
    --upaep-scrollspy-item-active-fw: var(--upaep-fw-bold);
    --upaep-scrollspy-item-active-color: var(--upaep-color-black);
    --upaep-scrollspy-item-active-bg: #dee2e6;
    width: var(--upaep-scrollspy-width);
    height: var(--upaep-scrollspy-height);
    margin: var(--upaep-scrollspy-margin);
    padding: var(--upaep-scrollspy-padding);
    position: var(--upaep-scrollspy-position);
    inset: var(--upaep-scrollspy-inset);
    background: var(--upaep-scrollspy-bg);
    overflow-y: auto;

    &>* {
        margin: 0;
    }

    .upaep__scrollspy-item {
        background: var(--upaep-scrollspy-item-bg);
        margin: var(--upaep-scrollspy-item-margin);
        padding: var(--upaep-scrollspy-item-padding);
        border-radius: var(--upaep-scrollspy-item-border-radius);

        &:has(a.is-active) {
            background: var(--upaep-scrollspy-item-active-bg);
        }

        &:has(a:not(.is-active):hover) {
            background: var(--upaep-scrollspy-item-hover-bg);
        }

        a {
            font-size: var(--upaep-scrollspy-item-fz);
            font-weight: var(--upaep-scrollspy-item-fw);
            color: var(--upaep-scrollspy-item-color);
            text-decoration: none;

            &:not(.is-active):hover {
                font-size: var(--upaep-scrollspy-item-hover-fz);
                font-weight: var(--upaep-scrollspy-item-hover-fw);
                color: var(--upaep-scrollspy-item-hover-color);
            }

            &.is-active {
                font-size: var(--upaep-scrollspy-item-active-fz);
                font-weight: var(--upaep-scrollspy-item-active-fw);
                color: var(--upaep-scrollspy-item-active-color);
            }
        }
    }

    &.__left-line {
        --upaep-scrollspy-leftline-width: 5px;
        --upaep-scrollspy-leftline-height: 10px;
        --upaep-scrollspy-leftline-bg: ;
        --upaep-scrollspy-leftline-active-width: 5px;
        --upaep-scrollspy-leftline-active-height: 10px;
        --upaep-scrollspy-leftline-active-bg: var(--upaep-color-red);
        --upaep-scrollspy-leftline-hover-width: 5px;
        --upaep-scrollspy-leftline-hover-height: 10px;
        --upaep-scrollspy-leftline-hover-bg: var(--upaep-color-red);

        .upaep__scrollspy-item {
            position: relative;

            &::before {
                width: var(--upaep-scrollspy-leftline-width);
                height: var(--upaep-scrollspy-leftline-height);
                background: var(--upaep-scrollspy-leftline-bg);
                content: '';
                position: absolute;
                inset: 50% auto auto 0;
                padding: 0.5rem 0;
                margin: 0;
                transform: translateY(-50%);
            }

            &:has(a.is-active) {
                &::before {
                    width: var(--upaep-scrollspy-leftline-active-width);
                    height: var(--upaep-scrollspy-leftline-active-height);
                    background: var(--upaep-scrollspy-leftline-active-bg);
                }
            }

            &:has(a:not(.is-active):hover) {
                &::before {
                    width: var(--upaep-scrollspy-leftline-hover-width);
                    height: var(--upaep-scrollspy-leftline-hover-height);
                    background: var(--upaep-scrollspy-leftline-hover-bg);
                }
            }
        }
    }
}

.upaep__scrollspy.__simple {
    --upaep-scrollspy-item-hover-bg: transparent;
    --upaep-scrollspy-item-active-bg: transparent;
    --upaep-scrollspy-item-padding: .25rem .5rem;
}

/*? ------ Dropdown ------ */
.upaep__dropdown {
    --upaep-dropdown-width: auto;
    --upaep-dropdown-height: auto;
    --upaep-dropdown-minwidth: 10rem;
    --upaep-dropdown-padding: .5rem 0;
    --upaep-dropdown-margin: .25rem 0;
    --upaep-dropdown-border-size: 1px;
    --upaep-dropdown-border-style: solid;
    --upaep-dropdown-border-color: var(--upaep-color-border-grey);
    --upaep-dropdown-border-radius: 10px;
    --upaep-dropdown-bg: var(--upaep-color-white);
    --upaep-dropdown-zindex: var(--upaep-zindex-dropdown);
    --upaep-dropdown-inset: 0 auto auto 0;
    --upaep-dropdown-item-margin: 0;
    --upaep-dropdown-item-padding: .35rem .5rem;
    --upaep-dropdown-item-fz: var(--upaep-fz14);
    --upaep-dropdown-item-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-color: var(--upaep-color-black);
    --upaep-dropdown-item-border-radius: 0;
    --upaep-dropdown-item-bg: ;
    --upaep-dropdown-item-hover-fz: var(--upaep-fz14);
    --upaep-dropdown-item-hover-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-hover-color: var(--upaep-color-black);
    --upaep-dropdown-item-hover-border-radius: 0;
    --upaep-dropdown-item-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-dropdown-item-active-fz: var(--upaep-fz14);
    --upaep-dropdown-item-active-fw: var(--upaep-fw-regular);
    --upaep-dropdown-item-active-color: var(--upaep-color-black);
    --upaep-dropdown-item-active-border-radius: 0;
    --upaep-dropdown-item-active-bg: #dcdcdc;
    --upaep-dropdown-item-mark-color: var(--upaep-color-red);
    --upaep-dropdown-btn-mark-color: ;
    --upaep-dropdown-btn-mark-size: .3em;
    cursor: pointer;

    .upaep__dropdown-menu {
        width: var(--upaep-dropdown-width);
        height: var(--upaep-dropdown-height);
        min-width: var(--upaep-dropdown-minwidth);
        padding: var(--upaep-dropdown-padding);
        margin: var(--upaep-dropdown-margin);
        border: var(--upaep-dropdown-border-size) var(--upaep-dropdown-border-style) var(--upaep-dropdown-border-color);
        border-radius: var(--upaep-dropdown-border-radius);
        background: var(--upaep-dropdown-bg);
        z-index: var(--upaep-dropdown-zindex);
        inset: var(--upaep-dropdown-inset);
        position: absolute;
        text-align: left;
        list-style: none;
        background-clip: padding-box;

        &:not(.is-show) {
            display: none;
        }

        &.is-show {
            animation: a_fadeIn .5s ease;
        }
    }

    &:has(.upaep__dropdown-menu.is-show) {
        .upaep__dropdown-btn {
            &::after {
                transition: all .5s;
                rotate: -180deg;
            }
        }
    }

    &:not(.__no-mark) {

        .upaep__dropdown-btn:not(.__trinity) {
            &::after {
                display: inline-block;
                margin-left: 0.255em;
                vertical-align: 0.255em;
                content: "";
                border-top: var(--upaep-dropdown-btn-mark-size) solid var(--upaep-dropdown-btn-mark-color);
                border-right: var(--upaep-dropdown-btn-mark-size) solid transparent;
                border-bottom: 0;
                border-left: var(--upaep-dropdown-btn-mark-size) solid transparent;
                transition: all .5s;
            }
        }
    }

    .upaep__dropdown-btn:not(.__trinity) {
        white-space: nowrap;
        --upaep-btn-margin: 0;
    }

    .upaep__dropdown-item {
        margin: var(--upaep-dropdown-item-margin);
        padding: var(--upaep-dropdown-item-padding);
        border-radius: var(--upaep-dropdown-item-border-radius);
        background: var(--upaep-dropdown-item-bg);
        width: 100%;
        display: block;
        clear: both;
        font-weight: 400;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        border: 0;
        cursor: pointer;
        position: relative;

        &>* {
            font-size: var(--upaep-dropdown-item-fz);
            font-weight: var(--upaep-dropdown-item-fw);
            color: var(--upaep-dropdown-item-color);
            width: 100%;
            display: inline-block;
            text-decoration: none;
        }

        &:hover:not(.is-active):not(:has(hr)) {
            border-radius: var(--upaep-dropdown-item-hover-border-radius);
            background: var(--upaep-dropdown-item-hover-bg);

            &>* {
                font-size: var(--upaep-dropdown-item-hover-fz);
                font-weight: var(--upaep-dropdown-item-hover-fw);
                color: var(--upaep-dropdown-item-hover-color);
            }
        }

        &.is-active:not(:has(hr)) {
            border-radius: var(--upaep-dropdown-item-active-border-radius);
            background: var(--upaep-dropdown-item-active-bg);

            &>* {
                font-size: var(--upaep-dropdown-item-active-fz);
                font-weight: var(--upaep-dropdown-item-active-fw);
                color: var(--upaep-dropdown-item-active-color);
            }
        }

        &:has(.upaep__dropdown-line),
        &:has(hr) {
            --upaep-dropdown-item-padding: .25rem 0;

            upaep__dropdown-line,
            hr {
                margin: 0;
            }
        }
    }

    &.__mark {
        .upaep__dropdown-item.is-active {
            &::after {
                font-family: var(--upaep-ff-fontawesome);
                content: '\f00c';
                padding: 0 10px;
                color: var(--upaep-dropdown-item-mark-color);
                inset: auto 0 auto auto;
                position: absolute;
            }
        }
    }
}

/*? ------ Tokenfield ------ */
.upaep__tokenfield {
    --upaep-tokenfield-width: 100%;
    --upaep-tokenfield-height: auto;
    --upaep-tokenfield-padding: .5rem;
    --upaep-tokenfield-margin: 0;
    --upaep-tokenfield-bg: transparent;
    --upaep-tokenfield-border-size: 1px;
    --upaep-tokenfield-border-style: solid;
    --upaep-tokenfield-border-color: var(--upaep-color-border-grey);
    --upaep-tokenfield-border-radius: 10px;
    --upaep-tokenfield-list-padding: .5rem;
    --upaep-tokenfield-list-margin: .5rem 0 0 0;
    --upaep-tokenfield-list-bg: var(--upaep-color-white);
    --upaep-tokenfield-list-item-fz: var(--upaep-f14);
    --upaep-tokenfield-list-item-fw: var(--upaep-fw-regular);
    --upaep-tokenfield-list-item-color: var(--upaep-color-black);
    --upaep-tokenfield-list-item-padding: .35rem .5rem;
    --upaep-tokenfield-list-item-bg: transparent;
    --upaep-tokenfield-list-item-hover-fz: var(--upaep-f14);
    --upaep-tokenfield-list-item-hover-fw: var(--upaep-fw-regular);
    --upaep-tokenfield-list-item-hover-color: var(--upaep-color-black);
    --upaep-tokenfield-list-item-hover-padding: .35rem .5rem;
    --upaep-tokenfield-list-item-hover-bg: var(--colorgrey7);
    width: var(--upaep-tokenfield-width);
    height: var(--upaep-tokenfield-height);
    padding: var(--upaep-tokenfield-padding);
    margin: var(--upaep-tokenfield-margin);
    background: var(--upaep-tokenfield-bg);
    border: var(--upaep-tokenfield-border-size) var(--upaep-tokenfield-border-style) var(--upaep-tokenfield-border-color);
    border-radius: var(--upaep-tokenfield-border-radius);
    position: relative;

    >input,
    >.upaep__input {
        display: none;
    }

    .upaep__tokenfield-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__tokenfield-tags {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__tokenfield-input {
        width: 100%;
        display: flex;
    }

    .upaep__input-tokenfield {
        --upaep-input-margin: 0;
    }

    .upaep__tokenfield-list {
        width: 100%;
        max-height: 200px;
        padding: var(--upaep-tokenfield-list-padding);
        margin: var(--upaep-tokenfield-list-margin);
        background: var(--upaep-tokenfield-list-bg);
        list-style: none;
        overflow-y: auto;

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .8s;
        }

        .upaep__tokenfield-list-item {
            width: 100%;
            font-size: var(--upaep-tokenfield-list-item-fz);
            font-weight: var(--upaep-tokenfield-list-item-fw);
            color: var(--upaep-tokenfield-list-item-color);
            padding: var(--upaep-tokenfield-list-item-padding);
            background: var(--upaep-tokenfield-list-item-bg);
            cursor: pointer;

            &:hover {
                font-size: var(--upaep-tokenfield-list-item-hover-fz);
                font-weight: var(--upaep-tokenfield-list-item-hover-fw);
                color: var(--upaep-tokenfield-list-item-hover-color);
                padding: var(--upaep-tokenfield-list-item-hover-padding);
                background: var(--upaep-tokenfield-list-item-hover-bg);
            }

            &.is-inactive {
                display: none;
            }
        }
    }
}

.was-validated,
.__validated {
    .upaep__tokenfield {
        &:has(>input:valid) {
            --upaep-tokenfield-border-color: var(--upaep-color-success);
            box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
        }

        &:has(>input:invalid) {
            --upaep-tokenfield-border-color: var(--upaep-color-error);
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }
    }
}

/*? ------ Billing ------ */
.upaep__billing {
    --upaep-billing-width: 100%;
    --upaep-billing-height: auto;
    --upaep-billing-padding: 1rem;
    --upaep-billing-margin: 0;
    --upaep-billing-bg: transparent;
    --upaep-billing-border-size: 1px;
    --upaep-billing-border-style: solid;
    --upaep-billing-border-color: transparent;
    --upaep-billing-border-radius: 10px;
    --upaep-billing-title-fz: var(--upaep-fz24);
    --upaep-billing-title-fw: var(--upaep-fw-bold);
    --upaep-billing-title-color: var(--upaep-color-black);
    --upaep-billing-title-aling: start;
    width: var(--upaep-billing-width);
    height: var(--upaep-billing-height);
    padding: var(--upaep-billing-padding);
    margin: var(--upaep-billing-margin);
    background: var(--upaep-billing-bg);
    border: var(--upaep-billing-border-size) var(--upaep-billing-border-style) var(--upaep-billing-border-color);
    border-radius: var(--upaep-billing-border-radius);

    .upaep__billing-form {
        width: 100%;
    }

    .upaep__input-group:has(.upaep__input.__idPersona) {
        display: none;
    }

    .upaep__billing-fiscal-data {
        width: 100%;
    }

    .upaep__billing-fisical-person-fisica {
        width: 100%;

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__billing-fisical-person-moral {
        width: 100%;

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__radio-group {
        padding: 1rem;
    }

    .upaep__billing-title {
        font-size: var(--upaep-billing-title-fz);
        font-weight: var(--upaep-billing-title-fw);
        color: var(--upaep-billing-title-color);
        text-align: var(--upaep-billing-title-aling);
        padding: 1rem;
    }

    .upaep__billing-fiscal-domicile {
        width: 100%;
    }

    .upaep__billing-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/*? ------ Payment ------ */
.upaep__payment {
    --upaep-payment-width: 100%;
    --upaep-payment-height: auto;
    --upaep-payment-padding: 1rem;
    --upaep-payment-margin: 0;
    --upaep-payment-background: transparent;
    --upaep-payment-border-size: 0;
    --upaep-payment-border-style: solid;
    --upaep-payment-border-color: var(--upaep-color-border-grey);
    --upaep-payment-border-radius: 10px;
    --upaep-payment-header-text-color: var(--upaep-color-dark-grey);
    --upaep-payment-info-title-fz: var(--upaep-fz28);
    --upaep-payment-info-title-fw: var(--upaep-fw-bold);
    --upaep-payment-info-title-color: var(--upaep-color-dark-grey);
    --upaep-payment-info-icon-color: var(--upaep-color-red);
    --upaep-payment-info-line-color: var(--upaep-color-border-grey);
    --upaep-payment-info-nopayment-fz: var(--upaep-fz20);
    --upaep-payment-info-nopayment-fw: var(--upaep-fw-bold);
    --upaep-payment-info-nopayment-color: var(--upaep-color-dark-grey);
    --upaep-payment-info-total-fz: var(--upaep-fz20);
    --upaep-payment-info-total-fw: var(--upaep-fw-bold);
    --upaep-payment-info-total-color: var(--upaep-color-dark-grey);
    --upaep-payment-ballances-line-color: var(--upaep-color-border-grey);
    --upaep-payment-balances-item-color: var(--upaep-color-dark-grey);
    --upaep-payment-balances-item-bg: none;
    --upaep-payment-balances-item-hover-color: var(--upaep-color-dark-grey);
    --upaep-payment-balances-item-hover-bg: var(--upaep-color-background);
    --upaep-payment-methods-item-color: var(--upaep-color-dark-grey);
    --upaep-payment-methods-item-bg: none;
    --upaep-payment-methods-item-hover-color: var(--upaep-color-dark-grey);
    --upaep-payment-methods-item-hover-bg: var(--upaep-color-background);
    --upaep-payment-options-item-color: var(--upaep-color-dark-grey);
    --upaep-payment-options-item-bg: none;
    --upaep-payment-options-item-hover-color: var(--upaep-color-dark-grey);
    --upaep-payment-options-item-hover-bg: var(--upaep-color-background);
    width: var(--upaep-payment-width);
    height: var(--upaep-payment-height);
    padding: var(--upaep-payment-padding);
    margin: var(--upaep-payment-margin);
    background: var(--upaep-payment-background);
    border: var(--upaep-payment-border-size) var(--upaep-payment-border-style) var(--upaep-payment-border-color);
    border-radius: var(--upaep-payment-border-radius);

    &.is-pay {

        .upaep__payment-confirmation,
        .upaep__payment-file,
        .upaep__payment-init {
            display: none;
        }

        .upaep__payment-content {
            animation: a_fadeIn .5s
        }
    }

    &:not(.is-pay) {
        .upaep__payment-init {
            animation: a_fadeIn .5s
        }

        .upaep__payment-confirmation,
        .upaep__payment-file,
        .upaep__payment-content {
            display: none;
        }
    }

    .upaep__payment-inner {
        width: 100%;
    }

    .upaep__payment-init {
        width: 100%;
    }

    .upaep__payment-content {
        width: 100%;

        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active) .upaep__payment-header,
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) .upaep__payment-header {
            display: none;
        }
    }

    .upaep__payment-file {
        width: 100%;
    }

    .upaep__payment-confirmation {
        width: 100%;
    }

    .upaep__payment-header,
    .upaep__payment-section-header {
        width: 100%;

        .upaep__btn.__back {
            --upaep-btn-width: 35px;
            --upaep-btn-height: 35px;
            --upaep-btn-margin: .5rem 0;
            --upaep-btn-padding: .5rem;
            --upaep-btn-border-radius: 50px;
            --upaep-btn-color: var(--upaep-color-red);
            --upaep-btn-cont-color: var(--upaep-color-red);
            --upaep-btn-bg: var(--upaep-color-white);
            --upaep-btn-border-color: var(--upaep-color-white);
            --upaep-btn-hover-color: var(--upaep-color-red);
            --upaep-btn-hover-bg: var(--upaep-color-background);
            --upaep-btn-hover-border-color: var(--upaep-color-background);
            --upaep-btn-disabled-color: var(--upaep-color-red);
            --upaep-btn-disabled-bg: var(--upaep-color-white);
            --upaep-btn-disabled-border-color: var(--upaep-color-white);
            box-shadow: var(--upaep-box-shadow);

            &:hover {
                scale: 1.1;
            }
        }

        .upaep__text {
            --upaep-text-color: var(--upaep-payment-header-text-color);
            --upaep-text-margin: 0;
            --upaep-text-padding: 0 .5rem;

            &.__title {
                font-size: var(--upaep-fz20);
            }

            &.__instruction {
                font-size: var(--upaep-fz16);
            }
        }
    }

    .upaep__payment-body {
        width: 100%;
        display: grid;
        grid-template-columns: 4fr 3fr;
        gap: 4rem;

        &:has(.upaep__payment-sections .upaep__payment-section.__file.is-active),
        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active),
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) {
            grid-template-columns: 1fr;
        }

        &:has(.upaep__payment-sections .upaep__payment-section.__file.is-active) .upaep__payment-info,
        &:has(.upaep__payment-sections .upaep__payment-section.__confirmation.is-active) .upaep__payment-info,
        &:has(.upaep__payment-sections .upaep__payment-section.__failed.is-active) .upaep__payment-info {
            display: none;
        }
    }

    .upaep__payment-sections {
        width: 100%;
    }

    .upaep__payment-section {
        width: 100%;

        .upaep__payment-section-button {
            width: 100%;
            display: flex;
            justify-content: end;

            .upaep__btn.__payment {
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-cont-color: var(--upaep-color-white);
                --upaep-btn-bg: var(--upaep-color-primary);
                --upaep-btn-border-color: var(--upaep-color-primary);
                --upaep-btn-hover-color: var(--upaep-color-white);
                --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
                --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: var(--upaep-color-primary);
                --upaep-btn-disabled-border-color: var(--upaep-color-primary);
                --upaep-btn-margin: 1rem 0;

                &.is-inactive {
                    display: none;
                }
            }
        }

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .5s;
        }

        &.__confirmation {
            .upaep__payment-section-button {
                justify-content: center;
            }

            .img-confirmation {
                width: 150px;
                display: block;
                margin: 0 auto;
            }

            .__title {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-success);
                text-align: center;
                margin: 1rem 0;
            }

            .__text {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-dark-grey);
                text-align: center;
                margin: 0;
            }

            &.is-active {
                .img-confirmation {
                    animation: a_bounceIn .5s;
                }
            }
        }

        &.__failed {
            .upaep__payment-section-button {
                justify-content: center;
            }

            .img-failed {
                width: 150px;
                display: block;
                margin: 0 auto;
            }

            .__title {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-error);
                text-align: center;
                margin: 1rem 0;
            }

            .__text {
                font-size: var(--upaep-fz24);
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-dark-grey);
                text-align: center;
                margin: 0;
            }

            &.is-active {
                .img-failed {
                    animation: a_bounceIn .5s;
                }
            }
        }

        &.__file {
            &:not(.__ficha) {
                .upaep__btn {
                    display: none;
                }

                iframe {
                    height: 800px;
                }
            }

            iframe {
                width: 100%;
                min-height: 500px;
            }
        }
    }

    .upaep__payment-info {
        width: 100%;
        min-height: 300px;
        padding: 1rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);

        .upaep__payment-info-titles {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .upaep__payment-info-title {
            font-size: var(--upaep-payment-info-title-fz);
            font-weight: var(--upaep-payment-info-title-fw);
            color: var(--upaep-payment-info-title-color);
        }


        .upaep__payment-info-icon {
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
            font-family: var(--upaep-ff-fontawesome);
            font-size: var(--upaep-fz22);
            color: var(--upaep-payment-info-icon-color);

            &::before {
                content: '\f059';
            }
        }

        .upaep__line {
            --upaep-line-width: 100%;
            --upaep-line-height: 2px;
            --upaep-line-bg: var(--upaep-payment-info-line-color);
            --upaep-line-border-color: var(--upaep-payment-info-line-color);
        }

        .upaep__payment-info-noPayment {
            font-size: var(--upaep-payment-info-nopayment-fz);
            font-weight: var(--upaep-payment-info-nopayment-fw);
            color: var(--upaep-payment-info-nopayment-color);
            width: 100%;
            padding: 2rem 0;
            text-align: center;

            &.is-inactive {
                display: none;
            }
        }

        .upaep__payment-info-content {
            width: 100%;
            height: 80%;
            padding: 0 2rem;
        }

        .upaep__payment-info-select {
            width: 100%;
            list-style: none;
            padding: 0;

            li {
                display: flex;
                justify-content: space-between;
                font-size: var(--upaep-fz20);
                font-weight: var(--upaep-fw-bold);
                color: var(--upaep-color-dark-grey);
                border-bottom: 1px solid var(--upaep-color-border-grey);
            }
        }

        &:has(.upaep__payment-info-noPayment:not(.is-inactive)) {
            .upaep__payment-info-total {
                display: none;
            }
        }

        .upaep__payment-info-total {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: var(--upaep-payment-info-total-fz);
            font-weight: var(--upaep-payment-info-total-fw);
            color: var(--upaep-payment-info-total-color);
        }

        .upaep__payment-info-body {
            width: 100%;
        }

        .upaep__payment-info-button {
            width: 100%;
            display: flex;
            justify-content: end;

            .upaep__btn {
                --upaep-btn-color: var(--upaep-color-white);
                --upaep-btn-cont-color: var(--upaep-color-white);
                --upaep-btn-bg: var(--upaep-color-primary);
                --upaep-btn-border-color: var(--upaep-color-primary);
                --upaep-btn-hover-color: var(--upaep-color-white);
                --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
                --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
                --upaep-btn-disabled-color: var(--upaep-color-white);
                --upaep-btn-disabled-bg: var(--upaep-color-primary);
                --upaep-btn-disabled-border-color: var(--upaep-color-primary);
                --upaep-btn-margin: 1rem 0;

                &.is-inactive {
                    display: none;
                }
            }
        }
    }

    .upaep__radio-group,
    .upaep__checkbox-group {
        flex-direction: column;
    }

    .upaep__balances-all {
        .upaep__line {
            --upaep-line-width: 100%;
            --upaep-line-height: 2px;
            --upaep-line-bg: var(--upaep-payment-ballances-line-color);
            --upaep-line-border-color: var(--upaep-payment-ballances-line-color);
        }
    }

    .upaep__balances-item {
        --upaep-label-color: var(--upaep-payment-balances-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: .5rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-balances-item-bg);
        min-height: 3rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);
        justify-content: space-between;
        cursor: pointer;

        &:hover {
            --upaep-label-color: var(--upaep-payment-balances-item-hover-color);
            background: var(--upaep-payment-balances-item-hover-bg);
        }

        &:has(.__more-information) p {
            width: calc(100% / 4 - 20px);
        }

        p {
            margin: 0;
            padding: 0 .5rem;
            width: calc(100% / 3 - 20px);

            &.__cost {
                text-align: end;
            }

            &.__fecha {
                font-weight: var(--upaep-fw-regular);
            }
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--upaep-color-red);
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--upaep-color-red);
        }
    }

    .upaep__methods-item {
        --upaep-label-color: var(--upaep-payment-methods-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: 1rem 2rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-methods-item-bg);
        box-shadow: var(--upaep-box-shadow);
        text-decoration: none;
        min-height: 3rem;
        border-radius: 10px;
        justify-content: space-between;
        cursor: pointer;

        &:hover {
            color: var(--upaep-payment-methods-item-hover-color);
            background: var(--upaep-payment-methods-item-hover-bg);
        }

        .upaep__methods-text {
            text-wrap: balance;

            p {
                margin: 0;

                &.__title {
                    font-size: var(--upaep-fz22);
                    font-weight: var(--upaep-fw-bold);
                }

                &.__description {
                    font-weight: var(--upaep-fw-regular);
                }
            }
        }

        .upaep__methods-img {
            width: 25px;
            height: 25px;
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--upaep-color-red);
            display: none;
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--upaep-color-red);
        }
    }

    .upaep__options-item {
        --upaep-label-color: var(--upaep-payment-options-item-color);
        --upaep-label-fz: var(--upaep-fz16);
        --upaep-label-width: 100%;
        --upaep-label-padding: 1rem 2rem;
        --upaep-label-margin: .5rem 0;
        background: var(--upaep-payment-options-item-bg);
        min-height: 3rem;
        border-radius: 10px;
        box-shadow: var(--upaep-box-shadow);
        justify-content: start;
        gap: 5px;
        cursor: pointer;

        &:hover {
            --upaep-label-color: var(--upaep-payment-options-item-hover-color);
            background: var(--upaep-payment-options-item-hover-bg);
        }

        .upaep__options-text {
            width: 70%;
            text-wrap: balance;

            p {
                margin: 0;

                &.__title {
                    font-size: var(--upaep-fz22);
                    font-weight: var(--upaep-fw-bold);
                }

                &.__description {
                    font-weight: var(--upaep-fw-regular);
                }
            }
        }

        .upaep__options-imgs {
            &:has(img:nth-child(3)) {
                display: grid;
                justify-items: center;
                grid-template-columns: repeat(1, 1fr);
            }

            img {
                height: 35px;

                &.__visa {
                    width: 60px;
                }

                &._mastercard {
                    width: 60px;
                }

                &.__bbva {
                    width: 100px;
                }

                &.__santander {
                    width: 100px;
                }

                &.__amex {
                    width: 50px;
                    height: 50px;
                }
            }
        }

        &:has(.upaep__radio:disabled),
        &:has(.upaep__checkbox:disabled),
        &.is-disabled {
            opacity: .5;
        }

        .upaep__radio {
            --upaep-radio-checked-color: var(--upaep-color-red);
        }

        .upaep__checkbox {
            --upaep-checkbox-checked-color: var(--upaep-color-red);
        }
    }

    .upaep__modal {
        .upaep__modal-img {
            width: 100%;
            display: flex;
            justify-content: center;

            img {
                width: 150px;
            }
        }

        .upaep__modal-texts {
            .__title {
                font-size: var(--upaep-fz22);
                font-weight: var(--upaep-fw-bold);
                color: var(--upaep-color-red);
                margin: 1rem 0;
                text-align: center;
            }

            .__text {
                font-size: var(--upaep-fz20);
                font-weight: var(--upaep-fw-bold);
                color: var(--upaep-color-dark-grey);
                margin: 0;
                text-align: center;
            }
        }

        .upaep__modal-button {
            display: flex;
            justify-content: center;
        }

        .upaep__btn.__payment {
            --upaep-btn-color: var(--upaep-color-white);
            --upaep-btn-cont-color: var(--upaep-color-white);
            --upaep-btn-bg: var(--upaep-color-primary);
            --upaep-btn-border-color: var(--upaep-color-primary);
            --upaep-btn-hover-color: var(--upaep-color-white);
            --upaep-btn-hover-bg: var(--upaep-color-primary-hover);
            --upaep-btn-hover-border-color: var(--upaep-color-primary-hover);
            --upaep-btn-disabled-color: var(--upaep-color-white);
            --upaep-btn-disabled-bg: var(--upaep-color-primary);
            --upaep-btn-disabled-border-color: var(--upaep-color-primary);
            --upaep-btn-margin: 1rem 0;
        }
    }
}

/*? ------ Inifite Scroller ------ */
.upaep__infiniteScroller {
    --upaep-infitescroller-width: 100%;
    --upaep-infitescroller-maxwidth: 800px;
    --upaep-infitescroller-heihgt: auto;
    --upaep-infitescroller-padding: 1rem;
    --upaep-infitescroller-margin: 0;
    --upaep-infitescroller-bg: ;
    --upaep-infitescroller-duration: 10s;
    --upaep-infitescroller-items-width: 100%;
    --upaep-infitescroller-items-heihgt: 100%;
    --upaep-infitescroller-items-padding: 0;
    --upaep-infitescroller-items-margin: 0;
    --upaep-infitescroller-items-gap: 10px;
    --upaep-infitescroller-item-width: 100%;
    --upaep-infitescroller-item-height: auto;
    --upaep-infitescroller-item-minwidth: 100px;
    --upaep-infitescroller-item-minheight: 2rem;
    --upaep-infitescroller-item-padding: 1rem;
    --upaep-infitescroller-item-margin: .5rem;
    --upaep-infitescroller-item-bg: var(--upaep-color-background);
    --upaep-infitescroller-item-border-size: 1px;
    --upaep-infitescroller-item-border-style: solid;
    --upaep-infitescroller-item-border-color: var(--upaep-color-border-grey);
    --upaep-infitescroller-item-border-radius: 10px;
    --upaep-infitescroller-item-boxshadow: var(--upaep-box-shadow);
    width: var(--upaep-infitescroller-width);
    max-width: var(--upaep-infitescroller-maxwidth);
    height: var(--upaep-infitescroller-heihgt);
    padding: var(--upaep-infitescroller-padding);
    margin: var(--upaep-infitescroller-margin);
    background: var(--upaep-infitescroller-bg);
    overflow: hidden;
    outline: 3px solid var(--upaep-color-blue-primary);
    mask: linear-gradient(90deg, transparent, var(--upaep-color-black) 20%, var(--upaep-color-black) 80%, transparent);

    &.__right {
        .upaep__infiniteScroller-items {
            flex-direction: row-reverse;
            animation: scroller-right var(--upaep-infitescroller-duration) linear infinite;
        }
    }

    &.__left {
        .upaep__infiniteScroller-items {
            flex-direction: row;
            animation: scroller-left var(--upaep-infitescroller-duration) linear infinite;
        }
    }

    .upaep__infiniteScroller-items {
        width: var(--upaep-infitescroller-items-width);
        height: var(--upaep-infitescroller-items-heihgt);
        padding: var(--upaep-infitescroller-items-padding);
        margin: var(--upaep-infitescroller-items-margin);
        gap: var(--upaep-infitescroller-items-gap);
        list-style: none;
        display: flex;
        flex-wrap: nowrap;

        &:hover {
            animation-play-state: paused;
        }
    }

    .upaep__infiniteScroller-item {
        width: var(--upaep-infitescroller-item-width);
        height: var(--upaep-infitescroller-item-height);
        min-width: var(--upaep-infitescroller-item-minwidth);
        min-height: var(--upaep-infitescroller-item-minheight);
        padding: var(--upaep-infitescroller-item-padding);
        margin: var(--upaep-infitescroller-item-margin);
        background: var(--upaep-infitescroller-item-bg);
        border: var(--upaep-infitescroller-item-border-size) var(--upaep-infitescroller-item-border-style) var(--upaep-infitescroller-item-border-color);
        border-radius: var(--upaep-infitescroller-item-border-radius);
        box-shadow: var(--upaep-infitescroller-item-boxshadow);
    }

}

@keyframes scroller-right {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(calc(100% - var(--upaep-infitescroller-items-gap)));
    }
}

@keyframes scroller-left {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(calc(-100% - var(--upaep-infitescroller-items-gap)));
    }
}

/*? ------ Datepicker ------ */
.upaep__datepicker {
    --upaep-datepicker-width: 100%;
    --upaep-datepicker-height: auto;
    --upaep-datepicker-maxwidth: 400px;
    --upaep-datepicker-padding: 1rem;
    --upaep-datepicker-margin: .5rem 0;
    --upaep-datepicker-border-size: 1px;
    --upaep-datepicker-border-style: solid;
    --upaep-datepicker-border-color: var(--upaep-color-border-grey);
    --upaep-datepicker-border-radius: 10px;
    --upaep-datepicker-position: ;
    --upaep-datepicker-zindex: var(--upaep-zindex-datepicker);
    --upaep-datepicker-header-padding: 1rem;
    --upaep-datepicker-header-bg: var(--upaep-color-dark-grey);
    --upaep-datepicker-header-border-radius: 10px 10px 0 0;
    --upaep-datepicker-title-fz: var(--upaep-fz20);
    --upaep-datepicker-title-fw: var(--upaep-fw-bold);
    --upaep-datepicker-title-color: var(--upaep-color-white);
    --upaep-datepicker-date-fz: var(--upaep-fz24);
    --upaep-datepicker-date-fw: var(--upaep-fw-bold);
    --upaep-datepicker-date-color: var(--upaep-color-white);
    --upaep-datepicker-inner-padding: 1rem;
    --upaep-datepicker-inner-bg: var(--upaep-color-white);
    --upaep-datepicker-inner-border-radius: 10px 10px 0 0;
    --upaep-datepicker-footer-padding: 0 1rem 1rem 1rem;
    --upaep-datepicker-footer-bg: var(--upaep-color-white);
    --upaep-datepicker-footer-border-radius: 0 0 10px 10px;
    --upaep-datepicker-day-width: 30px;
    --upaep-datepicker-day-height: 30px;
    --upaep-datepicker-day-padding: .35rem;
    --upaep-datepicker-day-margin: 0;
    --upaep-datepicker-day-fz: var(--upaep-fz18);
    --upaep-datepicker-day-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-bg: ;
    --upaep-datepicker-day-border-size: ;
    --upaep-datepicker-day-border-style: ;
    --upaep-datepicker-day-border-color: ;
    --upaep-datepicker-day-border-radius: 50%;
    --upaep-datepicker-day-hover-fz: var(--upaep-fz18);
    --upaep-datepicker-day-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-hover-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-hover-bg: #dee2de;
    --upaep-datepicker-day-hover-border-size: 1px;
    --upaep-datepicker-day-hover-border-style: solid;
    --upaep-datepicker-day-hover-border-color: #dee2de;
    --upaep-datepicker-day-hover-border-radius: 50%;
    --upaep-datepicker-day-active-fz: var(--upaep-fz18);
    --upaep-datepicker-day-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-active-color: var(--upaep-color-white);
    --upaep-datepicker-day-active-bg: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-active-border-size: 1px;
    --upaep-datepicker-day-active-border-style: solid;
    --upaep-datepicker-day-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-active-border-radius: 50%;
    --upaep-datepicker-day-disabled-fz: var(--upaep-fz18);
    --upaep-datepicker-day-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-day-disabled-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-day-disabled-bg: #dee2de;
    --upaep-datepicker-day-disabled-border-size: 1px;
    --upaep-datepicker-day-disabled-border-style: solid;
    --upaep-datepicker-day-disabled-border-color: #dee2de;
    --upaep-datepicker-day-disabled-border-radius: 50%;
    --upaep-datepicker-btn-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-btn-bg: var(--upaep-color-tertiary);
    --upaep-datepicker-btn-border-color: var(--upaep-color-tertiary);
    --upaep-datepicker-btn-hover-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-btn-hover-bg: var(--upaep-color-tertiary-hover);
    --upaep-datepicker-btn-hover-border-color: var(--upaep-color-tertiary-hover);
    --upaep-datepicker-btn-disabled-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-btn-disabled-bg: var(--upaep-color-tertiary);
    --upaep-datepicker-btn-disabled-border-color: var(--upaep-color-tertiary);
    --upaep-datepicker-month-width: 80px;
    --upaep-datepicker-month-height: 40px;
    --upaep-datepicker-month-padding: .35rem;
    --upaep-datepicker-month-margin: .25rem .45rem;
    --upaep-datepicker-month-fz: var(--upaep-fz18);
    --upaep-datepicker-month-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-bg: ;
    --upaep-datepicker-month-border-size: ;
    --upaep-datepicker-month-border-style: ;
    --upaep-datepicker-month-border-color: ;
    --upaep-datepicker-month-border-radius: 50px;
    --upaep-datepicker-month-hover-fz: var(--upaep-fz18);
    --upaep-datepicker-month-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-hover-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-hover-bg: #dee2de;
    --upaep-datepicker-month-hover-border-size: 1px;
    --upaep-datepicker-month-hover-border-style: solid;
    --upaep-datepicker-month-hover-border-color: #dee2de;
    --upaep-datepicker-month-hover-border-radius: 50px;
    --upaep-datepicker-month-active-fz: var(--upaep-fz18);
    --upaep-datepicker-month-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-active-color: var(--upaep-color-white);
    --upaep-datepicker-month-active-bg: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-active-border-size: 1px;
    --upaep-datepicker-month-active-border-style: solid;
    --upaep-datepicker-month-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-active-border-radius: 50px;
    --upaep-datepicker-month-disabled-fz: var(--upaep-fz18);
    --upaep-datepicker-month-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-month-disabled-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-month-disabled-bg: #dee2de;
    --upaep-datepicker-month-disabled-border-size: 1px;
    --upaep-datepicker-month-disabled-border-style: solid;
    --upaep-datepicker-month-disabled-border-color: #dee2de;
    --upaep-datepicker-month-disabled-border-radius: 50px;
    --upaep-datepicker-year-width: 60px;
    --upaep-datepicker-year-height: 40px;
    --upaep-datepicker-year-padding: .35rem;
    --upaep-datepicker-year-margin: .25rem .45rem;
    --upaep-datepicker-year-fz: var(--upaep-fz18);
    --upaep-datepicker-year-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-bg: ;
    --upaep-datepicker-year-border-size: ;
    --upaep-datepicker-year-border-style: ;
    --upaep-datepicker-year-border-color: ;
    --upaep-datepicker-year-border-radius: 50px;
    --upaep-datepicker-year-hover-fz: var(--upaep-fz18);
    --upaep-datepicker-year-hover-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-hover-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-hover-bg: #dee2de;
    --upaep-datepicker-year-hover-border-size: 1px;
    --upaep-datepicker-year-hover-border-style: solid;
    --upaep-datepicker-year-hover-border-color: #dee2de;
    --upaep-datepicker-year-hover-border-radius: 50px;
    --upaep-datepicker-year-active-fz: var(--upaep-fz18);
    --upaep-datepicker-year-active-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-active-color: var(--upaep-color-white);
    --upaep-datepicker-year-active-bg: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-active-border-size: 1px;
    --upaep-datepicker-year-active-border-style: solid;
    --upaep-datepicker-year-active-border-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-active-border-radius: 50px;
    --upaep-datepicker-year-disabled-fz: var(--upaep-fz18);
    --upaep-datepicker-year-disabled-fw: var(--upaep-fw-bold);
    --upaep-datepicker-year-disabled-color: var(--upaep-color-dark-grey);
    --upaep-datepicker-year-disabled-bg: #dee2de;
    --upaep-datepicker-year-disabled-border-size: 1px;
    --upaep-datepicker-year-disabled-border-style: solid;
    --upaep-datepicker-year-disabled-border-color: #dee2de;
    --upaep-datepicker-year-disabled-border-radius: 50px;
    --upaep-datepicker-mark-width: calc(100% / 7 * 7);
    --upaep-datepicker-mark-bg: var(--upaep-color-light-grey);
    --upaep-datepicker-mark-border-radius: 50px;
    --upaep-datepicker-week-border-size: 1px;
    --upaep-datepicker-week-border-style: solid;
    --upaep-datepicker-week-border-color: var(--upaep-color-border-grey);
    --upaep-datepicker-limit-fz: var(--upaep-fz18);
    --upaep-datepicker-limit-fw: var(--upaep-fw-bold);
    --upaep-datepicker-limit-color: var(--upaep-color-dark-grey);
    width: var(--upaep-datepicker-width);
    height: var(--upaep-datepicker-height);
    max-width: var(--upaep-datepicker-maxwidth);
    padding: var(--upaep-datepicker-padding);
    margin: var(--upaep-datepicker-margin);
    position: relative;

    &.is-visible {

        .upaep__input-group,
        .upaep__datepicker-cancel {
            display: none;
        }

        &:has(.upaep__input.is-invalid) {
            .upaep__datepicker-content {
                box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
            }
        }

        &:has(.upaep__input.is-valid) {
            .upaep__datepicker-content {
                box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
            }
        }
    }

    &:not(.is-visible) {
        --upaep-datepicker-position: absolute;
    }

    &:not(.is-show):not(.is-visible) {

        .upaep__datepicker-content {
            display: none;
        }
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    .upaep__input[disabled]~.upaep__input-icon {
        pointer-events: none;
        opacity: .5;
    }

    .upaep__input-icon {
        cursor: pointer;
        transition: scale .3s ease-in;

        &:hover {
            scale: 1.1;
            transition: scale .3s ease-in;
        }
    }

    &.__timepicker {

        .upaep__timepicker {
            --upaep-timepicker-padding: 0 1rem;
            --upaep-timepicker-margin: 0;
            --upaep-timepicker-time-width: 100%;
            display: flex;
            animation: a_fadeIn .5s;

            &:not(.is-show) {
                display: none;
            }
        }

        &:has(.upaep__timepicker.is-show) {
            .upaep__datepicker-inner {
                display: none;
            }
        }

        .upaep__timepicker-list {
            margin: 0 0 1rem 0;
        }
    }

    .upaep__datepicker-content {
        border: var(--upaep-datepicker-border-size) var(--upaep-datepicker-border-style) var(--upaep-datepicker-border-color);
        border-radius: var(--upaep-datepicker-border-radius);
        position: var(--upaep-datepicker-position);
        z-index: var(--upaep-datepicker-zindex);
        animation: a_fadeIn .5s ease-in;
    }

    .upaep__datepicker-header {
        padding: var(--upaep-datepicker-header-padding);
        background: var(--upaep-datepicker-header-bg);
        border-radius: var(--upaep-datepicker-header-border-radius);

        .upaep__datepicker-title {
            font-size: var(--upaep-datepicker-title-fz);
            font-weight: var(--upaep-datepicker-title-fw);
            color: var(--upaep-datepicker-title-color);
        }

        .upaep__datepicker-date {
            font-size: var(--upaep-datepicker-date-fz);
            font-weight: var(--upaep-datepicker-date-fw);
            color: var(--upaep-datepicker-date-color);
        }

        .upaep__datepicker-date-time {
            width: 100%;
            justify-content: center;
        }
    }

    .upaep__datepicker-inner {
        padding: var(--upaep-datepicker-inner-padding);
        background: var(--upaep-datepicker-inner-bg);
        border-radius: var(--upaep-datepicker-inner-border-radius);

        .upaep__datepicker-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;

            .upaep__datepicker-selection,
            .upaep__datepicker-navigation {
                display: flex;
                gap: 10px;
            }

            .upaep__btn.__datepicker {
                --upaep-btn-margin: 0;
            }
        }

        .upaep__datepicker-section {
            margin: 1rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            &:not(.is-active) {
                display: none;
            }

            &.is-active {
                animation: a_fadeIn .5s;
            }
        }

        .upaep__datepicker-weeks {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;

            .upaep__datepicker-week-head,
            .upaep__datepicker-week {
                position: relative;
                z-index: 1;
                display: inline-flex;
                gap: 15px;
            }

            .upaep__datepicker-week-head {
                border-bottom: var(--upaep-datepicker-week-border-size) var(--upaep-datepicker-week-border-style) var(--upaep-datepicker-week-border-color);
            }
        }

        .upaep__datepicker-days {
            width: 100%;
        }

        .upaep__datepicker-mark {
            width: var(--upaep-datepicker-mark-width);
            background: var(--upaep-datepicker-mark-bg);
            border-radius: var(--upaep-datepicker-mark-border-radius);
            position: absolute;
            inset: 0;
            z-index: 5;

            &:not(.is-active) {
                display: none;
            }
        }

        .upaep__datepicker-day-head,
        .upaep__datepicker-day {
            width: var(--upaep-datepicker-day-width);
            height: var(--upaep-datepicker-day-height);
            padding: var(--upaep-datepicker-day-padding);
            margin: var(--upaep-datepicker-day-margin);
            font-size: var(--upaep-datepicker-day-fz);
            font-weight: var(--upaep-datepicker-day-fw);
            color: var(--upaep-datepicker-day-color);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            z-index: 10;
        }

        .upaep__datepicker-day {
            background: var(--upaep-datepicker-day-bg);
            border: var(--upaep-datepicker-day-border-size) var(--upaep-datepicker-day-border-style) var(--upaep-datepicker-day-border-color);
            border-radius: var(--upaep-datepicker-day-border-radius);
            cursor: pointer;
            text-decoration: none;
            animation: a_zoomIn .3s ease-in;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-day-hover-fz);
                font-weight: var(--upaep-datepicker-day-hover-fw);
                color: var(--upaep-datepicker-day-hover-color);
                background: var(--upaep-datepicker-day-hover-bg);
                border: var(--upaep-datepicker-day-hover-border-size) var(--upaep-datepicker-day-hover-border-style) var(--upaep-datepicker-day-hover-border-color);
                border-radius: var(--upaep-datepicker-day-hover-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-day-active-fz);
                font-weight: var(--upaep-datepicker-day-active-fw);
                color: var(--upaep-datepicker-day-active-color);
                background: var(--upaep-datepicker-day-active-bg);
                border: var(--upaep-datepicker-day-active-border-size) var(--upaep-datepicker-day-active-border-style) var(--upaep-datepicker-day-active-border-color);
                border-radius: var(--upaep-datepicker-day-active-border-radius);
            }

            &.is-today {
                border: var(--upaep-datepicker-day-active-border-size) var(--upaep-datepicker-day-active-border-style) var(--upaep-datepicker-day-active-border-color) !important;
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-day-disabled-fz);
                font-weight: var(--upaep-datepicker-day-disabled-fw);
                color: var(--upaep-datepicker-day-disabled-color);
                background: var(--upaep-datepicker-day-disabled-bg);
                border: var(--upaep-datepicker-day-disabled-border-size) var(--upaep-datepicker-day-disabled-border-style) var(--upaep-datepicker-day-disabled-border-color);
                border-radius: var(--upaep-datepicker-day-disabled-border-radius);
                opacity: .5;
                pointer-events: none;
            }

            &.is-inactive {
                pointer-events: none;
            }
        }

        .upaep__datepicker-year {
            width: var(--upaep-datepicker-year-width);
            height: var(--upaep-datepicker-year-height);
            padding: var(--upaep-datepicker-year-padding);
            margin: var(--upaep-datepicker-year-margin);
            font-size: var(--upaep-datepicker-year-fz);
            font-weight: var(--upaep-datepicker-year-fw);
            color: var(--upaep-datepicker-year-color);
            background: var(--upaep-datepicker-year-bg);
            border: var(--upaep-datepicker-year-border-size) var(--upaep-datepicker-year-border-style) var(--upaep-datepicker-year-border-color);
            border-radius: var(--upaep-datepicker-year-border-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            animation: a_zoomIn .3s ease-in;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-year-hover-fz);
                font-weight: var(--upaep-datepicker-year-hover-fw);
                color: var(--upaep-datepicker-year-hover-color);
                background: var(--upaep-datepicker-year-hover-bg);
                border: var(--upaep-datepicker-year-hover-border-size) var(--upaep-datepicker-year-hover-border-style) var(--upaep-datepicker-year-hover-border-color);
                border-radius: var(--upaep-datepicker-year-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-year-active-fz);
                font-weight: var(--upaep-datepicker-year-active-fw);
                color: var(--upaep-datepicker-year-active-color);
                background: var(--upaep-datepicker-year-active-bg);
                border: var(--upaep-datepicker-year-active-border-size) var(--upaep-datepicker-year-active-border-style) var(--upaep-datepicker-year-active-border-color);
                border-radius: var(--upaep-datepicker-year-active-border-radius);
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-year-disabled-fz);
                font-weight: var(--upaep-datepicker-year-disabled-fw);
                color: var(--upaep-datepicker-year-disabled-color);
                background: var(--upaep-datepicker-year-disabled-bg);
                border: var(--upaep-datepicker-year-disabled-border-size) var(--upaep-datepicker-year-disabled-border-style) var(--upaep-datepicker-year-disabled-border-color);
                border-radius: var(--upaep-datepicker-year-disabled-border-radius);
            }
        }

        .upaep__datepicker-month {
            width: var(--upaep-datepicker-month-width);
            height: var(--upaep-datepicker-month-height);
            padding: var(--upaep-datepicker-month-padding);
            margin: var(--upaep-datepicker-month-margin);
            font-size: var(--upaep-datepicker-month-fz);
            font-weight: var(--upaep-datepicker-month-fw);
            color: var(--upaep-datepicker-month-color);
            background: var(--upaep-datepicker-month-bg);
            border: var(--upaep-datepicker-month-border-size) var(--upaep-datepicker-month-border-style) var(--upaep-datepicker-month-border-color);
            border-radius: var(--upaep-datepicker-month-border-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            animation: a_zoomIn .3s ease-in;

            &:not(.is-active):hover {
                font-size: var(--upaep-datepicker-month-hover-fz);
                font-weight: var(--upaep-datepicker-month-hover-fw);
                color: var(--upaep-datepicker-month-hover-color);
                background: var(--upaep-datepicker-month-hover-bg);
                border: var(--upaep-datepicker-month-hover-border-size) var(--upaep-datepicker-month-hover-border-style) var(--upaep-datepicker-month-hover-border-color);
                border-radius: var(--upaep-datepicker-month-hover-border-radius);
            }

            &.is-active {
                font-size: var(--upaep-datepicker-month-active-fz);
                font-weight: var(--upaep-datepicker-month-active-fw);
                color: var(--upaep-datepicker-month-active-color);
                background: var(--upaep-datepicker-month-active-bg);
                border: var(--upaep-datepicker-month-active-border-size) var(--upaep-datepicker-month-active-border-style) var(--upaep-datepicker-month-active-border-color);
                border-radius: var(--upaep-datepicker-month-active-border-radius);
            }

            &.is-disabled {
                font-size: var(--upaep-datepicker-month-disabled-fz);
                font-weight: var(--upaep-datepicker-month-disabled-fw);
                color: var(--upaep-datepicker-month-disabled-color);
                background: var(--upaep-datepicker-month-disabled-bg);
                border: var(--upaep-datepicker-month-disabled-border-size) var(--upaep-datepicker-month-disabled-border-style) var(--upaep-datepicker-month-disabled-border-color);
                border-radius: var(--upaep-datepicker-month-disabled-border-radius);
            }
        }

        .upaep__datepicker-notify {
            font-size: var(--upaep-datepicker-limit-fz);
            font-weight: var(--upaep-datepicker-limit-fw);
            color: var(--upaep-datepicker-limit-color);
            width: 100%;
            text-align: center;
            position: relative;
            inset: 0;
        }

    }

    /*
    &:not(:has(.upaep__datepicker-years-container.is-active)),
    &:not(:has(.upaep__datepicker-months-container.is-active)) {
        .upaep__datepicker-back {
            display: none;
        }
    } */

    &:has(.upaep__datepicker-month-container.is-active) {
        .upaep__datepicker-back {
            display: none;
        }
    }

    &:has(.upaep__datepicker-years-container.is-active),
    &:has(.upaep__datepicker-months-container.is-active) {
        .upaep__datepicker-selection {
            display: none;
        }
    }

    &:has(.upaep__datepicker-months-container.is-active) {
        .upaep__datepicker-navigation {
            display: none;
        }
    }

    .upaep__datepicker-footer {
        padding: var(--upaep-datepicker-footer-padding);
        background: var(--upaep-datepicker-footer-bg);
        border-radius: var(--upaep-datepicker-footer-border-radius);
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .upaep__btn.__datepicker {
        --upaep-btn-color: var(--upaep-datepicker-btn-color);
        --upaep-btn-fw: var(--upaep-fw-bold);
        --upaep-btn-cont-color: var(--upaep-datepicker-btn-color);
        --upaep-btn-cont-fw: var(--upaep-fw-bold);
        --upaep-btn-bg: var(--upaep-datepicker-btn-bg);
        --upaep-btn-border-color: var(--upaep-datepicker-btn-border-color);
        --upaep-btn-hover-color: var(--upaep-datepicker-btn-hover-color);
        --upaep-btn-hover-bg: var(--upaep-datepicker-btn-hover-bg);
        --upaep-btn-hover-border-color: var(--upaep-datepicker-btn-hover-border-color);
        --upaep-btn-disabled-color: var(--upaep-datepicker-btn-disabled-color);
        --upaep-btn-disabled-bg: var(--upaep-datepicker-btn-disabled-bg);
        --upaep-btn-disabled-border-color: var(--upaep-datepicker-btn-disabled-border-color);
    }
}

/*? ------ Timepicker ------ */
.upaep__timepicker {
    --upaep-timepicker-width: 100%;
    --upaep-timepicker-height: auto;
    --upaep-timepicker-maxwidth: 400px;
    --upaep-timepicker-maxheight: 335px;
    --upaep-timepicker-padding: 1rem;
    --upaep-timepicker-margin: .5rem 0;
    --upaep-timepicker-border-size: 1px;
    --upaep-timepicker-border-style: solid;
    --upaep-timepicker-border-color: var(--upaep-color-border-grey);
    --upaep-timepicker-border-radius: 10px;
    --upaep-timepicker-position: absolute;
    --upaep-timepicker-zindex: var(--upaep-zindex-timepicker);
    --upaep-timepicker-header-padding: 1rem;
    --upaep-timepicker-header-bg: var(--upaep-color-dark-grey);
    --upaep-timepicker-header-border-radius: 10px 10px 0 0;
    --upaep-timepicker-title-fz: var(--upaep-fz20);
    --upaep-timepicker-title-fw: var(--upaep-fw-bold);
    --upaep-timepicker-title-color: var(--upaep-color-white);
    --upaep-timepicker-schedule-fz: var(--upaep-fz24);
    --upaep-timepicker-schedule-fw: var(--upaep-fw-bold);
    --upaep-timepicker-schedule-color: var(--upaep-color-white);
    --upaep-timepicker-inner-padding: 1rem;
    --upaep-timepicker-inner-bg: var(--upaep-color-white);
    --upaep-timepicker-inner-border-radius: 10px 10px 0 0;
    --upaep-timepicker-footer-padding: 0 1rem 1rem 1rem;
    --upaep-timepicker-footer-bg: var(--upaep-color-white);
    --upaep-timepicker-footer-border-radius: 0 0 10px 10px;
    --upaep-timepicker-time-width: 100%;
    --upaep-timepicker-time-height: 35px;
    --upaep-timepicker-time-padding: .5rem .35rem;
    --upaep-timepicker-time-border-size: 1px;
    --upaep-timepicker-time-border-style: solid;
    --upaep-timepicker-time-border-color: var(--upaep-color-border-grey);
    --upaep-timepicker-time-border-radius: 10px;
    --upaep-timepicker-time-bg: ;
    --upaep-timepicker-time-fz: var(--upaep-fz18);
    --upaep-timepicker-time-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-color: var(--upaep-color-dark-grey);
    --upaep-timepicker-time-hover-bg: #dee2de;
    --upaep-timepicker-time-hover-fz: var(--upaep-fz18);
    --upaep-timepicker-time-hover-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-hover-color: var(--upaep-color-dark-grey);
    --upaep-timepicker-time-active-bg: var(--upaep-color-dark-grey);
    --upaep-timepicker-time-active-fz: var(--upaep-fz18);
    --upaep-timepicker-time-active-fw: var(--upaep-fw-bold);
    --upaep-timepicker-time-active-color: var(--upaep-color-white);
    --upaep-timepicker-btn-color: var(--upaep-color-dark-grey);
    --upaep-timepicker-btn-bg: var(--upaep-color-tertiary);
    --upaep-timepicker-btn-border-color: var(--upaep-color-tertiary);
    --upaep-timepicker-btn-hover-color: var(--upaep-color-dark-grey);
    --upaep-timepicker-btn-hover-bg: var(--upaep-color-tertiary-hover);
    --upaep-timepicker-btn-hover-border-color: var(--upaep-color-tertiary-hover);
    --upaep-timepicker-btn-disabled-color: var(--upaep-color-dark-grey);
    --upaep-timepicker-btn-disabled-bg: var(--upaep-color-tertiary);
    --upaep-timepicker-btn-disabled-border-color: var(--upaep-color-tertiary);
    width: var(--upaep-timepicker-width);
    height: var(--upaep-timepicker-height);
    max-width: var(--upaep-timepicker-maxwidth);
    max-height: var(--upaep-timepicker-maxheight);
    padding: var(--upaep-timepicker-padding);
    margin: var(--upaep-timepicker-margin);
    position: relative;

    &:not(.is-show):not(.is-visible) {
        .upaep__timepicker-content {
            display: none;
        }
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    .upaep__input[disabled]~.upaep__input-icon {
        pointer-events: none;
        opacity: .5;
    }

    .upaep__input-icon {
        cursor: pointer;
        transition: scale .3s ease-in;

        &:hover {
            scale: 1.1;
            transition: scale .3s ease-in;
        }
    }

    .upaep__timepicker-header {
        padding: var(--upaep-timepicker-header-padding);
        background: var(--upaep-timepicker-header-bg);
        border-radius: var(--upaep-timepicker-header-border-radius);

        .upaep__timepicker-title {
            font-size: var(--upaep-timepicker-title-fz);
            font-weight: var(--upaep-timepicker-title-fw);
            color: var(--upaep-timepicker-title-color);
        }

        .upaep__timepicker-schedule {
            font-size: var(--upaep-timepicker-schedule-fz);
            font-weight: var(--upaep-timepicker-schedule-fw);
            color: var(--upaep-timepicker-schedule-color);
        }

        .upaep__timepicker-date-time {
            width: 100%;
            justify-content: center;
        }
    }

    .upaep__timepicker-content {
        border: var(--upaep-timepicker-border-size) var(--upaep-timepicker-border-style) var(--upaep-timepicker-border-color);
        border-radius: var(--upaep-timepicker-border-radius);
        position: var(--upaep-timepicker-position);
        z-index: var(--upaep-timepicker-zindex);
        animation: a_fadeIn .5s ease-in;
    }

    .upaep__timepicker-inner {
        display: flex;
        max-height: var(--upaep-timepicker-maxheight);
        padding: var(--upaep-timepicker-inner-padding);
        background: var(--upaep-timepicker-inner-bg);
        border-radius: var(--upaep-timepicker-inner-border-radius);
    }

    .upaep__timepicker-footer {
        padding: var(--upaep-timepicker-footer-padding);
        background: var(--upaep-timepicker-footer-bg);
        border-radius: var(--upaep-timepicker-footer-border-radius);
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .upaep__btn.__timepicker {
        --upaep-btn-color: var(--upaep-timepicker-btn-color);
        --upaep-btn-fw: var(--upaep-fw-bold);
        --upaep-btn-cont-color: var(--upaep-timepicker-btn-color);
        --upaep-btn-cont-fw: var(--upaep-fw-bold);
        --upaep-btn-bg: var(--upaep-timepicker-btn-bg);
        --upaep-btn-border-color: var(--upaep-timepicker-btn-border-color);
        --upaep-btn-hover-color: var(--upaep-timepicker-btn-hover-color);
        --upaep-btn-hover-bg: var(--upaep-timepicker-btn-hover-bg);
        --upaep-btn-hover-border-color: var(--upaep-timepicker-btn-hover-border-color);
        --upaep-btn-disabled-color: var(--upaep-timepicker-btn-disabled-color);
        --upaep-btn-disabled-bg: var(--upaep-timepicker-btn-disabled-bg);
        --upaep-btn-disabled-border-color: var(--upaep-timepicker-btn-disabled-border-color);
    }

    .upaep__timepicker-list {
        border-left: 1px solid var(--upaep-color-border-grey);
        border-right: 1px solid var(--upaep-color-border-grey);
        padding: .25rem;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        list-style: none;
        scrollbar-width: none;

        &:not(:hover) {
            scrollbar-width: none;
        }
    }

    .upaep__timepicker-time {
        width: var(--upaep-timepicker-time-width);
        height: var(--upaep-timepicker-time-height);
        padding: var(--upaep-timepicker-time-padding);
        border-radius: var(--upaep-timepicker-time-border-radius);
        background: var(--upaep-timepicker-time-bg);
        font-size: var(--upaep-timepicker-time-fz);
        font-weight: var(--upaep-timepicker-time-fw);
        color: var(--upaep-timepicker-time-color);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: a_zoomIn .3s ease-in;

        &:not(.is-active):hover {
            background: var(--upaep-timepicker-time-hover-bg);
            font-size: var(--upaep-timepicker-time-hover-fz);
            font-weight: var(--upaep-timepicker-time-hover-fw);
            color: var(--upaep-timepicker-time-hover-color);
        }

        &.is-active {
            background: var(--upaep-timepicker-time-active-bg);
            font-size: var(--upaep-timepicker-time-active-fz);
            font-weight: var(--upaep-timepicker-time-active-fw);
            color: var(--upaep-timepicker-time-active-color);
        }
    }
}

/*? ------ Alert ------ */
.upaep__alert {
    --upaep-alert-width: 100%;
    --upaep-alert-height: auto;
    --upaep-alert-bg: var(--upaep-color-white);
    --upaep-alert-padding: 1rem;
    --upaep-alert-margin: 0 0 1rem 0;
    --upaep-alert-border-size: 1px;
    --upaep-alert-border-style: solid;
    --upaep-alert-border-color: var(--upaep-color-border-grey);
    --upaep-alert-border-radius: 8px;
    --upaep-alert-fz: var(--upaep-fz16);
    --upaep-alert-fw: var(--upaep-fw-bold);
    --upaep-alert-color: inherit;
    width: var(--upaep-alert-width);
    height: var(--upaep-alert-height);
    padding: var(--upaep-alert-padding);
    margin: var(--upaep-alert-margin);
    background-color: var(--upaep-alert-bg);
    border: var(--upaep-alert-border-size) var(--upaep-alert-border-style) var(--upaep-alert-border-color);
    border-radius: var(--upaep-alert-border-radius);
    font-size: var(--upaep-alert-fz);
    font-weight: var(--upaep-alert-fw);
    color: var(--upaep-alert-color);
    position: relative;

    &.__dismissible {
        --upaep-alert-padding: 1rem 3rem 1rem 1rem;
    }

    .__close {
        position: absolute;
        inset: 0 0 auto auto;
        z-index: 2;
        padding: 1.25rem 1rem;
    }
}

.upaep__alert.__primary {
    --upaep-alert-bg: var(--upaep-color-primary);
    --upaep-alert-border-color: #af051f;
    --upaep-alert-color: var(--upaep-color-white);
}

.upaep__alert.__secondary {
    --upaep-alert-bg: var(--upaep-color-secondary);
    --upaep-alert-border-color: #eeb104;
    --upaep-alert-color: var(--upaep-color-black);
}

.upaep__alert.__tertiary {
    --upaep-alert-bg: var(--upaep-color-tertiary);
    --upaep-alert-border-color: #adadad;
    --upaep-alert-color: var(--upaep-color-black);
}

.upaep__alert.__blue {
    --upaep-alert-bg: var(--upaep-color-blue-primary);
    --upaep-alert-border-color: #234885;
    --upaep-alert-color: var(--upaep-color-white);
}

.upaep__alert.__grey {
    --upaep-alert-bg: var(--upaep-color-dark-grey);
    --upaep-alert-border-color: #4c4f52;
    --upaep-alert-color: var(--upaep-color-white);
}

.upaep__alert.__background {
    --upaep-alert-bg: var(--upaep-color-background);
    --upaep-alert-border-color: #dcdcdc;
    --upaep-alert-color: var(--upaep-color-black);
}

.upaep__alert.__success {
    --upaep-alert-bg: var(--upaep-color-success);
    --upaep-alert-border-color: #1f7634;
    --upaep-alert-color: var(--upaep-color-white);

    &.__light {
        --upaep-alert-bg: var(--upaep-color-dissabled-success);
        --upaep-alert-color: #39804a;
    }
}

.upaep__alert.__error {
    --upaep-alert-bg: var(--upaep-color-error);
    --upaep-alert-border-color: #b7192c;
    --upaep-alert-color: var(--upaep-color-white);

    &.__light {
        --upaep-alert-bg: var(--upaep-color-dissabled-error);
        --upaep-alert-color: #bb4752;
    }
}

.upaep__alert.__warning {
    --upaep-alert-bg: var(--upaep-color-warning);
    --upaep-alert-border-color: #e29400;
    --upaep-alert-color: var(--upaep-color-black);

    &.__light {
        --upaep-alert-bg: var(--upaep-color-dissabled-warning);
        --upaep-alert-color: #ce6d11;
    }
}

.upaep__alert.__info {
    --upaep-alert-bg: var(--upaep-color-blue-sky);
    --upaep-alert-border-color: #2950cc;
    --upaep-alert-color: var(--upaep-color-white);

    &.__light {
        --upaep-alert-bg: #c3dafa;
        --upaep-alert-color: #2950cc;
    }
}

/*? ------ sortableElements ------ */
.upaep__sortable {
    --upaep-sortable-width: 100%;
    --upaep-sortable-height: auto;
    --upaep-sortable-margin: 0;
    --upaep-sortable-padding: 0;
    --upaep-sortable-bg: ;
    --upaep-sortable-wrapper-width: 100%;
    --upaep-sortable-wrapper-height: 100%;
    --upaep-sortable-wrapper-margin: .5rem 0;
    --upaep-sortable-wrapper-padding: .5rem;
    --upaep-sortable-wrapper-bg: ;
    --upaep-sortable-item-width: 100%;
    --upaep-sortable-item-height: auto;
    --upaep-sortable-item-margin: 0;
    --upaep-sortable-item-padding: .75rem 1rem;
    --upaep-sortable-item-bg: ;
    --upaep-sortable-item-fz: var(--upaep-fz18);
    --upaep-sortable-item-fw: var(--upaep-fw-medium);
    --upaep-sortable-item-color: var(--upaep-color-dark-grey);
    --upaep-sortable-item-hover-bg: #dee2e6;
    --upaep-sortable-item-hover-fz: var(--upaep-fz18);
    --upaep-sortable-item-hover-fw: var(--upaep-fw-medium);
    --upaep-sortable-item-hover-color: var(--upaep-color-dark-grey);
    --upaep-sortable-counter-width: auto;
    --upaep-sortable-counter-height: auto;
    --upaep-sortable-counter-padding: .35rem .5rem;
    --upaep-sortable-counter-bg: var(--upaep-color-blue-primary);
    --upaep-sortable-counter-color: var(--upaep-color-white);
    --upaep-sortable-counter-fw: var(--upaep-fw-semibold);
    --upaep-sortable-counter-fz: var(--upaep-fz12);
    --upaep-sortable-counter-border-radius: 50px;
    --upaep-sortable-icon-width: 30px;
    --upaep-sortable-icon-height: 100%;
    --upaep-sortable-icon-padding: .35rem .5rem;
    --upaep-sortable-icon-bg: ;
    --upaep-sortable-icon-color: var(--upaep-color-dark-grey);
    --upaep-sortable-icon-fw: var(--upaep-fw-bold);
    --upaep-sortable-icon-fz: var(--upaep-fz20);
    --upaep-sortable-icon-border-radius: ;
    width: var(--upaep-sortable-width);
    height: var(--upaep-sortable-height);
    margin: var(--upaep-sortable-margin);
    padding: var(--upaep-sortable-padding);
    background: var(--upaep-sortable-bg);

    .upaep__sortable-wrapper {
        width: var(--upaep-sortable-wrapper-width);
        height: var(--upaep-sortable-wrapper-height);
        margin: var(--upaep-sortable-wrapper-margin);
        padding: var(--upaep-sortable-wrapper-padding);
        background: var(--upaep-sortable-wrapper-bg);
        list-style: none;
        box-shadow: var(--upaep-box-shadow);
    }

    &.__grab {
        .upaep__sortable-item {
            cursor: grab;
        }
    }

    .upaep__sortable-item {
        width: var(--upaep-sortable-item-width);
        height: var(--upaep-sortable-item-height);
        margin: var(--upaep-sortable-item-margin);
        padding: var(--upaep-sortable-item-padding);
        background: var(--upaep-sortable-item-bg);
        font-size: var(--upaep-sortable-item-fz);
        font-weight: var(--upaep-sortable-item-fw);
        color: var(--upaep-sortable-item-color);
        display: flex;
        align-items: center;
        gap: 10px;

        &:hover {
            background: var(--upaep-sortable-item-hover-bg);
            font-size: var(--upaep-sortable-item-hover-fz);
            font-weight: var(--upaep-sortable-item-hover-fw);
            color: var(--upaep-sortable-item-hover-color);
        }

        &.is-dragging {
            padding: .5;
            background: var(--upaep-sortable-item-hover-bg);
        }
    }

    .upaep__sortable-counter {
        width: var(--upaep-sortable-counter-width);
        height: var(--upaep-sortable-counter-height);
        padding: var(--upaep-sortable-counter-padding);
        background: var(--upaep-sortable-counter-bg);
        color: var(--upaep-sortable-counter-color);
        font-weight: var(--upaep-sortable-counter-fw);
        font-size: var(--upaep-sortable-counter-fz);
        border-radius: var(--upaep-sortable-counter-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
    }

    .upaep__sortable-icon {
        width: var(--upaep-sortable-icon-width);
        height: var(--upaep-sortable-icon-height);
        padding: var(--upaep-sortable-icon-padding);
        background: var(--upaep-sortable-icon-bg);
        color: var(--upaep-sortable-icon-color);
        font-weight: var(--upaep-sortable-icon-fw);
        font-size: var(--upaep-sortable-icon-fz);
        border-radius: var(--upaep-sortable-icon-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        cursor: grab;
    }

    .upaep__sortable-inner {
        width: 100%;
        height: 100%;
    }
}

/*? ------ numberpicker ------ */
.upaep__numberpicker {
    --upaep-numberpicker-width: auto;
    --upaep-numberpicker-height: auto;
    --upaep-numberpicker-padding: 0 1rem;
    --upaep-numberpicker-margin: 0;
    --upaep-numberpicker-border-size: 1px;
    --upaep-numberpicker-border-style: solid;
    --upaep-numberpicker-border-color: var(--upaep-color-border-grey);
    --upaep-numberpicker-border-radius: 8px;
    --upaep-numberpicker-hover-bg: var(--upaep-color-background);
    --upaep-numberpicker-disabled-bg: var(--upaep-color-tenue-gray);
    --upaep-numberpicker-disabled-opacity: .5;
    --upaep-numberpicker-readonly-bg: var(--upaep-color-tenue-gray);
    --upaep-numberpicker-readonly-opacity: 1;
    --upaep-numberpicker-controls-size: 25px;
    --upaep-numberpicker-controls-padding: .5rem;
    --upaep-numberpicker-controls-margin: 0;
    --upaep-numberpicker-controls-border-radius: 8px;
    --upaep-numberpicker-controls-increase-inset: 50% 10px auto auto;
    --upaep-numberpicker-controls-decrease-inset: 50% auto auto 10px;
    --upaep-numberpicker-controls-delete-inset: 50% auto auto 10px;
    --upaep-numberpicker-input-inset: 50% 50% auto auto;
    --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
    --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
    --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem rgba(82, 86, 90, 0.25);
    width: var(--upaep-numberpicker-width);
    height: var(--upaep-numberpicker-height);
    padding: var(--upaep-numberpicker-padding);
    margin: var(--upaep-numberpicker-margin);
    border: var(--upaep-numberpicker-border-size) var(--upaep-numberpicker-border-style) var(--upaep-numberpicker-border-color);
    border-radius: var(--upaep-numberpicker-border-radius);
    min-width: 150px;
    position: relative;
    display: flex;
    align-items: center;

    .upaep__numberpicker-increase,
    .upaep__numberpicker-decrease,
    .upaep__numberpicker-delete,
    .upaep__numberpicker-controls {
        width: var(--upaep-numberpicker-controls-size);
        height: var(--upaep-numberpicker-controls-size);
        border-radius: var(--upaep-numberpicker-controls-border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        translate: 0 -50%;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
        cursor: pointer;

        .upaep__btn {
            --upaep-btn-width: var(--upaep-numberpicker-controls-size);
            --upaep-btn-height: var(--upaep-numberpicker-controls-size);
            --upaep-btn-padding: var(--upaep-numberpicker-controls-padding);
            --upaep-btn-margin: var(--upaep-numberpicker-controls-margin);
            --upaep-btn-border-radius: var(--upaep-numberpicker-controls-border-radius);
        }

        &.is-disabled {
            opacity: .5;
            pointer-events: none;
        }

        &.is-hide {
            display: none;
            pointer-events: none;
        }
    }

    .upaep__numberpicker-increase {
        inset: var(--upaep-numberpicker-controls-increase-inset);
    }

    .upaep__numberpicker-decrease {
        inset: var(--upaep-numberpicker-controls-decrease-inset);
    }

    .upaep__numberpicker-delete {
        inset: var(--upaep-numberpicker-controls-delete-inset);
    }

    &:has(.upaep__numberpicker-delete):not(.is-at-zero) {
        --upaep-numberpicker-controls-decrease-inset: 50% auto auto calc((10px * 2) + var(--upaep-numberpicker-controls-size));
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 3 - (10px * 2));
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size) auto calc((var(--upaep-numberpicker-controls-size) * 2) + 10px);
    }

    &:has(.upaep__numberpicker-decrease.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
    }

    &:has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size) * 2);
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size);
        --upaep-numberpicker-controls-decrease-inset: 50% auto auto 10px;
    }

    &:has(.upaep__numberpicker-delete.is-hide):has(.upaep__numberpicker-decrease.is-hide) {
        --upaep-numberpicker-input-margin: 0 var(--upaep-numberpicker-controls-size) 0 0;
    }

    &:has(.upaep__numberpicker-increase.is-hide) {
        --upaep-numberpicker-input-width: calc(100% - var(--upaep-numberpicker-controls-size)* 2 -(10px* 2));
        --upaep-numberpicker-input-margin: 0 0 auto calc((var(--upaep-numberpicker-controls-size)* 2) + 10px);
    }

    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-decrease.is-hide),
    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: 100%;
        --upaep-numberpicker-input-margin: 0 0 0 var(--upaep-numberpicker-controls-size);
    }

    &:has(.upaep__numberpicker-increase.is-hide):has(.upaep__numberpicker-decrease.is-hide):has(.upaep__numberpicker-delete.is-hide) {
        --upaep-numberpicker-input-width: 100%;
        --upaep-numberpicker-input-margin: 0;
        --upaep-numberpicker-padding: 0;
    }

    .upaep__input {
        --upaep-input-width: var(--upaep-numberpicker-input-width);
        --upaep-input-margin: var(--upaep-numberpicker-input-margin);
        --upaep-input-bg: inset;
        --upaep-input-border-bottom-size: 0;
        --upaep-input-border-size: 0;
        --upaep-input-border-color: ;
        --upaep-input-boxshadow: ;
        --upaep-input-focus-bg: ;
        --upaep-input-focus-border-size: 0;
        --upaep-input-focus-border-color: ;
        --upaep-input-focus-boxshadow: ;
        --upaep-input-disabled-bg: inset;
        --upaep-input-readonly-bg: inset;
        --upaep-input-hover-bg: inset;
        --upaep-input-hover-border-size: 0;
        --upaep-input-hover-border-color: ;
        --upaep-input-hover-color: ;

        &::-webkit-inner-spin-button {
            appearance: none
        }
    }

    &:has(input.__rounded),
    &.__rounded {
        --upaep-numberpicker-border-radius: 50px;
    }

    &:has(input[disabled]) {
        background: var(--upaep-numberpicker-disabled-bg);
        opacity: var(--upaep-numberpicker-disabled-opacity);
    }

    &:has(input[readonly]) {
        background: var(--upaep-numberpicker-readonly-bg);
        opacity: var(--upaep-numberpicker-readonly-opacity);
    }

    &:hover {
        background: var(--upaep-numberpicker-hover-bg);
    }

    &:has(input:focus:hover:not(:disabled):not([readonly])),
    &:has(input:focus:not(:disabled):not([readonly])) {
        background: var(--upaep-color-white);
        box-shadow: var(--upaep-numberpicker-focus-boxshadow);
    }

    &:has(>input.is-success),
    &:has(>input.is-valid) {
        --upaep-numberpicker-border-color: var(--upaep-color-success);
        --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    }

    &:has(>input.is-error),
    &:has(>input.is-invalid) {
        --upaep-numberpicker-border-color: var(--upaep-color-error);
        --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }
}

.was-validated,
.__validated {
    .upaep__numberpicker {
        &:has(>input:valid) {
            --upaep-numberpicker-border-color: var(--upaep-color-success);
            --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
        }

        &:has(>input:invalid) {
            --upaep-numberpicker-border-color: var(--upaep-color-error);
            --upaep-numberpicker-focus-boxshadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }
    }
}

/*? ------ Trinity ------ */
.upaep__views {
    width: 100%;
    height: auto;

    .upaep__view {
        --upaep-view-width: 100%;
        --upaep-view-height: auto;
        --upaep-view-padding: 0;
        --upaep-view-margin: 0;
        width: var(--upaep-view-width);
        height: var(--upaep-view-height);
        padding: var(--upaep-view-padding);
        margin: var(--upaep-view-margin);

        &:not(.is-active) {
            display: none;
        }

        &.is-active {
            animation: a_fadeIn .8s;
        }
    }
}

.upaep__view-header {
    --upaep-view-header-width: 100%;
    --upaep-view-header-height: auto;
    --upaep-view-header-padding: 12px 59px 18px;
    --upaep-view-header-bg: var(--upaep-color-white);
    --upaep-view-header-title-fz: var(--upaep-fz20);
    --upaep-view-header-title-fw: var(--upaep-fw-bold);
    --upaep-view-header-title-color: var(--upaep-color-blue-primary);
    --upaep-view-header-subtitle-fz: var(--upaep-fz16);
    --upaep-view-header-subtitle-fw: var(--upaep-fw-medium);
    --upaep-view-header-subtitle-color: var(--upaep-color-dark-grey);
    width: var(--upaep-view-header-width);
    height: var(--upaep-view-header-height);
    padding: var(--upaep-view-header-padding);
    background: var(--upaep-view-header-bg);

    .upaep__view-header-top {
        width: 100%;
        margin: 0 0 .5rem;
    }

    .upaep__view-header-bottom {
        width: 100%;
    }

    .upaep__view-header-buttons {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-top: 2px solid var(--upaep-color-tenue-gray);
        padding: .5rem 0 0;
        position: relative;
    }

    .upaep__view-header-titles {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: 0 0 .5rem;
    }

    .upaep__view-header-title {
        font-size: var(--upaep-view-header-title-fz);
        font-weight: var(--upaep-view-header-title-fw);
        color: var(--upaep-view-header-title-color);
        margin: 0;
    }

    .upaep__view-header-subtitle {
        font-size: var(--upaep-view-header-subtitle-fz);
        font-weight: var(--upaep-view-header-subtitle-fw);
        color: var(--upaep-view-header-subtitle-color);
        margin: 0;
    }

    @media(width <=480px) {
        --upaep-view-header-padding: 12px 30px 18px;
    }
}

.upaep__view-dropdown-buttons {
    display: flex;
    gap: 10px;

    @media(width <=480px) {
        padding: .5rem 0;
        flex-direction: column;
        justify-content: start;
        background: var(--upaep-color-white);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        position: absolute;
        inset: 100% auto auto 0;
        z-index: var(--upaep-zindex-dropdown);

        &:not(.is-show) {
            display: none;
        }

        .upaep__btn {
            justify-content: start;
        }
    }
}

.upaep__view-inner {
    --upaep-view-inner-width: auto;
    --upaep-view-inner-height: auto;
    --upaep-view-inner-margin: 2rem 0 0;
    --upaep-view-inner-padding: 0;
    --upaep-view-inner-bg: ;
    width: var(--upaep-view-inner-width);
    height: var(--upaep-view-inner-height);
    margin: var(--upaep-view-inner-margin);
    padding: var(--upaep-view-inner-padding);
    background: var(--upaep-view-inner-bg);

    @media(768px <=width) {

        &:has(.upaep__view-container~.upaep__view-sidebar) {
            display: flex;
            margin: 0;

            .upaep__view-container:not(.is-fluid) {
                --upaep-view-container-maxwidth: 60%;
                min-height: var(--main-height);
            }

            .upaep__view-sidebar {
                --upaep-view-sidebar-width: 30%;
                min-height: var(--main-height);
            }
        }
    }

    @media(width <=768px) {

        &:has(.upaep__view-container~.upaep__view-sidebar) {

            .upaep__view-container {
                --upaep-view-container-maxwidth: 95%;
            }

            .upaep__view-sidebar {
                --upaep-view-sidebar-width: 100%;
            }
        }
    }
}

.upaep__view-container {
    --upaep-view-container-width: 100%;
    --upaep-view-container-height: auto;
    --upaep-view-container-margin: 0 auto;
    --upaep-view-container-maxwidth: ;
    width: var(--upaep-view-container-width);
    height: var(--upaep-view-container-height);
    margin: var(--upaep-view-container-margin);
    max-width: var(--upaep-view-container-maxwidth);
    transition: all .3s ease-in-out;

    &.is-fluid {
        --upaep-view-container-maxwidth: 95%;
    }

    @media (480px <=width) {
        --upaep-view-container-maxwidth: 450px;
    }

    @media (924px <=width) {
        --upaep-view-container-maxwidth: 720px;
    }

    @media (1024px <=width) {
        --upaep-view-container-maxwidth: 900px;
    }

    @media (1450px <=width) {
        --upaep-view-container-maxwidth: 1200px;
    }

}

.upaep__view-sidebar {
    --upaep-view-sidebar-width: auto;
    --upaep-view-sidebar-height: auto;
    --upaep-view-sidebar-padding: 1rem;
    --upaep-view-sidebar-margin: 0;
    --upaep-view-sidebar-bg: var(--upaep-color-background);
    --upaep-view-sidebar-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-view-sidebar-boxshadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --upaep-sidebar-item-title-fz: var(--upaep-fz16);
    --upaep-sidebar-item-title-fw: var(--upaep-color-blue-primary);
    --upaep-sidebar-item-title-color: var(--upaep-fw-semibold);
    --upaep-sidebar-item-subtitle-fz: var(--upaep-fz14);
    --upaep-sidebar-item-subtitle-fw: var(--upaep-color-blue-primary);
    --upaep-sidebar-item-subtitle-color: var(--upaep-fw-semibold);
    --upaep-sidebar-item-text-fz: var(--upaep-fz14);
    --upaep-sidebar-item-text-fw: var(--upaep-color-dark-grey);
    --upaep-sidebar-item-text-color: var(--upaep-fw-regular);
    --upaep-sidebar-close-icon-size: 50px;
    --upaep-sidebar-close-size: 25px;
    --upaep-sidebar-close-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxMiIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzQyLjYgMTUwLjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMTkyIDIxMC43IDg2LjYgMTA1LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zTDE0Ni43IDI1NiA0MS40IDM2MS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDE5MiAzMDEuMyAyOTcuNCA0MDYuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDIzNy4zIDI1NiAzNDIuNiAxNTAuNnoiLz48L3N2Zz4=');
    width: var(--upaep-view-sidebar-width);
    height: var(--upaep-view-sidebar-height);
    padding: var(--upaep-view-sidebar-padding);
    margin: var(--upaep-view-sidebar-margin);
    background: var(--upaep-view-sidebar-bg);
    box-shadow: var(--upaep-view-sidebar-boxshadow);
    flex-shrink: 0;
    overflow: hidden;
    transition: translate .3s ease-in-out;

    &.is-toggle-offcanvas,
    &.is-offcanvas {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: var(--upaep-zindex-offcanvas);

        &:not(.is-show) {
            translate: 100%;
            transition: translate .3s;

            .upaep__view-sidebar-close {
                display: none;
            }
        }
    }

    @media(480px<=width) {
        &:not(.is-offcanvas) {
            .upaep__view-sidebar-close {
                display: none;
            }
        }
    }

    @media(width<=480px) {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: var(--upaep-zindex-offcanvas);

        &:not(.is-show) {
            translate: 100%;
            transition: translate .3s;
        }
    }

    .upaep__view-sidebar-item {
        width: 100%;

        &:not(:last-child) {
            margin: 0 0 1rem;
        }
    }

    .upaep__view-sidebar-item-header {
        width: 100%;
        padding: 0 .25rem;
        border-bottom: 2px solid var(--upaep-color-red);
    }

    .upaep__view-sidebar-item-content {
        width: 100%;
        padding: .5rem 1rem;

        .upaep__list {
            --upaep-list-item-padding: .75rem 0;
            --upaep-list-item-border-bottom-color: #B8BABC;
            --upaep-list-padding: 0;
            --upaep-list-margin: 0;
            --upaep-list-item-border-radius: 0;
            list-style: none;

            .upaep__list-item {
                border-bottom: 1px solid #B8BABC;
            }
        }
    }

    .upaep__view-sidebar-item-title {
        font-size: var(--upaep-sidebar-item-title-fz);
        color: var(--upaep-sidebar-item-title-fw);
        font-weight: var(--upaep-sidebar-item-title-color);
        margin: 0;
    }

    .upaep__view-sidebar-item-subtitle {
        font-size: var(--upaep-sidebar-item-subtitle-fz);
        color: var(--upaep-sidebar-item-subtitle-fw);
        font-weight: var(--upaep-sidebar-item-subtitle-color);
        margin: 0;
    }

    .upaep__view-sidebar-item-text {
        font-size: var(--upaep-sidebar-item-text-fz);
        color: var(--upaep-sidebar-item-text-fw);
        font-weight: var(--upaep-sidebar-item-text-color);
        margin: 0;
    }

    .upaep__view-sidebar-header {
        width: 100%;
        display: flex;
        justify-content: space-between;

        &:has(>*:only-child) {
            justify-content: end;
        }
    }

    .upaep__view-sidebar-inner {
        overflow-y: auto;
        height: 100%;
    }

    .upaep__view-sidebar-close {
        width: var(--upaep-sidebar-close-icon-size);
        height: var(--upaep-sidebar-close-icon-size);
        position: relative;
        cursor: pointer;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--upaep-sidebar-close-icon) center center no-repeat;
            background-size: var(--upaep-sidebar-close-size);
        }
    }

}

.upaep__btn-group {
    &.__sm {
        flex-wrap: wrap;

        .upaep__btn {
            --upaep-btn-padding: .5rem 1rem;
        }
    }

    &.__views {
        --divisor-bg: var(--upaep-color-dark-grey);
    }
}

.upaep__btn.__view-back {
    --upaep-btn-margin: 0;
    --upaep-btn-padding: .25rem .4rem;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-color: var(--upaep-color-dark-grey);
    --upaep-btn-fw: var(--upaep-fw-medium);
    --upaep-btn-fz: var(--upaep-fz14);
    --upaep-btn-cont-color: var(--upaep-color-dark-grey);
    --upaep-btn-cont-fw: var(--upaep-fw-medium);
    --upaep-btn-cont-fz: var(--upaep-fz14);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 5px;
    --upaep-btn-hover-bg: var(--upaep-color-tenue-gray);
    --upaep-btn-hover-border-size: 0;
    gap: .5rem;

    i {
        color: var(--upaep-color-red);
    }
}

.upaep__btn.__views {
    --upaep-btn-padding: .5rem .75rem;
    --upaep-btn-margin: 0;
    --upaep-btn-bg: var(--upaep-color-white);
    --upaep-btn-color: var(--upaep-color-blue-link);
    --upaep-btn-cont-color: var(--upaep-color-blue-link);
    --upaep-btn-fw: var(--upaep-fw-semibold);
    --upaep-btn-cont-fw: var(--upaep-fw-semibold);
    --upaep-btn-border-size: 0;
    --upaep-btn-border-radius: 5px;
    --upaep-btn-hover-color: var(--upaep-color-blue-link-hover);
    --upaep-btn-hover-cont-color: var(--upaep-color-blue-link-hover);
    --upaep-btn-hover-border-size: 0;
    gap: 10px;

    img {
        width: 20px;
        height: 20px;
    }
}

.upaep__btn.__dropdown-buttons {

    @media(480px <=width) {
        display: none;
    }
}

.upaep__modal.__trinity {
    --upaep-modal-title-color: var(--upaep-color-blue-primary);
    --upaep-modal-title-fz: var(--upaep-fz20);
    --upaep-modal-header-padding: 1rem .5rem;

    .upaep__modal-body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .upaep__modal-header {
        justify-content: end;
    }

    &.is-show {
        .upaep__modal-icon-status img {
            animation: a_bounceIn 0.8s 0.5s;
        }
    }

    .upaep__modal-icon-status img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: block;

        &.__icon-brumildo {
            width: 170px;
            height: 170px;
        }
    }

    .upaep__modal-titles {
        width: 100%;
    }

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

    .upaep__modal-texts {
        width: 100%;
        justify-items: center;
    }

    .upaep__text {
        --upaep-text-color: var(--upaep-color-dark-grey);
        --upaep-text-fz: var(--upaep-fz16);
    }

    .upaep__subtitle {
        --upaep-subtitle-color: var(--upaep-color-blue-primary);
        --upaep-subtitle-fz: 24px;
        --upaep-subtitle-fw: var(--upaep-fw-bold);
    }

    .upaep__modal-buttons {
        width: 100%;
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 1rem 0 1.5em;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }
    }

    .upaep__btn:not(.upaep__btn.__autocomplete):not(.upaep__btn.__selectpicker) {
        display: block;
        min-width: 100px;
        --upaep-btn-margin: 1rem 0;
        --upaep-btn-padding: .5rem;
    }

    &:has(.is-scroll) {
        --upaep-modal-overflow: hidden;
        --upaep-modal-dialog-height: calc(100% - .85rem * 2);
        --upaep-modal-content-maxheight: 100%;
        --upaep-modal-body-overflow: hidden;
        --upaep-modal-content-overflow: hidden;
    }

    .is-scroll {
        overflow-y: auto;
    }

}

.upaep__card.__systems-trinity {
    --upaep-card-width: auto;
    --upaep-card-maxwidth: 400px;
    --upaep-card-height: 100%;
    --upaep-card-margin: 0 auto;
    --upaep-card-padding: 0;
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-border-radius: 10px;
    --upaep-card-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-bold);
    --upaep-card-title-color: var(--upaep-color-blue-primary);
    --upaep-card-title-align: center;
    --upaep-card-text-fz: var(--upaep-fz16);
    --upaep-card-text-fw: var(--upaep-fw-regular);
    --upaep-card-text-color: var(--upaep-color-dark-grey);
    --upaep-card-text-align: center;
    --upaep-card-img-width: auto;
    --upaep-card-img-height: 100%;
    --upaep-card-content-padding: 0;
    --upaep-card-footer-padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .upaep__card-content {
        align-items: start;
    }

    .upaep__card-texts {
        padding: 0 .25em;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .upaep__card-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }


    .upaep__btn {
        --upaep-btn-margin: 0;
        --upaep-btn-padding: .625rem 1.5rem;
    }
}

.upaep__card.__systems-trinity-follow {
    --upaep-card-bg: var(--upaep-color-white);
    --upaep-card-width: 100%;
    --upaep-card-height: auto;
    --upaep-card-padding: 0;
    --upaep-card-margin: 1rem auto;
    --upaep-card-header-bg: ;
    --upaep-card-title-color: var(--upaep-color-dark-grey);
    --upaep-card-title-fz: var(--upaep-fz18);
    --upaep-card-title-fw: var(--upaep-fw-regular);
    --upaep-card-title-align: center;
    --upaep-card-text-color: var(--upaep-color-dark-grey);
    --upaep-card-text-fz: var(--upaep-fz40);
    --upaep-card-text-fw: var(--upaep-fw-bold);
    --upaep-card-content-bg: var(--upaep-color-white);
    --upaep-card-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-card-content-border-radius: 10px 10px 0 0;
    --upaep-card-footer-border-top-color: var(--upaep-color-tenue-gray);

    a {
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: var(--upaep-color-blue-link);

        &:hover {
            color: var(--upaep-color-blue-link-hover);
        }
    }

    .__link {
        --upaep-link-fz: var(--upaep-fz16);
        --upaep-link-fw: var(--upaep-fw-regular);
        --upaep-link-color: var(--upaep-color-blue-link);
        --upaep-link-color-underline: var(--upaep-color-blue-link);
        --upaep-link-margin: 1rem;
    }

    .upaep__card-texts {
        justify-items: center;
    }

    .upaep__card-footer {
        display: flex;
        justify-content: center;
    }

    .upaep__card-content {
        flex-direction: column;

        .upaep__btn {
            --upaep-btn-margin: 0;
            --upaep-btn-padding: .5rem;
        }
    }

    .upaep__btn {
        --upaep-btn-margin: 0;
        --upaep-btn-padding: .5rem 1rem;
        --upaep-btn-color: var(--upaep-color-blue-link);
        --upaep-btn-cont-color: var(--upaep-color-blue-link);
        --upaep-btn-bg: var(--upaep-color-none);
        --upaep-btn-hover-color: var(--upaep-color-blue-link-hover);
        --upaep-btn-hover-bg: var(--upaep-color-color-none);
        --upaep-btn-hover-border-color: var(--upaep-color-color-none);
        --upaep-btn-disabled-color: var(--upaep-color-blue-link-hover);
        --upaep-btn-disabled-bg: var(--upaep-color-none);
        --upaep-btn-disabled-border-color: var(--upaep-color-none);
        --upaep-btn-border-size: 0;
    }
}

.upaep__forms-steps {
    --upaep-forms-steps-width: 100%;
    --upaep-forms-steps-height: auto;
    --upaep-forms-steps-padding: 0;
    --upaep-forms-steps-margin: 0;
    --upaep-forms-steps-bg: ;
    --upaep-forms-steps-border-size: ;
    --upaep-forms-steps-border-style: ;
    --upaep-forms-steps-border-color: ;
    --upaep-forms-steps-border-radius: 10px;
    width: var(--upaep-forms-steps-width);
    height: var(--upaep-forms-steps-height);
    padding: var(--upaep-forms-steps-padding);
    margin: var(--upaep-forms-steps-margin);
    background: var(--upaep-forms-steps-bg);
    border: var(--upaep-forms-steps-border-size) var(--upaep-forms-steps-border-style) var(--upaep-forms-steps-border-color);
    border-radius: var(--upaep-forms-steps-border-radius);

    .upaep__title {
        --upaep-title-color: var(--upaep-color-dark-grey);
        --upaep-title-fz: var(--upaep-fz24);
    }

    .upaep__text {
        --upaep-text-color: var(--upaep-color-dark-grey);
        --upaep-text-fz: var(--upaep-fz18);
        --upaep-text-fw: var(--upaep-fw-regular);
        --upaep-text-margin: 0;
    }

    &:not(:has(.upaep__form-step-section.__simple)) {
        --upaep-forms-steps-bg: ;
    }
}

.upaep__form-step {
    --upaep-form-step-title-fz: var(--upaep-fz18);
    --upaep-form-step-title-fw: var(--upaep-fw-semibold);
    --upaep-form-step-title-color: var(--upaep-color-blue-primary);
    --upaep-form-step-subtitle-fz: var(--upaep-fz16);
    --upaep-form-step-subtitle-fw: var(--upaep-fw-medium);
    --upaep-form-step-subtitle-color: var(--upaep-color-dark-grey);
    --upaep-form-step-section-bg: var(--upaep-color-white);
    --upaep-form-step-section-border-radius: 8px;
    --upaep-form-step-section-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    --upaep-form-step-content-bg: ;
    width: 100%;
    margin: 0;
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &:not(:first-child) {
        padding: 1rem;
    }

    &:not(.is-active) {
        display: none;
    }

    &.is-active {
        animation: a_fadeIn .5s;
    }

    &.is-simple {
        --upaep-form-step-content-bg: var(--upaep-color-white);
        --upaep-form-step-section-boxshadow: ;

        .upaep__form-step-section:last-child {
            border-radius: 0 0 4px 4px;
            margin: 0 0 1rem;
        }
    }

    .upaep__form-step-title {
        font-size: var(--upaep-form-step-title-fz);
        font-weight: var(--upaep-form-step-title-fw);
        color: var(--upaep-form-step-title-color);
        word-wrap: break-word;
        margin: 0;
        margin-inline-start: 1rem;

        &:empty {
            display: none;
        }
    }

    .upaep__form-step-subtitle {
        font-size: var(--upaep-form-step-subtitle-fz);
        font-weight: var(--upaep-form-step-subtitle-fw);
        color: var(--upaep-form-step-subtitle-color);
        word-wrap: break-word;
        margin: 0;
        margin-inline-start: 1rem;

        &:empty {
            display: none;
        }
    }

    .upaep__form-step-content {
        width: 100%;
        background: var(--upaep-form-step-content-bg);
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .upaep__form-step-section {
        width: 100%;
        background: var(--upaep-form-step-section-bg);
        border-radius: var(--upaep-form-step-section-border-radius);
        box-shadow: var(--upaep-form-step-section-boxshadow);

        &.__simple {
            --upaep-form-step-section-boxshadow: ;
        }
    }

    .upaep__form-step-section-header {
        padding: .5rem 0;
        border-bottom: 2px solid var(--upaep-color-tenue-gray);
    }

    .upaep__form-step-section-inner {
        padding: 1.25rem 2rem;
    }

    .upaep__form-step-buttons {
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 1rem;

        .upaep__btn {
            --upaep-btn-margin: 0;
        }
    }

    .upaep__form-step-subtitle-list {
        padding: 0 0 0 1rem;
        margin: 0;
    }
}

.upaep__panel {
    --upaep-panel-width: 100%;
    --upaep-panel-height: auto;
    --upaep-panel-border-radius: 0;
    --upaep-panel-bg: var(--upaep-color-white);
    --upaep-panel-boxshadow: ;
    --upaep-panel-title-fz: var(--upaep-fz20);
    --upaep-panel-title-fw: var(--upaep-fw-bold);
    --upaep-panel-title-color: var(--upaep-color-blue-primary);
    --upaep-panel-title-align: start;
    --upaep-panel-subtitle-fz: var(--upaep-fz18);
    --upaep-panel-subtitle-fw: var(--upaep-fw-medium);
    --upaep-panel-subtitle-color: var(--upaep-color-blue-primary);
    --upaep-panel-subtitle-align: start;
    --upaep-panel-text-fz: var(--upaep-fz16);
    --upaep-panel-text-fw: var(--upaep-fw-regular);
    --upaep-panel-text-color: var(--upaep-color-dark-grey);
    --upaep-panel-header-width: 100%;
    --upaep-panel-header-height: 100%;
    --upaep-panel-header-bg: ;
    --upaep-panel-inner-width: 100%;
    --upaep-panel-inner-height: 100%;
    --upaep-panel-inner-bg: ;
    --upaep-panel-inner-padding: 1rem 2rem;
    width: var(--upaep-panel-width);
    height: var(--upaep-panel-height);
    border-radius: var(--upaep-panel-border-radius);
    background: var(--upaep-panel-bg);
    box-shadow: var(--upaep-panel-boxshadow);

    .upaep__panel-header {
        width: var(--upaep-panel-header-width);
        height: var(--upaep-panel-header-height);
        background: var(--upaep-panel-header-bg);
        padding: 1rem 2rem;
        border-bottom: 2px solid var(--upaep-color-tenue-gray);
    }

    .upaep__panel-header-top {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .upaep__panel-header-bottom {
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 10px;
    }

    .upaep__panel-status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .upaep__panel-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    .upaep__panel-inner {
        width: var(--upaep-panel-inner-width);
        height: var(--upaep-panel-inner-height);
        background: var(--upaep-panel-inner-bg);
        padding: var(--upaep-panel-inner-padding);
    }

    &:not(.__title-fluid) {
        .upaep__panel-title {
            max-width: 50%;
            border-right: 2px solid var(--upaep-color-dark-grey);
        }
    }

    &:not(.__simple) {
        --upaep-panel-boxshadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        --upaep-panel-border-radius: 8px;
    }

    .upaep__panel-title {
        font-size: var(--upaep-panel-title-fz);
        font-weight: var(--upaep-panel-title-fw);
        color: var(--upaep-panel-title-color);
        text-align: var(--upaep-panel-title-align);
        padding: 0 .5rem 0 0;
        margin: 0;
    }

    .upaep__panel-subtitle {
        font-size: var(--upaep-panel-subtitle-fz);
        font-weight: var(--upaep-panel-subtitle-fw);
        color: var(--upaep-panel-subtitle-color);
        text-align: var(--upaep-panel-subtitle-align);
        margin: 0;
    }

    .upaep__panel-text {
        font-size: var(--upaep-panel-text-fz);
        font-weight: var(--upaep-panel-text-fw);
        color: var(--upaep-panel-text-color);
        margin: 0;

        &.__title {
            font-size: var(--upaep-fz24);
        }

        &.__subtitle {
            font-size: var(--upaep-fz20);
        }

        &.__info {
            font-weight: var(--upaep-fw-bold);
            color: var(--upaep-color-blue-primary);

            span {
                font-weight: var(--upaep-fw-regular);
                color: var(--upaep-color-dark-grey);
            }
        }
    }

    .upaep__panel-footer {
        width: 100%;
        padding: 1rem 2rem;
    }

    @media(width<=980px) {
        .upaep__panel-header-top {
            flex-wrap: wrap;
        }

        .upaep__panel-status {
            width: 150px;
            flex-direction: column;
            align-items: start;
        }

        .upaep__panel-title {
            font-size: var(--upaep-fz20);
        }

        .upaep__panel-header-bottom {
            flex-wrap: wrap;
        }

        .upaep__panel-info {
            align-items: start;
            flex-direction: column;
            gap: 0;
        }

    }

    @media(width<=480px) {
        --upaep-panel-inner-padding: 1rem;

        .upaep__panel-header-top {
            flex-wrap: wrap;
        }

        .upaep__panel-title {
            font-size: var(--upaep-fz20);
        }

        .upaep__panel-header-bottom {
            flex-wrap: wrap;
        }

        .upaep__panel-info {
            align-items: start;
        }
    }
}

.upaep__accordion:has(.upaep__details-accordion.__rounded) {

    .upaep__details-accordion {
        &:first-child {
            border-top-left-radius: var(--upaep-details-accordion-border-radius);
            border-top-right-radius: var(--upaep-details-accordion-border-radius);
        }

        &:last-child {
            border-bottom-left-radius: var(--upaep-details-accordion-border-radius);
            border-bottom-right-radius: var(--upaep-details-accordion-border-radius);
        }
    }

}

.upaep__details-accordion {
    --upaep-details-accordion-bg: var(--upaep-color-white);
    --upaep-details-accordion-border-size: 1px;
    --upaep-details-accordion-border-style: solid;
    --upaep-details-accordion-border-color: #dee2e6;
    --upaep-details-accordion-border-radius: 8px;
    --upaep-details-accordion-padding: 1rem;
    --upaep-details-accordion-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --upaep-details-accordion-mark-inactive: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMjU2IDgwYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMyVjIyNEg0OGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMkgxOTJWNDMyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMjg4SDQwMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgyNTZWODB6Ii8+PC9zdmc+');
    --upaep-details-accordion-mark-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDMyIDI1NmMwIDE3LjctMTQuMyAzMi0zMiAzMkw0OCAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJsMzUyIDBjMTcuNyAwIDMyIDE0LjMgMzIgMzJ6Ii8+PC9zdmc+');
    --upaep-details-accordion-summary-fz: var(--upaep-fz16);
    --upaep-details-accordion-summary-fw: var(--upaep-fw-bold);
    --upaep-details-accordion-summary-color: var(--upaep-color-dark-gery);
    --upaep-details-accordion-: ;
    background: var(--upaep-details-accordion-bg);
    border-bottom: var(--upaep-details-accordion-border-size) var(--upaep-details-accordion-border-style) var(--upaep-details-accordion-border-color);
    padding: var(--upaep-details-accordion-padding);
    display: block;

    .upaep__details-summary {
        font-size: var(--upaep-details-accordion-summary-fz);
        font-weight: var(--upaep-details-accordion-summary-fw);
        color: var(--upaep-details-accordion-summary-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
        cursor: pointer;
        opacity: .75;
        transition: .25s;

        &::-webkit-details-marker {
            display: none;
        }

        &:after {
            content: "";
            display: block;
            height: 1rem;
            width: 1rem;
            float: right;
            background: var(--upaep-details-accordion-mark-inactive) no-repeat 100%;
            background-size: 1rem auto;
        }
    }

    &[open] {
        >.upaep__details-summary {
            margin-bottom: 1rem;

            &:after {
                background: var(--upaep-details-accordion-mark-active) no-repeat 100%;
                background-size: 1rem auto;
            }
        }
    }

    &:last-of-type {
        border-color: transparent
    }
}

.upaep__cards-group {
    --upaep-cards-group-gap: 1rem;
    --upaep-cards-group-col: auto;
    --upaep-cards-group-justify: center;
    --upaep-cards-group-item-width: calc(100% / 12 * calc(12 / var(--upaep-cards-group-col)) - var(--upaep-cards-group-gap));
    width: 100%;
    padding: 0;

    .upaep__cards-group-wrapper {
        gap: var(--upaep-cards-group-gap);
        justify-content: var(--upaep-cards-group-justify);
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__cards-group-item {
        width: var(--upaep-cards-group-item-width);
    }

    &.__col-item-1 {
        --upaep-cards-group-col: 1;
    }

    &.__col-item-2 {
        --upaep-cards-group-col: 2;
    }

    &.__col-item-3 {
        --upaep-cards-group-col: 3;
    }

    &.__col-item-4 {
        --upaep-cards-group-col: 4;
    }

    &.__col-item-5 {
        --upaep-cards-group-col: 5;
    }

    &.__col-item-6 {
        --upaep-cards-group-col: 6;
    }

    &.__col-item-7 {
        --upaep-cards-group-col: 7;
    }

    &.__col-item-8 {
        --upaep-cards-group-col: 8;
    }

    &.__col-item-9 {
        --upaep-cards-group-col: 9;
    }

    &.__col-item-10 {
        --upaep-cards-group-col: 10;
    }

    &.__col-item-11 {
        --upaep-cards-group-col: 11;
    }

    &.__col-item-12 {
        --upaep-cards-group-col: 12;
    }

    /* sm */
    @media(480px <=width) {
        &.__col-item-sm-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-sm-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-sm-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-sm-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-sm-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-sm-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-sm-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-sm-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-sm-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-sm-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-sm-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-sm-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* md */
    @media(768px <=width) {
        &.__col-item-md-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-md-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-md-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-md-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-md-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-md-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-md-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-md-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-md-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-md-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-md-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-md-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* lg */
    @media(1024px <=width) {
        &.__col-item-lg-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-lg-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-lg-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-lg-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-lg-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-lg-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-lg-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-lg-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-lg-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-lg-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-lg-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-lg-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* xl */
    @media(1450px <=width) {
        &.__col-item-xl-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-xl-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-xl-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-xl-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-xl-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-xl-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-xl-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-xl-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-xl-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-xl-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-xl-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-xl-12 {
            --upaep-cards-group-col: 12;
        }
    }

    /* xxl */
    @media(1920px <=width) {
        &.__col-item-xxl-1 {
            --upaep-cards-group-col: 1;
        }

        &.__col-item-xxl-2 {
            --upaep-cards-group-col: 2;
        }

        &.__col-item-xxl-3 {
            --upaep-cards-group-col: 3;
        }

        &.__col-item-xxl-4 {
            --upaep-cards-group-col: 4;
        }

        &.__col-item-xxl-5 {
            --upaep-cards-group-col: 5;
        }

        &.__col-item-xxl-6 {
            --upaep-cards-group-col: 6;
        }

        &.__col-item-xxl-7 {
            --upaep-cards-group-col: 7;
        }

        &.__col-item-xxl-8 {
            --upaep-cards-group-col: 8;
        }

        &.__col-item-xxl-9 {
            --upaep-cards-group-col: 9;
        }

        &.__col-item-xxl-10 {
            --upaep-cards-group-col: 10;
        }

        &.__col-item-xxl-11 {
            --upaep-cards-group-col: 11;
        }

        &.__col-item-xxl-12 {
            --upaep-cards-group-col: 12;
        }
    }
}

.upaep__filters-group {
    --upaep-filters-group-gap: 1rem;
    --upaep-filters-group-col: auto;
    --upaep-filters-group-justify: center;
    --upaep-filters-group-item-width: calc(100% / 12 * calc(12 / var(--upaep-filters-group-col)) - var(--upaep-filters-group-gap));
    width: 100%;

    .upaep__filters-wrapper {
        gap: var(--upaep-filters-group-gap);
        justify-content: var(--upaep-filters-group-justify);
        display: flex;
        flex-wrap: wrap;
    }

    .upaep__filters-group-item {
        display: flex;
        align-items: center;

        &:not(.__auto) {
            width: var(--upaep-filters-group-item-width);
        }

        >* {
            width: 100%;
            margin: 0;
        }
    }

    .upaep__selectpicker {
        --upaep-selectpicker-btn-border-color: var(--upaep-color-blue-primary);
        --upaep-selectpicker-btn-border-size: 1px;
        --upaep-selectpicker-btn-selected-border-color: var(--upaep-color-blue-primary-hover);
        --upaep-selectpicker-btn-selected-border-size: 1px;
    }

    &.__col-item-1 {
        --upaep-filters-group-col: 1;
    }

    &.__col-item-2 {
        --upaep-filters-group-col: 2;
    }

    &.__col-item-3 {
        --upaep-filters-group-col: 3;
    }

    &.__col-item-4 {
        --upaep-filters-group-col: 4;
    }

    &.__col-item-5 {
        --upaep-filters-group-col: 5;
    }

    &.__col-item-6 {
        --upaep-filters-group-col: 6;
    }

    &.__col-item-7 {
        --upaep-filters-group-col: 7;
    }

    &.__col-item-8 {
        --upaep-filters-group-col: 8;
    }

    &.__col-item-9 {
        --upaep-filters-group-col: 9;
    }

    &.__col-item-10 {
        --upaep-filters-group-col: 10;
    }

    &.__col-item-11 {
        --upaep-filters-group-col: 11;
    }

    &.__col-item-12 {
        --upaep-filters-group-col: 12;
    }

    /* sm */
    @media(480px <=width) {
        &.__col-item-sm-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-sm-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-sm-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-sm-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-sm-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-sm-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-sm-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-sm-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-sm-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-sm-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-sm-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-sm-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* md */
    @media(768px <=width) {
        &.__col-item-md-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-md-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-md-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-md-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-md-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-md-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-md-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-md-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-md-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-md-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-md-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-md-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* lg */
    @media(1024px <=width) {
        &.__col-item-lg-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-lg-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-lg-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-lg-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-lg-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-lg-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-lg-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-lg-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-lg-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-lg-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-lg-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-lg-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* xl */
    @media(1450px <=width) {
        &.__col-item-xl-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-xl-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-xl-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-xl-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-xl-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-xl-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-xl-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-xl-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-xl-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-xl-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-xl-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-xl-12 {
            --upaep-filters-group-col: 12;
        }
    }

    /* xxl */
    @media(1920px <=width) {
        &.__col-item-xxl-1 {
            --upaep-filters-group-col: 1;
        }

        &.__col-item-xxl-2 {
            --upaep-filters-group-col: 2;
        }

        &.__col-item-xxl-3 {
            --upaep-filters-group-col: 3;
        }

        &.__col-item-xxl-4 {
            --upaep-filters-group-col: 4;
        }

        &.__col-item-xxl-5 {
            --upaep-filters-group-col: 5;
        }

        &.__col-item-xxl-6 {
            --upaep-filters-group-col: 6;
        }

        &.__col-item-xxl-7 {
            --upaep-filters-group-col: 7;
        }

        &.__col-item-xxl-8 {
            --upaep-filters-group-col: 8;
        }

        &.__col-item-xxl-9 {
            --upaep-filters-group-col: 9;
        }

        &.__col-item-xxl-10 {
            --upaep-filters-group-col: 10;
        }

        &.__col-item-xxl-11 {
            --upaep-filters-group-col: 11;
        }

        &.__col-item-xxl-12 {
            --upaep-filters-group-col: 12;
        }
    }
}

.upaep__dates-group {
    --upaep-date-group-text-bg: var(--upaep-color-blue-primary);
    --upaep-date-group-text-color: var(--upaep-color-white);
    --upaep-date-group-text-fz: var(--upaep-fz14);
    --upaep-date-group-text-fw: var(--upaep-fw-regular);
    --upaep-date-group-text-border-radius: 10px 0 0 10px;
    --upaep-date-group-border-size: 1px;
    --upaep-date-group-border-style: solid;
    --upaep-date-group-border-color: var(--upaep-date-group-text-bg);
    --upaep-date-group-border-radius: 0 10px 10px 0;
    --upaep-date-group-padding: .25rem;
    width: auto;
    display: flex;

    .upaep__dates-group-text {
        padding: 0 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--upaep-date-group-text-bg);
        color: var(--upaep-date-group-text-color);
        font-size: var(--upaep-date-group-text-fz);
        font-weight: var(--upaep-date-group-text-fw);
        border-radius: var(--upaep-date-group-text-border-radius);
    }

    .upaep__dates-group-inner {
        display: flex;
        gap: 1rem;
        border: var(--upaep-date-group-border-size) var(--upaep-date-group-border-style) var(--upaep-date-group-border-color);
        border-radius: var(--upaep-date-group-border-radius);
        padding: var(--upaep-date-group-padding);
    }

    .upaep__input {
        --upaep-input-width: 150px;
        --upaep-input-height: 35px;
        --upaep-input-margin: 0;
        --upaep-input-border-color: transparent;
        --upaep-input-hover-border-color: transparent;
        --upaep-input-focus-border-color: transparent;
        --upaep-input-border-bottom-color: transparent;
        --upaep-input-hover-border-bottom-color: transparent;
    }

    .upaep__label {
        --upaep-label-margin: 0;
        --upaep-label-padding: 0;
    }

    .upaep__dates-input-group {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    @media(width<=980px) {
        flex-direction: column;

        .upaep__dates-group-text {
            padding: .5rem;
            border-radius: 10px 10px 0 0;
        }

        .upaep__dates-group-inner {
            flex-wrap: wrap;
            border-radius: 0 0 10px 10px;
        }

        .upaep__input {
            --upaep-input-width: 100%;
            --upaep-input-margin: 0 auto;
        }
    }
}

/*? ------ Schedule ------ */
.upaep__schedule {
    width: 100%;

    &:has(.upaep__schedule-appointments) {
        max-width: 550px;
    }

    .upaep__schedule-appointments,
    .upaep__schedule-resevations {
        width: auto;
    }
}

.upaep__appointments {
    --upaep-appointments-width: 100%;
    --upaep-appointments-height: auto;
    --upaep-appointments-border-radius: 8px;
    --upaep-appointments-boxshadow: var(--upaep-box-shadow);
    --upaep-appointments-bg: var(--upaep-color-white);
    --upaep-appointments-title-fz: var(--upaep-fz20);
    --upaep-appointments-title-fw: var(--upaep-fw-bold);
    --upaep-appointments-title-color: var(--upaep-color-blue-primary);
    --upaep-appointments-subtitle-fz: var(--upaep-fz14);
    --upaep-appointments-subtitle-fw: var(--upaep-fw-medium);
    --upaep-appointments-subtitle-color: var(--upaep-color-dark-grey);
    --upaep-appointments-text-fz: var(--upaep-fz16);
    --upaep-appointments-text-fw: var(--upaep-fw-regular);
    --upaep-appointments-text-color: var(--upaep-color-dark-grey);
    --upaep-appointments-day-fz: var(--upaep-fz14);
    --upaep-appointments-day-fw: var(--upaep-fw-bold);
    --upaep-appointments-day-color: var(--upaep-color-blue-link);
    --upaep-appointments-message-fz: var(--upaep-fz16);
    --upaep-appointments-message-fw: var(--upaep-fw-medium);
    --upaep-appointments-message-color: var(--upaep-color-dark-grey);
    --upaep-appointments-feedback-fz: var(--upaep-fz14);
    --upaep-appointments-feedback-fw: var(--upaep-fw-medium);
    --upaep-appointments-feedback-color: var(--upaep-color-dark-grey);
    width: var(--upaep-appointments-width);
    height: var(--upaep-appointments-height);
    border-radius: var(--upaep-appointments-border-radius);
    box-shadow: var(--upaep-appointments-boxshadow);
    background: var(--upaep-appointments-bg);

    .upaep__appointments-header {
        width: 100%;
        padding: 1rem 1.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .upaep__appointments-inner {
        width: 100%;
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        .upaep__appointments-item,
        .upaep__appointments-duration,
        .upaep__appointments-availability,
        .upaep__appointments-session-type {
            width: 100%;
        }

        .upaep__appointments-instructions {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;

            &:not(:has(.upaep__appointments-instruction.is-active)) {
                display: none;
            }
        }

        .upaep__appointments-more {
            width: 100%;
        }
    }

    &.scroll-days {
        .upaep__appointments-days {
            max-height: 400px;
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }
    }

    &.scroll-inner {
        .upaep__appointments-inner {
            max-height: calc(100vh - 200px);
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }
    }

    .upaep__appointments-days {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .75rem;

        .upaep__appointments-day-item {
            width: 100%;
            height: 100%;
            display: grid;
            gap: .5rem;
        }

        .upaep__appointments-day {
            width: 100%;
            padding: .5rem 2rem 1.5rem 2rem;
            border-radius: 8px;
            display: flex;
            justify-content: center;

            &:has(.upaep__appointments-schedules .upaep__appointments-schedules-item:only-child) {
                align-items: center;
            }
        }

        .upaep__appointments-day-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .upaep__appointments-schedules {
            width: 100%;
            padding: 0 .5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .upaep__appointments-buttons {
            width: 50px;
            display: flex;
            align-items: start;
            justify-content: center;
        }

        .upaep__details-accordion {
            --upaep-details-accordion-summary-fz: var(--upaep-appointments-day-fz);
            --upaep-details-accordion-summary-fw: var(--upaep-appointments-day-fw);
            --upaep-details-accordion-summary-color: var(--upaep-appointments-day-color);
            --upaep-details-accordion-bg: var(--upaep-color-background);
            --upaep-details-accordion-padding: 0;
            --upaep-details-accordion-mark-inactive: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjM2NTIgMTEuMDA4OEwzLjYzNDQ2IDE2Ljk2MTJMMy42MzQ0NiA0LjAzODA5TDE3LjM2NTIgMTEuMDA4OFoiIGZpbGw9IiMwMDg1RkYiLz4KPC9zdmc+Cg==');
            --upaep-details-accordion-mark-active: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuOTkwMTcgMTcuMzY1Mkw0LjAzNzg2IDMuNjM0NDZMMTYuOTYwOSAzLjYzNDQ2TDkuOTkwMTcgMTcuMzY1MloiIGZpbGw9IiMwMDg1RkYiLz4KPC9zdmc+Cg==');
            border-radius: 8px;

            .upaep__details-summary {
                padding: .25rem .5rem;
                justify-content: start;
                flex-direction: row-reverse;
                gap: .5rem;

                &:after {
                    width: 1.25rem;
                }
            }

            &[open] {
                >.upaep__details-summary {
                    border-bottom: 1px solid #DBDBDB;
                }
            }
        }
    }

    .upaep__btn.__appointments {
        --upaep-btn-width: 28px;
        --upaep-btn-height: 28px;
        --upaep-btn-margin: 0;
        --upaep-btn-padding: 1rem;
        --upaep-btn-border-radius: 50px;

        img {
            width: 28px;
            height: 28px;
        }

        &.__add-schedule {
            position: sticky;
            inset: 0;
        }
    }

    .upaep__btn.__clear-schedules {
        --upaep-btn-padding: .5rem .75rem;
        --upaep-btn-margin: 0;
        --upaep-btn-bg: ;
        --upaep-btn-fz: var(--upaep-appointments-day-fz);
        --upaep-btn-cont-fz: var(--upaep-appointments-day-fz);
        --upaep-btn-fw: var(--upaep-appointments-day-fw);
        --upaep-btn-cont-fw: var(--upaep-appointments-day-fw);
        --upaep-btn-color: var(--upaep-appointments-day-color);
        --upaep-btn-cont-color: var(--upaep-appointments-day-color);
        --upaep-btn-border-size: 0;
        --upaep-btn-border-radius: 5px;
        --upaep-btn-hover-bg: #d3d4d5;
        --upaep-btn-hover-color: var(--upaep-color-blue-link-hover);
        --upaep-btn-hover-cont-color: var(--upaep-color-blue-link-hover);
        --upaep-btn-hover-border-size: 0;
        gap: 10px;
    }

    .upaep__appointments-schedules-item {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        animation: a_fadeIn .3s ease-in-out;

        .upaep__appointments-schedules-item-wrapper {
            width: 100%;
            display: grid;
            gap: 1.25rem;
            grid-template-columns: auto auto 35px;
            align-items: center;
        }

        &:not(:only-child):has(.upaep__appointments-schedule-message) {
            display: none;
        }

        .upaep__appointments-schedules-start,
        .upaep__appointments-schedules-end {
            width: 100%;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .upaep__label {
            --upaep-label-margin: 0;
        }

        .upaep__select {
            --upaep-select-width: 100%;
            --upaep-select-margin: 0;
        }
    }

    .upaep__appointments-schedules-item-feedback {
        font-size: var(--upaep-appointments-feedback-fz);
        font-weight: var(--upaep-appointments-feedback-fw);
        color: var(--upaep-appointments-feedback-color);
        margin: 0;

        &.is-error {
            --upaep-appointments-feedback-color: var(--upaep-color-error);
        }

        &.is-success {
            --upaep-appointments-feedback-color: var(--upaep-color-success);
        }
    }

    .upaep__appointments-instruction {
        width: 100%;
        animation: a_fadeIn .3s ease-in-out;

        &:not(.is-active) {
            display: none;
        }
    }

    .upaep__appointments-footer {
        width: 100%;
        padding: 1rem 1.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .upaep__appointments-title {
        font-size: var(--upaep-appointments-title-fz);
        font-weight: var(--upaep-appointments-title-fw);
        color: var(--upaep-appointments-title-color);
        margin: 0;
    }

    .upaep__appointments-subtitle {
        font-size: var(--upaep-appointments-subtitle-fz);
        font-weight: var(--upaep-appointments-subtitle-fw);
        color: var(--upaep-appointments-subtitle-color);
        margin: 0 0 .5rem;
    }

    .upaep__appointments-schedule-message {
        font-size: var(--upaep-appointments-message-fz);
        font-weight: var(--upaep-appointments-message-fw);
        color: var(--upaep-appointments-message-color);
        margin: 0 .5rem;
    }

    .upaep__appointments-text {
        font-size: var(--upaep-appointments-text-fz);
        font-weight: var(--upaep-appointments-text-fw);
        color: var(--upaep-appointments-text-color);
        margin: 0;
    }

    .upaep__line {
        --upaep-line-bg: #A6A6A6;
        --upaep-line-height: 1px;
        --upaep-line-border-size: 0;
        margin: 0 0 1rem;
    }

    .upaep__selectpicker {
        --upaep-selectpicker-margin: 0;
        --upaep-btn-hover-cont-color: var(--upaep-appointments-text-color);

        .upaep__btn {
            --upaep-btn-cont-color: var(--upaep-appointments-text-color);
        }
    }

    .upaep__radio {
        --upaep-radio-checked-color: var(--upaep-color-blue-link);
        --upaep-radio-focus-border-color: var(--upaep-color-blue-link);
    }

    @media(width<=480px) {
        --upaep-appointments-message-fz: var(--upaep-fz14);
        --upaep-appointments-feedback-fz: var(--upaep-fz12);

        .upaep__appointments-inner {
            padding: 1rem .5rem;
        }

        .upaep__appointments-days {
            .upaep__appointments-day-item {
                gap: .35rem;
            }

            .upaep__appointments-day {
                padding: .5rem .5rem 1.5rem .5rem;
            }

            .upaep__appointments-schedules {
                width: 100%;
            }
        }

        .upaep__appointments-schedules-item {
            gap: .5rem;

            .upaep__appointments-schedules-item-wrapper {
                gap: .5rem;
            }

            .upaep__appointments-schedules-start,
            .upaep__appointments-schedules-end {
                gap: .35rem;
            }

            .upaep__label {
                --upaep-label-fz: var(--upaep-fz12);
            }

            .upaep__select {
                --upaep-select-width: 100%;
                --upaep-select-fz: var(--upaep-fz12);
                background-size: .75rem 1rem;
            }
        }
    }
}

/*? ------ Coffi ------ */
.upaep__coffi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: var(--upaep-zindex-coffi);
    pointer-events: none;
    transform-origin: center center;
}

/*? ------ News ------ */

/*? ------ Utilities ------ */
.__text-red {
    color: var(--upaep-color-red);
}

.__text-cherry {
    color: var(--upaep-color-cherry);
}

.__text-grey {
    color: var(--upaep-color-grey);
}

.__text-light-grey {
    color: var(--upaep-color-light-grey);
}

.__text-dark-grey {
    color: var(--upaep-color-dark-grey);
}

.__text-blue-primary {
    color: var(--upaep-color-blue-primary);
}

.__text-blue-primary-hover {
    color: var(--upaep-color-blue-primary-hover);
}

.__text-yellow-primary {
    color: var(--upaep-color-yellow-primary);
}

.__text-gold {
    color: var(--upaep-color-gold);
}

.__text-background {
    color: var(--upaep-color-background);
}

.__text-tenue-gray {
    color: var(--upaep-color-tenue-gray);
}

.__text-ingenierias {
    color: var(--upaep-color-ingenierias);
}

.__text-economico-administrativas {
    color: var(--upaep-color-economico-administrativas);
}

.__text-negocios {
    color: var(--upaep-color-negocios);
}

.__text-artes-humanidades {
    color: var(--upaep-color-artes-humanidades);
}

.__text-ciecnias-creativas {
    color: var(--upaep-color-ciecnias-creativas);
}

.__text-ciecnias-humanas-sociales {
    color: var(--upaep-color-ciecnias-humanas-sociales);
}

.__text-ciencias-sociales {
    color: var(--upaep-color-ciencias-sociales);
}

.__text-ciencias-biologicas {
    color: var(--upaep-color-ciencias-biologicas);
}

.__text-ciencias-vida-salud {
    color: var(--upaep-color-ciencias-vida-salud);
}

.__text-ciencias-salud {
    color: var(--upaep-color-ciencias-salud);
}

.__text-ciencias-medicas {
    color: var(--upaep-color-ciencias-medicas);
}

.__text-lenguas-cultura {
    color: var(--upaep-color-lenguas-cultura);
}

.__text-error-light {
    color: var(--upaep-color-error-light);
}

.__text-success-light {
    color: var(--upaep-color-success-light);
}

.__text-warning-light {
    color: var(--upaep-color-warning-light);
}

.__text-error {
    color: var(--upaep-color-error);
}

.__text-success {
    color: var(--upaep-color-success);
}

.__text-warning {
    color: var(--upaep-color-warning);
}

.__text-white {
    color: var(--upaep-color-white);
}

.__text-black {
    color: var(--upaep-color-black);
}

.__text-primary {
    color: var(--upaep-color-primary);
}

.__text-secondary {
    color: var(--upaep-color-secondary);
}

.__text-tertiary {
    color: var(--upaep-color-tertiary);
}

.__text-dissabled {
    color: var(--upaep-color-dissabled);
}

.__text-dissabled-red {
    color: var(--upaep-color-dissabled-red);
}

.__text-dissabled-error {
    color: var(--upaep-color-dissabled-error);
}

.__text-dissabled-yellow {
    color: var(--upaep-color-dissabled-yellow);
}

.__text-dissabled-warning {
    color: var(--upaep-color-dissabled-warning);
}

.__text-dissabled-success {
    color: var(--upaep-color-dissabled-success);
}

.__text-none {
    color: var(--upaep-color-none);
}

.__text-gradient {
    background: linear-gradient(180deg, #FF000A 19.77%, #9A1C9F 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.__bg-red {
    background-color: var(--upaep-color-red);
}

.__bg-cherry {
    background-color: var(--upaep-color-cherry);
}

.__bg-grey {
    background-color: var(--upaep-color-grey);
}

.__bg-light-grey {
    background-color: var(--upaep-color-light-grey);
}

.__bg-dark-grey {
    background-color: var(--upaep-color-dark-grey);
}

.__bg-blue-primary {
    background-color: var(--upaep-color-blue-primary);
}

.__bg-blue-primary-hover {
    background-color: var(--upaep-color-blue-primary-hover);
}

.__bg-yellow-primary {
    background-color: var(--upaep-color-yellow-primary);
}

.__bg-gold {
    background-color: var(--upaep-color-gold);
}

.__bg-background {
    background-color: var(--upaep-color-background);
}

.__bg-tenue-gray {
    background-color: var(--upaep-color-tenue-gray);
}

.__bg-ingenierias {
    background-color: var(--upaep-color-ingenierias);
}

.__bg-economico-administrativas {
    background-color: var(--upaep-color-economico-administrativas);
}

.__bg-negocios {
    background-color: var(--upaep-color-negocios);
}

.__bg-artes-humanidades {
    background-color: var(--upaep-color-artes-humanidades);
}

.__bg-ciecnias-creativas {
    background-color: var(--upaep-color-ciecnias-creativas);
}

.__bg-ciecnias-humanas-sociales {
    background-color: var(--upaep-color-ciecnias-humanas-sociales);
}

.__bg-ciencias-sociales {
    background-color: var(--upaep-color-ciencias-sociales);
}

.__bg-ciencias-biologicas {
    background-color: var(--upaep-color-ciencias-biologicas);
}

.__bg-ciencias-vida-salud {
    background-color: var(--upaep-color-ciencias-vida-salud);
}

.__bg-ciencias-salud {
    background-color: var(--upaep-color-ciencias-salud);
}

.__bg-ciencias-medicas {
    background-color: var(--upaep-color-ciencias-medicas);
}

.__bg-lenguas-cultura {
    background-color: var(--upaep-color-lenguas-cultura);
}

.__bg-error-light {
    background-color: var(--upaep-color-error-light);
}

.__bg-error-hover-light {
    background-color: var(--upaep-color-error-hover-light);
}

.__bg-success-light {
    background-color: var(--upaep-color-success-light);
}

.__bg-success-hover-light {
    background-color: var(--upaep-color-success-hover-light);
}

.__bg-warning-light {
    background-color: var(--upaep-color-warning-light);
}

.__bg-warning-hover-light {
    background-color: var(--upaep-color-warning-hover-light);
}

.__bg-error {
    background-color: var(--upaep-color-error);
}

.__bg-error-hover {
    background-color: var(--upaep-color-error-hover);
}

.__bg-success {
    background-color: var(--upaep-color-success);
}

.__bg-success-hover {
    background-color: var(--upaep-color-success-hover);
}

.__bg-warning {
    background-color: var(--upaep-color-warning);
}

.__bg-warning-hover {
    background-color: var(--upaep-color-warning-hover);
}

.__bg-white {
    background-color: var(--upaep-color-white);
}

.__bg-white-hover {
    background-color: var(--upaep-color-white-hover);
}

.__bg-black {
    background-color: var(--upaep-color-black);
}

.__bg-primary {
    background-color: var(--upaep-color-primary);
}

.__bg-primary-hover {
    background-color: var(--upaep-color-primary-hover);
}

.__bg-secondary {
    background-color: var(--upaep-color-secondary);
}

.__bg-secondary-hover {
    background-color: var(--upaep-color-secondary-hover);
}

.__bg-tertiary {
    background-color: var(--upaep-color-tertiary);
}

.__bg-tertiary-hover {
    background-color: var(--upaep-color-tertiary-hover);
}

.__bg-whats {
    background-color: var(--upaep-color-whats);
}

.__bg-dissabled {
    background-color: var(--upaep-color-dissabled);
}

.__bg-dissabled-red {
    background-color: var(--upaep-color-dissabled-red);
}

.__bg-dissabled-error {
    background-color: var(--upaep-color-dissabled-error);
}

.__bg-dissabled-yellow {
    background-color: var(--upaep-color-dissabled-yellow);
}

.__bg-dissabled-warning {
    background-color: var(--upaep-color-dissabled-warning);
}

.__bg-dissabled-success {
    background-color: var(--upaep-color-dissabled-success);
}

.__bg-border-red {
    background-color: var(--upaep-color-border-red);
}

.__bg-border-grey {
    background-color: var(--upaep-color-border-grey);
}

.__bg-border-grey-icon {
    background-color: var(--upaep-color-border-grey-icon);
}

.__bg-border-dissabled {
    background-color: var(--upaep-color-border-dissabled);
}

.__bg-border-error {
    background-color: var(--upaep-color-border-error);
}

.__bg-border-warning {
    background-color: var(--upaep-color-border-warning);
}

.__bg-none {
    background-color: var(--upaep-color-none);
}

.__ratio {
    --ratio-aspect: ;
    position: relative;
    width: 100%;

    &::before {
        display: block;
        padding-top: var(--ratio-aspect);
        content: "";
    }

    >* {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    &.__1x1,
    &.__ratio-1x1 {
        --ratio-aspect: 100%;
    }

    &.__2x1,
    &.__ratio-2x1 {
        --ratio-aspect: 50%;
    }

    &.__4x3,
    &.__ratio-4x3 {
        --ratio-aspect: 75%;
    }

    &.__16x9,
    &.__ratio-16x9 {
        --ratio-aspect: 56.25%;
    }

    &.__21x9,
    &.__ratio-21x9 {
        --ratio-aspect: 42.8571428571%;
    }
}

.__fixed {
    --fixed-inset: ;
    --fixed-zindex: var(--upaep-zindex-fixed);
    position: fixed;
    inset: var(--fixed-inset);
    z-index: var(--fixed-zindex);

    &.__top,
    &.__fixed-top {
        --fixed-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__fixed-bottom {
        --fixed-inset: auto 0 0 0;
    }
}

.__sticky {
    --sticky-inset: ;
    --sticky-zindex: var(--upaep-zindex-sticky);
    position: sticky;
    inset: var(--sticky-inset);
    z-index: var(--sticky-zindex);

    &.__top,
    &.__sticky-top {
        --sticky-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__sticky-bottom {
        --sticky-inset: auto 0 0 0;
    }
}

.__absolute {
    --absolute-inset: ;
    --absolute-zindex: 1010;
    position: absolute;
    inset: var(--absolute-inset);
    z-index: var(--absolute-zindex);

    &.__top,
    &.__absolute-top {
        --absolute-inset: 0 0 auto 0;
    }

    &.__bottom,
    &.__absolute-bottom {
        --absolute-inset: auto 0 0 0;
    }
}

.__hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}

.__vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}

.__text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.__vr,
.upaep__line-vertical {
    --upaep-vr-width: auto;
    --upaep-vr-height: auto;
    --upaep-vr-padding: 0;
    --upaep-vr-margin: 0;
    --upaep-vr-bg: currentcolor;
    --upaep-vr-opacity: .25;
    width: var(--upaep-vr-width);
    height: var(--upaep-vr-height);
    padding: var(--upaep-vr-padding);
    margin: var(--upaep-vr-margin);
    background: var(--upaep-vr-bg);
    opacity: var(--upaep-vr-opacity);
    display: inline-block;
    align-self: stretch;
    min-height: 1em;
}

.__hidden,
.__hidden:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.__hidden:not(caption),
.__hidden:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
}

.__align-baseline {
    vertical-align: baseline !important;
}

.__align-top {
    vertical-align: top !important;
}

.__align-middle {
    vertical-align: middle !important;
}

.__align-bottom {
    vertical-align: bottom !important;
}

.__align-text-bottom {
    vertical-align: text-bottom !important;
}

.__align-text-top {
    vertical-align: text-top !important;
}

.__float-start {
    float: left !important;
}

.__float-end {
    float: right !important;
}

.__float-none {
    float: none !important;
}


.__objectfit-contain {
    object-fit: contain !important;
}

.__objectfit-cover {
    object-fit: cover !important;
}

.__objectfit-fill {
    object-fit: fill !important;
}

.__objectfit-scale {
    object-fit: scale-down !important;
}

.__objectfit-none {
    object-fit: none !important;
}

.__opacity-0 {
    opacity: 0 !important;
}

.__opacity-25 {
    opacity: 0.25 !important;
}

.__opacity-50 {
    opacity: 0.5 !important;
}

.__opacity-75 {
    opacity: 0.75 !important;
}

.__opacity-100 {
    opacity: 1 !important;
}

.__overflow-auto {
    overflow: auto !important;
}

.__overflow-hidden {
    overflow: hidden !important;
}

.__overflow-visible {
    overflow: visible !important;
}

.__overflow-scroll {
    overflow: scroll !important;
}

.__overflow-x-auto {
    overflow-x: auto !important;
}

.__overflow-x-hidden {
    overflow-x: hidden !important;
}

.__overflow-x-visible {
    overflow-x: visible !important;
}

.__overflow-x-scroll {
    overflow-x: scroll !important;
}

.__overflow-y-auto {
    overflow-y: auto !important;
}

.__overflow-y-hidden {
    overflow-y: hidden !important;
}

.__overflow-y-visible {
    overflow-y: visible !important;
}

.__overflow-y-scroll {
    overflow-y: scroll !important;
}

.__d-inline {
    display: inline !important;
}

.__d-inline-block {
    display: inline-block !important;
}

.__d-block {
    display: block !important;
}

.__d-grid {
    display: grid !important;
}

.__d-inline-grid {
    display: inline-grid !important;
}

.__d-table {
    display: table !important;
}

.__d-table-row {
    display: table-row !important;
}

.__d-table-cell {
    display: table-cell !important;
}

.__d-flex {
    display: flex !important;
}

.__d-inline-flex {
    display: inline-flex !important;
}

.__d-none {
    display: none !important;
}

.__position-static {
    position: static !important;
}

.__position-relative {
    position: relative !important;
}

.__position-absolute {
    position: absolute !important;
}

.__position-fixed {
    position: fixed !important;
}

.__position-sticky {
    position: sticky !important;
}

.__inset {
    --inset: 0;
    inset: var(--inset);

    &.__top-0 {
        --inset: 0 auto auto auto !important;
    }

    &.__top-50 {
        --inset: 50% auto auto auto !important;
    }

    &.__top-100 {
        --inset: 100% auto auto auto !important;
    }

    &.__bottom-0 {
        --inset: auto auto 0 auto !important;
    }

    &.__bottom-50 {
        --inset: auto auto 50% auto !important;
    }

    &.__bottom-100 {
        --inset: auto auto 100% auto !important;
    }

    &.__start-0 {
        --inset: auto auto auto 0 !important;
    }

    &.__start-50 {
        --inset: auto auto auto 50% !important;
    }

    &.__start-100 {
        --inset: auto auto auto 100% !important;
    }

    &.__end-0 {
        --inset: auto 0 auto auto !important;
    }

    &.__end-50 {
        --inset: auto 50% auto auto !important;
    }

    &.__end-100 {
        --inset: auto 100% auto auto !important;
    }
}

.__translate-middle {
    transform: translate(-50%, -50%) !important;
}

.__translate-middle-x {
    transform: translateX(-50%) !important;
}

.__translate-middle-y {
    transform: translateY(-50%) !important;
}

.__border {
    --border-size: 1px;
    --border-style: solid;
    --border-color: var(--upaep-color-border-grey);
    border: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-0 {
    border: 0 !important;
}

.__border-top {
    --border-top-size: 1px;
    --border-top-style: solid;
    --border-top-color: var(--upaep-color-border-grey);
    border-top: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-top-0 {
    border-top: 0 !important;
}

.__border-bottom {
    --border-bottom-size: 1px;
    --border-bottom-style: solid;
    --border-bottom-color: var(--upaep-color-border-grey);
    border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-bottom-0 {
    border-bottom: 0 !important;
}

.__border-end {
    --border-end-size: 1px;
    --border-end-style: solid;
    --border-end-color: var(--upaep-color-border-grey);
    border-right: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-end-0 {
    border-right: 0 !important;
}

.__border-start {
    --border-start-size: 1px;
    --border-start-style: solid;
    --border-start-color: var(--upaep-color-border-grey);
    border-left: var(--border-size) var(--border-style) var(--border-color) !important;
}

.__border-start-0 {
    border-left: 0 !important;
}

.__border-1 {
    border-width: 1px !important;
}

.__border-2 {
    border-width: 2px !important;
}

.__border-3 {
    border-width: 3px !important;
}

.__border-4 {
    border-width: 4px !important;
}

.__border-5 {
    border-width: 5px !important;
}

.__w-25 {
    width: 25% !important;
}

.__w-50 {
    width: 50% !important;
}

.__w-75 {
    width: 75% !important;
}

.__w-100 {
    width: 100% !important;
}

.__w-auto {
    width: auto !important;
}

.__max-w-100 {
    max-width: 100% !important;
}

.__vw-100 {
    width: 100vw !important;
}

.__min-vw-100 {
    min-width: 100vw !important;
}

.__h-25 {
    height: 25% !important;
}

.__h-50 {
    height: 50% !important;
}

.__h-75 {
    height: 75% !important;
}

.__h-100 {
    height: 100% !important;
}

.__h-auto {
    height: auto !important;
}

.__max-h-100 {
    max-height: 100% !important;
}

.__vh-100 {
    height: 100vh !important;
}

.__min-vh-100 {
    min-height: 100vh !important;
}

.__flex-fill {
    flex: 1 1 auto !important;
}

.__flex-row {
    flex-direction: row !important;
}

.__flex-column {
    flex-direction: column !important;
}

.__flex-row-reverse {
    flex-direction: row-reverse !important;
}

.__flex-column-reverse {
    flex-direction: column-reverse !important;
}

.__flex-grow-0 {
    flex-grow: 0 !important;
}

.__flex-grow-1 {
    flex-grow: 1 !important;
}

.__flex-shrink-0 {
    flex-shrink: 0 !important;
}

.__flex-shrink-1 {
    flex-shrink: 1 !important;
}

.__flex-wrap {
    flex-wrap: wrap !important;
}

.__flex-nowrap {
    flex-wrap: nowrap !important;
}

.__flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

.__justify-content-start {
    justify-content: flex-start !important;
}

.__justify-content-end {
    justify-content: flex-end !important;
}

.__justify-content-center {
    justify-content: center !important;
}

.__justify-content-between {
    justify-content: space-between !important;
}

.__justify-content-around {
    justify-content: space-around !important;
}

.__justify-content-evenly {
    justify-content: space-evenly !important;
}

.__align-items-start {
    align-items: flex-start !important;
}

.__align-items-end {
    align-items: flex-end !important;
}

.__align-items-center {
    align-items: center !important;
}

.__align-items-baseline {
    align-items: baseline !important;
}

.__align-items-stretch {
    align-items: stretch !important;
}

.__align-content-start {
    align-content: flex-start !important;
}

.__align-content-end {
    align-content: flex-end !important;
}

.__align-content-center {
    align-content: center !important;
}

.__align-content-between {
    align-content: space-between !important;
}

.__align-content-around {
    align-content: space-around !important;
}

.__align-content-stretch {
    align-content: stretch !important;
}

.__align-self-auto {
    align-self: auto !important;
}

.__align-self-start {
    align-self: flex-start !important;
}

.__align-self-end {
    align-self: flex-end !important;
}

.__align-self-center {
    align-self: center !important;
}

.__align-self-baseline {
    align-self: baseline !important;
}

.__align-self-stretch {
    align-self: stretch !important;
}

.__order-first {
    order: -1 !important;
}

.__order-0 {
    order: 0 !important;
}

.__order-1 {
    order: 1 !important;
}

.__order-2 {
    order: 2 !important;
}

.__order-3 {
    order: 3 !important;
}

.__order-4 {
    order: 4 !important;
}

.__order-5 {
    order: 5 !important;
}

.__order-last {
    order: 6 !important;
}


.__m-0 {
    margin: 0 !important;
}

.__m-1 {
    margin: 0.25rem !important;
}

.__m-2 {
    margin: 0.5rem !important;
}

.__m-3 {
    margin: 1rem !important;
}

.__m-4 {
    margin: 1.5rem !important;
}

.__m-5 {
    margin: 3rem !important;
}

.__m-auto {
    margin: auto !important;
}


.__mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.__mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.__mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.__mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.__mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.__mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.__mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.__my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.__my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.__my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.__my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.__my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.__my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.__my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.__mt-0 {
    margin-top: 0 !important;
}

.__mt-1 {
    margin-top: 0.25rem !important;
}

.__mt-2 {
    margin-top: 0.5rem !important;
}

.__mt-3 {
    margin-top: 1rem !important;
}

.__mt-4 {
    margin-top: 1.5rem !important;
}

.__mt-5 {
    margin-top: 3rem !important;
}

.__mt-auto {
    margin-top: auto !important;
}

.__me-0 {
    margin-right: 0 !important;
}

.__me-1 {
    margin-right: 0.25rem !important;
}

.__me-2 {
    margin-right: 0.5rem !important;
}

.__me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.__me-5 {
    margin-right: 3rem !important;
}

.__me-auto {
    margin-right: auto !important;
}

.__mb-0 {
    margin-bottom: 0 !important;
}

.__mb-1 {
    margin-bottom: 0.25rem !important;
}

.__mb-2 {
    margin-bottom: 0.5rem !important;
}

.__mb-3 {
    margin-bottom: 1rem !important;
}

.__mb-4 {
    margin-bottom: 1.5rem !important;
}

.__mb-5 {
    margin-bottom: 3rem !important;
}

.__mb-auto {
    margin-bottom: auto !important;
}

.__ms-0 {
    margin-left: 0 !important;
}

.__ms-1 {
    margin-left: 0.25rem !important;
}

.__ms-2 {
    margin-left: 0.5rem !important;
}

.__ms-3 {
    margin-left: 1rem !important;
}

.__ms-4 {
    margin-left: 1.5rem !important;
}

.__ms-5 {
    margin-left: 3rem !important;
}

.__ms-auto {
    margin-left: auto !important;
}

.__p-0 {
    padding: 0 !important;
}

.__p-1 {
    padding: 0.25rem !important;
}

.__p-2 {
    padding: 0.5rem !important;
}

.__p-3 {
    padding: 1rem !important;
}

.__p-4 {
    padding: 1.5rem !important;
}

.__p-5 {
    padding: 3rem !important;
}

.__px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.__px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.__px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.__px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.__px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.__px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.__py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.__py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.__py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.__py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.__py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.__py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.__pt-0 {
    padding-top: 0 !important;
}

.__pt-1 {
    padding-top: 0.25rem !important;
}

.__pt-2 {
    padding-top: 0.5rem !important;
}

.__pt-3 {
    padding-top: 1rem !important;
}

.__pt-4 {
    padding-top: 1.5rem !important;
}

.__pt-5 {
    padding-top: 3rem !important;
}

.__pe-0 {
    padding-right: 0 !important;
}

.__pe-1 {
    padding-right: 0.25rem !important;
}

.__pe-2 {
    padding-right: 0.5rem !important;
}

.__pe-3 {
    padding-right: 1rem !important;
}

.__pe-4 {
    padding-right: 1.5rem !important;
}

.__pe-5 {
    padding-right: 3rem !important;
}

.__pb-0 {
    padding-bottom: 0 !important;
}

.__pb-1 {
    padding-bottom: 0.25rem !important;
}

.__pb-2 {
    padding-bottom: 0.5rem !important;
}

.__pb-3 {
    padding-bottom: 1rem !important;
}

.__pb-4 {
    padding-bottom: 1.5rem !important;
}

.__pb-5 {
    padding-bottom: 3rem !important;
}

.__ps-0 {
    padding-left: 0 !important;
}

.__ps-1 {
    padding-left: 0.25rem !important;
}

.__ps-2 {
    padding-left: 0.5rem !important;
}

.__ps-3 {
    padding-left: 1rem !important;
}

.__ps-4 {
    padding-left: 1.5rem !important;
}

.__ps-5 {
    padding-left: 3rem !important;
}

.__gap-0 {
    gap: 0 !important;
}

.__gap-1 {
    gap: 0.25rem !important;
}

.__gap-2 {
    gap: 0.5rem !important;
}

.__gap-3 {
    gap: 1rem !important;
}

.__gap-4 {
    gap: 1.5rem !important;
}

.__gap-5 {
    gap: 3rem !important;
}

.__fw-bolder {
    font-weight: var(--upaep-fw-bolder) !important;
}

.__fw-bold {
    font-weight: var(--upaep-fw-bold) !important;
}

.__fw-semibold {
    font-weight: var(--upaep-fw-semibold) !important;
}

.__fw-medium {
    font-weight: var(--upaep-fw-medium) !important;
}

.__fw-regular {
    font-weight: var(--upaep-fw-regular) !important;
}

.__fw-light {
    font-weight: var(--upaep-fw-light) !important;
}

.__fw-normal {
    font-weight: var(--upaep-fw-normal) !important;
}

.__fw-lighter {
    font-weight: var(--upaep-fw-lighter) !important;
}

.__fs-italic {
    font-style: var(--upaep-fs-italic) !important;
}

.__fs-normal {
    font-style: var(--upaep-fs-normal) !important;
}

.__fs-oblique {
    font-style: var(--upaep-fs-oblique) !important;
}

.__fs-inherit {
    font-style: var(--upaep-fs-inherit) !important;
}

.__fs-initial {
    font-style: var(--upaep-fs-initial) !important;
}

.__fs-unset {
    font-style: var(--upaep-fs-unset) !important;
}

.__lh-1 {
    line-height: 1 !important;
}

.__lh-sm {
    line-height: 1.25 !important;
}

.__lh-base {
    line-height: 1.5 !important;
}

.__lh-lg {
    line-height: 2 !important;
}

.__text-start {
    text-align: left !important;
}

.__text-end {
    text-align: right !important;
}

.__text-center {
    text-align: center !important;
}

.__text-decoration-none {
    text-decoration: none !important;
}

.__text-decoration-underline {
    text-decoration: underline !important;
}

.__text-decoration-line-through {
    text-decoration: line-through !important;
}

.__text-lowercase {
    text-transform: lowercase !important;
}

.__text-uppercase {
    text-transform: uppercase !important;
}

.__text-capitalize {
    text-transform: capitalize !important;
}

.__text-balance {
    text-wrap: balance !important;
}

.__text-wrap {
    white-space: normal !important;
}

.__text-nowrap {
    white-space: nowrap !important;
}

.__text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

.__user-select-all {
    user-select: all !important;
}

.__user-select-auto {
    user-select: auto !important;
}

.__user-select-none {
    user-select: none !important;
}

.__pe-none {
    pointer-events: none !important;
}

.__pe-auto {
    pointer-events: auto !important;
}

.__br {
    border-radius: .375rem !important;
}

.__br-0 {
    border-radius: 0 !important;
}

.__br-1 {
    border-radius: .25rem !important;
}

.__br-2 {
    border-radius: .375rem !important;
}

.__br-3 {
    border-radius: .5rem !important;
}

.__br-4 {
    border-radius: 1rem !important;
}

.__br-5 {
    border-radius: 2rem !important;
}

.__br-circle {
    border-radius: 50% !important;
}

.__br-pill {
    border-radius: 50rem !important;
}

.__br-top {
    border-top-left-radius: .375rem !important;
    border-top-right-radius: .375rem !important;
}

.__br-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.__br-top-1 {
    border-top-left-radius: .25rem !important;
    border-top-right-radius: .25rem !important;
}

.__br-top-2 {
    border-top-left-radius: .375rem !important;
    border-top-right-radius: .375rem !important;
}

.__br-top-3 {
    border-top-left-radius: .5rem !important;
    border-top-right-radius: .5rem !important;
}

.__br-top-4 {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.__br-top-5 {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
}

.__br-top-circle {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}

.__br-top-pill {
    border-top-left-radius: 50rem !important;
    border-top-right-radius: 50rem !important;
}

.__br-bottom {
    border-bottom-left-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.__br-bottom-1 {
    border-bottom-left-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.__br-bottom-2 {
    border-bottom-left-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-bottom-3 {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

.__br-bottom-4 {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.__br-bottom-5 {
    border-bottom-left-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
}

.__br-bottom-circle {
    border-bottom-left-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.__br-bottom-pill {
    border-bottom-left-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.__br-end {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.__br-end-1 {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.__br-end-2 {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

.__br-end-3 {
    border-top-right-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

.__br-end-4 {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.__br-end-5 {
    border-top-right-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
}

.__br-end-circle {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.__br-end-pill {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.__br-start {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

.__br-start-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.__br-start-1 {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

.__br-start-2 {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

.__br-start-3 {
    border-top-left-radius: .5rem !important;
    border-bottom-left-radius: .5rem !important;
}

.__br-start-4 {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.__br-start-5 {
    border-top-left-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

.__br-start-circle {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
}

.__br-start-pill {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.__visible {
    visibility: visible !important;
}

.__invisible {
    visibility: hidden !important;
}

/*? ------ Cursor ------ */
.cursor_pointer,
.__cursor_pointer {
    cursor: pointer;
}

.__cursor {
    --cursor: auto;
    --cursor-url: ;
    cursor: var(--cursor);

    &.__crosshair {
        --cursor: crosshair;
    }

    &.__help {
        --cursor: help;
    }

    &.__move {
        --cursor: move;
    }

    &.__pointer {
        --cursor: pointer;
    }

    &.__progress {
        --cursor: progress;
    }

    &.__text {
        --cursor: text;
    }

    &.__wait {
        --cursor: wait;
    }

    &.__vertical-text {
        --cursor: vertical-text;
    }

    &.__alias {
        --cursor: alias;
    }

    &.__no-drop {
        --cursor: no-drop;
    }

    &.__grab {
        --cursor: grab;
    }

    &.__grabbing {
        --cursor: grabbing;
    }

    &.__zoom-in {
        --cursor: zoom-in;
    }

    &.__zoom-out {
        --cursor: zoom-out;
    }

    &.__not-allowed {
        --cursor: not-allowed;
    }

    &.__cell {
        --cursor: cell;
    }

    &.__copy {
        --cursor: copy;
    }

    &.__ew-resize {
        --cursor: ew-resize;
    }

    &.__ns-resize {
        --cursor: ns-resize;
    }

    &.__nwse-resize {
        --cursor: nwse-resize;
    }

    &.__nesw-resize {
        --cursor: nesw-resize;
    }

    &.__col-resize {
        --cursor: col-resize;
    }

    &.__row-resize {
        --cursor: row-resize;
    }

    &.__context-menu {
        --cursor: context-menu;
    }

    &.__none {
        --cursor: none;
    }

    &.__custom {
        --cursor: var(--cursor-url) auto;
    }
}

/*? ------  ------ */
/*?  */

/*? ------ Flexbox / row col ------ */
.__row,
.upaep__row {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 0) calc(-.5 * 1.5rem) 0 calc(-.5 * 1.5rem);

    &>* {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 calc(1.5rem * .5) 0 calc(1.5rem * .5);
        margin: 0;
    }

    &.__gap-cols {
        gap: 44px;

        &>* {
            padding: 0;
        }
    }

    &.__row-gap {
        row-gap: 1rem;

        /* &>*:nth-child(even) {
            padding: 0 0 0 2rem;
        }
        &>*:nth-child(odd) {
            padding: 0 2rem 0 0;
        } */
    }
}

.__col,
.upaep__col {
    flex: 1 0 0%;
}

.__row-cols-auto>*,
.upaep__row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
}

.__row-cols-1>*,
.upaep__row-cols-1>* {
    flex: 0 0 auto;
    width: calc(100% / 1);
}

.__row-cols-2>*,
.upaep__row-cols-2>* {
    flex: 0 0 auto;
    width: calc(100% / 2);
}

.__row-cols-3>*,
.upaep__row-cols-3>* {
    flex: 0 0 auto;
    width: calc(100% / 3);
}

.__row-cols-4>*,
.upaep__row-cols-4>* {
    flex: 0 0 auto;
    width: calc(100% / 4);
}

.__row-cols-5>*,
.upaep__row-cols-5>* {
    flex: 0 0 auto;
    width: calc(100% / 5);
}

.__row-cols-6>*,
.upaep__row-cols-6>* {
    flex: 0 0 auto;
    width: calc(100% / 6);
}

.__col-auto,
.upaep__col-auto {
    flex: 0 0 auto;
    width: auto;
}

.__col-1,
.upaep__col-1 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 1);
}

.__col-2,
.upaep__col-2 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 2);
}

.__col-3,
.upaep__col-3 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 3);
}

.__col-4,
.upaep__col-4 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 4);
}

.__col-5,
.upaep__col-5 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 5);
}

.__col-6,
.upaep__col-6 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 6);
}

.__col-7,
.upaep__col-7 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 7);
}

.__col-8,
.upaep__col-8 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 8);
}

.__col-9,
.upaep__col-9 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 9);
}

.__col-10,
.upaep__col-10 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 10);
}

.__col-11,
.upaep__col-11 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 11);
}

.__col-12,
.upaep__col-12 {
    flex: 0 0 auto;
    width: calc(100% / 12 * 12);
}

/*? ------ Animations ------ */
.upaep__animation,
.__animation {
    --animation-name: ;
    --animation-duration: 1s;
    --animation-timing-function: ;
    --animation-repeat: ;
    --animation-delay: ;
    animation: var(--animation-name) var(--animation-duration) var(--animation-timing-function) var(--animation-repeat) var(--animation-delay);

    &.__repeat-1 {
        --animation-repeat: 1;
    }

    &.__repeat-2 {
        --animation-repeat: 2;
    }

    &.__repeat-3 {
        --animation-repeat: 3;
    }

    &.__repeat-4 {
        --animation-repeat: 4;
    }

    &.__repeat-5 {
        --animation-repeat: 5;
    }

    &.__infinite {
        --animation-repeat: infinite;
    }

    &.__delay-1 {
        --animation-delay: 1s;
    }

    &.__delay-2 {
        --animation-delay: 2s;
    }

    &.__delay-3 {
        --animation-delay: 3s;
    }

    &.__delay-4 {
        --animation-delay: 4s;
    }

    &.__delay-5 {
        --animation-delay: 5s;
    }

    &.__function-linear {
        --animation-timing-function: linear;
    }

    &.__function-ease-in {
        --animation-timing-function: ease-in;
    }

    &.__function-ease-out {
        --animation-timing-function: ease-out;
    }

    &.__function-ease-in-out {
        --animation-timing-function: ease-in-out;
    }

    &.__bounce {
        --animation-name: a_bounce;
    }

    &.__flash {
        --animation-name: a_flash;
    }

    &.__pulse {
        --animation-name: a_pulse;
    }

    &.__rubberBand {
        --animation-name: a_rubberBand;
    }

    &.__shakeX {
        --animation-name: a_shakeX;
    }

    &.__shakeY {
        --animation-name: a_shakeY;
    }

    &.__headShake {
        --animation-name: a_headShake;
    }

    &.__swing {
        --animation-name: a_swing;
    }

    &.__tada {
        --animation-name: a_tada;
    }

    &.__wobble {
        --animation-name: a_wobble;
    }

    &.__jello {
        --animation-name: a_jello;
    }

    &.__heartBeat {
        --animation-name: a_heartBeat;
    }

    &.__backInDown {
        --animation-name: a_backInDown;
    }

    &.__backInLeft {
        --animation-name: a_backInLeft;
    }

    &.__backInRight {
        --animation-name: a_backInRight;
    }

    &.__backInUp {
        --animation-name: a_backInUp;
    }

    &.__backOutDown {
        --animation-name: a_backOutDown;
    }

    &.__backOutLeft {
        --animation-name: a_backOutLeft;
    }

    &.__backOutRight {
        --animation-name: a_backOutRight;
    }

    &.__backOutUp {
        --animation-name: a_backOutUp;
    }

    &.__bounceIn {
        --animation-name: a_bounceIn;
    }

    &.__bounceInDown {
        --animation-name: a_bounceInDown;
    }

    &.__bounceInLeft {
        --animation-name: a_bounceInLeft;
    }

    &.__bounceInRight {
        --animation-name: a_bounceInRight;
    }

    &.__bounceInUp {
        --animation-name: a_bounceInUp;
    }

    &.__bounceOut {
        --animation-name: a_bounceOut;
    }

    &.__bounceOutDown {
        --animation-name: a_bounceOutDown;
    }

    &.__bounceOutLeft {
        --animation-name: a_bounceOutLeft;
    }

    &.__bounceOutRight {
        --animation-name: a_bounceOutRight;
    }

    &.__bounceOutUp {
        --animation-name: a_bounceOutUp;
    }

    &.__fadeIn {
        --animation-name: a_fadeIn;
    }

    &.__fadeInDown {
        --animation-name: a_fadeInDown;
    }

    &.__fadeInDownBig {
        --animation-name: a_fadeInDownBig;
    }

    &.__fadeInLeft {
        --animation-name: a_fadeInLeft;
    }

    &.__fadeInLeftBig {
        --animation-name: a_fadeInLeftBig;
    }

    &.__fadeInRight {
        --animation-name: a_fadeInRight;
    }

    &.__fadeInRightBig {
        --animation-name: a_fadeInRightBig;
    }

    &.__fadeInUp {
        --animation-name: a_fadeInUp;
    }

    &.__fadeInUpBig {
        --animation-name: a_fadeInUpBig;
    }

    &.__fadeInTopLeft {
        --animation-name: a_fadeInTopLeft;
    }

    &.__fadeInTopRight {
        --animation-name: a_fadeInTopRight;
    }

    &.__fadeInBottomLeft {
        --animation-name: a_fadeInBottomLeft;
    }

    &.__fadeInBottomRight {
        --animation-name: a_fadeInBottomRight;
    }

    &.__fadeOut {
        --animation-name: a_fadeOut;
    }

    &.__fadeOutDown {
        --animation-name: a_fadeOutDown;
    }

    &.__fadeOutDownBig {
        --animation-name: a_fadeOutDownBig;
    }

    &.__fadeOutLeft {
        --animation-name: a_fadeOutLeft;
    }

    &.__fadeOutLeftBig {
        --animation-name: a_fadeOutLeftBig;
    }

    &.__fadeOutRight {
        --animation-name: a_fadeOutRight;
    }

    &.__fadeOutRightBig {
        --animation-name: a_fadeOutRightBig;
    }

    &.__fadeOutUp {
        --animation-name: a_fadeOutUp;
    }

    &.__fadeOutUpBig {
        --animation-name: a_fadeOutUpBig;
    }

    &.__fadeOutTopLeft {
        --animation-name: a_fadeOutTopLeft;
    }

    &.__fadeOutTopRight {
        --animation-name: a_fadeOutTopRight;
    }

    &.__fadeOutBottomRight {
        --animation-name: a_fadeOutBottomRight;
    }

    &.__fadeOutBottomLeft {
        --animation-name: a_fadeOutBottomLeft;
    }

    &.__flip {
        --animation-name: a_flip;
    }

    &.__flipInX {
        --animation-name: a_flipInX;
    }

    &.__flipInY {
        --animation-name: a_flipInY;
    }

    &.__flipOutX {
        --animation-name: a_flipOutX;
    }

    &.__flipOutY {
        --animation-name: a_flipOutY;
    }

    &.__lightSpeedInRight {
        --animation-name: a_lightSpeedInRight;
    }

    &.__lightSpeedInLeft {
        --animation-name: a_lightSpeedInLeft;
    }

    &.__lightSpeedOutRight {
        --animation-name: a_lightSpeedOutRight;
    }

    &.__lightSpeedOutLeft {
        --animation-name: a_lightSpeedOutLeft;
    }

    &.__rotateIn {
        --animation-name: a_rotateIn;
    }

    &.__rotateInDownLeft {
        --animation-name: a_rotateInDownLeft;
    }

    &.__rotateInDownRight {
        --animation-name: a_rotateInDownRight;
    }

    &.__rotateInUpLeft {
        --animation-name: a_rotateInUpLeft;
    }

    &.__rotateInUpRight {
        --animation-name: a_rotateInUpRight;
    }

    &.__rotateOut {
        --animation-name: a_rotateOut;
    }

    &.__rotateOutDownLeft {
        --animation-name: a_rotateOutDownLeft;
    }

    &.__rotateOutDownRight {
        --animation-name: a_rotateOutDownRight;
    }

    &.__rotateOutUpLeft {
        --animation-name: a_rotateOutUpLeft;
    }

    &.__rotateOutUpRight {
        --animation-name: a_rotateOutUpRight;
    }

    &.__hinge {
        --animation-name: a_hinge;
    }

    &.__jackInTheBox {
        --animation-name: a_jackInTheBox;
    }

    &.__rollIn {
        --animation-name: a_rollIn;
    }

    &.__rollOut {
        --animation-name: a_rollOut;
    }

    &.__zoomIn {
        --animation-name: a_zoomIn;
    }

    &.__zoomInDown {
        --animation-name: a_zoomInDown;
    }

    &.__zoomInLeft {
        --animation-name: a_zoomInLeft;
    }

    &.__zoomInRight {
        --animation-name: a_zoomInRight;
    }

    &.__zoomInUp {
        --animation-name: a_zoomInUp;
    }

    &.__zoomOut {
        --animation-name: a_zoomOut;
    }

    &.__zoomOutDown {
        --animation-name: a_zoomOutDown;
    }

    &.__zoomOutLeft {
        --animation-name: a_zoomOutLeft;
    }

    &.__zoomOutRight {
        --animation-name: a_zoomOutRight;
    }

    &.__zoomOutUp {
        --animation-name: a_zoomOutUp;
    }

    &.__slideInDown {
        --animation-name: a_slideInDown;
    }

    &.__slideInLeft {
        --animation-name: a_slideInLeft;
    }

    &.__slideInRight {
        --animation-name: a_slideInRight;
    }

    &.__slideInUp {
        --animation-name: a_slideInUp;
    }

    &.__slideOutDown {
        --animation-name: a_slideOutDown;
    }

    &.__slideOutLeft {
        --animation-name: a_slideOutLeft;
    }

    &.__slideOutRight {
        --animation-name: a_slideOutRight;
    }

    &.__slideOutUp {
        --animation-name: a_slideOutUp;
    }
}

.__pulsing {
    --pulsing-zindex: 1;

    &:not(:hover) {
        overflow: visible;
        position: relative;
        transition: background .3s;

        &::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: inherit;
            border-radius: inherit;
            transition: opacity .3s, transform .3s;
            animation: a_pulsebg 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
            z-index: var(--pulsing-zindex);
        }
    }
}

@keyframes a_pulsebg {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0;
        transform: scale(1.5)
    }

    100% {
        opacity: 0;
        transform: scale(1.5)
    }
}

@keyframes a_bounce {

    from,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes a_flash {

    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes a_pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes a_shakeY {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes a_headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

@keyframes a_swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes a_tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_wobble {
    from {
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_jello {

    from,
    11.1%,
    to {
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes a_heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes a_backInDown {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInLeft {
    0% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInRight {
    0% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backInUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes a_backOutDown {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateY(700px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutRight {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_backOutUp {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-700px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes a_bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes a_bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInLeft {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1);
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }

    75% {
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }

    90% {
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }

    75% {
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_bounceOut {
    20% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes a_bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0) scaleY(0.985);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0) scaleY(3);
    }
}

@keyframes a_bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) scaleX(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0) scaleX(2);
    }
}

@keyframes a_bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0) scaleX(2);
    }
}

@keyframes a_bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(0.985);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0) scaleY(3);
    }
}

@keyframes a_fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes a_fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInTopRight {
    from {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes a_fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes a_fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes a_fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes a_fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes a_fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes a_fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes a_fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes a_fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes a_fadeOutTopLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }
}

@keyframes a_fadeOutTopRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, -100%, 0);
    }
}

@keyframes a_fadeOutBottomRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }
}

@keyframes a_fadeOutBottomLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0);
    }
}

@keyframes a_flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@keyframes a_flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes a_flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes a_flipOutX {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes a_flipOutY {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes a_lightSpeedInRight {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_lightSpeedInLeft {
    from {
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_lightSpeedOutRight {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes a_lightSpeedOutLeft {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
}

@keyframes a_rotateIn {
    from {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInDownLeft {
    from {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInDownRight {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInUpLeft {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateInUpRight {
    from {
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes a_rotateOut {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutDownLeft {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutDownRight {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutUpLeft {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes a_rotateOutUpRight {
    from {
        opacity: 1;
    }

    to {
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes a_hinge {
    0% {
        animation-timing-function: ease-in-out;
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        animation-timing-function: ease-in-out;
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes a_jackInTheBox {
    from {
        opacity: 0;
        transform: scale(0.1) rotate(30deg);
        transform-origin: center bottom;
    }

    50% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes a_rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes a_zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes a_zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes a_zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(0.1) translate3d(-2000px, 0, 0);
    }
}

@keyframes a_zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(0.1) translate3d(2000px, 0, 0);
    }
}

@keyframes a_zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes a_slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes a_slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes a_slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes a_slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes a_slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

/*? ------ Media Querys ------ */

/* max-width 1920px | --upaep-size-xxl */
@media(width <=1920px) {}

/* max-width 1450px | --upaep-size-xl */
@media(width <=1450px) {
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 1150px;
    }

    .upaep__footer_telefono {
        --upaep-footer-telefono-width: 85%;
    }

    .upaep__content-botones-menu,
    .upaep__menu-bar,
    .upaep__menu-bar.__horizontal {
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
    }

    .upaep__contacta-info {
        --upaep-contacta-info-item-margin: 1rem 0;
    }

    .upaep__contacto {
        height: 130vh;
        --upaep-contacto-content-height: 100%;

        .formContacto {

            & .ratio {
                height: 100vh;
            }
        }
    }

    .upaep__tab.__trinity {
        --upaep-tab-tabscontent-padding: 0;
    }

}

/* max-width 1024px | --upaep-size-lg */
@media(width <=1024px) {}

/* max-width 924px | --upaep-size-md */
@media(width <=924px) {
    .upaep__block-example {
        flex-direction: column;
    }

    h1,
    .upaep__h1 {
        --h-fz: var(--upaep-fz30);
    }

    h2,
    .upaep__h2 {
        --h-fz: var(--upaep-fz28);
    }

    h3,
    .upaep__h3 {
        --h-fz: var(--upaep-fz20);
    }

    h4,
    .upaep__h4 {
        --h-fz: var(--upaep-fz18);
    }

    .upaep__title {
        --upaep-title-fz: var(--upaep-fz30);
    }

    .upaep__subtitle {
        --upaep-subtitle-fz: var(--upaep-fz16);
    }

    .upaep__subtitle-2 {
        --upaep-subtitle-fz: var(--upaep-fz14);
    }

    .upaep__text {
        --upaep-text-fz: var(--upaep-fz16);
    }

    .upaep__subtext {
        --upaep-subtext-fz: var(--upaep-fz14);
    }

    .upaep__caption {
        --upaep-caption-fz: var(--upaep-fz12);
    }

    .upaep__overline {
        --upaep-overline-fz: var(--upaep-fz10);
    }

    .upaep__header-logo,
    .upaep__header__logo {
        --upaep-header-logo-margin: 0 18px;
        --upaep-header-logo-padding: 10px 0;
    }

    .upaep__header-center,
    .upaep__header__center {
        right: 20px;
        top: 70px;
    }

    .upaep__header-right,
    .upaep__header__right {
        --upaep-header-right-width: 122px;
    }

    .upaep__header-menu span,
    .upaep__header__menu span {
        --upaep-header-menu-margin: 0 0 0 0.7rem;
    }

    .upaep__header-down,
    .upaep__header__down {
        --upaep-header-down-padding: 10px 0px;
    }

    .upaep__button-language,
    .upaep__button__language {
        background: var(--upaep-header-language-bg);
        border-radius: var(--upaep-header-language-border-radius);
        padding: var(--upaep-header-language-padding);
    }

    .upaep__button-language img,
    .upaep__button__language img {
        --upaep-header-language-width: 22px;
    }

    .upaep__button-language img.escritorio,
    .upaep__button__language img.escritorio {
        display: none;
    }

    .upaep__header-titulo_m,
    .upaep__header__titulo_m {
        text-transform: uppercase;
        --upaep-header-titutlom-margin: 0 20px;
    }

    .upaep__footer .upaep__footer-simple img {
        --upaep-footer-simple-img-width: 80%;
    }

    .upaep__footer-up,
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 720px;
    }

    /*? utilitie */
    .__d-desktop,
    .d-desktop {
        display: none !important;
    }

    .upaep__menu__desktop,
    .upaep__menu-desktop {
        display: none;
    }

    .upaep__dashboard {

        --upaep-dashboard-sidebar-width: 100vw;

        & .upaep__dashboard-sidebar {
            position: fixed;
            transition: all .5s;
            z-index: 10;

            &:not(.is-show) {
                translate: -100%;
            }
        }

        & .upaep__dashboard-action-menu {
            .upaep__dashboard-action-menu-desktop {
                display: none;
            }
        }
    }

    .upaep__sidebar {
        --upaep-sidebar-width: 100vw;
        --upaep-sidebar-height: auto;
        --upaep-sidebar-position: fixed;
        --upaep-sidebar-inset: 0 auto auto 0;
        z-index: var(--upaep-zindex-sidebar);

        &:not(.is-show) {
            & .upaep__sidebar-content {
                translate: -100%;
                transition: all .5s;
            }
        }

        & .upaep__sidebar-content {
            transition: all .5s;
        }

        &:is(.is-show) {
            .upaep__sidebar-nav {
                display: none;
            }
        }

        &:not(.is-show) {
            --upaep-sidebar-height: 3rem;
        }
    }

    .upaep__card.__slice .upaep__card-slice-content {
        border-radius: 50px;
    }

    .upaep__card.__slice {
        --upaep-card-height: 40px;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-height: 0;
        --upaep-card-text-height: 0;
    }

    .upaep__card.__sliced .upaep__card-content {
        border-radius: 50px;
    }

    .upaep__card.__sliced {
        --upaep-card-height: 40px;
        --upaep-card-img-content-height: 0;
        --upaep-card-title-height: 40px;
        --upaep-card-text-height: 0;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-border-radius: 50px;

        &:hover .upaep__card-text {
            --upaep-card-text-padding: 0;
        }
    }

    .upaep__content-botones-menu,
    .upaep__menu-bar {
        --upaep-menubar-scale: .9;
        --upaep-menubar-content-padding: 0;
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
        --upaep-menubar-content-item: .5rem 0;
        --upaep-menubar-content-item-scale: .9;
    }

    .upaep__contacta-info {
        --upaep-contacta-info-width: 100%;
        --upaep-contacta-info-height: auto;
        --upaep-contacta-info-item-padding: 1rem;
        order: 1;
    }

    .upaep__card.__contacta .upaep__card-content {
        flex-direction: column;
    }

    .formContacto {
        width: 100%;
    }

    .upaep__contacta-info-top {
        padding: 1.5rem 0 0;
    }

    .upaep__contacta-info-item {
        --upaep-contacta-info-item-padding: 0;
        --upaep-contacta-info-item-margin: .5rem 0;
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__whats {
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz22);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__saludo {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__encargado {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__asesor .upaep__contacta-info-text p.__text {
        font-size: var(--upaep-fz18);
    }

    .upaep__contacta-info-item.__tel {
        --upaep-contacta-info-itemtext-text-fz: var(--upaep-fz20);
    }

    .upaep__contacta-horario {
        width: 100%;

        & .__text {
            font-size: var(--upaep-fz20);
        }

        & .__horario {
            font-size: var(--upaep-fz20);
        }
    }

    .upaep__banner {
        --upaep-banner-form-width: 100%;
        --upaep-banner-inner-width: 100%;
        --upaep-banner-form-content-bg: none;

        &:has(.upaep__banner-card-form) {
            .upaep__banner-card-texts {
                flex-direction: column-reverse;
                justify-content: start;
                align-items: start;
                background: rgba(0, 0, 0, 0.6);
            }

            .upaep__banner-card-titles {
                padding: 0 !important;
                background: linear-gradient(180deg, #000000, #000000CF, #00000091, #00000000);
                width: 100%;
            }

            .upaep__banner-card-texts .upaep__banner-card-title>* {
                line-height: 60px;
            }
        }
    }


    .upaep__btn.__menu {
        --upaep-btn-width: 55px;
        --upaep-btn-height: 55px;

        a {
            justify-content: center;
        }

        span {
            display: none;
        }
    }

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

        .upaep__navbar-toggle {
            display: flex;
            justify-content: end;
            align-items: center;
        }

        &:not(.__offcanvas) {
            .upaep__navbar-collapse {
                overflow: hidden;
                transition: max-height 0.5s ease-out;
                max-height: 0;

                &.is-show {
                    padding: .5rem 0;
                    height: auto;
                    max-height: 50vh;
                    overflow-y: auto;
                    filter: var(--upaep-drop-shadow);
                }
            }
        }

        &.__offcanvas {
            .upaep__navbar-collapse {
                overflow: hidden;
                position: fixed;
                inset: 0;
                transform: translate(200%, 0);
                transition: transform .8s ease;
                height: 100vh;
                padding: .5rem 0;
                z-index: var(--upaep-zindex-navbar);

                &.is-show {
                    transform: translate(0, 0);
                    transition: transform .8s ease;

                    .upaep__navbar-items {
                        overflow-y: auto;
                    }
                }
            }
        }

        @keyframes fadeTransform {}


    }

    .upaep__cards.__chess {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .upaep__card.__chess {
        --upaep-card-content-width: 100%;
        --upaep-card-img-content-width: 100%;

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

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

    .upaep__card.__payment {
        --upaep-card-width: 100%;

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

    }

    .upaep__payment {
        .upaep__payment-body {
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .upaep__payment-info {

            .upaep__payment-info-title {
                font-size: var(--upaep-fz22);
            }

            .upaep__payment-info-content {
                padding: 0 1rem;
            }
        }

        .upaep__balances-item {
            --upaep-label-padding: .5rem;
        }

        .upaep__methods-item {
            --upaep-label-padding: 1rem;

            .upaep__methods-text {

                p {

                    &.__title {
                        font-size: var(--upaep-fz18);
                        font-weight: var(--upaep-fw-bold);
                    }
                }
            }

            .upaep__methods-img {
                width: 25px;
                height: 25px;
            }
        }

        .upaep__options-item {
            --upaep-label-padding: 1rem .5rem;

            .upaep__options-text {
                p {
                    &.__title {
                        font-size: var(--upaep-fz18);
                    }
                }
            }

            .upaep__options-imgs {
                img {
                    height: 35px;

                    &.__visa {
                        width: 60px;
                    }

                    &._mastercard {
                        width: 60px;
                    }

                    &.__bbva {
                        width: 100px;
                    }

                    &.__santander {
                        width: 100px;
                    }
                }
            }
        }
    }

    .upaep__dropzone {
        .upaep__dragdrop {
            display: none;
        }
    }

    .upaep__steps {
        &.__hide-mobile {
            overflow: hidden;

            .upaep__steps-items {

                .upaep__steps-item {

                    &:not(.is-active) {
                        display: none;
                    }
                }
            }
        }

    }

    .upaep__navbar {

        .upaep__navbar-items {

            .upaep__navbar-item.upaep__dropdown {
                .upaep__dropdown-menu {
                    position: relative;
                    transform: translate(0, 0) !important;
                }
            }
        }
    }
}

/* max-width 480px | --upaep-size-sm */
@media(width <=480px) {

    .upaep__block {
        .upaep__block-example {
            flex-direction: column;

            .upaep__block-dom {
                width: 100%;
            }

            .upaep__block-actions {
                width: 100%;
            }
        }
    }

    .upaep__fullscreen,
    .__fullscreen,
    .fullscreen {
        object-fit: cover;
    }

    .upaep__footer-up,
    .upaep__footer__up {
        --upaep-footer-up-maxwidth: 540px;
    }

    .upaep__footer-up_content,
    .upaep__footer__up_content {
        flex-direction: column;
        --upaep-footer-up_content-padding: 0;
        --upaep-footer-up_content-margin: 0;
    }

    .upaep__footer-left,
    .upaep__footer-center,
    .upaep__footer-right,
    .upaep__footer__left,
    .upaep__footer__center,
    .upaep__footer__right {
        --upaep-footer-content-padding: 0;
        --upaep-footer-content-margin: .5rem 0;
    }

    .upaep__menu-bar.__horizontal {
        --upaep-menubar-scale: .9;
        --upaep-menubar-content-width: 100%;
        --upaep-menubar-content-padding: 0;
        --upaep-menubar-content-text-fz: var(--upaep-fz14);
        --upaep-menubar-content-item-scale: .8;
        --upaep-menubar-content-item-direction: column;
        --upaep-menubar-content-padding: 0 1rem;
        --upaep-menubar-content-item-scale: .8;

        .upaep__menu-bar-item {
            flex-direction: column-reverse;
            flex: 1 1 0;
        }
    }

    .table_config_container .table_search,
    .upaep__customtable .upaep__customtable-search {
        flex-direction: column;

        &>div {
            &:has(.search_value) {
                justify-content: center;
            }
        }
    }

    .table_config_container .table_footer_container,
    .upaep__customtable .table_footer_container {
        flex-direction: column;
    }

    .table_config_container .table_pagination {
        flex-wrap: wrap;
        padding: 0;

        &:has(.upaep__pagination) {
            justify-content: center;

            .upaep__pagination {
                --upaep-pagination-width: auto;
            }
        }
    }

    .upaep__customtable .upaep__customtable-pagination {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .upaep__pagination {
        --upaep-pagination-width: 100%;
        --upaep-pagination-height: auto;
        --upaep-pagination-justify: center;
    }

    .upaep__progresstracker-wrapper {
        margin: 1rem 0;
        padding: 1rem;
        min-height: 150px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .upaep__progresstracker-wrapper .upaep__progresstracker {
        --upaep-progresstracker-margin: 0;
        --upaep-progresstracker-padding: 0;
        --upaep-progresstracker-height: 100%;
    }

    .upaep__progresstracker-wrapper .upaep__progresstracker-step {
        min-width: 50%;
        scroll-snap-align: start;
    }

    .upaep__btn.__menu span {
        display: none;
    }

    .upaep__card.__plan-estudios {
        --upaep-card-width: 100%;
        --upaep-card-content-padding: 1rem;
        --upaep-card-title-fz: var(--upaep-fz16);
    }
}

/* max-width 375px | --upaep-size-xs */
@media(width <=375px) {}

/* max-width 360px | --upaep-size-xxs */
@media(width <=360px) {
    .upaep__card.__plan-estudios {
        --upaep-card-title-fz: var(--upaep-fz14);
    }
}


/* rango 1450px - 1920px | --upaep-size-xl */
@media (1450px <=width <=1920px) {}

/* rango 1024px - 1450px | --upaep-size-lg */
@media (1024px <=width <=1450px) {}

/* rango 924px - 1024px | --upaep-size-md */
@media (924px <=width <=1024px) {}

/* rango 480px - 924px | --upaep-size-sm */
@media (480px <=width <=924px) {}

/* rango 375px - 480px | --upaep-size-xs */
@media (375px <=width <=480px) {}

/* rango 360px - 375px | --upaep-size-xxs */
@media (360px <=width <=375px) {}

/* min-width 360px | --upaep-size-xxs */
@media(360px <=width) {}

/* min-width 375px | --upaep-size-xs */
@media(375px <=width) {}

/* min-width 480px | --upaep-size-sm */
@media(480px <=width) {

    .__float-sm-start {
        float: left !important;
    }

    .__float-sm-end {
        float: right !important;
    }

    .__float-sm-none {
        float: none !important;
    }

    .__objectfit-sm-contain {
        object-fit: contain !important;
    }

    .__objectfit-sm-cover {
        object-fit: cover !important;
    }

    .__objectfit-sm-fill {
        object-fit: fill !important;
    }

    .__objectfit-sm-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-sm-inline {
        display: inline !important;
    }

    .__d-sm-inline-block {
        display: inline-block !important;
    }

    .__d-sm-block {
        display: block !important;
    }

    .__d-sm-grid {
        display: grid !important;
    }

    .__d-sm-inline-grid {
        display: inline-grid !important;
    }

    .__d-sm-table {
        display: table !important;
    }

    .__d-sm-table-row {
        display: table-row !important;
    }

    .__d-sm-table-cell {
        display: table-cell !important;
    }

    .__d-sm-flex {
        display: flex !important;
    }

    .__d-sm-inline-flex {
        display: inline-flex !important;
    }

    .__d-sm-none {
        display: none !important;
    }

    .__flex-sm-fill {
        flex: 1 1 auto !important;
    }

    .__flex-sm-row {
        flex-direction: row !important;
    }

    .__flex-sm-column {
        flex-direction: column !important;
    }

    .__flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-sm-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-sm-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-sm-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-sm-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-sm-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .__justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .__justify-content-sm-center {
        justify-content: center !important;
    }

    .__justify-content-sm-between {
        justify-content: space-between !important;
    }

    .__justify-content-sm-around {
        justify-content: space-around !important;
    }

    .__justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-sm-start {
        align-items: flex-start !important;
    }

    .__align-items-sm-end {
        align-items: flex-end !important;
    }

    .__align-items-sm-center {
        align-items: center !important;
    }

    .__align-items-sm-baseline {
        align-items: baseline !important;
    }

    .__align-items-sm-stretch {
        align-items: stretch !important;
    }

    .__align-content-sm-start {
        align-content: flex-start !important;
    }

    .__align-content-sm-end {
        align-content: flex-end !important;
    }

    .__align-content-sm-center {
        align-content: center !important;
    }

    .__align-content-sm-between {
        align-content: space-between !important;
    }

    .__align-content-sm-around {
        align-content: space-around !important;
    }

    .__align-content-sm-stretch {
        align-content: stretch !important;
    }

    .__align-self-sm-auto {
        align-self: auto !important;
    }

    .__align-self-sm-start {
        align-self: flex-start !important;
    }

    .__align-self-sm-end {
        align-self: flex-end !important;
    }

    .__align-self-sm-center {
        align-self: center !important;
    }

    .__align-self-sm-baseline {
        align-self: baseline !important;
    }

    .__align-self-sm-stretch {
        align-self: stretch !important;
    }

    .__order-sm-first {
        order: -1 !important;
    }

    .__order-sm-0 {
        order: 0 !important;
    }

    .__order-sm-1 {
        order: 1 !important;
    }

    .__order-sm-2 {
        order: 2 !important;
    }

    .__order-sm-3 {
        order: 3 !important;
    }

    .__order-sm-4 {
        order: 4 !important;
    }

    .__order-sm-5 {
        order: 5 !important;
    }

    .__order-sm-last {
        order: 6 !important;
    }

    .__m-sm-0 {
        margin: 0 !important;
    }

    .__m-sm-1 {
        margin: 0.25rem !important;
    }

    .__m-sm-2 {
        margin: 0.5rem !important;
    }

    .__m-sm-3 {
        margin: 1rem !important;
    }

    .__m-sm-4 {
        margin: 1.5rem !important;
    }

    .__m-sm-5 {
        margin: 3rem !important;
    }

    .__m-sm-auto {
        margin: auto !important;
    }

    .__mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-sm-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-sm-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-sm-0 {
        margin-top: 0 !important;
    }

    .__mt-sm-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-sm-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-sm-3 {
        margin-top: 1rem !important;
    }

    .__mt-sm-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-sm-5 {
        margin-top: 3rem !important;
    }

    .__mt-sm-auto {
        margin-top: auto !important;
    }

    .__me-sm-0 {
        margin-right: 0 !important;
    }

    .__me-sm-1 {
        margin-right: 0.25rem !important;
    }

    .__me-sm-2 {
        margin-right: 0.5rem !important;
    }

    .__me-sm-3 {
        margin-right: 1rem !important;
    }

    .__me-sm-4 {
        margin-right: 1.5rem !important;
    }

    .__me-sm-5 {
        margin-right: 3rem !important;
    }

    .__me-sm-auto {
        margin-right: auto !important;
    }

    .__mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .__mb-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-sm-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-sm-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-sm-auto {
        margin-bottom: auto !important;
    }

    .__ms-sm-0 {
        margin-left: 0 !important;
    }

    .__ms-sm-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-sm-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-sm-3 {
        margin-left: 1rem !important;
    }

    .__ms-sm-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-sm-5 {
        margin-left: 3rem !important;
    }

    .__ms-sm-auto {
        margin-left: auto !important;
    }

    .__p-sm-0 {
        padding: 0 !important;
    }

    .__p-sm-1 {
        padding: 0.25rem !important;
    }

    .__p-sm-2 {
        padding: 0.5rem !important;
    }

    .__p-sm-3 {
        padding: 1rem !important;
    }

    .__p-sm-4 {
        padding: 1.5rem !important;
    }

    .__p-sm-5 {
        padding: 3rem !important;
    }

    .__px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-sm-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-sm-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-sm-0 {
        padding-top: 0 !important;
    }

    .__pt-sm-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-sm-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-sm-3 {
        padding-top: 1rem !important;
    }

    .__pt-sm-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-sm-5 {
        padding-top: 3rem !important;
    }

    .__pe-sm-0 {
        padding-right: 0 !important;
    }

    .__pe-sm-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-sm-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-sm-3 {
        padding-right: 1rem !important;
    }

    .__pe-sm-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-sm-5 {
        padding-right: 3rem !important;
    }

    .__pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .__pb-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-sm-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-sm-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-sm-0 {
        padding-left: 0 !important;
    }

    .__ps-sm-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-sm-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-sm-3 {
        padding-left: 1rem !important;
    }

    .__ps-sm-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-sm-5 {
        padding-left: 3rem !important;
    }

    .__gap-sm-0 {
        gap: 0 !important;
    }

    .__gap-sm-1 {
        gap: 0.25rem !important;
    }

    .__gap-sm-2 {
        gap: 0.5rem !important;
    }

    .__gap-sm-3 {
        gap: 1rem !important;
    }

    .__gap-sm-4 {
        gap: 1.5rem !important;
    }

    .__gap-sm-5 {
        gap: 3rem !important;
    }

    .__text-sm-start {
        text-align: left !important;
    }

    .__text-sm-end {
        text-align: right !important;
    }

    .__text-sm-center {
        text-align: center !important;
    }

    .upaep__container-sm,
    .upaep__container {
        max-width: 450px;
    }


    .__row-cols-sm-auto>*,
    .upaep__row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-sm-1>*,
    .upaep__row-cols-sm-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-sm-2>*,
    .upaep__row-cols-sm-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-sm-3>*,
    .upaep__row-cols-sm-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-sm-4>*,
    .upaep__row-cols-sm-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-sm-5>*,
    .upaep__row-cols-sm-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-sm-6>*,
    .upaep__row-cols-sm-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-sm-auto,
    .upaep__col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-sm-1,
    .upaep__col-sm-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-sm-2,
    .upaep__col-sm-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-sm-3,
    .upaep__col-sm-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-sm-4,
    .upaep__col-sm-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-sm-5,
    .upaep__col-sm-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-sm-6,
    .upaep__col-sm-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-sm-7,
    .upaep__col-sm-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-sm-8,
    .upaep__col-sm-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-sm-9,
    .upaep__col-sm-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-sm-10,
    .upaep__col-sm-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-sm-11,
    .upaep__col-sm-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-sm-12,
    .upaep__col-sm-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 768px | --upaep-size-md  */
@media(768px <=width) {

    .__float-md-start {
        float: left !important;
    }

    .__float-md-end {
        float: right !important;
    }

    .__float-md-none {
        float: none !important;
    }

    .__objectfit-md-contain {
        object-fit: contain !important;
    }

    .__objectfit-md-cover {
        object-fit: cover !important;
    }

    .__objectfit-md-fill {
        object-fit: fill !important;
    }

    .__objectfit-md-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-md-inline {
        display: inline !important;
    }

    .__d-md-inline-block {
        display: inline-block !important;
    }

    .__d-md-block {
        display: block !important;
    }

    .__d-md-grid {
        display: grid !important;
    }

    .__d-md-inline-grid {
        display: inline-grid !important;
    }

    .__d-md-table {
        display: table !important;
    }

    .__d-md-table-row {
        display: table-row !important;
    }

    .__d-md-table-cell {
        display: table-cell !important;
    }

    .__d-md-flex {
        display: flex !important;
    }

    .__d-md-inline-flex {
        display: inline-flex !important;
    }

    .__d-md-none {
        display: none !important;
    }

    .__flex-md-fill {
        flex: 1 1 auto !important;
    }

    .__flex-md-row {
        flex-direction: row !important;
    }

    .__flex-md-column {
        flex-direction: column !important;
    }

    .__flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-md-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-md-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-md-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-md-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-md-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-md-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-md-start {
        justify-content: flex-start !important;
    }

    .__justify-content-md-end {
        justify-content: flex-end !important;
    }

    .__justify-content-md-center {
        justify-content: center !important;
    }

    .__justify-content-md-between {
        justify-content: space-between !important;
    }

    .__justify-content-md-around {
        justify-content: space-around !important;
    }

    .__justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-md-start {
        align-items: flex-start !important;
    }

    .__align-items-md-end {
        align-items: flex-end !important;
    }

    .__align-items-md-center {
        align-items: center !important;
    }

    .__align-items-md-baseline {
        align-items: baseline !important;
    }

    .__align-items-md-stretch {
        align-items: stretch !important;
    }

    .__align-content-md-start {
        align-content: flex-start !important;
    }

    .__align-content-md-end {
        align-content: flex-end !important;
    }

    .__align-content-md-center {
        align-content: center !important;
    }

    .__align-content-md-between {
        align-content: space-between !important;
    }

    .__align-content-md-around {
        align-content: space-around !important;
    }

    .__align-content-md-stretch {
        align-content: stretch !important;
    }

    .__align-self-md-auto {
        align-self: auto !important;
    }

    .__align-self-md-start {
        align-self: flex-start !important;
    }

    .__align-self-md-end {
        align-self: flex-end !important;
    }

    .__align-self-md-center {
        align-self: center !important;
    }

    .__align-self-md-baseline {
        align-self: baseline !important;
    }

    .__align-self-md-stretch {
        align-self: stretch !important;
    }

    .__order-md-first {
        order: -1 !important;
    }

    .__order-md-0 {
        order: 0 !important;
    }

    .__order-md-1 {
        order: 1 !important;
    }

    .__order-md-2 {
        order: 2 !important;
    }

    .__order-md-3 {
        order: 3 !important;
    }

    .__order-md-4 {
        order: 4 !important;
    }

    .__order-md-5 {
        order: 5 !important;
    }

    .__order-md-last {
        order: 6 !important;
    }

    .__m-md-0 {
        margin: 0 !important;
    }

    .__m-md-1 {
        margin: 0.25rem !important;
    }

    .__m-md-2 {
        margin: 0.5rem !important;
    }

    .__m-md-3 {
        margin: 1rem !important;
    }

    .__m-md-4 {
        margin: 1.5rem !important;
    }

    .__m-md-5 {
        margin: 3rem !important;
    }

    .__m-md-auto {
        margin: auto !important;
    }

    .__mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-md-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-md-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-md-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-md-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-md-0 {
        margin-top: 0 !important;
    }

    .__mt-md-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-md-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-md-3 {
        margin-top: 1rem !important;
    }

    .__mt-md-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-md-5 {
        margin-top: 3rem !important;
    }

    .__mt-md-auto {
        margin-top: auto !important;
    }

    .__me-md-0 {
        margin-right: 0 !important;
    }

    .__me-md-1 {
        margin-right: 0.25rem !important;
    }

    .__me-md-2 {
        margin-right: 0.5rem !important;
    }

    .__me-md-3 {
        margin-right: 1rem !important;
    }

    .me-md-4 {
        margin-right: 1.5rem !important;
    }

    .__me-md-5 {
        margin-right: 3rem !important;
    }

    .__me-md-auto {
        margin-right: auto !important;
    }

    .__mb-md-0 {
        margin-bottom: 0 !important;
    }

    .__mb-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-md-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-md-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-md-auto {
        margin-bottom: auto !important;
    }

    .__ms-md-0 {
        margin-left: 0 !important;
    }

    .__ms-md-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-md-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-md-3 {
        margin-left: 1rem !important;
    }

    .__ms-md-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-md-5 {
        margin-left: 3rem !important;
    }

    .__ms-md-auto {
        margin-left: auto !important;
    }

    .__p-md-0 {
        padding: 0 !important;
    }

    .__p-md-1 {
        padding: 0.25rem !important;
    }

    .__p-md-2 {
        padding: 0.5rem !important;
    }

    .__p-md-3 {
        padding: 1rem !important;
    }

    .__p-md-4 {
        padding: 1.5rem !important;
    }

    .__p-md-5 {
        padding: 3rem !important;
    }

    .__px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-md-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-md-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-md-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-md-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-md-0 {
        padding-top: 0 !important;
    }

    .__pt-md-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-md-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-md-3 {
        padding-top: 1rem !important;
    }

    .__pt-md-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-md-5 {
        padding-top: 3rem !important;
    }

    .__pe-md-0 {
        padding-right: 0 !important;
    }

    .__pe-md-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-md-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-md-3 {
        padding-right: 1rem !important;
    }

    .__pe-md-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-md-5 {
        padding-right: 3rem !important;
    }

    .__pb-md-0 {
        padding-bottom: 0 !important;
    }

    .__pb-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-md-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-md-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-md-0 {
        padding-left: 0 !important;
    }

    .__ps-md-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-md-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-md-3 {
        padding-left: 1rem !important;
    }

    .__ps-md-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-md-5 {
        padding-left: 3rem !important;
    }

    .__gap-md-0 {
        gap: 0 !important;
    }

    .__gap-md-1 {
        gap: 0.25rem !important;
    }

    .__gap-md-2 {
        gap: 0.5rem !important;
    }

    .__gap-md-3 {
        gap: 1rem !important;
    }

    .__gap-md-4 {
        gap: 1.5rem !important;
    }

    .__gap-md-5 {
        gap: 3rem !important;
    }

    .__text-md-start {
        text-align: left !important;
    }

    .__text-md-end {
        text-align: right !important;
    }

    .__text-md-center {
        text-align: center !important;
    }

    .__row-cols-md-auto>*,
    .upaep__row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-md-1>*,
    .upaep__row-cols-md-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-md-2>*,
    .upaep__row-cols-md-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-md-3>*,
    .upaep__row-cols-md-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-md-4>*,
    .upaep__row-cols-md-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-md-5>*,
    .upaep__row-cols-md-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-md-6>*,
    .upaep__row-cols-md-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-md-auto,
    .upaep__col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-md-1,
    .upaep__col-md-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-md-2,
    .upaep__col-md-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-md-3,
    .upaep__col-md-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-md-4,
    .upaep__col-md-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-md-5,
    .upaep__col-md-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-md-6,
    .upaep__col-md-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-md-7,
    .upaep__col-md-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-md-8,
    .upaep__col-md-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-md-9,
    .upaep__col-md-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-md-10,
    .upaep__col-md-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-md-11,
    .upaep__col-md-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-md-12,
    .upaep__col-md-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 924px | --upaep-size-md  */
@media(924px <=width) {

    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 720px;
    }

    /*? utilitie */
    .__d-mobile,
    .d-mobile {
        display: none !important;
    }

    .upaep__menu__mobile,
    .upaep__menu-mobile {
        display: none;
    }


    & .upaep__dashboard-action-menu {
        .upaep__dashboard-action-menu-mobile {
            display: none;
        }

        &:has(.upaep__dashboard-action-menu-close) {
            display: none;
        }

        .upaep__dashboard-action-menu-close {
            display: none;
        }
    }

    & .upaep__sidebar-action-menu {
        .upaep__sidebar-action-menu-mobile {
            display: none;
        }

        &:has(.upaep__sidebar-action-menu-close) {
            display: none;
        }

        .upaep__sidebar-action-menu-close {
            display: none;
        }
    }

    .upaep__navbar {
        .upaep__navbar-toggle {
            display: none;
        }

        .upaep__navbar-collapse {
            display: flex;
            flex-basis: auto;
            flex-grow: inherit;
        }
    }

    .upaep__button-language img.movil,
    .upaep__button__language img.movil {
        display: none;
    }

    .upaep__card.__slice:not(:hover).upaep__card-slice-content {
        border-radius: 50px;
    }

    .upaep__card.__slice:not(:hover) {
        --upaep-card-height: 40px;
        --upaep-card-border-radius: 50px;
        --upaep-card-img-content-height: 0;
        --upaep-card-text-height: 0;
    }

    .upaep__card.__sliced {

        &:not(:hover) {
            --upaep-card-height: 40px;
            --upaep-card-img-content-height: 0;
            --upaep-card-title-height: 40px;
            --upaep-card-text-height: 0;
            --upaep-card-border-radius: 50px;
            --upaep-card-img-content-border-radius: 50px;

            .upaep__card-content {
                border-radius: 50px;
            }
        }

        &:hover {
            --upaep-card-text-padding: 0;
        }
    }

    .upaep__fullscreen,
    .__fullscreen,
    .fullscreen {
        object-fit: cover;
    }
}

/* min-width 1024px | --upaep-size-lg  */
@media(1024px <=width) {

    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 960px;
    }

    .__float-lg-start {
        float: left !important;
    }

    .__float-lg-end {
        float: right !important;
    }

    .__float-lg-none {
        float: none !important;
    }

    .__objectfit-lg-contain {
        object-fit: contain !important;
    }

    .__objectfit-lg-cover {
        object-fit: cover !important;
    }

    .__objectfit-lg-fill {
        object-fit: fill !important;
    }

    .__objectfit-lg-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-lg-inline {
        display: inline !important;
    }

    .__d-lg-inline-block {
        display: inline-block !important;
    }

    .__d-lg-block {
        display: block !important;
    }

    .__d-lg-grid {
        display: grid !important;
    }

    .__d-lg-inline-grid {
        display: inline-grid !important;
    }

    .__d-lg-table {
        display: table !important;
    }

    .__d-lg-table-row {
        display: table-row !important;
    }

    .__d-lg-table-cell {
        display: table-cell !important;
    }

    .__d-lg-flex {
        display: flex !important;
    }

    .__d-lg-inline-flex {
        display: inline-flex !important;
    }

    .__d-lg-none {
        display: none !important;
    }

    .__flex-lg-fill {
        flex: 1 1 auto !important;
    }

    .__flex-lg-row {
        flex-direction: row !important;
    }

    .__flex-lg-column {
        flex-direction: column !important;
    }

    .__flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-lg-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-lg-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-lg-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-lg-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-lg-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-lg-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .__justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .__justify-content-lg-center {
        justify-content: center !important;
    }

    .__justify-content-lg-between {
        justify-content: space-between !important;
    }

    .__justify-content-lg-around {
        justify-content: space-around !important;
    }

    .__justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-lg-start {
        align-items: flex-start !important;
    }

    .__align-items-lg-end {
        align-items: flex-end !important;
    }

    .__align-items-lg-center {
        align-items: center !important;
    }

    .__align-items-lg-baseline {
        align-items: baseline !important;
    }

    .__align-items-lg-stretch {
        align-items: stretch !important;
    }

    .__align-content-lg-start {
        align-content: flex-start !important;
    }

    .__align-content-lg-end {
        align-content: flex-end !important;
    }

    .__align-content-lg-center {
        align-content: center !important;
    }

    .__align-content-lg-between {
        align-content: space-between !important;
    }

    .__align-content-lg-around {
        align-content: space-around !important;
    }

    .__align-content-lg-stretch {
        align-content: stretch !important;
    }

    .__align-self-lg-auto {
        align-self: auto !important;
    }

    .__align-self-lg-start {
        align-self: flex-start !important;
    }

    .__align-self-lg-end {
        align-self: flex-end !important;
    }

    .__align-self-lg-center {
        align-self: center !important;
    }

    .__align-self-lg-baseline {
        align-self: baseline !important;
    }

    .__align-self-lg-stretch {
        align-self: stretch !important;
    }

    .__order-lg-first {
        order: -1 !important;
    }

    .__order-lg-0 {
        order: 0 !important;
    }

    .__order-lg-1 {
        order: 1 !important;
    }

    .__order-lg-2 {
        order: 2 !important;
    }

    .__order-lg-3 {
        order: 3 !important;
    }

    .__order-lg-4 {
        order: 4 !important;
    }

    .__order-lg-5 {
        order: 5 !important;
    }

    .__order-lg-last {
        order: 6 !important;
    }

    .__m-lg-0 {
        margin: 0 !important;
    }

    .__m-lg-1 {
        margin: 0.25rem !important;
    }

    .__m-lg-2 {
        margin: 0.5rem !important;
    }

    .__m-lg-3 {
        margin: 1rem !important;
    }

    .__m-lg-4 {
        margin: 1.5rem !important;
    }

    .__m-lg-5 {
        margin: 3rem !important;
    }

    .__m-lg-auto {
        margin: auto !important;
    }

    .__mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-lg-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-lg-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-lg-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-lg-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-lg-0 {
        margin-top: 0 !important;
    }

    .__mt-lg-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-lg-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-lg-3 {
        margin-top: 1rem !important;
    }

    .__mt-lg-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-lg-5 {
        margin-top: 3rem !important;
    }

    .__mt-lg-auto {
        margin-top: auto !important;
    }

    .__me-lg-0 {
        margin-right: 0 !important;
    }

    .__me-lg-1 {
        margin-right: 0.25rem !important;
    }

    .__me-lg-2 {
        margin-right: 0.5rem !important;
    }

    .__me-lg-3 {
        margin-right: 1rem !important;
    }

    .me-lg-4 {
        margin-right: 1.5rem !important;
    }

    .__me-lg-5 {
        margin-right: 3rem !important;
    }

    .__me-lg-auto {
        margin-right: auto !important;
    }

    .__mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .__mb-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-lg-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-lg-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-lg-auto {
        margin-bottom: auto !important;
    }

    .__ms-lg-0 {
        margin-left: 0 !important;
    }

    .__ms-lg-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-lg-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-lg-3 {
        margin-left: 1rem !important;
    }

    .__ms-lg-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-lg-5 {
        margin-left: 3rem !important;
    }

    .__ms-lg-auto {
        margin-left: auto !important;
    }

    .__p-lg-0 {
        padding: 0 !important;
    }

    .__p-lg-1 {
        padding: 0.25rem !important;
    }

    .__p-lg-2 {
        padding: 0.5rem !important;
    }

    .__p-lg-3 {
        padding: 1rem !important;
    }

    .__p-lg-4 {
        padding: 1.5rem !important;
    }

    .__p-lg-5 {
        padding: 3rem !important;
    }

    .__px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-lg-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-lg-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-lg-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-lg-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-lg-0 {
        padding-top: 0 !important;
    }

    .__pt-lg-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-lg-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-lg-3 {
        padding-top: 1rem !important;
    }

    .__pt-lg-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-lg-5 {
        padding-top: 3rem !important;
    }

    .__pe-lg-0 {
        padding-right: 0 !important;
    }

    .__pe-lg-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-lg-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-lg-3 {
        padding-right: 1rem !important;
    }

    .__pe-lg-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-lg-5 {
        padding-right: 3rem !important;
    }

    .__pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .__pb-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-lg-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-lg-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-lg-0 {
        padding-left: 0 !important;
    }

    .__ps-lg-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-lg-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-lg-3 {
        padding-left: 1rem !important;
    }

    .__ps-lg-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-lg-5 {
        padding-left: 3rem !important;
    }

    .__gap-lg-0 {
        gap: 0 !important;
    }

    .__gap-lg-1 {
        gap: 0.25rem !important;
    }

    .__gap-lg-2 {
        gap: 0.5rem !important;
    }

    .__gap-lg-3 {
        gap: 1rem !important;
    }

    .__gap-lg-4 {
        gap: 1.5rem !important;
    }

    .__gap-lg-5 {
        gap: 3rem !important;
    }

    .__text-lg-start {
        text-align: left !important;
    }

    .__text-lg-end {
        text-align: right !important;
    }

    .__text-lg-center {
        text-align: center !important;
    }

    .__row-cols-lg-auto>*,
    .upaep__row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-lg-1>*,
    .upaep__row-cols-lg-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-lg-2>*,
    .upaep__row-cols-lg-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-lg-3>*,
    .upaep__row-cols-lg-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-lg-4>*,
    .upaep__row-cols-lg-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-lg-5>*,
    .upaep__row-cols-lg-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-lg-6>*,
    .upaep__row-cols-lg-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-lg-auto,
    .upaep__col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-lg-1,
    .upaep__col-lg-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-lg-2,
    .upaep__col-lg-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-lg-3,
    .upaep__col-lg-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-lg-4,
    .upaep__col-lg-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-lg-5,
    .upaep__col-lg-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-lg-6,
    .upaep__col-lg-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-lg-7,
    .upaep__col-lg-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-lg-8,
    .upaep__col-lg-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-lg-9,
    .upaep__col-lg-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-lg-10,
    .upaep__col-lg-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-lg-11,
    .upaep__col-lg-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-lg-12,
    .upaep__col-lg-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 1450px | --upaep-size-xl */
@media(1450px <=width) {

    .upaep__container-xl,
    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 1140px;
    }

    .__float-xl-start {
        float: left !important;
    }

    .__float-xl-end {
        float: right !important;
    }

    .__float-xl-none {
        float: none !important;
    }

    .__objectfit-xl-contain {
        object-fit: contain !important;
    }

    .__objectfit-xl-cover {
        object-fit: cover !important;
    }

    .__objectfit-xl-fill {
        object-fit: fill !important;
    }

    .__objectfit-xl-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-xl-inline {
        display: inline !important;
    }

    .__d-xl-inline-block {
        display: inline-block !important;
    }

    .__d-xl-block {
        display: block !important;
    }

    .__d-xl-grid {
        display: grid !important;
    }

    .__d-xl-inline-grid {
        display: inline-grid !important;
    }

    .__d-xl-table {
        display: table !important;
    }

    .__d-xl-table-row {
        display: table-row !important;
    }

    .__d-xl-table-cell {
        display: table-cell !important;
    }

    .__d-xl-flex {
        display: flex !important;
    }

    .__d-xl-inline-flex {
        display: inline-flex !important;
    }

    .__d-xl-none {
        display: none !important;
    }

    .__flex-xl-fill {
        flex: 1 1 auto !important;
    }

    .__flex-xl-row {
        flex-direction: row !important;
    }

    .__flex-xl-column {
        flex-direction: column !important;
    }

    .__flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-xl-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-xl-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-xl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-xl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-xl-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .__justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .__justify-content-xl-center {
        justify-content: center !important;
    }

    .__justify-content-xl-between {
        justify-content: space-between !important;
    }

    .__justify-content-xl-around {
        justify-content: space-around !important;
    }

    .__justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-xl-start {
        align-items: flex-start !important;
    }

    .__align-items-xl-end {
        align-items: flex-end !important;
    }

    .__align-items-xl-center {
        align-items: center !important;
    }

    .__align-items-xl-baseline {
        align-items: baseline !important;
    }

    .__align-items-xl-stretch {
        align-items: stretch !important;
    }

    .__align-content-xl-start {
        align-content: flex-start !important;
    }

    .__align-content-xl-end {
        align-content: flex-end !important;
    }

    .__align-content-xl-center {
        align-content: center !important;
    }

    .__align-content-xl-between {
        align-content: space-between !important;
    }

    .__align-content-xl-around {
        align-content: space-around !important;
    }

    .__align-content-xl-stretch {
        align-content: stretch !important;
    }

    .__align-self-xl-auto {
        align-self: auto !important;
    }

    .__align-self-xl-start {
        align-self: flex-start !important;
    }

    .__align-self-xl-end {
        align-self: flex-end !important;
    }

    .__align-self-xl-center {
        align-self: center !important;
    }

    .__align-self-xl-baseline {
        align-self: baseline !important;
    }

    .__align-self-xl-stretch {
        align-self: stretch !important;
    }

    .__order-xl-first {
        order: -1 !important;
    }

    .__order-xl-0 {
        order: 0 !important;
    }

    .__order-xl-1 {
        order: 1 !important;
    }

    .__order-xl-2 {
        order: 2 !important;
    }

    .__order-xl-3 {
        order: 3 !important;
    }

    .__order-xl-4 {
        order: 4 !important;
    }

    .__order-xl-5 {
        order: 5 !important;
    }

    .__order-xl-last {
        order: 6 !important;
    }

    .__m-xl-0 {
        margin: 0 !important;
    }

    .__m-xl-1 {
        margin: 0.25rem !important;
    }

    .__m-xl-2 {
        margin: 0.5rem !important;
    }

    .__m-xl-3 {
        margin: 1rem !important;
    }

    .__m-xl-4 {
        margin: 1.5rem !important;
    }

    .__m-xl-5 {
        margin: 3rem !important;
    }

    .__m-xl-auto {
        margin: auto !important;
    }

    .__mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-xl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-xl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-xl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-xl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-xl-0 {
        margin-top: 0 !important;
    }

    .__mt-xl-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-xl-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-xl-3 {
        margin-top: 1rem !important;
    }

    .__mt-xl-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-xl-5 {
        margin-top: 3rem !important;
    }

    .__mt-xl-auto {
        margin-top: auto !important;
    }

    .__me-xl-0 {
        margin-right: 0 !important;
    }

    .__me-xl-1 {
        margin-right: 0.25rem !important;
    }

    .__me-xl-2 {
        margin-right: 0.5rem !important;
    }

    .__me-xl-3 {
        margin-right: 1rem !important;
    }

    .me-xl-4 {
        margin-right: 1.5rem !important;
    }

    .__me-xl-5 {
        margin-right: 3rem !important;
    }

    .__me-xl-auto {
        margin-right: auto !important;
    }

    .__mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .__mb-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-xl-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-xl-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-xl-auto {
        margin-bottom: auto !important;
    }

    .__ms-xl-0 {
        margin-left: 0 !important;
    }

    .__ms-xl-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-xl-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-xl-3 {
        margin-left: 1rem !important;
    }

    .__ms-xl-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-xl-5 {
        margin-left: 3rem !important;
    }

    .__ms-xl-auto {
        margin-left: auto !important;
    }

    .__p-xl-0 {
        padding: 0 !important;
    }

    .__p-xl-1 {
        padding: 0.25rem !important;
    }

    .__p-xl-2 {
        padding: 0.5rem !important;
    }

    .__p-xl-3 {
        padding: 1rem !important;
    }

    .__p-xl-4 {
        padding: 1.5rem !important;
    }

    .__p-xl-5 {
        padding: 3rem !important;
    }

    .__px-xl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-xl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-xl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-xl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-xl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-xl-0 {
        padding-top: 0 !important;
    }

    .__pt-xl-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-xl-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-xl-3 {
        padding-top: 1rem !important;
    }

    .__pt-xl-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-xl-5 {
        padding-top: 3rem !important;
    }

    .__pe-xl-0 {
        padding-right: 0 !important;
    }

    .__pe-xl-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-xl-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-xl-3 {
        padding-right: 1rem !important;
    }

    .__pe-xl-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-xl-5 {
        padding-right: 3rem !important;
    }

    .__pb-xl-0 {
        padding-bottom: 0 !important;
    }

    .__pb-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-xl-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-xl-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-xl-0 {
        padding-left: 0 !important;
    }

    .__ps-xl-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-xl-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-xl-3 {
        padding-left: 1rem !important;
    }

    .__ps-xl-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-xl-5 {
        padding-left: 3rem !important;
    }

    .__gap-xl-0 {
        gap: 0 !important;
    }

    .__gap-xl-1 {
        gap: 0.25rem !important;
    }

    .__gap-xl-2 {
        gap: 0.5rem !important;
    }

    .__gap-xl-3 {
        gap: 1rem !important;
    }

    .__gap-xl-4 {
        gap: 1.5rem !important;
    }

    .__gap-xl-5 {
        gap: 3rem !important;
    }

    .__text-xl-start {
        text-align: left !important;
    }

    .__text-xl-end {
        text-align: right !important;
    }

    .__text-xl-center {
        text-align: center !important;
    }

    .__row-cols-xl-auto>*,
    .upaep__row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-xl-1>*,
    .upaep__row-cols-xl-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-xl-2>*,
    .upaep__row-cols-xl-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-xl-3>*,
    .upaep__row-cols-xl-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-xl-4>*,
    .upaep__row-cols-xl-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-xl-5>*,
    .upaep__row-cols-xl-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-xl-6>*,
    .upaep__row-cols-xl-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-xl-auto,
    .upaep__col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-xl-1,
    .upaep__col-xl-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-xl-2,
    .upaep__col-xl-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-xl-3,
    .upaep__col-xl-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-xl-4,
    .upaep__col-xl-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-xl-5,
    .upaep__col-xl-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-xl-6,
    .upaep__col-xl-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-xl-7,
    .upaep__col-xl-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-xl-8,
    .upaep__col-xl-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-xl-9,
    .upaep__col-xl-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-xl-10,
    .upaep__col-xl-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-xl-11,
    .upaep__col-xl-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-xl-12,
    .upaep__col-xl-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/* min-width 1920px | --upaep-size-xxl */
@media(1920px <=width) {

    .upaep__container-xxl,
    .upaep__container-xl,
    .upaep__container-lg,
    .upaep__container-md,
    .upaep__container-sm,
    .upaep__container {
        max-width: 1320px;
    }

    .__float-xxl-start {
        float: left !important;
    }

    .__float-xxl-end {
        float: right !important;
    }

    .__float-xxl-none {
        float: none !important;
    }

    .__objectfit-xxl-contain {
        object-fit: contain !important;
    }

    .__objectfit-xxl-cover {
        object-fit: cover !important;
    }

    .__objectfit-xxl-fill {
        object-fit: fill !important;
    }

    .__objectfit-xxl-scale {
        object-fit: scale-down !important;
    }

    .__objectfit-none {
        object-fit: none !important;
    }

    .__d-xxl-inline {
        display: inline !important;
    }

    .__d-xxl-inline-block {
        display: inline-block !important;
    }

    .__d-xxl-block {
        display: block !important;
    }

    .__d-xxl-grid {
        display: grid !important;
    }

    .__d-xxl-inline-grid {
        display: inline-grid !important;
    }

    .__d-xxl-table {
        display: table !important;
    }

    .__d-xxl-table-row {
        display: table-row !important;
    }

    .__d-xxl-table-cell {
        display: table-cell !important;
    }

    .__d-xxl-flex {
        display: flex !important;
    }

    .__d-xxl-inline-flex {
        display: inline-flex !important;
    }

    .__d-xxl-none {
        display: none !important;
    }

    .__flex-xxl-fill {
        flex: 1 1 auto !important;
    }

    .__flex-xxl-row {
        flex-direction: row !important;
    }

    .__flex-xxl-column {
        flex-direction: column !important;
    }

    .__flex-xxl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .__flex-xxl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .__flex-xxl-grow-0 {
        flex-grow: 0 !important;
    }

    .__flex-xxl-grow-1 {
        flex-grow: 1 !important;
    }

    .__flex-xxl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .__flex-xxl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .__flex-xxl-wrap {
        flex-wrap: wrap !important;
    }

    .__flex-xxl-nowrap {
        flex-wrap: nowrap !important;
    }

    .__flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .__justify-content-xxl-start {
        justify-content: flex-start !important;
    }

    .__justify-content-xxl-end {
        justify-content: flex-end !important;
    }

    .__justify-content-xxl-center {
        justify-content: center !important;
    }

    .__justify-content-xxl-between {
        justify-content: space-between !important;
    }

    .__justify-content-xxl-around {
        justify-content: space-around !important;
    }

    .__justify-content-xxl-evenly {
        justify-content: space-evenly !important;
    }

    .__align-items-xxl-start {
        align-items: flex-start !important;
    }

    .__align-items-xxl-end {
        align-items: flex-end !important;
    }

    .__align-items-xxl-center {
        align-items: center !important;
    }

    .__align-items-xxl-baseline {
        align-items: baseline !important;
    }

    .__align-items-xxl-stretch {
        align-items: stretch !important;
    }

    .__align-content-xxl-start {
        align-content: flex-start !important;
    }

    .__align-content-xxl-end {
        align-content: flex-end !important;
    }

    .__align-content-xxl-center {
        align-content: center !important;
    }

    .__align-content-xxl-between {
        align-content: space-between !important;
    }

    .__align-content-xxl-around {
        align-content: space-around !important;
    }

    .__align-content-xxl-stretch {
        align-content: stretch !important;
    }

    .__align-self-xxl-auto {
        align-self: auto !important;
    }

    .__align-self-xxl-start {
        align-self: flex-start !important;
    }

    .__align-self-xxl-end {
        align-self: flex-end !important;
    }

    .__align-self-xxl-center {
        align-self: center !important;
    }

    .__align-self-xxl-baseline {
        align-self: baseline !important;
    }

    .__align-self-xxl-stretch {
        align-self: stretch !important;
    }

    .__order-xxl-first {
        order: -1 !important;
    }

    .__order-xxl-0 {
        order: 0 !important;
    }

    .__order-xxl-1 {
        order: 1 !important;
    }

    .__order-xxl-2 {
        order: 2 !important;
    }

    .__order-xxl-3 {
        order: 3 !important;
    }

    .__order-xxl-4 {
        order: 4 !important;
    }

    .__order-xxl-5 {
        order: 5 !important;
    }

    .__order-xxl-last {
        order: 6 !important;
    }

    .__m-xxl-0 {
        margin: 0 !important;
    }

    .__m-xxl-1 {
        margin: 0.25rem !important;
    }

    .__m-xxl-2 {
        margin: 0.5rem !important;
    }

    .__m-xxl-3 {
        margin: 1rem !important;
    }

    .__m-xxl-4 {
        margin: 1.5rem !important;
    }

    .__m-xxl-5 {
        margin: 3rem !important;
    }

    .__m-xxl-auto {
        margin: auto !important;
    }

    .__mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .__mx-xxl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .__mx-xxl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .__mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .__mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .__mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .__mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .__my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .__my-xxl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .__my-xxl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .__my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .__my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .__my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .__my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .__mt-xxl-0 {
        margin-top: 0 !important;
    }

    .__mt-xxl-1 {
        margin-top: 0.25rem !important;
    }

    .__mt-xxl-2 {
        margin-top: 0.5rem !important;
    }

    .__mt-xxl-3 {
        margin-top: 1rem !important;
    }

    .__mt-xxl-4 {
        margin-top: 1.5rem !important;
    }

    .__mt-xxl-5 {
        margin-top: 3rem !important;
    }

    .__mt-xxl-auto {
        margin-top: auto !important;
    }

    .__me-xxl-0 {
        margin-right: 0 !important;
    }

    .__me-xxl-1 {
        margin-right: 0.25rem !important;
    }

    .__me-xxl-2 {
        margin-right: 0.5rem !important;
    }

    .__me-xxl-3 {
        margin-right: 1rem !important;
    }

    .me-xxl-4 {
        margin-right: 1.5rem !important;
    }

    .__me-xxl-5 {
        margin-right: 3rem !important;
    }

    .__me-xxl-auto {
        margin-right: auto !important;
    }

    .__mb-xxl-0 {
        margin-bottom: 0 !important;
    }

    .__mb-xxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .__mb-xxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .__mb-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .__mb-xxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .__mb-xxl-5 {
        margin-bottom: 3rem !important;
    }

    .__mb-xxl-auto {
        margin-bottom: auto !important;
    }

    .__ms-xxl-0 {
        margin-left: 0 !important;
    }

    .__ms-xxl-1 {
        margin-left: 0.25rem !important;
    }

    .__ms-xxl-2 {
        margin-left: 0.5rem !important;
    }

    .__ms-xxl-3 {
        margin-left: 1rem !important;
    }

    .__ms-xxl-4 {
        margin-left: 1.5rem !important;
    }

    .__ms-xxl-5 {
        margin-left: 3rem !important;
    }

    .__ms-xxl-auto {
        margin-left: auto !important;
    }

    .__p-xxl-0 {
        padding: 0 !important;
    }

    .__p-xxl-1 {
        padding: 0.25rem !important;
    }

    .__p-xxl-2 {
        padding: 0.5rem !important;
    }

    .__p-xxl-3 {
        padding: 1rem !important;
    }

    .__p-xxl-4 {
        padding: 1.5rem !important;
    }

    .__p-xxl-5 {
        padding: 3rem !important;
    }

    .__px-xxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .__px-xxl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .__px-xxl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .__px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .__px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .__px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .__py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .__py-xxl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .__py-xxl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .__py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .__py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .__py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .__pt-xxl-0 {
        padding-top: 0 !important;
    }

    .__pt-xxl-1 {
        padding-top: 0.25rem !important;
    }

    .__pt-xxl-2 {
        padding-top: 0.5rem !important;
    }

    .__pt-xxl-3 {
        padding-top: 1rem !important;
    }

    .__pt-xxl-4 {
        padding-top: 1.5rem !important;
    }

    .__pt-xxl-5 {
        padding-top: 3rem !important;
    }

    .__pe-xxl-0 {
        padding-right: 0 !important;
    }

    .__pe-xxl-1 {
        padding-right: 0.25rem !important;
    }

    .__pe-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .__pe-xxl-3 {
        padding-right: 1rem !important;
    }

    .__pe-xxl-4 {
        padding-right: 1.5rem !important;
    }

    .__pe-xxl-5 {
        padding-right: 3rem !important;
    }

    .__pb-xxl-0 {
        padding-bottom: 0 !important;
    }

    .__pb-xxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .__pb-xxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .__pb-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .__pb-xxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .__pb-xxl-5 {
        padding-bottom: 3rem !important;
    }

    .__ps-xxl-0 {
        padding-left: 0 !important;
    }

    .__ps-xxl-1 {
        padding-left: 0.25rem !important;
    }

    .__ps-xxl-2 {
        padding-left: 0.5rem !important;
    }

    .__ps-xxl-3 {
        padding-left: 1rem !important;
    }

    .__ps-xxl-4 {
        padding-left: 1.5rem !important;
    }

    .__ps-xxl-5 {
        padding-left: 3rem !important;
    }

    .__gap-xxl-0 {
        gap: 0 !important;
    }

    .__gap-xxl-1 {
        gap: 0.25rem !important;
    }

    .__gap-xxl-2 {
        gap: 0.5rem !important;
    }

    .__gap-xxl-3 {
        gap: 1rem !important;
    }

    .__gap-xxl-4 {
        gap: 1.5rem !important;
    }

    .__gap-xxl-5 {
        gap: 3rem !important;
    }

    .__text-xxl-start {
        text-align: left !important;
    }

    .__text-xxl-end {
        text-align: right !important;
    }

    .__text-xxl-center {
        text-align: center !important;
    }

    .__row-cols-xxl-auto>*,
    .upaep__row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .__row-cols-xxl-1>*,
    .upaep__row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: calc(100% / 1);
    }

    .__row-cols-xxl-2>*,
    .upaep__row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: calc(100% / 2);
    }

    .__row-cols-xxl-3>*,
    .upaep__row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: calc(100% / 3);
    }

    .__row-cols-xxl-4>*,
    .upaep__row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: calc(100% / 4);
    }

    .__row-cols-xxl-5>*,
    .upaep__row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }

    .__row-cols-xxl-6>*,
    .upaep__row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: calc(100% / 6);
    }

    .__col-xxl-auto,
    .upaep__col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .__col-xxl-1,
    .upaep__col-xxl-1 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 1);
    }

    .__col-xxl-2,
    .upaep__col-xxl-2 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 2);
    }

    .__col-xxl-3,
    .upaep__col-xxl-3 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 3);
    }

    .__col-xxl-4,
    .upaep__col-xxl-4 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 4);
    }

    .__col-xxl-5,
    .upaep__col-xxl-5 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 5);
    }

    .__col-xxl-6,
    .upaep__col-xxl-6 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 6);
    }

    .__col-xxl-7,
    .upaep__col-xxl-7 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 7);
    }

    .__col-xxl-8,
    .upaep__col-xxl-8 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 8);
    }

    .__col-xxl-9,
    .upaep__col-xxl-9 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 9);
    }

    .__col-xxl-10,
    .upaep__col-xxl-10 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 10);
    }

    .__col-xxl-11,
    .upaep__col-xxl-11 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 11);
    }

    .__col-xxl-12,
    .upaep__col-xxl-12 {
        flex: 0 0 auto;
        width: calc(100% / 12 * 12);
    }
}

/*? --upaep-landscape */
@media (orientation: landscape) {}

@media (width <=924px) and (orientation: landscape) {
    .fullscreen.d-mobile {
        display: none !important;
    }

    .fullscreen.d-desktop {
        display: block !important;
    }

    .upaep__contacto {
        height: auto;
    }

    .upaep__btn.__whats {
        inset: auto 0 25% auto;
    }
}