/************************************************************************************************************************************************************
	Bootstrap : Override
************************************************************************************************************************************************************/

form,
.container {
	/* Fix for dark mode */
	background-color: inherit;
}

a > i.fas + span,
button > i.fas + span,
.caption-after-icon {
	/* Caption after icon */
	padding-left: .2rem;
}

@media (max-width: 320px) {
	/* width of iPhone 5 */
	.navbar-brand {
		margin-right: 0;
	}
}
/* END: Override Bootstrap */


/************************************************************************************************************************************************************
	Bootstrap : Card
************************************************************************************************************************************************************/
.card .card-img-bottom {
    padding: 0rem 0.5rem 0.5rem 0.5rem;
}
.card .card-img-bottom.sm-auto,
.card .card-img-bottom.md-auto,
.card .card-img-bottom.lg-auto {
    object-fit: cover;
    object-position: top;
}

.card .card-img-bottom.sm-contain,
.card .card-img-bottom.md-contain,
.card .card-img-bottom.lg-contain {
	object-fit: contain;
	object-position: top;
}

.card .card-img-bottom.sm-auto,
.card .card-img-bottom.sm-contain {
	max-height: 20em;
}

.card .card-img-bottom.md-auto,
.card .card-img-bottom.md-contain {
	max-height: 30em;
}

.card .card-img-bottom.lg-auto,
.card .card-img-bottom.lg-contain {
	max-height: 40em;
}

/************************************************************************************************************************************************************
	Common
************************************************************************************************************************************************************/
:root {
	--vnm-after-navbar-main-top-pos: 3.53rem;
	--vnm-after-navbar-fixed-top-pos: 7.035rem;
	--vnm-togglesidebar-sidebar-maxtiny-width: 18rem;
	--vnm-togglesidebar-sidebar-maxtiny-margin-left: -18rem;
	--vnm-togglesidebar-sidebar-maxsmall-width: 21rem;
	--vnm-togglesidebar-sidebar-maxsmall-margin-left: -21rem;
	--vnm-togglesidebar-sidebar-r-width: 16rem;
	--vnm-togglesidebar-sidebar-r-margin-left: -16rem;
	--vnm-togglesidebar-sidebar-m-width: 20rem;
	--vnm-togglesidebar-sidebar-m-margin-left: -20rem;
	--vnm-togglesidebar-sidebar-l-width: 23rem;
	--vnm-togglesidebar-sidebar-l-margin-left: -23rem;
}
/* END: Common */


/************************************************************************************************************************************************************
	Common Layout
************************************************************************************************************************************************************/

.full-height-scrollbar {
	background-color: inherit;
	position: absolute;
	top: var(--vnm-after-navbar-main-top-pos);
	right: 0;
	left: 0;
	bottom: 0;
	overflow: scroll;
}

	.full-height-scrollbar.has-fixed-top-navbar {
		top: var(--vnm-after-navbar-fixed-top-pos);
	}

/* END: Common Layout */


/************************************************************************************************************************************************************
	Common Responsive
************************************************************************************************************************************************************/

