.main-view-size {
    height: 100vdh !important;
    width: calc(100dvw) !important;
}

@media screen and (min-width: 992px) {
    .lg\:main-view-size {
        height: 100vdh !important;
        width: calc(100dvw - var(--side-nav-bar-width)) !important;
    }
}

.scroll-panel-height {
    height: calc(100dvh - var(--header-total-height-mobile) - var(--mobile-nav-bar-height)) !important;
}

@media screen and (min-width: 992px) {
    .lg\:scroll-panel-height {
        height: calc(100dvh - var(--header-total-height-desktop)) !important;
    }
}

.main-view-size-without-menu {
    height: 100vdh !important;
    width: calc(100dvw) !important;
}

@media screen and (min-width: 992px) {
    .lg\:main-view-size-without-menu {
        height: 100vdh !important;
        width: calc(100dvw) !important;
    }
}

.scroll-panel-height-without-menu {
    height: calc(100dvh - var(--header-total-height-mobile)) !important;
}

@media screen and (min-width: 992px) {
    .lg\:scroll-panel-height-without-menu {
        height: calc(100dvh - var(--header-total-height-desktop)) !important;
    }
}

.side-nav-bar-width {
    width: var(--side-nav-bar-width) !important;
}

/* Equivalent to 'w-12rem px-3 text-left' */
.side-nav-bar-button {
    width: 12rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: left !important;
}

.mobile-nav-bar-height {
    height: var(--mobile-nav-bar-height) !important;
}

/* Equivalent to 'h-full w-full p-0' */
.mobile-nav-bar-button {
    height: 48px !important;
    width: 100% !important;
    padding: 0 !important;
}

.header-height {
    height: var(--header-total-height-mobile) !important;
}

@media screen and (min-width: 992px) {
    .lg\:header-height {
        height: var(--header-total-height-desktop) !important;
    }
}