.slide-panel-bottom
{
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;

    transform: translateY(200%);
    transition: transform .75s cubic-bezier(.2, .8, .2, 1), height .3s ease;
    z-index: 6000;
    will-change: transform;
}

.form-white-fon
{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    z-index: 5999;
    height: min(38vh, calc(120px + var(--app-keyboard-offset, 0px) + var(--app-safe-area-bottom, 0px)));
    background: var(--bg-custom)
}

.white-fon-fade-enter-active
{
    transition: opacity .3s ease .2s;
}

.white-fon-fade-leave-active
{
    transition: none;
}

.white-fon-fade-enter-from
{
    opacity: 0;
}

.slide-panel-bottom.open
{
    transform: translateY(0);
}

.form-note
{
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.4;
    color: color-mix(in oklab, var(--fg-custom) 60%, transparent);
}