html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	/*font-size: 2.5vmin;*/
	/*line-height: 1.42857143;*/
	color: #333333;
	/*overflow: hidden;*/
}

.breadcrumb > li + li:before {
  content: "\00bb\00a0";
}

.baseButton {
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: 0.3s;
}

.popup {
	background-color: #FFFFFF;
	position: fixed;
	top: 8%;
	left: 8%;
	min-width: 300px;
	min-height: 120px;
	box-shadow: 4px 4px 40px #000000;
	border-radius: 5px;
	animation: fading 0.3s;
}
@keyframes fading {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}
.popupHeader {
	background-color: #346488;
	width: 100%;
	height: 40px;
	border-radius: 5px 5px 0px 0px;
}
.popupTitle {
	font-size: 20px;
	line-height: 40px;
	color: #FFFFFF;
	width: 85%;
	padding-left: 2%;
}
.popupMessage {
	width: 100%;
	padding: 2%;
	text-align:left;
	word-wrap: break-word;
	overflow-y: auto;
}
.popupMask {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.screenHeader {
	background-color: #346488;
	box-shadow: 2px 2px 3px #CCCCCC;
	border-radius: 5px;
	margin-top: 1em;
	margin-bottom: 1em;
}

.screenTitle {
	font-size: 30px;
	font-weight: bold;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.screenDescription {
	font-size: 18px;
	padding: 8px 10px;
	background-color: #b6cee3;
	color: #173D58;
	margin-top: 0.2em;
	margin-bottom: 1em;
}

.screenFooter {
	background-color: #2B5A83;
	margin-top: 1em;
	margin-bottom: 1em;
}

/*
Extends baseButton
*/
.paneActionButton, .popupButton {
	font-size: 14px;
	color: #FFFFFF;
	line-height: 20px;
	padding: 4px 12px;
	border: 1px solid #CCCCCC;
	background-color: #3974A8;
}
.paneActionButton:hover, .popupButton:hover {
	background-color: #2B5A83;
}
.paneActionButton.disabled, .popupButton.disabled {
	background-color: #3974A8;
	opacity: .65;
	cursor: not-allowed;
}

.baseInputField {
	float: left;
	padding: 0.6% 1%;
}

.inputFieldBaseLabel {
	float: left;
	font-weight: bold;
	text-align: left;
	padding-right: 6px;
	margin-bottom: 0px;
}

.inputFieldBaseText {
	float: left;
	text-align:left;
}
.inputFieldBaseText > input, .inputFieldBaseText > textarea, .inputFieldBaseText > select {
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	min-height: 1.7rem;
}

.datePickFieldBaseText {
	float: left;
	font-size: 2.5vmin;
	text-align:left;
	border: 1px solid #999999;
	border-radius: 4px;
	background: url("../asset/image/calendar.gif") no-repeat center right;
}

.baseCheckbox {
	display: inline;
	vertical-align: middle;
	margin-right: 2vmin;
}

.checkboxBaseLabel {
	display: inline;
}

.radioOption {
	display: inline-block;
}
.radioOption > label {
	margin-bottom: auto;
	font-weight: normal;
	margin-right: 10px;
}
.radioOption > input {
	vertical-align: middle;
	margin-top: auto;
	margin-right: 6px;
}

.NVPairDisplayBaseLabel {
	float: left;
	font-weight: bold;
	text-align: left;
}
.NVPairDisplayBaseValue {
	float: left;
	text-align: left;
	padding-left: 1%;
}

/*
Can be used with baseInputField, inputFieldBaseLabel, inputFieldBaseText, NVPairDisplayBaseLabel, NVPairDisplayBaseValue
*/
.oneFifthWidth {
	width: 20%;
}
.oneFourthWidth {
	width: 25%;
}
.oneThirdWidth {
	width: 33.3%;
}
.halfWidth {
	width: 50%;
}
.twoThirdsWidth {
	width: 66.66%;
}
.threeFourthsWidth {
	width: 75%;
}
.fourFifthsWidth {
	width: 80%;
}
.fullWidth {
	width: 100%;
}

.orderSummaryNVPairDisplay {
	padding: 8px;
}

/*
Extends NVPairDisplayBaseLabel, NVPairDisplayBaseValue
*/
.orderSummaryNVPairDisplayLabel {
	width: 15%;
}
.orderSummaryNVPairDisplayValue {
	width: 35%;
}

.printingChoiceImage {
	width: 140px;
	height: 100px;
	margin: 0px 5px;
	cursor: pointer;
}

.hrDivider {
	width: 100%;
	border-top: 1px solid #a6c9e2;
}

.productListTable {
	font-size: 14px;
}
.productListTable > thead > tr > th {
	border-bottom: 1px solid #a6c9e2;
}
.productListTable > tbody > tr > td {
	vertical-align: middle;
	border: 0px none;
}
.productListTable > tbody > tr.endLine {
	border-top: 1px solid #a6c9e2;
}
.productListTable > tbody > tr.summary {
	font-weight: bold;
}

.dateInputLabel {
	font-size: 18px;
}

.qtyInputNumber {
	font-size: 14px;
	width: 60px;
    padding: 4px 6px;
}

.screenNavBreadcrumb {
  margin-bottom: 0px;
}
.VECOMPOS_BreadcrumbActive {
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	vertical-align:middle;
	cursor: pointer;
}
.VECOMPOS_BreadcrumbInActive {
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	vertical-align:middle;
}
.VECOMPOS_BreadcrumbCurrent {
	font-weight: bold;
}