:root {
    --kk-vh: 1vh;
    --kk-modal-vh-px: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --kk-vh: 1dvh;
        --kk-modal-vh-px: 100dvh;
    }
}

.kk-welcome-modal #wsWelcomeForm,
.kk-onboard-modal #kkOnboardForm {
    position: relative;
}

.kk-welcome-modal #wsWelcomeForm.kk-step-transitioning,
.kk-onboard-modal #kkOnboardForm.kk-step-transitioning,
.kk-welcome-modal__submiter.kk-step-transitioning,
.kk-onboard-modal [data-kk-onboard-submiter].kk-step-transitioning {
    overflow: hidden;
    will-change: height;
}

.kk-welcome-modal [class^="welcome__item-"][hidden],
.kk-onboard-modal [class^="onboard__item-"][hidden] {
    display: none !important;
}

.kk-welcome-modal [class^="welcome__item-"].is-active:not([hidden]):not(.kk-step-transition),
.kk-onboard-modal [class^="onboard__item-"].is-active:not([hidden]):not(.kk-step-transition) {
    display: block;
}

.kk-welcome-modal [class^="welcome__item-"].kk-step-transition,
.kk-onboard-modal [class^="onboard__item-"].kk-step-transition {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    will-change: transform, opacity;
}

.kk-welcome-modal [class^="welcome__item-"].kk-step-transition.is-active,
.kk-onboard-modal [class^="onboard__item-"].kk-step-transition.is-active {
    z-index: 2;
    pointer-events: auto;
}

.kk-welcome-modal [class^="welcome__item-"].kk-step-transition:not(.is-active),
.kk-onboard-modal [class^="onboard__item-"].kk-step-transition:not(.is-active) {
    z-index: 1;
    pointer-events: none;
}

@keyframes kk-step-enter-forward {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes kk-step-exit-forward {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-32px);
    }
}

@keyframes kk-step-enter-back {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes kk-step-exit-back {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(32px);
    }
}

.kk-step-enter-forward {
    animation: kk-step-enter-forward 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kk-step-exit-forward {
    animation: kk-step-exit-forward 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kk-step-enter-back {
    animation: kk-step-enter-back 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kk-step-exit-back {
    animation: kk-step-exit-back 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .kk-step-enter-forward,
    .kk-step-exit-forward,
    .kk-step-enter-back,
    .kk-step-exit-back {
        animation: none;
    }
}

@media (max-width: 991.98px) {
    .kk-onboard-modal.is-open,
    .kk-welcome-modal.is-open,
    .kk-cancel-retention-modal.is-open {
        align-items: stretch;
        height: 100%;
        inset: 0;
        justify-content: flex-start;
        max-height: none;
        padding: 0;
        width: 100%;
    }

    .kk-onboard-modal.is-open .kk-onboard-modal__panel,
    .kk-welcome-modal.is-open .kk-welcome-modal__panel,
    .kk-cancel-retention-modal.is-open .kk-cancel-retention-modal__panel {
        border-radius: 0;
        flex: 1 1 auto;
        height: 100%;
        max-height: none;
        min-height: 0;
        width: 100%;
    }
}