/*Custom font for numbers*/
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400);

@font-face {
	font-family: "bebas";
	src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue.woff') format('woff'), url('fonts/BebasNeue.ttf') format('truetype'), url('fonts/BebasNeue.svg#BebasNeueBook') format('svg');
}

@font-face {
	font-family: 'HelveticaNeue-Medium';
	src: url('fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/HelveticaNeue-Medium.woff') format('woff'), url('fonts/HelveticaNeue-Medium.ttf') format('truetype'), url('fonts/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
}

/***reset css***/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1.4;
	font-size: 14px;
	width: 100%;
	font-family: Arial, sans-serif;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

	nav ul {
		list-style: none;
	}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

button {
	cursor: pointer;
}

textarea, input, select {
	outline: none;
}

	input[type="checkbox"],
	input[type="radio"] {
		width: 18px;
		height: 18px;
		margin-top: 0;
		margin-left: 0;
	}

.rb-wp {
	line-height: 18px;
	margin: 5px 0;
	display: inline-block;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
	-webkit-transition-delay: 9999s;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	background-image: url("https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 9px;
	outline: none;
	padding-right: 20px;
}
	/* IE11 */
	select::-ms-expand {
		display: none;
	}

:focus {
	outline: none;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}
/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: 700;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.btn, a, input[type="button"], input[type="submit"], button {
	transition: all .4s ease;
}

.btn, input[type="button"], input[type="submit"], button {
	border-radius: 4px;
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
}
/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
	color: #3c3f52;
}

	select:disabled, textarea:disabled, input:not([type]):disabled, input[type="color" i]:disabled, input[type="date" i]:disabled, input[type="datetime" i]:disabled, input[type="datetime-local" i]:disabled, input[type="email" i]:disabled, input[type="month" i]:disabled, input[type="password" i]:disabled, input[type="number" i]:disabled, input[type="search" i]:disabled, input[type="tel" i]:disabled, input[type="text" i]:disabled, input[type="checkbox" i]:disabled, input[type="radio" i]:disabled, input[type="time" i]:disabled, input[type="url" i]:disabled, input[type="week" i]:disabled {
		background-color: rgb(235, 235, 228);
		color: rgb(84, 84, 84);
	}

a:hover {
	color: #1351c6;
}

button:disabled,
button:disabled:hover {
	background-color: #ccc !important;
	color: #fff !important;
	border-color: #ccc !important;
	cursor: default !important;
}
/***/
::-webkit-scrollbar-track {
	box-shadow: none;
	-webkit-box-shadow: none;
	background-color: rgba(63, 68, 146, 0.01);
	border-radius: 20px;
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color: rgba(63, 68, 146, 0.01);
	border-radius: 20px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(63, 68, 146, 0.8);
	border-radius: 20px;
}

::-moz-selection {
	color: #fff;
	background: #3f4492;
}

::selection {
	color: #fff;
	background: #3f4492;
}

body {
	background: #2e2e66;
	color: #3c3f52;
	letter-spacing: 0.6px;
	font-family: 'Roboto', sans-serif;
}

.hide {
	display: none;
}

.must-hide {
	display: none !important;
}

.flex {
	display: flex;
	flex-direction: row;
}
/*Centering the gauge*/
#canvas {
	display: block;
	width: 300px;
	margin: 100px auto;
}

.switch-wp {
	text-align: right;
	margin-top: 20px;
}

.switch {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	height: 34px;
	line-height: 1.3;
}

	.switch input {
		display: none;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ff9800;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2ab934;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	left: 70px;
}

.on, .off {
	color: white;
	position: absolute;
	transform: translate(0,-50%);
	top: 50%;
	width: 55px;
	font-size: 11px;
	pointer-events: none;
	opacity: 0;
	-webkit-transition: .4s;
	transition: .4s;
	text-align: center;
}

.on {
	left: 10px;
}

.off {
	opacity: 1;
	right: 10px;
}

input:checked + .slider .on {
	opacity: 1;
}

input:checked + .slider .off {
	opacity: 0;
}

.slider.round {
	border-radius: 34px;
}

	.slider.round:before {
		border-radius: 50%;
	}


/***general styles***/
header {
	margin-bottom: 50px;
	border-bottom: 1px solid #CCC;
}

.header-inner {
	padding: 5px 10px;
	margin: 0 auto;
	max-width: 1024px;
}

.logo {
	float: left;
	font-weight: normal;
	margin-right: 20px;
}

	.logo img {
		float: left;
		margin: 0 5px 0 0;
		width: 46px;
	}

	.logo a {
		color: #fff;
		font-size: 30px;
		line-height: 40px;
	}

.mainPage .logo.app-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.2px;
}

	.mainPage .logo.app-title span {
		background-color: #F8A24B;
		color: #fff;
		line-height: 1;
		display: inline-block;
		border-radius: 4px;
		font-size: 24px;
		margin-right: 5px;
		padding: 4px 4px 1px;
		box-sizing: border-box;
		height: 30px;
		font-weight: 600;
	}

.sub-head {
	float: right;
	margin: 14px 10px 0 0;
}

.header-inner strong {
	float: left;
	font-family: "Myriad Pro", sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	color: #fff;
	margin-top: 7px;
	line-height: 27px;
}

.header-inner .batches-box {
	margin-left: 40px;
}

.batches-box-mobile {
	display: none;
}

.header-inner .last-update-box {
	margin-left: 10px;
	text-align: right;
	float: right;
}

.header-inner > span {
	float: left;
	width: 250px;
	margin-top: 8px;
}

	.header-inner > span > strong {
		width: 100%;
		font-size: 20px;
	}

#cbPlantList {
	border: 1px solid #53537F;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	background-color: #2e2e66;
	float: left;
	font-family: "Myriad Pro", sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 22px;
	color: #fff;
	padding: 3px 10px 2px 25px;
	width: 250px;
	margin-top: -6px;
	visibility: hidden;
}

	#cbPlantList option {
		background-color: #2e2e66;
	}

.down-arrow {
	margin: 8px 0 0 -15px;
	visibility: hidden;
	display: none;
}

.wrapper {
	max-width: 1024px;
	margin: 0 auto 30px;
	background: #2e2e66;
}
/*legend-box*/
.legend-box h3 {
	color: #fff;
	font-size: 24px;
	margin: 0 0 20px;
}

	.legend-box h3:first-letter {
		color: #dc723c;
	}

.legend-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 300px;
}

	.legend-box ul li {
		width: 100%;
		overflow: hidden;
		margin: 0 0 10px;
		color: #fff;
		font-size: 16px;
		line-height: 1.2;
	}

.color-box {
	float: left;
	width: 28px;
	height: 16px;
	background: #d1b73d;
	margin: 0 10px 0 0;
}

.ico-box {
	float: left;
	margin: 0 10px 0 0;
	width: 28px;
}

	.ico-box img {
		display: block;
		margin: 0 auto;
	}

.yellow {
	background: #d1b73d;
	color: #d1b73d;
}

.grey {
	background: #999;
	color: #999;
}

.red {
	background: #fc184e;
	color: #fc184e;
}

.red-text {
	color: #e74c3c;
}

.red-text2 {
	color: #e74c3c;
	border-color: #e74c3c !important;
}

.star {
	color: red;
	font-size: 12px;
}

.blue {
	color: #48A7FF !important;
}

.orange {
	color: #ab5125;
}

.grey-dark {
	color: #676767;
}

.light-grey {
	color: #ccc;
}

.brown {
	color: #7e6157;
}

.light-brown {
	color: #ac7c4c;
}

.plant-ranking-link {
	float: right !important;
	display: none;
}

	.plant-ranking-link strong {
		font-style: normal;
		font-size: 22px;
		float: none !important;
		padding: 6px 0;
		display: inline-block;
		color: #EBB52D;
		margin-top: 0;
	}

		.plant-ranking-link strong:hover {
			color: #ce9c29;
		}

.date-range-control {
	clear: both;
	margin-left: 0;
	float: left !important;
	display: none;
}

.date-range-control2 {
	float: left;
	margin-left: 25px;
	margin-top: 8px;
}

.ui-datepicker {
	z-index: 99999999 !important;
}

#dateRange {
	border: 1px solid #CECECE;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
	text-align: center;
	width: 190px;
	background-color: #1A1A49;
	color: #FFF;
	cursor: text;
}

	#dateRange:hover {
		background-color: #404085;
		box-shadow: 0 0 5px #CCC;
	}

.mFieldPage #dateRange {
	background-color: #fff;
	border: 1px solid #3F4492;
	color: #3c3f52;
	text-align: left;
	width: 100%;
	margin: 0;
}

.mFieldPage #btnCreateBatch {
	padding: 4px 15px;
	white-space: nowrap;
}

.mFieldPage #btnSearch {
	height: 30px;
	align-self: self-end;
	margin-bottom: 20px;
}

.box-search-mfield {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 20px;
}

.ticket-box-wrap {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
}

	.ticket-box-wrap #btnCreateBatch, .ticket-box-wrap #btnScanTicket {
		margin-top: 0;
		margin-bottom: 0;
		height: 30px;
		padding: 4px 15px;
		box-sizing: border-box;
	}

#charts {
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#background {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
	overflow: hidden;
}

.chart-title {
	font-size: 26px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
}

.star-rate {
	font-size: 36px;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	color: #ff7e00;
}

#start-block {
	display: none;
}

.loading {
	width: 100%;
	text-align: center;
	line-height: 20px;
	color: red;
}

	.loading img {
		width: 30px;
	}

.chart-main {
	width: 270px;
	margin-left: 50px;
}

#ranking {
	margin: 0 10px;
	display: none;
	overflow: hidden;
}

.charts-header .title {
	font-size: 23px;
	margin-top: 12px;
	color: #FFF;
	word-spacing: 5px;
	text-align: center;
	text-transform: uppercase;
}

.mPlantPage .date-range-control2 {
	margin-top: 0;
}

.mPlantPage .charts-header .title {
	margin-top: 2px;
}

.mPlantPage .logo {
	margin-top: 3px;
}

.plant-list-box {
	margin-bottom: 10px;
}

	.plant-list-box strong {
		font-style: normal;
	}

.footable {
	background-color: #fff;
	overflow: hidden;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0;
	font-size: 14px;
	font-family: sans-serif;
	position: relative;
	/* top: -35px; */
}

	.footable > tbody > tr > td, .footable > thead > tr > th {
		border-left: 1px solid #CCC;
		vertical-align: middle;
		padding: 8px;
	}

		.footable > thead > tr > th.groupCell {
			border-bottom: 1px solid #CCC;
		}

#ranking .footable th {
	background: none;
	text-transform: uppercase;
	font-weight: normal;
	text-align: center;
}

	#ranking .footable th:first-child {
		text-align: left;
	}

.headerRow {
	position: relative;
}

#ranking .footable tr:nth-child(even) td {
	background: #F7F7F7;
}

#ranking th.customCell {
	padding: 10px 0;
}

/* #ranking th.customCell * {
        position: relative;
        bottom: -35px;
		z-index: 1;
    } */

#ranking .singleHeaderCell * {
	position: relative;
	top: -16px;
	z-index: 1;
}

#charts .childHeaderCell {
	font-size: 10px;
	/* border: none !important; */
	text-transform: none !important;
	width: 75px;
}

/* #charts .childHeaderCell.rankingHeaderCell {
        border-left: 1px solid #CCC !important;
    } */

/* #charts .childHeaderCell * {
        bottom: -18px !important;
    } */

#charts #ranking .cementCell {
	color: #828282;
	background-color: #FAFAFA;
}

#charts #ranking tr:nth-child(even) .cementCell {
	background-color: #F2F2F2;
}

#charts #ranking .headerRow .cementCell {
	background-color: #FAFAFA;
}

#charts #ranking .waterCell {
	color: #4DA2B6;
	background-color: #EFFCFF;
}

#charts #ranking tr:nth-child(even) .waterCell {
	background-color: #E8F4F7;
}

#charts #ranking .headerRow .waterCell {
	background-color: #EFFCFF;
}

#charts #ranking .cementitiousCell {
	color: #787878;
	background-color: #F5F5F5;
}

#charts #ranking tr:nth-child(even) .cementitiousCell {
	background-color: #EDEDED;
}

#charts #ranking .headerRow .cementitiousCell {
	background-color: #F5F5F5;
}

#charts #ranking .fineAggCell {
	color: #A07950;
	background-color: #FFE7CF;
}

#charts #ranking tr:nth-child(even) .fineAggCell {
	background-color: #F7E0CA;
}

#charts #ranking .headerRow .fineAggCell {
	background-color: #FFE7CF;
}

#charts #ranking .coarseAggCell {
	color: #9B532F;
	background-color: #FEF0E9;
}

#charts #ranking tr:nth-child(even) .coarseAggCell {
	background-color: #F6E9E2;
}

#charts #ranking .headerRow .coarseAggCell {
	background-color: #FEF0E9;
}

#ranking .customCell {
	padding: 0;
	text-align: center;
}

#ranking .batchesCell {
	text-align: center;
}

.rankNoTitle, .accuracyTitle {
	width: 50%;
	float: left;
	font-size: 10px;
	text-transform: lowercase;
	position: relative;
	bottom: -5px;
	text-shadow: 0 0 1px #999;
	-moz-text-shadow: 0 0 1px #999;
	-webkit-text-shadow: 0 0 1px #999;
	-o-text-shadow: 0 0 1px #999;
}

.copyright {
	clear: both;
	text-align: center;
	color: #fff;
	position: fixed;
	bottom: 0;
	z-index: -1;
	width: 100%;
	font-weight: 300;
	color: #6c7c8c;
	margin-bottom: 15px;
	font-size: 14px;
}

.clearfix {
	clear: both;
}

	.clearfix:after {
		clear: both;
		display: block;
		content: '';
	}

.chartFull {
	max-width: 1024px !important;
	margin-bottom: 70px !important;
}

.chartGauge {
	/* max-height: 730px; */
	margin-bottom: 70px !important;
}

.readonly-button {
	background-color: rgba(112, 52, 155, 0.4) !important;
}

	.readonly-button:hover {
		background-color: rgba(112, 52, 155, 0.6) !important;
	}

@media (max-width: 981px) {
	.plant-ranking-link strong {
		text-align: right;
	}

	.mix-material .box-search-mm .col-wp {
		display: block;
	}
}

@media (max-width: 959px) {
	#start-block {
		width: 640px;
		margin: 0 auto;
	}
}

@media (max-width: 639px) {
	#start-block {
		width: 320px;
	}
}

@media (max-width: 599px) {
	.date-range-control {
		width: 100%;
	}

	.header-inner strong {
		float: none !important;
		margin-top: 5px;
		width: auto;
	}

	.header-inner .batches-box {
		margin-left: 0;
		display: inline-block;
	}

	.header-inner strong.last-update-box {
		float: right !important;
	}

	.plant-list-box {
		margin-bottom: 10px;
	}

	.plant-ranking-link {
		margin-left: 0;
	}

		.plant-ranking-link strong {
			text-align: left;
			margin-left: 0;
			margin-top: 0;
			display: inline-block;
		}

	.mPlantPage .date-range-control2 {
		float: none;
		margin-left: 0;
		text-align: center;
	}

	.mPlantPage .logo {
		position: absolute;
	}

	.mPlantPage .charts-header .title {
		width: 100%;
	}
}

.sbSelector {
	width: 100%;
}

.sbOptions {
	max-height: 350px;
	z-index: 2;
}

.date-picker-wrapper {
	z-index: 9999999999;
}

.date-picker-wrapper-mobile {
	left: 0 !important;
}

