/************************************************************************************************************************************************************
	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 {
    color: Red !important;
}

.fieldRequire_status {
    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: .3em;
}

    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: '\21A9'; /* \2B8C or \238C */
    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: '\2297'; /* \1F4BE or \1F5AB \1F5D9 */
    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';/*\2715 \2716 \2717 \274E*/
    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-refresh span.dx-vam::before {
    content: '\1F504';
    padding-right: .2em;
}

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

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

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

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

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

.dxbButtonSys.button-icon-next span.dx-vam::after {
    content: '\2192';
    padding-left: .2em;
}

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

.dxbButtonSys.button-icon-plus span.dx-vam::before {
    content: '\FF0B'; /*002B*/
    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-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;
    }