#passwordCard {
    position: absolute;
    left: 0;
    right: 0;
    top: 27%;
}

.password-toggle {
    display: none;
    color: inherit;
    font-size: .750rem;
    opacity: 0.9;
    transition: opacity .12s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-default);
    border: none;
    padding: 0;
}

.password-toggle.visible {
    display: inline-block;
}

.password-toggle:focus {
    outline: none;
}

.card-switcher {
    position: relative;
    overflow: visible;
    min-height: 1px;
    max-width: 640px;
    margin: 0 auto;
}

.card-panel {
    width: 100%;
    transition: transform 420ms cubic-bezier(.2, .9, .2, 1), opacity 320ms;
    transform-origin: center top;
    will-change: transform, opacity;
    position: relative;
    border-radius: .5rem;
}

.card-panel.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
}

.card-panel.is-hidden {
    opacity: 0;
    transform: translateY(-30px) scale(.98);
    pointer-events: none;
    z-index: 1;
}

.card-panel.from-top {
    transform: translateY(-120%) scale(.98);
    opacity: 0;
}

.card-panel.from-top.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.btn-change {
    min-width: 100px;
}