.date-picker-wrapper .clear-btn {
	position: absolute;
	right: 55px;
	top: 6px;
	padding: 3px 5px;
	margin: 0;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top, #fff, #ededed);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}

.date-picker-wrapper .minute > label {
	white-space: nowrap;
}

.sbOptions-mobile {
	max-height: 500px !important;
}

.mobileShow {
	display: none;
}

@media (max-width: 430px) {
	.plant-list-box {
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.layers {
		height: 440px !important;
	}

	.mobileHidden {
		display: none;
	}

	.mobileShow {
		display: block;
	}
}

.text-center {
	text-align: center !important;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

/*************************login page************************/
body.body {
	background: #f9f9f9;
}

body.q20-body {
	background-color: #eef0f6;
}

.outerWrap {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	display: none;
}

.visible {
	display: block;
}

.content-middle {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.login {
	margin: 0 auto;
	text-align: center;
	max-width: 350px;
	padding: 0 10px 120px;
	box-sizing: border-box;
}

.login-or {
	margin: 20px 0;
	position: relative;
}

	.login-or:before {
		content: '';
		display: block;
		border-top: 1px solid #fff;
		position: absolute;
		top: 50%;
		width: 100%;
	}

	.login-or:after {
		content: 'or';
		display: inline-block;
		color: #fff;
		position: relative;
		z-index: 1;
		background-color: #3F4492;
		padding: 0 10px;
	}

.logo-wrapper {
	margin: 0 auto 30px;
	width: 193px;
	display: block;
}

.mainPage .logo-wrapper {
	margin-top: 80px;
	margin-bottom: 80px;
}

body.mainPage {
	font-family: "Urbanist", sans-serif;
	line-height: 1.3;
	padding-bottom: 80px;
	background: #F0F3F6;
}

.mainPage .header {
	background: #FFF;
	box-shadow: 10px 1px 6px 2px rgba(17, 16, 35, 0.04);
	padding: 0 10px;
}

	.mainPage .header .wrapper {
		height: 75px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

.mainPage .content {
	margin: 0 10px;
}

.mainPage .wrapper {
	background: none;
	margin: 0 auto;
	max-width: 1024px;
}

.mainPage .user-info {
	line-height: 24px;
	margin: 25px 0;
	color: #3F4492;
	font-size: 28px;
	font-weight: 600;
}

.mainPage .intro {
	border-radius: 6px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 100%), linear-gradient(31deg, #007BFF 18%, #007BFF 18%, #3F4492 82.76%);
	padding: 10px 136px 10px 77px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	color: #656565;
	font-size: 18px;
	font-weight: 500;
}

	.mainPage .intro div h1 {
		color: #3F4492;
		font-size: 36px;
		font-weight: 600;
	}

	.mainPage .intro div div {
		margin: 10px 0 18px;
	}

	.mainPage .intro div a {
		border-radius: 4px;
		border: 1px solid #F8A24B;
		padding: 16px 24px;
		background: #F8A24B;
		color: #fff;
		font-size: 24px;
		font-weight: 700;
		line-height: 20px;
		display: inline-block;
		transition: background-color .4s ease;
	}

		.mainPage .intro div a:hover {
			background: #f9ad60;
		}

	.mainPage .intro svg {
		height: 346px;
		margin-left: 77px;
	}

.mainPage .app-title {
	color: #3F4492;
	font-size: 28px;
	font-weight: 600;
	line-height: 30px;
}

.mainPage .quadrel-app {
	margin: 25px 0 15px;
}

.mainPage .app-title svg {
	margin-right: 7px;
	vertical-align: bottom;
}

.mainPage .menu {
	border-radius: 6px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 100%), linear-gradient(31deg, #007BFF 18%, #007BFF 18%, #3F4492 82.76%);
	padding: 0 19px;
	margin-bottom: 20px;
}

.mainPage .menu-header {
	color: #3F4492;
	font-size: 24px;
	font-weight: 600;
	line-height: 20px;
	padding: 20px 0;
}

.mainPage .menu-inner {
	border: none;
	padding: 0;
}

.menu .item {
	float: left;
	width: 25%;
	padding-bottom: 25%;
	position: relative;
	margin-bottom: 20px;
}

.menu .item-inner {
	background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(31deg, #007BFF 18%, #007BFF 18%, #3F4492 82.76%);
	box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.06);
	padding: 15px 25px;
	position: absolute;
	top: 0;
	left: 10px;
	right: 10px;
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	color: #656565;
	font-weight: 500;
	font-size: 15px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: all.4s ease;
}

	.menu .item-inner:hover {
		box-shadow: 0px 8px 15px 3px rgb(0 0 0 / 10%);
	}

.menu .item.disabled .item-inner {
	cursor: default;
	filter: grayscale(100%);
	box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.06);
	background: #eee;
}

.menu .item-inner > svg {
	margin-bottom: 10px;
	height: 30%;
	width: auto;
}

.menu .item .app-title {
	margin-bottom: 10px;
}

.nav-button {
	cursor: pointer;
}

.nav-popup {
	position: absolute;
	top: 80px;
	right: 0;
	opacity: 0;
	pointer-events: none;
	transition: all .4s ease;
	box-shadow: 0px 0px 10px 1px rgb(216 216 216);
	background: #fff;
	border-radius: 4px;
	list-style: none;
	overflow: hidden;
}

	.nav-popup li {
		padding: 10px 25px;
		cursor: pointer;
	}

		.nav-popup li:hover {
			background: #f2f2f2;
		}

	.nav-popup.active {
		top: 65px;
		opacity: 1;
		pointer-events: initial;
	}

.logo-wrapper:after {
	content: '';
	display: block;
	clear: both;
}

.logo-wrapper img {
	width: 100%;
}

.logo-inner {
	width: 80%;
	margin: 15px auto;
}

.logo-q20 {
	text-align: center;
	background-color: #ff9800;
	color: #fff;
	font-weight: bold;
	border-radius: 3px;
	margin: 15px auto;
	width: 147px;
	display: block;
	height: 68px;
	font-size: 48px;
	line-height: 68px;
	border-radius: 6px;
}

.logo-wrapper .logo-q20 {
	width: 67px;
	height: 31px;
	line-height: 31px;
	text-align: center;
	background-color: #ff9800;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	border-radius: 3px;
	float: right;
	margin-top: -10px;
	margin-bottom: 0;
}

.orangeNew {
	color: #f8a24b;
}

.login .orangeNew {
	margin-right: 3px;
}

.loginTitle {
	margin-bottom: 15px;
	font-size: 34px;
	line-height: 30px;
}

	.loginTitle img {
		margin-right: 10px;
	}

	.loginTitle span {
		vertical-align: top;
	}

.mainColor {
	color: #3F4492;
}

.loginForm input {
	width: 100%;
	font-size: 14px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	border: 1px solid #bcc9d3;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #f8f9fb;
}

.loginCommand {
	margin-bottom: 20px;
	text-align: left;
	font-size: 14px;
}

#ckRemember {
	margin-right: 5px;
}

.loginCommand label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

.loginCommand span {
	vertical-align: text-top;
}

.loginCommand a {
	text-decoration: underline;
	color: #2169e0;
	cursor: pointer;
}

	.loginCommand a:hover {
		color: #055096;
	}

.left {
	float: left;
}

.right {
	float: right;
}

.login button {
	width: 100%;
	height: 50px;
	background-color: #f8a24b;
	color: #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	line-height: 42px;
	cursor: pointer;
	border: none;
	transition: all .4s;
}

	.login button:hover {
		background: #f9b066;
	}

.login #btnLoginOneLogin {
	background-color: #2169e0;
}

	.login #btnLoginOneLogin:hover {
		background-color: #007bff;
	}

.outerWrap .loading {
	display: block;
	margin-bottom: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}


/*************************main************************/
.wrapper2 {
	max-width: 1024px;
	margin: 0 auto 50px;
	background: #f9f9f9;
}

.header {
	background: #3F4492;
	position: relative;
	overflow: visible;
}

.headerInner {
	max-width: 1024px;
	padding: 0 15px;
	margin: 0 auto;
}

	.headerInner > img {
		width: 46px;
		margin: 5px 0;
	}

	.headerInner span {
		line-height: 44px;
	}

.white {
	color: #fff;
}

.main {
	text-align: center;
	padding: 10px 0;
}

.welcome {
	margin: 30px 0 15px;
	font-size: 24px;
	font-weight: 300;
}

	.welcome img {
		margin: 0 20px;
		vertical-align: middle;
	}

.nav {
	cursor: pointer;
	padding-top: 1px;
	position: relative;
	margin-right: -3px;
}

.navpopup {
	top: 100%;
	position: absolute;
	z-index: 9999;
	width: 100%;
	background: #3F4492;
	display: none;
	margin-top: 1px;
}

	.navpopup .item {
		margin: 5px;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		-o-border-radius: 2px;
		padding: 8px;
		text-align: center;
		font-size: 14px;
		background: #dae5ff;
		cursor: pointer;
		display: block;
		text-decoration: none;
	}

		.navpopup .item:hover {
			background: #c7d3ef;
			text-decoration: none;
		}


.top-icon {
	font-size: 28px;
	color: #fff;
	line-height: 44px;
	margin-left: 2px;
	width: 44px;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition: all .4s ease;
}

.header2 .top-icon,
.layout-2 .header .top-icon {
	color: #3F4492;
}

.top-icon:hover {
	text-shadow: 0 0 15px #fff;
}

.header2 .top-icon:hover,
.layout-2 .header .top-icon:hover {
	text-shadow: 0 0 5px #3F4492;
}

.mPlantPage .top-icon {
	line-height: 37px;
}

.imgMobile {
	display: none;
}

.popupWraper {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: auto;
	top: 0;
	left: 0;
	z-index: 99999999;
}

.popupOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #36448E;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index: 99998;
	display: none;
}

.popup {
	display: none;
	position: absolute;
	z-index: 99999;
	border: 1px solid #3F4492;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-appearance: none;
	box-shadow: 0 0 5px #3F4492;
	-moz-box-shadow: 0 0 5px #3F4492;
	-webkit-box-shadow: 0 0 5px #3F4492;
	-o-box-shadow: 0 0 5px #3F4492;
	background: #fff;
	margin: 0 10px;
}

	.popup .close {
		position: absolute;
		top: 5px;
		right: 5px;
		font-size: 22px;
		font-weight: bold;
		line-height: 1;
		cursor: pointer;
		opacity: 0.6;
		transition: all .4s ease;
	}

		.popup .close:hover {
			opacity: 1;
		}

	.popup .popup-title {
		color: #3F4492;
		font-size: 18px;
		padding-top: 30px;
	}

	.popup .content {
		padding: 20px;
		max-width: 300px;
	}

.mResolveCommon .popup .content {
	max-width: 360px;
}

#material-popup .content {
	max-width: 500px;
}

#material-popup .fc-wp {
	padding-right: 90px;
}

#material-popup .unit {
	right: 15px;
}
/***********************mField page**********************/
.boxmain {
	margin: 0 15px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.txtScanInput {
	display: none;
	text-align: center;
	position: relative;
	white-space: nowrap;
}

#txtScanTicket {
	display: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ctrlWraper {
	text-align: left;
	margin-bottom: 20px;
}

.col50 {
	width: 50%;
}

.col25 {
	width: 25%;
}

.col33 {
	width: 32%;
	margin-right: 2%;
}

	.col33.floatright {
		margin-right: 0;
	}

.col30 {
	width: 30%;
}

.col70 {
	width: 70%;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.ctrlWraper .label {
	text-transform: uppercase;
	margin-bottom: 10px;
	font-size: 14px;
}

.ctrlWraper .control {
	font-size: 15px;
}

	.ctrlWraper .control select,
	.mSelect {
		width: 100%;
		height: 30px;
		padding: 5px;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		border: 1px solid #6666a0;
	}

		.ctrlWraper .control select[disabled],
		.ctrlWraper .control select.mSelect[disabled] {
			background: #dedede;
			color: #a09f9f;
		}

.ctrlWraper .normalCase {
	text-transform: initial;
}

.embedPage .ctrlWraper {
	margin-bottom: 10px;
}

	.embedPage .ctrlWraper.col50 {
		width: 48%;
		margin-right: 2%;
	}

		.embedPage .ctrlWraper.col50.col-right {
			margin-right: 0;
			margin-left: 2%;
		}

		.embedPage .ctrlWraper.col50.col50StaticNew {
			width: 48% !important;
			margin-right: 2% !important;
		}

			.embedPage .ctrlWraper.col50.col50StaticNew:nth-child(2n) {
				margin-right: 0 !important;
				margin-left: 2% !important;
			}

#cylinder .ctrlWraper.col33:nth-child(3) {
	margin-right: 0 !important;
}

.embedPage .ctrlWraper .label {
	font-size: 15px;
	margin-bottom: 5px;
	text-transform: none;
}

.embedPage .ctrlWraper .control input,
.mInnerPage .ctrlWraper .control input,
.mInput {
	border: 1px solid #3F4492;
	padding: 5px;
	height: 30px;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
}

.mInput {
	border-color: #929292;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}

textarea.mInput {
	width: 100%;
	height: auto;
}

.confirmBox .ctrlWraper {
	font-size: 14px;
}

.jBatchDate, .jBatchTime {
	margin-bottom: 5px;
	line-height: 15px;
}

.jBatchDate {
	margin-right: 10px;
}

.jTime > span img {
	width: 15px;
	height: 15px;
	margin-right: 3px;
	vertical-align: top;
}

#link-to-machine {
	margin: 15px 0;
	display: inline-block;
}

.btnGroup {
	margin-top: 10px;
}

.btn {
	background: #faa24a;
	color: #fff;
	font-size: 18px;
	padding: 8px 0;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	margin-top: 10px;
	line-height: 24px;
	height: 24px;
	cursor: pointer;
	vertical-align: top;
}

	.btn:hover {
		background: #e18e3b;
	}

	.btn.disabled, button.disabled {
		background: #dedede;
		color: #a09f9f;
		cursor: default;
	}

button.disabled {
	opacity: 0.2;
	cursor: default;
}

.btn img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
	vertical-align: bottom;
}

#btnPlastic, #btnOk, #btnOk2 {
	width: 49%;
	float: left;
}

#btnCylinder, #btnCancel, #btnCancel2 {
	width: 49%;
	float: right;
}

.overlayAll {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index: 999998;
}

.hideScroll {
	overflow: hidden;
}

.loadingIcon {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	z-index: 999999;
}

#ticket-data {
	display: none;
}

.data-table table {
	width: 100%;
	text-align: right;
	margin-top: 10px;
}

	.data-table table tr th,
	.data-table table tr td {
		border: 1px solid #c9c9c9;
		padding: 10px;
	}

	.data-table table tr .tdName {
		width: 34%;
	}

	.data-table table tr .tdBatch,
	.data-table table tr .tdMix,
	.data-table table tr .tdDelta {
		width: 22%;
	}

	.data-table table tr th {
		text-transform: uppercase;
		font-size: 15px;
		font-weight: normal;
	}

	.data-table table tr td {
		font-size: 14px;
	}

	.data-table table tr.rowParent {
		cursor: pointer;
		background: #EAEAEA;
	}

	.data-table table tr.rowChild {
		display: none;
	}

		.data-table table tr.rowChild td:first-child {
			padding-left: 25px;
		}

	.data-table table tr th:first-child,
	.data-table table tr td:first-child {
		text-align: left;
	}

		.data-table table tr td:first-child span {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-right: 5px;
		}

	.data-table table td.tdDelta {
		background: #FFA1A1;
		color: #fff;
	}

	.data-table table .rowParent td.tdDelta {
		background: #ff6363;
	}

	.data-table table #rowChemical .tdDelta {
		background: #EAEAEA;
	}

/**************Enter plastic properties**************/
#plastic {
	display: none;
}

.errorMsg {
	display: none;
	color: red;
	margin: 5px 0;
}

.embedPage textarea {
	border: 1px solid #3F4492;
	padding: 5px;
	margin-bottom: 10px;
	width: 100%;
	height: 100px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
}

.confirm-data-popup {
	width: 90%;
	max-width: 550px;
	margin-bottom: 10px;
}

	.confirm-data-popup .content, #alert-popup .content, #alert-popup2 .content {
		padding: 15px;
		max-width: none;
	}

	.confirm-data-popup .ctrlWraper {
		margin-bottom: 15px;
	}

#alert-popup,
#alert-popup2 {
	width: 90%;
	max-width: 500px;
}

.prLabel {
	font-size: 14px;
}

.confirm-data-popup .jProjectName {
	width: 80%;
	padding: 10px 0;
	margin: 0 auto 15px;
	font-size: 15px;
}

.confirm-data-popup .divHr {
	border-bottom: 1px solid #3F4492;
	margin: -5px -15px 10px;
}

.error {
	-webkit-appearance: none;
	box-shadow: 0 0 8px red;
	-moz-box-shadow: 0 0 8px red;
	-webkit-box-shadow: 0 0 8px red;
	-o-box-shadow: 0 0 8px red;
	border-color: red !important;
}

.error-message {
	color: red;
	display: none;
}

.boxUserAddress {
	display: none;
}

/**************Log cylinders**************/
#cylinder {
	border-top: 1px solid #cfcfcf;
	margin: 0 -10px;
	padding: 0 10px;
}

	#cylinder .title {
		text-align: left;
		font-size: 18px;
		text-transform: uppercase;
		font-weight: normal;
		margin: 15px 0;
	}

	#cylinder .addNew {
		font-weight: 300;
		font-size: 18px;
		line-height: 28px;
		vertical-align: top;
		margin: 10px 0;
	}

		#cylinder .addNew img {
			margin-right: 10px;
		}

.promoText {
	display: none;
}

.tb-cylinder {
	padding-top: 1px;
}

	.tb-cylinder table td,
	.tb-cylinder table th {
		text-align: left;
		vertical-align: middle;
	}

	.tb-cylinder table td {
		background: #EAEAEA;
	}

	.tb-cylinder td.tdNo {
		width: 50px;
	}

	.tb-cylinder td.tdNo,
	.tb-cylinder td.tdDays,
	.tb-cylinder td.tdWeight,
	.tb-cylinder td.tdRemarks,
	.tb-cylinder td.tdCube {
		padding: 0;
		vertical-align: middle;
	}

	.tb-cylinder .tdWeight {
		max-width: 120px;
	}

		.tb-cylinder .tdNo select,
		.tb-cylinder .tdDays select,
		.tb-cylinder td.tdCube select,
		.tb-cylinder .tdWeight input,
		.tb-cylinder .tdRemarks input {
			border: none;
			width: 100%;
			height: 41px;
			padding: 0 5px;
			background: #EAEAEA;
			box-sizing: border-box;
		}

	.tb-cylinder .tdDate {
		border-right: 0;
	}

	.tb-cylinder .tdCommand img {
		display: inline-block;
		vertical-align: top;
	}

.data-table .tdCommand {
	width: 60px;
	border-left: 0;
	text-align: right;
}

	.data-table .tdCommand img {
		width: 20px;
		height: 20px;
		margin: 0 5px;
		cursor: pointer;
	}

.data-table #confirm-cylinder-table {
	margin-top: 0;
}

#confirm-cylinder-table td,
#confirm-cylinder-table th {
	text-align: left;
	vertical-align: middle;
}

#confirm-cylinder-table tr .tdcNo {
	border-left: 0;
	width: 20%;
}

#confirm-cylinder-table tr .tdcDays {
	border-right: 0;
	width: 40%;
}

/**************Landing page*****************/
body.homePage {
	background: #fff;
	overflow-x: hidden;
}

.headerWhite {
	background: #fff;
}

.homePage .outerWrap {
	visibility: hidden;
}

