/*
    OFFCANVAS komponenta
*/

*.dragbox > .nb-offcanvas {
    position: relative !important;
    inset: unset !important;
    visibility: unset;
}

.nb-offcanvas {
    z-index: 10002;
}

.nb-offcanvas.offcanvas-start,
.nb-offcanvas.offcanvas-end {
    width: var(--nb-offcanvas-width);
}

.nb-offcanvas.offcanvas-top,
.nb-offcanvas.offcanvas-bottom {
    height: var(--nb-offcanvas-height);
}

.nb-offcanvas .nb-offcanvas-header {
    background-color: var(--nb-offcanvas-header-bg);
    border-bottom: var(--nb-offcanvas-header-border);
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-offcanvas-header .nb-btn-close,
.nb-offcanvas .nb-offcanvas-header .nb-offcanvas-title{
    color: var(--nb-offcanvas-header-color);
}

.nb-offcanvas .nb-offcanvas-body {
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-btn-close {
    padding: 0;
    margin: 0;
    font-size: 20px;
    cursor: pointer;
}

.nb-offcanvas.offcanvas-start {
    border-right: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-end {
    border-left: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-top {
    border-bottom: var(--nb-offcanvas-border);
}

.nb-offcanvas.offcanvas-bottom {
    border-top: var(--nb-offcanvas-border);
}

.nb-offcanvas .nb-offcanvas-footer {
    background-color: var(--nb-offcanvas-footer-bg);
    border-top: var(--nb-offcanvas-footer-border);
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--nb-offcanvas-padding-x) var(--nb-offcanvas-padding-y);
}

.nb-offcanvas .nb-offcanvas-title {
    line-height: var(--nb-h4-line-height);
}

.offcanvas-backdrop{
    z-index: 10001;
    background-color: var(--nb-offcanvas-backdrop-color);
}

.offcanvas-backdrop.show {
    opacity: 1;
}

@media screen and (max-width: 576px) {
    .nb-offcanvas.offcanvas-start,
    .nb-offcanvas.offcanvas-end {
        width: 100%;
        border: unset;
    }
}