*{margin:0px; padding:0px;}
body {font-family:Arial, Helvetica, sans-serif;font-size: 12px;color: #333;background-color: #e0e0e0;}
table,input,select,textarea{font-size: 12px;}
input,textarea,select{border: 1px #ccccdd solid;padding: 0px 3px;color: #000; border-radius: 2px;}
input,select{height: 20px;line-height: 20px;}
select{padding: 0px;}
textarea{font-family:Arial, Helvetica, sans-serif;font-size: 12px;padding: 3px; resize: none;}
input:hover, select:hover, textarea:hover{border-color: #9FA6B2}
input:focus, select:focus, textarea:focus{outline: none !important; border-color: #536DFE; box-shadow: 0 0 3px #8C9EFF;}
input[readonly],input:disabled,select:disabled,textarea:disabled{background-color: #f5f5f5;color: #333;border-color: #ccccdd;}
input.input-large, select.select-large{height: 24px; line-height: 24px;font-size: 14px;padding: 0px 4px;}
input[db=number],input[format=currency],input[format=number]{text-align: right;}
input[type=radio],input[type=checkbox]{ vertical-align:middle; padding: 0px;}
label{vertical-align:middle;}

h1, h2, h4, h5, h6{font-weight:normal;}
img{max-width:100%; height:auto; border-collapse: collapse;}
div{overflow:hidden;}
li, ul {padding: 0px; margin: 0px;}
a{text-decoration:none; color:#0d47a1;}
a:hover, a.active, a:focus{text-decoration:none;color:#0d47a1;}

/* General settings*/

.floatleft{float:left;}
.floatcenter{display:block; margin:0px auto;}
.floatright{float:right;}
.clearleft{clear:left;}
.clearright{clear:right;}
.upper{text-transform:uppercase;}
.lower{text-transform:lowercase;}
.initcap{text-transform:capitalize;}
.leftalign{text-align:left;}
.rightalign{text-align:right;}
.centeralign{text-align:center;}
.hide{display:none;}
.vert-scroll{height:100%;overflow-y: auto;}
.horz-scroll{width:100%;overflow-x: auto;}
.inline-block{display: inline-block;}
.vert-top{vertical-align: top;}
.img-contain{object-fit: contain;}
.img-cover{object-fit: cover;}
.img-fill{object-fit: fill;}

/*line border*/
.lline {border-left: 1px #9FA6B2 solid;}
.rline {border-right:  1px #9FA6B2 solid;}
.tline {border-top: 1px #9FA6B2 solid;}
.bline {border-bottom: 1px #9FA6B2 solid;}
.box {border: 1px #9FA6B2 solid;}


/* text decoration*/
.title{ position: relative; overflow: hidden; font-size: 14px; color:#00008b;font-weight: bold;letter-spacing: 2px; cursor: default;}
.title:first-letter{ letter-spacing: 2px;font-size: 16px;}
.title:after{position: absolute; content: "";width :100%;top: 14px;margin-left: 0px; border-bottom: 1px #9FA6B2 solid;}

    
.warning{color:#D50000; font-weight: bold;}
.error{background-color:#D50000; color: #fff; font-size: 13px; line-height: 15px; font-weight: bold;text-align: center;}

.blinking{animation:blinkingText 1s infinite;font-style: italic;}
@keyframes blinkingText{0%{color: #000;} 33%{color: #000;} 66%{ color: transparent;} 100%{ color: transparent;};}

/*Layout Plan*/
#body-wrapper{height:100%;width:100%;} 
#left-area{width: 180px;height:100%;float:left;padding:5px;background:linear-gradient(180deg,#414141,#332D2D);}
#right-area{height:100%;}
#header-area{height:22px;line-height:22px;width:100%;overflow: visible;background:linear-gradient(180deg,#484848,#332D2D);}
#header-branch{display: inline-block;padding-left: 10px;letter-spacing: 3px;font-weight: bold; color: #84FFFF;}
#header-period{display: inline-block;padding-left: 5px;font-size: 11px;font-style: italic;color: #F4FF81;}

#header-menu{float: right; color:#e0e0e0;}
#header-menu li {line-height: 14px; display: inline-block;padding-left: 8px; padding-right: 8px; border-right: 1px solid #9FA6B2;}
#header-menu li img{height: 14px; vertical-align: top; padding-right: 4px;}
#header-menu li a{color: #e0e0e0;}
                               
#notify-count{position: absolute; margin-left: -8px; padding:0px 4px; border-radius: 50%; background-color:#D50000; color: #fff;}

#content-area{height:calc(100% - 48px);padding:5px 10px;overflow-y: auto;}
#footer-area{height:16px; line-height: 16px;color: #000;font-size: 10px;text-align: center;}
/* Acordian Menu */
#nav-menu {float: left; width: 180px;height:calc(100% - 64px);overflow-y: auto;}
#nav-menu li a{position: relative;display: block; height: 22px; line-height: 22px; padding-left: 14px; background-color: rgba(255,255,255,0.6); color: #000;font-weight:bold;border-bottom: 1px dotted rgba(255,255,255,0.7);}
#nav-menu li a img{position: absolute; padding-top: 1px;height: 100%;}
#nav-menu>li>a:first-letter{font-size: 13px;}
#nav-menu li a:hover{background-color: rgba(255,255,255,0.7);}

#nav-menu li ul {display: none;}

#nav-menu li ul li a{height: 20px; line-height: 20px; padding-left: 14px; background-color: rgba(255,255,255,0.1);color: #E0E0E0; font-weight:normal;border-bottom: none;}
#nav-menu li ul li a img{position: absolute;height:10px;margin-left: -12px;margin-top: 4px;}
#nav-menu li ul li a:hover{background-color: rgba(255,255,255,0.2);}

#nav-menu li ul li ul li a{height: 18px; line-height: 18px; padding-left: 18px; background-color: rgba(0,0,0,0.2); color: #ccc; border-bottom: none;}
#nav-menu li ul li a.active{color:#fff; background: linear-gradient(180deg,#FF9100,#FF6D00);}

#nav-menu>li>ul>li.has-ul>a{padding-left: 18px;border: none;background-color: rgba(255,255,255,0.4); color: #000;font-weight:bold;text-shadow: none;background-image: url('svgs/right.svg'); background-repeat: no-repeat;background-position: calc(100% - 4px) center;background-size: 14px 14px;border-bottom: 1px dotted rgba(255,255,255,0.3);}
#nav-menu>li>ul>li.has-ul>a.active,#nav-menu>li>ul>li.has-ul>a:hover{background-color: rgba(255,255,255,0.4);background-image: url('svgs/down.svg');  background-repeat: no-repeat;background-position: calc(100% - 4px) center; background-size: 14px 14px;}

/* Dropdown Menu */
.drop{position: relative;display: inline-block;overflow: visible;}
.drop-but{cursor: pointer;}
.drop-but-btn{height:24px;padding:2px 8px; margin-bottom: 1px;border: 1px #9FA6B2 outset;background: #e5e5e5;cursor: default;}
.drop-but-btn:after{content:'';margin-left:8px; margin-right:-8px;padding: 2px 8px; border-left: 1px #9FA6B2 dotted; background: url("svgs/down.svg") no-repeat center center; cursor: pointer;background-size: 14px 14px;}
.drop-body{display: none;position: absolute;background-color: #fff; right: 0px; width: 180px;border: 1px #9FA6B2 solid; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); background-clip: padding-box;z-index: 520;}
.drop-body a {position: relative;display: block;height: 32px; line-height: 32px; padding-left: 22px; color:#000;}
.drop-body a:hover{background-color: rgba(125,125,125,0.1);}
.drop-body a.separator{border-bottom: 1px #9FA6B2 dotted;}
.drop-body a img{position: absolute;height:12px;margin-left: -18px; margin-top: 10px;}
.drop-but-btn:hover{border: 1px #505050 solid;box-shadow: 0px 0px 4px rgba(0,0,0,0.5);}
.drop-but:disabled{box-shadow: none;}


.drop-body.dark{background:linear-gradient(180deg,#484848,#332D2D);border:none;}
.drop-body.dark a{color:#bdbdbd;}
.drop-body.dark a:hover{background-color: rgba(255,255,255,0.1);}

/* button */
.but{line-height:24px;padding:0px 8px;cursor: pointer;border: 1px #9FA6B2 outset;font-size: 13px; color:#000; border-radius: 3px; background-color: #eee;}
.but-img{line-height:24px;padding:0px 8px 0px 24px;cursor: pointer;border: 1px #9FA6B2 outset;font-size: 13px; color:#000; border-radius: 3px;background-repeat: no-repeat,repeat;background-position: 4px center; background-size: 14px; background-color: #eee;}
.but-icon{min-height:24px;min-width: 24px;cursor: pointer;border: 1px #9FA6B2 solid;background-color: #eee;background-repeat: no-repeat;background-position: center center; background-size:14px;vertical-align:bottom;}
.img-icon{width:10px;height:10px; padding: 3px 2px; background-color: #eee;cursor: pointer;border: 1px #9FA6B2 solid;vertical-align:bottom;}
.txt-icon-container{position: relative}
.txt-icon{border: none;position:absolute;height:11px; width: 10px; padding: 3px; object-fit: contain;  margin-top: 1px; margin-left: -17px;cursor: pointer;}
.but-icon.but-icon-small{height:18px;width:18px;padding: 4px}

.but:hover,.but-img:hover,.but-icon:hover,.img-icon:hover,.but:focus,.but-img:focus,.but-icon.active,.img-icon.active,.but.active,.but-img.active,.but-icon.active,.img-icon.active{border: 1px outset #505050; box-shadow: 0px 0px 4px rgba(0,0,0,0.5);}
.but:disabled,.but-img:disabled{border: 1px #404040 outset;opacity:.45; cursor: default;box-shadow: none;background-color: #e0e0e0;}    
.but-icon:disabled,.img-icon:disabled,.drop-but-btn:disabled,.drop-but-btn.after:disabled{border: 1px outset #404040;opacity:.45; cursor: default;background-color: #e0e0e0;}    
.txt-icon:hover{background-color: #e0e0e0;}
.txt-icon:disabled{opacity:.45; cursor: default;background-color: #e0e0e0;}

/*.but-group {margin-bottom: 10px;}*/
.but-group{padding: 0px;margin: 0px;overflow:visible;}
.but-group .but, .but-group .but-img,.but-group .but-icon,.but-group .img-icon{margin-right: -4px;border-radius: 0px;}
.but-group .but:last-child, .but-group .but-img:last-child {border-radius: 0px 3px 0px 0px;}
.but-group .but:first-child, .but-group .but-img:first-child {border-radius: 3px 0px 0px 0px;}

.icon-new{background-image: url("svgs/new.svg");}
.icon-edit{background-image: url("svgs/edit.svg");}
.icon-delete{background-image: url("svgs/delete.svg");}
.icon-cancel{background-image: url("svgs/cancel.svg");}
.icon-exit{background-image: url("svgs/exit.svg");}
.icon-save{background-image: url("svgs/save.svg");}
.icon-print{background-image: url("svgs/print.svg");}

.icon-addrec{background-image: url("svgs/add-row.svg");}
.icon-delrec{background-image: url("svgs/del-row.svg");}
.icon-nxtrec{background-image: url("svgs/right.svg");}
.icon-prvrec{background-image: url("svgs/left.svg");}


.icon-ok{background-image: url("svgs/ok.svg");}
.icon-reject{background-image: url("svgs/reject.svg");}
.icon-search{background-image: url("svgs/search.svg");}
.icon-refresh{background-image: url("svgs/refresh.svg");}
.icon-login{background-image:  url("svgs/login.svg");}
.icon-download{background-image:  url("svgs/download.svg");}


/* Pannel*/
.panel-body{margin: 5px auto;background-color: #eee;border: 1px #9FA6B2 solid;border-radius:3px;overflow: visible;}
.panel-body .panel-title{background-color: #f8f8f8;text-align: center;height:30px; line-height: 30px; color:#00008b; margin-top:-18px;margin-left: 10px; border-radius:4px; background:#eee; font-size: 14px;font-weight: bold;border: 1px #fff solid; font-size: 14px;font-weight: bold;box-shadow: 0px 0px 8px rgba(0,0,0,0.5);}
.panel-body .panel-content{padding:5px 10px;}

/*Column box*/
.column-box{background-color: #eee;border: 1px #9FA6B2 solid;border-radius:3px;}
.column-box.active{border-color: #333;}


/* Table for inout data*/
.tbl-form{border-spacing: 2px;color: #00008b;overflow: hidden;white-space: nowrap;}
.tbl-form label{color: #000;}
.tbl-form b{font-weight: normal;color:#8b0000;}
.tbl-form th{font-weight: normal;background-color: #e0e0e0;line-height: 18px; border-radius: 2px; border-bottom: 1px #9FA6B2 solid;border-top: 1px #FBFBFB solid; cursor: default;}
.tbl-form th:first-child{text-align: left;padding-left: 3px;}
.tbl-form input[type=text],input[type=password],select,textarea{width: 100%;}
.tbl-form .tiny-row td,.tiny-row th{height: 8px;line-height: 8px; font-size: 10px; font-weight: bold; overflow: hidden;}
.tbl-form .tiny-row output{color:#555;}
.tbl-form td.lbl{padding-right: 5px;text-align: right; cursor: default;}
.tbl-form tbody:not(:only-child) tr:focus-within input,.tbl-form tbody:not(:only-child) tr:focus-within select,.tbl-form tbody:not(:only-child) tr:focus-within textArea{box-shadow: 0 1px 1px rgba(0,0,0,0.35);}

/* Table grid*/
.tbl-grid{border:1px #9FA6B2 inset;border-spacing: 0px; border-collapse: collapse;}
.tbl-grid tr{border-bottom: 1px #9FA6B2 dotted;height: 20px; line-height: 20px;}
.tbl-grid th{padding: 0px 3px;background-color:#e0e0e0;text-align: center;border-right: 1px #9FA6B2 solid;font-weight: normal;color: #00008b;}
.tbl-grid th b{font-weight: normal;color:#8b0000;}
.tbl-grid th:first-child{text-align: left;}
.tbl-grid td{padding: 0px 3px; border-right:1px #9FA6B2 dotted;}
.tbl-grid tr:last-child,.tbl-grid td:last-child{border: none;}

/* Selction display-Table Grid*/
.tbl-selgrid{display: table;table-layout: fixed; border-left: 1px #9FA6B2 solid; border-right:1px #9FA6B2 solid;}
.tbl-selgrid .gbody{display: table-row-group;}
.tbl-selgrid .gr{display: table-row;height: 20px;line-height: 20px;cursor: pointer;background-color: #fcfcfc;}
.tbl-selgrid .gr:hover,.tbl-selgrid .gr:focus{background:linear-gradient(180deg,#EEEEFF,#CCCCFF);}
.tbl-selgrid .gr.active,.tbl-selgrid .gr.active:hover {background:linear-gradient(180deg,#FFEEEE,#FFCCCC);}
.tbl-selgrid .gh{display: table-cell; font-weight: bold;padding: 0px 3px;text-align: center;border-right:1px #9FA6B2 dotted;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: default;}
.tbl-selgrid .gd{display: table-cell; padding:0px 3px; border-right:1px #e0e0e0 dotted; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tbl-selgrid .gh:first-child{text-align: left;}
.tbl-selgrid .gh:last-child, .tbl-selgrid .gd:last-child{border-right:none;}
.tbl-selgrid .gr:first-child{border: none;}
.tbl-selgrid .hide{display: none;}

/* table fix*/
.tbl-fix{table-layout: fixed;}
.tbl-fix td,.tbl-fix th{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}


/*Modal content */
.modal-overlay{display: none;margin: 0px;position: absolute;top: 0;left: 0;z-index: 500;width: calc(100% - 190px);height: 100%;padding-left:190px;}
.modal-overlay .modal-box {background-color: #f5f5f5; position: relative;z-index: 510; margin: 23px auto; border-radius: 2px; border: 1px #9FA6B2 solid; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);background-clip: padding-box;}
.modal-overlay .modal-box .modal-head{background: linear-gradient(90deg,#9FA6B2,#f5f5f5);height: 22px;width: 100%;}
.modal-overlay .modal-box .modal-head.dark{background:linear-gradient(180deg,#484848,#332D2D);}

.modal-overlay .modal-box .modal-head .modal-title{line-height: 22px;cursor:default;color:#00008b;font-weight:bold;text-align: center;letter-spacing: 2px; background: no-repeat; background-size: 16px;background-position: 2px center;}
.modal-overlay .modal-box .modal-head .modal-close {line-height: 22px; float:right;color: #000;font-size: 18px; padding: 0px 4px;cursor: pointer;}
.modal-overlay .modal-box .modal-head .modal-close:hover{background-color: #cc0000;color:#fff;}
#lov-title{background-image: url("svgs/lov.svg");}

.modal-overlay .modal-box .modal-head .modal-close.dark {color: #fff;}
.modal-overlay .modal-box .modal-head .modal-close.dark:hover{background-color: #cc0000;color:#fff;}
.modal-overlay .modal-box .modal-content{padding: 5px 10px;overflow-y: auto;max-height: 93%;}

/*loader spiiner */
.spin-overlay{display: none;position: absolute;top: 250px;left: 190px;width: calc(100% - 190px);z-index: 510;}
.spin-overlay .spin-box{border: 11px solid #e0e0e0;border-top: 11px solid #4285F4;border-bottom: 11px solid #4285F4;border-radius: 50%; width:70px; height: 70px; margin: 0px auto;animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); ;} 100% { transform: rotate(360deg); ;};}

/*Modal alert/prompt/confirm */
.modal-overlay .modal-box .alert-content{background-color: #f5f5f5;overflow-y: auto; max-height: 93%;padding: 20px 10px;font-size: 12px;font-weight: bold;}
.modal-overlay .modal-box .alert-butarea{background: linear-gradient(90deg,#e0e0e0,#f5f5f5); padding: 10px;}
.modal-overlay .alert-title{line-height: 20px; padding-left: 30px;font-style: italic; background: no-repeat; background-size: 18px 18px;}
#icon-alert{background-image: url("svgs/alert.svg");}
#icon-prompt{background-image: url("svgs/dialog.svg");}
#icon-confirm{background-image: url("svgs/hint.svg");}

.popup-box {display: none;position: absolute;top: 1px;left: 190px;width: calc(100% - 192px);border: 1px #9FA6B2 solid; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);z-index: 520;}
.popup-box .popup-content{line-height: 24px;text-align: center; font-size: 13px; color: #000; font-weight: bold;}
.popup-box span{display: inline-block; background-repeat:no-repeat; margin-bottom: 3px; width: 18px; height: 18px; vertical-align: bottom; margin-right: 5px;}
.popup-box.err{background:linear-gradient(180deg,#ffcdd2,#EF9A9A);border-color: #F44336;}
.popup-box.msg{background:linear-gradient(180deg,#C8E6C9,#A5D6A7);border-color: #4CAF50;}
#icon-err{background-image: url("svgs/stop.svg");}
#icon-msg{background-image: url("svgs/info.svg");}

/*Tab pannel tab.js*/
.tab-wrapper>ul>li {height: 22px; line-height: 22px;cursor: pointer;float: left;display: inline-block;font-size: 13px; color:#000; margin-bottom: -2px; font-style: italic; background: linear-gradient(180deg,#e0e0e0,#ddd); padding: 0px 10px;border: 1px #9FA6B2 outset;border-top-right-radius: 6px;}
.tab-wrapper>ul>li:hover{background:#eee;}
.tab-wrapper>ul>li.active{ background:#eee;border-bottom: none;cursor: default;}
.tab-wrapper .tab-div{border: 1px #9FA6B2 outset;padding: 5px; width: calc(100% - 15px); height: calc(100% - 37px);background-clip:padding-box;}

/* frm.js */
.frmfoot{margin: 0px; color:#555;font-size: 10px; font-weight: bold;border-top: 1px #ccc solid;}
.frmfoot .frmfoot-left{height:14px;width:25%;border-right: 1px #ccc solid;float:left;padding-left:4px;overflow:hidden;}
.frmfoot .frmfoot-middle{height:14px;border-right: 1px #ccc solid;;padding-left:4px;overflow: hidden;}
.frmfoot .frmfoot-right{height:14px;width:15%;float:right;padding-left:4px;overflow: hidden;}

.sort-but{position: relative;cursor: pointer;}
.sort-but:first-letter{text-decoration: underline;}
.sort-but[order='asc']:after{position: absolute;right: 0px; content: ' ';width: 10px;  height: 100%; background:url('svgs/up.svg') no-repeat; background-size: 10px; background-position:center;}
.sort-but[order='des']:after{position: absolute;right: 0px; content: ' ';width: 10px;  height: 100%; background:url('svgs/down.svg') no-repeat; background-size: 10px;background-position:center;}