.flyout {
    left: 0;
    position: fixed;
    right: auto;
    transform: translateX(-100%);
    transition: transform 10s ease;
    z-index: 1050;
}

.flyout.right {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.flyout.left {
    left: 0;
    right: auto;
    transform: translateX(0%);
}

.flyout.show {
    transform: translateX(0%);
}

.flyout-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

.navbar-flyout {
    background-clip: padding-box;
    background-color: inherit;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    bottom: 0;
    padding: 1rem;
    top: 0;
}

.navbar-flyout.right {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: none;
}

.navbar-flyout.left {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-left: none;
}