*{ padding: 0px; margin:0px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;  }
:root 
{
    --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:#122643;
    --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; }

#overlay{ position: absolute; z-index: 4; background-color: var(--overlay-bgc); top:0px; right: 0px; width: 100dvw; height: 100dvh; }
#app-menu{ position: absolute; z-index: 3; background-color: var(--menu-bgc);  top:40px; height: calc(100dvh - 40px); width:60vw;   }
#menu-overlay{ position: absolute; z-index: 2; background-color: var(--overlay-bgc); top:40px; right: 0px; width: 100dvw; height: calc(100dvh - 40px); opacity: 0.5; }
#btn-clear{ position: absolute; z-index: 1; bottom: 60px; right: 15px; width: var(--clr-btn-size); height: var(--clr-btn-size); border-radius: 50%; }
#app-wrapper{ position: absolute; z-index: 0; top:0px; right: 0px; width: 100vdw; height: 100dvh;   }

#modal-yes-no{ width:80%; min-height: 150px; display: grid; grid-template-rows: 40px auto 40px; overflow: hidden; background-color: var(--modal-bgc); display: none;  }
#modal-yes-no>.header{ display: grid; grid-template-columns: auto 40px; background-color: var(--modal-head-bgc); padding:10px; border-bottom: solid 1px var(--modal-border); color:var(--modal-head-fclr); }
#modal-yes-no>.header .btn-close:hover{ background-color: var(--close-hover-bgc); cursor: pointer; }
#modal-yes-no>.body{ min-height: 100px; overflow: auto; padding: 10px; }
#modal-yes-no>.footer{ background-color: var(--modal-foot-bgc); padding: 10px; border-top: solid 1px var(--modal-border); }
#modal-yes-no>.footer>.btn-yes, #modal-yes-no>.footer>.btn-no{ padding: 5px 10px; min-width: 60px; background-color: var(--modal-head-bgc); color:var(--modal-head-fclr); border:none; }
#modal-yes-no>.footer>.btn-yes:hover, #modal-yes-no>.footer>.btn-no:hover{ cursor: pointer; }

#modal-ok{ width:90%; min-height: 150px; display: grid; grid-template-rows: 40px auto 40px; overflow: hidden; background-color: var(--modal-bgc); display: none; }
#modal-ok>.header{ display: grid; grid-template-columns: auto 40px; background-color: var(--modal-head-bgc); padding: 10px; border-bottom: solid 1px var(--modal-border); color:var(--modal-head-fclr); text-transform: capitalize; }
#modal-ok>.header .btn-close:hover{ background-color: var(--close-hover-bgc); cursor: pointer; }
#modal-ok>.body{ min-height: 100px; overflow: auto; padding: 10px; max-height: 70dvh; }
#modal-ok>.footer{ background-color: var(--modal-foot-bgc); padding: 10px; border-top: solid 1px var(--modal-border); }
#modal-ok>.footer>.btn-ok{ padding: 5px 10px; min-width: 60px; background-color: var(--modal-head-bgc); color:var(--modal-head-fclr); border:none; }
#modal-ok>.footer>.btn-ok:hover{ cursor: pointer; }

#app-menu a{ display: grid; grid-template-columns: 40px auto; padding: 15px 10px; color: #fff; border-bottom: solid 1px #052657; text-decoration: none; }
#app-menu a i{ display: flex; flex-direction: column;  justify-content: center; align-items: center; font-size: 13px; }
#app-menu a span{ display: flex; flex-direction: column;  justify-content: center; align-items: left; font-size: 13px; }

#app-wrapper{ width: 100vw; height: 100dvh; display: grid; grid-template-rows: 40px auto 5px; position: absolute; top: 0px; left: 0px; } 
#app-header { background-color: var(--app-head-bgc); display: grid; grid-template-columns: 40px auto 150px; padding: 10px;  }
#app-header #app-menu-btn, #app-header #app-setting{  color:#fff;   }
#app-header #app-menu-btn, #app-header #app-setting span{  text-transform: capitalize;   }
#app-header #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; }
#app-page{ height: 100%; }