.header.headerLanding .headerInner > img {
	width: 140px;
	margin: 10px 0;
	float: left;
}

.headerTitle {
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
}

.homePage .header .right {
	margin-top: 17px;
	font-weight: 300;
	font-size: 15px !Important;
	line-height: -15px;
}

	.homePage .header .right img {
		width: 24px;
		vertical-align: middle;
		margin-right: 10px;
	}

.wrapperFull {
	max-width: 1366px;
}

.wrapperFull2 {
	max-width: none;
}


.frameBox {
	overflow: hidden;
}

#frame1 {
	background: url('../images/frame1bg.jpg') no-repeat center 0;
	background-size: 100%;
	background-attachment: fixed;
}

.frameInner {
	max-width: 1024px;
	margin: 0 auto;
}

#frame1 .frameInner > img {
	width: 20%;
	margin: 40px 3% 0;
	float: left;
}

#frame1 .frameInner .frameText {
	color: #fff;
	font-size: 30px;
	font-weight: 300;
	width: 74%;
	line-height: 40px;
	float: left;
	margin-top: 11%;
}

	#frame1 .frameInner .frameText > span {
		display: block;
		margin-bottom: 10px;
	}

.btnOrange {
	border: 2px solid #ffb45b;
	background-color: transparent;
	padding: 5px 15px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-size: 14px;
	color: #ffb45b;
	display: inline-block;
	line-height: 20px;
	margin-top: 5px;
	cursor: pointer;
}

	.btnOrange:hover {
		color: #ffb45b;
	}

.btnOrange2 {
	background-color: #ff9800;
	padding: 5px 15px;
	border-radius: 4px;
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-size: 14px;
	color: #fff;
	display: inline-block;
	line-height: 26px;
	margin-top: 5px;
	cursor: pointer;
	box-sizing: border-box;
	vertical-align: bottom;
}

	.btnOrange2:hover {
		opacity: 0.8;
	}

#frame2 {
	background: #f2f2f2;
}

	#frame2 .owl-item {
		margin-top: 40px;
		margin-bottom: 20px;
	}

	#frame2 .left {
		width: 47%;
		float: right;
		margin: 0 3% 0 10%;
		line-height: 20px;
	}

	#frame2 .right {
		width: 40%;
		float: right;
	}


	#frame2 .frameInner .item {
		font-weight: 300;
	}

		#frame2 .frameInner .item .title {
			font-size: 35px;
			font-weight: 100;
			line-height: 40px;
			margin-bottom: 5px;
		}

		#frame2 .frameInner .item .text {
			margin: 20px 0;
			font-size: 14px;
		}

	#frame2 .frameInner .mPlant,
	#frame2 .frameInner .mGauge,
	#frame2 .frameInner .mField .left {
		margin-top: 140px;
	}

		#frame2 .frameInner .mGauge img {
			width: 100%;
		}

		#frame2 .frameInner .mPlant img {
			margin-left: -20%;
			width: 120%;
			margin-top: -22%;
		}

	#frame2 .frameInner .mField img {
		width: 60%;
		margin-left: 50px;
	}


.navButton {
	float: left;
	border: 1px solid #7474a8;
	color: #7474a8;
	padding: 4px 10px 5px;
	font-size: 35px;
	line-height: 20px;
	font-weight: 100;
	cursor: pointer;
}

.navPrev {
	border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	-o-border-radius: 4px 0 0 4px;
}

.navNext {
	border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
	-o-border-radius: 0 4px 4px 0;
	border-left: 0;
}

.owl-controls {
	display: none !important;
}

#frame3 > img {
	width: 100%;
}

#frame3 {
	position: relative;
}

	#frame3 .frameInner .frameInnerInner {
		position: absolute;
		top: 0;
		margin-top: 80px;
		margin-left: 30px;
	}


	#frame3 .frameInner .title {
		font-weight: 400;
		font-size: 35px;
		color: #fff;
		margin-bottom: 30px;
	}

	#frame3 .frameInner .text {
		font-weight: 300;
	}

		#frame3 .frameInner .text img {
			display: inline-block;
			margin: 0 40px 0 10px;
			vertical-align: middle;
		}

		#frame3 .frameInner .text > span {
			display: inline-block;
			max-width: 450px;
			color: #fff;
			line-height: 20px;
			vertical-align: middle;
		}

	#frame3 .frame3bg_mobile {
		display: none;
	}

.homePage .footer_promo {
	text-align: center;
	background: #3190EF;
	color: #fff;
	font-size: 16px;
	line-height: 50px;
	margin-top: -5px;
}

.footer.footerLanding {
	padding: 10px 20px;
	position: static;
}

	.footer.footerLanding .frameInner > img {
		width: 100px;
		vertical-align: top;
	}

	.footer.footerLanding .copyright2 {
		float: right;
		display: block;
		color: #676767;
		font-weight: 300;
		font-size: 14px;
		line-height: 26px;
	}

.homePage .wrapper2 {
	margin-bottom: 0;
}

/***************mMix***************/
sup {
	vertical-align: super;
	font-size: smaller;
	line-height: 0;
}

.secHeader {
	text-align: left;
	margin: 15px 0;
	font-weight: bold;
	line-height: 24px;
}

.bg-white {
	background: #fff;
	border: 1px solid #c9c9c9;
	border-width: 1px 0;
	overflow: hidden;
	width: 100%;
}

	.bg-white .wrapper2 {
		background: #fff;
	}

.bg-gray-lighter {
	overflow: hidden;
	width: 100%;
}

.bg-red,
.table table tr td.bg-red {
	background: #FC184E;
}

.table table th span {
	display: inline-block;
}

.table .messageBox {
	padding: 8px 0;
	background-color: #fff;
	font-style: italic;
	color: gray;
	font-size: 16px;
}

.bold {
	font-weight: bold;
}

.green {
	color: green;
}

.green2 {
	color: #149c11;
}

.green3 {
	color: #11840e;
}

.box--green {
	background-color: #1BAD5A;
	padding: 15px 75px 15px 0;
	margin: 0 -75px 0 -15px !important;
	border-radius: 4px;
}

	.box--green *:disabled {
		opacity: 1 !important;
	}

.sl-wp.disabled:after {
	display: none;
}

.sl-wp.disabled select {
	-webkit-appearance: initial;
	-moz-appearance: initial;
	appearance: initial;
}

.box--green .unit, .box--green .fc-wp label {
	color: #fff;
}

.dark {
	color: #424242;
}

.mMixChildPage .wrapper2 {
	margin-bottom: 0;
	padding: 0;
	margin-top: 0;
}

.mMixChildPage table {
	margin-top: 0;
}

.jMixHeader {
	margin-bottom: -5px;
}

.jMixBody {
	margin-top: 10px;
}

.mMixChildPage .copyright {
	margin-bottom: 0;
	padding: 10px 0;
	background: #fff;
}

.mMixChildPage .data-table th {
	text-align: center;
}

.mMixChildPage .data-table td {
	text-align: left;
}

.mMixChildPage .data-table table tr th:first-child {
	text-align: center;
}

.wrapper3 .wrapper2 {
	padding: 0 10px;
}

	.wrapper3 .wrapper2 .data-table {
		margin: 0 -10px;
	}

.data-table .trFooter {
	background: #d3ecb9;
	color: #2f5b01;
}

	.data-table .trFooter td {
		text-align: center !important;
	}

.wrapper3 {
	background: #f9f9f9;
	margin-bottom: 50px;
	padding-bottom: 5px;
}

.caption {
	text-align: right;
	color: #808080;
	font-size: 11px;
	font-style: italic;
	margin: 5px 0 10px;
}

.imgWarning {
	width: 15px;
	margin: 0px 0 0 5px;
}

.imgSyncOk {
	width: 15px;
	margin: 0px 5px;
}

.posBottom {
	position: fixed;
	bottom: 40px;
	width: 100%;
	max-width: 1024px;
	margin-left: -20px;
}

.posBottom {
	padding: 0 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.medTitle {
	font-size: 18px;
	display: block;
}

#table-chemical td {
	padding: 6px;
	vertical-align: middle;
}

.data-table td.tdFull {
	padding: 0 !important;
	vertical-align: middle;
}

	.data-table td.tdFull * {
		width: 100%;
		height: 100%;
		border: 0;
		padding: 3px 5px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
	}

.table-mix-mobile {
	display: none;
}

.mMixChildPage table th {
	font-weight: bold !important;
	background-color: #7d91a9;
	color: #fff;
	vertical-align: middle;
}

.trEnd {
	display: none;
}

#table-chemical {
	margin-bottom: 0;
}

	#table-chemical .tdChemical > div {
		padding: 3px 10px;
	}

	#table-chemical td.tdQuantity {
		width: 120px;
	}

	#table-chemical .tdQuantity input {
		width: 100%;
	}

	#table-chemical td.tdUnit {
		font-size: 14px;
		width: 100px;
	}

	/*#table-chemical .tdUnit {
        border-right: 0;
    }*/

	#table-chemical .tdCommand {
		border-left: 0;
		width: 60px;
	}

		#table-chemical .tdCommand .addCRow {
			visibility: hidden;
		}

	#table-chemical tr:last-child .tdCommand .addCRow {
		visibility: visible;
	}

	#table-chemical tr:nth-child(6) .tdCommand .addCRow {
		visibility: hidden;
	}

.no-border-bt {
	border-bottom: 0;
}

.syncing {
	color: #1e9906;
}

.changesIncludedTitle {
	text-align: left;
	margin: 20px 0;
	text-indent: 15px;
}

.changesIncluded {
	text-align: left;
	list-style-type: decimal;
	list-style-position: inside;
	margin-bottom: 15px;
	font-size: 14px;
}

	.changesIncluded li {
		margin-bottom: 5px;
	}

.imgFull {
	width: 100%;
}

.normalCase {
	text-transform: none !important;
}

.form-message {
	color: #3F4492;
	font-size: 16px;
	text-align: center;
}

.buttonBetweenSection {
	margin: 20px 0 50px;
}
/*******************************Learn more**********************************/
body.learnMorePage {
	background-color: #fff;
}

.learnmore-form .frameInner {
	max-width: 400px;
	margin: 50px auto 100px;
}

.learnmore-form .ctrlWraper {
	margin-bottom: 15px;
}

.learnmore-form .label {
	color: #3F4492;
	margin-bottom: 8px;
}

.learnmore-form #btnSubmit {
	padding: 5px 50px;
	margin-top: 10px;
}

.learnMorePage .footerLanding {
	border-top: 1px solid #d9d9d9;
}

.learnMorePage .popupWraper {
	display: none;
}

.ctr-error {
	display: none;
	color: red;
}

/***********************Tab control***********************/
.tab-container ul {
	list-style: none;
	list-style-position: outside;
	width: 100%;
}

	.tab-container ul.tab-menu li {
		display: block;
		float: left;
		position: relative;
		width: 50%;
		font-size: 14px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		border-top: 1px solid #b2b2b2;
		background: #dfdfdf;
		color: #a2a2a2;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
		font-weight: bold;
	}

.mBatch .wrapper2 > .tab-container {
	background-color: #f9f9f9;
}

	.mBatch .wrapper2 > .tab-container > ul.tab-menu > li {
		width: 33%;
		border-left: 1px solid #fff;
	}

		.mBatch .wrapper2 > .tab-container > ul.tab-menu > li:first-child {
			border-left: 0;
		}

.tab-container ul.tab-menu li.active {
	color: #000;
	border-top: 2px solid #ff6700;
	background: #efefef;
	text-shadow: 0 0 1px #CC9;
	-moz-text-shadow: 0 0 1px #CC9;
	-webkit-text-shadow: 0 0 1px #CC9;
	-o-text-shadow: 0 0 1px #CC9;
	margin-top: -1px;
}

.tab-content {
	display: none;
	background: #efefef;
	overflow: hidden;
}

#gauge-tab {
	min-height: 948px;
}

.tab-container > div.active {
	display: block;
}

.table .tab-container {
	width: 50%;
	clear: both;
}

	.table .tab-container ul.tab-menu li.active {
		border-top: 1px solid #3F4492;
		margin-top: 0;
	}
/***********************End tab control*******************/

/*********************mBatch****************/
body.body2 {
	background: #efefef;
}

.mBatch {
	display: block;
}

.header2 {
	background: #fff;
	position: relative;
	border-bottom: 1px solid #efefef;
}

	.header2 .headerTitle {
		font-size: 20px;
	}

.pageTitle {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 44px;
}

.section-table {
	margin: 30px 0;
}

.tableTitle {
	font-size: 17px;
	color: #2f2497;
	margin-bottom: 10px;
}

.table {
	font-size: 14px;
	line-height: 20px;
}

	.table table {
		width: 100%;
	}

		.table table tr th {
			color: #fff;
			padding: 10px 5px;
		}

		.table table tr td {
			color: #000;
			background-color: #fff;
			padding: 5px;
			text-align: center;
		}

.bg-blue-dark {
	background-color: #3F4492;
}

.bg-blue {
	background-color: #2991cd;
}

.bg-gray {
	background-color: #606060;
}

.bg-brown {
	background-color: #996633;
}

.bg-gray-dark {
	background-color: #404040;
}

.bg-gray-light {
	background-color: #b3b3b3;
}

#gauge-tab {
	background-color: #2e2e66;
}

#gauge-tab {
	position: relative;
}

#version2 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	color: #fff;
}

.mPlantPage #version {
	margin: 0 0 5px;
	clear: both;
	text-align: center;
	color: #fff;
	position: fixed;
	bottom: 0;
	z-index: -1;
	width: 100%;
	font-weight: 300;
	color: #fff;
}

.messageBox {
	text-align: center;
	color: red;
	font-size: 20px;
}
/********************End mBatch*******************/

/********************mQuote***************************/
.wrapper4 {
	background-color: #efefef;
	margin-bottom: 50px;
	padding-bottom: 5px;
}

.wrapper5, .wrapper6 {
	background-color: transparent;
	padding: 10px 0;
	margin-bottom: 40px !important;
}

.wrapper6 {
	background: #efefef;
	overflow: hidden;
}

.table-box {
	margin: 10px 0 20px;
}

.box-header {
	line-height: 30px;
	font-size: 18px;
	color: #2f2497;
	margin-bottom: 10px;
}

	.box-header > img {
		height: 20px;
		vertical-align: top;
		margin-top: 5px;
		margin-right: 10px;
	}

	.box-header > .mSelect {
		margin-left: 30px;
		width: 140px;
	}

.box-content {
	margin-bottom: 10px;
	background-color: #fff;
}

	.box-content.mInputWrapper > div {
		padding: 10px;
	}

	.box-content table {
		width: 100%;
		font-size: 14px;
		text-align: left;
	}

.row-selectable {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.row-selectable tbody tr {
		cursor: pointer;
	}

	.row-selectable tr.selected td,
	.mResolvePage .row-selectable tr.selected td {
		background-color: #ff964f;
		color: #fff;
	}

.box-content table th,
.box-content table td {
	padding: 10px;
	border-bottom: 1px solid #d1d1d1;
	line-height: 22px;
	outline-offset: 0;
	text-align: left;
}

.box-content table.row-selectable th,
.box-content table.row-selectable td {
	padding: 8px 5px;
}

.box-content table#table-mix td {
	padding: 4px 2px;
}

.box-content table#table-mix tr.existing-mix td {
	padding: 4px 7px;
}

.box-content table#table-mix tr td.tdCommand {
	padding: 4px 2px;
	width: 65px;
}

.box-content table#table-mix td.tdCommand img {
	height: 30px;
	vertical-align: middle;
	cursor: pointer;
}

.tdCheck, .tdCheckAlt {
	width: 22px !important;
	height: 22px !important;
	vertical-align: top;
}

.tdCheckAlt {
	display: none;
}

.row-selectable tr.selected .tdCheck {
	display: none;
}

.row-selectable tr.selected .tdCheckAlt {
	display: inline-block;
}

.box-content table#table-mix tr td.tdCommand .btnAdd {
	display: none;
}

.box-content table#table-mix tr:last-child td.tdCommand .btnAdd {
	display: inline;
}

.mQuoteDetailsPage .box-content table#table-mix tr td.tdCommand,
.mQuoteDetailsPage .box-content table#table-mix tr th:last-child {
	display: none;
}

.box-content table#table-mix td.tdMixCode select {
	width: 120px;
}

.box-content table#table-mix td.tdStatus {
	text-align: center;
}

	.box-content table#table-mix td.tdStatus img {
		vertical-align: middle;
		height: 22px;
	}

.box-content table#table-mix td.tdDesc input {
	width: 200px;
}

.box-content table th {
	color: #707d8c;
}

.box-content .messageBox {
	padding: 8px;
	font-size: 17px;
}

.mQuoteOpportunityPage .form {
	margin: 0 0 20px;
}

.form .row {
	background-color: #e4e4e4;
	padding: 8px 0;
	font-size: 14px;
}

	.form .row.alt {
		background-color: #f8f8f8;
	}

	.form .row .cel50 {
		width: 50%;
		float: left;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 30px;
	}

		.form .row .cel50 .cel-inner {
			display: inline-block;
			vertical-align: top;
			width: 165px;
			margin-left: 20px;
		}

	.form .row .label {
		text-align: right;
		width: 150px;
		min-width: 150px;
		line-height: 15px;
		margin: 0 15px;
		float: left;
		color: #372c97;
	}

		.form .row .label .star {
			margin-top: -5px;
			vertical-align: top;
			display: inline-block;
		}

	.form .row .field {
		flex-grow: 1;
		margin-right: 15px;
		float: left;
	}

		.form .row .field img {
			height: 28px;
			vertical-align: middle;
			margin-top: 1px;
		}

		.form .row .field .box-footer {
			text-align: right;
		}

		.form .row .field > label {
			margin-right: 15px;
		}

	.form .row .cel-inner .label {
		width: auto;
		min-width: 0;
		height: 30px;
		line-height: 30px;
	}

	.form .row .cel-inner .field {
		width: auto;
	}

