/* 
CSS File Last Update : 14 Sept 2023
Project: onescroll.com (Pandava Media)
Website Designed & Coded by: Aditama (pandavamedia.net)
*/
/*html { height: 100%; }*/
@charset "UTF-8";

html { -webkit-text-size-adjust: 100%; }
body {
	background-color:#EEEEEE;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.1px;
	-webkit-font-smoothing:antialiased;
	font-smooth:always;
	font-size:13px;
	font-weight:normal;
	color:#333333;
	margin:0;
	padding:0;
	height: 100%;
	width:100%;
}
#sysPageBody {
	background:url('../../i/bg-page.png');
	width:100%;
	/*border-top:5px #333333 solid;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:auto;
	background-attachment:fixed;*/
}
form { MARGIN-LEFT: 0px;MARGIN-RIGHT: 0px;MARGIN-BOTTOM: 0px;MARGIN-TOP: 0px }
td,div,p { font-size:13px;  color:#333333; line-height:18px; }
input[type=text],input[type=number],input[type=password],textarea,select { 
	font-family: 'Poppins', sans-serif;
	width:92.5%;
	font-size: 16px;
	color:#DDDDDD; 
	background-color:#999999; 
	line-height:18px; 
	height:25px;
	border:0;
	padding:5px 10px;
	-webkit-border-radius: 4px; 
	   -moz-border-radius: 4px; 
					border-radius: 4px;
}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,textarea:focus,select:focus { 
	color:#FFFFFF;
	background-color:#666666;
	/*-webkit-box-shadow: 0px 0px 2px #FFFF66;
		 -moz-box-shadow: 0px 0px 2px #FFFF66;
					box-shadow: 0px 0px 2px #FFFF66;*/
}
input[type=button],input[type=submit] { 
	font-family: 'Poppins', sans-serif; 
	cursor:pointer; 
	font-size:14px; 
	line-height:16px;
	padding:10px 15px;
	opacity:0.8;
	-webkit-appearance: none; /* keep button styling on ios device */
	-moz-appearance: none; /* keep button styling on ios device */
	appearance: none; /* keep button styling on ios device */
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
					border-radius: 5px;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
		 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
					box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
input[type=button]:hover,input[type=submit]:hover {
	opacity:1.0;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
		 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
					box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
input[type=text]:-moz-read-only,input[type=number]:-moz-read-only { /* For Firefox */ background-color:#DDDDDD; color:#999999; }
input[type=text]:read-only,input[type=number]:read-only { background-color:#DDDDDD; color:#999999; }
img, div, input, a { behavior: url("iepngfix.htc") }
ul,ol { list-style-position:outside; }
p { margin-bottom:12px; }

a { cursor:pointer; color:#009999; text-decoration:none; outline: 0; 
		-webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
}
a:visited { color:#009999; text-decoration:none; outline: 0; }
a:hover { color:#F44336; text-decoration:none; outline: 0; }

h1 { display:block; font-size:26px; color:#333333; line-height:28px; font-weight:normal; margin-bottom:15px; }
h2 { display:block; font-size:22px; color:#333333; line-height:24px; font-weight:normal; margin-bottom:10px; }
h3 { display:block; font-size:20px; color:#333333; line-height:20px; font-weight:normal; margin-bottom:8px; }
h4 { display:block; font-size:18px; color:#333333; line-height:19px; font-weight:normal; margin-bottom:5px; }
h5 { display:block; font-size:15px; color:#333333; line-height:17px; font-weight:normal; margin-bottom:5px; }

* {
    padding: 0;
    margin: 0;
}
section { position:relative; }

.addTopMargin10 { margin-top:10px; }
.addTopMargin15 { margin-top:15px; }
.addTopMargin20 { margin-top:20px; }
.addTopMargin30 { margin-top:30px; }
.addSideMargin5 { margin-left:5px; margin-right:5px; }
.markSrch { color:#000000; font-weight:bold; }
.loadingIcn { width:100%; text-align:center; }
.algnCenter { text-align:center; }

#byPandavamedia { font-size:11px; margin-top:5px; }
#byPandavamedia>a { color:#FF9900; }
#byPandavamedia>a:hover { color:#FFFFFF; }

.cYellow { color:#FFFF00; }
.cBlue { color:#0099FF; }
.cRed { color:#FF0000; }
.cOrange { color:#FF9900; }
.clr{ clear:both }
.topSpc { display:block; height:70px; }
.gapSpc { display:block; height:40px; }
.noBorder { border:0 !important; }
.dispBig { font-size:30px; color:#FF6600; font-weight:bold; }
.tooltipLoading { margin-top:60px; color:#000000; font-size:14px; }
.tooltipLoading a { background-color:#666666; padding:3px 10px; color:#FFFFFF; }
.tooltipLoading a:hover { background-color:#000000; color:#FFFFFF; }
.noRecord { padding:60px 10px; }
.noRecord>label { color:#999999; }
.goLeft { float:left; }
.goRight { float:right; }
.noResult { color:#CCCCCC; margin:50px 0px; }
.fldError { background-color:#ffcccc !important; color:#333333 !important; }
.imageInsert { margin:5px; }
.sepLn { padding:0px 5px; font-size:12px; color:#666666; }
.noscroll { overflow: hidden !important; }
.allCap { text-transform:uppercase !important; }


/* WEBSITE CUSTOM CSS */
/* ---------------------------------------------------------- */
#sysBodySection { display:block; padding-top:70px; padding-bottom:40px; }
.sysBodyWrapper { width:95%; margin:auto; min-height:76vh; }

/* MODAL */
.sysModal { display:none; z-index:20000; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); }
.sysModalBox { display:none; position:absolute; width:300px; height:150px; max-width:700px; max-height:540px; padding:5px; top:0; bottom:0; right:0; left:0; margin:auto; background:#FFFFFF; 
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
		 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
					box-shadow: 1px 1px 2px rgba(0,0,0,0.6);	
}
.sysModalClose { cursor:pointer; position:absolute; width:24px; height:24px; background:url('../../i/buttons/btn-closemodal.png') no-repeat center center; top:5px; right:5px; opacity:0.6; }
.sysModalClose:hover { opacity:1.0; }
.sysModalContent { display:block; width:100%; }
.sysModalHeader { padding:5px 5px 8px 5px; text-align:left; font-size:14px; font-weight:bold; text-transform: uppercase; }
.sysModalArea { position:absolute; overflow-y:auto; padding:10px 5px 10px 5px; top:35px; bottom:5px; left:5px; right:5px; background:#F1F1F1; border:1px #EEEEEE solid; border-top:2px #EEEEEE solid; }
.sysModalLoading { display:none; z-index:100; position:absolute; background:url('../../i/modal-loading.gif') no-repeat center center; width:40px; height:40px; top:0; bottom:0; left:0; right:0; margin:auto; }
.sysModalNoAccess { position:absolute; top:40%; left:0; right:0; }
.sysModalMsg { text-align:left; }
a.sysModalDoLnk { display:block; background:url('../../i/icons/icn-sync.png') no-repeat left center; padding-left:23px; }
a.sysModalDoOff { display:block; background:url('../../i/icons/icn-sync.png') no-repeat left center; padding-left:23px; opacity:0.3; }
.sysSyncLoading { display:none; margin-top:20px; background:url('../../i/sync-loading.gif') no-repeat center center; width:128px; height:30px; }
.sysSyncAlert { display:none; color:#CC0000; margin-top:10px;
			-webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
}
/* MODAL NO ACCESS */
.mdlNoAccess { z-index:100; position:fixed; display:flex; justify-content:center; align-items:center; left:0; right:0; top:0; bottom:0; margin:auto; background-color:rgba(255,255,255, 0.8); }
a.closeNoAccess { display:inline-block; position:absolute; top:-10px; right:-10px; width:20px; height:20px; background:#CC0000 url('../../i/icons/icn-close-sm-wh.png') no-repeat center; overflow:hidden; border-radius:50%; }
.noAccessBx { position:relative; padding:20px 20px 20px 100px; width:90%; max-width:450px; text-align:left; background:#FFFFFF url('../../i/noaccess.png') no-repeat 20px center; border:2px rgba(255,0,0, 0.4) dashed; border-radius:5px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }
.noAccessBx>h3 { color:#CC0000; font-weight:bold; }
.noAccessBx>label { display:block; }

/* LOGIN BOX */
.sysLoginBox { position:absolute; top:0; bottom:0; left:0; right:0; width:90%; max-width:280px; margin:auto; height:430px; }
.sysLoginBox.noConn { max-width:300px; }
.sysLoginBox.page404 { max-width:400px; }
.sysLoginLogo { margin-bottom:10px; }
.sysLoginLogo img { max-width:100%; }
.sysLoginArea { position:relative; padding:10px 0px; }
.sysLoginArea ul { list-style-type:none; }
.sysLoginArea ul>li { position:relative; margin-bottom:10px; }
.sysLoginArea ul>li>label { display:block; text-align:left; width:85%; font-size:14px; text-align:center; }
.sysLoginArea ul>li>input { background:#666666; color:#CCCCCC; text-align:center; width:91%; font-size:14px; }
.sysLoginArea ul>li>input:focus { background:#333333; color:#FFFFFF; }
.sysLoginArea ul>li>input[type=submit] { background:#fce9a7; color:#333333; width:auto; border:2px #FFFFFF solid; font-size:12px; letter-spacing:3px; padding:4px 20px 4px 25px; margin-top:5px; }
.sysLoginArea ul>li>input[type=submit]:hover { background:#fce38b; color:#FFFFFF; }
.sysLoginCopyright { font-size:11px; color:#999999; margin-top:10px; }
.sysLoginLoading { display:none; z-index:200; position:absolute; top:0; bottom:0; left:0; right:0; background:#F0F0F0 url('../../i/loading-login.gif') no-repeat center 40%; opacity:0.8; }
.sysLoginAlert { display:none; width:95%; background:#e0e7cc; color:#990000; opacity:0.7; padding:6px 3px 8px 3px; margin-bottom:10px; font-size:13px; line-height:14px;
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px; 
}
.sysLoginRedirecting { display:none; z-index:200; position:absolute; top:0; bottom:0; left:0; right:0; background:#F0F0F0 url('../../i/redirects-loading.gif') no-repeat center center; }
a.sysLoginBack { background:#DDDDDD; font-size:12px; padding:1px 10px; color:#FFFFFF; }
a.sysLoginBack:hover { background:#999999; }
.sysLoginBy { overflow:hidden; margin-top:30px; }
.sysLoginBy>label { display:inline-block; font-size:12px; color:#999999; padding:6px 6px 4px 6px; vertical-align:top; }
.productByLogo { display:inline-block; width:140px; vertical-align:top; }
.productByLogo img { max-width:100%; }
.sysLoginCity { color:#999999; }
.sysLoginContact { margin-top:1px; color:#CCCCCC; }
.sysLoginContact>label { font-size:14px; font-weight:bold; color:#FF9900; padding-right:2px; }
.sysLoginContact a { color:#333333; }

/* IMAGE FRAME */
.imgFrame { 
	z-index:1; 
	position:absolute; top:0; bottom:0; left:0; right:0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-repeat:no-repeat; background-position:center center; background-size:cover;
    /*opacity:0.85;*/
    transition: all 0.5s;
}
.imgFrame>a { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; }
.imgFrame img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.imgFrame.fittedImg img {
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

/* CONTENT */
.sysCntHead { position:relative; display:block; overflow:hidden; margin:13px 20px; text-align:left; }
.sysCntHead>h1.pageTtl { float:left; font-size:22px; line-height:24px; margin:auto; min-width:150px; white-space:nowrap; margin:11px 20px 5px 0px; }
.sysCntHead>h1.pageTtl.pageTtlFl { margin:5px 20px 0px 0px; line-height:20px; }
.sysCntHead>h1.pageTtl.pageTtlFl>label { display:block; font-size:11px; }
.sysCntBox { position:relative; display:block; background:#FFFFFF; text-align:left;
	padding:20px; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;	
}
.sysCntBoxHead { display:block; border-bottom:4px #CCCCCC solid; padding-bottom:6px; }
.sysCntBody { display:block; overflow:hidden; }

/* NOTIFICATION */
.sysNotif { position:relative; display:none; padding:17px; min-height:10px; background:#BFEFFF url('../../i/icons/icn-notif.png') no-repeat 15px 10px; text-align:left; }
.sysNotif.notifOn { display:block; }
.sysNotifClose { cursor:pointer; position:absolute; width:15px; height:15px; top:10px; right:10px; background:url('../../i/buttons/btn-notifoff.png') no-repeat 0px 0px; }
.sysNotifClose:hover { background-position:0px -25px; }
.sysNotifNote { color:#B20000; font-size:16px; margin-left:42px; }
.sysNotifNote>ul { display:block; margin-left:20px; margin-top:5px; font-size:14px; font-style:italic; }

/* FORM ENTRY */
.sysFrmLoading { display:none; z-index:100; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.9) url('../../i/frm-loading.gif') no-repeat center center; }
.sysFrmRedirect { display:none; z-index:100; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.9); }
.sysFrmRedirect>label { display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; padding:5px; width:160px; height:15px; background:#FFFFFF url('../../i/redirects-loading.gif') no-repeat center top; text-align:center; border:1px #EEEEEE solid; font-size:12px; line-height:14px; padding-top:25px; }
.sysFrmTarget { display:none; }
.sysEntry { float:left; width:65%; border-right:1px #CCCCCC solid; padding-right:4%; padding-top:30px; padding-bottom:30px; }
.sysEntry.sysTransaction { width:70%; padding-right:3%; }
.sysFrmGroup { position:relative; }
.sysFrmGroup>ul { list-style-type:none; margin:0; }
.sysFrmGroup>ul>li { margin-bottom:5px; }
.sysFrmGroup>ul>li>h3 { cursor:pointer; position:relative; font-size:18px; line-height:18px; letter-spacing:0.5px; color:#FFFFFF; background:#CCCCCC; padding:13px 15px 10px 15px; border-bottom:1px #DDDDDD solid; }
.sysFrmGroup>ul>li>h3.tabOn { color:#000000; }
a.btnArrTab { position:absolute; top:0; bottom:0; right:15px; margin:auto; width:26px; height:20px; background:url('../../i/buttons/btn-accrd-arrow.png') no-repeat 0px 0px; 
		-webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}
a.btnArrTab.collapseTab { background-position:0px -22px; }
a.btnArrTab.sysTrasc { right:5px; }
.sysFrmGroup>ul>li>h3:hover { background-color:#E6E6E6; color:#999999; }
.sysFrmGroup>ul>li>h3:hover>a.btnArrTab { background-position:-33px 0px; }
.sysFrmGroup>ul>li>h3:hover>a.btnArrTab.collapseTab { background-position:-33px -22px; }
.sysEntryBox { position:relative; display:none; margin:15px 0px 40px 0px; }
.sysEntryBox.infoRecord { display:block; border-bottom:2px #CCCCCC dashed; }
.sysEntryBox.entryShow { display:block; }
.sysEntryBox.trascStatusBox { background:#F1F1F1; margin-bottom:15px; }
.sysEntryBox.trascStatusBox input { width:93%; }
.sysEntryBox.trascStatusBox>ul>li { padding:5px 10px 8px 15px; }
.sysEntryBox.trascStatusBox.cancelStatus { background:rgba(255,0,0,0.1); border:1px #DDDDDD solid; color:#000000; }
.sysEntryBox.tabShow { display:block; }
.sysEntryBox.tabUpdate { display:block; margin-top:0px; margin-bottom:20px; }
.sysEntryBox ul { list-style-type:none; }
.sysEntryBox ul>li { position:relative; display:block; overflow:hidden; padding:10px 15px; border-bottom:1px #DDDDDD dashed; }
.sysEntryBox ul>li.entryImage { border:1px #DDDDDD solid; padding:5px; margin:20px 0; }
.sysImgBox { background:url('../../i/bg-imgbox.png'); position:relative; text-align:center; }
.sysImgBox img { max-width:100%; max-height:100%; margin:5px; }
a.sysDeleteImg { float:right; background:url('../../i/icons/icn-delete.png') no-repeat left center; padding:5px 2px 2px 18px; color:#FF0000; opacity:0.5; margin-right:10px; }
a.sysDeleteImg:hover { opacity:1.0; }
a.sysDownloadImg { float:right; background:url('../../i/icons/icn-download.png') no-repeat left center; padding:5px 2px 2px 25px; color:#FF0000; opacity:0.5; margin-right:10px; }
a.sysDownloadImg:hover { opacity:1.0; }
.sysEntryBox ul>li.imptEntry { background:#FFFAEB; }
.sysEntryBox ul>li.imptValue { padding:5px; background:#FFFAEB; }
.sysEntryBox ul>li.imptValue>.imptTtl { display:block; font-size:13px; color:#909090; }
.sysEntryBox ul>li.imptValue>.imptVal { display:block; font-weight:bold; }
.sysEntryBox ul>li.imptNote { background:rgba(8,233,33,0.2); font-weight:bold; }
.taxNote { display:block; font-size:15px; line-height:17px; margin:4px 10px; }
.publishNote { display:block; background:rgba(255,0,0, 0.4); font-size:15px; color:#F0F0F0; padding:10px 20px; line-height:17px; margin:10px 0;  }
.sysEntryBox ul>li.buttonEntry { padding:12px 15px; }
.sysEntryBox ul>li.checkBoxEntry>input { float:left; width:15px; margin:5px 2px 5px 5px; }
.sysEntryBox ul>li.checkBoxEntry>label { float:left; width:80%; font-size:14px; margin-left:5px; }
.sysEntryBox ul>li.infoEntry { background:#F0F0F0; margin-bottom:20px; border:3px #EEEEEE solid; }
.sysEntryBox ul>li.updateEntry { background:#F0F0F0; margin-bottom:5px; border:3px #EEEEEE solid; }
.sysEntryBox ul>li.linkEntry { background:#FFFAEB; padding:5px 15px; margin:5px 0px; border:2px #CCCCCC dashed; font-size:14px; }
.sysEntryBox ul>li.addRow { background:#FFFAEB; border:0; }
.sysEntryBox ul>li.linkEntry>b { color:#0099CC; }
.sysEntryBox ul>li.editEntry { position:relative; background:#FFFFFF; padding:10px 15px; margin:10px 0px; border:2px #DDDDDD dashed; font-size:14px; }
.sysEntryBox ul>li.editEntry:hover { background:#F9F9F9; border:2px #B2E0F0 dashed; }
.sysEntryBox ul>li label { display:block; font-size:15px; line-height:17px; margin:4px 10px; }
.sysEntryBox ul>li label.hiLabel { color:#0099CC; }
.sysEntryBox ul>li label>span { float:right; font-size:12px; color:#666666; padding:0px 5px; background-color:#E0E0E0; 
	-webkit-border-radius: 2px; 
	   -moz-border-radius: 2px; 
					border-radius: 2px;
}
.sysEntryBox ul>li label>span.addtNote { float:none; display:block; color:#999999; font-size:10px; line-height:11px; font-style:italic; padding:0; margin-top:5px; background-color:transparent; }
.sysEditInBtn { display:none; cursor:pointer; position:absolute; top:2px; right:2px; width:30px; height:30px; background:#B2E0F0 url('../../i/buttons/btn-edit.png') no-repeat center center; 
	-webkit-border-radius: 2px; 
	   -moz-border-radius: 2px; 
					border-radius: 2px;	
}
.sysEditInBtn:hover { background-color:#999999; }
.sysEntryCol { display:block; overflow:hidden; width:100%; }
.sysEntryCol.sideColEntry { margin-bottom:10px; }
.sysEntryCol.sideColHead { border-bottom:1px #CCCCCC dashed; padding-bottom:10px; margin-bottom:15px; }
.sysEntryAddCol { overflow:hidden; width:88%; margin:5px 0; text-align:right; }
.sysEntryAddCol.addVariationOpt { float:right; text-align:left; margin-right:11%; width:58% !important; }
.sysEntryCat { float:left; margin-right:1%; padding:3px 0px; }
.sysEntryCat.amountCat { width:16%; }
.sysEntryCat.pageCat { width:70%; }
.sysEntryCat.selCat { width:25%; }
.sysEntryCat.arrwCat { font-size:24px; padding:41px 0px 10px 0px; }
.sysEntryLf { float:left; width:45%; margin-right:5%; }
.sysEntryLf.name { width:38%; }
.sysEntryLf.salutation { width:15%; }
.sysEntryLf.updateDate { width:30%; }
.sysEntryLf.rangeDate { width:60%; }
.sysEntryLf.orderDate { width:26%; }
.sysEntryLf.iconOpt { width:30%; padding:10px 0; }
.sysEntryLf.statusSwitch { width:20%; }
.sysEntryLf.statusSwitchSm { width:12%; }
.sysEntryLf.processOprt { width:22%; margin-right:2%; }
.sysEntryLf.qtyFld { width:25%; margin-right:2%; }
.sysEntryLf.batchBtn { width:10%; }
.sysEntryLf.sysTable { width:63%; }
.sysEntryLf.sysConfirm { width:70%; }
.sysEntryLf.stockDetail { width:60%; display:none; }
.sysEntryLf.hlfCol { width:48%; margin-right:0; }
.sysEntryRg { float:right; width:45%; margin-right:2%; }
.sysEntryRg.name { width:37%; margin-right:0; }
.sysEntryRg.orderStatus { width:35%; margin-right:0; }
.sysEntryRg.sorting { width:25%; margin-right:0; }
.sysEntryRg.sorting input.sysFrm { width:90%; }
.sysEntryRg.statusSwitch { width:20%; }
.sysEntryRg.sideEntry { display:none; width:63%; }
.sysEntryRg.switchNote { float:right; width:70%; margin-right:2%; }
.sysEntryRg.qtyNote { float:right; width:50%; margin-right:2%; }
.sysEntryRg.sysTblInfo { width:30%; margin-top:20px; }
.sysEntryRg.qtyRangeCol { width:35%; margin-right:0; }
.sysEntryRg.hlfCol { width:48%; margin-right:0; }
.sysEntryRg.bannerNote { display:none; width:50%; margin-top:10px; padding:5px; 
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
					border-radius: 3px;
	-webkit-box-shadow: 0px 0px 2px rgba(255,0,0,0.5);
		 -moz-box-shadow: 0px 0px 2px rgba(255,0,0,0.5);
					box-shadow: 0px 0px 2px rgba(255,0,0,0.5);
}
.sysEntry3Lf { float:left; width:29.5%; margin-right:5%; }
.sysEntry4Lf { float:left; width:25%; margin-right:5%; }
.sysEntry3Lf.lf3Val { width:28%; }
.sysEntry3Lf.lfCol { width:34%; }
.sysEntry3Rg { float:left; width:29%; }
.sysEntry3Rg.rgCol { width:20%; }
.sysEntryOpt { float:left; width:25%; margin-right:2%; }
.sysEntryOpt>input { width:90% !important; }
.sysEntryOpt.optGroup { width:18%; }
.sysEntryOpt.optVariation { /*width:45%;*/width:60%; }
.sysEntryOpt.optItem { /*width:26%;*/width:30%; }
.sysEntryOpt.optOn { width:6%; margin-right:3%; }
.sysEntryOpt.optChk { width:5%; margin-right:0; }
.sysEntryOpt.optPrc { width:18%; }
.sysFrmInfo { display:block; background:url('../../i/icons/icn-tip.png') no-repeat 1px 1px; padding:1px 2px 2px 22px; margin:8px 10px 0px 10px; font-size:11px; color:#333333; line-height:14px; font-style:italic; opacity:0.6; }
.sysFrmInfo:hover { opacity:1.0; color:#660000; background:url('../../i/icons/icn-tip-o.png') no-repeat 0px 0px; }
.frmDate { float:left; width:60% !important; padding-right:7% !important; background:url('../../i/icons/icn-date.png') no-repeat 96% center; }
.frmDate.dtRange { float:none; width:36% !important; }
.frmRange { float:none; width:42% !important; }
.frmRange.frmQty { float:none; width:37% !important; }
.frmMinBuy { width:50% !important; }
.sysDateRng { display:block; overflow:hidden; }
.sysDateRng>span { float:left; margin:10px; font-size:18px; }
.frmEditor { display:none; }
.frmEditorHtml { display:none; }
.sysFrmBox { float:left; margin-right:15px; }
.sysFrmBox.icnBx { height:100px; }
.sysFrmBox>label { cursor:pointer; opacity:0.3; }
.sysFrmBox>label:hover { cursor:pointer; opacity:1.0; }
.sysFrmBox>label.optOn { opacity:1.0; }
.sysFrmFlex { display:flex; justify-content:flex-start; align-items:center; }
input.sysFrm,textarea.sysFrm,select.sysFrm {
	font-family: 'Poppins', sans-serif;
	width:97.4%;
	height:20px;
	font-size: 17px;
	color:#FFFFFF; 
	background-color:#999999; 
	line-height:19px; 
	border:0;
	padding:11px 8px;
	margin:2px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
					border-radius: 4px;
}
input.sysFrm.sideEtry { width:95%; }
input.sysFrm.colEtry { width:92%; }
input.sysFrm.valueEtry { width:65%; }
input.sysFrm.sideEtry3Col { float:left; width:15%; }
textarea.sysFrm { min-height:90px !important; line-height:22px !important; }
textarea.sysFrm.trscFrm { min-height:20px !important; font-size:14px; width:93%; }
input[type=text].sysFrm:-moz-read-only,input[type=number].sysFrm:-moz-read-only,input[type=text].sysFrm:-moz-read-only:focus,input[type=number].sysFrm:-moz-read-only:focus { /* For Firefox */ background-color:#DDDDDD; color:#999999; box-shadow:none; }
input[type=text].sysFrm:read-only,input[type=number].sysFrm:read-only,input[type=text].sysFrm:read-only:focus,input[type=number].sysFrm:read-only:focus { background-color:#DDDDDD; color:#999999; box-shadow:none; }
input[type=checkbox].sysChkBoxTop { display:block; margin:5px auto; }
input[type=checkbox].sysChkBoxLeft { float:left; margin:5px auto; }
input[type=checkbox].sysChkBoxIPG { float:left; margin:18px 10px 18px 0; }
input[type=file].sysFrm { height:30px; width:94%; }
select.sysFrm { width:auto; max-width:99.5%; min-width:40%; height:40px; padding:6px 10px 6px 5px; }
select.sysFrm.flSelect { width:100%; }
select.sysFrm.selPercent { width:30% !important; min-width:auto; }
select.sysFrm.mltSelect { width:90%; height:100px; }
.sysFrm.selPrice { width:60% !important; }
textarea.sysFrm { height:auto; }
input.sysFrm:focus,textarea.sysFrm:focus,select.sysFrm:focus { 
	color:#FFFFFF;
	background-color:#666666;
	-webkit-box-shadow: 0px 0px 2px #FFFF66;
		 -moz-box-shadow: 0px 0px 2px #FFFF66;
					box-shadow: 0px 0px 2px #FFFF66;
}
input.sysTblFrm { width:78%; }
input.sysTblFrm.flFrm { width:90%; }
input.sysColFrm { width:96%; margin:3px 0; }
.sysFrmTxtBox { position:relative; overflow:hidden; cursor:default; padding:11px 8px; line-height:16px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
					border-radius: 4px;
}
.wDel { float:left; width:74% !important; }
.sysFrm.urlLnk { width:92%; background:rgba(0,153,204,0.3) url('../../i/icons/icn-www.png') no-repeat 5px center; color:#666666; padding:8px 8px 8px 40px; font-size:14px; }
.sysFrm.prmLnk { width:40%; background:rgba(0,153,204,0.3); color:#666666; padding:8px; font-size:14px; }
.sysFrm.leftFld { float:left; }
.impFld { background:rgba(0,153,204,0.3) !important; color:#333333 !important; }
.sysFrm.infoFld { color:#333333 !important; background-color:#F1F1F1 !important; border:1px #DDDDDD solid; padding:10px 8px; }
.sysFrm.infoSlct { color:#333333 !important; background-color:#F1F1F1 !important; border:1px #DDDDDD solid; }
.sysFrm.addrFld { width:96%; }
.sysFrmFunction { overflow:hidden; border-top:5px #999999 solid; padding:15px 0px; margin-top:30px; }
.sysFrmButtons { float:right; }
.sysFrmButtons>input { margin-left:5px; }
.sysBtnRight { float:right; margin-left:10px; }
.sysDoButton { background:#00B259; border:1px #008C46 solid; color:#FFFFFF; }
.sysProcessButton { width:100% !important; background:#0099CC; border:1px #B2DCE2 solid; color:#FFFFFF; }
.sysProcessButton.orderDoneBtn { background:#FF6600; }
.sysRemoveButton { background:#990000; border:1px #FF0000 solid; color:#FFFFFF; }
.processBtn { cursor:auto; opacity:0.3 !important; }
.sysCancelButton { background:#CCCCCC; border:1px #9F9F9F solid; color:#333333; margin-left:10px !important; }
.sysFldErr { 
	-webkit-box-shadow: 0px 0px 2px #FF0000;
		 -moz-box-shadow: 0px 0px 2px #FF0000;
					box-shadow: 0px 0px 2px #FF0000;
}
.sysButtonOff { background:#999999 !important; color:#555555 !important; opacity:0.7 !important; }
/* category link banner */
.sysEntryBox ul>li.categoryLinkBx { display:none; }
/* password view icon */
.vwIcn { cursor:pointer; position:absolute; width:16px; height:16px; background:url('../../i/icons/icn-view-off.png') no-repeat center; background-size:contain; top:0; bottom:0; right:20px; margin:auto; opacity:0.6; }
.vwIcn:hover { opacity:1; }
.vwIcn.vwOn { background-image:url('../../i/icons/icn-view-on.png') }
.sysPasswdBx { position:relative; width:100%; }
.sysPasswdBx input.frmPass { width:90%; padding-right:10%; }
.sysPasswdBx .vwIcn { right:1%; }

/* FIELD COL FLEX */
ul.lstColFlex { list-style-type:none; display:flex; justify-content:flex-start; align-items:center; gap:1%; padding:5px 0; }
ul.lstColFlex>li { position:relative; border:0; padding:0 10px 0 0; }
a.addItem { display:inline-block; width:35px; height:35px; border-radius:50%; background:url('../../i/icons/icn-add.png') no-repeat center; background-size:contain; }

/* SWITCH ON BOX */
.boxShow { display:block !important; }
.boxHide { display:none !important; }
.sySwitchBox { display:none; position:relative; overflow:hidden; }
.syIPGSwitchBox { display:none; position:relative; overflow:hidden; }
.syRegCourierBox { display:none; position:relative; overflow:hidden; }
.syInsCourierBox { display:none; position:relative; overflow:hidden; }
ul.subDetailLst li { padding-left:6%; }

/* MULTI PRICE BOX */
.syMultiPriceBox { display:none; position:relative; overflow:hidden; padding:10px 15px; border-bottom:1px #DDDDDD dashed; background:rgba(0,153,204,0.1); }
input[type=button].tbMtplAddRow { background:#00B22D url('../../i/buttons/btn-addrow.png') no-repeat center center; width:50px; height:30px; border:0; }
a.tbMtplAddRow { background:url('../../i/buttons/btn-addrow-g.png') no-repeat left center; padding-left:30px; color:#27ae60; opacity:0.7; margin-left:2%; }
a.tbMtplAddRow:hover { opacity:1.0; }
a.tbMtplAddCriteria,a.tbMtplAddVariation { background:url('../../i/buttons/btn-addcriteria-g.png') no-repeat left center; padding-left:30px; color:#27ae60; opacity:0.7; margin-left:2%; }
a.tbMtplAddCriteria:hover,a.tbMtplAddVariation:hover { opacity:1.0; }
a.tbMtplAddOpt { background:url('../../i/buttons/btn-addopt-b.png') no-repeat left center; padding-left:30px; color:#0099cc; opacity:0.7; margin-left:2%; }
a.tbMtplAddOpt:hover { opacity:1.0; }
.sysTblRowDel { cursor:pointer; background:url('../../i/buttons/btn-delrow.png') no-repeat center center; width:25px; height:25px; margin:3px 5px; }
.sysTblRowDel.rightDel { float:right; }
.sysTblRowDel.rightDel.delCriteriaOptOff { opacity:0.4; }

/* STOCK VARIATION BOX */
.sysEntryStock { display:none; }
.syStockOptBox { /*display:none;*/ position:relative; overflow:hidden; padding:15px 15px; border-bottom:1px #DDDDDD dashed; background:rgba(93,163,129,0.1); }

/* VARIATION */
.syVariationBox { display:none; position:relative; overflow:hidden; padding:10px 15px; border-bottom:1px #DDDDDD dashed; }

/* INSTALLMENT SETUP */
.syInstallmentBox { display:none; position:relative; overflow:hidden; padding:10px 15px; border-bottom:1px #DDDDDD dashed; background:rgba(0,153,204,0.1); }

/* FORM UPLOAD PHOTO */
.sysPhotoUpload { float:right; width:30%; padding-top:30px; padding-bottom:30px; }
.sysPhotoUpload>h3 { border-bottom:4px #DDDDDD solid; padding-bottom:10px; }
.sysThumbWtrMark { margin-bottom:10px; }
.sysThumbView { display:block; }
.sysThumbView>h3 { padding:3px 7px; margin-top:30px; }
.sysThumbLst { position:relative; }
.sysThumbLst>ul { overflow-y:auto; list-style-type:none; font-size:0; border-top:1px #F0F0F0 solid; border-bottom:1px #F0F0F0 solid; max-height:1050px; }
/*.sysThumbView>ul>li { position:relative; vertical-align:top; display:inline-block; width:100px; height:100px; margin:5px 7px; border:1px #EEEEEE solid; background:#F0F0F0; }
.sysThumbView>ul>li img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:100%; }*/
.sysThumbLst>ul>li { position:relative; display:block; overflow:hidden; padding:5px 0px; border-top:1px #FCFCFC solid; border-bottom:1px #FCFCFC solid; }
.sysThumbLst>ul>li.thumbMain { background:#f4e3e1; }
.sysThumbLoading { display:none; z-index:100; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.8) url('../../i/delimg-loading.gif') no-repeat center center; }
.sysThumbImg { position:relative; float:left; width:100px; height:90px; margin-right:15px; overflow:hidden; border:1px #EEEEEE solid; background:#F0F0F0; }
.sysThumbImg img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:100%; max-height:100%; }
.sysThumbNote { float:left; width:63%; }
.sysThumbNote>label { display:block; margin:3px 0px; font-weight:bold; }
.sysThumbNote>p { display:block; margin:3px 0px; }
.sysThumbNote>input.sysBtnImg { margin-top:10px; margin-right:5px; color:#FFFFFF; font-size:10px; line-height:11px; padding:2px 10px; opacity:0.5; }
.sysThumbNote>input.sysBtnImg:hover { opacity:0.8; }
.sysBtnImg.btnDelImg { background:#990000; border:1px #ff0000 solid; }
.sysBtnImg.btnMainImg { background:#333333; border:1px #0099CC solid; }
.sysReceiptThumb { overflow:hidden; width:100%; height:50px; background:#FFFFFF; border:1px #DDDDDD solid; }
.sysReceiptThumb>img { max-width:100%; }

/* FORM STATUS */
.sysStatus { position:relative; float:right; width:25%; padding-top:30px; padding-bottom:30px; }
.sysStatus>h3 { padding:10px 5px 7px 5px; border-bottom:5px #DDDDDD solid; }
.sysStatus>ul { list-style-type:none; margin-top:15px; }
.sysStatus>ul>li { padding:10px 0px; border-bottom:1px #EEEEEE solid; }
.sysStatusHead { cursor:pointer; position:relative; overflow:hidden; }
.sysStatusHead>h4 { float:left; padding-top:7px; color:#999999; font-size:16px; }
.tStat { float:left; color:#CCCCCC; padding-right:5px; width:30px; min-height:30px; margin-right:10px; background:#FF0000; 
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  opacity:0.7;
}
.sysStatusHead.tOn>.tStat {
	filter: none;
  -webkit-filter: grayscale(0%);
	opacity:1.0;
}
.sysStatusHead.tOn>h4 { color:#333333; }
.tStat.stNew { background:url('../../i/icons/icn-newrequest-s.png') no-repeat center center; }
.tStat.stOrderConfirmation { background:url('../../i/icons/icn-orderconfirm-s.png') no-repeat center center; }
.tStat.stPending { background:url('../../i/icons/icn-paymentpending-s.png') no-repeat center center; }
.tStat.stConfirm { background:url('../../i/icons/icn-paymentconfirm-s.png') no-repeat center center; }
.tStat.stAccepted { background:url('../../i/icons/icn-paymentaccepted-s.png') no-repeat center center; }
.tStat.stDelivery { background:url('../../i/icons/icn-delivery-s.png') no-repeat center center; }
.tStat.stProcess { background:url('../../i/icons/icn-processing-s.png') no-repeat center center; }
.tStat.stCancel { background:#FFFFFF url('../../i/icons/icn-cancel-order.png') no-repeat center center; background-size:contain; }
.syTranscStatus { position:relative; padding:3px 2px 3px 5px; height:36px; border:1px #DDDDDD solid; overflow:hidden; display:flex; justify-content:flex-start; align-items:center;
	-webkit-border-radius: 4px; 
	   -moz-border-radius: 4px; 
					border-radius: 4px;
}
.syTranscStatus>label { font-size:16px !important; line-height:16px; }
.syTranscStatus>img { max-height:90% !important; margin:3px; }

/* FORM INFO */
.sysInformation { float:right; width:30%; padding-top:30px; padding-bottom:30px; }
.sysInfoTitle { background:url('../../i/icons/icn-info.png') no-repeat left center; padding:10px 10px 7px 45px; font-size:22px; }
.sysInfoMsg { margin-top:10px; margin-bottom:20px; color:#666666; }
.sysInfoMsg p { color:#666666; }
.sysInfoMsg>ol.sysNumOl { list-style-type:none; }
.sysInfoMsg>ol.sysNumOl>li { padding-left:36px; background-position:left 2px; background-repeat:no-repeat; margin:10px 0px; }
.sysNumOl ul, sysNumOl ol { margin-left:20px; }
li.num1 { background-image:url('../../i/numbers/1.png'); }
li.num2 { background-image:url('../../i/numbers/2.png'); }
li.num3 { background-image:url('../../i/numbers/3.png'); }
li.num4 { background-image:url('../../i/numbers/4.png'); }
li.num5 { background-image:url('../../i/numbers/5.png'); }
li.num6 { background-image:url('../../i/numbers/6.png'); }
li.num7 { background-image:url('../../i/numbers/7.png'); }
li.num8 { background-image:url('../../i/numbers/8.png'); }
li.num9 { background-image:url('../../i/numbers/9.png'); }

/* FUNCTION BUTTONS */
ul.sysMainFunc { float:left; list-style-type:none; overflow:hidden; margin-left:20px; }
ul.sysMainFunc>li { cursor:pointer; float:left; width:42px; height:42px; margin-right:10px; background-image:url('../../i/buttons/btn-function.png?xyz=1703'); background-repeat:no-repeat; }
li.noBtn { background-image:none !important; width:15px !important; }
li.offBtn { filter: grayscale(100%); opacity:0.4; }
li.mFncAdd { background-position:0px 0px; }
li.mFncAdd:hover { background-position:0px -52px; }
li.mFncShowAll { background-position:-50px 0px; }
li.mFncShowAll:hover { background-position:-50px -52px; }
li.mFncDownload { background-position:-100px 0px; }
li.mFncDownload:hover { background-position:-100px -52px; }
li.mFncShowOffPrd { background-position:-150px 0px; }
li.mFncShowOffPrd:hover { background-position:-150px -52px; }
li.mFncShowOnPrd { background-position:-200px 0px; }
li.mFncShowOnPrd:hover { background-position:-200px -52px; }
.sysBackBtn { cursor:pointer; float:left; width:46px; height:35px; margin-top:5px; margin-right:15px; background-image:url('../../i/buttons/btn-backto.png'); background-repeat:no-repeat; }
.sysBackBtn.mBackToList { background-position:0px 0px; }
.sysBackBtn.mBackToList:hover { background-position:0px -45px; }
ul.sysRecrdFunc { overflow:hidden; list-style-type:none; width:22px; position:absolute; left:0; right:0; margin:auto; }
ul.sysRecrdFunc>li { z-index:0; position:relative; cursor:pointer; width:22px; height:22px; margin-bottom:4px; opacity:0.3; }
ul.sysRecrdFunc>li:hover { opacity:1.0; }
li.mFuncEdit { background:url('../../i/buttons/btn-edit-data.png') no-repeat center center; }
.noAccess::after { position:absolute; content:''; top:0; bottom:0; left:0; right:0; z-index:5; background:url('../../i/buttons/btn-noaccess.png') no-repeat center; opacity:1 !important; }
li.mFuncCopy { background:url('../../i/buttons/btn-copy-data.png') no-repeat center center; }

/* BATCH FUNCTION BUTTONS */
.sysBatchFunc { display:block; overflow:hidden; margin-top:10px; padding:10px; }
.sysBatchFunc>ul { list-style-type:none; }
.sysBatchFunc>ul>li { float:left; margin:3px 10px 3px 3px; }
.sysBatchFunc input[type=button] { font-size:13px; letter-spacing:0.5px; }
.sysPublishButton { background:#008C23; border:1px #C8E6C9 solid; color:#FFFFFF; }
.sysHotpickButton { background:#B28500; border:1px #FF9900 solid; color:#FFFFFF; }
.sysInstCourierButton { background:#0099CC; border:1px #04779e solid; color:#FFFFFF; }
.sysDeleteButton { background:#990000; border:1px #FF0000 solid; color:#FFFFFF; }
.sysUpdateButton { background:#e63946; border:1px #C8E6C9 solid; color:#FFFFFF; font-weight:bold; min-width:200px; }

/* SEARCH */
.sysSearchBx { position:relative; float:left; padding:3px; width:30%; margin-right:10px; }
input.searchFld { background:#FFFFFF; padding-right:35px; width:83%; }
input.searchBtn { position:absolute; top:0; bottom:0; right:5px; margin:auto; width:30px; height:30px; background:url('../../i/buttons/btn-search.png') no-repeat center center; border:0;
	-webkit-box-shadow: none;
		 -moz-box-shadow: none;
					box-shadow: none;
}
input.searchBtn:hover {
	-webkit-box-shadow: none;
		 -moz-box-shadow: none;
					box-shadow: none;
}

/* PAGING LIST */
.sysPaging { float:right; overflow:hidden; width:63%; }
.sysCatSelect { float:left; padding:3px; }
select.catSelect { background-color:#FFFFFF; color:#333333; border:1px #FFFFFF solid; padding:2px 7px 1px 7px; min-width:100px; max-width:280px; width:auto; height:auto; }
select.catSelect:focus { background-color:#909090; color:#FFFFFF; 
	-webkit-box-shadow: 0px 0px 2px rgba(255,153,0,0.6);
		 -moz-box-shadow: 0px 0px 2px rgba(255,153,0,0.6);
					box-shadow: 0px 0px 2px rgba(255,153,0,0.6);
}
select.catSelect>option.sepSelect { color:#999999; height:10px; padding:0; }
.sysPageBox { overflow:hidden; float:right; margin-left:30px; margin-top:10px; }
.sysPaging { float:right; }
.sysPgSum { float:left; font-size:14px; }
.sysPgNum { float:left; font-size:13px; background:#DDDDDD; padding:2px 12px; margin:0px 4px;
		-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
.sysPgNum span { font-size:14px; color:#FF0000; font-weight:bold; }
.sysPgNum a { font-size:13px; color:#000000; }
.sysPgNum a:hover { color:#999999; }
.sysPgIcn { float:left; cursor:pointer; width:20px; height:20px; margin-top:2px; opacity:0.4; background-image:url('../../i/buttons/btn-paging.png'); background-repeat:no-repeat; }
.sysPgIcn:hover { opacity:1.0; }
.sysPgIcn.pgPrev { background-position:center 0px; }
.sysPgIcn.pgNext { background-position:center -28px; }

/* LISTING TABLE */
.sysListBox { position:relative; }
.sysTbl { width:100%; }
.sysTbl>p.noRecord { display:block; text-align:center; }
.sysTbl>ul { display:block; position:relative; font-size:15px; list-style-type:none; overflow:hidden; border-bottom:1px #CCCCCC dashed; padding:5px 0px; text-align:left; }
.sysTbl>ul.sysListOnly { padding:2px 0; }
.sysTbl>ul.sysTblHeader { border-bottom:4px #CCCCCC solid; font-size:13px; }
.sysTbl>ul.sysTblHeader.subHeader { border-bottom:0; background:#999999; border-top:1px #666666 solid; }
.sysTbl>ul.sysTblHeader.subHeader>li { color:#FFFFFF !important; padding:5px 7px !important; margin-bottom:0 !important; }
.sysTbl>ul.sysPick { background:rgba(239,231,174,0.2); }
.sysTbl>ul.sysRowOff>li { opacity:0.4; }
.sysTbl>ul>li { position:relative; float:left; padding:15px 7px; margin-right:1px; padding-bottom:215px; margin-bottom:-200px; }
.sysTbl>ul>li>ul, .sysTbl>ul>li>ol { margin-left:0; margin-left:15px; }
.sysTbl>ul.sysListOnly>li { padding:10px 7px; padding-bottom:0; margin-bottom:0; }
.sysTbl>ul>li.toRight { position:absolute; right:0; }
.sysTbl>ul>li>a { display:block; color:#0099CC; margin-bottom:5px; font-size:18px; line-height:21px; }
.sysTbl>ul>li>a:hover { color:#F44336; }
.sysTbl>ul>li>a.normalLnk { font-size:14px; } 
.sysTbl>ul>li>p { font-size:13px; color:#666666; margin:0; }
.sysTbl>ul.sysTblHeader>li { letter-spacing:0.5px; color:#00688C; text-transform:uppercase; }
span.icnInstCourier { float:left; width:15px; height:15px; margin-right:8px; background:url('../../i/icons/icn-instcourier.png') no-repeat center center; }
ul.sysBuyItm { margin-left:13px; }
ul.sysBuyItm>li { font-size:13px; line-height:15px; padding:6px 5px 10px 2px; border-top:1px #DDDDDD dotted; }
ul.sysBuyItm>li.startLn { padding-top:0px; border-top:0; }
.sysTblSKU { font-size:0.9em; margin-bottom:5px; color:#666666; letter-spacing:0.4px; }
.sysTblGroup { display:block; text-transform:uppercase; font-size:13px; margin-bottom:8px; padding-top:2px; padding-left:25px; background:url('../../i/icons/icn-group.png') no-repeat left center; }
.sysTblGroup>span { padding:0 5px; opacity:0.5; }
.sysTblGroup>a { color:#333333; }
.sysTblGroup>a:hover { color:#F44336; }
.sysTblGroup>label { padding:0px 3px; color:#999999; }
.sysTblCategory { display:block; text-transform:uppercase; font-size:13px; margin-bottom:8px; padding-top:2px; padding-left:25px; background:url('../../i/icons/icn-category.png') no-repeat left center; }
.sysTblCategory>label { padding:0px 3px; color:#999999; }
/* transaction table */
.sysTblEntry { display:none; margin:15px 0px 40px 0px; }
.sysTblEntry.mltpPrcTable { margin:0px 0px 20px 0px; border-bottom:2px #CCCCCC solid; }
.sysTblEntry.tblShow { display:block; }
.sysTblEntry ul { width:100%; display:block; position:relative; font-size:14px; list-style-type:none; overflow:hidden; border-bottom:1px #CCCCCC dashed; padding:3px 0px; text-align:left; }
.sysTblEntry ul.sysTblHeader { border-bottom:4px #CCCCCC solid; font-size:13px; overflow:hidden; }
.sysTblEntry ul.sysTblFooter { border-bottom:1px #FFFFFF solid; background:#F6F6F6; padding:0px; }
	.sysTblEntry ul.sysTblFooter.hideFooter { display:none; }
.sysTblEntry ul.sysTblFooter.topFooter { border-top:1px #CCCCCC solid; }
.sysTblEntry ul.sysTblFooter.grandTotal { background:#EEEEEE; border-top:1px #CCCCCC solid; border-bottom:3px #CCCCCC solid; }
.sysTblEntry ul.sysTblFooter.grandTotal>li { padding-top:10px; height:25px; }
	.sysTblEntry ul.sysTblRowCancel { opacity:0.7; }
	.sysTblEntry ul.sysTblRowCancel>li { text-decoration:line-through !important; }
	.sysRowLoading { display:none; z-index:1; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255, 0.7) url('../../i/row-loading.gif') no-repeat center center; }
.sysTblEntry ul>li { float:left; padding:5px; margin-right:1px; padding-bottom:205px; margin-bottom:-200px; }
.sysTblEntry ul>li.toRight { position:absolute; right:0; }
.sysTblEntry ul>li>span { font-size:12px; color:#999999; }
.sysTblEntry ul.sysTblHeader>li { letter-spacing:0.5px; color:#00688C; }
.sysTblDel { cursor:pointer; width:20px; height:20px; background:url('../../i/buttons/btn-cancel.png') no-repeat center center; background-size:contain; opacity:0.7; }
.sysTblDel:hover { opacity:1.0; }
	.sysTblUndo { cursor:pointer; width:20px; height:20px; background:url('../../i/buttons/btn-undo.png') no-repeat center center; background-size:contain; opacity:0.7; }
	.sysTblUndo:hover { opacity:1.0; }
.sysListTotal { float:right; padding:13px 0; color:#999999; }
.sysListTotal>label { color:#333333; font-weight:bold; }
	.sysMapArea { position:relative; }
.sysMapBox { width:99.5%; height:0; padding-bottom:45%; overflow:hidden; border-radius:5px; margin:auto; margin-bottom:5px; }
	.sysTblAction { padding-top:20px; overflow:hidden; }
	.sysTblBtn { float:right; background:#FF6600; border:1px #FFDD00 solid; border-radius:10px !important; font-weight:bold; color:#FFFFFF; margin:2px; }
	.sysTblBtn:disabled { background:#999999; border:1px #666666 solid; }
	input.mapSearch { position:absolute; top:5px; left:5px; width:30%; border:0; box-shadow: 0 0 1px #666666; padding:6px 40px 6px 10px; background:#FFFFFF url('../../i/icons/icn-mapsearch.png') no-repeat 98% center; }
	input.mapSearch:focus { border:0; box-shadow: 0 0 2px #666666; width:76%; }
/* table column */
.treIndt { position:absolute; top:-5px; bottom:0; right:0; width:20px; border-left:1px #CCCCCC solid; }
.treIndt::before { content:''; position:absolute; top:26px; left:0; width:20px; height:1px; background-color:#CCCCCC; }
.tbChkBox { position:relative; width:2%; text-align:center; opacity:1.0 !important; }
.tbExpndArrw { margin:3px; width:17px; height:17px; background:url('../../i/icons/icn-arrw-expand.png') no-repeat center center; background-size:contain; }
.tbFunc { width:4%; opacity:1.0 !important; text-align:center; }
.tbMtplFunc { width:8%; opacity:1.0 !important; text-align:center; }
.tbThumb { width:10%; text-align:center; }
.tbThumb img { max-width:85% !important; max-height:90px !important; }
.tbDesc { width:44%; }
.tbDescMd { width:40%; }
.tbDescMs { width:33%; }
.tbDescSm { width:22.5%; }
.tbDescMn { width:20%; }
.tbDescTxt { width:16%; padding-top:13px !important; }
.tbDescBg { width:58%; }
.tbName { width:18%; }
.tbName>label { display:block; color:#999999; font-size:13px; margin-top:3px; }
.tbOpt { margin-top:3px; }
.tbOpt>span,.tbOpt>label { opacity:0.5; }
.tbNote { display:block; width:100%; margin-top:5px; font-style:italic; font-size:13px; }
.tbNote span.noteLbl { display:inline-block; color:#B93327; font-style:normal; opacity:0.5; font-weight:bold; text-decoration:underline; }
.tbCode { width:8%; }
.tbCategory { width:17%; }
.tbCategoryBg { width:24%; }
.tbCategorySm { width:10%; }
.tbPrdName { width:36%; }
.tbStock { width:10%; }
.tbStock>i { font-size:0.9em; }
.tbPrice { width:13%; text-align:center; letter-spacing:0.5px; }
.tbPriceMd { width:16%; text-align:center; letter-spacing:0.5px; }
.tbPriceLg { width:25%; text-align:center; letter-spacing:0.5px; }
.tbPriceSm { width:9%; text-align:center; letter-spacing:0.5px; }
.tbPriceSm label { display:block; color:#999999; font-size:13px; margin-top:3px; }
span.discPrice { display:block; text-decoration:line-through; opacity:0.4; margin-top:5px; font-size:0.9em; }
.tbMtplPrice { position:relative; width:48%; text-align:center; letter-spacing:0.5px; }
	.tbMtplPrcType { float:left; width:23%; margin-left:10px; margin-right:2px; }
	.tbMtplPrcType select { padding:5px 3px; width:96% !important; height:35px; background:rgba(102,102,102, 0.4); color:#333333; }
	.tbMtplPrcValue { float:left; width:71%; }
	.tbMtplPrcValue input { width:90% !important; }
.tbPrice label { display:block; white-space:nowrap; color:#999999; font-size:12px; margin-top:3px; }
.tbSubTtl { width:18%; text-align:right; letter-spacing:0.5px; }
.tbSubTtl span.grandTtl { font-size:16px; color:#000000; font-weight:bold; }
.tbFullCol { width:75.2%; }
.tbTotal { width:75.2%; text-align:right; }
.tbRecDate { width:10%; text-align:center; line-height:20px; }
.tbDate { width:10%; text-align:center; line-height:20px; color:#999999; }
.tbDateBg { width:15%; text-align:center; color:#999999; }
.tbDate>label { white-space:nowrap; color:#333333; }
.tbValidityDt { width:20%; text-align:center; }
.tbStatus { width:5%; text-align:center; height:35px; padding-bottom:0 !important; margin-bottom:0 !important; }
.tbStatus>img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:38px; height:38px; }
.tbStatus.smStatusIcn>img { width:22px; height:22px; top:-10px; }
.tbOrderCode { width:13%; }
.tbOrderDt { width:30%; text-align:center; }
.tbQty { width:6%; text-align:center; }
.tbMtplQty { width:16%; text-align:center; }
.tbBank { width:29.5%; }
.tbSKU { width:15%; }
.tbProduct { width:32%; }
.tbProduct span.prodName { font-size:16px; color:#000000; font-weight:bold; }
.tbDelivery { width:16%; }
.tbDelivery>label { display:block; font-size:13px; margin-top:3px; color:#999999; }
.tbEmail { width:25%; }
.tbEmail>label { display:block; font-size:13px; margin-top:3px; color:#999999; }
/* list icons */
.recStatus { width:38px; height:38px; background-color:#EEDDDD; background-image:url('../../i/icons/icn-status.png'); background-repeat:no-repeat; }
.stPublish { background-position:0px 0px; }
.stUnPublish { background-position:0px -48px; }
/* variation table */
.tbRows { border-bottom:1px #CCCCCC solid; }
ul.sysTblRow { overflow:hidden; }

/* LISTING QUICK EDIT */
ul.sysListEdit>li.qEdit { cursor:context-menu; min-height:25px; }
ul.updateMainRow { background:rgba(0,153,204, 0.1); border-top:1px #999999 solid; border-bottom:0; }
ul.updateSubRow { border-bottom:0; border-top:1px #CCCCCC dashed; }
.qEditFld { display:none; z-index:1; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
.qEditFld>input { width:84% !important; }
input.edFldPrice,input.edFldNumber { text-align:center; }
input.edFldQty { text-align:center; width:60% !important; }
.qEditDisp { display:block; position:relative; color:#0099CC; }
.qEditDisp>label.sysBatchNew { text-decoration:line-through; font-size:13px; line-height:14px; color:#FF0000; }
.qEditDisp.edtListing { font-size:16px; }
.qEditDisp.edtListing>label.sysBatchNew { font-size:14px; line-height:18px; }
b.edtVal { color:#FF6600 !important; }

/* FUNCTION BUTTONS */
ul.funcLnkLst { list-style-type:none; display:flex; justify-content:flex-end; align-items:center; gap:5%; }
ul.funcLnkLst.rght { position:absolute; top:9px; right:7%; }
ul.funcLnkLst>li { vertical-align:top; font-size:12px; line-height:13px; }
ul.funcLnkLst>li>a { position:relative; display:inline-block; padding:2px 0 0 20px; color:#990000; opacity:0.8; }
ul.funcLnkLst>li>a:hover { opacity:1.0; }
ul.funcLnkLst.rght>li>a { color:#FFFFFF; }
i.funcIcn { display:inline-block; position:absolute; left:0; top:0; bottom:0; margin:auto; width:14px; height:14px; margin-right:6px; background:url('../../i/icons/icn-set-function.png') no-repeat; }
i.funcIcn.fnPrint { background-position:0px 0px; }
i.funcIcn.fnEdit { background-position:-24px 0px; }
/* MODAL PRINT */
.modalPrint { display:none; z-index:100; position:fixed; left:5%; right:5%; top:80px; margin:auto; max-width:1000px; height:75vh; background-color:#666666; border-radius:5px; overflow:hidden; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }
.mdlPrintTitle { position:absolute; top:8px; left:10px; color:#FFFFFF; font-size:15px; font-weight:bold; padding-left:25px; }
a.mdlPrintClose { position:absolute; top:7px; right:7px; display:inline-block; width:20px; height:20px; background:url('../../i/icons/icn-close-sm-wh.png') no-repeat center; border-radius:50%; opacity:0.7; }
a.mdlPrintClose:hover { opacity:1; }
iframe.printFrame { position:absolute; top:30px; bottom:5px; left:0; right:0; width:99%; height:90%; margin:auto; background-color:#FFFFFF; border:0; }

/* ON/OFF SWITCH */
.sysStatusSwitch { margin-top:8px; }
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round + label {
  padding: 2px;
  width: 95px;
  height: 30px;
  background-color: #cccccc;
  border-radius: 20px;
}
input.cmn-toggle-round.sm-toggle + label {
	width: 89%;
  height: 18px;
  border-radius: 10px;
  margin-top:5px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #DDDDDD;
  border-radius: 30px;
  transition: background 0.4s;
}
input.cmn-toggle-round.sm-toggle + label:before {
	border-radius: 20px;
}
input.cmn-toggle-round + label:after {
  width: 32px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round.sm-toggle + label:after {
	width: 20px;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 65px;
}
input.cmn-toggle-round.sm-toggle:checked + label:after {
  margin-left: 58%;
}

.criteriaGroup { }
/* SYSTEM NOTIFICATION */
section#sysNotif { z-index:10; position:fixed; top:55px; right:5px; padding:10px; max-width:300px; max-height:88%; overflow-y:auto; }
.sysNtfLoading { display:none; position:absolute; top:3px; right:13px; width:10px; height:10px; background:url('../../i/notif-loading.gif') no-repeat center center; }
#sysNtfList { margin-top:10px; }
.sysNtfRow { display:none; position:relative; background:rgba(248,103,24, 0.7); border-radius:5px; margin:5px 0; box-shadow: 1px 1px 2px rgba(0,0,0, 0.3); }
a.sysNtfClose { position:absolute; top:5px; right:5px; width:16px; height:16px; background:url('../../i/icons/icn-close-sm.png') no-repeat center center; background-size:90%; opacity:0.6; }
a.sysNtfClose:hover { opacity:1.0; }
.sysNtfBx { padding:8px 35px 10px 15px; text-align:left; }
.sysNtfTime { display:block; color:#FFFFFF; font-size:10px; line-height:13px; opacity:0.6; }
.sysNtfMsg { font-size:14px; color:#FFFFFF; line-height:15px; }
.sysNtfMsg a { color:#FFFFFF; }

/* BATCH UPDATER AREA */
.sysBatchBox { display:block; background:rgba(206,151,117,0.3); padding:5px; }
.sysBatchBox ul { list-style-type:none; }
.sysBatchBox ul>li { position:relative; display:block; overflow:hidden; padding:10px 15px; }
.sysBatchBox ul>li label { display:block; font-size:15px; line-height:17px; margin:4px 10px; }
label.sysBatchNew { display:block; color:#999999 !important; font-size:12px; margin-top:-8px; }
.sysBatchNote { padding:10px; text-align:center; }

/* DASHBOARD */
.icnsDashb { background-image:url('../../i/icons/icns-dashboard.png'); background-repeat:no-repeat; }
.icnsDashb.icnYTD { background-position:center 0 !important; }
.icnsDashb.icnOrder { background-position:center -147px !important; }
.icnsDashb.icnSales { background-position:center -294px !important; }
.icnsDashb.icnPacking { background-position:center -441px !important; }
.graphRow { overflow:hidden; margin:10px 0 40px 0; }
.graphCol { overflow:hidden; }
.graphColLf { position:relative; float:left; width:45%; }
.graphColRg { position:relative; float:right; width:45%; }
.col59 { width:59% !important; }
.col35 { width:35% !important; }
.graphBox { position:relative; }
.graphHeader { position:relative; overflow:hidden; border-bottom:1px #999999 dashed; margin-bottom:10px; }
.graphHeader h2 { float:left; font-weight:bold; width:60%; text-align:left; }
ul.graphTbl { list-style-type:none; width:99%; display:flex; flex-wrap:wrap; flex-direction:row; }
ul.graphTbl>li { position:relative; flex:1 0 0; text-align:left; }
ul.graphTbl.summaryTbl>li { flex:4 0 20%; border:1px #CCCCCC solid; border-radius:4px; padding:8px 10px; margin:3px 5px; min-height:45px; background-color:#F0F0F0; }
ul.graphTbl.lstHeader>li { border-bottom:1px #CCCCCC solid !important; background:#DDDDDD; padding:5px 8px; margin:0 1px; margin-bottom:5px; font-weight:bold; }
ul.graphTbl.listTbl>li { border-bottom:1px #DDDDDD dotted; padding:8px; margin:0 1px; white-space:nowrap; overflow:hidden; }
li.tblProd { flex-grow:3 !important; }
li.tblCode { flex-grow:1.5 !important; }
.graphTblIcn { position:absolute; width:40px; height:40px; top:10px; left:10px; }
.graphCnt { float:left; margin-left:55px; }
.graphNote { font-size:22px; font-weight:bold; color:#0096c7; }
.graphNote>label { display:block; font-size:9px; letter-spacing:0.8px; color:#999999; margin-bottom:1px; }
.graphNote>span { font-weight:normal; font-size:16px; color:#666666; }
.chartArea { width:100%; height:40vh !important; }
.tblListFrame { max-height:225px; overflow-y:scroll; border-bottom:2px #DDDDDD solid; }
/* chart switch button */
ul.chartBtn { list-style-type:none; float:right; overflow:hidden; }
ul.chartBtn>li { cursor:pointer; display:inline-block; vertical-align:top; color:#FFFFFF; padding:4px 10px; border:1px #999999 solid; background:#666666; margin:0.05px; border-radius:3px; opacity:0.8; }
ul.chartBtn>li:hover { opacity:1.0; }
ul.chartBtn>li.btnOn { cursor:default; background:#EEEEEE; color:#333333; box-shadow:inset 0 0 5px #999999; opacity:1.0; }

/* DATA OWNERSHIP */
ul.lstDtOwner { list-style-type:none; }
ul.lstDtOwner>li { position:relative; display:inline-block; margin:10px; vertical-align:top; padding:0; border:0; }
.dtOwnerIcn { z-index:0; position:relative; width:80px; height:80px; margin-bottom:5px; background-color:#EEEEEE; border-radius:50%; overflow:hidden; }
.dtOwnerNm { display:block; font-size:0.9em; text-align:center; }
a.dtOwnerDel { z-index:5; position:absolute; top:0; right:0; width:20px; height:20px; background-color:#999999; border-radius:50%; }

.graphArea { position:relative; width:100%; height:50vh; }
.graphCanvas { position:absolute; top:0; left:0; right:0; bottom:0; }
.graphOverlay { z-index:1; position:absolute; top:0; left:0; right:0; bottom:0; background:#EEEEEE url('../../i/row-loading.gif') no-repeat center center; }

#labelStock { display:inline-block; font-size:0.9em; color:#FF0000; background-color:#EEEEEE; margin-bottom:5px; padding:2px 5px; }

/* MOBILE RESPONSIVE */
/* small device ----------- */
@media only screen 
and (max-width: 700px) {
		input[type=text],input[type=password],textarea,select { width:92%; }
		#formLogin input[type=text],#formLogin input[type=password] { padding:8px; }
		#formLogin input[type=submit] { min-width:150px; padding:10px 15px; }
		
		h1 { font-size:22px; line-height:24px; margin-bottom:15px; }
		h2 { display:block; font-size:22px; color:#333333; line-height:24px; font-weight:normal; margin-bottom:10px; }
		h3 { display:block; font-size:20px; color:#333333; line-height:20px; font-weight:normal; margin-bottom:8px; }
		h4 { display:block; font-size:18px; color:#333333; line-height:19px; font-weight:normal; margin-bottom:5px; }
		h5 { display:block; font-size:15px; color:#333333; line-height:17px; font-weight:normal; margin-bottom:5px; }
		
		.sysBodyWrapper { min-height:200px; }
		/* PAGE HEADER */
		.sysCntHead { margin:10px 5px; }
		ul.sysMainFunc { float:left; margin-left:0; }
		ul.sysMainFunc>li { margin-right:5px; }
		
		/* PAGING */
		.sysPageBox { margin-left:0px; }
		
		/* SEARCH */
		.sysSearchBx { width:96%; margin-right:0; }
		input.searchFld { padding-right:30px; width:79%; }
		input.searchBtn { right:2px; }
		
		/* LISTING BOX */
		.sysCntBox { padding:5px; }
		.sysTblHeader>li.tbThumb { display:none; }
		.sysTblHeader>li.tbPrice { display:none; }
		.sysTbl>ul { padding-top:10px !important; padding-bottom:10px !important; }
		.sysTbl>ul>li { padding:5px; padding-top:0 !important; padding-bottom:0 !important; margin-bottom:0 !important; }
		.tbDate { display:none; }
		.tbThumb { width:30%; }
		.tbDesc { width:100%; }
		.tbPrice { width:50%; text-align:left; }
		.tbOrderCode { width:100%; }
		.tbOrderCode>a { font-size:16px !important; }
		.tbRecDate { width:100%; text-align:left; }
		.tbDescSm { width:96%; }
		ul.sysBuyItm>li { margin-left:10px; }
		.tbDelivery { width:100%; }
		.tbDelivery>label { margin-top:0; }
		.tbPrice { width:100%; padding-bottom:5px !important; }
		.tbPrice label { margin-top:0; }
		.sysTbl>ul>li.toRight { position:absolute; right:25px; }
		
		/* MULTI PRICE BOX */
		.tbMtplPrice { width:40%; }
		.syMultiPriceBox { padding:10px; margin-top:10px; }
		.sysTblEntry ul>li { padding-bottom:5px; margin-bottom:0px; }
		
		/* EDIT DATA */
		.sysEntry { width:100%; padding-top:10px; padding-bottom:10px; }
		.sysPhotoUpload { width:100%; padding-top:10px; padding-bottom:20px; }
		.sysFrmButtons>input { margin:5px; }
		.sysEntryBox ul>li { padding:5px; }
		.sysEntryLf { float:left; width:100%; margin-right:1%; }
		.sysEntryLf.statusSwitch { width:96%; }
		.sysEntryLf.sysTable { width:100%; }
		.sysEntryRg { float:left; width:100%; margin-right:1%; }
		.sysEntryLf.updateDate { width:96%; }
		.sysEntryRg.statusSwitch { width:96%; }
		.sysEntryRg.switchNote { float:left; width:96%; }
		.sysEntryRg.sysTblInfo { width:96%; margin-top:0px; margin-bottom:10px; }
		.sysEntryBox ul>li.linkEntry { padding:5px; }
		.sysFrm.prmLnk { width:92%; }
		.sysEntryCat.amountCat { width:30%; }
		.sysEntryCat.selCat { width:45%; }
		.sysFrmInfo { display:none; }
		
		.sysStatus { width:100%; }
		.sysEntry.sysTransaction { width:100%; }
		.labelSKU { font-size:0.9em; color:#FF0000; }
		
		/* FORM INFO */
		.sysInformation { float:left; width:100%; }
}