@media (max-width: 576px) {
	.resp-hide-width-lte-sm {
		display: none;
	}

	.resp-hide-width-lte-sm,
	.resp-hide-width-lte-md,
	.resp-hide-width-lte-lg,
	.resp-hide-width-lte-xl {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 820px) {
	.resp-hide-width-gte-sm {
		display: none;
	}

	.resp-hide-width-lte-md,
	.resp-hide-width-lte-lg,
	.resp-hide-width-lte-xl {
		display: none;
	}
}

@media (min-width: 820px) and (max-width: 992px) {
	.resp-hide-width-gte-sm,
	.resp-hide-width-gte-md {
		display: none;
	}

	.resp-hide-width-lte-lg,
	.resp-hide-width-lte-xl {
		display: none;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.resp-hide-width-gte-sm,
	.resp-hide-width-gte-md,
	.resp-hide-width-gte-lg {
		display: none;
	}

	.resp-hide-width-lte-xl {
		display: none;
	}
}

@media (min-width: 1200px) {
	.resp-hide-width-gte-sm,
	.resp-hide-width-gte-md,
	.resp-hide-width-gte-lg,
	.resp-hide-width-gte-xl {
		display: none;
	}
}

/* END: Common Responsive */

/************************************************************************************************************************************************************
	Toggle Sidebar : Common
************************************************************************************************************************************************************/

body.toggle-sidebar-html-body {
	overflow-x: hidden;
}

/************************************************************************************************************************************************************
	Toggle Sidebar : Scroll
************************************************************************************************************************************************************/

.toggle-sidebar-scroll {
	background-color: inherit;
}

	.toggle-sidebar-scroll .sidebar-bar-area {
		margin-left: var(--vnm-togglesidebar-sidebar-r-margin-left);
		top: var(--vnm-after-navbar-main-top-pos);
		width: var(--vnm-togglesidebar-sidebar-r-width);
		position: absolute;
		overflow-y: auto;
	}

		.toggle-sidebar-scroll .sidebar-bar-area.has-fixed-top-navbar {
			top: var(--vnm-after-navbar-fixed-top-pos);
		}

		.toggle-sidebar-scroll .sidebar-bar-area .sidebar-bar-list {
		}

		.toggle-sidebar-scroll .sidebar-bar-area .navbar {
			top: var(--vnm-after-navbar-main-top-pos);
			z-index: 1020;
			left: 0;
			width: var(--vnm-togglesidebar-sidebar-r-width);
		}

	.toggle-sidebar-scroll.md-width-sidebar .sidebar-bar-area {
		margin-left: var(--vnm-togglesidebar-sidebar-m-margin-left);
	}

		.toggle-sidebar-scroll.md-width-sidebar .sidebar-bar-area,
		.toggle-sidebar-scroll.md-width-sidebar .sidebar-bar-area .navbar {
			width: var(--vnm-togglesidebar-sidebar-m-width);
		}

	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area {
		margin-left: var(--vnm-togglesidebar-sidebar-l-margin-left);
	}

		.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area,
		.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area .navbar {
			width: var(--vnm-togglesidebar-sidebar-l-width);
		}

	.toggle-sidebar-scroll > .sidebar-content {
		/*min-width: 100vw;*/
		background-color: inherit;
		position: absolute;
		top: var(--vnm-after-navbar-main-top-pos);
		right: 0;
		overflow-y: auto;
	}

		.toggle-sidebar-scroll > .sidebar-content.has-fixed-top-navbar {
			top: var(--vnm-after-navbar-fixed-top-pos);
		}

		.toggle-sidebar-scroll > .sidebar-content .navbar {
			top: var(--vnm-after-navbar-main-top-pos);
			z-index: 1020;
			left: 0;
		}

	.toggle-sidebar-scroll .sidebar-bar-area,
	.toggle-sidebar-scroll > .sidebar-content {
		bottom: 0;
		left: 0;
	}

	.toggle-sidebar-scroll.toggled .sidebar-bar-area {
		margin-left: 0;
	}

	.toggle-sidebar-scroll.toggled > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled > .sidebar-content {
		left: var(--vnm-togglesidebar-sidebar-r-width);
		right: var(--vnm-togglesidebar-sidebar-r-margin-left);
	}

	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content {
		left: var(--vnm-togglesidebar-sidebar-m-width);
		right: var(--vnm-togglesidebar-sidebar-m-margin-left);
	}

	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content {
		/* Bast for iPhone 6 plus */
		left: var(--vnm-togglesidebar-sidebar-l-width);
		right: var(--vnm-togglesidebar-sidebar-l-margin-left);
	}

@media (max-width: 820px) {
	/* When small screen */

	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content {
		left: var(--vnm-togglesidebar-sidebar-maxsmall-width);
		right: var(--vnm-togglesidebar-sidebar-maxsmall-margin-left);
	}

	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area .navbar {
		width: var(--vnm-togglesidebar-sidebar-maxsmall-width);
	}
}

@media (max-width: 320px) {
	/* width of iPhone 5 */

	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content {
		left: var(--vnm-togglesidebar-sidebar-maxtiny-width);
		right: var(--vnm-togglesidebar-sidebar-maxtiny-margin-left);
	}

	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area .navbar,
	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area .navbar {
		width: var(--vnm-togglesidebar-sidebar-maxtiny-width);
	}
}

@media (min-width: 820px) {
	/* When large screen / iPhone X:landscape */

	.toggle-sidebar-scroll .sidebar-bar-area,
	.toggle-sidebar-scroll.md-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.lg-width-sidebar .sidebar-bar-area {
		margin-left: 0;
	}

	.toggle-sidebar-scroll > .sidebar-content,
	.toggle-sidebar-scroll > .sidebar-content .navbar {
		left: var(--vnm-togglesidebar-sidebar-r-width);
	}

	.toggle-sidebar-scroll.md-width-sidebar > .sidebar-content,
	.toggle-sidebar-scroll.md-width-sidebar > .sidebar-content .navbar {
		left: var(--vnm-togglesidebar-sidebar-m-width);
	}

	.toggle-sidebar-scroll.lg-width-sidebar > .sidebar-content,
	.toggle-sidebar-scroll.lg-width-sidebar > .sidebar-content .navbar {
		left: var(--vnm-togglesidebar-sidebar-l-width);
	}

	.toggle-sidebar-scroll.toggled .sidebar-bar-area {
		margin-left: var(--vnm-togglesidebar-sidebar-r-margin-left);
	}

	.toggle-sidebar-scroll.toggled.md-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.toggled.md-width-sidebar .sidebar-bar-area .navbar {
		margin-left: var(--vnm-togglesidebar-sidebar-m-margin-left);
	}

	.toggle-sidebar-scroll.toggled.lg-width-sidebar .sidebar-bar-area,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar .sidebar-bar-area .navbar {
		margin-left: var(--vnm-togglesidebar-sidebar-l-margin-left);
	}

	.toggle-sidebar-scroll.toggled > .sidebar-content,
	.toggle-sidebar-scroll.toggled > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content,
	.toggle-sidebar-scroll.toggled.md-width-sidebar > .sidebar-content .navbar,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content,
	.toggle-sidebar-scroll.toggled.lg-width-sidebar > .sidebar-content .navbar {
		left: 0;
		right: 0;
	}
}

@media (min-width: 34em) {
	.sidebar-content .card-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media (min-width: 49em) {
	.sidebar-content .card-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
/* END: Toggle Sidebar Scroll */


/************************************************************************************************************************************************************
	###  Font & Text  ###
************************************************************************************************************************************************************/

@font-face {
	font-family: "Couier MonoThai";
	src: url("courmon.ttf");
}


/************************************************************************************************************************************************************
	###  Fix Value  ###
************************************************************************************************************************************************************/

div.dxlbd {
	width: 100% !important;
}

.dxeEditAreaSys {
	height: auto !important;
}

/*span.autogen,
table.autogen.dxeTextBoxSys,
.autogen input.dxeEditAreaSys,
.autogen input.dxeMemoEditAreaSys {
	background-color: #CCE3FF;
}*/

span.autogen {
	padding: .2em .5em;
}

	span.autogen:empty {
		padding: .2em 4em;
	}

		span.autogen:empty::before {
			content: '\00a0'; /* space charactor */
		}

table.disabled.dxeTextBoxSys,
table.disabled input.dxeEditAreaSys,
table.disabled input.dxeMemoEditAreaSys,
table.readonly.dxeTextBoxSys,
table.readonly input.dxeEditAreaSys,
table.readonly input.dxeMemoEditAreaSys {
	background-color: whitesmoke !important;
}

.space_s {
	height: .2em;
}

.space_m {
	height: .4em;
}

.fieldRequire,
.fieldRequire > a,
table.fieldRequire td.dxichTextCellSys label {
    color: Red !important;
}

.fieldRequire_status,
table.fieldRequire_status td.dxichTextCellSys label {
    color: darkorange;
}

.fieldSystem {
	color: Navy;
}

.indentLeft {
	padding-left: 1em;
}

.indentCenter {
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

.indentRight {
	padding-right: 1em !important;
	text-align: right;
}


/************************************************************************************************************************************************************
	###  Message bars  ###
************************************************************************************************************************************************************/

div.bar-navigator,
div.bar-search-auto,
div.bar-search-manual,
div.bar-toolbar,
div.bar-toolbar-item {
	position: relative;
	padding: 0em .3em 0em .3em;
	border-style: solid;
	border-width: 2px;
	min-height: 2.8em;
}

div.bar-search-auto,
div.bar-search-manual,
div.bar-toolbar,
div.bar-toolbar-item {
	border-left-width: 2em;
}

div.bar-search-auto,
div.bar-search-manual,
div.bar-toolbar,
div.bar-toolbar-item {
	min-height: 2em;
}

div.bar-search-auto,
div.bar-search-manual,
div.bar-toolbar {
	margin-bottom: 0.4em !important;
}

	div.bar-toolbar div.rigt-dock {
		float: right;
	}

	div.bar-search-auto div.bar-header-text,
	div.bar-search-manual div.bar-header-text,
	div.bar-toolbar div.bar-header-text,
	div.bar-toolbar-item div.bar-header-text {
		font-size: 120%;
		font-weight: bold;
		margin: .3em 0;
	}

	div.bar-search-auto::before,
	div.bar-search-manual::before,
	div.bar-toolbar::before,
	div.bar-toolbar-item::before {
		position: absolute;
		float: left;
		width: 1.5em;
		margin-left: -1.8em;
		margin-top: -0.21em;
		text-align: center;
		vertical-align: middle;
		font-size: 120%;
	}

	div.bar-search-auto::before,
	div.bar-search-manual::before {
		margin-top: 0em;
	}

	div.bar-toolbar::before,
	div.bar-toolbar-item::before {
		margin-top: -0.21em;
	}

	div.bar-search-auto span.separtor::before,
	div.bar-search-manual span.separtor::before,
	div.bar-toolbar span.separtor::before,
	div.bar-toolbar-item span.separtor::before {
		content: '▪';
		padding: 0.5em;
		color: white;
	}


/************************************************************************************************************************************************************
	###  Search bars  ###
************************************************************************************************************************************************************/

div.bar-toolbar,
div.bar-toolbar-item {
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

div.bar-search-auto,
div.bar-search-manual {
	padding-bottom: 0.4em;
    padding-top:0.2em;
}

	div.bar-search-auto::before,
	div.bar-search-manual::before {
		content: '\1F50D';
		/*
		HTML
		Use 🔍 for 🔍 and 🔎 for 🔎
		CSS (content string)
		Use '\1F50D' for 🔍 and '\1F50E' for 🔎
	*/
	}


/************************************************************************************************************************************************************
	###  Tool bar's icon  ###
************************************************************************************************************************************************************/

div.bar-toolbar::before {
	content: '\2699'; /* '\2699' for ⚙ */
}

div.bar-toolbar.icon-graph::before,
div.bar-toolbar-item.icon-graph::before {
	content: '\1F4CA'; /* 📊 */
}


/************************************************************************************************************************************************************
	###  Error and information bar  ###
************************************************************************************************************************************************************/

div.bar-message {
	white-space: pre-wrap;
}


/************************************************************************************************************************************************************
	###  ???  ###
************************************************************************************************************************************************************/

div.bar-remark {
	background-color: red;
	color: white;
	padding: .5em .5em .5em 1em;
}


/************************************************************************************************************************************************************
	###  Table  ###
************************************************************************************************************************************************************/

table {
	border-collapse: collapse;
	border: none;
}

	table.spacing-s {
		border-collapse: separate;
		border-spacing: .3em;
	}


/************************************************************************************************************************************************************
	###  Paragraph  ###
************************************************************************************************************************************************************/

.new-paragraph-s {
	margin-top: .5em;
}


/************************************************************************************************************************************************************
	###  Popover context menu  ###
************************************************************************************************************************************************************/

div.UIK_divPopoversDialogWindow.popover-context-menu {
	width: 18em;
}


/************************************************************************************************************************************************************
	###  WUC : Top Logo Bar  ###
************************************************************************************************************************************************************/

.wuc-top-logo {
	height: 60px;
	position: relative;
	background-color: #ffffff;
	background-repeat: no-repeat;
}

.wuc-top-logo-normal {
	background-color: #fceee8;
	background-image: url(../Images/header-top-logo-banner.png);
}

.ui-panel-inner .wuc-top-logo {
	margin: -1em -1em 1em -1em;
}

.wuc-top-logo .wuc-top-logo-vn-icon {
	right: 0;
	bottom: 0;
	position: absolute;
	opacity: 0.5;
	filter: alpha(opacity=50); /* older IE */
}

	.wuc-top-logo .wuc-top-logo-vn-icon:hover {
		opacity: 1;
		filter: alpha(opacity=100); /* older IE */
	}

.wuc-top-logo .wuc-top-logo-btnClose {
	right: .5em;
	top: 0;
	position: absolute;
}


/************************************************************************************************************************************************************
	###  Custom Control Calendar  ###
************************************************************************************************************************************************************/
.wuc-calendar-textbox {
	padding: .25em;
	text-align: right;
	width: 7em;
}

	.wuc-calendar-textbox.wuc-calendar-textbox-disabled {
		background-color: whitesmoke !important;
	}

.wuc-calendar-button-calendar,
.wuc-calendar-button-clock {
	text-decoration: none;
	margin-left: .2em;
	vertical-align: middle;
}

	.wuc-calendar-button-calendar::after {
		content: '\1F4C5'; /* \1F4C5 or \1F4C6 or \1F5D3 */
		font-size: large;
	}

	.wuc-calendar-button-clock::after {
		content: '🕘';
		font-size: large;
	}

.wuc-calendar-time-panel {
	margin: 1em;
}

	.wuc-calendar-time-panel tr.timeButtonRow {
		height: 3em;
	}

		.wuc-calendar-time-panel tr.timeButtonRow td {
			cursor: pointer;
			position: relative;
			color: gray;
		}

			.wuc-calendar-time-panel tr.timeButtonRow td:active {
				background-color: #2687fa; /* Selected background standard color */
				color: white;
			}

			.wuc-calendar-time-panel tr.timeButtonRow td.button-up:after {
				content: '▲';
				top: 50%;
				left: 50%;
			}

			.wuc-calendar-time-panel tr.timeButtonRow td.button-down:after {
				content: '▼';
				top: 50%;
				left: 50%;
			}

	.wuc-calendar-time-panel .timeDisplayRow td {
		font-size: 42pt;
	}

	.wuc-calendar-time-panel .timeDisplayRow .timeDisplayCell {
		width: 10em;
		background: #222;
		color: #fff;
		text-shadow: 0 1px 0 #000;
		background-image: -moz-linear-gradient(top, #222222, #666666);
		background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #222222), color-stop(1, #666666));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#666666)')";
	}


/************************************************************************************************************************************************************
	###  Master page  ###
************************************************************************************************************************************************************/

div.master-page-blank-loading {
	position: fixed;
	z-index: 1000;
	left: 50%;
	top: 50%;
	margin: -50px 0 0 -50px;
	background-color: inherit;
}

	div.master-page-blank-loading .loading-area {
		text-align: center;
		padding: 2em;
		border: solid 1px gray;
	}

	div.master-page-blank-loading .loading-content {
		margin-top: 1em;
	}


/************************************************************************************************************************************************************
	###  Dx:ASPxPageControl  ###
************************************************************************************************************************************************************/

.dxtc-content.content-min-height {
	min-height: 25em;
}


/************************************************************************************************************************************************************
	###  Dx:ASPxButton - Icons  ###
************************************************************************************************************************************************************/

.dxbButtonSys.button-icon-save span.dx-vam::before {
	content: '\1F4BE'; /* \1F4BE or \1F5AB */
	padding-right: .2em;
}

.dxbButtonSys.button-icon-undo span.dx-vam::before {
	content: '\2B8C'; /* \1F4BE or \1F5AB */
	padding-right: .2em;
}

.dxbButtonSys.button-icon-printer span.dx-vam::before {
	content: '\1F5A8';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-cancel span.dx-vam::before {
	content: '\1F5D9'; /* \1F4BE or \1F5AB */
	padding-right: .2em;
}

.dxbButtonSys.button-icon-bin span.dx-vam::before {
	content: '\1F5D1';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-ballot span.dx-vam::before {
	content: '\2718';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-creditcard span.dx-vam::before {
	content: '\1F4B3';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-check span.dx-vam::before {
	content: '\2713';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-floppydisk span.dx-vam::before {
	content: '\1F5AB';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-check span.dx-vam::before {
	content: '\1F4C1';
	padding-right: .2em;
}

.dxbButtonSys.button-icon-copy span.dx-vam::before {
	content: '\1F5CA'; /* \1F4BE or \1F5AB */
	padding-right: .2em;
}

.dxbButtonSys.button-icon-table span.dx-vam::before {
	content: '\229E';
	padding-right: .2em;
}


/************************************************************************************************************************************************************
	###  Form Section  ###
************************************************************************************************************************************************************/

.form-header-title,
.form-footer {
	font-weight: bold;
}
.form-header-title {
	padding: 9px 5px;
	font-size: 110% !important;
	margin-top: .3em;
}

.form-header-title-desc {
	margin-left: 1em;
	font-size: 14px;
	font-weight: bold;
}
.form-header-subtitle {
	margin-top: .3em;
	padding: .3em;
}

.form-footer {
	border-top-style: none !important;
	position: relative;
	/*padding: .4em .3em;*/
	padding-left: .3em;
	padding-top: .3em;
	padding-bottom: .3em;
	min-height: 2em;
}

	.form-footer div.rigt-dock {
		float: right;
	}

.form-detail {
	padding: .5em;
	/*margin-top: .3em;*/
}

	.form-detail > .form-header-title:first-child {
		margin-top: 0px;
	}

	.form-detail > .form-header-title {
		padding: 6px 5px;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.form-detail > .form-header-subtitle {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.form-detail > .form-header-title {
		margin-top: 0;
	}

.form-header label {
	font-weight: bold;
}

.form-prereport {
	padding: 3px 3px 5px 3px;
}


/************************************************************************************************************************************************************
	###  Responsive Column Containers  ###
************************************************************************************************************************************************************/

/*
<!--
css:responsive-column-containers
	Require!
css:max-columns-{n}
	Require! Set maximun number of column.
	{n} for number of column in 2 and 4. Default is 2.
	ex: "max-columns-4"
css:column-ratio-{n}
	Optional. Set width ratio of first level columns (2 columns only).
	{n} for ratio code in list of 15, 20, 30, 33, 40, 50, 60 and 66. Default is 50.
	ex: "column-ratio-33"
css:label-ratio-{n}
	Optional. Set width ratio of label and input of "field-contain".
	{n} for ratio code in list of 20, 25, 30, 33, 40 and 50. Default is 33.
	ex: "label-ratio-33"
-->
<div class="responsive-column-containers max-columns-2">
	<!-- 2 elements only. -->
	<div class="column-contain">
		<!-- Optional. View "field-contain" in Responsive Field Containers. -->
		<div class="field-contain">...</div>
		<div class="field-contain">...</div>
	</div>
	<div class="column-contain">
	</div>
</div>

<div class="responsive-column-containers max-columns-4">
	<!-- 2 elements only. -->
	<div class="column-contain">
		<!-- 2 elements only. -->
		<div class="column-contain-2nd-level"></div>
		<div class="column-contain-2nd-level"></div>
	</div>
	<div class="column-contain">
		<div class="column-contain-2nd-level"></div>
		<div class="column-contain-2nd-level"></div>
	</div>
</div>

<!-- Example: with padding for separate column. -->
<div class="responsive-column-containers max-columns-2">
	<div class="column-contain">
		<div class="column-content">
		...
		</div>
	</div>
	<div class="column-contain">
		<div class="column-content">
		...
		</div>
	</div>
</div>
*/

.responsive-column-containers {
}

	.responsive-column-containers::after {
		content: '';
		display: block;
		clear: both;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(1) > .column-content {
		padding-right: .2em;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(2) > .column-content {
		padding-left: .2em;
	}

	.responsive-column-containers .column-contain,
	.responsive-column-containers .column-contain .column-contain-2nd-level {
		float: left;
		width: 50%;
	}

	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(1) {
		width: 66.6666%;
	}

	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(2) {
		width: 33.3333%;
	}

	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(1) {
		width: 60%;
	}

	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(2) {
		width: 40%;
	}

	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(1) {
		width: 40%;
	}

	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(2) {
		width: 60%;
	}

	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(1) {
		width: 33.3333%;
	}

	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(2) {
		width: 66.6666%;
	}

	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(1) {
		width: 30%;
	}

	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(2) {
		width: 70%;
	}

	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(1) {
		width: 20%;
	}

	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(2) {
		width: 80%;
	}

	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(1) {
		width: 15%;
	}

	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(2) {
		width: 85%;
	}

	.responsive-column-containers.column-ratio-10 .column-contain:nth-child(1) {
		width: 10%;
	}

	.responsive-column-containers.column-ratio-10 .column-contain:nth-child(2) {
		width: 90%;
	}

@media (min-width: 40em) and (max-width: 52em) {
	.responsive-column-containers .column-contain,
	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-10 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-10 .column-contain:nth-child(2),
	.responsive-column-containers.max-columns-4 .column-contain .column-contain-2nd-level {
		float: none;
		width: 100%;
	}

	.responsive-column-containers.max-columns-4 .column-contain {
		float: left;
		width: 50%;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(1) > .column-content {
		padding-right: 0em;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(2) > .column-content {
		padding-left: 0em;
		padding-top: .2em;
	}
}

@media (max-width: 40em) {
	.responsive-column-containers .column-contain,
	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-66 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-60 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-40 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-33 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-30 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-20 .column-contain:nth-child(2),
	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(1),
	.responsive-column-containers.column-ratio-15 .column-contain:nth-child(2),
	.responsive-column-containers .column-contain .column-contain-2nd-level {
		float: none;
		width: 100%;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(1) > .column-content {
		padding-right: 0em;
	}

	.responsive-column-containers.max-columns-2 .column-contain:nth-child(2) > .column-content {
		padding-left: 0em;
		padding-top: .2em;
	}
}

/************************************************************************************************************************************************************
	###  Responsive Field Containers  ###
************************************************************************************************************************************************************/
/*
<!--
class: responsive-field-containers
	Require!
class: max-columns-{n}
	Optional. Set maximun number of column. Not set for flow from left to right.
	{n} for number of column from 1 to 7. Default is 3.
	ex: "max-columns-3"
class: column-ratio-{n}
	Optional. Set width ratio of first level columns (2 columns only).
	{n} for ratio code in list of 30, 33, 50 and 66. Default is 50.
	ex: "column-ratio-33"
class: label-ratio-{n}
	Optional. Set width ratio of label and input.
	{n} for ratio code in list of 20, 25, 30, 33, 40 and 50. Default is 33.
	ex: "label-ratio-30"
class: narrow-width
	Optional. Narrow width or align left.
-->
<div class="responsive-field-containers">
	<!--
	class: field-contain
		Require!
	class: label-ratio-{n}
		Optional. Set width ratio of label and input each field container then overide inherited setting.
		{n} for ratio code in list of 20, 25, 30, 33, 40 and 50. Default is 33.
		ex: "label-ratio-33"
	-->
	<div class="field-contain">
		<label>AAAAA</label>
		<!--
		css:field-input
			Require!
		-->
		<div class="field-input">BBBB</div>
	</div>
	...
	<div class="field-contain">
		<label>AAAAA</label>
		<div class="field-input">
			<!-- for multiple input --->
			<div class="field-input-member">BBBB1</div>
			<label>BBBB2</label>
			<div class="field-input-member">BBBB3</div>
		</div>
	</div>
	...
	<div class="field-contain">...</div>
	...
</div>
*/

.responsive-field-containers::after {
	content: '';
	display: block;
	clear: both;
	/*height: 0.5em;*/
}

.responsive-column-containers > .column-contain > .field-contain,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
.responsive-field-containers .field-contain {
	float: left;
	margin-top: .3em;
	margin-left: .5em;
}

	.responsive-column-containers > .column-contain > .field-contain > label,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > label,
	.responsive-field-containers .field-contain > label {
		text-align: right;
	}

.responsive-column-containers > .column-contain > .field-contain,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
.responsive-field-containers.max-columns-1 .field-contain,
.responsive-field-containers.max-columns-2 .field-contain,
.responsive-field-containers.max-columns-3 .field-contain,
.responsive-field-containers.max-columns-4 .field-contain,
.responsive-field-containers.max-columns-5 .field-contain,
.responsive-field-containers.max-columns-6 .field-contain,
.responsive-field-containers.max-columns-7 .field-contain {
	margin-left: 0;
}

	.responsive-column-containers > .column-contain > .field-contain > label,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > label,
	.responsive-field-containers.max-columns-1 .field-contain > label,
	.responsive-field-containers.max-columns-2 .field-contain > label,
	.responsive-field-containers.max-columns-3 .field-contain > label,
	.responsive-field-containers.max-columns-4 .field-contain > label,
	.responsive-field-containers.max-columns-5 .field-contain > label,
	.responsive-field-containers.max-columns-6 .field-contain > label,
	.responsive-field-containers.max-columns-7 .field-contain > label {
		float: left;
		width: 31.3333%;
		padding-right: 2%;
	}

	.responsive-column-containers > .column-contain > .field-contain > .field-input > div.field-input-member,
	.responsive-column-containers > .column-contain > .field-contain > .field-input > label,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > .field-input > div.field-input-member,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > .field-input > label,
	.responsive-field-containers .field-contain > .field-input > div.field-input-member,
	.responsive-field-containers .field-contain > .field-input > label {
		float: left;
		padding-right: .5em;
	}

	.responsive-column-containers > .column-contain > .field-contain > .field-input,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > .field-input,
	.responsive-field-containers.max-columns-1 .field-contain > .field-input,
	.responsive-field-containers.max-columns-2 .field-contain > .field-input,
	.responsive-field-containers.max-columns-3 .field-contain > .field-input,
	.responsive-field-containers.max-columns-4 .field-contain > .field-input,
	.responsive-field-containers.max-columns-5 .field-contain > .field-input,
	.responsive-field-containers.max-columns-6 .field-contain > .field-input,
	.responsive-field-containers.max-columns-7 .field-contain > .field-input {
		float: left;
		width: 66.6666%;
	}

.responsive-column-containers.label-ratio-10 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-10 .field-contain > label {
	width: 8%;
	padding-right: 2%;
}

.responsive-column-containers.label-ratio-10 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-10 .field-contain > .field-input {
	width: 89%;
}

.responsive-column-containers.label-ratio-20 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-20 .field-contain > label {
	width: 18%;
	padding-right: 2%;
}

.responsive-column-containers.label-ratio-20 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-20 .field-contain > .field-input {
	width: 79%;
}

.responsive-column-containers.label-ratio-25 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-25 .field-contain > label {
	width: 24%;
	padding-right: 2%;
}

.responsive-column-containers.label-ratio-25 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-25 .field-contain > .field-input {
	width: 74%;
}

.responsive-column-containers.label-ratio-30 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-30 .field-contain > label {
	width: 28%;
	padding-right: 2%;
}

.responsive-column-containers.label-ratio-30 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-30 .field-contain > .field-input {
	width: 70%;
}

.responsive-column-containers.label-ratio-40 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-40 .field-contain > label {
	width: 38%;
	padding-right: 2%;
}

.responsive-column-containers.label-ratio-40 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-40 .field-contain > .field-input {
	width: 60%;
}

.responsive-column-containers.label-ratio-50 > .column-contain .field-contain > label,
.responsive-field-containers.label-ratio-50 .field-contain > label {
	width: 47%;
	padding-right: 3%;
}

.responsive-column-containers.label-ratio-50 > .column-contain .field-contain > .field-input,
.responsive-field-containers.label-ratio-50 .field-contain > .field-input {
	width: 50%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-10 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-10 > label,
.responsive-field-containers .field-contain.label-ratio-10 > label {
	width: 9%;
	padding-right: 1%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-10 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-10 > .field-input,
.responsive-field-containers .field-contain.label-ratio-10 > .field-input {
	width: 90%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-20 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-20 > label,
.responsive-field-containers .field-contain.label-ratio-20 > label {
	width: 19%;
	padding-right: 1%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-20 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-20 > .field-input,
.responsive-field-containers .field-contain.label-ratio-20 > .field-input {
	width: 80%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-25 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-25 > label,
.responsive-field-containers .field-contain.label-ratio-25 > label {
	width: 24%;
	padding-right: 1%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-25 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-25 > .field-input,
.responsive-field-containers .field-contain.label-ratio-25 > .field-input {
	width: 75%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-30 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-30 > label,
.responsive-field-containers .field-contain.label-ratio-30 > label {
	width: 28%;
	padding-right: 2%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-30 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-30 > .field-input,
.responsive-field-containers .field-contain.label-ratio-30 > .field-input {
	width: 70%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-33 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-33 > label,
.responsive-field-containers .field-contain.label-ratio-33 > label {
	width: 31.3333%;
	padding-right: 2%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-33 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-33 > .field-input,
.responsive-field-containers .field-contain.label-ratio-33 > .field-input {
	width: 66.6666%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-40 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-40 > label,
.responsive-field-containers .field-contain.label-ratio-40 > label {
	width: 38%;
	padding-right: 2%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-40 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-40 > .field-input,
.responsive-field-containers .field-contain.label-ratio-40 > .field-input {
	width: 60%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-50 > label,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-50 > label,
.responsive-field-containers .field-contain.label-ratio-50 > label {
	width: 47%;
	padding-right: 3%;
}

.responsive-column-containers > .column-contain > .field-contain.label-ratio-50 > .field-input,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain.label-ratio-50 > .field-input,
.responsive-field-containers .field-contain.label-ratio-50 > .field-input {
	width: 50%;
}

.responsive-column-containers > .column-contain > .field-contain,
.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain {
	width: 100%;
}

.responsive-field-containers.max-columns-1 .field-contain {
	width: 100%;
}

.responsive-field-containers.max-columns-2 .field-contain {
	width: 50%;
}

.responsive-field-containers.max-columns-3 .field-contain {
	width: 33.3333%;
}

.responsive-field-containers.max-columns-4 .field-contain {
	width: 25%;
}

.responsive-field-containers.max-columns-5 .field-contain {
	width: 20%;
}

.responsive-field-containers.max-columns-6 .field-contain {
	width: 16.6666%;
}

.responsive-field-containers.max-columns-7 .field-contain {
	width: 14.2857%;
}


@media (min-width: 80em) {
	.responsive-field-containers.max-columns-1.narrow-width {
		width: 50%;
	}

	.responsive-field-containers.max-columns-2.narrow-width {
		width: 66.6666%;
	}

	.responsive-field-containers.max-columns-3.narrow-width {
		width: 75%;
	}

	.responsive-field-containers.max-columns-4.narrow-width {
		width: 80%;
	}

	.responsive-field-containers.max-columns-5.narrow-width {
		width: 83.3333%;
	}
}

@media (min-width: 64em) {

	.responsive-field-containers.max-columns-2.column-ratio-66 .field-contain {
		width: 66.6666%;
	}

		.responsive-field-containers.max-columns-2.column-ratio-66 .field-contain:nth-child(2n) {
			width: 33.3333%;
		}

			.responsive-field-containers.max-columns-2.column-ratio-66 .field-contain:nth-child(2n) > label {
				width: 25%;
			}

			.responsive-field-containers.max-columns-2.column-ratio-66 .field-contain:nth-child(2n) > .field-input {
				width: 73%;
			}

	.responsive-field-containers.max-columns-2.column-ratio-60 .field-contain {
		width: 60%;
	}

		.responsive-field-containers.max-columns-2.column-ratio-60 .field-contain:nth-child(2n) {
			width: 40%;
		}

			.responsive-field-containers.max-columns-2.column-ratio-60 .field-contain:nth-child(2n) > label {
				width: 32%;
			}

			.responsive-field-containers.max-columns-2.column-ratio-60 .field-contain:nth-child(2n) > .field-input {
				width: 66%;
			}

	.responsive-field-containers.max-columns-2.column-ratio-33 .field-contain {
		width: 33.3333%;
	}

		.responsive-field-containers.max-columns-2.column-ratio-33 .field-contain:nth-child(2n) {
			width: 66.6666%;
		}

			.responsive-field-containers.max-columns-2.column-ratio-33 .field-contain:nth-child(2n) > label {
				width: 25%;
			}

			.responsive-field-containers.max-columns-2.column-ratio-33 .field-contain:nth-child(2n) > .field-input {
				width: 73%;
			}

	.responsive-field-containers.max-columns-2.column-ratio-30 .field-contain {
		width: 30%;
	}

		.responsive-field-containers.max-columns-2.column-ratio-30 .field-contain:nth-child(2n) {
			width: 70%;
		}

			.responsive-field-containers.max-columns-2.column-ratio-30 .field-contain:nth-child(2n) > label {
				width: 22%;
			}

			.responsive-field-containers.max-columns-2.column-ratio-30 .field-contain:nth-child(2n) > .field-input {
				width: 76%;
			}

	.responsive-field-containers.max-columns-2.column-ratio-20 .field-contain {
		width: 20%;
	}

		.responsive-field-containers.max-columns-2.column-ratio-20 .field-contain:nth-child(2n) {
			width: 80%;
		}

			.responsive-field-containers.max-columns-2.column-ratio-20 .field-contain:nth-child(2n) > label {
				width: 22%;
			}

			.responsive-field-containers.max-columns-2.column-ratio-20 .field-contain:nth-child(2n) > .field-input {
				width: 76%;
			}
}


@media (min-width: 64em) {
	.responsive-column-containers > .column-contain > .field-contain,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
	.responsive-field-containers.max-columns-1 .field-contain:nth-child(2n),
	.responsive-field-containers.max-columns-2 .field-contain:nth-child(2n+1),
	.responsive-field-containers.max-columns-3 .field-contain:nth-child(3n+1),
	.responsive-field-containers.max-columns-4 .field-contain:nth-child(4n+1),
	.responsive-field-containers.max-columns-5 .field-contain:nth-child(5n+1),
	.responsive-field-containers.max-columns-6 .field-contain:nth-child(6n+1),
	.responsive-field-containers.max-columns-7 .field-contain:nth-child(7n+1) {
		clear: both;
	}
}


@media (min-width: 52em) and (max-width: 64em) {
	.responsive-field-containers.max-columns-2 .field-contain,
	.responsive-field-containers.max-columns-3 .field-contain {
		width: 50%;
	}

	.responsive-field-containers.max-columns-4 .field-contain {
		width: 33.3333%;
	}

	.responsive-field-containers.max-columns-5 .field-contain {
		width: 25%;
	}

	.responsive-field-containers.max-columns-6 .field-contain {
		width: 20%;
	}

	.responsive-field-containers.max-columns-7 .field-contain {
		width: 16.6666%;
	}

		.responsive-field-containers.max-columns-1 .field-contain:nth-child(2n),
		.responsive-field-containers.max-columns-2 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-3 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-4 .field-contain:nth-child(3n+1),
		.responsive-field-containers.max-columns-5 .field-contain:nth-child(4n+1),
		.responsive-field-containers.max-columns-6 .field-contain:nth-child(5n+1),
		.responsive-field-containers.max-columns-7 .field-contain:nth-child(6n+1) {
			clear: both;
		}
}


@media (min-width: 40em) and (max-width: 52em) {
	.responsive-field-containers.max-columns-2 .field-contain,
	.responsive-field-containers.max-columns-3 .field-contain,
	.responsive-field-containers.max-columns-4 .field-contain {
		width: 50%;
	}

	.responsive-field-containers.max-columns-5 .field-contain {
		width: 33.3333%;
	}

	.responsive-field-containers.max-columns-6 .field-contain {
		width: 25%;
	}

	.responsive-field-containers.max-columns-7 .field-contain {
		width: 20%;
	}

		.responsive-column-containers > .column-contain > .field-contain,
		.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
		.responsive-field-containers.max-columns-1 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-2 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-3 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-4 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-5 .field-contain:nth-child(3n+1),
		.responsive-field-containers.max-columns-6 .field-contain:nth-child(4n+1),
		.responsive-field-containers.max-columns-7 .field-contain:nth-child(5n+1) {
			clear: both;
		}
}


@media (min-width: 30em) and (max-width: 40em) {
	.responsive-field-containers.max-columns-1 .field-contain,
	.responsive-field-containers.max-columns-2 .field-contain,
	.responsive-field-containers.max-columns-3 .field-contain,
	.responsive-field-containers.max-columns-4 .field-contain {
		width: 100%;
	}

	.responsive-field-containers.max-columns-5 .field-contain {
		width: 50%;
	}

	.responsive-field-containers.max-columns-6 .field-contain {
		width: 33.3333%;
	}

	.responsive-field-containers.max-columns-7 .field-contain {
		width: 25%;
	}

		.responsive-column-containers > .column-contain > .field-contain,
		.responsive-field-containers.max-columns-1 .field-contain,
		.responsive-field-containers.max-columns-2 .field-contain,
		.responsive-field-containers.max-columns-3 .field-contain,
		.responsive-field-containers.max-columns-4 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-5 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-6 .field-contain:nth-child(3n+1),
		.responsive-field-containers.max-columns-7 .field-contain:nth-child(4n+1) {
			clear: both;
		}
}


@media (max-width: 30em) {
	label, .label {
		text-align: left !important;
		color: #b8b9b8;
		margin: 0;
	}

	.responsive-column-containers > .column-contain > .field-contain > label,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > label,
	.responsive-column-containers > .column-contain > .field-contain > .field-input,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > .field-input,
	.responsive-field-containers.max-columns-1 .field-contain > label,
	.responsive-field-containers.max-columns-1 .field-contain > .field-input,
	.responsive-field-containers.max-columns-2 .field-contain > label,
	.responsive-field-containers.max-columns-2 .field-contain > .field-input {
		float: none;
		width: 100%;
	}

		.responsive-column-containers > .column-contain > .field-contain > label:not(:empty),
		.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > label:not(:empty),
		.responsive-field-containers.max-columns-1 .field-contain > label:not(:empty),
		.responsive-field-containers.max-columns-2 .field-contain > label:not(:empty) {
			margin-top: .5em;
		}

		.responsive-column-containers > .column-contain > .field-contain > .field-input:not(:empty),
		.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain > .field-input:not(:empty),
		.responsive-field-containers.max-columns-1 .field-contain > .field-input:not(:empty),
		.responsive-field-containers.max-columns-2 .field-contain > .field-input:not(:empty) {
			margin-top: .2em;
		}

	.responsive-column-containers > .column-contain > .field-contain,
	.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
	.responsive-field-containers.max-columns-1 .field-contain,
	.responsive-field-containers.max-columns-2 .field-contain,
	.responsive-field-containers.max-columns-3 .field-contain,
	.responsive-field-containers.max-columns-4 .field-contain,
	.responsive-field-containers.max-columns-5 .field-contain {
		width: 100%;
	}

	.responsive-field-containers.max-columns-6 .field-contain {
		width: 50%;
	}

	.responsive-field-containers.max-columns-7 .field-contain {
		width: 33.3333%;
	}

		.responsive-column-containers > .column-contain > .field-contain,
		.responsive-column-containers > .column-contain > column-contain-2nd-level > .field-contain,
		.responsive-field-containers.max-columns-1 .field-contain,
		.responsive-field-containers.max-columns-2 .field-contain,
		.responsive-field-containers.max-columns-3 .field-contain,
		.responsive-field-containers.max-columns-4 .field-contain,
		.responsive-field-containers.max-columns-5 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-6 .field-contain:nth-child(2n+1),
		.responsive-field-containers.max-columns-7 .field-contain:nth-child(3n+1) {
			clear: both;
		}
}


/************************************************************************************************************************************************************
	###  Slide Reveal  ###
************************************************************************************************************************************************************/

.slide-reveal,
.slide-reveal-prereport {
	display: none;
	box-sizing: content-box;
	background-color: #F8F8F8;
}

.slide-reveal-prereport {
	padding: 0.8em;
}

	.slide-reveal-prereport .header-text {
		font-size: x-large;
		font-weight: bold;
		padding-bottom: .5em;
	}

	.slide-reveal-prereport .field-input,
	.slide-reveal-prereport .label-text {
		padding-top: .3em;
		padding-bottom: .3em;
	}

	.slide-reveal-prereport .label-text {
		font-size: medium;
	}

	.slide-reveal-prereport .command-buttons {
		padding-top: .3em;
	}

	.slide-reveal-prereport .field-input .field-indent {
		padding-top: .3em;
		padding-left: 2em;
	}


/************************************************************************************************************************************************************
	###  WebUserControl - ChangeTransactionStatusButtons  ###
************************************************************************************************************************************************************/

.change-transaction-status-buttons {
	border-style: solid;
	border-width: 1px;
	padding: 2px 2px 2px .5em;
	display: inline-table;
}

	.change-transaction-status-buttons .current-status span.dx-vam {
		font-weight: bold;
	}

/*
.change-transaction-status-buttons .current-status span.dx-vam::before {
	content: '\2714';
	padding-right: .2em;
	font-weight: bold;
}
*/
.txt_chiseled, .txt_chiseled .dxeEditAreaSys {
	background-color: transparent;
	border-left: none;
	border-bottom: 1px solid gray;
	border-top: none;
	border-right: none;
}

.error, .info {
	border: solid 1px;
}

.cellCaption {
	white-space: nowrap;
	font-weight: bold;
}


/************************************************************************************************************************************************************
	###  CodeMirror  ###
************************************************************************************************************************************************************/

.CodeMirror {
	border: 1px solid #8ba0bc;
	font-family: "Couier MonoThai" !important;
}


.form-row > .field-input {
	float: left;
	margin-top: 0em;
	margin-left: .5em;
}


/*********************************************************************************
	###  Progress Status  ###
*********************************************************************************/

.bar-process-status {
	border-width: 2px;
	border-style: solid;
}

	.bar-process-status .status-icon-current,
	.bar-process-status .status-icon-next,
	.bar-process-status .status-icon-finished,
	.bar-process-status .status-icon-void {
		font-size: 2.25em;
	}


.listboxcountinfo {
    padding: 5px;
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
}

.uploadtextbox, .uploadtextbox img, .uploadtextbox input {
    width: 10px;
    border: none;
    padding: 0px;
    border:none;
}

.narrowheight .field-contain {
    margin-top:.1em;
}
.narrowheight .field-contain label {
    margin-bottom: .1em;
}