.rz-layout {
    /* استفاده مستقیم از متغیرهای خودت */
    background-color: var(--c-base-100) !important;
    background-attachment: fixed;
    /* ایجاد گرادینت با استفاده از متغیرهای تم خودت */
    /* نکته: color-mix رنگ اصلی شما را می‌گیرد و با درصد مشخصی با transparent ترکیب می‌کند */
    background-image: radial-gradient(at 0% 0%, color-mix(in srgb, var(--c-primary) 15%, transparent) 0px, transparent 50%), radial-gradient(at 100% 0%, color-mix(in srgb, var(--c-info) 15%, transparent) 0px, transparent 50%), radial-gradient(at 100% 100%, color-mix(in srgb, var(--c-danger) 15%, transparent) 0px, transparent 50%), radial-gradient(at 0% 100%, color-mix(in srgb, var(--c-warning) 10%, transparent) 0px, transparent 50%);
    transition: background 0.3s ease, color 0.3s ease;
}
.rz-header{
    background-color:unset !important;
}
.BorderStyleButton[class^=rz-sidebar-toggle]:before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #DCE0E9;
    color: #9BA6C0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.TopBorder {
    border-top: 1px solid var(--c-base-400) !important;
}

.BorderStyleButton {
    color: #9BA6C0 !important;
    position: relative !important;
}

    .BorderStyleButton:hover,
    .BorderStyleButton:focus-visible {
        background: var(--c-base-100) !important;
        transition: 150ms ease-in all;
        border: unset;
    }

.GridLayoutMain {
    display: grid;
    height: var(--vh) !important;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "TopBarFixedLayer "
        "ScrollGridLayer  "
        "ّFooterFixedLayer ";
}


.TopBarFixedLayer {
    grid-area: TopBarFixedLayer;
}

.FooterFixedLayer {
    grid-area: FooterFixedLayer;
}

.ScrollGridLayer {
    grid-area: ScrollGridLayer;
    overflow-y: auto;
}

.AppBottomBar {
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 0 0.125rem 0.5rem 0 rgba(19, 17, 32, 0.18);
}
/*App Bar*/
/*This part is for forcing appbar to keep 10 pixel margin around, despite of setting its position fixed*/
.TopAppBar {
    border-radius: 10px !important;
    box-shadow: 0 0.125rem 0.5rem 0 rgba(19, 17, 32, 0.18);
    /*    background-color: var(--c-white) !important;*/
}

.RZHeader.rz-header {
    /*    width: calc(100% - 20px) !important;*/
    margin: 5px 10px 0;
    right: 10px !important;
    box-shadow: unset !important;
}

    .RZHeader.rz-header a {
        color: var(--c-base-500);
        font-size: 14px;
    }

.TopAppBar .rz-profile-menu {
    border-radius: 10px !important;
}
/*
.LightShadow {
    box-shadow: 0px 0px 8px rgba(47, 43, 61, 0.12) !important;
}
*/
.BorderActive {
    border: 2px solid #056EE9;
    border-radius: 100%;
}


#Maham-Container {
    position: relative;
    width: 100%;
    /*    min-height: calc(100vh - 64px);*/
    display: flex;
    flex-direction: column;
}

#Maham-Body {
    overflow: auto;
    height: 1px;
    /* max-height: 14px; */
    position: relative;
    scrollbar-width: thin;
}


.Maham-Page {
    display: flex;
    flex-grow: 1;
    max-height: calc(100% - 1rem);
    overflow-y: auto;
    margin-top: 0.5rem !important;
    background: transparent;
    /*    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);*/
    border-radius: 4px;
    flex-direction: column;
    background: var(--c-white);
}


.ToolBar {
    /*    height: 64px;*/
    /*    margin-top: 10px;*/
}

    .ToolBar .PageTitle {
        font-size: 1rem;
        font-weight: bolder;
    }

