.offcanvas-end.zf-offcanvas,
.offcanvas-start.zf-offcanvas {
    border-radius: var(--bs-border-radius-xl);
    margin: 0.75rem;
}

.offcanvas-bottom.zf-offcanvas {
    border-top-left-radius: var(--bs-border-radius-xl);
    border-top-right-radius: var(--bs-border-radius-xl);
}

.zf-offcanvas-fetch-loading {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zf-offcanvas-fetch-loading .spinner-border {
    width: 5rem;
    height: 5rem;
}

/* On screens smaller than the "md" breakpoint (768px), make the offcanvas fullscreen. */
@media (max-width: 767.98px) {
    .zf-offcanvas.offcanvas.offcanvas-end {
        --bs-offcanvas-width: 100%;
        margin: 0;
        border-radius: 0;
    }
}