/* 
CSS File Last Update : 16 December 2021
Project: Office Automation System (Pandava Media)
Website Designed & Coded by: Aditama (pandavamedia.net)
Main colors:
- Dark Red: #600a1a; rgba(96,10,26,1); // background
- Bright Red: #ea033a; rgba(234,3,58,1); // text
- Black: #333333;
- Soft Red: #fa9c92;
*/
/*html { height: 100%; }*/
@charset "UTF-8";
/*@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Open-Sans-regular.eot');
  src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       local('Montserrat'),
       local('Open-Sans-regular'),
       url('../fonts/Open-Sans-regular.woff2') format('woff2'),
       url('../fonts/Open-Sans-regular.woff') format('woff'),
       url('../fonts/Open-Sans-regular.ttf') format('truetype'),
       url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');
}*/

html { -webkit-text-size-adjust: 100%; }
body {
	position:relative;
	background-color:#F1F1F1;
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing:antialiased;
	font-smooth:always;
	font-size:13px;
	letter-spacing:0.5px;
	line-height:16px;
	color:#333333;
	margin:0;
	padding:0;
	height: 100%;
	width:100%;
	font-weight:normal;
}
#pageBody {
	/*background:#F1F1EA url('../../i/bg-pattern-batik2.jpg');*/
	/*background:#FFFFFF url('../../i/bg-pattern-batik2-wht.jpg');
	background-repeat:repeat-y;
	background-size:contain;
	background-position:center top;*/
	width:100%;
	/*background-color:#FFFFFF;
	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-family: 'Roboto', sans-serif;*/font-family: 'Montserrat', sans-serif; font-size:inherit; }