#page-content{ display: grid; grid-template-rows: 40px auto 20px; overflow: auto; height: 100%; }
#page-content-header{ display: grid; grid-template-columns: auto auto; border-bottom: solid 1px var(--page-head-border); background-color: var(--page-head-bgc); }
#page-content-header #page-content-title{ padding: 5px 10px; }
#page-content-header #page-content-btn-list{ padding: 5px 10px; }
#page-content-header #page-content-btn-list [type="button"], #page-content-btn-list [type="submit"]{ padding: 5px 10px; min-width: 70px; }
#page-content-header #page-content-btn-list [type="text"] { padding: 5px; min-width: 70px;  }
#page-content-header #page-content-btn-list .small[type="text"]:focus{ border:solid 1px #f00; outline: none;  }
#page-content-header #page-content-btn-list .small[type="text"] { max-width: 100px;  }
#page-content-header #page-content-btn-list select { padding: 5px; min-width: 70px;  }
#page-content-btn-list button{ padding: 5px; }
#page-content-body{ overflow: auto; position: relative; }
#page-content-body #cmd-result-btn-clr{ position: absolute; bottom: 20px; right:20px; z-index: 2; width:45px; height:45px; border-radius: 50%; background-color: var(--page-head-bgc); border: solid 1px var(--page-head-border); color:var(--app-head-bgc); opacity: 0.7; }
#page-content-body #cmd-result-btn-clr:hover{ cursor: pointer; }
#page-content-footer{ border-top: solid 0px var(--page-foot-border); display: grid; grid-template-rows: 30px 35px; }

#page-content-form{ height: 100%; padding: 10px; overflow: auto; }
#page-content-form .field{ margin-bottom: 15px; position: relative; }
#page-content-form .field label{ font-size: 12px; padding-bottom: 2px; padding-left: 3px; display: block; }
#page-content-form .field input[type="text"], #page-content-form .field input[type="password"]{ border: none; border:solid 1px var(--input-border);  padding: 5px; width: 100%;  }
#page-content-form .field input[type="text"]:focus, #page-content-form .field input[type="password"]:focus{ outline: none; border-color:var(--input-focus-border);  }
#page-content-form .field select{ border: none; border:solid 1px var(--input-border);  padding: 5px; width: 100%;  }
#page-content-form .field select:focus{ outline: none; border-color:var(--input-focus-border);  }
#page-content-form .field textarea{ border: none; border:solid 1px var(--input-border);  padding: 5px; width: 100%; min-width: 100%; max-width: 100%;  }
#page-content-form .field textarea:focus{ outline: none; border-color:var(--input-focus-border);  }
#page-content-form .field input[type="submit"]{ border: none; border:solid 1px var(--input-border); padding: 10px; width: 100%; margin-top: 15px; }
#page-content-form .field input[type="submit"]:hover{ cursor: pointer; } 
#page-content-form .field .showPass{ position: absolute; right: 0px; top: 14px; width: 30px; height: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #838383; font-size: 13px; }


#page-content-grid{ margin: 10px auto 20px auto; width: calc(100% - 20px); overflow: auto; border: solid 1px #d7d7d7; min-height: 200px; }
#page-content-grid .table{ min-width:100%; border-collapse:collapse; font-size: 14px;  }
#page-content-grid .table tbody{ border-top: solid 1px #d7d7d7; }
#page-content-grid .table tr{ border-top: solid 1px #d7d7d7;  border-bottom: solid 1px #d7d7d7; }
#page-content-grid .table tr:last-child{ border-bottom: none; } 
#page-content-grid .table tr:first-child{ border-top: none; } 
#page-content-grid .table tr td{ border: solid 1px #e7e7e7; padding: 4px 8px; color:var(--prime-light); }
#page-content-grid .table tr:nth-child(2n-1){ background-color: #F9F9F9; }
#page-content-grid .table tr th{  border: solid 1px var(--tbl-head-brd); background-color: var(--tbl-head-bgc); padding:10px 8px; font-weight: normal; text-align: left; color:#fff; }
#page-content-grid .table tr th>a{ text-decoration: none; color: inherit; }
#page-content-grid .table tr th>a:hover{ text-decoration:underline; }
#page-content-grid .table tr td a.action-btn{ margin-right: 2px; display: inline-block; color:inherit; text-decoration: none; padding:2px 5px; text-transform: capitalize; min-width: 30px; text-align: center; }
#page-content-grid .table tr td a.action-btn:hover{ background-color: #e7e7e7; cursor: pointer; border: solid 1px var(--modal-border); }
#page-content-grid .table tr td a.action i{ font-size: 12px; }

