/* Base width for xs screens (below sm breakpoint) */
.drawer-responsive[data-kt-drawer-width] {
    --drawer-width: 95%;
}

/* Medium screens (md) */
@media (min-width: 768px) {
    .drawer-responsive[data-kt-drawer-width] {
        --drawer-width: 75%;
    }
}

/* Large screens (lg) */
@media (min-width: 992px) {
    .drawer-responsive[data-kt-drawer-width] {
        --drawer-width: 60%;
    }
}

/* Extra large screens (xl) */
@media (min-width: 1440px) {
    .drawer-responsive[data-kt-drawer-width] {
        --drawer-width: 55%;
    }
}

@media (min-width: 1800px) {
    .drawer-responsive[data-kt-drawer-width] {
        --drawer-width: 45%;
    }
}

@media (min-width: 2000px) {
    .drawer-responsive[data-kt-drawer-width] {
        --drawer-width: 40%;
    }
}

.drawer__header {
  margin: var(--spacing-20) var(--spacing-24);
  border-bottom: 0;
  gap: var(--spacing-12);
  padding: 0;
  border: 0;
  border-radius: var(--radius-12);
}

.card-drawer {
    display: flex !important;
    overflow: auto;
    z-index: 1062;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: var(--bs-drawer-bg-color);
    border-top-left-radius: var(--radius-12);
    border-bottom-left-radius: var(--radius-12);
}

.card-drawer-overlay {
    backdrop-filter: blur(2px);
    background: #FCFCFC4D;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 1061;
}

.background-disabled {
    overflow: hidden;
}