html.drawer-open,
body.drawer-open {
    height: 100%;
    overflow: hidden;
}

body.drawer-open {
    position: fixed;
    width: 100%;
}

.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
}

.app-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    max-width: 92vw;
    width: 720px;
    background: #fff;
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* tamanhos */
    .app-drawer-panel.app-drawer-sm {
        width: 520px;
    }

    .app-drawer-panel.app-drawer-md {
        width: 720px;
    }

    .app-drawer-panel.app-drawer-lg {
        width: 980px;
        max-width: 92vw;
    }

.app-drawer-header {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.app-drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
}

/* scroll lock */
body.app-drawer-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/*.app-drawer-scroll-lock {
    overscroll-behavior: contain;
}*/
/* lock para container scroller */
.app-drawer-scroll-lock {
    overscroll-behavior: contain;
}


/* CHECKBOX */

/* deixa checkbox mais visível (Bootstrap) */
.form-check-input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    border-width: 2px;
    border-color: rgba(0,0,0,.45);
    background-color: #fff;
}

/* quando marcado, aumenta contraste do "check" */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* foco mais evidente */
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* evita scroll horizontal no drawer */
.app-drawer-body {
    overflow-x: hidden;
}

/* bootstrap .row tem margem negativa -> causa overflow */
.app-drawer-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}