#user-right-list-header{  background-color: var(--modal-head-bgc); color: var(--modal-head-fclr); padding: 10px; }
#user-right-list-body{  overflow: auto; border: solid 1px var(--modal-head-bgc); min-height: 200px; }
#user-right-list-body .table{ min-width:100%; border-collapse:collapse; font-size: 14px;  }
#user-right-list-body .table tbody{ border-top: solid 1px #d7d7d7; }
#user-right-list-body .table tr{ border-top: solid 1px #d7d7d7;  border-bottom: solid 1px #d7d7d7; }
#user-right-list-body .table tr:last-child{  } 
#user-right-list-body .table tr:first-child{ border-top: none; } 
#user-right-list-body .table tr td{ border: solid 0px #e7e7e7; padding: 4px 8px; color:var(--prime-light); }
#user-right-list-body .table tr:nth-child(2n-1){ background-color: #F9F9F9; }
#user-right-list-body .table tr th{  border: solid 1px var(--tbl-head-brd); background-color: var(--tbl-head-bgc); padding:10px 8px; font-weight: normal; text-align: left; color:#fff; }
#user-right-list-body .table tr th>a{ text-decoration: none; color: inherit; }
#user-right-list-body .table tr th>a:hover{ text-decoration:underline; }
#user-right-list-body .table tr td a.action-btn{ margin-right: 2px; display: inline-block; color:inherit; text-decoration: none; padding:2px 5px; text-transform: capitalize; min-width: 30px; text-align: center; }
#user-right-list-body .table tr td a.action-btn:hover{ background-color: #e7e7e7; cursor: pointer; border: solid 1px var(--modal-border); }
#user-right-list-body .table tr td a.action i{ font-size: 12px; }