.box-footer {
	color: #fa8332;
}

	.box-footer button {
		border: 1px solid #fa8332;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		-o-border-radius: 2px;
		color: #fa8332;
		padding: 5px 40px;
		font-size: 15px;
		line-height: 21px;
		max-width: 360px;
		width: 100%;
		text-align: center;
		cursor: pointer;
		position: relative;
		background-color: transparent;
	}

		.box-footer button > img {
			position: absolute;
			height: 21px;
			top: 50%;
			left: 10px;
			margin-top: -11px;
		}

			.box-footer button > img.floatleft {
				height: 19px;
				vertical-align: bottom;
				margin: 1px 10px 0 0;
				position: static;
			}

			.box-footer button > img.floatright {
				position: static;
				margin-left: 15px;
				float: none;
				vertical-align: sub;
				height: 18px;
				margin-top: 0;
			}

		.box-footer button.button-small {
			width: auto;
			padding: 5px 15px;
		}

	.box-footer a {
		color: #fa8332;
		cursor: pointer;
	}

	.box-footer .or {
		display: inline-block;
		margin: 0 10px;
	}

	.box-footer button.button-primary {
		background-color: #fa8332;
		color: #fff;
	}


.btn3 {
	border: 1px solid #fa8332;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	color: #fa8332;
	padding: 5px 35px;
	font-size: 15px;
	line-height: 21px;
	text-align: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	-o-box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.btn3:active,
	.btn3:hover,
	.btn3:focus {
		color: #db691b;
		border-color: #db691b;
	}

	.btn3 img {
		position: absolute;
		height: 18px;
		top: 50%;
		left: 6px;
		margin-top: -9px;
	}

	.btn3.no-text img {
		position: static;
		margin-top: 0;
	}

.no-data {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10px;
	width: 100%;
	text-align: center;
}

.mSelect-small {
	max-width: 140px;
	margin: 0 10px;
}

.box-content2 .mSelect-small {
	margin: 0;
}

.check-box {
	border: 1px solid #838282;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-o-border-radius: 50px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	display: inline-block;
	padding: 3px;
	margin-top: 3px;
	vertical-align: top;
}

	.check-box[disabled] {
		cursor: default;
	}

	.check-box > img {
		display: none;
		width: 100% !important;
		height: 100% !important;
	}

	.check-box.active > img {
		display: block;
	}

.attention {
	color: red;
	margin-top: 20px;
	font-weight: bold;
}

.hint {
	color: #ccc;
	font-size: 13px;
	margin-bottom: 10px;
}

.jNote {
	padding: 15px;
}

.jPrimaryPlant {
	font-weight: bold;
	color: #f8a24b;
}

.box-footer button.disabled, btn3.disabled {
	cursor: default;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

.popup-large {
	max-width: 750px;
}

.confirmBox table {
	width: 100%;
}

	.confirmBox table tr th,
	.confirmBox table tr td {
		padding: 10px 5px;
		text-align: left;
	}

.table-popup tr th,
.table-popup tr td {
	border-bottom: 1px solid #3F4492;
}

.mQuoteCreateProject #confirm-popup .confirmBox > div {
	margin-bottom: 20px;
}

	.mQuoteCreateProject #confirm-popup .confirmBox > div > div {
		width: 50%;
		float: left;
		margin: 5px 0;
		display: flex;
		flex-direction: row;
	}

.mQuoteCreateProject #confirm-popup .confirmBox h1 {
	margin-bottom: 10px;
	display: block;
}

.mQuoteCreateProject #confirm-popup .confirmBox label {
	width: 110px;
	min-width: 110px;
	display: inline-block;
}

.mQuoteCreateProject #confirm-popup .confirmBox span {
	flex-grow: 1;
}

	.mQuoteCreateProject #confirm-popup .confirmBox span:before {
		content: ':';
		display: inline-block;
		margin-right: 5px;
	}
/***********************mSite*********************/
.marker-labels {
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	text-align: center;
	width: 120px;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	overflow: visible !important;
}

.marker-label-inner {
	overflow: visible !important;
	text-shadow: 0 0 5px #fff;
	-webkit-text-shadow: 0 0 5px #fff;
	-moz-text-shadow: 0 0 5px #fff;
	-o-text-shadow: 0 0 5px #fff;
	background-color: rgba(0,0,0,0.5);
	padding: 3px;
	max-width: 120px;
	margin: 0 auto;
	font-size: 11px;
}

.marker-labels.highlight .marker-label-inner {
	color: red;
	text-shadow: 0 0 5px #FF3A3A;
	-webkit-text-shadow: 0 0 5px #FF3A3A;
	-moz-text-shadow: 0 0 5px #FF3A3A;
	-o-text-shadow: 0 0 5px #FF3A3A;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.map-graphs {
	display: none;
}

.map-graph {
	width: 100%;
	height: 100px;
}

.marker-labels .map-graph {
	position: absolute;
	top: -126px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.map-if {
	width: 190px;
	overflow: hidden;
}

.map-if-transparent, .map-if {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
}

	.map-if .map-if-title {
		background-color: rgba(0,0,0,0.6);
		color: #fff;
		font-size: 13px;
		line-height: 16px;
		padding: 5px 8px;
		font-weight: bold;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.map-if .map-if-content {
		padding: 4px 8px;
		font-size: 12px;
		line-height: 16px;
	}

.map-ctrl-custom {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	-o-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	cursor: pointer;
	text-align: center;
	margin: 10px;
	color: #000;
	font-family: Roboto,Arial,sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 11px;
	padding: 8px;
	font-weight: 500;
	background-color: #fff;
}

	.map-ctrl-custom:hover {
		background-color: rgb(235, 235, 235);
	}

.mActPrjPage .wrapper,
.mActPrjPageTest .wrapper {
	position: relative;
}

.map-keys {
	position: absolute;
	top: -1px;
	right: 0;
	max-width: 200px;
	z-index: 1;
	opacity: 0.9;
	-moz-opacity: 0.9;
	display: none;
}

.quality-chart {
	background-color: #fff;
	min-height: 160px;
}

.quality-chart-sub {
	display: none;
}

.prj-chart {
	float: left;
}

.mActPrjPage .wrapper {
	margin-bottom: 35px;
}

.quality-chart-title {
	line-height: 16px;
	font-size: 16px;
	padding-top: 10px;
	padding-left: 10px;
	background-color: #fff;
}

.mActPrjPageTest .wrapper,
.mActPrjPageTest .tab-content,
.mActPrjPageTest .tab-container ul.tab-menu li.active {
	background-color: #fff;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.key-bar {
	color: #707d8c;
	font-family: 'HelveticaNeue-Medium', 'Helvetica', 'Arial', sans-serif;
	font-size: 14px;
	line-height: 20px;
	padding: 15px 10px;
}

	.key-bar b {
		font-size: 16px;
		color: #333;
		font-weight: 100;
	}

	.key-bar > img {
		height: 20px;
		vertical-align: top;
		margin: 0 5px 0 15px;
	}

.btn2 {
	border: 1px solid #5e52cc;
	color: #5e52cc;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	padding: 10px;
	line-height: 17px;
	text-align: center;
	background-color: #fff;
	cursor: pointer;
}

	.btn2 img {
		height: 24px;
		margin: -4px 10px -3px 0;
		vertical-align: top;
	}

	.btn2:hover {
		border-color: #240DFF;
		color: #240DFF;
	}

.key-bar #btnHidePins {
	margin-top: -10px;
	margin-left: 20px;
}

.map-search select,
.map-search input {
	margin: 0 10px;
}

.map-search select {
	max-width: 150px;
}

.map-search .inline {
	margin-left: 5px;
	margin-bottom: 10px;
	vertical-align: top;
	line-height: 30px;
}

.quote-filter {
	width: 45%;
	margin-right: 5%;
	float: left;
}

	.quote-filter label {
		width: 110px;
		font-size: 14px;
		display: inline-block;
	}

	.quote-filter input,
	.quote-filter #dateRange,
	.mResolveCommon #dateRange {
		padding: 5px;
		width: 190px;
		margin: 5px 10px 5px 5px;
		background-color: #fff;
		color: #000;
		border: 1px solid #6666a0;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
	}

.mResolveCommon #dateRange {
	margin: 0 10px 10px 0;
	height: 18px;
	width: 168px;
	text-align: left;
}

.mResolveInner #detail-tab {
	overflow: initial;
}

.quote-filter #ddlSpec {
	width: 202px;
	height: 28px;
	margin-left: 5px;
}

.quote-filter-option {
	margin-right: 20px;
	font-size: 14px;
}

	.quote-filter-option input {
		vertical-align: top;
		margin-top: 11px;
	}

#btnFilter {
	border: 1px solid #fa8332;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	color: #fa8332;
	padding: 5px 15px;
	font-size: 15px;
	line-height: 21px;
	width: auto;
	text-align: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	margin-left: 119px;
	margin-top: 3px;
}

	#btnFilter i {
		margin-right: 10px;
	}
/***********************end mQuote*****************/
/*iCost*/
.layout-2 .header {
	background-color: #fff;
	border-bottom: 1px solid #45498d;
	z-index: 2;
}

	.layout-2 .header .headerInner span {
		line-height: 50px;
		font-size: 24px;
	}

	.layout-2 .header .right img {
		/*height: 40px;*/
		margin: 3px 0 2px;
	}

.layout-2 .main {
	padding: 0;
	background-color: #fcfcfc;
	-webkit-box-shadow: 0 0 5px #ccc;
	-moz-box-shadow: 0 0 5px #ccc;
	-ms-box-shadow: 0 0 5px #ccc;
	-o-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	margin-bottom: 0;
}

	.layout-2 .main > table {
		width: 100%;
		margin: 0;
		padding: 0;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		max-width: 1024px;
		box-shadow: 0 0 5px #ccc;
		-webkit-box-shadow: 0 0 5px #ccc;
		-moz-box-shadow: 0 0 5px #ccc;
		-ms-box-shadow: 0 0 5px #ccc;
		-o-box-shadow: 0 0 5px #ccc;
		overflow: hidden;
	}

		.layout-2 .main > table > tbody > tr > td {
			vertical-align: top;
			padding-top: 51px;
		}

.menu-pane {
	background-color: #fbfbfb;
	width: 1px;
	border-right: 1px solid #f8a24c;
	text-align: left;
	font-size: 15px;
	box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	-moz-box-shadow: 0 0 5px #ccc;
	-ms-box-shadow: 0 0 5px #ccc;
	-o-box-shadow: 0 0 5px #ccc;
	overflow: auto;
}

	.menu-pane .menu-top, .menu-pane .menu-bottom {
		width: 220px;
	}

.menu-top {
	background-color: #fff;
	border-bottom: 2px solid #ff8c19;
}

.menu-item {
	cursor: pointer;
	line-height: 38px;
	border-top: 1px solid #fbca9a;
}

.menu-top .menu-item:first-child {
	border-top: none;
}

.menu-bottom .menu-item {
	border-top: 1px solid #d8d8d8;
}

.menu-collapsed {
	display: none;
	width: 47px;
	margin-left: -47px;
	text-align: center;
}

	.menu-collapsed > div {
		height: 47px;
		cursor: pointer;
	}

		.menu-collapsed > div:hover {
			background-color: #e0e0e0;
		}

	.menu-collapsed img {
		max-width: 30px;
		max-height: 21px;
		margin: 13px 0;
		vertical-align: top;
	}

.menu-popout {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 221px;
	width: 220px;
	height: 100%;
	text-align: center;
	background-color: #5A61D6;
	color: #fff;
	-moz-text-shadow: 0 0 1px #fff;
	-webkit-text-shadow: 0 0 1px #fff;
	-o-text-shadow: 0 0 1px #fff;
	text-shadow: 0 0 1px #fff;
}

.menu-popout-show {
	display: table !important;
}

.menu-popout > div {
	display: table-cell;
	vertical-align: middle;
	padding: 60px 30px 0;
}

.menu-popout img {
	width: 68px;
	margin-bottom: 10px;
}

#tbFreight2 {
	width: 220px;
	margin: 15px -30px 0;
}

	#tbFreight2 td {
		border-top: 1px solid #9da5ff;
		padding: 5px 5px 4px;
		vertical-align: middle;
	}

	#tbFreight2 tr:last-child td {
		border-bottom: 1px solid #9da5ff;
	}

	#tbFreight2 td:last-child {
		text-align: right;
		color: #c0caff;
	}

	#tbFreight2 td input {
		width: 100px;
		height: 26px;
		margin-left: 5px;
	}

.menu-item > span {
	width: 30px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 0 15px 0 5px;
}

.menu-item-collapsed {
	display: none;
	border-top: 1px solid #fbca9a;
	padding: 6px 10px;
}

.menu-bottom .menu-item-collapsed {
	border-top: none;
	padding: 0;
}

.menu-item img {
	vertical-align: middle;
}

.menu-item .menu-icon, .menu-icon {
	max-width: 30px;
	max-height: 21px;
	margin: 0 auto;
	vertical-align: sub;
}

.menu-item .floatright {
	margin-top: 12px;
	margin-right: 5px;
	-ms-transition: transform 0.2s linear;
	-o-transition: transform 0.2s linear;
	-webkit-transition: transform 0.2s linear;
	-moz-transition: transform 0.2s linear;
	transition: transform 0.2s linear;
}

.rotate-down {
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}

.iCost button {
	border: none;
	padding: 5px 15px;
	font-size: 15px;
	line-height: 21px;
	text-align: center;
	cursor: pointer;
	position: relative;
	width: 90%;
	max-width: 140px;
	color: #fff;
	margin: 10px auto 15px;
	display: block;
	letter-spacing: 2px;
}

.iCost #btnFind {
	background-color: #ff8c19;
	margin: 5px auto;
}

.iCost #btnUpdate {
	background-color: #2e3483;
}

.btnfade:disabled {
	background-color: #ccc !important;
	cursor: default !important;
}

.btnfade:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: .6;
	-khtml-opacity: .6;
	-ms-opacity: .6;
	opacity: .6;
}

.btnfade:disabled:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
}

.box50 {
	width: 50%;
	float: left;
}

.menu-bottom .box50 {
	margin-top: 10px;
	padding: 0 5px;
	font-size: 14px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.menu-bottom #tbFobPad {
	font-size: 14px;
}

	.menu-bottom #tbFobPad input {
		width: 60px;
		height: 30px;
		padding: 5px;
		margin: 2px 5px 2px 0;
	}

.iCost #tbFobPad .green3 {
	font-size: 15px;
	font-family: sans-serif;
	margin-right: 5px;
}

.menu-bottom #tbFobPad .title-padding .green3 {
	visibility: hidden;
}

.iCost #txtFob {
	margin-right: 5px;
}

.boxFobPad {
	font-size: 14px;
	padding: 0 10px;
}

	.boxFobPad .title-data {
		font-weight: bold;
	}

	.boxFobPad .green3 {
		font-size: 15px;
		font-family: sans-serif;
		margin-right: 5px;
	}

	.boxFobPad input {
		width: 150px;
	}

	.boxFobPad .title-padding .green3 {
		visibility: hidden;
	}

.boxFob {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #d8d8d8;
}

.boxPad {
	padding-top: 5px;
}

.menu-bottom .enter-cost-table table {
	margin: 5px 0;
	width: 100%;
}

.enter-cost-table table td {
	vertical-align: top;
	padding: 0 10px;
}

.menu-bottom .enter-cost-table table tr:last-child td {
	padding-top: 5px !important;
	padding-bottom: 0 !important;
}

.enter-cost-table #tbEnterCost-Expand {
	cursor: pointer;
	margin: 0;
}

	.enter-cost-table #tbEnterCost-Expand td {
		vertical-align: middle;
	}

#tbEnterCost-Expand img {
	-ms-transition: transform 0.2s linear;
	-o-transition: transform 0.2s linear;
	-webkit-transition: transform 0.2s linear;
	-moz-transition: transform 0.2s linear;
	transition: transform 0.2s linear;
}

.right-pane .result-wrapper {
	padding: 10px;
	display: none;
}

.right-pane .result {
	position: relative;
}

	.right-pane .result .table-wrapper {
		position: absolute;
		width: 100%;
	}

	.right-pane .result > table {
		width: 100%;
		border: 1px solid #bfbfbf;
	}

	.right-pane .result table th, .right-pane .result table td {
		text-align: center;
		border-right: 1px solid #f4f4f4;
		border-bottom: 1px solid #e3e3e3;
		padding: 6px;
	}


	.right-pane .result table th {
		background-color: #959595;
		color: #fff;
		border-bottom-color: #c2c2c2;
		font-size: 15px;
		vertical-align: middle;
		line-height: 26px;
	}

		.right-pane .result table th img {
			vertical-align: bottom;
			height: 26px;
			margin-top: -3px;
			margin-right: 5px;
		}

	.right-pane .result table td {
		color: #626262;
		background-color: #fff;
		font-size: 14px;
	}

		.right-pane .result table th:first-child, .right-pane .result table td:first-child {
			text-align: left;
			max-width: 80px;
			min-width: 80px;
		}

	.right-pane .result > table th:first-child, .right-pane .result > table td:first-child {
		display: table-cell;
	}

	.right-pane .result table th:last-child, .right-pane .result table td:last-child {
		border-right: none;
	}

	.right-pane .result table tbody tr:last-child td {
		border-bottom: none;
	}

