@media (max-width: 991.98px) {
    :root {
        --bs-app-header-height: calc(60px + constant(safe-area-inset-top));
        --bs-app-header-height: calc(60px + env(safe-area-inset-top, 0px));
    }

    [data-kt-app-header-fixed-mobile=true] .app-header {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        height: var(--bs-app-header-height);
    }

    .drawer {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .app-footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
}