/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be defined here.

***************************************************** */

/* Keep the hit area connected while moving from a desktop item to its submenu. */
@media (min-width: 1200px) {
    .popup-mobile-menu .mainmenu .has-droupdown > .submenu {
        top: 100%;
        transition: opacity 120ms ease;
        pointer-events: none;
    }

    .popup-mobile-menu .mainmenu .has-droupdown:hover > .submenu,
    .popup-mobile-menu .mainmenu .has-droupdown > a:focus-visible + .submenu,
    .popup-mobile-menu .mainmenu .has-droupdown > .submenu:focus-within {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .popup-mobile-menu .mainmenu .has-droupdown > .submenu {
        transition: none;
    }
}


/* Verificación en dos pasos (tomado de CloudHost): seis casilleros, ícono y enlaces de la pantalla del código. */
.user-form-body .theme-forms .inner .digit-input { text-align: center; font-size: 22px; font-weight: 600; padding: 0; height: 56px; width: 100%; }
.user-form-body .theme-forms .alert { font-size: 14px; }
.user-form-body .theme-forms .auth-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary), .08); color: rgb(var(--color-primary)); font-size: 32px; }
.user-form-body .theme-forms .btn-link-plain { background: none; border: 0; padding: 0; color: rgb(var(--color-primary)); font-weight: 600; text-decoration: underline; cursor: pointer; }
.user-form-body .theme-forms .border-top-dashed { border-top: 2px dashed #dfdfdf; }

/* Mostrar u ocultar la contraseña (tomado de CloudHost). */
.user-form-body .theme-forms .inner .form-group .password-toggle { position: absolute; top: 0; right: 0; height: 47px; width: 42px; border: 0; background: none; color: #9a9a9a; z-index: 4; cursor: pointer; }
.user-form-body .theme-forms .inner .form-group .password-toggle:hover { color: rgb(var(--color-primary)); }
.user-form-body .theme-forms .inner .form-group .input.icon.password-input { padding-right: 42px; }