.highlighted td {
	background-color: #f8a24c !important;
	color: #fff !important;
}

.filter-box {
	padding: 5px 7px;
	background-color: #efefef;
	text-align: left;
}

	.filter-box > span {
		color: #727272;
		font-size: 16px;
		line-height: 30px;
	}

	.filter-box #txtDateRange {
		width: 192px;
		cursor: text;
		margin-right: 5px;
		vertical-align: top;
	}

	.filter-box #ddlShow {
		width: 130px;
		padding: 5px 1px;
		vertical-align: top;
	}

.dcur {
	cursor: default !important;
}

.iCost #ddlPlant {
	height: auto;
	min-height: 30px;
	max-height: 150px;
}

#filter-table-title, .menu-bottom .plant-name {
	text-transform: uppercase;
	font-weight: bold;
}

#tbFreight {
	margin: 0;
}

	#tbFreight th,
	#tbFreight td {
		padding: 5px;
		border-bottom: 1px solid #d8d8d8;
	}

	#tbFreight th {
		padding: 6px;
	}

		#tbFreight th:first-child,
		#tbFreight td:first-child {
			padding-left: 10px;
		}

	#tbFreight .tdFreight {
		padding: 0;
	}

	#tbFreight .txtFreight {
		border: none;
		border-left: 1px solid #d8d8d8;
		padding: 5px;
		height: 31px;
		width: 100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

.layout-2 .popup .content {
	padding: 20px;
}

.layout-2 #confirm-popup .content {
	max-width: 550px;
}

.layout-2 .popup .btn {
	margin-top: 15px;
}

#ddlMaterialName, #ddlMaterial {
	width: 48%;
	margin-top: 6px;
	float: left;
}

#ddlMaterialName {
	margin-right: 4%;
}

.close-menu {
	cursor: pointer;
}

.btnGroup2 .btn {
	width: 48%;
	height: 40px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
}

	.btnGroup2 .btn:first-child {
		margin-right: 4%;
	}

.mResolveCommon .btnGroup2 .btn {
	font-size: 15px;
}

.filter-pane {
	text-align: left;
	background-color: #fff;
}

	.filter-pane > div {
		padding: 0 10px;
		border-bottom: 2px solid #ff8c19;
	}

	.filter-pane .menu-top {
		padding-top: 10px;
	}

	.filter-pane #ddlMaterialType, .filter-pane #ddlMaterialName, .filter-pane #ddlMaterial {
		width: 32%;
		float: left;
		margin-top: 0;
	}

	.filter-pane #ddlMaterialType, .filter-pane #ddlMaterialName {
		margin-right: 2%;
	}

	.filter-pane .col33 {
		float: left;
	}

.menu-title {
	margin: 10px 0 5px;
	height: 22px;
}

	.menu-title img {
		margin-right: 10px;
	}

.filter-pane button {
	margin: 15px 0;
}

#tbFobPad {
	width: 100%;
}

	#tbFobPad td {
		padding: 5px 0;
		border-bottom: 1px solid #d8d8d8;
	}

		#tbFobPad td img {
			margin-right: 10px;
		}

		#tbFobPad td #txtDate {
			width: 120px;
		}

.iCost2 .menu-bottom .menu-item {
	border-top: none;
}

	.iCost2 .menu-bottom .menu-item span {
		display: none;
	}

.iCost2 .menu-popout {
	position: static;
	width: 100%;
}

	.iCost2 .menu-popout > div {
		padding: 20px 0;
	}

.iCost2 #tbFreight2 {
	width: 100%;
	margin: 15px 0 0;
}
/*End iCost*/

/*mResolve*/
.mResolveCommon {
	font-size: 14px;
}

	.mResolveCommon .box-header {
		font-size: 14px;
		margin-left: 0;
	}

		.mResolveCommon .box-header .label {
			width: 65px;
			max-width: 65px;
			min-width: 65px;
		}

		.mResolveCommon .box-header select, .mResolveCommon .box-header #txtCustomer {
			width: 180px;
			margin: 0 10px 10px 0;
		}

			.mResolveCommon .box-header select:first-child {
				margin-left: 0;
			}

			.mResolveCommon .box-header select:last-child {
				margin-right: 0;
			}

		.mResolveCommon .box-header table td {
			vertical-align: top;
		}

.mResolvePage .tbSearch {
	width: 512px;
	float: left;
}

.mResolveCommon #btnSearch {
	padding: 5px;
	line-height: 1px;
	vertical-align: top;
}

.mResolvePage #btnSearch {
	margin-left: 10px;
}

.mResolvePage #btnCreate {
	margin-left: 10px;
	float: right;
	border-color: #548a00;
	color: #548a00;
	line-height: 18px;
	transition: all .4s ease;
}

.mResolvePage #table-issues {
	margin-top: 15px;
	margin-bottom: 0;
	font-size: 13px;
	letter-spacing: 0px;
}

	.mResolvePage #table-issues thead th {
		vertical-align: middle;
		padding-right: 23px;
	}

.mResolvePage .box-footer,
.sticky-button-bar {
	position: sticky;
	bottom: 0;
	padding: 10px;
	margin-top: -10px;
	background-color: rgba(239,239,239,0.8);
	box-shadow: 0px -4px 5px -3px #ccc;
	z-index: 1;
}

.sticky-button-bar {
	margin: 10px -10px -10px;
	text-align: right;
}

.mResolveCommon .box-content table th:first-child, .mResolveCommon .box-content table tbody td:first-child {
	text-align: left;
}

.mResolveCommon .box-content table th:last-child, .mResolveCommon .box-content table tbody td:last-child {
	text-align: right;
}

.mResolvePage #table-issues td:nth-child(7) {
	word-break: break-word;
}

.mResolveCommon .box-footer button {
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.mResolvePage .box-footer .btn3,
.mResolveCommon .sticky-button-bar .btn3 {
	background-color: rgb(239,239,239);
	letter-spacing: 0;
}

.ce-control {
	position: relative;
	cursor: pointer;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.ce-control:after {
		content: "";
		position: absolute;
		top: 49%;
		left: 0;
		right: 0;
		border-top: 1px solid #372c97;
	}

	.ce-control label {
		background-color: #efefef;
		padding: 0 20px;
		color: #372c97;
		position: relative;
		z-index: 1;
	}

	.ce-control span {
		position: absolute;
		z-index: 1;
		right: 0;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		background-color: #efefef;
		font-family: monospace;
		font-size: 18px;
		margin-top: -3px;
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		border-radius: 100%;
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
		-o-border-radius: 100%;
	}

	.rotate180,
	.ce-control.active span {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	}

.mResolveCommon .tab-content {
	padding: 20px 0;
}

.mResolveCommon #box-ddl {
	text-align: center;
	margin-bottom: 20px;
}

.mResolveCommon .col25 {
	width: 23.5%;
	margin-right: 2%;
	float: left;
	text-align: left;
}

	.mResolveCommon .col25:last-child {
		margin-right: 0;
	}

#box-ddl {
	margin: 0 -10px;
}

	#box-ddl .col20 {
		width: 20%;
		padding: 0 10px;
		float: left;
		text-align: left;
		box-sizing: border-box;
	}

	#box-ddl #dateRange {
		width: 100%;
		margin-right: 0;
		box-sizing: border-box;
		height: 30px;
	}

	#box-ddl .col33 {
		float: left;
		text-align: left;
	}

		#box-ddl .col33:last-child {
			margin-right: 0;
		}

.mResolveCommon #box-info {
	text-align: left;
}

.mResolveCommon .box-info-sub {
	margin-top: 10px;
}

.mResolveCommon .mInput, .mResolveCommon select {
	margin-bottom: 8px;
}

.mResolveCommon .box50 {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
}

	.mResolveCommon .box50:first-child {
		padding-right: 15px;
	}

.radio-list-control {
	width: 33.33%;
	padding: 7px 15px 7px 21px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	margin-bottom: 10px;
	height: 30px;
	cursor: pointer;
	float: left;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.radio-list-control img {
		vertical-align: top;
		height: 16px;
		margin-right: 5px;
		margin-left: -21px;
	}

		.radio-list-control img.checked, .radio-list-control.active img {
			display: none;
		}

			.radio-list-control.active img.checked {
				display: inline-block;
			}

	.radio-list-control span {
		white-space: initial;
		display: inline-block;
		vertical-align: top;
		line-height: 16px;
	}

.mResolveCommon textarea {
	display: block;
}

.mResolveCommon #txtComplaintNature {
	height: 89px;
}

.mResolveCommon #box-issue-edit .ce-control {
	margin-top: 5px;
	margin-bottom: 10px;
}

.ctr-left, .ctr-right {
	width: 49%;
	float: right;
}

.ctr-left {
	margin-right: 2%;
	float: left;
}

.mResolveCommon #txtResolution, .mResolveCommon #txtCorrective {
	height: 169px;
}

.mResolveCommon #txtApprovals {
	height: 77px;
}

.mResolveCommon #box-new-note {
	max-width: 360px;
	margin: 0 auto;
}

.mResolveCommon #issue-act-info {
	line-height: 2;
	margin-bottom: 20px;
}

.fu-wp {
	float: right;
	margin-bottom: -30px;
	cursor: pointer;
}

.upload-att-overlay {
	width: 60px;
	padding: 1px 0;
	margin-left: -60px !important;
	pointer-events: none;
	vertical-align: top;
	display: inline !important;
}

.fu-wp:hover .upload-att-overlay {
	color: #db691b;
	border-color: #db691b;
}

#upload-att {
	width: 60px;
	height: 25px;
	float: left;
	overflow: hidden;
	opacity: 0;
}

.atts {
	margin-top: 10px;
}

.att {
	background: url(../images/file.png) no-repeat center left;
	background-size: 20px;
	padding: 5px 25px;
	display: flex;
	flex-direction: row;
}

	.att.old:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.att span:first-child {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.att span:nth-child(2) {
		flex-grow: 1;
	}

	.att.delete {
		display: none;
	}

	.att span:nth-child(2) img {
		display: none;
		vertical-align: middle;
		margin-left: 10px;
	}

	.att.downloading span:nth-child(2) img {
		display: inline-block;
		width: 18px;
	}

.del-att {
	width: 20px;
	margin-right: -25px;
	margin-left: 10px;
	vertical-align: middle;
	float: right;
	cursor: pointer;
}

	.del-att:hover {
		opacity: 0.6;
	}

#ar-body-table {
	margin: 0 -15px;
}

#ar-body table {
	width: 100%;
	border-spacing: 15px;
	border-collapse: separate;
}

#ar-body .box-chart {
	background: #fff;
	text-align: center;
	padding: 10px 15px 15px;
	position: relative;
	display: block;
	width: auto;
	padding-left: 25px;
	padding-right: 25px;
}

#ar-body .box-customer {
	margin-bottom: 15px;
}

#ar-body table tr td > div {
	margin: 0 auto;
}

#ar-body label {
	font-size: 16px;
	margin-bottom: 5px;
	text-align: center;
	display: block;
}

#ar-body table canvas {
	width: 100%;
	height: 250px;
}

#chartCustomer {
	min-height: 200px;
}

#chartCost {
	height: 250px !important;
}

.btn-chart-back {
	width: auto !important;
	position: absolute;
	top: 50px;
	right: 53px;
	opacity: 0.4;
	border: 1px solid #fa8332;
	padding: 3px 10px;
	cursor: pointer;
	color: #fa8332;
	background: #fff;
	display: none;
}

	.btn-chart-back:hover {
		opacity: 1;
	}

.show-child .btn-chart-back {
	display: block;
}

.box-complaint-year {
	background: #fff;
	padding: 15px;
}

.mResolveCommon .wrapper {
	padding-left: 15px;
	padding-right: 15px;
}

.as-wp {
	max-width: 400px;
	margin: 0 auto;
}

	.as-wp > div {
		padding: 5px 10px;
		box-sizing: border-box;
	}

#jResolved {
	color: #3f860b;
}

.box-dataas {
	position: relative;
	min-height: 350px;
}

	.box-dataas .box-arwrapper .box50 {
		padding: 0 10px;
		font-size: 60px;
		font-weight: 200;
	}

		.box-dataas .box-arwrapper .box50 div {
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 300;
		}

#jTotalSC div {
	color: red;
	font-size: 36px;
}


#jAvgResolve div {
	color: red;
	font-size: 36px;
}

.box-complaint-year {
	position: relative;
}

.legend {
	margin-top: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.legend li {
		list-style: none;
		display: inline-block;
		margin: 5px 15px;
		line-height: 16px;
		cursor: pointer;
	}

		.legend li.hidden {
			text-decoration: line-through;
		}

		.legend li span {
			width: 14px;
			height: 14px;
			margin-right: 8px;
			display: inline-block;
			vertical-align: top;
		}

#btnResolve {
	border-color: #01b109;
	color: #01b109;
	margin-bottom: 10px;
}

.mResolveCommon .btnBack {
	margin: 0 0 10px 0;
}

#box-activity {
	max-height: 300px;
	overflow: auto;
	margin-left: -8px;
	padding-left: 8px;
}

.box-note {
	color: #000;
	padding-top: 20px;
	padding-bottom: 25px;
}

	.box-note:after {
		clear: both;
		display: block;
		content: ' ';
	}

.user-ava {
	float: left;
	position: relative;
	margin-top: -7px;
}

	.user-ava img {
		width: 40px;
		background: #fff;
		border: 2px solid #c1c1c1;
		border-radius: 100%;
		display: block;
	}

	.user-ava div {
		position: absolute;
		top: 100%;
		left: -8px;
		width: 60px;
		margin-top: 2px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-transform: uppercase;
	}

.arrow_box {
	position: relative;
	background: #ff6e6e;
	border: 1px solid #980f10;
	margin-left: 55px;
	padding: 4px 6px;
	color: #fff;
	font-size: 15px;
	line-height: 20px;
	display: table;
}

	.arrow_box:after, .arrow_box:before {
		right: 100%;
		top: 0;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.arrow_box:after {
		border-color: rgba(255, 110, 110, 0);
		border-right-color: #ff6e6e;
		border-width: 5px;
		margin-top: 9px;
	}

	.arrow_box:before {
		border-color: rgba(152, 15, 16, 0);
		border-right-color: #980f10;
		border-width: 6px;
		margin-top: 8px;
	}

	.arrow_box div {
		position: absolute;
		font-size: 11px;
		color: #000;
		margin-top: 8px;
		margin-left: -6px;
	}

.btnBack span {
	font-family: monospace;
	font-size: 20px;
	float: left;
	margin-left: -30px;
	margin-top: -1px;
}

.mResolveCommon .mSelect {
	border-color: #929292;
	padding-right: 18px;
}
/*End mResolve*/

.mSubmitPage .col33 {
	float: left;
	padding: 15px;
	box-sizing: border-box;
	width: 33.33%;
	margin-right: 0;
}

	.mSubmitPage .col33 .btn3 {
		display: block;
	}

		.mSubmitPage .col33 .btn3:first-child, .mSubmitPage .col33 #txtSearch {
			margin-bottom: 15px;
		}

	.mSubmitPage .col33 #txtSearch {
		height: 33px;
	}

.top-bar {
	display: inline-block;
}

	.top-bar > * {
		display: inline-block;
		margin-right: 5px;
		vertical-align: top;
	}

.search-wp {
	width: auto;
	display: inline-block;
	margin-right: 5px;
}

	.search-wp i {
		margin-left: 10px;
		color: #8b98a8;
		position: relative;
		line-height: 36px;
		vertical-align: top;
		margin-top: 1px;
	}

	.search-wp input {
		padding-left: 30px;
		margin-left: -28px;
	}

.sl-wp {
	color: #372c97;
	white-space: nowrap;
	display: inline-block;
	width: 160px;
}

	.sl-wp.w-auto {
		width: auto;
	}

input.w-auto {
	width: 100%;
}

.sl-wp select {
	width: 100%;
	height: 36px;
	line-height: 23px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border: 1px solid #bcc9d3;
	background-color: #fff;
	padding: 0 18px 0 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.sl-wp i {
	margin-left: 10px;
	color: #8b98a8;
	position: relative;
	line-height: 36px;
	vertical-align: top;
	margin-top: 1px;
}

	.sl-wp i + select {
		padding-left: 30px;
		margin-left: -28px;
	}

.sl-wp:after {
	content: "\f107";
	color: #8b98a8;
	font-family: "Font Awesome 5 Pro";
	pointer-events: none;
	font-size: 16px;
	vertical-align: top;
	margin-right: 9px;
	margin-left: -18px;
	display: inline-block;
	line-height: 34px;
	transform: translateY(1px);
	background-color: #fff;
	height: 32px;
	height: calc(100% - 2px);
}

.commands .right > * {
	margin-left: 5px;
}

.btn-group {
	display: inline-block;
	margin-right: 5px;
}

	.btn-group > * {
		border: 1px solid #bcc9d3;
		border-left-width: 0;
		width: 36px;
		height: 36px;
		text-align: center;
		line-height: 34px;
		box-sizing: border-box;
		background-color: #fff;
	}

		.btn-group > *:hover,
		.btn-group > *.active {
			background-color: #f5f6f9;
		}

		.btn-group > *:first-child {
			border-left-width: 1px;
			border-radius: 3px 0 0 3px;
		}

		.btn-group > *:last-child {
			border-radius: 0 3px 3px 0;
		}

.date-wp {
	white-space: nowrap;
}

	.date-wp i {
		margin-left: -39px;
		border-left: 1px solid #bcc9d3;
		padding: 0 9px;
		line-height: 36px;
		font-size: 18px;
		vertical-align: middle;
		pointer-events: none;
	}

	.date-wp input {
		border-radius: 3px;
		padding-left: 10px;
		width: 180px;
		height: 36px;
		box-sizing: border-box;
		border: 1px solid #bcc9d3;
		background-color: #fff;
	}

.form-control {
	width: 180px;
	height: 30px;
	padding: 5px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border: 1px solid #6666a0;
	box-sizing: border-box;
}

	.form-control[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

.mSubmitPage .quote-filter {
	margin-bottom: 10px;
}

.mSubmitPage #dateRange {
	width: 180px;
	margin: 0;
}

.mSubmitPage #btnFilter {
	margin-left: 114px;
	margin-top: 0;
}

