.right-navbar {
    display: none;
    direction:ltr
}

@media (min-width: 320px) {
    .right-navbar {
        display:block
    }
}

.right-navbar-panel {
    background: var(--background-color-white);
    border-left: 0 solid transparent;
    display: block;
    height: 100%;
    position: fixed;
    width: 320px;
    z-index: 100;
    top: 0;
    bottom: 0;
    right: -320px;
    transition:right .2s ease-in-out
}

.right-navbar.open .right-navbar-panel:before {
    content: "";
    background: rgba(0, 0, 0, .325);
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    pointer-events:none
}

.right-navbar.open .right-navbar-panel {
    right:0
}


.right-navbar-content {
    height: 100%;
    overflow: auto;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction:column
}

.right-navbar-title {
    padding: 1.35rem 1.1rem;
    font-size: .875rem;
    background: #fff;
    color: var(--text-color-dark-100);
    border-bottom:1px solid #e2e8ee
}

.right-navbar-title .close, .right-navbar-title h4 {
    color: var(--text-color-dark-100);
}



.right-navbar-body {
    flex:1
}

.right-navbar-body {
    padding:1rem 1.5rem
}