html {
}
body {
    /*padding-top: 2.6rem;*/
    /*padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;*/
    /*padding-bottom: 2rem;*/
    padding-bottom: 0rem;
    padding: .3rem;
}

body>.body_container {
    display: grid;
    grid-template-columns: 100%;
    /* grid-template-rows: min-content min-content min-content min-content max-content min-content min-content; */
    /*grid-template-rows: min-content min-content min-content max-content min-content;*/
    grid-template-rows: 100%;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    /* "System-Nav-Menu" */
    "Site-Header"
    "Site-Nav-Menu"
    "System-Notifications"
    "Main-Body"
    "Site-Footer";
    /* "System-Footer"; */

    max-width: 1440px;
    margin: auto;
    /*padding: 2.25rem 0rem 2rem;*/ /* top right/left bottom */

    /*max-height: 100vh;*/
}

/* #System-Nav-Menu { grid-area: System-Nav-Menu; } */
#Site-Header { grid-area: Site-Header; }
#Site-Nav-Menu { grid-area: Site-Nav-Menu; }
#System-Notifications { grid-area: System-Notifications; }
#Main-Body {
    display: grid;
    /*grid-template-columns: fit-content(15%) fit-content(85%);*/
    grid-template-columns: 15rem 1fr;
    grid-template-rows: auto 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    /*"Main-Nav-Menu Main-Notifications"*/
    "Main-Nav-Menu Main-Content";
    grid-area: Main-Body;
}
/*#Main-Notifications { grid-area: Main-Notifications; }*/
#Main-Nav-Menu { grid-area: Main-Nav-Menu; }
#Main-Content { grid-area: Main-Content; }
#Site-Footer { grid-area: Site-Footer; }
/* #System-Footer { grid-area: System-Footer; } */
/* #System-Nav-Menu-Float { } */
/* #System-Debug { grid-area: System-Debug; } */



#System-Nav-Menu {
    z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */

    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw;
    max-width: 1440px;

    /* margin: auto; */
    padding-top: .03rem;
    padding-left: .03rem;
    padding-right: .03rem;
    padding-bottom: .03rem;

    overflow: hidden;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    min-height: 2.25rem;
    max-height: 2.25rem;

    /* NOTE: transition when no longer hovering */
    transition-property: height, max-height;
    transition-delay: 4s;
    transition-duration: .1s;
    transition-timing-function: linear;
}

#System-Nav-Menu:hover {
    z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */

    /* height: auto; */
    max-height: 10rem;

    /* NOTE: transition when hover starts */
    transition-property: height, max-height;
    transition-delay: 1.5s;
    transition-duration: .15s;
    transition-timing-function: linear;
}

#System-Nav-Menu img {
    max-height: 2rem;
}
#System-Nav-Menu:hover img {
    max-height: 2.5rem;
}

.system_menu_clicked {
    z-index: 1051; /* Bootstrap's modal background is z-index: 1040 */

    /* height: 5.5rem; */
    max-height: 10rem;

    /* NOTE: transition when hover starts */
    transition-property: height;
    transition-delay: 0s;
    transition-duration: .15s;
    transition-timing-function: linear;
}


.system_menu_begin {
    /*border: solid thin red;*/
    align-self: flex-end;

    display: flex;
    /*align-content: center;*/
    align-items: center;
    /*justify-content: center;*/

    height: 100%;
    padding: 0 .25rem;
}
.system_menu_begin:hover {
}

.system_menu_center {
    align-self: flex-end;
    flex: auto;

    display: flex;
    flex-direction: column;
}

.system_menu_end {
    align-self: flex-end;

    display: flex;
    /*align-content: center;*/
    align-items: center;
    /*justify-content: center;*/

    height: 100%;
    padding: 0 .25rem;
}
.system_menu_end:hover {
}

.system_menu_hidden {
    align-self: flex-end;
    flex: auto;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin: 0;
    padding: .1rem .75rem;
}
.system_menu_hidden:hover {
}

.system_menu_visible {
    align-self: flex-end;
    flex: auto;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin: 0;
    padding: .1rem .75rem;
}
.system_menu_visible:hover {
}

.system_menu_name {
    /*flex: auto;*/

    display: flex;
    flex-direction: row;
    justify-content: flex-begin;
    align-items: center;

    margin: 0;
    padding: 0rem .5rem;
}

.system_menu_name img {
    max-height: 1rem;
}

.system_menu_information {
    /*border: dashed thin green;*/
    /*flex: auto;*/
    align-self: flex-end;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    margin: 0;
    padding: 0rem .5rem;
}
.system_menu_information:hover {
}

/* Set style based on the user's permissions */
.system_menu.user_super {
}

.system_menu.user_manager {
}

.system_menu.user_administrator {
}

.system_menu.user_verified {
}

.system_menu.user_authenticated {
}

.system_menu .user_status_options {
}
/* *** END *** System *** System Menu (root menu) *** */


/* *** BEGIN *** System *** System Menu Floating/Fixed (root menu) *** */
#System-Nav-Menu-Float {
    z-index: 1040;
    position: fixed;
    top: .1rem;
    right: .1rem;

    padding: .1rem .5rem;
}
/* *** END *** System *** System Menu Floating/Fixed (root menu) *** */


#Site-Header {
    position: relative;

    max-height: 10vh;

    margin: 0;
    padding: .25rem;

    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    align-content: center;

    /* overflow: hidden; */
}