#cmd-result{ overflow: auto; height: 100%; }
.control{ padding: 5px; }
.fieldbottom{ display: grid; grid-template-columns: 60% 40%; height: 100%; }
.fieldbottom input[type="text"]{ border: none; border:solid 1px #c3c3c3;  padding: 5px; text-transform: uppercase; }
.fieldbottom input[type="text"]:focus{ outline: none; border-color:#f00;  }
.fieldbottom input[type="submit"]{ border: none; border:solid 1px #c3c3c3; border-left: none; padding: 5px; }
.fieldbottom input[type="submit"]:hover{ cursor: pointer; }
.fieldbottom button{ border: none; border:solid 1px #c3c3c3; border-left: none; padding: 5px; }
.fieldbottom button:hover{ cursor: pointer; }

.msgbox { border: solid 1px #d5d5d5; background-color: #fff; margin: 10px; border-radius: 8px; overflow: hidden; }
.msgbox .msgheader{ border-bottom: solid 1px #c9c9c9; display: grid; grid-template-columns: 6fr 6fr; background-color: #d9d9d9; border-radius: 8px 8px 0px 0px; }
.msgbox .msgheader .head1{ padding: 10px 15px; font-size: 14px; text-align: left; }
.msgbox .msgheader .head2{ padding: 10px 15px; font-size: 14px; text-align: right; }
.msgbox .msgcontent{ padding: 15px; position: relative; }
.msgbox .msgfooter{ border-bottom: solid 1px #c9c9c9;  background-color: #d9d9d9; border-radius: 0px 0px 8px 8px; padding: 10px; text-align: left; font-size: 13px; }

.msgbox .gridbox{ width: 100%; overflow: auto; border: solid 1px #d7d7d7; min-height: 100px;  max-height: 350px; }
.msgbox .table{ min-width:100%; border-collapse:collapse; font-size: 14px; border: solid 1px #d7d7d7;  position: relative; }
.msgbox .table tbody{ border-top: solid 1px #d7d7d7; }
.msgbox .table tr{ border-top: solid 1px #d7d7d7;  border-bottom: solid 1px #d7d7d7; }
.msgbox .table tr:last-child{ border-bottom: none; } 
.msgbox .table tr:first-child{ border-top: none; } 
.msgbox .table tr th{  padding: 4px 8px; color:#fff; border: solid 1px var(--tbl-head-brd); background-color: var(--tbl-head-bgc); font-weight: normal; position: sticky; top:0px; }
.msgbox .table tr td{ border: solid 1px #e7e7e7; padding: 4px 8px; color:var(--prime-light);  }
.msgbox .table tr:nth-child(2n-1){ background-color: #F9F9F9; }

#app-login{ border: solid 1px #d5d5d5; background-color: #f5f5f5; min-height: 150px; width: 80vw; }
#app-login .header{ border-bottom: solid 0px #c9c9c9; padding:10px; }
#app-login .body{ padding:10px; }
#app-login .footer{ padding:10px; }

#app-login .body .field{ margin-bottom: 15px; position: relative; }
#app-login .body .field label{ font-size: 14px; padding-bottom: 8px; padding-left: 3px; display: block; }
#app-login .body .field input[type="text"], #app-login .body .field input[type="password"]{ border: none; border:solid 1px var(--input-border);  padding: 10px; width: 100%;  }
#app-login .body .field input[type="text"]:focus, #app-login .body .field input[type="password"]:focus{ outline: none; border-color:var(--input-focus-border);  }
#app-login .body .field select{ border: none; border:solid 1px var(--input-border);  padding: 5px; width: 100%;  }
#app-login .body .field select:focus{ outline: none; border-color:var(--input-focus-border);  }
#app-login .body .field textarea{ border: none; border:solid 1px var(--input-border);  padding: 5px; width: 100%; min-width: 100%; max-width: 100%;  }
#app-login .body .field textarea:focus{ outline: none; border-color:var(--input-focus-border);  }
#app-login .body .field input[type="submit"]{ border: none; border:solid 1px var(--input-border); padding: 10px; width: 100%; margin-top: 15px;background: #2d466b;color: white;  }
#app-login .body .field input[type="submit"]:hover{ cursor: pointer;background: #2d466b;color: white; } 
#app-login .body .field .showPass{ position: absolute; right: 0px; top: 27px; width: 30px; height: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #838383; font-size: 13px; }

#cmd-list-box{ position: absolute; bottom:10px; right: 10px; max-height: calc(100% - 30px); min-height: 50px; background-color: #fff; overflow: auto; width:calc(100vw - 20px); border: solid 1px #042555;  }
#cmd-list-box div.cmd-list-box-category-title { 
    background-color: #d3d3d3;
    padding: 9px 10px;
    border: solid 1px #797979;
    font-size: 16px;
    color: #3d3d3d;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
#cmd-list-box div.cmd-list-box-category-title i{ display: flex; align-content: center; justify-content: center; }
#cmd-list-box div.cmd-list-box-category-items { overflow: auto; }
#cmd-list-box div.cmd-list-box-category-items div{ padding: 10px; border-bottom: solid 1px #e7e7e7; font-size: 12px; display: grid; grid-template-columns: 3fr 2fr 5fr 2fr; gap: 10px;}
#cmd-list-box div.cmd-list-box-category-items div:nth-child(2n-1){ background-color: #F9F9F9; }
#cmd-list-box div.cmd-list-box-category-items span{ display: block; }

#cmd-list-box div.cmd-list-box-category-items>span{ border: solid 1px #d5d5d5; padding: 10px; text-align: center; background-color: var(--tbl-head-bgc); color:#fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px;  }
#cmd-list-box div.cmd-list-box-category-items>span:hover{ cursor: pointer; background-color: var(--tbl-head-brd); }

#cmd-list-box>span{ border: solid 1px #d5d5d5; padding: 10px; text-align: center; background-color: var(--tbl-head-bgc); color:#fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px;  }

#cmd-page-btn-show{ position: absolute; bottom: 20px; right:20px; z-index: 2; width:45px; height:45px; border-radius: 50%; background-color: var(--page-head-bgc); border: solid 1px var(--page-head-border); color:var(--app-head-bgc); opacity: 0.7; }
#cmd-page-btn-show:hover{ cursor: pointer; }

/* .popup{ --popup-bg:#fff; --popup-brd:#a5a5a5;  position: absolute; top:25px; z-index: 4; width: 100%; }
.popup .pointer{ position: relative; top:0px; text-align: right; }
.popup .pointer .arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--popup-brd);   }
.popup .popbody { min-width: 100px; min-height: 50px; background-color: var(--popup-bg); border: solid 1px var(--popup-brd); position: relative; right: 0px; } 
.popup .popbody ul{ list-style: none; }
.popup .popbody ul li{ padding: 5px 10px; border-bottom: solid 1px var(--popup-brd); }
.popup .popbody ul li:last-child{ border:none; }
.popup .popbody ul li:hover{ cursor: pointer; } */

.fav-btn{ height: 28px; padding: 2px 10px; border:solid 0px var(--menu-bgc); border-radius: 5px; font-size: 12px; color:#fff; background-color: var(--menu-bgc); }
.fav-btn:hover{ cursor: pointer; }

.pdfControll{ width: 25px;
    height: 25px;
    font-size: 22px;
}

select.pdfControll{ min-width: 80px; padding:2px 5px; font-size: 14px; border: solid 1px #b4b4b4; }

.pdfControll:hover{ cursor: pointer; }  

.grd2-20{ display: grid; grid-template-columns: 6fr 6fr; gap:10px; padding:10px; }

@media only screen and (min-width: 600px) 
{
    #modal-ok{ width:60%; }
}