.rz-sidebar {
    right: 0 !important;
}
/*-------------------------------- Applied to side bar for Visuals -------------------------------*/
/*.SideBar .rz-navigation-item .rz-navigation-item-wrapper-active {
    background: #91c5ff !important;
    background: linear-gradient(110deg,rgba(145, 197, 255, 1) 0%, rgba(5, 110, 233, 1) 100%) !important;
    border: unset !important;
    border-radius: 10px;
    box-shadow: 0 .125rem .375rem 0 rgba(105,173,252, 0.3);
}



.SideBar .rz-navigation-item .rz-navigation-item-link-active,
.SideBar .rz-navigation-item .rz-navigation-item-link-active i {
    color: #FFFFFF !important;
}

.SideBar .rz-navigation-item {
    border-radius: 10px;
}

.SideBar .ImageWrapper {
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .SideBar .ImageWrapper img {
        max-width: 50px;
    }*/

/*?
.SideBar .rz-navigation-item-link:hover:not(.rz-navigation-item-link-active) {
    background-color: var(--c-base-600);
}*/

/*HighLight ones that sub menus are active But don't Highlight one who don't have any child to be active*/
/*منوهای تکی را مستثنا قرار می‌دهد*/
/*.SideBar .ScrollLayer > .rz-panel-menu > .rz-navigation-item:has(.rz-navigation-item-link-active):has(.rz-navigation-menu .rz-navigation-item) > .rz-navigation-item-wrapper div > span {
    color: var(--c-info) !important;*/ /* example */
/*}*/

/*.SideBar .ScrollLayer > .rz-panel-menu > .rz-navigation-item:has(.rz-navigation-item-link-active) > .rz-navigation-item-wrapper div > span {
    color: var(--c-warning) !important;
}*/

/*dark mode*/
/*.rz-sidebar .rz-navigation-item .rz-navigation-item-wrapper {
    background-color: var(--c-base-200);
}*/
/*Hover in darkmode زیر منوها*/
/*.SideBar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: unset !important;
}*/
/*dark mode background  زیر منوها*/
/*.SideBar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: unset !important;
}*/
/*Hover in darkmode*/
/*.SideBar .rz-navigation-item-wrapper .rz-navigation-item-link:hover {
    color: var(--c-black);
}*/
/*dark mode سفید کردن سر منوها*/
/*.SideBar .ScrollLayer > .rz-panel-menu > .rz-navigation-item:not(:has(.rz-navigation-item-link-active)) > .rz-navigation-item-wrapper div > span {*/
/*    .ScrollLayer > .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper div > span {*/
    /*color: var(--c-black) !important;
}*/
    /*-------------------------------- End -------------------------------*/
    /*Applied to Align Sidebar to left on mobile view*/
/*    .rz-sidebar {
        right: 0 !important;
    }*/
    /*Applied to colorize navigation item icon inside top bar */
    .TopAppBar ul.rz-profile-menu .rz-navigation-item-icon-children {
        color: var(--c-black) !important;
    }

    .rz-panel-menu .rz-navigation-item-link {
        padding-bottom: 8px !important;
        padding-top: 8px !important;
    }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
        padding-inline: 25px !important;
    }

    .ScrollLayer > .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper div > i {
        color: var(--c-info);
        font-size: 1.25rem;
        font-weight: 400;
    }

    .rz-panel-menu .rz-navigation-item .rz-navigation-item-wrapper div span {
        font-size: 14px !important;
    }
    /*change Text highlight color*/
    ::-moz-selection { /* Code for Firefox */
        background: #0057e0 !important;
        color: white;
    }

    ::selection {
        color: white;
        background: #0057e0 !important;
    }

.rz-footer.AppFooter {
    border-radius: 10px 10px 0 0;
    padding-block: 0.6rem !important;
    margin-inline: 10px;
    z-index: 1;
}



@media (max-width: 768px) {
    .rz-body {
        padding: 0px !important;
    }

    .rz-footer.AppFooter {
        margin-inline: 2px;
    }

    .rz-header.RZHeader {
        margin-inline: 2px;
    }
}