:focus { outline:0; background:rgba(170,230,240, 0.4); }
input[type=text],input[type=number],input[type=password],input[type=file],textarea { 
	width:90%;
	font-family: 'Montserrat', sans-serif; 
	font-size: 15px;
	letter-spacing:0.2px;
	color:#333333; 
	background-color:#FFFFFF; 
	line-height:20px; 
	border:1px #CCCCCC solid;
	padding:8px 8px 10px 8px;
	margin:1px 3px;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
	-webkit-box-shadow: inset 0px 0px 2px #DDDDDD;
		 -moz-box-shadow: inset 0px 0px 2px #DDDDDD;
					box-shadow: inset 0px 0px 2px #DDDDDD;
}
select { 
	width:95%;
	font-family: 'Montserrat', sans-serif; 
	font-size: 15px;
	font-weight:normal !important;
	letter-spacing:0.2px;
	color:#333333; 
	background-color:#FFFFFF; 
	line-height:20px; 
	border:1px #CCCCCC solid;
	padding:7px 8px 9px 8px;
	height:40px;
	margin:1px 3px;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
	-webkit-box-shadow: inset 0px 0px 2px #DDDDDD;
		 -moz-box-shadow: inset 0px 0px 2px #DDDDDD;
					box-shadow: inset 0px 0px 2px #DDDDDD;
}
input.fldEditable, select.fldEditable { border:1px #02afc1 solid !important; }
input[type=checkbox],input[type=radio] { margin-right:7px; }
input[type=submit],input[type=button],button { cursor:pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing:0.2px; padding:3px 5px; margin:4px; background:#CCCCCC; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
		-webkit-transition: all 0.5s;
			 -moz-transition: all 0.5s;
				-ms-transition: all 0.5s;
				 -o-transition: all 0.5s;
						transition: all 0.5s;
	-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 */
}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,textarea:focus,select:focus { 
	color:#000000;
	background-color:#F9F9F9;
	border:1px #999999 solid;
	-webkit-box-shadow: inset 0px 0px 2px #CCCCCC;
		 -moz-box-shadow: inset 0px 0px 2px #CCCCCC;
					box-shadow: inset 0px 0px 2px #CCCCCC;
}
input[type=submit]:hover,input[type=button]:hover { background:#0099CC; color:#FFFFFF; }
input.errFld,select.errFld,textarea.errFld {
		-webkit-box-shadow: 0px 0px 2px #FF0000;
		 	 -moz-box-shadow: 0px 0px 2px #FF0000;
						box-shadow: 0px 0px 2px #FF0000;
}
button:disabled  { opacity:0.3 !important; }
input[type=text]:disabled,input[type=checkbox]:disabled,input[type=password]:disabled,textarea:disabled,select:disabled {
	opacity:0.7;
	background-color:#F0F0F0;
}
input[type=button]:disabled, input[type=submit]:disabled { opacity:0.2; }
input[type=text]:read-only,input[type=checkbox]:read-only,input[type=password]:read-only,textarea:read-only,select:read-only {
	font-weight:bold;
	border:1px #E9E9E9 solid;
	background-color:#FEFEFE;
	-webkit-box-shadow: none;
		 -moz-box-shadow: none;
					box-shadow: none;
}
input[type=text]:-moz-read-only,input[type=checkbox]:-moz-read-only,input[type=password]:-moz-read-only,textarea:-moz-read-only {
	font-weight:bold;
	border:1px #E9E9E9 solid;
	background-color:#FEFEFE;
	-webkit-box-shadow: none;
		 -moz-box-shadow: none;
					box-shadow: none;
}
input[readonly]:focus,textarea[readonly]:focus,select[readonly]:focus {
	border:1px #CCCCCC solid;
}
img, div, input, a { behavior: url("iepngfix.htc") }
ul,ol { list-style-position:outside; }
ol.smallList>li { margin:5px 7px; line-height:18px; }
ol.lower-alphabet { list-style-type:lower-alpha; }
ol.upper-alphabet { list-style-type:upper-alpha; }
p { margin-bottom:22px; }
b { font-weight:bold; }

a { cursor:pointer; color:#00c1d5; text-decoration:none; outline: 0;
		-webkit-transition: all 0.5s;
			 -moz-transition: all 0.5s;
				-ms-transition: all 0.5s;
				 -o-transition: all 0.5s;
						transition: all 0.5s;
}
a:visited { color:#0099CC;text-decoration:none; outline: 0; }
a:hover { color:#DA1884; text-decoration:none; outline: 0; }
a.lnkAnim { position: relative; padding-bottom:2px; }
a.lnkAnim:before {
  content: "";
  position: absolute;
  /*width: 20%;*/
  width: 15px;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #666666;
  visibility: hidden;
  transform-origin: 10% 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
a.lnkAnim:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.bx-wrapper a {
	-webkit-transition: none;
		 -moz-transition: none;
			-ms-transition: none;
			 -o-transition: none;
					transition: none;	
}
a.lnkOpacity { opacity:0.7 !important; }
a.lnkOpacity:hover { opacity:1.0 !important; }

h1 { display:block; /*font-family: 'Roboto', serif;*/font-family: 'Montserrat Alternates', sans-serif; font-size:24px; letter-spacing:1.0px; line-height:24px; margin-bottom:10px; font-weight:bold; }
h2 { display:block; /*font-family: 'Roboto', serif;*/font-family: 'Montserrat Alternates', sans-serif; font-size:20px; letter-spacing:1.0px; line-height:22px; margin-bottom:5px; font-weight:bold; }
h3 { display:block; /*font-family: 'Roboto', serif;*/font-family: 'Montserrat Alternates', sans-serif; font-size:18px; letter-spacing:1.0px; line-height:20px; margin-bottom:8px; font-weight:bold; }
h4 { display:block; /*font-family: 'Roboto', serif;*/font-family: 'Montserrat Alternates', sans-serif; font-size:16px; letter-spacing:1.0px; line-height:18px; margin-bottom:8px; font-weight:bold; }
h5 { display:block; /*font-family: 'Roboto', serif;*/font-family: 'Montserrat Alternates', sans-serif; font-size:14px; letter-spacing:1.0px; line-height:16px; margin-bottom:5px; font-weight:bold; }

* {
    padding: 0;
    margin: 0;
}

.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 { color:#BF6645; margin-right:24px; }
#byPandavamedia>a { color:#BF6645; }
#byPandavamedia>a:hover { color:#99E5FF; }

.cYellow { color:#FFFF00 !important; }
.cRed { color:#FF0000 !important; }
.cGrey { color:#999999 !important; }
.cBlue { color:#0099CC !important; }
.cGreen { color:#0099CC !important; }
.clr{clear:both}
.topSpc { display:block; height:70px; }
.gapSpc { display:block; height:40px; }
.noBorder { border:0 !important; }
.noMargin { margin:0 !important; }
.noPadding { padding: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:40px 10px; }
.goLeft { float:left !important; }
.goRight { float:right !important; }
.noResult { color:#CCCCCC; margin:50px 0px; }
.fldError { border:2px #fbc5c4 solid !important; }
.imageInsert { margin:5px; }
.noDataFound { color:#666666; font-style:italic; opacity:0.6; }
.noScroll { overflow:hidden; }
.noScrollMbl { overflow-x:hidden !important; overflow-y:hidden !important; position:fixed !important; } 
.goUpperCs { text-transform:uppercase !important; }
.goLowerCs { text-transform:lowercase !important; }
.allCenter { text-align:center !important; }
.allLeft { text-align:left !important; }
.allRight { text-align:right !important; }
.hiBrand { color:#58cada !important; }
.noShow { display:none !important; }
.cmsHeader { margin-top:28px !important; }
.alertErr { display:block; padding:10px; border:2px #FF0000 solid; color:#FF0000; }
.alertDone { display:block; padding:10px; border:2px #0099CC solid; color:#0099CC; }
.offRecord { color:#990000; font-style:italic; }
.fadeBtn { opacity:0.7; }
.fadeBtn:hover { opacity:1.0; }

section { display:block; position:relative; width:100%; }
.pageLoading { display:none; z-index:999999; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.8) url('../../i/page-loading.gif') no-repeat center center; }
.pageLoading>label { position:absolute; width:100px; height:20px; top:52%; left:0; right:0; margin:auto; text-align:center; background:#333333; color:#FFFFFF; }

a.lnkRead { display:inline-block; position:relative; font-size:12px; color:#990000 !important; /*margin-top:10px;*/ opacity:0.8 !important; text-transform:uppercase; white-space: nowrap; }
a.lnkRead:hover { opacity:1.0 !important; color:#0099CC !important; }
a.lnkMore { display:inline-block; position:relative; font-size:13px; color:#FFFFFF; background:#666666; border:1px #FFFFFF solid; white-space: nowrap; padding:3px 20px; min-width:80px; margin:10px 0; opacity:0.7; text-transform:uppercase; text-align:center; }
a.lnkMore:hover { opacity:1.0; }
a.lnkButton { display:inline-block; font-size:16px; line-height:20px; color:#333333; background-color:#F1F1EA; border:2px #333333 solid; padding:8px 30px; min-width:250px; margin-top:30px; text-align:center; text-transform:uppercase; font-weight:bold; }
a.lnkButton:hover { background:#FFFFFF; }
a.downloadFileLnk { display:table; font-size:18px; background:#EEEEEE; margin:15px; padding:12px 25px; border:2px #00C1D5 solid; 
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
}
a.downloadFileLnk:hover { 
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
		 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
					box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}
.flexBox { display:flex; justify-content:flex-start; align-items:center; gap:5%; }
.flexCol { flex-grow:1; }
.flexCol.sml { width:23%; }

/* FONT AWESOME */
.ficn { cursor:pointer; font-size:16px; opacity:0.5; }
.ficn:hover { opacity:1.0; }
.ficn.icnOff { color:#CCCCCC !important; }
.ficn.icnDel { color:#CC0000; }
.ficn.icnApprov { color:#339900; }
.ficn.icnEdit { color:#0099CC; }

/* WEBSITE CUSTOM CSS */
.ui-widget { /*font-family: 'Roboto', sans-serif !important;*/font-family: 'Montserrat', sans-serif !important; font-size:14px !important; }
/* ---------------------------------------------------------- */
/* SECTIONS */
body.homeBg {  }
.headerSection { z-index:100; position:fixed; top:0; left:0; right:0; width:100%; height:40px; background:#333333; border-bottom:1px #FFFFFF solid;
	-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.2);
		 -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2);
					box-shadow: 0 2px 0 rgba(0,0,0,0.2);
	-webkit-transition: all 0.5s ease;
		 -moz-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
			 -o-transition: all 0.5s ease;
					transition: all 0.5s ease;	
}
.headerSection.subHeaderSection { position:absolute; }
.footerSection { position:fixed; left:0; right:0; bottom:0; height:25px; background:#666666; border-top:1px #FFFFFF solid; }
.loginSection { position:fixed; top:0; bottom:0; left:0; right:0; margin:auto; width:90%; height:80vh; max-width:330px; max-height:480px; 
	/*background:#EFEFEF; 
	border:1px #DDDDDD solid;
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;*/
}
/*.mainSection { width:95%; margin-left:5%; min-height:100vh; background:#FFFF00; }*/
.mainSection { position:relative; width:100%; min-height:90vh; top:50px; }

/* WRAPPER */
.loginWrap { position:absolute; top:7%; bottom:7%; left:8%; right:8%; }
.contentWrap { position:relative; width:98%; height:100%; margin-top:10px; margin-bottom:100px; }
.contentWrap.floatWrap { overflow:hidden; }
.colWrap { position:relative; padding:15px 20px; }
.fileWrap { position:relative; padding:15px 20px; border:2px #C0C0C0 dashed; margin:10px; }
.topWrap { margin-bottom:20px !important; }

/* NOT FOUND PAGE */
.notFoundBox { position:absolute; left:0; right:0; top:20%; margin:auto; max-width:600px; }
.notFoundBox h1 { font-size:100px; line-height:100px; color:#DA1884; }
.notFoundBox h1.noConnection { font-size:26px !important; line-height:28px !important; color:#DA1884; }
.notFoundCnt { line-height:18px; margin-top:20px; }

/* ACTION PAGE */
.actionBox { position:absolute; left:0; right:0; top:20%; margin:auto; max-width:600px; }
h1.actionTitle {  font-size:26px !important; line-height:28px !important; color:#333333; }
.actionCnt { line-height:18px; margin-top:20px; }

/* LOGIN SCREEN */
.loginLogo { margin-bottom:10px; }
.loginBrief { width:96%; margin-bottom:10px; }
.loginBox { }
.loginBox ul>li { margin:8px 0; }
.loginBox ul>li>input { background:#666666; color:#CCCCCC; }
.loginBox ul>li>input:focus { background:#333333; color:#FFFFFF; }
.loginBox ul>li>input[type=submit] { background:#fce9a7; color:#333333; border:2px #FFFFFF solid; font-size:12px; letter-spacing:3px; padding:4px 20px 4px 25px; }
.loginBox ul>li>input[type=submit]:hover { background:#FEDB00; color:#000000; }
a.loginLnk { display: inline-block; margin:7px 8px; padding:2px 0; color:#00c1d5; border-bottom:1px #00c1d5 dotted; }
a.loginLnk:hover { color:#DA1884; }
.loginCopyright { font-size:10px; color:#999999; margin-top:10px; }
.sysLoginArea { position:relative; padding:10px 0px; letter-spacing:0.1px; }
.sysLoginArea ul { list-style-type:none;  }
.sysLoginArea ul>li { margin-bottom:10px; border:1px #FF0000 dotted; }
.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; }
.sysLoginCity { color:#999999; font-size:12px; margin-bottom:10px; }
.sysLoginContact { margin-top:1px; color:#CCCCCC; font-size:12px; }
.sysLoginContact>label { font-size:11px; font-weight:bold; color:#FF9900; padding-right:2px; }
.sysLoginContact a { color:#333333; }
.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%; }
.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') }
/* google */
.abcRioButtonContentWrapper { border-radius:10px !important; }

/* NAVIGATION */
.headerBar { position:absolute; top:1px; bottom:1px; left:10px; right:10px; }
.nvHeadLogo { float:left; height:30px; margin:3px 0; }
.nvHeadLogo img { max-height:100%; }
ul.nvMenu { float:left; list-style-type:none; height:30px; margin-left:1.5%; }
ul.nvMenu.nvRight { float:right; }
ul.nvMenu>li { position:relative; cursor:pointer; float:left; padding:11px 12px 12px 12px; color:#999999; font-size:11px; letter-spacing:0.8px; 
		-webkit-transition: all 0.5s;
			 -moz-transition: all 0.5s;
				-ms-transition: all 0.5s;
				 -o-transition: all 0.5s;
						transition: all 0.5s;
}
ul.nvMenu>li:hover { background:#777777; }
ul.nvMenu>li:hover>a { color:#FEDB00; opacity:1.0; }
ul.nvMenu>li a { color:#FFFFFF; opacity:1.0; }
ul.nvMenu>li a:hover { opacity:1.0; }
ul.nvMenu>li a.nvLogout { color:#6be6f3; font-weight:bold; }
ul.nvMenu>li.nvIcon { font-size:16px; padding:11px 10px 11px 10px; }
.nvSubBox { display:none; position:absolute; top:100%; left:0; min-width:165px; background:#777777; padding:5px 12px 8px 12px; text-align:left; /*border-bottom:3px #FFFFFF solid;*/
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
		 -moz-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
					box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}
ul.nvMenu>li>a>.fas { display:none; }
ul.nvMenu>li>a>.fasOn { display:block !important; }
.nvSubBox.subBoxRg { left:auto; right:0; min-width:100px; }
.nvSubBox ul { list-style-type:none; text-align:left; margin-top:6px; padding-top:6px; border-top:5px #666666 solid; }
.nvSubBox ul:first-child { margin-top:0; padding-top:0;  border-top:0; }
.nvSubBox ul>li { white-space:nowrap; padding:3px 0; border-top:1px #9F9F9F dotted; color:#CCCCCC; }
.nvSubBox ul>li:first-child { border:0; }
.nvSubBox ul>li.loginHi { margin-bottom:5px; color:#FFFFFF; }
.nvSubBox ul>li.loginHi>i { color:#81e1eb; }
.nvSubBox ul>li a { opacity:0.7; }
.nvSubBox.subBoxRg ul { text-align:right; }
.nvSubBox i { margin-right:3px; }
.mnOff { cursor:normal !important; opacity:0.4 !important; }

/* FOOTER */
.footerBar { width:98%; margin:4px 0; height:15px; font-size:9px; letter-spacing:0.8px; color:#FFFFFF; }
ul.nvFooter { float:left; list-style-type:none; overflow:hidden; }
ul.nvFooter>li { float:left; padding:0 10px; }
ul.nvFooter>li:first-child { padding-left:0; }
.footerBar a { color:#FFFFFF; opacity:0.7; }
.footerBar a:hover { opacity:1.0; }
.copyright { float:right; width:30%; text-align:right; }

/* MODAL POP UP */
.mdlPopCover { display:none; z-index:1000; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); }
.mdlPopBox { z-index:1001; overflow:hidden; position:absolute; top:0; bottom:10%; left:0; right:0; margin:auto; width:90%; max-width:580px; height:30%; max-height:430px; background:#FFFFFF; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
		 -moz-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
					box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
					
}
.mdlPopBox.popBoxEdit { max-width:900px; height:290px; }
#modalGuides>.mdlPopBox { max-width:900px; height:70%; max-height:none; bottom:5%; background:#EEEEEE; }
.mdlLoading { display:none; z-index:1001; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.8) url('../../i/mdl-loading.gif') no-repeat center center; }
.mdlPopClose { cursor:pointer; position:absolute; background:#FF0000; width:15px; height:15px; top:2px; right:2px; background:url('../../i/icons/icn-close-alert.png') no-repeat center center; background-size:contain; }
.mdlPopCnt { display:none; position:absolute; top:70px; bottom:20px; left:20px; right:20px; /*margin:20px;*/ font-size:12px; line-height:16px; }
.mdlCntFrame { display:none; position:absolute; top:55px; bottom:15px; left:15px; right:15px; margin:auto; border:1px #DDDDDD solid; background:#FFFFFF; overflow:hidden;
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
.mdlPopTtl { font-family: 'Montserrat Alternates', sans-serif; font-size:24px; line-height:24px; font-weight:bold; margin:20px 10px 25px 10px; }
.mdlPopTtl.popGuide { font-size:20px; }

/* GO LINK POPUP MODAL */
.goLnkCover { display:none; z-index:1000; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.9); }
.goLnkMsg { position:absolute; width:205px; height:20px; top:0; bottom:0; left:0; right:0; margin:auto; padding:10px; text-align:center; background:#FFFFFF; border:1px #DDDDDD solid;
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
		 -moz-box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
					box-shadow: 3px 3px 0 rgba(0,0,0,0.4);	
}
.goLnkMsg>span { display:inline-block; font-size:10px; text-align:center; padding:3px; }
.goLnkMsg>i { float:left; font-size:22px; margin-bottom:5px; }

/* FORM */
.formTarget { display:none }
h2.formGroupTitle { color:#84329B; font-size:15px; padding:2px 5px; margin-bottom:7px; border-bottom:1px #999999 dashed; }
h2.formGroupTitle.guideTtl { margin-bottom:0; }
h3.formFieldTitle { color:#003865; font-size:15px; padding:2px 5px; margin-bottom:7px; border-bottom:1px #999999 dashed; }
/* group heading with menu */
.groupHeadCol { position:relative; display:block; overflow:hidden; border-bottom:1px #999999 dashed; margin-bottom:7px; }
.groupHeadCol>h2.formGroupTitle { border-bottom:0; display:inline-table; float:left; /*width:40%;*/ margin-bottom:0; }
.formGroupHeadNv { position:absolute; right:0; bottom:7px; width:55%; text-align:right; }
.formGroupHeadNv.left { right:auto; left:20%; text-align:left; }
a.optSel { color:#000000; font-weight:bold; }
.formItmFlp { display:none; }
.itmShw { display:block; }
/* ---- */
.formGroupTitle>i { opacity:0.6; }
.formLoading { display:none; z-index:2; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../i/mdl-loading.gif') no-repeat center center; }
.formLoading.listLoading { position:fixed; z-index:100; background-color:rgba(241,241,241,0.8); }
.formLoading.loginLoading { background-color:rgba(241,241,241,0.8); }
.formLoading.editLoading { background-color:rgba(241,241,241,0.8); background-position:center 30%; }
.formLoading.loadHereLoading { background-color:rgba(241,241,241,0.8); background-position:center center; /*background-image:url('../../i/row-loading.gif');*/ }
.formLoading.dashboardLoading { background-size:contain; }
.formAlertCover { display:none; z-index:80; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.7); }
.formAlert { display:none; position:relative; width:92%; padding:7px; background-color:#e0e7cc; color:#990000; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
.formAlert.successAlert { background-color:rgba(0,193,213,0.3); }
.formAlert.fullBx { width:96.5%; }
.formAlert.listAlert { max-width:400px; top:50px; margin-top:2px; margin-left:auto; margin-right:10px; margin-bottom:25px; }
.formAlert.listAlert.successAlert { background-color:rgba(255,210,0, 0.85); }
/*.formAlert.listAlert { z-index:100; position:fixed; width:500px; height:150px; top:0; bottom:0; left:0; right:0; margin:auto; border:1px rgba(255,255,255,0.5) solid; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }*/
.formAlert.batchAlert { position:fixed; max-width:400px; top:15%; left:0; right:0; margin:auto; border:1px rgba(255,255,255,0.5) solid;
	-webkit-box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
		 -moz-box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
					box-shadow: 2px 2px 0 rgba(0,0,0,0.2);	
}
.formAlertClose { cursor:pointer; position:absolute; background:#FF0000; width:15px; height:15px; top:2px; right:2px; background:url('../../i/icons/icn-close-alert.png') no-repeat center center; background-size:contain; }
.formAlertCnt { margin-right:20px; font-size:12px; line-height:14px; }
.formAlertCnt a { color:#990000; }
.formAlertCnt a:hover { color:#0099CC; }
.formAlertCnt span { color:#000000; font-weight:bold; }
.formAlert.successAlert>.formAlertCnt { color:#003865; }
.formAlertMsg { display:none; background-color:rgba(255,255,255, 0.3); padding:10px; border-top:1px #999999 dashed; margin-top:10px; max-width:800px; text-align:left; }
.formAlertMsg ul { margin-left:20px; }
ul.formRow { list-style-type:none; overflow:hidden; }
ul.formRow.bottomRow { margin-top:5px; }
ul.formRow>li { position:relative; margin:10px 0 10px 0; text-align:left; }
ul.formRow>li.noteRow { margin:5px 0 15px 0; }
ul.formRow>li label { position:relative; display:block; text-align:left; color:#999999; font-size:13px; padding:3px 10px; }
ul.formRow>li label.noteLbl { color:#555555; }
ul.formRow>li label.imptLbl { color:#CC0000; }
.rSave { display:inline-block; float:right; }
ul.formRow>li label.fieldNote { float:left; display:block; border:1px #999999 dashed; padding:7px; margin:10px 3px 3px 3px; font-size:12px; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
ul.formRow>li label>span { color:#DA1884; }
ul.formRow>li label>.fldLblLf { float:left; padding-bottom:4px; }
ul.formRow>li label>.fldLblRg { float:right; padding-bottom:4px; margin-right:15px; }
ul.formRow>li>.fldLoading { display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.9) url('../../i/row-loading.gif') no-repeat center 70%; }
ul.formRow>li.formColLf { float:left; width:45%; text-align:left; margin-right:4%; }
ul.formRow>li.formColRg { float:right; width:45%; text-align:left; margin-right:4%; }
ul.formRow>li.formColFull { float:left; width:100% !important; margin:1px 0 7px 0 !important; }
ul.formRow>li.form2Col { float:left; width:45% !important; margin:1px 3.5% 7px 0 !important; }
ul.formRow>li.form3Col { float:left; width:32% !important; margin:1px 3.5% 7px 0 !important; }
ul.formRow>li.form3Col.sameAll { width:28.5% !important; }
ul.formRow>li.form4Col { float:left; width:20% !important; margin:1px 3.5% 7px 0 !important; }
ul.formRow>li.lrgText { font-size:26px; padding:3px; min-height:20px; }
ul.formRow>li.lrgText label { display:inline-table; padding:0; margin-right:5px; font-size:18px; opacity:0.8; }
ul.formRow>li.miniNote { position:relative; font-size:13px; padding:4px; font-weight:bold; border-bottom:1px #DDDDDD solid; background:#F6F6F6; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
.targetWrapper { display:none; }
.targetSelect { z-index:0; position:relative; }
.targetSelect.loading::after { z-index:1; content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255, 0.8) url('../../i/ajx-loading-bar.gif') no-repeat center; }
label.radioLbl { float:left; width:41%; color:#333333 !important; padding:10px 5px !important; }
.dshArr { cursor:pointer; position:absolute; font-size:15px; opacity:0.5; }
.dshArr:hover { opacity:1.0; }
.dshArr.dshArrPrev { left:8px; }
.dshArr.dshArrNext { right:8px; }
li.form3Col { width:33% !important; }
li.form4Col { width:25% !important; }
li.form5Col { width:20% !important; }
li.form5HlfCol { width:18% !important; }
li.form6Col { width:15% !important; }
li.form2of3Col { width:85% !important; }
li.form2of4Col { width:40% !important; }
li.form2of5Col { width:38% !important; }
li.form3of4Col { width:65% !important; }
li.form3of5Col { width:50% !important; }
li.form3of6Col { width:29% !important; }
li.form3of7Col { width:22% !important; }
li.formCredit { width:23.5% !important; }
li.formStatus { width:68.5% !important; }
.attnField { border:1px #FF0000 solid !important; }
.formRow ol { margin-left:15px; }
.loadHereArea { position:relative; min-height:100px; }
#loadHere { margin-top:5px; }
.formInfo { padding:3px; }
input.fld4Col { width:91% !important; }
input.fld6Col { width:86% !important; }
input.fld7Col { width:83% !important; }
input.quartField { width:70% !important; }
input.taxCust { width:94.6% !important; }
input.taxCust.icnSearch { width:89% !important; }
input.taxCust.sml { width:68% !important; }
/* FIELD ICONS */
input.imptFld { border:1px rgba(102,0,0,0.3) solid !important; 
	-webkit-box-shadow: 0px 0px 2px rgba(204,0,0,0.3) !important;
		 -moz-box-shadow: 0px 0px 2px rgba(204,0,0,0.3) !important;
					box-shadow: 0px 0px 2px rgba(204,0,0,0.3) !important;
}
input.boldFld { font-weight:bold !important; }
input.fldIcon { padding-right:35px; width:78%; }
input.rangeField { width:40%; }
input.icnDate { background-image:url('../../i/icons/incf-date.png'); background-repeat:no-repeat; background-position:95% center; }
input.icnSearch { width:83.5%; background-image:url('../../i/icons/incf-search.png'); background-repeat:no-repeat; background-position:97% center; }
input.suggestVal { border:1px #DA1884 solid !important; font-weight:bold; }
input.fldRadio { position:absolute; opacity:0; cursor:pointer; height:0; width:0; }
/* Customize the label (the container) */
.bxRadio {
	display: block;
	position: relative;
	padding-left: 25px !important;
	/*margin-bottom: 12px;*/
	cursor: pointer;
	/*font-size: 12px;*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  /*.bxRadio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }*/
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 4px;
	left: 4px;
	height: 14px;
	width: 14px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .bxRadio:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .bxRadio input:checked ~ .checkmark {
	background-color: #0099CC;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .bxRadio input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .bxRadio .checkmark:after {
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
  }
select.yesNoFld { width:80%; }
textarea.addressField { height:94px; }
textarea.streetField { height:84px; }
.fldBox { position:relative; }
.fldCover { z-index:10; position:absolute; top:0; bottom:0; left:0; right:0; width:96%; background:rgba(255,255,255,0.9); text-align:center; }
.fldCover>span { display:inline-block; width:90% !important; font-size:11px; margin:3% 2%; }
/* FORM BUTTONS */
ul.formBottons { float:right; list-style-type:none; overflow:hidden; }
ul.formBottons>li { float:left; margin:0 3px; }
ul.batchButtons { list-style-type:none; }
ul.batchButtons>li { display:inline-block; }
button.btnForm { cursor:pointer; background:#333333; color:#FFFFFF; font-size:12px; padding:10px 18px; margin:2px; border:0px; opacity:0.7; 
	-webkit-border-radius: 10px; 
	   -moz-border-radius: 10px; 
					border-radius: 10px;
		-webkit-transition: all 0.5s;
			 -moz-transition: all 0.5s;
				-ms-transition: all 0.5s;
				 -o-transition: all 0.5s;
						transition: all 0.5s;
}
button.btnForm:hover { opacity:1.0; 
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
		 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
					box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}
button.btnForm>i { opacity:0.6; }
.formCheckConfirm { margin-bottom:10px; font-size:15px; }
.btnForm.btnOff { background:#CCCCCC !important; opacity:0.5; }
.btnForm.btnOff:hover { opacity:0.5; box-shadow:none !important; }
.btnForm.btnBatch { opacity:0.9; padding:6px 15px; border:1px rgba(255,255,255,0.5) solid;
	-webkit-border-radius: 7px; 
	   -moz-border-radius: 7px; 
					border-radius: 7px;
}
.btnForm.btnBatch:hover {
	-webkit-box-shadow: 0px 0px 2px rgba(255,255,255,0.6);
		 -moz-box-shadow: 0px 0px 2px rgba(255,255,255,0.6);
					box-shadow: 0px 0px 2px rgba(255,255,255,0.6);
}
.btnForm.btnSave { background:#0099CC; }
.btnForm.btnDelete { background:#990000; }
.btnForm.btnEdit { background:#339900; }
.btnForm.btnProcess { background:#CC9900; }
.btnForm.btnCancel { background:#666666; }
.btnForm.btnConfirm { background:#3399ff; }
.btnForm.btnUpload { background:#003366; }
.btnForm.btnReload { background:#03bbc7; }
.btnForm.btnImport { background:#006600; }
.btnForm.btnExport { background:#84329B; }
.btnForm.btnExportXML { background:#1e6091; color:#ffff00; }
.btnForm.btnPrint { background:#00C1D5; }
.btnForm.btnScanQR { background:#edb610; }
.btnForm.btnSavePop { background:#0099CC; padding:12px 18px; margin-top:25px; }
.btnForm.biggerBtn { font-size:16px; padding:13px 20px; min-width:180px; border:2px #999999 solid; 
	-webkit-border-radius: 12px; 
	   -moz-border-radius: 12px; 
					border-radius: 12px;
}

/* PAGE CONTENT */
.pageHeader { padding:3px 0; width:98%; overflow:hidden; }
.pageHeader.headFloat { position:absolute; width:40%; top:-10px; left:0; right:0; margin:auto; }
.headerLf { float:left; width:45%; padding:0 1.2%; margin-top:5px; }
h1.pageTitle { color:#02afc1; }
h1.pageTitle.efaktur { color:#999999; }
h2.pageSubTitle { margin-bottom:5px; font-size:16px; color:#003865; }
h1.pageTitle.ttlLf, h2.pageSubTitle.ttlLf { float:left; width:45%; text-align:left; padding:0 1.2%; margin-top:5px; }
h2.pageSubTitle.ttlLf.fullTtl { width:100%; }
.pageTitle>i { opacity:0.6; color:#DA1884; font-size:22px; float:left; width:5%; max-width:35px; }
.pageTitle>label { float:left; margin-left:2%; width:92%; }
.pageBrief {  }
/* add page */
.listLoading { display:none; z-index:2; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../i/mdl-loading.gif') no-repeat center center; }
.addPg-detailBox { position:relative; overflow:hidden; width:100%; min-height:100px; background:#FFFFFF; border:1px #999999 solid; border-bottom:3px #999999 solid; margin-bottom:10px;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
}
.addPg-detailBox.detailLeftBox { float:left; width:48%; padding:5px; }
.addPg-detailBox.detailRightBox { float:right; width:48%; padding:5px; }
.addPg-listBox { position:relative; width:100%; height:80vh; margin-bottom:40px; background-color:rgba(255,255,255, 0.7); }
.addPg-listBox.smListBox { height:auto; }
.addPg-importListBox { position:relative; width:100%; min-height:30vh; margin-top:10px; margin-bottom:20px; overflow-x:auto; }
.addPg-infoBox { position:relative; overflow:hidden; background:#E9E9E9; border:1px #999999 solid; border-top:3px #999999 solid; }
.addPg-uploadBox { position:relative; overflow:hidden; background-color:rgba(0,153,204,0.15); }
.addPg-uploadList { position:relative; overflow:hidden; margin-top:10px; }
.addPg-buttonBox { position:relative; overflow:hidden; margin-top:10px; }
.addPg-cntBox-col { float:left; width:49%; height:100%; text-align:left; border-left:1px #CCCCCC solid; }
.addPg-cntBox-col:first-child { border-left:0; }
.addPg-cntBox-col.cntColFix { min-height:210px; }
.addPg-cntBox-col.cnt2hlfCol { width:74%; }
.addPg-cntBox-col.cnt2-1Col { width:66%; }
.addPg-cntBox-col.cnt2hlf-1Col { width:61.6%; }
.addPg-cntBox-col.cnt3Col { width:33%; }
.addPg-cntBox-col.cnt3hlfCol { width:37%; }
.addPg-cntBox-col.cnt4Col { width:24.5%; }
.addPg-cntBox-col.cnt4hlfCol { width:30%; }
.addPg-cntBox-col.cnt4qrtCol { width:27.5%; }
.addPg-cntBox-col.cnt5Col { width:19.8%; }
.addPg-cntBox-col.cnt6Col { width:16.6%; }
.addPg-cntBox-col.cnt6hlfCol { width:17.5%; }
.addPg-cntBox-col.cnt7Col { width:14.2%; }
.addPg-cntBox-col.totalCol { width:54%; }
.addPg-cntBox-col.statusCol { width:45%; }
.addPg-cntBox-col.cntFullCol { border-left:0; width:100%; }
.addPg-cntBox-col.cntFullRow { border-left:0; border-top:2px #999999 solid; width:100%; }
.addPg-cntBox-col.cntFullRowTop { border-left:0; border-bottom:2px #999999 solid; width:100%; }
.addPg-cntBox-col.cntInfoBox { float:right; width:16%; background:#F9F9F9; }
.addPg-cntBox-col.cntInfoBox input { width:88%; }
.addPg-cntBox-col.cntFileBox { background:rgba(0,153,204,0.1); }
.addPg-cntBox-col.borderBtm { border-bottom:1px #CCCCCC solid !important; }
.headerRow { background:rgba(255,255,0,0.1); }
.canceledRow { text-decoration: line-through !important; font-style:italic !important; opacity:0.5 !important; }
tr.canceledRow>td { text-decoration: line-through !important; font-style:italic !important; opacity:0.8 !important; }

/* GRID BOX STYLE */
.gridBx { 
	text-align:left; padding:0; 
	display: grid;
	/*overflow: hidden;*/
	text-align: center;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	margin-left:0 !important;
	margin-top:10px;
}

/* TABS BOX */
.pgTab { margin-bottom:10px; }
ul.dtTab { list-style-type:none; overflow:hidden; margin:10px 20px 0px 20px; }
ul.dtTab>li { cursor:pointer; float:left; bottom:0; margin-top:2px; background:#FFFFFF; padding:10px 20px; border:1px #999999 solid; border-bottom:0; border-left:0; opacity:0.5; 
	-webkit-border-radius: 5px 5px 0 0; 
	   -moz-border-radius: 5px 5px 0 0; 
					border-radius: 5px 5px 0 0;
}
ul.dtTab>li:first-child { border-left:1px #999999 solid; }
ul.dtTab>li:hover { opacity:1.0; }
ul.dtTab>li.tabOn { background:#999999; opacity:1.0; color:#FFFFFF; padding:11px 20px; margin-top:0px; }
.dtTabBox { position:relative; border-top:5px #999999 solid; width:100%; }
.dtTabCnt { display:none; overflow:hidden; min-height:100px; background:#FFFFFF; border:1px #999999 solid; border-bottom:3px #999999 solid;
	-webkit-border-radius: 0 0 3px 3px; 
	   -moz-border-radius: 0 0 3px 3px; 
					border-radius: 0 0 3px 3px;
}
.dtTabCnt.tabShow { display:block; }

/* DATA TABLES CUSTOMIZE */
.dataTables { border-top:3px #EEEEEE solid; }
.dataTables_row_loading { position:absolute; top:1px; bottom:0; left:1px; right:1px; background:rgba(255,255,255,0.9) url('../../i/row-loading.gif') no-repeat center center; }
.dataTables_length { width:15%; text-align:left; } /* entry length  selection */
.dataTables_length select { max-width:50px; background:#FFFFFF; padding:2px; border:1px #CCCCCC solid; }
.dataTables_filter { width:25%; } /* entry search */
.dataTables_filter input { border:1px #CCCCCC solid; padding:6px; 
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
}
.dataTables_info { position:absolute; bottom:7px; left:10px; }
.dataTables_paginate {  } /* paging */
.dataTables_paginate a.paginate_button { color:#FF0000 !important; }
.dataTables thead { background:#CCCCCC; }
.dataTables tbody>tr { position:relative; cursor:pointer; }
.dataTables tbody>tr:last-child>td { border-bottom:1px #DDDDDD solid; }
.dataTables tfoot>tr>th { background:#DDDDDD; border-left:1px #999999 solid !important; padding-left:10px !important; text-align:left !important; }
.dataTables tfoot>tr>th:first-child { border-left:0  !important; }
.dataTables thead>tr>th.colImpt { color:#990000 !important; }
.dataTables tfoot>tr>th.colImpt { background:rgba(255,0,0,0.2) !important; }
.dataTables tfoot>tr>th.allRight { text-align:right !important; }
table.fixedHeader-floating {
    position: fixed !important;
    top: 41px !important;
}
.dataTablesImport th {
	min-width:100px;
  border-top: 2px solid #666666;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  background:#EEEEEE;
}
.dataTablesImport th:first-child {
  border-left: 1px solid #dddddd;
}
.dataTablesImport tbody tr:first-child { font-weight:bold; }
/* COLUMN CLASS */
.colOff { opacity:0.4 !important; display:none; }
.colID { width:1%; }
.colIcon { width:2%; }
.colPeriod { width:9%; }
.colPeriodSm { width:6%; }
.colDate { width:12%; }
.colPrice { width:14%; }
.colPriceMd { width:12%; }
.colPriceSm { width:11%; }
.colPriceTy { width:10%; }
.colPriceXs { width:7%; }
.colQty { width:6%; }
.colCode { width:20%; }
.colCodeSm { width:14%; }
.colCodeXs { width:13%; }
.colCodeXss { width:9%; }
.colUnit { width:7%; }
.colPhone { width:18%; }
.colRegNum { width:45%; }
.colName { width:25%; }

/* DROP UPLOAD */
#drop {
  margin: 1%;
  padding: 1%;
  border:2px #CCCCCC dashed;
  text-align: center;
  p {
    display: none; 
  }
	-webkit-transition: all 0.5s;
	 -moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		 -o-transition: all 0.5s;
				transition: all 0.5s;
}
#drop.dropHover { border:2px #999999 dashed; background:rgba(255,255,255,0.5); }
.dropContent { width:90%; max-width:700px; margin:auto; font-size:12px; line-height:18px; }
.dropContent.dropGroup { max-width:950px; }
.dropContent a { color:#666666; opacity:0.4; }
.dropContent a:hover { opacity:1.0; }
.dropContent span { display:block; font-size:12px; line-height:17px; color:#666666; margin-top:5px; }
.dropFileTxt { font-size:22px; line-height:38px; }
.dropFileBox { display:none; width:300px; margin:15px auto; }
.dropFileIcn { width:300px; margin:15px auto; }
ul.dropList { list-style-type:none; text-align:center; margin:0; padding:0; }
ul.dropList>li { display:inline-table; padding:5px; margin:5px; }
ul.dropList>li p { margin:0; line-height:14px; }
ul.dropList>li i { display:block; color:#999999; font-size:11px; }

/* DATEPICKER CALENDAR */
.ui-datepicker {
	margin-top:5px !important;
}
/* UI AUTOCOMPLETE */
.ui-autocomplete {
  max-height: 250px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
  height: 250px;
}

/* GUIDES */
ul.guideLst { list-style-type:none; overflow:hidden; margin:20px; }
ul.guideLst>li { cursor:pointer; display:inline-block; vertical-align:top; width:30%; height:105px; border:1px #EEEEEE solid; background:#F0F0F0; margin:10px; 
	-webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;	
}
ul.guideLst>li.imptPt { border:2px #FF9900 dashed; }
ul.guideLst>li.hilightPt { border:1px #999999 solid; background:#CCCCCC; }
ul.guideLst>li>a { display:block; margin:15px; color:#666666; font-size:17px; line-height:21px; }
ul.guideLst>li.imptPt>a { color:#FF6600; font-weight:bold; }
ul.guideLst>li:hover { background:rgba(254,219,0,0.3);
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
		 -moz-box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
					box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}
ul.guideLst>li:hover>a { color:#000000; }
ul.guideLst>li:hover>a>label, ul.guideLst>li.hilightPt:hover>a>label { color:#0099CC; }
ul.guideLst>li>a>label { cursor:pointer; display:block; color:#CCCCCC; font-size:24px; margin-bottom:10px; }
ul.guideLst>li.hilightPt>a>label { color:#FFF4B2; }
.guideImg { position:absolute; left:6%; top:4%; bottom:8.5%; width:40%; display:flex; justify-content: center; align-items: center; }
.guideImg img { max-width:100%; }
.guideMsg { position:absolute; right:6%; top:4%; bottom:8.5%; width:42%; text-align:left; display:flex; justify-content: center; align-items: center; }
h3.guideTtl { margin-bottom:10px; font-size:28px; line-height:28px; color:#003865; }
h3.guideTtl>label { display:block; color:#DA1884; font-size:14px; font-weight:normal; padding:0 2px; margin-bottom:8px; }
.guideTxt { margin-top:20px; }
.guideTxt>ol,.guideTxt>ul { margin-left:15px; }
.guideTxt>ol>li,.guideTxt>ul>li { padding-left:8px; margin:10px 0; }
.imptGuidePt { color:#FF0000; }

/* SLIDER */
.slider { position:relative; width:100%; height:100%; }
.sliderItem { width:100%; height:100%; overflow:hidden; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #00C1D5 !important;
}

/* BATCH MENU */
.btchMenuBox { display:none; z-index:80; position:fixed; width:100%; max-width:570px; padding:5px 5px 3px 5px; top:42px; left:0; right:0; margin:auto; background:#72c1dc; 
	-webkit-box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
		 -moz-box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
					box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	-webkit-border-radius: 0 0 5px 5px;
	   -moz-border-radius: 0 0 5px 5px;
					border-radius: 0 0 5px 5px;
}

/* PROFILE */
.avtrIcon { position:relative; width:200px; height:200px; text-align:center; vertical-align:middle; background-color:#CCCCCC; border:2px #FFFFFF solid; margin:5% 20%; 
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
					border-radius: 50%;
}
.avtrIcon>i { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:90px; height:90px; font-size:90px; color:#FFFFFF; }

/* MOBILE SETUP */
.tagMobile { display:none; }
.menuBoxDesktop { position:absolute; display:block; top:8px; bottom:8px; left:8px; right:8px; }
.menuBoxMobile { position:absolute; display:none; top:8px; bottom:8px; left:8px; right:8px; }
.nvMenuTxtDesktop { display:block; }
.nvMenuTxtMobile { display:none; }

/* QR SCANNER */
.scanQRbtn { display:none; }
.uploadQRUrl { display:block; }
/*.qrcode-text-btn { display:inline-block; background:url(//dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg) 50% 50% no-repeat; background-color:#FFFF00; cursor:pointer}*/
.qrcode-text-btn { margin-top:10px; }
.qrcode-text-btn > input[type=file] { position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}
.scanQRVideo { position:relative; display:block; width:100%; height:0; padding-bottom:95%; background:#EEEEEE; overflow:hidden; }
.scanQRVideo video { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
/* HTML5 QR READER */
#QRreader { display:none; width:100%; border-radius:5px !important; background:#FFFFFF !important; border:2px #999999 solid !important; margin:10px 0 !important; }
#QRreader button { background:#FF9900 !important; border-radius:10px !important; color:#FFFFFF !important; border:1px #FFFFFF solid !important; padding:10px 20px !important; margin:10px 0 !important; }
#QRreader span { font-size:15px !important; padding:5px !important; }
span#QRreader__status_span { font-size:11px !important; padding:3px 7px !important; }

/* POP EDIT FORM */
.edtFrBox {  }
ul.edtCols { list-style-type:none; overflow:hidden; border-bottom:1px #CCCCCC solid; }
.edtCols.headCols { background:#EEEEEE; }
ul.edtCols.headCols>li { font-weight:bold; min-height:0; }
ul.edtCols>li { float:left; width:28%; min-height:43px; padding:10px; text-align:left; border-left:1px #CCCCCC solid; }
ul.edtCols>li:first-child { border-left:0; }
ul.edtCols>li.edtColCode { width:18%; }
ul.edtCols>li.edtColPrice { width:16%; }
ul.edtCols>li.edtColQty { width:8%; }
.edtFrBox input[type=text] { width:82%; }
ul.edtCols>li.edtColQty input[type=text] { width:68%; }

/* SYSTEM ALERT */
.sysAlert { background:#990000; color:#FFFFFF; width:98.15%; padding:1%; margin-bottom:5px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
					border-radius: 3px;
}
.sysAlert>b { font-weight:bold; border-bottom:1px #CCCCCC dashed; }
.ntAlert { display:block; padding:5px; border-radius:5px; font-style:italic; margin-bottom:20px; background-color:rgba(255,255,0 ,0.4); }
i.fa-exclamation-triangle { color:#990000 !important; }
i.fa-shield-alt { color:#6a994e !important; }
i.fa-circle-check { color:#0099CC !important; }
.ui-tooltip { background-color:#FFFF00 !important; color:#990000 !important; font-size:13px !important; padding:3px 7px !important; border-radius:5px !important; line-height:15px !important; box-shadow: 0 0 3px rgba(0,0,0, 0.2) !important; }

/* MOBILE RESPONSIVE */
/* small device ----------- */
@media only screen 
and (max-width: 768px) {
		#lgnForm input[type=submit] { padding:10px 25px; margin-right:5px; }
		#lgnForm ul.formRow>li { margin:5px 0; }

		.tagMobile { display:block; }
		.menuBoxDesktop { display:none; }
		.menuBoxMobile { display:block; }
		
		h1 { font-size:19px; letter-spacing:0.3px; line-height:22px; margin-bottom:5px; }
		h2 { font-size:16px; letter-spacing:0.3px; line-height:16px; }
		h3 { font-size:14px; letter-spacing:0.3px; line-height:14px; }
		h4 { font-size:13px; letter-spacing:0.3px; line-height:13px; }
		h5 { font-size:12px; letter-spacing:0.3px; line-height:12px; }

		.mainSection { min-height:auto; }
		/* WRAPPER */
		.contentWrap { width:96%; margin-top:-10px; }
		
		/* NOT FOUND PAGE */
		.notFoundBox h1 { font-size:60px; line-height:60px; color:#DA1884; }
		.notFoundCnt { line-height:18px; margin-top:20px; }
		
		/* NAVIGATION */
		.nvHeadLogo { margin-right:20px; }
		.headerBar { left:5px; right:5px; }
		ul.nvMenu>li { background:#555555; margin:0 1px; 
			-webkit-touch-callout: none;
		    -webkit-user-select: none;
		    -khtml-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		    -webkit-tap-highlight-color: transparent;
		}
		ul.nvMenu>li>a>.fas { display:block; font-size:15px; }
		ul.nvMenu>li>a>label { display:none; }
		.nvSubBox ul>li { 
			font-size:13px; padding:5px 0; 
		}
		
		/* FOOTER */
		ul.nvFooter { display:none; }
		.copyright { float:none; width:80%; text-align:center; }

		/* PAGE COLUMN */
		.colWrap { padding:15px 20px 10px 20px; }
		.addPg-cntBox-col { float:none; width:100% !important; height:100%; }
		.addPg-detailBox { float:none; width:100% !important; }
		
		/* PAGE CONTENT */
		h1.pageTitle.ttlLf, h2.pageSubTitle.ttlLf { float:left; width:96%; margin-bottom:15px; }
		.pageTitle>i { width:7%; }
		.pageTitle>label { margin-left:3%; width:90%; }
		ul.formBottons { float:none; width:98%; margin:10px auto 20px auto; }
		ul.formBottons>li { float:left; margin:0 3px; }
		
		/* FORM */
		input.rangeField { width:100%; }
		
		/* LIST HEADER */
		.pageHeader.headFloat { position:relative; width:98%; margin-top:10px; }
		/* DATA TABLES */
		.dataTables_wrapper {  margin-top:0; }
		.dataTables_length { display:none; }
		.dataTables_filter { width:98%; padding-top:0; }
		.dataTables_info { display:none; }
		.dataTables_paginate { width:98%; }
		
		/* QR SCANNER */
		.scanQRbtn { display:block; }
		.uploadQRUrl { display:none; }
}

/* PHONES LANDSCAPE ORIENTATION */
@media only screen 
and (max-width: 768px)
and (orientation: landscape) {
		/* TOP HEADER NAVIGATION */
		/*#headerBar { height:80px !important; }
		#headerBar.bannerHeaderBar { height:100px !important; background-position:center -50px; }
		#headerBar.stickyHeader { height:60px !important; }
		.nvHeadLogo { top:10px; left:0; width:auto; height:80px; }
		.nvHeadSmLogo { top:12px; width:45%; }
		.nvMenuArea { top:40px; }*/
		
		/* TOP NAVIGATION DROP DOWN */
		/*.nvMenuDrop {
				width:55vw;
				overflow:hidden;
		}
		ul.nvMenu { float:left; width:50%; margin:8px 0; }*/
		
		/* PAGE BOTTOM */
		/*.bottomCol.btmColMid { height:90px; text-align:left; }
		.bestRateIcn { left:1%; right:auto; }*/
}