/* shared */
.table-top {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    height: auto;
    will-change: transform, opacity;
    backface-visibility: hidden;
    pointer-events: none;
}

/* ENTER states */
.enter-up {
    transform: translateY(400%);
    transition-delay: 0.5s;
    transition: transform .5s ease, opacity .5s ease;
    opacity: 1;
}

.enter-down {
    transform: translateY(-400%);
    transition: transform .5s ease, opacity 1s ease;
    opacity: 1;

}

.enter-up.active,
.enter-down.active {
    transform: translateY(0);
    transition: transform .5s ease, opacity 1.5s ease;
    transition-delay: 0.5s;
    opacity: 1;
}

/* EXIT states */
.exit-up {
    transform: translateY(0);
    transition: transform 1s ease, opacity .5s ease;
    opacity: 1;
}

.exit-down {
    transform: translateY(0);
    transition: transform .5s ease, opacity .5s ease;
    opacity: 1;
}

.exit-up.active {
    transform: translateY(-400%);
    transition: transform 1s ease, opacity .5s ease;
    opacity: 1;
}

.exit-down.active {
    transform: translateY(400%);
    transition: transform .5s ease, opacity .5s ease;
    opacity: 1;
}


.topBxo {
    position: absolute;
    inset: 0;
}