*{ margin: 0px; padding: 0px; box-sizing: border-box; }
body { }
:root 
{
    --menu-height:40px;
    --menu-width:250px;
    --overlay-bgc: #1a1919;
    --modal-bgc:#f5f5f5;
    --modal-head-bgc: #2d466b;
    --modal-head-fclr: #fff;
    --modal-foot-bgc: #e9e9e9;
    --modal-border:#d5d5d5;
    --menu-bgc:#2d466b;
    --app-head-bgc:#7e190c;
    --close-hover-bgc:#f5f5f5;
    --clr-btn-size:30px;
    --page-head-border:#c1c0c0;
    --page-foot-border:#c1c0c0;
    --page-body-bgc:#f5f5f5;
    --page-head-bgc:#dbdbdb;
    --input-border:#d1d1d1;
    --input-focus-border:#8face1;
    --tbl-head-bgc:#2d466b;
    --tbl-head-brd:#20385c;
}
.flx-ctr{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.flx-left{ display: flex; flex-direction: row; justify-content: left; align-items: center; gap: 10px; }
.flx-right{ display: flex; flex-direction: row; justify-content: right; align-items: center; gap: 10px; }

.flx-ctr-s{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap:5px; }
.flx-left-s{ display: flex; flex-direction: row; justify-content: left; align-items: center; gap:5px; }
.flx-right-s{ display: flex; flex-direction: row; justify-content: right; align-items: center; gap:5px; }

#app-overlay{ position: absolute; z-index: 4; background-color: var(--overlay-bgc); top:0px; right: 0px; width: 100vw; height: 100vh; }
#app-menu{ position: absolute; z-index: 3; background-color: var(--menu-bgc);  top:var(--menu-height); height: calc(100vh - var(--menu-height)); width: var(--menu-width);   }
#app-menu-overlay{ position: absolute; z-index: 2; background-color: var(--overlay-bgc); top:40px; right: 0px; width: 100dvw; height: calc(100vh - 40px); opacity: 0.5; }

#app-wrapper{ position: absolute; z-index: 0; top:0px; right: 0px; width: 100vw; height: 100vh; display: grid; grid-template-rows: var(--menu-height) auto 40px;   }
#app-header { background-color: var(--app-head-bgc); display: grid; grid-template-columns: var(--menu-width) auto 150px; color:#fff;  }
#app-menu-btn { border-right: 1px solid #d5d5d5; }
#app-setting span{  text-transform: capitalize;   }
#app-menu-btn:hover, #app-header #app-setting i:hover{  cursor: pointer;   }
#app-header #app-name{ color:#fff; padding: 0px 5px; }
#app-footer{ background-color: var(--app-head-bgc); }

#app-body{ background-color: var(--page-body-bgc); height: 100%; overflow: hidden; position: relative; }
#app-page{ height: 100%; }