/* CSS Document */
html { 
	margin: 0px; 
}
body,td,th {
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'Roboto Condensed', sans-serif !important;
	font-size: 18px;
}
body {
	margin: 0px;
	height: 100vh;
	background: #fff; /* rgb(6,66,107); */
	background: linear-gradient(180deg, rgba(6,66,107,1) 0%, rgba(10,92,148,1) 49%);
}


.login_home { width: 100%; height: 80vh; padding-top: 5%; }
.login_box { text-align: center; color: #fff; margin: 0 auto; width: 25%; margin-top: 0%; }
.login_logo { text-align: center; }
.login_logo img { height: 4em; }

.login_unit { float: none; }
.login_options { margin-left: 2em; float: left; margin-top: 6.6em; }
.login_option_button { position: relative; cursor: pointer; font-weight: bold; font-size: 1em; float: left; width: 31%; margin: 1%; border: 0px solid #CCC; padding: 1.5em 0em; background: rgb(10,92,148);
background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); border-radius: .8em; width: 100%; margin-bottom: 1em; text-transform: uppercase; }
.login_option_button_selected { position: relative; cursor: pointer; font-weight: bold; font-size: 1em; float: left; width: 31%; margin: 1%; border: 0px solid #CCC; padding: 1.5em 0em; rgb(163,91,1);
background: linear-gradient(180deg, rgba(163,91,1,1) 0%, rgba(224,124,0,1) 49%); border-radius: .8em; width: 100%; margin-bottom: 1em; text-transform: uppercase; }
.login_selected_option { position: absolute; left: 3em; top: 1.5em; color: #CF3; }

.login_box { margin-top: 3em; }
.login_box:after { content: ""; display: table; clear: both; }
.login_left { float: left; width: 40%; padding: 2em 3em; color: #fff; }
.login_right { position: relative; float: right; overflow: hidden; padding: 2em 3em; color: #fff; text-align: center; }
.login_clock { color: #fff; font-size: 3.5em; }
.login_date { font-size: 2em; }
.login_spinner { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 67vh; background: rgb(5, 46, 74,0.6); font-size: 2em; color: #fff; margin-top: 0em; border-radius: 0em; padding-top: 15%; z-index: 1000;  }

.login_pin { height: 1em; letter-spacing: 1em; margin-left: 0em; padding: 1em; width: 100%; font-size: 1.5em; line-height: 1em; }
.login_calc { margin-left: 0em; margin-top: 0em; padding: 1em; margin: 0 auto; }
.login_calc:after { content: ""; display: table; clear: both; }
.login_num { cursor: pointer; font-weight: bold; font-size: 1.6em; line-height: 1em; float: left; width: 31%; margin: 1%; border: 0px solid #CCC; padding: 1.1em 0em; background: rgb(10,92,148);
background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); border-radius: .8em; }
.login_num_red { cursor: pointer; font-weight: bold; font-size: 1.2em; float: left; width: 31%; margin: 1%; border: 0px solid #CCC; padding: 1.5em 0em; background: rgb(163,91,1);
background: linear-gradient(180deg, rgba(163,91,1,1) 0%, rgba(224,124,0,1) 49%); border-radius: .8em; }

.login_error_box { 
	font-size: .65em !important; text-align: center; width: 20%;
    margin: 0 auto;
    background: rgba(10,92,148,0.8);
	background: rgb(10,92,148);
	background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%);
    padding: 1em;
    border-radius: 1em; border: 2px solid #074066; 
}
.login_error_message { margin-bottom: 1em; }
.login_error_button { cursor: pointer; font-weight: bold; width: 31%; margin: 0 auto; border: 0px solid #CCC; padding: .8em 0em; background: rgb(163,91,1);
background: linear-gradient(180deg, rgba(163,91,1,1) 0%, rgba(224,124,0,1) 49%); border-radius: .8em; font-size: .8em !important; }

/* ==================== */

.blue { color: #06c; }
.vgrey { color: #ccc !important; }
.red { color: #c00 !important; }
.torg { color: #ff9f40; }
.whitetxt { color: #fff; }
.purple { color: #639; }
.spinbox { padding: 1em; text-align: center; }
.spinblue { font-size: 3em; color: #205980; }
.clickable { cursor: pointer; }
.user-menu-icon { position: relative; text-align: center; padding: 1em 0em; border-bottom: 1px solid rgba(0,0,0,0.2); }
.usr_icon { font-size: 2em; }
.usr_name { font-size: .8em; }
.user_onum { position: absolute; top: .7em; right: .2em; background: #c00; color: #fff; font-weight: bold; font-family: 'Roboto Condensed'; font-size: .8em; border-radius: .8em; padding: .2em .5em; }

.dv5 { width: 4%; }
.dv10 { width: 9%; }
.dv15 { width: 14%; }
.dv20 { width: 19%; }
.dv25 { width: 24%; }
.dv30 { width: 32%; }
.dv40 { width: 39%; }
.dv50 { width: 49%; }
.dv60 { width: 59%; }

.bdr { border: 1px solid #c00;}
.bdo { border: 1px solid #06c; }

.rgt { float: right; }
.lft { float: left; }
.afd { content: ""; display: table; clear: both; }
.clickable { cursor: pointer; }
.rtx { text-align: right !important; }
.cen { text-align: center !important; }
.uc { text-transform: uppercase !important; }

.gobtn { cursor: pointer; background: rgb(15,78,139); background: linear-gradient(180deg, rgba(15,78,139,1) 0%, rgba(0,102,204,1) 100%); color: #fff; font-weight: bold; font-size: 1.45em; padding: .4em; border-radius: .4em; box-shadow: 3px 3px rgba(0,0,0,0.5); }
.date_tbl { margin-left: 2em; } .date_tbl td { padding-left: .5em; }

/* ==================== */

.full-spinbox { position: absolute; left: 0; top: 0; width: 99.7%; height: 100vh; background: rgba(255,255,255,0.7); text-align: center; padding-top: 10%; }
.shop_nav { float: left; padding: 0em; color: #fff; height: 96vh; text-align: center; }
.shop_nav li { list-style: none; color: #fff; padding: 1em; cursor: pointer; }
.shop_nav li i { font-size: 2.2em; }
.shop_nav li img { height: 2.3em; }
.shop_cnt { position: relative; overflow: hidden; background: #fff; border-left: 4px solid #358fcc; height: 100vh; }

/* ==================== */

.ct-hdr { width: 98.5%; background: rgb(77,77,77);
background: linear-gradient(180deg, rgba(77,77,77,1) 0%, rgba(45,45,45,1) 49%); padding: .4em 1em; font-weight: bold; letter-spacing: -1px; color: #fff; border-bottom: 4px solid #358fcc; }
.ct-hdr-lft { float: left; font-size: 1.4em;  }
.ct-hdr-rgt { float: right; font-size: 1.5em;  }
.ct-hdr-rgt li { list-style: none; display: inline; padding: 0em 0em 0em 1em; cursor: pointer; }

/* ============================ */

.no-data { padding: .4em 0em; font-weight: bold; color: #c00; font-size: 1.3em; text-align: center; padding: 1em; }
.no-data-np { padding: .4em 0em; font-weight: bold; color: #c00; font-size: 1.3em; text-align: center; padding: 0em; }
.ct-prod { border-bottom: 2px solid #ddd; padding: 1em; width: 96%; }
.ct-prod-nm { float: left; width: 28%; margin-right: 5%; }
.ct-prod-in { float: left; width: 10%; text-align: center; border: 1px solid #090; padding: .3em 0em; border-radius: .8em; }
.ct-prod-inr { float: left; width: 10%; text-align: center; border: 1px solid #c00; padding: .3em 0em; border-radius: .8em; }
.ct-prod-pr { float: left; width: 17%; font-size: 1.3em; letter-spacing: -1px; color: #333; font-weight: bold; text-align: right; margin-right: 3%; }
.ct-prod-bc { font-weight: bold; color: #333; font-size: .9em; }
.ct-prod-sz { color: #090; }
.ct-qty { font-size: 1.3em; font-weight: bold; line-height: .9em; }
.ct-prod-qt { float: left; width: 28%; }
.ct-prod-bn { text-align: right; float: left; width: 8%; margin-top: .6em; }
.qnum { text-align: center; width: 60%; font-size: 1.3em; font-weight: bold; color: rgb(10,92,148); }
.qbtn { text-align: center; width: 20%; }
.qbtn i { font-size: 2em;cursor: pointer; }
.qbtnx { color: #c60; }
.prod-bn { cursor: pointer; background: rgb(10,92,148); background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); color: #fff; font-weight: bold; font-size: 1.1em; padding: .6em 1em; border-radius: .4em; }
.prod-bn-dis { float: right; width: 50%; text-align: center; list-style: none; cursor: not-allowed; background: rgb(204,204,204); background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(221,221,221,1) 100%); color: #aaa; font-weight: bold; font-size: 1.1em; padding: .6em 1em; border-radius: .4em; }

/* ============================ */

.ct-cnt { width: 99.9%; height: 80vh; }
.ct-cnt-inf { background: rgb(221,221,221); background: linear-gradient(180deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%); width: 65%; border-right: 4px solid #CCC; height: 99vh; float: left; }
.ct-cnt-rec { overflow: hidden; height: 99vh; position: relative; }
.ct-cnt-sch { padding: 1em; border-bottom: 4px solid #c60; background: rgb(10,92,148); background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); color: #fff; text-align: right; }
.ct-cnt-sch input[type=text] { border: 2px solid #09C; border-radius: .5em; padding: .4em .6em; font-size: 1.2em; }
.ct-cnt-sch input[type=button], .ct-cnt-sch input[type=submit] { border: 2px solid #09C; background: rgb(10,92,148); border-radius: .5em; padding: .4em .6em; font-size: 1.2em; }
.search { box-shadow: 3px 4px rgba(0,0,0,0.8); }
.ct-cnt-res { width: 100%; height: calc(100vh - 150px) !important; overflow-y: scroll !important; }
.ct-cnt-rct {
	padding: 1em; border-bottom: 1px solid #666; background: rgb(10,92,148); background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); color: #fff; text-align: right;
	font-size: 1.43em; width: 92%; font-weight: bold; border-bottom: 4px solid #c60;
}

.ct-cnt-hdi { float: left; color: #fff; font-weight: bold; font-size: 1.4em; padding: .4em .6em; color: #f90; line-height: 1.11em; }
.ct-cn-dg { display: none; position: absolute; background: rgba(0,0,0,0.9); left: 0; top: 0; width: 100%; height: 100vh; z-index: 1000; }

.printbox { position: absolute; bottom: 0px; left: 0px; padding: 5px; max-width: 5px; max-height: 5px; overflow:hidden; }

.chout-hdr { border-bottom: 2px solid #ddd; color: #069; font-size: 1.5em; font-weight: bold; margin-bottom: .5em; }
.chout-unit { padding: 1em .4em; }
.chout-unit-btn { width: 95%; padding: 1.4em .4em 1em .4em; } 
.radios td { font-size: 1.4em; }
.chout-unit input[type=text] { padding: .4em; border-radius: .4em; box-shadow: 3px 3px #ccc; border: 1px solid #666; font-size: 1.3em; width: 92%; }
.chout-btn { cursor: pointer; background: rgb(10,92,148); background: linear-gradient(180deg, rgba(10,92,148,1) 0%, rgba(6,66,107,1) 49%); border-radius: .8em; color: #fff; font-weight: bold; font-size: 1.4em; padding: .5em 1em; }
.chout-btn-org { cursor: pointer; background: rgb(163,91,1); background: linear-gradient(180deg, rgba(163,91,1,1) 0%, rgba(224,124,0,1) 49%); border-radius: .8em; color: #fff; font-weight: bold; font-size: 1.4em; padding: .5em 1em; }
.chout-ordnum { font-size: 1.6em; font-weight: bold; color: #c60; }
.lh1 { line-height: 1.6em; }

.rel { position: relative; }
.invi { border-left: 1px solid #ccc; }
.spcx { padding: .2em 0em; }
.pack { padding: .4em 0em 0em 0em; font-size: .6em; color: #666; font-weight: normal; border-top: 1px solid #ccc; }
.ct-reissue { position: absolute; right: -7px; top: 0px; font-size: 1em; color: #c00; }

.recinfo { font-size: .85em; }
.ot { border-top: 3px solid  #c60; }
.spc { margin-right: 1em; }
.ct-cnt-lst { border-bottom: 1px solid #ccc; padding: 1em; width: 94%; }
.ct-cnt-btn { float: left; width: 5%; color: #c00; }
.ct-cnt-hdr { float: left; width: 45%; font-weight: bold; color: #036; }
.ct-cnt-qty { float: left; width: 15%; font-weight: bold; text-align: center; }
.ct-cnt-prc { float: left; width: 15%; font-weight: normal; text-align: right; }
.ct-cnt-amt { float: left; width: 20%; font-weight: bold; text-align: right; }
.ct-cnt-fin { padding: 2.4em 1em; width: 94%; }
.ct-cnt-fin a { background: rgb(163,91,1); background: linear-gradient(180deg, rgba(163,91,1,1) 0%, rgba(224,124,0,1) 49%); color: #fff; padding: .5em 1em; border-radius: .5em; font-size: 1.4em; }
.ct-cnt-co { display: none; position: absolute; top: 10%; left: 5%; width: 85%; background: #fff; border: 4px solid #069; border-radius: 1em; padding: 1em; z-index: 1200; }
.smg { font-size: .65em; color: #666; }
.lg { font-size: 1.5em; letter-spacing: -1px; color: rgb(10,92,148); }
.ct-cn-cover { display: none; position: absolute; background: rgba(0,51,102,0.8); width: 100%; height: 100%; vertical-align: central; text-align: center; color: #fff; font-size: 2em; z-index: 2000; padding-top: 44%; }

.ct-prod-nm-inv { width: 45%; float: left; }
.ct-prod-pr-inv { width: 35%; float: left; font-size: 1.3em; letter-spacing: -1px; color: #333; font-weight: bold; text-align: right; margin-right: 3%;  }
.ct-cnt-info { height: calc(100vh - 150px) !important; overflow-y: scroll !important; }

/* =============================== */

.listing { border-bottom: 1px solid #ccc; }
.hdr { background: rgb(204,204,204); background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(221,221,221,1) 100%); font-weight: bold; }
.rb { border-right: 1px solid #ccc; }
.pm { padding: .4em; }
.tb { border-top: 3px solid #000; }
.bd { font-weight: bold !important; }

@media screen and (min-width: 900px and max-width: 1350px) {
	body,td,th {
		/*font-family: Arial, Helvetica, sans-serif;*/
		font-family: 'Roboto Condensed', sans-serif !important;
		font-size: 8px !important;
	}
	.ct-cnt-inf {
		width: 67%;	
	}
	.ct-hdr {
		padding: 1em;	
	}
	.ct-hdr-rgt {
		margin-right: 1em;
	}
	.shop_nav {
		padding-top: 1em;	
	}
	.shop_nav li {
		padding: 1.4em 1em;	
		text-align: center;
	}
}

@media screen and (max-width: 899px) {
	body,td,th {
		/*font-family: Arial, Helvetica, sans-serif;*/
		font-family: 'Roboto Condensed', sans-serif !important;
		font-size: 10px !important;
	}
	
	.login_box { width: 70%; }
	.ct-hdr { width: 96.5%; }
	.ct-cnt-inf { float: none; width: 100%; height: 40vh; border-right: none; }
	.ct-cnt-rec { float: none; width: 100%; height: 40vh; }
	.ct-cnt-rct { width: 96%; }
	
	.recinfo { overflow-y: scroll !important; }
}