.mSubmitPage .box-header {
	margin: 0 10px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

#submittal-popup {
	width: 90%;
	max-width: 800px;
}

	#submittal-popup.no-submital {
		max-width: 400px;
	}

	#submittal-popup .content {
		max-width: none;
	}

	#submittal-popup .confirmBox {
		margin-bottom: 15px;
	}

		#submittal-popup .confirmBox .col50 {
			float: left;
			margin-bottom: 10px;
			padding-right: 20px;
			box-sizing: border-box;
		}

		#submittal-popup .confirmBox:after {
			clear: both;
			display: block;
			content: '';
		}

		#submittal-popup .confirmBox span {
			width: 130px;
			color: #2f2497;
			display: inline-block;
		}

	#submittal-popup .messageBox {
		color: #ccc;
		font-size: 16px;
		margin-bottom: 40px;
	}

#email-popup {
	width: 90%;
	max-width: 450px;
}

	#email-popup .content {
		max-width: none;
	}

.btnBack {
	margin: 10px;
	display: inline-block;
}

.mSubmitCE .panel label {
	width: 120px;
	display: inline-block;
	font-size: 14px;
	line-height: 36px;
	vertical-align: top;
}

.mSubmitCE label.ckb-wrapper {
	width: auto;
}

	.mSubmitCE label.ckb-wrapper input {
		height: 20px;
	}

.mSubmitCE .form-control {
	margin: 5px 0;
	width: 160px;
}

.mSubmitCE #btnPreview {
	vertical-align: top;
	margin: -6px 10px 5px;
	font-size: 14px;
	text-align: center;
	padding: 4px 0;
}

.preview-loading img {
	vertical-align: text-bottom;
	margin-right: 5px;
}

.mSubmitCE input[type="checkbox"] {
	margin-right: 10px;
}

.mSubmitCE .ckb-wrapper {
	width: auto;
}

.mSubmitCE .col50 .mInput {
	margin-bottom: 10px;
}

.mSubmitCE #confirm-popup {
	width: 450px;
	max-width: 90%;
}

	.mSubmitCE #confirm-popup label {
		width: 220px;
		display: inline-block;
		color: #372c97;
		margin: 5px 0;
	}

	.mSubmitCE #confirm-popup .content {
		max-width: none;
	}

.mix_plant_inner {
	display: inline-block;
	max-height: 200px;
	min-height: 90px;
	border-radius: 3px;
	border: 1px solid #6666a0;
	overflow: auto;
}

.mix_plant {
	font-size: 14px;
	padding: 0;
	margin: 0 !important;
	position: relative;
	border: none;
	width: 158px !important;
}

	.mix_plant thead {
		font-weight: bold;
		color: #707d8c;
	}

		.mix_plant thead td {
			background-color: #fff;
			position: sticky;
			top: 0;
		}

			.mix_plant thead td:after {
				bottom: -1px;
				border-bottom: 1px solid #d1d1d1;
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
			}

	.mix_plant td {
		padding: 5px;
		border-bottom: 1px solid #d1d1d1;
		height: 19px;
	}

	.mix_plant tbody td {
		cursor: pointer;
	}

	.mix_plant tbody tr:last-child td {
		border-bottom: none;
	}

	.mix_plant tr.selected {
		background-color: #fa8332;
		color: #fff;
	}

.mSubmitCE .btn3 {
	display: inline-block !important;
	font-size: 24px;
	padding: 5px;
	width: 33px;
	font-family: monospace;
	margin-top: 2px;
	margin-left: 6px;
	vertical-align: top;
}

#table-submittal {
	width: 100%;
}

	#table-submittal .messageBox {
		font-size: 14px;
	}

	#table-submittal img {
		width: 18px;
		vertical-align: middle;
	}

.submittalNumber {
	font-size: 14px;
}

.side-menu {
	width: 200px;
	position: fixed;
	background-color: #3e3f87;
	top: 0;
	left: -200px;
	bottom: 0;
	transition: all .4s;
}

.menu-open .side-menu {
	left: 0;
}

.side-menu > img {
	width: 180px;
	margin: 0 auto;
	display: block;
}

.side-menu > .menu-button {
	position: absolute;
	top: 25px;
	right: -33px;
	padding: 5px;
	width: 16px;
	cursor: pointer;
}

.menu-inner {
	border-top: 1px solid #333479;
	padding-top: 15px;
	margin: 0 -10px;
}

.side-menu-item, .sub-menu-item {
	padding: 12px 0;
	padding-left: 20px;
	color: #fff;
	display: block;
	transition: all .4s ease;
}

	.side-menu-item:hover, .sub-menu-item:hover {
		color: #fff;
	}

.side-menu i {
	margin-right: 10px;
}

.side-menu-item {
	margin-right: 15px;
	border-radius: 0 15px 15px 0;
	cursor: pointer;
}

	.side-menu-item.active {
		color: #f8a24b;
		background-color: #57589c;
	}

	.side-menu-item .fa-angle-down {
		float: right;
		font-size: 18px;
		transition: all .4s ease;
		transform-origin: center;
	}

	.side-menu-item.active .fa-angle-down {
		transform: rotate(180deg);
	}

.sub-menu {
	transition: all .4s ease;
}

.side-menu-item.active .sub-menu .sub-menu-item {
	line-height: 1.4;
	font-size: 14px;
	padding: 12px 0;
}

.sub-menu-item {
	color: #95a4bc;
	padding-left: 0;
	font-size: 0;
	padding: 0;
	line-height: 0;
}

	.sub-menu-item.active {
		color: #fff;
	}

	.sub-menu-item i {
		opacity: 0;
		font-style: normal;
		width: 14px;
		display: inline-block;
		text-align: center;
	}

	.sub-menu-item.active i {
		opacity: 1;
	}

.menu-footer {
	position: sticky;
	top: 100vh;
	left: 0;
	width: 100%;
	padding: 15px 0;
	border-top: 1px solid #4d4e99;
}

	.menu-footer .sub-menu-item {
		padding-left: 20px;
	}

		.menu-footer .sub-menu-item i {
			opacity: 1;
		}

.main-content {
	padding-bottom: 100px;
	position: relative;
	padding-top: 20px;
	margin-left: 40px;
	margin-right: 40px;
	min-height: 100vh;
	transition: all .4s;
	box-sizing: border-box;
	color: #3c3f52;
}

.menu-open .main-content {
	margin-left: 240px;
}

.btnBlue {
	padding: 6px 10px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #bcc9d3;
	display: inline-block;
	height: 36px;
	line-height: 24px;
	color: #2169e0;
	margin-right: 5px;
	box-sizing: border-box;
	transition: all .4s;
}

	.btnBlue i {
		margin-right: 6px;
	}

	.btnBlue:hover {
		color: #2169e0;
		background-color: #f6f7fd;
	}

.txt {
	padding: 6px 10px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #bcc9d3;
	display: inline-block;
	height: 36px;
	line-height: 24px;
	width: 160px;
	box-sizing: border-box;
}

.q20-body #txtSearch {
	border-radius: 4px 0 0 4px;
	vertical-align: top;
}

.btnIn {
	margin-left: -4px;
	padding: 6px 10px;
	border: 1px solid #bcc9d3;
	display: inline-block;
	height: 36px;
	line-height: 22px;
	border-radius: 0 4px 4px 0;
	color: #8b98a8;
	box-sizing: border-box;
	background-color: #f8f9fb;
	transition: all .4s;
	cursor: pointer;
	vertical-align: top;
}

	.btnIn:hover {
		background-color: #e8e9f4;
		color: #6b7f97;
	}

.panel {
	border-radius: 4px;
	background-color: #fff;
	padding-bottom: 15px;
	box-shadow: 0 0 5px #d8e0e6;
	overflow: hidden;
}

.footer {
	position: absolute;
	bottom: 27px;
	color: #6c7c8c;
}

.breadcrumb {
	font-size: 28px;
	color: #3c3f52;
	margin: 30px 0 20px;
}

	.breadcrumb i {
		margin: 0 10px;
		color: #8b98a8;
		font-size: 18px;
		vertical-align: middle;
	}

.box-search {
	padding: 15px 0;
}

	.box-search > div {
		padding: 5px 30px;
		width: 33.33%;
		box-sizing: border-box;
		float: left;
		display: flex;
		flex-direction: row;
	}

		.box-search > div label {
			width: 90px;
			line-height: 36px;
		}

		.box-search > div *:nth-child(2) {
			flex-grow: 1;
		}

	.box-search #dateRange {
		background-color: #fff;
		color: #3c3f52;
		margin: 0;
		border: 1px solid #bcc9d3;
	}

		.box-search #dateRange:hover {
			box-shadow: none;
		}

	.box-search #btnFilter {
		float: right;
		margin-right: 30px;
		margin-top: 5px;
	}

.tb-orange th {
	background-color: #f8a24b;
	color: #fff;
	text-align: left;
	padding: 10px;
	text-transform: uppercase;
	vertical-align: middle;
}

.tb-orange td {
	padding: 10px;
	border-bottom: 1px solid #d8e0e6;
	color: #3c3f52;
}

	.tb-orange th:first-child,
	.tb-orange td:first-child {
		padding-left: 25px;
	}

	.tb-orange th:last-child,
	.tb-orange td:last-child {
		padding-right: 25px;
	}

.tb-orange tr:nth-child(2n+1) {
	background-color: #f8f9fb;
}

.tb-orange tr:nth-child(2n) {
	background-color: #fff;
}

.comming-soon {
	font-size: 40px;
	width: 100%;
	align-self: center;
	text-align: center;
}

.right-menu a {
	color: #3c3f52;
	line-height: 36px;
}

	.right-menu a:hover {
		color: #232847;
	}

	.right-menu a i {
		margin-right: 10px;
	}

.tabs {
	display: inline-flex;
	flex-direction: row;
}

	.tabs > * {
		color: #2169e0;
		border: 1px solid #2169e0;
		border-left-width: 0;
		line-height: 26px;
		padding: 4px 20px;
		box-sizing: border-box;
		background-color: #fff;
		transition: all .4s ease;
		cursor: pointer;
	}

		.tabs > *:first-child {
			border-left-width: 1px;
			border-radius: 3px 0 0 3px;
		}

		.tabs > *:last-child {
			border-radius: 0 3px 3px 0;
		}

		.tabs > *:hover {
			background-color: #2169e0;
			color: #fff;
		}

		.tabs > *.active {
			color: #fff;
			background-color: #2169e0;
			cursor: default;
		}

.tabs2 {
	margin-bottom: -1px;
}

	.tabs2 .tab {
		padding: 15px 25px;
		color: #8b98a8;
		font-size: 16px;
		border-bottom: 2px solid transparent;
		display: inline-block;
		cursor: pointer;
	}

		.tabs2 .tab.active {
			font-size: 20px;
			color: #3c3f52;
			border-bottom-color: #f8a24b;
		}

.btn4 {
	color: #fff;
	background-color: #2169e0;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	border: none;
}

	.btn4:hover {
		background-color: #1d57b9;
	}

.btn5 {
	border: 1px solid #fa8332;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	color: #fa8332;
	padding: 5px 40px;
	font-size: 15px;
	line-height: 21px;
	max-width: 360px;
	width: 100%;
	text-align: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
}

.mSubmitCE .panel .txt,
.mSubmitCE .panel .select2 {
	margin-bottom: 10px;
}

.mix-info {
	margin: 20px 15px 0;
}

	.mix-info .txt {
		width: 180px;
	}

	.mix-info .col50 {
		float: left;
	}

.mSubmitPage .autocomplete-suggestions {
	width: auto !important;
	max-width: 300px;
}

.autocomplete-suggestions {
	z-index: 99999999 !important;
}

.autocomplete-suggestion {
	overflow: initial;
}

.tablesorter-default .header, .tablesorter-default .tablesorter-header {
	padding-right: 15px !important;
	vertical-align: middle;
	border-bottom: 1px solid #d1d1d1 !important;
}

.tablesorter-default .header, .tablesorter-default .tablesorter-header {
	background-image: none;
}

	.tablesorter-default .header:hover, .tablesorter-default .tablesorter-header:hover {
		background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	}

.tablesorter-default thead .headerSortUp, .tablesorter-default thead .tablesorter-headerAsc, .tablesorter-default thead .tablesorter-headerSortUp {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) !important;
}

.tablesorter-default thead .headerSortDown, .tablesorter-default thead .tablesorter-headerDesc, .tablesorter-default thead .tablesorter-headerSortDown {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) !important;
}

.pager {
	float: right;
	line-height: 24px;
}

	.pager .pager-icon {
		width: 24px;
		height: 24px;
		margin: 5px 3px;
		display: inline-block;
		font-family: monospace;
		text-align: center;
		cursor: pointer;
		border-radius: 3px;
		box-shadow: 0 0 5px #ccc;
	}

		.pager .pager-icon[disabled] {
			cursor: default;
		}

#default-popup .content {
	max-width: 400px;
	width: 400px;
}

/*#table-issues td:last-child {
    min-width: 48px;
}*/

#table-issues svg {
	width: 18px;
	height: 18px;
	fill: #fa8332;
	cursor: pointer;
	transition: all .4s ease;
}

#table-issues .selected svg {
	fill: #fff;
}

#table-issues svg:hover {
	transform: scale(1.2);
	transform-origin: center center;
	opacity: 0.8;
}

.btnStatus {
	margin-left: 10px;
}

.panel {
	margin-top: 20px;
	padding-top: 15px;
}

	.panel > div > table,
	.panel > table {
		border-radius: 4px 4px 0 0;
		width: 100%;
	}

#table-specimen td:last-child,
#table-specimen th:last-child {
	text-align: center;
}

.btn-sm {
	width: 20px;
	line-height: 16px;
	text-align: center;
	padding: 0;
	border: none;
	background-color: transparent;
	color: #8b98a8;
}

.btnExpand {
	background-color: #8b98a8;
	color: #fff;
	border: 2px solid transparent;
	font-weight: 700;
	border-radius: 3px;
	font-size: 11px;
}

	.btnExpand.active {
		border-color: #ff9800;
	}

.test-data .panel > table tr td:first-child,
.test-data .panel > table tr td:last-child {
	width: 1px;
	white-space: nowrap;
}

	.test-data .panel > table tr td:last-child button:first-child {
		margin-right: 10px;
	}

.trChild {
	display: none;
}

	.trChild > td {
		padding: 0 !important;
	}

	.trChild td {
		background-color: #f5f6f9;
	}

	.trChild .box50 {
		box-sizing: border-box;
		padding: 20px;
	}

		.trChild .box50:first-child {
			border-right: 1px solid #d8e0e6;
			margin-right: -1px;
		}

		.trChild .box50:last-child {
			border-left: 1px solid #d8e0e6;
		}

.trParent.active {
	background-color: #ebedf1;
}

	.trParent.active td:nth-child(2) {
		font-weight: bold;
	}

	.trParent.active + .trChild {
		display: table-row;
	}

.trChild h2 {
	margin-bottom: 20px;
	font-size: 18px;
}

.form {
	margin: 0 -15px;
}

.fc-wp {
	display: flex;
	flex-direction: row;
	width: 50%;
	float: left;
	padding: 0 15px;
	box-sizing: border-box;
	margin-bottom: 10px;
	position: relative;
}

	.fc-wp label {
		min-width: 110px;
		width: 110px;
		line-height: 22px;
		padding: 7px 0;
	}

.box-search-mm .fc-wp label {
	line-height: 18px;
	align-self: center;
	padding: 0;
}

.fc-wp input,
.fc-wp .sl-wp {
	width: 100%;
}

	.fc-wp input[type="checkbox"],
	.fc-wp input[type="radio"] {
		width: 18px;
		margin-right: 5px;
	}

.fc-wp .date-wp input {
	width: 180px;
}


.mix-material .fc-wp {
	width: 100%;
	box-sizing: border-box;
}

	.mix-material .fc-wp label {
		min-width: 120px;
		width: 120px;
		margin-right: 5px;
	}

.mix-material .box-search-mm .fc-wp {
	display: block;
	float: none;
}

	.mix-material .box-search-mm .fc-wp label {
		min-width: 0;
		width: auto;
		margin-bottom: 5px;
		margin-right: 0;
		display: block;
	}

.mix-material input:disabled,
.mix-material select:disabled {
	background-color: #fff;
	opacity: 0.5;
}

.ctr-left2 {
	margin-right: 8px;
	width: 50%;
}

.tb-inner-wp {
	margin: 0 -20px;
}

.tb-inner {
	width: 100%;
}

	.tb-inner th:first-child,
	.tb-inner td:first-child {
		padding-left: 20px;
	}

	.tb-inner th:last-child,
	.tb-inner td:last-child {
		padding-right: 20px;
	}

	.tb-inner th {
		background-color: transparent;
		color: #e57f12;
	}

	.tb-inner tbody tr:last-child td {
		border-bottom: none;
	}

.test-data .tb-inner tbody tr:nth-child(4n+2) {
	background-color: #f8f9fb;
}