#Site-Header img {
    /* max-height: 4rem; */
}


/* *** BEGIN *** System *** System Site Nav Menu *** */
#Site-Nav-Menu {
    position: sticky;
    top: 2.25rem;

    height: 3.0rem;
    max-height: 3.0rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* flex-start */
    align-items: center;
    /* align-content: center; */
}

#Site-Nav-Menu ul {
    width: 100%;

    list-style-type: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* flex-start */
    /* align-items: center; */
    /* align-content: center; */
}

#Site-Nav-Menu ul>li {
    display: flex; /* inline */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

    margin: .1rem .5rem;
    padding: .2rem .4rem;
}

#Site-Nav-Menu ul>li:hover {
}

#Site-Nav-Menu ul>li.nav_disabled {
}
#Site-Nav-Menu ul>li.nav_active {
}
#Site-Nav-Menu ul>li.nav_primary {
}

#Site-Nav-Menu .btn {
}
/* *** END *** System *** System Site Nav Menu *** */

#System-Notifications {
}


#Main-Body {
    contain: content;
    padding: .5rem .1rem;

    min-height: 90vh;

    /*max-height: 100%;*/
}

#Main-Notifications {
}


/* *** BEGIN *** System *** System Site Nav Menu *** */
#Main-Nav-Menu {
    contain: content;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    /*justify-content: flex-start;*/ /* flex-start */
    /*align-items: center;*/
    /*align-content: center;*/
}

#Main-Nav-Menu .m_btn {
    appearance: button;

    height: auto;
    width: auto;

    inline-size: auto;

    margin: .1rem .5rem;
    padding: .2rem .4rem;
}

#Main-Nav-Menu .m_btn:hover {
}
/* *** END *** System *** System Main Nav Menu *** */

#Main-Content {
    contain: content;

    /*max-height: 100%;
    min-height: 100vh;
    max-height: 100vh;*/

    overflow: auto;

    padding: .75rem;
}


/* *** BEGIN *** System *** Site Footer *** */
/* site_footer or site_footer or site_status is the global (root) footer or status bar */
#Site-Footer {
    max-height: 1.75rem;

    /* width: 100%;
    max-width: 1440px; */

    margin: 0 0;
    padding: 0 .5rem;
}

#Site-Footer:hover {
}

.site_footer .footer_left {
    float: left;
}
.site_footer .footer_right {
    float: right;
}
/* *** END *** System *** Site Footer *** */



/* *** BEGIN *** System *** System Footer *** */
/* system_footer or system_footer or system_status is the global (root) footer or status bar */
#System-Footer {
    z-index: 1040; /* Bootstrap's modal background is also z-index: 1040 */

    max-height: 1.5rem;

    width: 100%;
    max-width: 1440px;

    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw;
    max-width: 1440px;

    /* margin: auto; */
    padding: 0 .5rem;
}

#System-Footer:hover {
}

.system_footer .footer_left {
    float: left;
}
.system_footer .footer_right {
    float: right;
}
/* *** END *** System *** System Footer *** */


/* *** BEGIN *** System *** Debug *** */
#hidden_system_debug {
    display: none;
}

#System-Debug {
    z-index: 1050; /* Bootstrap 4 sticky-top class has a z-index of 1020 */
    position: fixed;
    /* top: 1rem; */
    right: 0rem;
    /* left: 0rem; */
    bottom: 1.5rem;

    margin: 0rem;
    padding: .1rem;

    overflow: hidden;

    height: 100%;
    max-height: 2rem;
    width: 50%;
    max-width: 2rem;

    /* NOTE: transition when hover ends */
    transition-property: height, max-height, width, max-width;
    transition-delay: 4s; /* short delay */
    transition-duration: .15s;
    transition-timing-function: linear;
}

#System-Debug:hover {
    z-index: 1051;

    overflow-y: auto;

    max-height: calc(100vh - 5rem);
    max-width: calc(100vh - 2rem);

    /* NOTE: transition when hover starts */
    transition-property: height, max-height, width, max-width, opacity;
    transition-delay: .5s; /* min delay */
    transition-duration: .15s;
    transition-timing-function: linear;
}

.view_system_debug {
}
/* *** END *** System *** Debug *** */


/*x-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
    body {
        padding-left: .1rem;
        padding-right: .1rem;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
    body {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}





/* #System-Nav-Menu { outline: dashed thin red; } */
/* #Site-Header { outline: dashed thin red; } */
/* #Site-Nav-Menu { outline: dashed thin pink; } */
/* #System-Notifications { outline: dashed thin red; } */
/*#Main-Body { outline: dotted thin green; }*/
/*#Main-Notifications { outline: dotted thin blue; }*/
/*#Main-Nav-Menu { outline: dotted thin blue; }*/
/*#Main-Content { outline: dotted thin blue; }*/
/* #Site-Footer { outline: dotted thin blue; } */
/* #System-Footer { outline: dashed thin red; } */
/* #System-Debug { outline: dashed thin red; } */

#System-Nav-Menu { display: none; }
 #Site-Header { display: none; }
#Site-Nav-Menu { display: none; }
#System-Notifications { display: none; }
/* #Main-Body { display: none; } */
/* #Main-Notifications { display: none; } */
/* #Main-Nav-Menu { display: none; } */
/* #Main-Content { display: none; } */
#Site-Footer { display: none; }
#System-Footer { display: none; }
#System-Debug { display: none; }