.test-data .tb-inner tbody tr:nth-child(4n+1) {
	background-color: #fff;
}

.test-data .tb-inner thead tr {
	background-color: transparent;
}

	.test-data .tb-inner thead tr th {
		border-bottom: 1px solid #d8e0e6;
	}

.test-data .tb-inner .sl-wp select {
	min-width: 50px;
}

.tab-content {
	display: none;
}

	.tab-content.active {
		display: block;
	}

.col-wp {
	display: flex;
	flex-direction: row;
	margin: 0 10px;
}

	.col-wp .col33 {
		width: 33.33%;
		padding: 15px;
		box-sizing: border-box;
		margin-right: 0;
	}

	.col-wp .col50 {
		padding: 15px;
		padding-right: 50px;
		box-sizing: border-box;
		margin-right: 0;
	}

.mix-material .box-search-mm {
	margin-top: 15px;
}

.box-search-mm .col-wp .col50 {
	padding: 0;
	padding-right: 75px;
}

.dashboard .col-wp {
	margin: 0 -15px;
}

.mix-material .col33:first-child {
	padding-right: 30px;
}

.unit {
	position: absolute;
	right: -60px;
	width: 70px;
	color: #8b98a8;
	line-height: 36px;
}

.box-gray {
	background-color: #eef0f6;
	border-radius: 3px;
	padding: 25px;
	margin-left: -25px;
}

	.box-gray > .fc-wp {
		width: auto !important;
		padding-left: 0;
	}

	.box-gray > label {
		margin: 10px 0;
		display: block;
	}

	.box-gray .btnOrange2 {
		margin-top: 0;
	}

.btnOrange2 i {
	margin-right: 10px;
}

.btnGreen {
	background-color: #149c11;
	color: #fff;
}

	.btnGreen:hover {
		background-color: #118a0e;
	}

.btnGreen--alt {
	border: 1px solid #149c11;
	color: #149c11;
	background-color: #fff;
	padding: 4px 15px;
	line-height: 26px;
}

	.btnGreen--alt:hover {
		background-color: #118a0e;
		color: #fff;
	}

.status {
	border-radius: 3px;
	line-height: 23px;
	color: #fff;
	text-transform: uppercase;
	width: 75px;
	text-align: center;
}

	.status.failed {
		background-color: #f84b4b;
	}

	.status.passed {
		background-color: #26b867;
	}

.quality .box-search-mm .col33 {
	display: flex;
	flex-direction: column;
}

	.quality .box-search-mm .col33 .tags {
		flex-grow: 1;
		border: 1px solid #bcc9d3;
		background-color: #f3f5f9;
		padding: 10px;
		border-radius: 3px;
		margin-top: 15px;
	}

.tag {
	display: inline-block;
	margin-right: 2px;
	margin-bottom: 6px;
	border-radius: 100px;
	padding: 2px 10px;
	padding-right: 0;
	color: #fff;
	background-color: #8b98a8;
	font-size: 13px;
}

.tag-close {
	color: #c5ced8;
	padding: 2px 8px 2px 6px;
	margin: 2px 0 2px 6px;
	border-left: 1px solid #c5ced8;
	transition: all .4s ease;
	cursor: pointer;
}

	.tag-close:hover {
		color: #fff;
	}

.search-list {
	height: 100px;
	padding: 15px;
	border: 1px solid #bcc9d3;
	background-color: #f3f5f9;
	transition: all .4s ease;
	margin: 10px 0;
	border-radius: 3px;
}

	.search-list.disabled {
		opacity: 0.5;
	}

.search-item {
	margin-bottom: 10px;
}

.btnClear {
	background-color: #f3f5f9;
	margin-left: 10px;
	padding: 5px 15px;
	border-radius: 4px;
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-size: 14px;
	display: inline-block;
	line-height: 26px;
	margin-top: 5px;
	cursor: pointer;
	box-sizing: border-box;
	vertical-align: bottom;
}

.quality .box-search-mm .col33:last-child > div:last-child {
	display: flex;
	flex-direction: row;
}

	.quality .box-search-mm .col33:last-child > div:last-child .btnOrange2 {
		flex-grow: 1;
	}

.card-body {
	position: relative;
}

.btnRound {
	border: none;
	background-color: transparent;
	padding: 0;
	position: absolute;
	top: 10px;
	color: #8b98a8;
	transition: all .4s ease;
}

	.btnRound i {
		font-size: 20px;
	}

.btnCheck {
	right: 30px;
}

.btnCancel {
	right: 0;
}

.btnCheck:hover {
	color: #2169e0;
}

.btnCancel:hover {
	color: #f56767;
}

.card-inner {
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
	background-color: #fff;
}

.card-header {
	padding: 10px 15px;
	border-bottom: 1px solid #d8e0e6;
	background-color: #f8f9fb;
	font-weight: bold;
}

.card-body {
	padding: 0 15px;
	overflow: auto;
}

	.card-body::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.card-body::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
		border-radius: 100px;
	}

	.card-body::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,0.2);
		border-radius: 100px;
	}


.li-1, .li-2, .li-3 {
	border-bottom: 1px solid #d8e0e6;
	padding: 10px 0;
}

.li-1 {
	position: relative;
}

.status2 {
	border-radius: 3px;
	padding: 2px 10px;
	display: inline-block;
	margin-bottom: 3px;
}

	.status2.red {
		color: #f56767;
		background-color: #fef0f0;
	}

	.status2.orange {
		background-color: #fef5ed;
		color: #f8a14a;
	}

.li-2 {
	display: flex;
	flex-direction: row;
}

.icon {
	border-radius: 100px;
	text-align: center;
}

.card .icon {
	width: 40px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
}

.icon.ic-green {
	color: #70d188;
	background-color: #f0faf3;
}

.icon.ic-orange {
	color: #f8a44f;
	background-color: #fef6ed;
}

.icon.ic-purple {
	color: #a683eb;
	background-color: #f6f2fd;
}

.li-2 > div:last-child,
.li-3 > div:last-child {
	margin-left: 15px;
	flex-grow: 1;
}

.li-2 div span,
.li-3 div span {
	color: #8b98a8;
	font-size: 13px;
	margin-bottom: 2px;
	display: block;
}

.dashboard .col33 .card-body {
	height: 250px;
	padding-bottom: 10px;
}

.li-3 {
	line-height: 35px;
}

	.li-3 > i {
		margin-right: 10px;
	}

	.li-3 .right {
		width: 160px;
		text-align: right;
	}

		.li-3 .right div {
			width: 120px;
			text-align: center;
			border-radius: 3px;
			background-color: #f3f4f8;
			margin-left: 10px;
			display: inline-block;
		}

.pagerSavedHeightSpacer.remove-me {
	display: none;
}

.tablesorter-default tfoot .tablesorter-headerAsc, .tablesorter-default tfoot .tablesorter-headerDesc, .tablesorter-default tfoot .tablesorter-headerSortDown, .tablesorter-default tfoot .tablesorter-headerSortUp {
	border-top: none;
}

.issue-width {
	margin: 3px 0 12px;
}

#table-mixmaterial .btnSave, #table-mixmaterial .btnExitEdit,
#table-mixmaterial .editing .btnEdit, #table-mixmaterial .editing .btnDelete {
	display: none;
}

#table-mixmaterial .editing .btnSave, #table-mixmaterial .editing .btnExitEdit {
	display: inline-block;
}
/*
#table-mixmaterial th:nth-child(3),
#table-mixmaterial th:nth-child(4),
#table-mixmaterial th:nth-child(5),
#table-mixmaterial th:nth-child(7),
#table-mixmaterial td:nth-child(3),
#table-mixmaterial td:nth-child(4),
#table-mixmaterial td:nth-child(5),
#table-mixmaterial td:nth-child(6) {
	text-align: right;
}
*/
#table-mixmaterial .txtQuantity {
	margin: -8px 0;
	text-align: right;
	width: 100%;
}

#table-mixmaterial tbody td:last-child i {
	cursor: pointer;
}

	#table-mixmaterial tbody td:last-child i:hover {
		opacity: 0.6;
		padding: 0;
	}

#table-mixmaterial .btnEdit,
#table-mixmaterial .btnDelete {
	margin-left: 10px;
}

.placeholder {
	line-height: 35px;
	width: 0;
	position: absolute;
	left: 10px;
	margin-left: 10px;
	color: #8b98a8;
}

.placeholder-2 {
	left: 50%;
}

.placeholder-stay::-webkit-input-placeholder,
.placeholder-stay::-moz-placeholder,
.placeholder-stay:-ms-input-placeholder,
.placeholder-stay:-moz-placeholder {
	color: #656776;
}

.txtCost {
	text-indent: 15px;
}

.txtMinSlump, .txtMaxSlump, .txtMinAir, .txtMaxAir {
	text-indent: 30px;
}

#material-popup .fc-wp label {
	min-width: 140px !important
}

	#material-popup .fc-wp label.col33 {
		min-width: 0 !important;
		width: 32%;
	}

#settings-popup table .mInput {
	width: 100%;
}

#settings-popup div > .mInput {
	max-width: 100px;
	margin-left: 20px;
	margin-right: 5px;
}

#settings-popup table th,
#settings-popup table td {
	white-space: nowrap;
}

#settings-popup table .no-pad {
	padding-top: 0;
	padding-bottom: 0;
	width: 1px;
}

#settings-popup .unit-type, #settings-popup .trim-water-policy,
#settings-popup .min-vol, #settings-popup .refresh-rate {
	width: 50%;
	float: left;
}

#settings-popup .confirmBox > div {
	margin-top: 15px;
}

#settings-popup label {
	margin: 8px;
	line-height: 18px;
}

#setting-daterange {
	max-width: 200px !important;
	margin-top: 10px;
	margin-left: 5px !important;
}

.drp-wrapper .date-picker-wrapper {
	transform: translateY(-100%);
	margin-top: -33px;
}

.table-cylinder .tdCube,
.table-cylinder .tdWeight,
.table-cylinder .tdRemarks,
.table-cylinder.table-advance .tdNo {
	display: none;
}

.table-cylinder.show-dimension.table-advance .tdCube,
.table-cylinder.table-advance .tdWeight,
.table-cylinder.show-remarks.table-advance .tdRemarks {
	display: table-cell;
}

.control--hasunit {
	position: relative;
}

	.control--hasunit input {
		padding-right: 25px !important;
	}

.unit--inner {
	right: 5px;
	text-align: right;
	width: 45px;
	color: #8b98a8;
	line-height: 30px;
	display: inline-block;
	position: absolute;
	pointer-events: none;
}

.tdWeight .unit--inner {
	line-height: 42px;
}

.chem-unit select {
	text-transform: uppercase;
}

.btnEPD {
	background-color: #008A3E;
	color: #fff;
	padding: 8px 10px;
	margin-top: 1px;
}

	.btnEPD:hover {
		background-color: #059746;
	}

	.btnEPD:disabled,
	.btnEPD:disabled:hover {
		background-color: #006103 !important;
		color: #a2a2a2 !important;
	}

	.btnEPD img {
		height: 16px;
		margin-left: 10px;
		vertical-align: sub;
	}

	.btnEPD:disabled img {
		opacity: 0.5;
	}

@media(min-width:1300px) {
	.show-tbl {
		display: none;
	}

	.mix-material .fc-group {
		display: flex;
		flex-direction: row;
	}

	.fc-group .fc-wp {
		padding: 0;
		padding-left: 10px;
	}

		.fc-group .fc-wp:first-child {
			padding-left: 15px;
			margin-right: 35px;
		}

			.fc-group .fc-wp:first-child .unit {
				right: -45px;
				width: 40px;
			}

		.fc-group .fc-wp:last-child {
			padding-right: 15px;
		}

		.fc-group .fc-wp:first-child input {
			min-width: 80px;
		}

	.mix-material .mixLabel {
		width: 75px !important;
		min-width: 75px !important;
		white-space: nowrap;
	}
}

@media(min-width:1600px) {
	.mix-info .col50 {
		width: 33.33%;
	}
}

@media(min-width:1920px) {
	.mix-info .col50 {
		width: 25%;
	}
}

@media (max-width: 1024px) {
	.box-header, .attention, .box-content2 .mSelect-small {
		margin-left: 10px;
	}

	.box-footer.text-right button {
		margin-right: 10px;
	}

	.welcome {
		margin-top: 10px;
		margin-bottom: 0;
	}

	.outerWrap .main .loading {
		margin-bottom: 0;
	}

	.main {
		margin-bottom: 50px;
		padding-bottom: 0;
	}

	.mResolveCommon .tab-container ul {
		margin-left: -15px;
		margin-right: -15px;
		width: auto;
	}

	.wrapper6 {
		margin: 10px;
	}
}

@media (max-width: 920px) {
	.col-wp .col50 {
		width: 100%;
	}

	#table-mixmaterial td {
		word-break: break-word;
	}

	#table-mixmaterial .txtQuantity {
		width: 60px;
	}

	.ticket-box-wrap {
		flex-wrap: wrap;
	}

		.ticket-box-wrap #txtTicket {
			width: 100%;
		}

	.mFieldPage #btnCreateBatch,
	.mFieldPage #btnScanTicket {
		margin-top: 0 !important;
		height: 36px;
		line-height: 28px;
	}

	.mFieldPage #btnScanTicket {
		flex-grow: 1;
	}
}

@media (max-width: 600px) {
	.welcome {
		font-size: 18px;
	}

	.learnMorePage .wrapperFull2 {
		overflow: hidden;
	}

	.learnMorePage .imgFull {
		width: 150%;
		margin-left: -25%;
	}

	.table-mix {
		display: none;
	}

	.table-mix-mobile {
		display: block;
	}

	.mMixChildPage .table-mix-mobile table tr th {
		text-align: left;
		background-color: #7d91a9;
		color: #fff;
	}

	.col33, .mResolveCommon .col25 {
		width: 48%;
		margin-right: 2%;
	}

		.col33:nth-child(2n), .mResolveCommon .col25:nth-child(2n) {
			width: 48%;
			margin-right: 0;
			margin-left: 2%;
		}

		.col33.floatright {
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}

	.quote-filter {
		width: 100%;
		float: none;
	}

	.mResolvePage .tbSearch {
		width: 294px;
	}

	#ar-body table tr td {
		display: block;
		width: auto;
		margin-bottom: 15px;
		padding-left: 0;
		padding-right: 0;
	}

	#ar-body .box-chart {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	#ar-body table tr td:last-child {
		margin-bottom: 0;
	}

	.mSubmitPage .col33 {
		width: 100%;
	}
}

@media (max-width: 600px) and (orientation : landscape) {
	.welcome {
		margin: 20px 0 0;
		font-size: 18px;
	}
}

@media (max-width: 768px) {
	.menu .item {
		width: 50%;
		padding-bottom: 50%;
	}

	.mainPage .intro {
		padding: 50px 30px;
		text-align: center;
		display: block;
	}

		.mainPage .intro div h1 {
			font-size: 30px;
		}

		.mainPage .intro div a {
			font-size: 20px;
			line-height: 18px;
		}

		.mainPage .intro svg {
			margin-left: 0;
			margin-top: 40px;
			width: 100%;
			height: auto;
		}

	.data-table {
		margin: 0 -20px;
	}

	.cylinder-table {
		margin: 0;
	}

	.data-table table tr th:first-child,
	.data-table table tr td:first-child {
		border-left: none;
	}

	.data-table table tr th:last-child,
	.data-table table tr td:last-child {
		border-right: none;
	}

	#frame1 .frameInner > img {
		width: 35%;
		margin: 40px 3% 0 7%;
	}

	#frame1 .frameInner .frameText {
		width: 50%;
		margin-top: 12%;
	}

	#frame2 .frameInner .left {
		width: 45%;
		margin: 0 5%;
	}

	#frame2 .frameInner .mField .left {
		width: 58%;
		margin: 0 6%;
		margin-top: 50px;
	}

	#frame2 .frameInner .mField .right {
		width: 30%;
	}

	#frame2 .frameInner .mField img {
		width: 90%;
		margin-left: 0;
	}

	#frame2 .frameInner .mPlant,
	#frame2 .frameInner .mGauge, #frame2 .frameInner .mField .left {
		margin-top: 10%;
	}

		#frame2 .frameInner .mPlant .right,
		#frame2 .frameInner .mGauge .right {
			width: 45%;
		}

		#frame2 .frameInner .mPlant img {
			margin-left: -26%;
			margin-top: -22%;
		}

		#frame2 .frameInner .mGauge img {
			width: 90%;
			margin-top: 20px;
		}

	#frame3 .frameInner .frameInnerInner {
		margin-top: 30px;
		margin-left: 30px;
		max-width: 70%;
	}

	#frame3 .frameInner .title {
		font-size: 25px;
	}

	#frame3 .frameInner .text img {
		width: 15%;
		margin: 0 5% 0 0;
	}

	#frame3 .frameInner .text > span {
		width: 80%;
		font-size: 14px;
	}

	.filter-box .floatright {
		float: none;
		display: block;
	}
}

@media (max-width: 680px) {
	#frame1 .frameInner .frameText {
		margin-top: 10%;
		font-size: 25px;
		line-height: 32px;
	}

	#frame2 .frameInner .mPlant,
	#frame2 .frameInner .mGauge, #frame2 .frameInner .mField .left {
		margin-top: 2%;
	}

		#frame2 .frameInner .mGauge img {
			margin-top: 45px;
		}

		#frame2 .frameInner .mPlant img {
			margin-left: -20%;
			margin-top: -10%;
		}


	#frame3 .frameInner .frameInnerInner {
		margin-top: 20px;
		margin-left: 20px;
	}

	#frame3 .frameInner .title {
		margin-bottom: 10px;
	}

	.mResolveCommon #box-info .box50, .mResolveCommon #box-issue-edit .box50 {
		width: 100%;
		padding-right: 0;
	}

	.mResolveCommon #txtComplaintNature,
	.mResolveCommon #txtResolution,
	.mResolveCommon #txtCorrective,
	.mResolveCommon #txtApprovals {
		height: 110px;
	}

	.box-info-sub .ce-control {
		display: block;
		margin-bottom: 10px;
	}

	#box-ce-title .box50 {
		width: 100%;
		float: none;
	}

	#box-ce-title #sid-title-des {
		display: none;
	}

	#activity-tab .box50 {
		width: 100%;
		float: none;
		padding-right: 0;
	}

	.box-search-mfield {
		display: block;
		gap: 1rem;
		text-align: left;
	}

	.mFieldPage .col50 {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.popup .content {
		padding: 30px;
		/*max-width: 240px;*/
	}

	.col50Mobile {
		width: 100%;
	}

	.col100Mobile {
		width: 100% !important;
		margin-right: 2% !important;
		margin-left: 0 !important;
	}

	.headerInner {
		padding: 0 10px;
	}

	.mInnerPage .welcome {
		margin: 10px 0 0;
		text-align: left;
		font-size: 22px;
	}

	.main .welcome {
		margin: 0;
	}

	.mInnerPage .welcome img {
		width: 30px;
		margin: 0 10px;
	}

	.main .welcome img {
		width: 28px;
		margin: 0 10px;
	}

	.mInnerPage.outerWrap .loading {
		margin: 5px 0;
	}

	.ctrlWraper {
		margin-bottom: 15px;
	}

		.ctrlWraper .label {
			margin-bottom: 5px;
		}

	.embedPage .learnmore-form .ctrlWraper .control {
		height: auto;
		min-height: 30px;
	}

	.embedPage textarea {
		margin-bottom: 5px;
	}

	.jTime {
		height: auto !important;
	}

		.jTime > span img {
			vertical-align: middle;
		}

	.mInnerPage .jTicketHeader .ctrlWraper .control {
		width: 95%;
		overflow: hidden;
	}

	.btnGroup {
		margin-top: 10px;
	}

	.btn {
		font-size: 16px;
		padding: 8px 0;
		margin-top: 8px;
	}

	.embedPage .ctrlWraper .control input, .mInnerPage .ctrlWraper .control input, .mInput,
	.ctrlWraper .control select, .mSelect {
		height: 36px;
	}

	.mResolveCommon input, .mResolveCommon select {
		height: inherit;
	}

	.data-table {
		margin: 0 -10px;
	}

	#frame1 .frameInner {
		text-align: center;
	}

		#frame1 .frameInner > img {
			width: 50%;
			margin: 30px 0 0;
			float: none;
		}

		#frame1 .frameInner .frameText {
			width: 80%;
			margin: 0 auto 20px;
			float: none;
			font-size: 20px;
		}

			#frame1 .frameInner .frameText span {
				text-align: left;
			}

	#frame2 .owl-item {
		margin-top: 20px;
	}

	#frame2 .frameInner .mPlant .right, #frame2 .frameInner .mGauge .right,
	#frame2 .frameInner .mPlant .left, #frame2 .frameInner .mGauge .left {
		float: none;
		margin: 0 5% 20px;
		width: 90% !important;
	}

	.homePage #frame2 img {
		width: 100% !important;
		margin: 0 !important;
	}

	#frame2 .frameInner .mField .right {
		width: 45%;
	}

	#frame2 .frameInner .mField .right {
		width: 45%;
	}

	#frame2 .frameInner .mField .left {
		width: 43%;
	}

	#frame3 .frame3bg {
		display: none;
	}

	#frame3 .frame3bg_mobile {
		display: block;
	}


	#frame3 .frameInner .frameInnerInner {
		width: 90%;
		max-width: 90%;
		margin: 40px 5%;
	}

	#frame3 .frameInner .title {
		margin-bottom: 20px;
	}

	#frame3 .frameInner .text img {
		width: 22%;
		margin: 0 5% 0 3%;
	}

	#frame3 .frameInner .text > span {
		width: 70%;
	}

	.jMixHeader .col33MobileGroup .col50,
	.jMixHeader .col33MobileGroup .col25 {
		width: 33%;
	}

	.mMixChildPage .data-table th,
	.mMixChildPage .data-table td {
		padding: 5px;
	}

	.secHeader {
		margin: 10px 0;
	}

	.mMixChildPage .ctrlWraper .label {
		margin-bottom: 2px;
	}

	.mMixChildPage .copyright {
		padding: 5px 0;
	}

	.posBottom {
		padding: 0 0 0 20px;
	}

	.learnMorePage .imgFull {
		width: 200%;
		margin-left: -50%;
	}

	.learnmore-form .frameInner {
		margin: 20px auto;
	}

	.buttonBetweenSection {
		margin: 10px 0 20px;
	}

	#table-chemical td.tdQuantity {
		width: 100px;
	}

	#table-chemical td.tdUnit {
		width: 60px;
	}

	.map-keys {
		max-width: 140px;
	}

	.layout-2 .main > table > tbody > tr > td {
		display: block;
		width: 100%;
		border: none;
	}

	.layout-2 .main > table td.menu-pane {
		border-bottom: 2px solid #ff8c19;
	}

	.menu-pane .menu-top, .menu-pane .menu-bottom {
		width: 100%;
		margin-left: 0 !important;
	}

	.menu-collapsed {
		display: none !important;
	}

	.close-menu {
		visibility: hidden;
	}

	.layout-2 .mSelect, .layout-2 .mInput {
		height: 30px;
	}

	.layout-2 .main > table td.right-pane {
		padding-top: 0;
	}

	.menu-popout {
		position: static;
		width: 100%;
	}

		.menu-popout > div {
			padding: 20px 0;
		}

	#tbFreight2 {
		width: 100%;
		margin: 15px 0 0;
	}

	.filter-pane #ddlMaterialType {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}

	.filter-pane #ddlMaterialName {
		margin-right: 4%;
	}

	.filter-pane #ddlMaterialName, .filter-pane #ddlMaterial {
		width: 48%;
	}

	.prod-code {
		float: none;
		display: block;
	}

	.mSubmitCE #confirm-popup label {
		width: 120px;
	}

	.date-picker-wrapper {
		width: 202px;
	}

	.mFieldPage #btnCreateBatch {
		margin-top: 8px;
	}
}

@media (max-width: 400px) {
	#frame1 .frameInner > img {
		margin: 15px 0 -25px;
	}

	.mInnerPage .welcome {
		font-size: 18px;
		margin-top: 5px;
	}

	.embedPage .ctrlWraper.col50 {
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.col50 {
		width: 100%;
	}

		.col50.col50Static {
			width: 50%;
		}

	.col25 {
		width: 50%;
	}

		.col25.col25Static {
			width: 25%;
		}

	#frame1 .frameInner > img {
		width: 72%;
	}

	#frame3 .frameInner .frameInnerInner {
		width: 94%;
		max-width: 94%;
		margin: 20px 3%;
	}

	#frame3 .frameInner .title {
		margin-bottom: 10px;
	}

	#frame3 .frameInner .text img {
		width: 15%;
		margin: 0 5% 0 3%;
	}

	#frame3 .frameInner .text > span {
		width: 77%;
	}

	.mMixChildPage .data-table th {
		padding: 3px;
		font-size: 12px;
	}

	.mMixChildPage .data-table td {
		font-size: 11px;
		word-wrap: break-word;
	}

	.mMixChildPage .col50 {
		width: 50%;
	}

	.col33, .col33:nth-child(2n) {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.as-wp > div {
		float: none;
		width: 100%;
	}
}

@media (max-width: 320px) {
	.mInnerPage .welcome img {
		width: 24px;
	}

	.ctrlWraper {
		margin-bottom: 10px;
	}

	.btn {
		font-size: 14px;
	}

		.btn img {
			width: 20px;
			height: 21px;
			margin-right: 3px;
			vertical-align: text-bottom;
			margin-bottom: -1px;
		}

	.secHeader {
		margin: 8px 0;
	}

	.mMixChildPage .ctrlWraper {
		margin-bottom: 8px;
	}

	#table-chemical td.tdUnit {
		width: 40px;
	}
}

@media (max-width: 319px) {
	#frame1 .frameInner > img {
		margin: 15px 0 -15px;
		width: 50%;
	}

	#frame1 .frameInner .frameText {
		width: 90%;
		margin: 0 auto 20px;
		font-size: 18px;
		line-height: 26px;
	}

		#frame1 .frameInner .frameText span {
			margin-bottom: 15px;
		}
}
/************mBatch Graph************/
.graph-box {
	width: 50%;
	float: left;
}

	.graph-box, .graph-box select {
		font-family: 'HelveticaNeue-Medium', 'Helvetica', 'Arial', sans-serif;
	}

.graph-box-inner {
	margin: 10px;
	background-color: #fff;
	border: 1px solid;
	padding: 10px;
}

#cem-box .graph-box-inner {
	border-color: #c1c1c1;
}

#water-box .graph-box-inner {
	border-color: #8cbede;
}

#agg-box .graph-box-inner {
	border-color: #b4916e;
}

#chem-box .graph-box-inner {
	border-color: #969696;
}

.graph-mid canvas {
	width: 100%;
}

.graph-mid .messageBox {
	margin: 0;
	display: inline-block;
	width: 100%;
}

#graph-tab select, #projection-tab select, #gauge-tab select {
	width: 120px;
	height: 30px;
	padding: 5px;
	margin: 2px 0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #6666a0;
}

#projection-tab {
	overflow: initial;
	background: #f9f9f9;
}

	#projection-tab select {
		margin: -20px 10px 10px;
		width: 195px;
	}

#gauge-tab select {
	float: left;
}

.box-content table tfoot td {
	text-align: center;
}

#table-proj thead th {
	z-index: 1;
	background: #3F4492;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: 0;
}

.proj-fc-bar {
	background-color: #7e7ec4;
	margin-top: 1px;
}

#table-proj td {
	border-bottom: 1px solid #d1d1d1;
	padding: 2px 5px;
	vertical-align: middle;
}

#table-proj th:first-child,
#table-proj th:last-child {
	text-align: left;
}

#table-proj td:last-child {
	width: 200px;
	overflow: hidden;
}

	#table-proj td:last-child div {
		color: #fff;
		height: 18px;
		line-height: 18px;
		text-indent: 2px;
		text-align: left;
	}

#table-proj tfoot td {
	border-top: 1px solid #d1d1d1;
	padding: 6px;
}

#graph-tab .graph-box select.ddlMaterial {
	width: 140px;
	font-size: 14px;
	text-transform: uppercase;
}

#graph-tab .graph-box select.ddlTime {
	font-size: 14px;
	width: 120px;
	text-transform: uppercase;
}

#graph-tab #cem-box select.ddlMaterial {
	color: #606060;
}

#graph-tab #water-box select.ddlMaterial {
	color: #2991cd;
}

#graph-tab #agg-box select.ddlMaterial {
	color: #996633;
}

#graph-tab #chem-box select.ddlMaterial {
	color: #606060;
}

#graph-tab .messageBox {
	font-family: 'Arial', sans-serif;
}

.spanFor {
	line-height: 30px;
	font-size: 14px;
	margin: 0 3px;
}

.graph-sum {
	width: 100px;
	float: right;
	text-align: right;
	font-size: 14px;
}

	.graph-sum .gs-label {
		color: #606060;
		-moz-text-shadow: 0 0 1px #999;
		-webkit-text-shadow: 0 0 1px #999;
		-o-text-shadow: 0 0 1px #999;
		text-shadow: 0 0 1px #999;
	}

	.graph-sum .gs-val {
		color: #292929;
		-moz-text-shadow: 0 0 1px #999;
		-webkit-text-shadow: 0 0 1px #999;
		-o-text-shadow: 0 0 1px #999;
		text-shadow: 0 0 1px #999;
	}

.graph-legend {
	padding: 0 10px;
}

	.graph-legend .gs-label {
		color: #606060;
		font-size: 14px;
		font-weight: bold;
		margin-left: 10px;
	}

	.graph-legend img {
		vertical-align: middle;
		margin: 0 10px 0 5px;
		height: 28px;
	}

.graph-legend-inner {
	float: right;
	text-align: right;
	display: inline-block;
	width: auto;
	margin-top: 3px;
}

.graph-bot {
	text-align: center;
	font-size: 14px;
	-moz-text-shadow: 0 0 1px #555555;
	-webkit-text-shadow: 0 0 1px #555555;
	-o-text-shadow: 0 0 1px #555555;
	text-shadow: 0 0 1px #555555;
	height: 20px;
}

	.graph-bot .floatleft,
	.graph-bot .floatright {
		font-size: 10px;
	}

.headerTitle2, .headerTitle3 {
	display: none;
	font-size: 20px;
	font-weight: bold;
}

#chartjs-tooltip {
	-ms-opacity: 0;
	opacity: 0;
	position: absolute;
	background: rgba(0, 0, 0, .7);
	color: white;
	padding: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	pointer-events: none;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.mBatch .wrapper2 {
	visibility: hidden;
}

.mBatch .pageTitle {
	height: 44px;
	display: none;
}

	.mBatch .pageTitle select {
		width: 190px;
	}

#ddlPlantGraph, #cbPlantListTicket {
	width: 160px;
	margin: 7px 0;
	vertical-align: top;
}

.pageTitle .sbHolder {
	margin: 6px 0;
	display: inline-block;
	text-align: left;
}

.ticketDate {
	vertical-align: top;
	line-height: 32px !important;
	margin: 5px 0;
	display: inline-block;
	font-size: 16px;
}

.sbOptions a {
	line-height: 16px;
}

.sbHolder,
.sbOptions {
	background-color: #dfdfdf;
	border-color: #B2B2B2;
}

	.sbSelector:link, .sbSelector:visited, .sbSelector:hover,
	.sbOptions a:link, .sbOptions a:visited {
		color: #000;
	}

.headerInner label {
	margin-left: 15px;
}

.headerInner .logoutLink {
	display: none;
	cursor: pointer;
}

.headerInner label.loginLink {
	margin-left: 0;
}

.headerInner a:hover,
.headerInner .logoutLink:hover {
	text-decoration: underline;
}

.footable tfoot .footable-paging .label {
	float: left;
	font-size: inherit;
	font-weight: 400;
	line-height: 26px;
	color: #4a4d5f;
	background-color: transparent;
	margin: 0 !important;
	padding: 0 !important;
}

.footable tfoot .footable-paging .divider {
	display: none;
}

.footable .pagination {
	margin: 0;
}

table.footable > tbody > tr.footable-empty > td {
	font-size: 14px;
}

.select2-container .select2-selection--single {
	height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 34px;
}

.search-submittal .select2-container {
	flex-grow: 1;
}

.paging {
	line-height: 26px;
	text-align: left;
}

.paging-count {
	display: inline-block;
}

.paging-item {
	cursor: pointer;
	display: inline-block;
	color: #8b98a8;
	font-size: 18px;
	vertical-align: top;
	width: 26px;
	text-align: center;
}

	.paging-item:hover {
		color: #23527c;
	}

	.paging-item.current {
		width: 26px;
		height: 26px;
		font-size: 14px;
		text-align: center;
		background-color: #fff;
		border-radius: 3px;
		box-shadow: 0 0 5px #c6cfd9;
		box-sizing: border-box;
		color: #4697d5;
		margin: 0 8px;
	}

.footable-sortable {
	position: relative;
	padding-right: 30px;
	cursor: pointer;
}

#popup-db #btnConfirm {
	height: auto;
}

.promo {
	text-align: center;
	margin: 35px 0 10px;
	font-size: 15px;
	line-height: 1.5;
}

	.promo a {
		color: #f9b066;
		text-decoration: underline;
		cursor: pointer;
	}

		.promo a b {
			font-weight: 600;
		}

		.promo a:hover {
			color: #fff;
		}

@media (max-width: 679px) {
	.graph-legend-inner {
		float: none;
		text-align: center;
		width: 100%;
	}

		.graph-legend-inner .gs-label {
			display: block;
			text-align: left;
			margin-left: 0;
		}

		.graph-legend-inner img {
			display: block;
			margin: 10px auto;
		}

			.graph-legend-inner img:last-child {
				padding-right: 41px;
			}

	.mResolveCommon .btn3, .mResolveCommon button {
		width: 100%;
		max-width: 240px;
		display: block;
		margin: 0 auto 10px;
		float: none;
		box-sizing: border-box;
	}
}

@media (max-width: 480px) {
	.menu .item {
		width: 100%;
		padding-bottom: 100%;
	}

	.graph-box {
		width: 100%;
	}

	#graph-tab .mobileShow {
		margin-top: 10px;
		text-align: center;
	}

	.graph-legend-inner .gs-label {
		margin-left: 5px;
	}

	#graph-tab .graph-box select.ddlMaterial {
		width: 110px;
		font-size: 12px;
		padding: 5px 0;
	}

	#graph-tab .graph-box select.ddlTime {
		width: 95px;
		font-size: 12px;
		padding: 5px 0;
	}

	.spanFor {
		margin: 0;
	}

	.graph-box-inner {
		padding: 5px;
	}

	.graph-legend-inner .gs-label {
		margin-left: 10px;
	}

	.mBatch .pageTitle {
		text-align: right;
		padding-right: 63px;
	}

	.pageTitle .mSelect {
		height: 30px;
	}
}

@media (max-width: 479px) {
	.ticketDate {
		display: none;
	}
}
/************end mBatch Graph************/