:root {
	--ctrl-bg: #fcfcfc;
	--ctrl-box-shadow: none;
	--ctrl-border-color: #d9d9d9;
	--ctrl-focus-box-shadow-color: #d9d9d9;
	--ctrl-disabled-bg: #f9f9f9;
	--ctrl-disabled-color: #303030;
	--ctrl-disabled-box-shadow: none;
	--ctrl-disabled-border-color: #d9d9d9;

	--btn-bg: #606060;
	--btn-color: #eeeeee;
	--btn-border-color: #d9d9d9;
	--btn-border-radius: 3px;
	--btn-hover-bg: #303030;
	--btn-hover-color: #ffffff;
	--btn-hover-border-color: #d9d9d9;
	--btn-disabled-bg: #b0b0b0;
	--btn-disabled-color: #e0e0e0;
	--btn-disabled-border-color: #d9d9d9;
	--btn-success-bg: #606060;
	--btn-success-border-color: #d9d9d9;
	--btn-success-hover-bg: #303030;
	--btn-success-hover-border-color: #d9d9d9;
	--btn-success-disabled-bg: #b0b0b0;
	--btn-success-disabled-color: #e0e0e0;
	--btn-success-disabled-border-color: #d9d9d9;
	--btn-danger-bg: #606060;
	--btn-danger-border-color: #d9d9d9;
	--btn-danger-hover-bg: #303030;
	--btn-danger-hover-border-color: #d9d9d9;
	--btn-danger-disabled-bg: #b0b0b0;
	--btn-danger-disabled-color: #e0e0e0;
	--btn-danger-disabled-border-color: #d9d9d9;

	--sw-bg: #303030;
	--sw-border-color: #d9d9d9;
	--sw-disabled-bg: #b0b0b0;
	--sw-disabled-border-color: #d9d9d9;
	--sw-on-bg: #ffffff;
	--sw-on-color: #000000;
	--sw-on-disabled-bg: #808080;
	--sw-on-disabled-color: #606060;
	--sw-off-bg: #c0c0c0;
	--sw-off-color: #000000;

	--dp-bg: #fcf1ff;
	--dp-border-color: #d9d9d9;
	--dp-dropdown-hover-bg: #c0c0c0;
	--dp-dropdown-active-bg: #303030;
	--dp-dropdown-active-color: #ffffff;

	--list-color: #000000;
	--list-header-bg: #d0d0d0;
	--list-header-border-color: #d9d9d9;
	--list-item-alt-bg: #f5f5f5;
	--list-item-selected-bg: #aaaaaa;

	--icon-bg: #f5f5f5;
	--icon-border-color: #d9d9d9;
	--icon-hover-bg: #e5e5e5;
	--icon-hover-border-color: #d9d9d9;

	--card-bg: #f5f5f5;
	--card-border-color: #d9d9d9;

	--pagination-item-bg: #ffffff;
	--pagination-item-color: #000000;
	--pagination-item-border-color: #f0f0f0;
	--pagination-item-hover-bg: #f0f0f0;
	--pagination-item-hover-color: #000000;
	--pagination-item-hover-border-color: #e0e0e0;
	--pagination-item-active-bg: #c0c0c0;
	--pagination-item-active-color: #000000;
	--pagination-item-active-border-color: #e0e0e0;

	--line-color: #eeeeee;

	--txt-highlight: #ffee00;

	--msgbox-bg: #f0f0f0;
	--mgsbox-color: #000000;
	--mgsbox-border-color: #d9d9d9;
	--msgbox-alert-bg: #f0f0f0;
	--mgsbox-alert-color: #000000;
	--mgsbox-alert-border-color: #d9d9d9;

	--notice-bg: #ffffff;
	--notice-icon-color: #000000;

	--status-bg: #f0f0f0;
	--status-color: #000000;
	--status-border-color: #d9d9d9;
	--status-alert-bg: #f0f0f0;
	--status-alert-color: #000000;
	--status-alert-border-color: #d9d9d9;

	--progress-color: #000000;

	--modal-bg: #ffffff;
	--modal-border-color: #d9d9d9;
	--modal-box-shadow-color: #d9d9d9;
	--modal-header-bg: #303030;
	--modal-header-bg2: #f0f0f0;
	--modal-header-color: #ffffff;

	--page-bg: #ffffff;
	--page-color:  #000000;

	--wrapper-bg: #ffffff;
	--wrapper-box-shadow-color: #c0c0c0;

	--login-card-bg: #ffffff;
	--login-card-color: #000000;
	--login-card-width: 350px;
	--login-card-padding-lr: 30px;
	--login-card-box-shadow-color: #e0e0e0;
	--login-logo-max-height: 150px;

	--header-banner-bg: #ffffff;
	--header-title-bg: #ffffff;
	--header-title-bg2: #ffffff;
	--header-message-bg: #303030;
	--header-message-color: #ffffff;

	--sidebar-bg: #ffffff;
	--sidebar-box-shadow-color: #c0c0c0;
	--sidebar-item-hover-bg: #f5f5f5;
	--sidebar-item-hover-box-shadow-color: #e5e5e5;

	--content-padding-l: 5px;
	--content-padding-r: 0px;
	--content-header-bg: #303030;
	--content-header-bg2: #ffffff;
	--content-header-color: #ffffff;
	--content-body-padding-l: 5px;
	--content-body-padding-r: 5px;

	--footer-bg: #ffffff;
	--footer-bg2: #303030;
	--footer-color: #ffffff;

	--error-bg: #dedede;
}

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: auto !important;
	cursor: default;

	font-size: 16px;
	font-family: 'Kanit', sans-serif;
	font-family: 'Prompt', sans-serif;
	font-family: 'Sarabun', sans-serif;
}

body {
	color: var(--page-color, inherit);
	background-color: var(--page-bg, inherit);
}

form {
	width: 100%;
}

button:focus,
button:active,
select:focus,
select:active,
input[type="radio"]:focus,
input[type="radio"]:active,
.btn:focus,
.btn:active,
.form-select:focus,
.form-select:active,
.form-check-input:focus,
.form-check-input:active,
.pagination .page-link:focus,
.pagination .page-link:active {
	outline: none !important;

	box-shadow: var(--ctrl-box-shadow, none) !important;
	-o-box-shadow: var(--ctrl-box-shadow, none) !important;
	-moz-box-shadow: var(--ctrl-box-shadow, none) !important;
	-webkit-box-shadow: var(--ctrl-box-shadow, none) !important;
}

button {
	font-size: 1rem;
	font-weight: 700;

	cursor: default;

	--btn-user-select: none;

	user-select: var(--btn-user-select, none);
	-o-user-select: var(--btn-user-select, none);
	-moz-user-select: var(--btn-user-select, none);
	-webkit-user-select: var(--btn-user-select, none);
}

a.btn,
a.btn:focus {
	margin: 0;
	padding: 0;
}

.text-ellipsis {
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wordwrap {
	white-space: pre-wrap;      /* css3 */
	white-space: -moz-pre-wrap; /* firefox */
	white-space: -pre-wrap;     /* opera < 7 */
	white-space: -o-pre-wrap;   /* opera 7+ */
	word-wrap: break-word;      /* ie */
}

.form-select,
.form-control {
	height: 36px;
	padding: 5px;
	/* padding-left: 5px;
	padding-right: 5px; */

	color: var(--ctrl-color, var(--page-color, inherit));
	border-color: var(--ctrl-border-color, inherit);
	background-color: var(--ctrl-bg, var(--page-bg, inherit));

	box-shadow: var(--ctrl-box-shadow, 0px 0px 10px 0px var(--ctrl-box-shadow-color, inherit));
	-o-box-shadow: var(--ctrl-box-shadow, 0px 0px 10px 0px var(--ctrl-box-shadow-color, inherit));
	-moz-box-shadow: var(--ctrl-box-shadow, 0px 0px 10px 0px var(--ctrl-box-shadow-color, inherit));
	-webkit-box-shadow: var(--ctrl-box-shadow, 0px 0px 10px 0px var(--ctrl-box-shadow-color, inherit));
}

.form-select:focus,
.form-control:focus {
	color: var(--ctrl-focus-color, var(--ctrl-color, var(--page-color, inherit)));
	border-color: var(--ctrl-focus-border-color, var(--ctrl-border-color, inherit));
	background-color: var(--ctrl-focus-bg, var(--ctrl-bg, var(--page-bg, inherit)));

	box-shadow: var(--ctrl-focus-box-shadow, 0px 0px 10px 0px var(--ctrl-focus-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-o-box-shadow: var(--ctrl-focus-box-shadow, 0px 0px 10px 0px var(--ctrl-focus-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-moz-box-shadow: var(--ctrl-focus-box-shadow, 0px 0px 10px 0px var(--ctrl-focus-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-webkit-box-shadow: var(--ctrl-focus-box-shadow, 0px 0px 10px 0px var(--ctrl-focus-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
}

.form-select.disabled,
.form-select.readonly,
.form-control.disabled,
.form-control.readonly {
	color: var(--ctrl-disabled-color, var(--ctrl-color, var(--page-color, inherit)));
	border-color: var(--ctrl-disabled-border-color, var(--ctrl-border-color, inherit));
	background-color: var(--ctrl-disabled-bg, var(--ctrl-bg, var(--page-bg, inherit)));

	cursor: default;

	box-shadow: var(--ctrl-disabled-box-shadow, 0px 0px 10px 0px var(--ctrl-disabled-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-o-box-shadow: var(--ctrl-disabled-box-shadow, 0px 0px 10px 0px var(--ctrl-disabled-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-moz-box-shadow: var(--ctrl-disabled-box-shadow, 0px 0px 10px 0px var(--ctrl-disabled-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
	-webkit-box-shadow: var(--ctrl-disabled-box-shadow, 0px 0px 10px 0px var(--ctrl-disabled-box-shadow-color, var(--ctrl-box-shadow-color, inherit)));
}

.form-select.error:not(.disabled, .readonly),
.form-control.error:not(.disabled, .readonly) {
	border-color: red;
}

.btn {
	padding: 5px 10px;
	font-weight: 500;

	color: var(--btn-color, var(--page-color, inherit));
	border-color: var(--btn-border-color, inherit);
	background-color: var(--btn-bg, var(--page-bg, inherit));

	border-radius: var(--btn-border-radius, inherit);
	-o-border-radius: var(--btn-border-radius, inherit);
	-moz-border-radius: var(--btn-border-radius, inherit);
	-webkit-border-radius: var(--btn-border-radius, inherit);
}

.btn:hover {
	color: var(--btn-hover-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-hover-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-hover-bg, var(--btn-bg, var(--page-bg, inherit)));
}

.btn:focus {
	color: var(--btn-focus-color, var(--btn-hover-color, var(--btn-color, var(--page-color, inherit))));
	border-color: var(--btn-focus-border-color, var(--btn-hover-border-color, var(--btn-border-color, inherit)));
	background-color: var(--btn-focus-bg, var(--btn-hover-bg, var(--btn-bg, var(--page-bg, inherit))));
}

.btn:active {
	color: var(--btn-active-color, var(--btn-hover-color, var(--btn-color, var(--page-color, inherit)))) !important;
	border-color: var(--btn-active-border-color, var(--btn-hover-border-color, var(--btn-border-color, inherit))) !important;
	background-color: var(--btn-active-bg, var(--btn-hover-bg, var(--btn-bg, var(--page-bg, inherit)))) !important;
}

.btn.disabled,
.btn:disabled,
.btn[disabled] {
	color: var(--btn-disabled-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-disabled-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-disabled-bg, var(--btn-bg, var(--page-bg, inherit)));

	cursor: default;
}

.btn.success {
	color: var(--btn-success-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-success-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-success-bg, var(--btn-bg, var(--page-bg, inherit)));
}

.btn.success:hover {
	color: var(--btn-success-hover-color, var(--btn-success-color, var(--btn-color, var(--page-color, inherit))));
	border-color: var(--btn-success-hover-border-color, var(--btn-success-border-color, var(--btn-border-color, inherit)));
	background-color: var(--btn-success-hover-bg, var(--btn-success-bg, var(--btn-bg, var(--page-bg, inherit))));
}

.btn.success:focus {
	color: var(--btn-success-focus-color, var(--btn-success-color, var(--btn-focus-color, var(--btn-color, var(--page-color, inherit))))) !important;
	border-color: var(--btn-success-focus-border-color, var(--btn-success-border-color, var(--btn-focus-border-color, var(--btn-border-color, inherit)))) !important;
	background-color: var(--btn-success-focus-bg, var(--btn-success-bg, var(--btn-focus-bg, var(--btn-bg, var(--page-bg, inherit))))) !important;
}

.btn.success:active {
	color: var(--btn-success-active-color, var(--btn-success-color, var(--btn-active-color, var(--btn-color, var(--page-color, inherit))))) !important;
	border-color: var(--btn-success-active-border-color, var(--btn-success-border-color, var(--btn-active-border-color, var(--btn-border-color, inherit)))) !important;
	background-color: var(--btn-success-active-bg, var(--btn-active-bg, var(--btn-success-bg, var(--btn-bg, var(--page-bg, inherit))))) !important;
}

.btn.success.disabled,
.btn.success:disabled,
.btn.success[disabled] {
	color: var(--btn-success-disabled-color, var(--btn-success-color, var(--btn-color, var(--page-color, inherit))));
	border-color: var(--btn-success-disabled-border-color, var(--btn-success-border-color, var(--btn-border-color, inherit)));
	background-color: var(--btn-success-disabled-bg, var(--btn-success-bg, var(--btn-bg, var(--page-bg, inherit))));
}

.btn.danger {
	color: var(--btn-danger-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-danger-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-danger-bg, var(--btn-bg, var(--page-bg, inherit)));
}

.btn.danger:focus {
	color: var(--btn-danger-focus-color, var(--btn-danger-color, var(--btn-focus-color, var(--btn-color, var(--page-color, inherit))))) !important;
	border-color: var(--btn-danger-focus-border-color, var(--btn-danger-border-color, var(--btn-focus-border-color, var(--btn-border-color, inherit)))) !important;
	background-color: var(--btn-danger-focus-bg, var(--btn-danger-bg, var(--btn-focus-bg, var(--btn-bg, var(--page-bg, inherit))))) !important;
}

.btn.danger:active {
	color: var(--btn-danger-active-color, var(--btn-danger-color, var(--btn-active-color, var(--btn-color, var(--page-color, inherit))))) !important;
	border-color: var(--btn-danger-active-border-color, var(--btn-danger-border-color, var(--btn-active-border-color, var(--btn-border-color, inherit)))) !important;
	background-color: var(--btn-danger-active-bg, var(--btn-danger-bg, var(--btn-active-bg, var(--btn-bg, var(--page-bg, inherit))))) !important;
}

.btn.danger:hover {
	color: var(--btn-danger-hover-color, var(--btn-danger-color, var(--btn-color, var(--page-color, inherit))));
	border-color: var(--btn-danger-hover-border-color, var(--btn-danger-border-color, var(--btn-border-color, inherit)));
	background-color: var(--btn-danger-hover-bg, var(--btn-danger-bg, var(--btn-bg, var(--page-bg, inherit))));
}

.btn.danger.disabled
.btn.danger:disabled
.btn.danger[disabled] {
	color: var(--btn-danger-disabled-color, var(--btn-danger-color, var(--btn-color, var(--page-color, inherit))));
	border-color: var(--btn-danger-disabled-border-color, var(--btn-danger-border-color, var(--btn-border-color, inherit)));
	background-color: var(--btn-danger-disabled-bg, var(--btn-danger-bg, var(--btn-bg, var(--page-bg, inherit))));
}

.onoffswitch {
	margin: 0;
	padding: 0;
	height: 30px;
	display: inline-block;
	position: relative;

	vertical-align: middle;
}

.onoffswitch .onoffswitch-control {
	display: none;
}

.onoffswitch .onoffswitch-button {
	width: 80px;
	height: 30px;
	display: inline-block;
	position: relative;

	cursor: pointer;

	font-size: 1rem;
	font-weight: 700;

	border: solid 1px var(--sw-border-color, inherit);
	background-color: var(--sw-bg, inherit);

	transition: all 0.3s ease;
}

.onoffswitch.disabled .onoffswitch-button,
.onoffswitch:disabled .onoffswitch-button,
.onoffswitch[disabled] .onoffswitch-button {
	border-color: var(--sw-disabled-border-color, var(--sw-border-color, inherit));
	background-color: var(--sw-disabled-bg, var(--sw-bg, inherit));

	cursor: default;
}

.onoffswitch .onoffswitch-button::before {
	content: "OFF";

	top: 2px;
	left: 40px;
	width: 36px;
	height: 24px;
	padding: 0px 4px;
	display: flex;
	position: absolute;

	align-items: center;

	color: var(--sw-off-color, var(--sw-on-color, inherit));
	background-color: var(--sw-off-bg, var(--sw-on-bg, var(--sw-bg, inherit)));

	transition: all 0.3s ease;
}

.onoffswitch.disabled .onoffswitch-button::before,
.onoffswitch:disabled .onoffswitch-button::before,
.onoffswitch[disabled] .onoffswitch-button::before {
	color: var(--sw-off-disabled-color, var(--sw-on-disabled-color, var(--sw-off-color, var(--sw-on-color, inherit))));
	background-color: var(--sw-off-disabled-bg, var(--sw-on-disabled-bg, var(--sw-off-bg, var(--sw-on-bg, var(--sw-bg, inherit)))));
}

.onoffswitch .onoffswitch-control:checked + .onoffswitch-button::before {
	content: "ON";

	left: 2px;
	padding-left: 7px;

	color: var(--sw-on-color, var(--sw-off-color, inherit));
	background-color: var(--sw-on-bg, var(--sw-off-bg, var(--sw-bg, inherit)));
}

.onoffswitch.disabled .onoffswitch-control:checked + .onoffswitch-button::before,
.onoffswitch:disabled .onoffswitch-control:checked + .onoffswitch-button::before,
.onoffswitch[disabled] .onoffswitch-control:checked + .onoffswitch-button::before {
	color: var(--sw-on-disabled-color, var(--sw-off-disabled-color, var(--sw-on-color, var(--sw-off-color, inherit))));
	background-color: var(--sw-on-disabled-bg, var(--sw-off-disabled-bg, var(--sw-on-bg, var(--sw-off-bg, var(--sw-bg, inherit)))));
}

.datepicker.input-group .form-control,
.datepicker.input-group .input-group-text {
	height: 36px;

	color: var(--dp-color, var(--page-color, inherit));
	border-color: var(--dp-border-color, inherit);
	background-color: var(--dp-bg, var(--page-bg, inherit));
}

.datepicker.input-group.disabled .form-control,
.datepicker.input-group.disabled .input-group-text {
	color: #b0b0b0;
}

.datepicker.datepicker-dropdown {
	background-color: var(--dp-dropdown-bg, var(--dp-bg, inherit));
	background-image: none;
}

.datepicker.dropdown-menu {
	border-color: var(--dp-dropdown-border-color, var(--dp-border-color, inherit));
}

/* .datepicker.dropdown-menu::before {
	border-color: var(--dp-bg, var(--page-bg, inherit));
} */

.datepicker.datepicker-dropdown th.prev,
.datepicker.datepicker-dropdown th.next,
.datepicker.datepicker-dropdown th.datepicker-switch,
.datepicker.datepicker-dropdown .datepicker-days .day,
.datepicker.datepicker-dropdown .datepicker-months .month,
.datepicker.datepicker-dropdown .datepicker-years .year {
	color: var(--dp-dropdown-color, var(--dp-color, var(--page-color, inherit)));
}

.datepicker.datepicker-dropdown th.prev:hover,
.datepicker.datepicker-dropdown th.next:hover,
.datepicker.datepicker-dropdown th.datepicker-switch:hover,
.datepicker.datepicker-dropdown .datepicker-days .day:hover,
.datepicker.datepicker-dropdown .datepicker-months .month:hover,
.datepicker.datepicker-dropdown .datepicker-years .year:hover {
	color: var(--dp-dropdown-hover-color, var(--dp-dropdown-color, var(--dp-color, var(--page-color, inherit))));
	background-color: var(--dp-dropdown-hover-bg, var(--dp-dropdown-bg, var(--dp-bg, var(--page-bg, inherit))));
	background-image: none;
}

.datepicker.datepicker-dropdown .datepicker-days .day.active,
.datepicker.datepicker-dropdown .datepicker-days .day.active:hover,
.datepicker.datepicker-dropdown .datepicker-months .month.active,
.datepicker.datepicker-dropdown .datepicker-months .month.active:hover,
.datepicker.datepicker-dropdown .datepicker-years .year.active,
.datepicker.datepicker-dropdown .datepicker-years .year.active:hover {
	color: var(--dp-dropdown-active-color, var(--dp-dropdown-hover-color, var(--dp-dropdown-color, var(--dp-color, var(--page-color, inherit)))));
	background-color: var(--dp-dropdown-active-bg, var(--dp-dropdown-hover-bg, var(--dp-dropdown-bg, var(--dp-bg, var(--page-bg, inherit)))));
	background-image: none;
}

.list {
	width: 100%;
	/* border: 1px solid var(--list-border-color, transparent);
	border-radius: 6px; */
}

.list > .item {
	width: 100%;
	height: 38px;
}

.list > .item + .item {
	margin-top: 1px;
}

.list > .item.header,
.list > .item.footer {
	font-weight: 700;

	color: inherit;
	border: 1px solid transparent;
	background-color: inherit;
}

.list > .item.header {
	color: var(--list-header-color, var(--list-color, inherit));
	border-color: var(--list-header-border-color, var(--list-border-color, inherit));
	background-color: var(--list-header-bg, var(--list-bg, inherit));
}

.list > .item.footer {
	color: var(--list-footer-color, var(--list-header-color, var(--list-color, inherit)));
	border-color: var(--list-footer-border-color, var(--list-header-border-color, var(--list-border-color, inherit)));
	background-color: var(--list-footer-bg, var(--list-header-bg, var(--list-bg, inherit)));
}

.list > .item.body {
	color: var(--list-item-color, var(--list-color, inherit));
	background-color: var(--list-item-bg, var(--list-bg, inherit));
}

.list > .item.body.alt {
	color: var(--list-item-alt-color, var(--list-item-color, var(--list-color, inherit)));
	background-color: var(--list-item-alt-bg, var(--list-item-bg, var(--list-bg, inherit)));
}

.list > .item .subitem {
	padding: 0px 5px;
	text-align: left;

	flex-grow: 1;
	-webkit-flex-grow: 1;
}

.list > .line {
	color: inherit;
	width: 100%;
	height: 36px;
	margin-bottom: 2px;

	border: none;
	border-bottom: 1px solid var(--list-item-line-color, var(--line-color, inherit));
}

.icon-view {
	padding: 5px;
	display: flex;

	gap: 20px;
	flex-wrap: wrap;
	flex-direction: row;
}

.icon-view .item {
	height: 64px;
	border: 1px solid var(--icon-border-color, inherit);
	text-align: center;
	background-color: var(--icon-bg, inherit);
}

.icon-view .item:hover {
	border-color: var(--icon-hover-border-color, var(--icon-border-color, inherit));
	background-color: var(--icon-hover-bg, var(--icon-bg, inherit));
}

.icon-view .item .item-icon {
	width: 64px;
	height: 64px;
}

.icon-view .item .item-text {
	width: 250px;
	height: 64px;
	overflow: hidden;
}

.icon-view .link {
	color: var(--icon-color, inherit);

	cursor: pointer;
	text-decoration: none;
}

.icon-view .link:hover {
	color: var(--icon-hover-color, var(--icon-color, inherit));
}

.card {
	color: var(--card-color, inherit);
	border-color: var(--card-border-color, inherit);
	background-color: var(--card-bg, inherit);
}

.pagination {
	margin-top: 10px;
	margin-right: 21px;
}

.pagination .page-link {
	font-size: 0.8rem;

	min-width: 25px;
	max-width: 42px;
	padding-left: 0px;
	padding-right: 0px;

	color: var(--pagination-item-color, inherit);
	border-color: var(--pagination-item-border-color, inherit);
	background-color: var(--pagination-item-bg, infinite);
}

.pagination .page-link.pageno {
	min-width: 42px;
}

.pagination .page-item.disabled .page-link {
	color: lightgray;
}

.pagination .page-link:hover {
	color: var(--pagination-item-hover-color, var(--pagination-item-color, inherit));
	border-color: var(--pagination-item-hover-border-color, var(--pagination-item-border-color, inherit));
	background-color: var(--pagination-item-hover-bg, var(--pagination-item-bg, infinite));
}

/* .pagination .page-link:focus,
.pagination .page-link:active {
	outline: none !important;
} */

.pagination .page-link.active {
	color: var(--pagination-item-active-color, var(--pagination-item-color, inherit));
	border-color: var(--pagination-item-active-border-color, var(--pagination-item-border-color, inherit));
	background-color: var(--pagination-item-active-bg, var(--pagination-item-bg, infinite));
}

.box,
.progress,
.message-box {
	margin: 0px;
	padding: 0px;
}

.box,
.progress,
.message-box {
	min-width: 300px;
	min-height: 160px;
}

.progress.bg-transparent {
	background-color: transparent;
}

.box,
.progress {
	padding: 10px;
	
	color: var(--mgsbox-color, var(--page-color, inherit));
	background-color: var(--msgbox-bg, var(--page-bg, inherit));
}

.box.border,
.progress.border {
	border: 1px solid var(--mgsbox-border-color, inherit);
}

.box.alert {
	color: var(--mgsbox-alert-color, var(--mgsbox-color, var(--page-color, inherit)));
	background-color: var(--msgbox-alert-bg, var(--msgbox-bg, var(--page-bg, inherit)));
}

.box.border.alert {
	border-color: var(--mgsbox-alert-border-color, var(--mgsbox-border-color, inherit));
}

.message-box .message {
	padding: 10px;
}

.box .text,
.message-box .message-text {
	line-height: 30px;
}

.box .text + .text,
.message-box .message-text + .message-text {
	margin-top: 5px;
}

.box .text::before,
.message-box .message-text::before {
	font-size: 2em;
	font-family: var(--fa-style-family, "Font Awesome 6 Free");

	text-align: center;
	margin-right: 10px;
	vertical-align: middle;
}

.box .text:not(:only-child)::before,
.message-box .message-text:not(:only-child)::before {
	display: block;
	margin-right: 0px;
}

.box .text:first-child::before,
.message-box .message-text:first-child::before {
	content: "\f05a";

	margin-bottom: 5px;

	color: var(--sidebar-item-icon-color, var(--mgsbox-color, var(--page-color, inherit)));
}

.box.question .text:first-child::before,
.message-box.question .message-text:first-child::before {
	content: "\f059";
}

.box.alert .text:first-child::before,
.message-box.alert .message-text:first-child::before {
	content: "\f057";

	color: var(--mgsbox-alert-color, var(--mgsbox-color, var(--page-color, inherit)));
}

.progress .text {
	font-size: 1rem;
}

.progress > .text + .spinner-border {
	margin-top: 20px;
}

.spinner,
.progress .spinner-border {
	color: var(--progress-color, var(--page-color, inherit));
}

.message-box > .action {
	min-height: 60px;
}

.message-box.alert .message-text {
	color: var(--mgsbox-alert-color, var(--mgsbox-color, var(--page-color, inherit)));
}

.message-notice .notice-text {
	width: 100%;
	padding: 5px 10px;
	font-size: 1rem;
	text-align: left;
	line-height: 1.6rem;

	color: var(--notice-color, var(--mgsbox-color, var(--page-color, inherit)));
	border: none;
	background-color: var(--notice-bg, var(--msgbox-bg, var(--page-bg, inherit)));
}

.message-notice .notice-text.border {
	border: 1px solid var(--notice-border-color, var(--mgsbox-border-color, inherit)) !important;
}

.message-notice .notice-text.alert {
	color: var(--notice-alert-color, var(--mgsbox-alert-color, var(--notice-color, var(--mgsbox-color, var(--page-color, inherit)))));
	border-color: var(--notice-alert-border-color, var(--mgsbox-alert-border-color, var(--notice-border-color, var(--mgsbox-border-color, inherit)))) !important;
	background-color: var(--notice-alert-bg, var(--msgbox-alert-bg, var(--notice-bg, var(--msgbox-bg, var(--page-bg, inherit)))));
}

.message-notice .notice-text .icon {
	color: var(--notice-icon-color, var(--sidebar-icon-color, var(--page-color, inherit)));
}

.message-status .status-text {
	width: 100%;
	margin: 0px;
	padding: 5px 10px;
	font-size: 0.9rem;
	text-align: center;

	color: var(--status-color, var(--page-color, inherit));
	border: 1px solid var(--status-border-color, inherit);
	background-color: var(--status-bg, var(--page-bg, inherit));
}

.message-status .status-text.alert {
	color: var(--status-alert-color, var(--status-color, var(--page-color, inherit)));
	border: 1px solid var(--status-alert-border-color, var(--status-border-color, inherit));
	background-color: var(--status-alert-bg, var(--status-bg, var(--page-bg, inherit)));
}

.message-status .status-progress {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0px auto;
	font-size: 0.6rem;

	color: var(--progress-color, var(--page-color, inherit));
}

.form-check-input {
	width: 15px;
	height: 15px;
	margin-top: 7px;
}

.form-check-label {
	margin-top: 0;
	padding-top: 0;
	height: 30px;
}

.form-check-input + .form-check-label {
	margin-left: 5px;
}

.input-group {
	margin: 0;
	padding: 0;
}

.row {
	margin: 0;
	padding: 0;
}

.row > * {
	margin: 0;
	padding: 0;
}

.blink {
	animation: 1s linear infinite blinker;
}

.text-highlight {
	background-color: var(--txt-highlight, #ffee00);
}

@keyframes blinker {
	0% {
		visibility: hidden;
	}

	50% {
		visibility: hidden;
	}

	100% {
		visibility: visible;
	}
}

.wrapper {
	width: 100%;
	margin: 0px auto;
	padding: var(--wrapper-padding, 2px);
	overflow: visible;
	position: relative;
	min-width: var(--wrapper-min-width, 480px);
	max-width: var(--wrapper-max-width, 1280px);
	min-height: 100vh;

	background-color: var(--wrapper-bg, var(--page-bg, inherit));

	box-shadow: var(--wrapper-box-shadow, inset 0px 0px 5px 0px var(--wrapper-box-shadow-color, inherit));
	-o-box-shadow: var(--wrapper-box-shadow, inset 0px 0px 5px 0px var(--wrapper-box-shadow-color, inherit));
	-moz-box-shadow: var(--wrapper-box-shadow, inset 0px 0px 5px 0px var(--wrapper-box-shadow-color, inherit));
	-webkit-box-shadow: var(--wrapper-box-shadow, inset 0px 0px 5px 0px var(--wrapper-box-shadow-color, inherit));
}

.wrapper > .body {
	width: 100%;
	height: 100%;

	flex-grow: 1;
}

.cookie-consent {
	margin: 5px auto;
	min-width: 400px;
	max-width: 1200px;
}

.cookie-consent .toast {
	width: 100%;
	max-width: 100%;

	color: white;
	background-color: #343a40;
}

.cookie-consent .toast .text {
	font-size: 1rem;
}

.cookie-consent .toast .text a {
	color: white;
}

.cookie-consent .toast .btn {
	min-width: 80px;
}

.cookie-consent .toast .btn + .btn {
	margin-left: 10px;
}

.body .line {
	margin: 0;
	padding: 0;
}


/* modal dialog */
.modal-backdrop {
	width: 100%;
	height: 100%;

	background-color: black;
}

.modal .modal-dialog {
	max-width: 1000px;
}

.modal .modal-content {
	padding: 2px;
	min-height: 250px;

	border-color: var(--modal-border-color, page(--page-bg, inherit));
	background-color: var(--modal-border-color, page(--page-bg, inherit));

	box-shadow: var(--modal-box-shadow, inset 0px 0px 5px 0px var(--modal-box-shadow-color, var(--modal-border-color, inherit)));
	-o-box-shadow: var(--modal-box-shadow, inset 0px 0px 5px 0px var(--modal-box-shadow-color, var(--modal-border-color, inherit)));
	-moz-box-shadow: var(--modal-box-shadow, inset 0px 0px 5px 0px var(--modal-box-shadow-color, var(--modal-border-color, inherit)));
	-webkit-box-shadow: var(--modal-box-shadow, inset 0px 0px 5px 0px var(--modal-box-shadow-color, var(--modal-border-color, inherit)));
}

.modal .modal-header {
	padding: 10px;

	color: var(--modal-header-color, inherit);
	background-color: var(--modal-header-bg, inherit);
	background-image: linear-gradient(to right, var(--modal-header-bg, inherit), var(--modal-header-bg2, var(--modal-header-bg, inherit)));
	border-bottom-color: var(--modal-header-border-color, inherit);
}

.modal .modal-title {
	font-size: 1.2rem;

	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.modal .modal-header .btn-close,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active {
	box-shadow: none;
	-o-box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

.modal .modal-header + .modal-body {
	margin-top: 1px;
}

.modal .modal-body {
	padding: 0px;
	border-color: var(--modal-border-color, page(--page-bg, inherit));
	background-color: var(--modal-bg, page(--page-bg, inherit));
}


.modal .modal-body .action {
	gap: 10px;
}

.modal .modal-body .action .btn {
	min-width: 80px;
}

.modal .modal-body > .statement {
	padding: 5px;
	min-height: 300px;
}

.modal .modal-body .list .item.marked {
	background-color: var(--list-item-selected-bg, inherit);
}
/* ------------ */


/* header */
.header {
	color: inherit;
	position: relative;
}

.header .header-banner {
	min-width: var(--sidebar-max-width);
	text-align: center;
	background-color: var(--header-banner-bg, inherit);
}

.header .header-banner .image {
	width: 90px;
	height: 90px;
}

.header .header-title {
	font-size: 30px;
	position: relative;
	background-color: var(--header-title-bg, inherit);
	background-image: linear-gradient(to right, var(--header-title-bg, inherit), var(--header-title-bg2, var(--header-title-bg, inherit)));
}

.header .header-title .title {
	text-align: left;
	font-weight: 700;
	line-height: 35px;

	color: var(--header-title-color, inherit);
}

.header .header-title .title.thainame {
	font-size: 1em;
}

.header .header-title .title.engname {
	font-size: 0.8em;
}

.header .header-title .title.address {
	font-size: 0.6em;
}

.header .header-message {
	top: 3px;
	right: 3px;
	position: absolute;

	font-size: 0.9rem;
	font-weight: normal;
}

.header .header-message > * {
	min-width: 150px;

	color: var(--header-message-color, inherit);
	opacity: 0.7;
	background-color: var(--header-message-bg, inherit);

	padding: 0px 5px;
	text-align: center;

	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.header .header-message > *:hover {
	opacity: 1;
}

.header .header-message > * * {
	color: inherit;
	background-color: transparent;
}

.header .header-message > * + * {
	margin-top: 3px;
}

.header .header-message > .lastupdate.alert {
	margin-bottom: 0;
	background-color: red;

	border-radius: 0;
	-o-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

.header .header-message > .home-link a,
.header .header-message > .oldversion-link a {
	text-decoration: none;
}

.header .header-message > .message.info .message-info {
	min-width: 50px;
	text-align: left;
}

.header .header-message > .message.info .message-info.name {
	text-align: right;
	padding-right: 5px;

	flex-grow: 1;
}

.header .header-message > .message.info .message-info.value {
	width: 80px;
}
/* ------ */


/* body */
.body .body-sidebar {
	width: var(--sidebar-max-width);
	min-width: var(--sidebar-max-width);
	max-width: var(--sidebar-max-width);
	margin-top: 0;
	text-align: left;

	color: var(--sidebar-color, inherit);
	background-color: var(--sidebar-bg, inherit);

	box-shadow: var(--sidebar-box-shadow, inset -5px 0px 5px -6px var(--sidebar-box-shadow-color, inherit));
	-o-box-shadow: var(--sidebar-box-shadow, inset -5px 0px 5px -6px var(--sidebar-box-shadow-color, inherit));
	-moz-box-shadow: var(--sidebar-box-shadow, inset -5px 0px 5px -6px var(--sidebar-box-shadow-color, inherit));
	-webkit-box-shadow: var(--sidebar-box-shadow, inset -5px 0px 5px -6px var(--sidebar-box-shadow-color, inherit));

}

.body .sidebar-profile {
	padding: 10px 0;
}

.body .sidebar-profile .profile-image {
	width: 128px;
	height: 128px;

	/* border: 1px solid var(--sidebar-box-shadow-color, inherit); */
	border: 1px solid #eeeeee;
	background-color: #ffffff;
	
	border-radius: var(--sidebar-profile-image-border-radius, 50%);
	-o-border-radius: var(--sidebar-profile-image-border-radius, 50%);
	-moz-border-radius: var(--sidebar-profile-image-border-radius, 50%);
	-webkit-border-radius: var(--sidebar-profile-image-border-radius, 50%);
}

.body .sidebar-profile .profile-text {
	padding-top: 5px;
	font-weight: 700;

	color: var(--sidebar-profile-text-color, inherit);
	background-color: var(--sidebar-profile-text-bg, inherit);
}

.body .sidebar-menu {
	padding: 0px 5px 0px 5px;
}

.body .sidebar-menu .menu-item {
	height: 45px;
	list-style: none;

	color: var(--sidebar-item-color, inherit);
	background-color: var(--sidebar-item-bg, inherit);
}

.body .sidebar-menu .menu-item.separator {
	height: auto;
	margin: 5px 0px 10px 5px;
}

.body .sidebar-menu .menu-item .item-link {
	height: 34px;
	padding-top: 3px;

	cursor: pointer;
	text-decoration: none;

	color: var(--sidebar-item-color, inherit);
	background-color: var(--sidebar-item-bg, inherit);
}

.body .sidebar-menu .menu-item.disabled .item-link {
	color: lightgray;
	cursor: unset;
}

.body .sidebar-menu .menu-item:not(.disabled):not(.expand) .item-link:hover {
	color: var(--sidebar-item-hover-color, var(--sidebar-item-color, inherit));
	background-color: var(--sidebar-item-hover-bg, var(--sidebar-item-bg, inherit));

	box-shadow: var(--sidebar-item-hover-shadow, 0px 0px 10px 2px var(--sidebar-item-hover-box-shadow-color, inherit));
	-o-box-shadow: var(--sidebar-item-hover-shadow, 0px 0px 10px 2px var(--sidebar-item-hover-box-shadow-color, inherit));
	-moz-box-shadow: var(--sidebar-item-hover-shadow, 0px 0px 10px 2px var(--sidebar-item-hover-box-shadow-color, inherit));
	-webkit-box-shadow: var(--sidebar-item-hover-shadow, 0px 0px 10px 2px var(--sidebar-item-hover-box-shadow-color, inherit));
}

.body .sidebar-menu .menu-item:not(.disabled) .item-link.active {
	font-weight: 700;
}

.body .sidebar-menu .menu-item .item-link {
	position: relative;
}

.body .sidebar-menu .menu-item .item-link .item-icon::after {
	content: "";
	font-size: 0.7em;
	font-family: var(--fa-style-family, "Font Awesome 6 Free");

	top: 12px;
	left: 9px;
	display: block;
	z-index: 1000;
	position: absolute;
	background-color: var(--sidebar-bg, inherit);
}

.body .sidebar-menu .menu-item.loginhistory .item-link .item-icon::after {
	content: "\f023";
}

.body .sidebar-menu .menu-item.passwordhistory .item-link .item-icon::after {
	content: "\f084";
}

.body .sidebar-menu .menu-item.transferhistory .item-link .item-icon::after {
	content: "\f0aa";
}

.body .sidebar-menu .menu-item .item-link.trial-use .item-icon::after {
	content: "\f023";

	left: 20px;
	color: #ff0800;
}

.body .sidebar-menu .menu-item .item-icon {
	width: 40px;
	display: d-inline-block;
	font-size: 20px;

	color: var(--sidebar-item-icon-color, var(--sidebar-item-color, inherit));
}

.body .sidebar-menu .menu-item.disabled .item-icon {
	color: lightgray;
}

.body .sidebar-menu .menu-item.separator .item-icon {
	display: none;
}

.body .sidebar-menu .menu-item.separator .item-text {
	font-size: 1.1rem;
	font-weight: 700;
}

.body .body-content {
	padding: 5px var(--content-padding-r) 5px var(--content-padding-l);

	color: var(--content-color, inherit);
}

.body .content-header {
	height: 40px;
	padding: 0px 5px;

	font-size: 1.2rem;
	
	color: var(--content-header-color, inherit);
	background-color: var(--content-header-bg, inherit);
	background-image: linear-gradient(to right, var(--content-header-bg, inherit), var(--content-header-bg2, var(--content-header-bg, inherit)));
}

.body .content-body {
	padding: 10px var(--content-body-padding-r) 0px var(--content-body-padding-l);
}

.body .content-body > .body {
	width: 100%;
	height: 100%;
	min-width: calc(var(--wrapper-min-width) - (var(--wrapper-padding) * 2) - var(--sidebar-min-width) - var(--content-padding-l) - var(--body-padding-l) - var(--content-body-padding-r) - var(--body-content-padding-r));
	/* min-width: 381px; */
	max-width: calc(var(--wrapper-max-width) - (var(--wrapper-padding) * 2) - var(--sidebar-max-width) - var(--content-padding-l) - var(--body-padding-l) - var(--content-body-padding-r) - var(--body-content-padding-r));
	/* max-width: 1041px; */
	margin-right: 20px;

	color: inherit;
	flex-grow: 1;
}
/* ------- */


/* footer */
.footer {
	text-align: center;

	color: var(--footer-color, inherit);
}

.footer .footer-space {
	width: var(--sidebar-max-width);
	min-width: var(--sidebar-min-width);
	max-width: var(--sidebar-max-width);

	background-color: var(--sidebar-bg, inherit);
}

.footer .footer-content {
	color: var(--footer-color, var(--sidebar-color, inherit));
	background-color: var(--footer-bg, var(--sidebar-bg, inherit));
	background-image: linear-gradient(to right, var(--footer-bg, var(--sidebar-bg, inherit)), var(--footer-bg2, var(--footer-bg, var(--sidebar-bg, inherit))), var(--footer-bg2, var(--footer-bg, var(--sidebar-bg, inherit))), var(--footer-bg, var(--sidebar-bg, inherit)));
}

.footer .content-copyright {
	font-size: 0.8rem;
	line-height: 30px;
}

.footer .content-copyright a {
	color: var(--footer-color, var(--sidebar-color, inherit));
	text-decoration: none;
}
/* --------- */


/* error page */
#error > .box {
	max-height: 200px;
	margin-top: 10vh;
}

#error > .box > .text {
	line-height: 36px;
}
/* ---------- */


/* login page */
#login > .card {
	width: var(--login-card-width);
	height: fit-content;
	padding: 20px var(--login-card-padding-lr);
	margin-top: 10vh;

	color: var(--login-card-color, var(--card-color, inherit));
	border-color: var(--login-card-border-color, var(--card-border-color, inherit));
	background-color: var(--login-card-bg, var(--card-bg, inherit));
	
	box-shadow: var(--login-card-box-shadow, 0px 20px 30px var(--login-card-box-shadow-color, var(--card-box-shadow-color, inherit)));
	-o-box-shadow: var(--login-card-box-shadow, 0px 20px 30px var(--login-card-box-shadow-color, var(--card-box-shadow-color, inherit)));
	-moz-box-shadow: var(--login-card-box-shadow, 0px 20px 30px var(--login-card-box-shadow-color, var(--card-box-shadow-color, inherit)));
	-webkit-box-shadow: var(--login-card-box-shadow, 0px 20px 30px var(--login-card-box-shadow-color, var(--card-box-shadow-color, inherit)));
}

#login > .card .card-title > .title-logo img {
	height: calc((var(--login-card-width) -  (var(--login-card-padding-lr) * 2)) / var(--logo-width-height-ratio));
	max-height: var(--login-logo-max-height);
}

#login > .card .card-title > .title-text {
	font-size: 1.2rem;
	font-weight: bold;
}

#login > .card .card-body {
	min-height: 180px;
}

#login > .card .card-title > *,
#login > .card .card-body > * {
	width: 100%;
}

#login > .card .card-title,
#login > .card .card-body,
#login > .card .card-body > .input,
#login > .card .card-body > .action {
	gap: 10px;
	padding: 0;
}

#login > .card .card-body > .input > div,
#login > .card .card-body > .input .form-control,
#login > .card .card-body > .action .btn {
	width: 100%;
	height: 36px;
}

#login > .card .card-body > .input .revealpassword {
	float: right;
	color: #555555;
	position: relative;
	margin-top: -25px;
	margin-right: 5px;
}

#login > .card .card-body > .action .btn {
	height: 40px;
}

#login > .message {
	top: 3px;
	right: 3px;
	position: absolute;

	font-size: 0.9rem;
	font-weight: normal;
}

#login > .message * {
	min-width: 150px;

	color: var(--header-message-color, inherit);
	background-color: var(--header-message-bg, inherit);
}

#login > .message > * {
	opacity: 0.7;
	padding: 0px 5px;
	text-align: center;

	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#login > .message > *:hover {
	opacity: 1;
}

#login > .message > * + * {
	margin-top: 3px;
}

#login > .message > .lastupdate.alert {
	margin-bottom: 0;
	background-color: red;

	border-radius: 0;
	-o-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
/* ---------- */


/* logout page */
#logout > .progress {
	max-height: 200px;
	margin-top: 10vh;
}
/* ---------- */


/* forget password page */
#forgetpassword .card {
	--card-box-shadow: 0px 20px 30px var(--forgetpwd-card-box-shadow-color, var(--login-card-box-shadow-color, var(--card-border-color, inherit)));

	width: var(--forgetpwd-card-width, var(--login-card-width));
	height: fit-content;
	padding: 20px var(--forgetpwd-card-padding-lr, var(--login-card-padding-lr));
	margin-top: 10vh;

	color: var(--forgetpwd-color, var(--login-card-color, inherit));
	background-color: var(--forgetpwd-bg, var(--login-card-bg, inherit));

	box-shadow: var(--card-box-shadow, none);
	-o-box-shadow: var(--card-box-shadow, none);
	-moz-box-shadow: var(--card-box-shadow, none);
	-webkit-box-shadow: var(--card-box-shadow, none);
}

#forgetpassword > .card .card-title .title-logo img {
	height: calc((var(--forgetpwd-card-width, var(--login-card-width)) -  (var(--forgetpwd-card-padding-lr, var(--login-card-padding-lr)) * 2)) / var(--logo-width-height-ratio));
	max-height: var(--forgetpwd-logo-max-height, var(--login-logo-max-height));
}

#forgetpassword > .card .card-title .title-text {
	font-size: 1.2rem;
	font-weight: bold;
}

#forgetpassword > .card .card-body {
	min-height: 180px;
}

#forgetpassword > .card .card-title > *,
#forgetpassword > .card .card-body > * {
	width: 100%;
}

#forgetpassword > .card .card-title,
#forgetpassword > .card .card-body,
#forgetpassword > .card .card-body .input,
#forgetpassword > .card .card-body .action {
	gap: 10px;
	padding: 0;
}

#forgetpassword > .card .card-body .input .form-control,
#forgetpassword > .card .card-body .action .btn {
	width: 100%;
	height: 36px;
}

#forgetpassword > .card .card-body .action .btn {
	height: 40px;
}

#forgetpassword > .message {
	top: 3px;
	right: 3px;
	position: absolute;

	font-size: 0.9rem;
	font-weight: normal;
}

#forgetpassword > .message * {
	color: var(--header-message-color, inherit);
	background-color: var(--header-message-bg, inherit);
}

#forgetpassword > .message > * {
	padding: 0px 5px;
	text-align: center;
}

#forgetpassword > .message > * + * {
	margin-top: 3px;
}

#forgetpassword > .message > .lastupdate.alert {
	margin-bottom: 0;
	background-color: red;

	border-radius: 0;
	-o-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
/* ---------- */


/* member info page */
#memberinfo > .row {
	gap: 20px;
}

#memberinfo > .row + .row {
	margin-top: 20px;
}

#memberinfo > .row > .column {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#memberinfo > .row .info {
	width: 100%;
}

#memberinfo > .row .info.memberno {
	min-width: 60px;
	max-width: 100px;
}

#memberinfo > .row .info.membername {
	min-width: 280px;
}

#memberinfo > .row .info.cardid {
	min-width: 150px;
}

#memberinfo > .row .info.birthdate {
	min-width: 100px;
	max-width: 150px;
}

#memberinfo > .row .info.age {
	min-width: 90px;
	max-width: 120px;
}

#memberinfo > .row .info.department {
	min-width: 340px;
}

#memberinfo > .row .info.location {
	min-width: 40px;
	max-width: 40px;
}

#memberinfo > .row .info.unit {
	min-width: 380px;
}

#memberinfo > .row .info.jobposition {
	min-width: 380px;
}

#memberinfo > .row .info.salary {
	min-width: 120px;
	max-width: 160px;
}

#memberinfo > .row .info.positionallowance {
	min-width: 120px;
	max-width: 160px;
}

#memberinfo > .row .info.otherincome {
	min-width: 100px;

	display: none;
}

#memberinfo > .row .info.address,
#memberinfo > .row .info.presentaddress,
#memberinfo > .row .info.permanentaddress {
	min-width: 380px;
}

#memberinfo > .row .info.telephone {
	min-width: 380px;
}

#memberinfo > .row .info.email {
	min-width: 380px;
}

#memberinfo > .row .info.memberdate {
	min-width: 100px;
	max-width: 140px;
}

#memberinfo > .row .info.membertype {
	min-width: 260px;
}

#memberinfo > .row .info.memberperiod {
	min-width: 120px;
	max-width: 140px;
}

#memberinfo > .row .info.memberstatus {
	min-width: 120px;
}

#memberinfo > .row .info.resigndate {
	min-width: 100px;
	max-width: 140px;
}

#memberinfo > .row .info.share {
	min-width: 140px;
}

#memberinfo > .row .info.sharemonthlyamount {
	min-width: 100px;
	max-width: 150px;
}

#memberinfo > .row .info.cumulativeint {
	min-width: 100px;
	max-width: 150px;
}

#memberinfo > .row .info.monthlybillingtype {
	min-width: 380px;
}

#memberinfo > .row .info.dividendpaidtype {
	min-width: 380px;
}
/* ---------- */


/* deposit account page */
#depositaccount > .row {
	gap: 20px;
}

#depositaccount > .row + .row {
	margin-top: 20px;
}

#depositaccount > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#depositaccount > .row .column .account-book {
	width: 100%;
	margin: 0;
	padding: 0px 15px 5px;
	min-height: 300px;
}

#depositaccount > .row .column .account-book .line {
	height: 40px;
}

#depositaccount > .row .column .account-book .line.header {
	padding: 0px 10px;
	margin-left: -15px;
	margin-right: -15px;

	font-size: 1.2rem;
}

#depositaccount > .row .column .account-book .line:has(.accountno) {
	font-size: 1.1rem;
}

#depositaccount > .row .column .account-book .line:has(.balanceamount) {
	font-size: 1.1rem;
}

#depositaccount > .row .column .account-book .line.body .info.accountname {
	/* max-width: 250px; */
	margin-left: 10px;
}

#depositaccount > .row .column .account-book .line.action {
	gap: 10px;
	height: auto;
	min-height: 50px;
}

#depositaccount > .row .column .account-book.type-0 .btn.depositsequence,
#depositaccount > .row .column .account-book.type-1 .btn.depositsequence,
#depositaccount > .row .column .account-book.type-5 .btn.depositsequence,
#depositaccount > .row .column .account-book.type-8 .btn.depositsequence {
	display: none;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.date,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.date {
	width: 90px;
	min-width: 90px;
	max-width: 120px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.code,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.code {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.sequence,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.sequence {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .account .list.statement.book-type-1 .subitem.sequence,
#balanceconfirm ~ .modal .modal-body .account .list.statement.book-type-1 .subitem.sequence {
	display: none;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.amount,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.amount {
	width: 100px;
	min-width: 100px;
	/* max-width: 150px; */

	text-align: right;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.withdrawint,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.withdrawint {
	display: none;
}

#depositaccount ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.withdrawint,
#balanceconfirm ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.withdrawint {
	width: 90px;
	min-width: 90px;
	max-width: 120px;

	display: block;
	text-align: right;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.balance,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.balance {
	width: 100px;
	min-width: 100px;
	/* max-width: 150px; */

	text-align: right;
}

#depositaccount ~ .modal .modal-body .account .list.statement .subitem.memo,
#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.memo {
	width: 100px;
	min-width: 100px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .depositsequence .list.statement .subitem.date {
	width: 90px;
	min-width: 90px;
	max-width: 120px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .depositsequence .list.statement .subitem.sequence {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#depositaccount ~ .modal .modal-body .depositsequence .list.statement .subitem.amount {
	width: 100px;
	min-width: 100px;
	max-width: 150px;

	text-align: right;
}

#depositaccount ~ .modal .modal-body .depositsequence .list.statement .subitem.status {
	width: 150px;
	min-width: 150px;

	text-align: center;
}
/* ---------- */


/* loan contract/request page */
#loanagreement > .row,
#loanrequest > .row {
	gap: 20px;
}

#loanagreement > .row + .row,
#loanrequest > .row + .row {
	margin-top: 20px;
}

#loanagreement > .row .column,
#loanrequest > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#loanagreement > .row .column .contract {
	min-height: 460px;
}

#loanagreement > .row .column .contract,
#loanrequest > .row .column .request {
	width: 100%;
	margin: 0;
	padding: 0px 15px 5px;
}

#loanagreement > .row .column .contract .line,
#loanrequest > .row .column .request .line {
	height: 40px;
}

#loanagreement > .row .column .contract .line.header,
#loanrequest > .row .column .request .line.header {
	padding: 0px 10px;
	margin-left: -15px;
	margin-right: -15px;

	font-size: 1.2rem;
}

#loanagreement > .row .column .contract .line:has(.balanceamount),
#loanrequest > .row .column .request .line:has(.balanceamount) {
	font-size: 1.1rem;
}

#loanagreement > .row .column .contract .line.header .info.contractno,
#loanagreement > .row .column .contract .line.header .info.contractcirculate,
#loanrequest > .row .column .request .line.header .info.requestno {
	padding-left: 10px;
}

#loanagreement > .row .column .contract .line.action,
#loanrequest > .row .column .request .line.action {
	gap: 10px;
	height: auto;
	min-height: 50px;
}

#loanrequest > .row .column .request .line .label {
	min-width: 120px;;
}

#loanagreement > .row .column .contract.type-1 .btn.collaterals,
#loanrequest > .row .column .request.type-1 .btn.collaterals {
	display: none;
}

#loanagreement > .row .column .contract.type-2 .btn.collaterals,
#loanrequest > .row .column .request.type-2 .btn.collaterals {
	display: none;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.date,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.date {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: center;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.periods,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.periods {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.amount,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.amount {
	width: 120px;
	min-width: 120px;
	max-width: 180px;

	text-align: right;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.interest,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.interest {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: right;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.totalamount,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.totalamount {
	width: 120px;
	min-width: 120px;
	max-width: 180px;

	text-align: right;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.balanceamount,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.balanceamount {
	width: 120px;
	min-width: 120px;

	text-align: right;
}

#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.receiptno,
#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.receiptno {
	width: 190px;
	min-width: 140px;
	/* max-width: 160px; */

	text-align: center;
}

#loanagreement ~ .modal .modal-body .guarantor .list.statement .subitem.memberno,
#loanrequest ~ .modal .modal-body .guarantor .list.statement .subitem.memberno {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: center;
}

#loanagreement ~ .modal .modal-body .guarantor .list.statement .subitem.membername,
#loanrequest ~ .modal .modal-body .guarantor .list.statement .subitem.membername {
	width: 300px;
	min-width: 300px;
}

#loanagreement ~ .modal .modal-body .collateral .list.statement .subitem.type,
#loanrequest ~ .modal .modal-body .collateral .list.statement .subitem.type {
	width: 120px;
	min-width: 120px;
	max-width: 150px;

	text-align: center;
}

#loanagreement ~ .modal .modal-body .collateral .list.statement .subitem.detail,
#loanrequest ~ .modal .modal-body .collateral .list.statement .subitem.detail {
	width: 160px;
	min-width: 160px;
}

#loanagreement ~ .modal .modal-body .collateral .list.statement .subitem.pawnamount,
#loanrequest ~ .modal .modal-body .collateral .list.statement .subitem.pawnamount {
	width: 120px;
	min-width: 120px;
	max-width: 160px;

	text-align: right;
}

#loanagreement ~ .modal .modal-body .icon-view .item {
	width: 220px;
}
/* ---------- */


/* loan request page */
#loanrequest > .row .column .request {
	min-height: 300px;
	/* min-height: 380px; */
}

#loanrequest > .row .column .request:has(svg.new-request) {
	max-width: 300px;
}

#loanrequest > .row .column .request svg.new-request {
	width: 150px;
	height: 150px;

	fill: #c0c0c0;
	opacity: 0.6;

	cursor: pointer;
}

#loanrequest > .row .column .request svg.new-request:hover {
	opacity: 1;
}

#loanrequest > .row.list .subitem.action {
	width: 160px;
	min-width: 160px;

	text-align: right;
	padding-right: 0;
}

#loanrequest > .row.list .subitem.action .btn {
	width: 160px;
	height: 34px;

	font-size: 0.9rem;
}

#loanrequest ~ .modal .modal-body .guarantor .list.statement .subitem.action {
	width: 200px;
	max-width: 200px;

	text-align: right;
	padding-right: 0;
}
/* ---------- */


/* loannewrequest page */
#loannewrequest > .row {
	gap: 20px;
}

#loannewrequest > .row + .row {
	margin-top: 20px;
}

#loannewrequest > .row .column {
	gap: 20px;

	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#loannewrequest > .row .column > div {
	width: 100%;
}

#loannewrequest > .row .column .memberno {
	min-width: 80px;
	max-width: 100px;
}

#loannewrequest > .row .column .membername {
	min-width: 280px;
}

#loannewrequest > .row .column .requestamount {
	min-width: 180px;
	max-width: 240px;
}

#loannewrequest > .row .column .paymenttype .d-inline:has(.form-check-input) + .d-inline:has(.form-check-input) {
	margin-left: 20px;
}

#loannewrequest > .row .column .paymentamount {
	min-width: 180px;
	max-width: 240px;
}

#loannewrequest > .row .column .paymentperiods {
	min-width: 80px;
	max-width: 120px;
}

#loannewrequest > .row.list-header + .row.list {
	margin-top: 0px;
}

#loannewrequest > .row.list .column,
#loannewrequest > .row.action .column {
	max-width: 1040px;
}

#loannewrequest > .row.list {
	gap: 0;
}

#loannewrequest > .row.list.contract .subitem {
	/* border: 1px solid red; */
}

#loannewrequest > .row.list.contract .subitem.action {
	width: 30px;
	min-width: 30px;
	max-width: 30px;

	text-align: center;
}

#loannewrequest > .row.list.contract .subitem.contractno {
	width: 140px;
	min-width: 140px;
	max-width: 180px;

	text-align: center;
}

#loannewrequest > .row.list.contract .subitem.contractdate {
	width: 120px;
	min-width: 120px;
	max-width: 150px;

	text-align: center;
}

#loannewrequest > .row.list.contract .subitem.creditamount {
	width: 120px;
	min-width: 120px;
	max-width: 180px;

	text-align: right;
}

#loannewrequest > .row.list.contract .subitem.balanceamount {
	width: 140px;
	min-width: 140px;
	max-width: 180px;

	text-align: right;
}

#loannewrequest > .row.list.guarantor .subitem.guarno {
	width: 80px;
	min-width: 80px;
	max-width: 120px;

	text-align: center;
}

#loannewrequest > .row.list.guarantor .subitem.guarname {
	width: 200px;
	min-width: 200px;
	max-width: 500px;
}

#loannewrequest > .row.list.guarantor .subitem.department {
	width: 250px;
	min-width: 250px;
}

#loannewrequest > .row.list.guarantor .subitem.action {
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	text-align: right;
	padding-right: 0;
}

#loannewrequest > .row.list.guarantor .item.body .form-control {
	height: 32px;

	font-size: 0.9rem;
}

#loannewrequest > .row.list.guarantor .subitem.action .btn {
	width: 80px;
	height: 32px;

	font-size: 0.9rem;
}

#loannewrequest > .row.action .btn {
	width: 90px;
}

#loannewrequest > .row.action .column {
	gap: 10px;
}

#loannewrequest > .row.message-notice {
	margin-top: 5px;
}

#loannewrequest > .row.message-notice .notice-text {
	font-size: 0.9rem;
}
/* ---------- */


/* guarantee page */
#guarantee {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#guarantee > .row + .row {
	margin-top: 20px;
}

#guarantee > .row.list .subitem.memberno {
	width: 80px;
	min-width: 80px;
	max-width: 100px;

	text-align: center;
}

#guarantee > .row.list .subitem.membername {
	width: 120px;
	min-width: 120px;
}

#guarantee > .row.list .subitem.contractno {
	width: 120px;
	min-width: 120px;
	max-width: 180px;

	text-align: center;
}

#guarantee > .row.list .subitem.creditamount {
	width: 120px;
	min-width: 120px;
	max-width: 180px;

	text-align: right;
}

#guarantee > .row.list .subitem.contractstatus {
	width: 120px;
	min-width: 120px;
	max-width: 150px;

	text-align: center;
}

#guarantee > .row.list .subitem.balanceamount {
	width: 140px;
	min-width: 140px;
	max-width: 180px;

	text-align: right;
}
/* ---------- */


/* beneficiary page */
#beneficiary {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#beneficiary > .row + .row {
	margin-top: 20px;
}

#beneficiary > .row.list .subitem.sequence {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#beneficiary > .row.list .subitem.memberno {
	width: 80px;
	min-width: 80px;
	max-width: 100px;

	text-align: center;
}

#beneficiary > .row.list .subitem.name {
	width: 140px;
	min-width: 140px;
}

#beneficiary > .row.list .subitem.relation {
	width: 120px;
	min-width: 120px;
	max-width: 200px;

	text-align: center;
}

#beneficiary > .row.list .subitem.benefit {
	width: 120px;
	min-width: 120px;
	max-width: 140px;

	text-align: center;
}
/* ---------- */


/* share purchase page */
#sharepurchase {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#sharepurchase > .row + .row {
	margin-top: 20px;
}

#sharepurchase > .row.list .subitem.date,
#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.date {
	width: 100px;
	min-width: 100px;
	max-width: 150px;

	text-align: center;
}

#sharepurchase > .row.list .subitem.periods,
#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.periods {
	width: 60px;
	min-width: 60px;

	text-align: center;
}

#sharepurchase > .row.list .subitem.amount,
#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.amount {
	width: 100px;
	min-width: 100px;
	max-width: 200px;

	text-align: right;
}

#sharepurchase > .row.list .subitem.balanceamount,
#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.balanceamount {
	width: 120px;
	min-width: 120px;
	max-width: 200px;

	text-align: right;
}

#sharepurchase > .row.list .subitem.receiptno,
#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.receiptno {
	width: 140px;
	min-width: 140px;
	max-width: 200px;

	text-align: center;
}
/* ---------- */


/* dividend page */
#dividend > .row {
	gap: 20px;
}

#dividend > .row + .row {
	margin-top: 20px;
}

#dividend > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#dividend > .row .column .card {
	width: 100%;
	margin: 0;
	padding: 0px 15px 5px;
}

#dividend > .row .column .card .line {
	height: 40px;
}

#dividend > .row .column .card .line.header {
	padding: 0px 10px;
	margin-left: -15px;
	margin-right: -15px;

	font-size: 1.2rem;
}

#dividend > .row .column .card.status-2 .line:nth-child(4) {
	font-size: 1.1rem;
}

#dividend > .row .column .card .line.action {
	gap: 10px;
	height: auto;
	min-height: 50px;
}

#dividend ~ .modal .modal-body .deduction .list.statement .subitem.detail {
	width: 200px;
	min-width: 200px;
}

#dividend ~ .modal .modal-body .deduction .list.statement .subitem.amount {
	width: 140px;
	min-width: 140px;
	max-width: 200px;

	text-align: right;
}
/* ---------- */


/* scholarship page */
#scholarship {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#scholarship > .row,
#scholarship ~ .modal .content > .row {
	gap: 20px;
}

#scholarship > .row.list,
#scholarship ~ .modal .content > .row.list {
	gap: 0;
}

#scholarship > .row + .row,
#scholarship ~ .modal .content > .row + .row {
	margin-top: 20px;
}

#scholarship > .row > .column,
#scholarship ~ .modal .content > .row > .column {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

@media only screen and (min-width: 1259px) {
	#scholarship > .row > .column:has(.input.remark) {
		max-width: 1040px;
	}
}

#scholarship ~ .modal .content > .row > .column {
	max-width: 450px;
}

#scholarship > .row.action > .column,
#scholarship ~ .modal .content > .row.action > .column {
	gap: 10px;
	max-width: 1040px;
}

#scholarship ~ .modal .content > .row.action > .column,
#scholarship ~ .modal .content > .row.message-status > .column {
	max-width: 920px;
}

#scholarship > .row > .column > .info,
#scholarship > .row > .column > .input,
#scholarship ~ .modal .content > .row > .column > .info,
#scholarship ~ .modal .content > .row > .column > .input {
	width: 100%;
}

#scholarship.apply > .row > .column > .info.memberno {
	min-width: 60px;
	max-width: 100px;
}

#scholarship.apply > .row > .column > .info.salary {
	min-width: 120px;
	max-width: 160px;
}

#scholarship.apply > .row > .column > .info.positionallowance {
	min-width: 120px;
	max-width: 160px;
}

#scholarship.apply > .row > .column > .input.paymenttype {
	min-width: 200px;
	max-width: 250px;
}

#scholarship.apply > .row > .column > .input.accountno {
	min-width: 150px;
	max-width: 200px;
}

#scholarship.apply > .row > .column > .input.gpa {
	min-width: 80px;
	max-width: 80px;

	text-align: center;
}

#scholarship.apply ~ .modal .addchildren.content > .row > .column .input.cardid {
	min-width: 150px;
	max-width: 200px;
}

#scholarship.apply ~ .modal .addchildren.content > .row > .column .input.birthdate {
	min-width: 160px;
	max-width: 160px;
}

#scholarship.apply ~ .modal .editscholarshipchild.content > .row > .column .input.gpa {
	min-width: 80px;
	max-width: 80px;
}

#scholarship > .row.list-header + .row.list {
	margin-top: 0;
}

#scholarship > .row.list .subitem {
	width: 100%;
}

#scholarship > .row.list .subitem.date {
	min-width: 100px;
	max-width: 100px;

	text-align: center;
}

#scholarship > .row.list .subitem.event {
	min-width: 120px;
}

#scholarship > .row.list .subitem.type {
	min-width: 120px;
	max-width: 300px;
}

#scholarship > .row.list .subitem.status {
	min-width: 100px;
	max-width: 150px;

	text-align: center;
}

#scholarship > .row.list .subitem.action {
	min-width: 140px;
	max-width: 140px;
	padding-left: 0;
	padding-right: 0;

	text-align: right;
}

#scholarship > .row.list .subitem.action .btn {
	height: 32px;
	min-width: 60px;

	font-size: 0.9rem;
}

#scholarship > .row.list .subitem.action .btn.add,
#scholarship > .row.list .subitem.action .btn.detail {
	min-width: 130px;
}

#scholarship > .row.list .subitem.action .btn + .btn {
	margin-left: 10px;
}

#scholarship > .row.action .btn {
	min-width: 100px;

	font-size: 0.9rem;
}

#scholarship ~ .modal .content {
	padding: 10px;
}

#scholarship.apply > .row.list .subitem.childrenname {
	min-width: 180px;
	max-width: 360px;
}

#scholarship.apply > .row.list .subitem.academy {
	min-width: 200px;
}

#scholarship.apply > .row.list .subitem.educationleveldesc {
	min-width: 150px;
	max-width: 200px;

	text-align: center;
}

#scholarship.apply > .row.list .subitem.gpa {
	min-width: 80px;
	max-width: 100px;

	text-align: center;
}

#scholarship.apply > .row.list .subitem.action .btn.detail {
	min-width: 100px;
}

@media only screen and (max-width: 949.98px) {
	#scholarship.apply ~ .modal > .modal-dialog {
		max-width: 470px !important;
	}
}

#scholarship.children > .row.list .subitem.childrenid {
	min-width: 70px;
	max-width: 80px;

	text-align: center;

	display: none;
}

#scholarship.children > .row.list .subitem.childrenname {
	min-width: 180px;
	max-width: 400px;
}

#scholarship.children > .row.list .subitem.cardid {
	min-width: 150px;
	max-width: 200px;

	text-align: center;
}

#scholarship.children > .row.list .subitem.birthdate {
	min-width: 100px;
	max-width: 100px;

	text-align: center;
}

#scholarship.children > .row.list .subitem.document {
	min-width: 150px;
	max-width: 300px;

	display: none;
}

#scholarship.children > .row.list .subitem.remark {
	min-width: 150px;
	/* max-width: 300px; */
}

#scholarship.children > .row.list .subitem.action {
	min-width: 70px;
	max-width: 80px;
}
/* ---------- */


/* scholarship apply page */
/* #scholarship.apply > .row {
	gap: 20px;
} */

/* #scholarship.apply > .row > .column {
	min-width: 380px;
	max-width: 510px;
}

#scholarship.apply > .row.action > .column,
#scholarship.apply ~ .modal .content > .row.action > .column {
	max-width: 1040px;
} */

/* #scholarship.apply > .row .info.memberno {
	min-width: 60px;
	max-width: 100px;
}

#scholarship.apply > .row .info.membername {
	min-width: 280px;
}

#scholarship.apply > .row .info.department {
	min-width: 340px;
}

#scholarship.apply > .row .info.jobposition {
	min-width: 380px;
}

#scholarship.apply > .row .info.salary {
	min-width: 120px;
	max-width: 160px;
}

#scholarship.apply > .row .info.positionallowance {
	min-width: 120px;
	max-width: 160px;
}

#scholarship.apply > .row .input.paymenttype {
	min-width: 250px;
	max-width: 250px;
}

#scholarship.apply > .row .input.accountno {
	min-width: 150px;
	max-width: 180px;
}

#scholarship.apply > .row .input.accountno .form-control {
	text-align: center;
} */

/* #scholarship.apply > .row.list-header + .row.list {
	margin-top: 0px;
} */

/* #scholarship.apply > .row.list .column,
#scholarship.apply > .row.action .column {
	max-width: 1040px;
}

#scholarship.apply > .row.list {
	gap: 0;
}
 */
/* #scholarship.apply > .row.list .item .subitem.children {
	width: 150px;
	min-width: 150px;
	max-width: unset;
}

#scholarship.apply > .row.list .item .subitem.academy {
	width: 250px;
	min-width: 250px;
	max-width: 300px;
}

#scholarship.apply > .row.list .item .subitem.level {
	width: 150px;
	min-width: 150px;
	max-width: 200px;
}

#scholarship.apply > .row.list .item .subitem.gpa {
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	text-align: center;
}

#scholarship.apply > .row.list .item .subitem.gpa .form-control {
	text-align: right;
} */

/* #scholarship.apply ~ .modal .modal-dialog {
	max-width: 950px !important;
}
	
@media only screen and (max-width: 949.98px) {
	#scholarship.apply ~ .modal .modal-dialog {
		max-width: 470px !important;
	}
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren,
#scholarship.apply ~ .modal .modal-body > .addchilditem {
	padding: 10px;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren > .row,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row {
	gap: 20px;
}

#scholarship.apply ~ .modal .modal-body > .addchildren > .row + .row,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row + .row {
	margin-top: 20px;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren > .row .column,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .column {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 450px;

	border: 1px solid red;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren > .row.action .column,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row.action .column,
#scholarship.apply ~ .modal .modal-body > .addchildren > .row.message-status .column,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row.message-status .column {
	max-width: 940px;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren > .row.action .column,
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row.action .column {
	gap: 10px;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchildren > .row .column .input
#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .column .input {
	width: 100%;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.children {
	min-width: 150px;
	max-width: unset;
}

#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.gradelevel {
	min-width: 150px;
}

#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.academy {
	min-width: 150px;
}

#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.educationlevel {
	min-width: 150px;
}

#scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.gpa {
	min-width: 100px;
	max-width: 100px;
} */

/* #scholarship.apply ~ .modal .modal-body > .addchilditem > .row .input.document .form-control::before {
	content: "Pick file";
	position: absolute;
	z-index: 2;
	display: block;
	background-color: #eee;
	width: 80px;
  } */
  /* ---------- */


/* monthly billing page */
#monthlybilling {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#monthlybilling > .row + .row {
	margin-top: 20px;
}

#monthlybilling > .row.header .info.duedate {
	width: 120px;
}

#monthlybilling > .row.list .subitem.detail {
	width: 100px;
	min-width: 100px;
}

#monthlybilling > .row.list .subitem.periods {
	width: 60px;
	min-width: 60px;
	max-width: 100px;

	text-align: center;
}

#monthlybilling > .row.list .subitem.amount {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: right;
}

#monthlybilling > .row.list .subitem.interest {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: right;
}

#monthlybilling > .row.list .subitem.totalamount {
	width: 120px;
	min-width: 120px;
	max-width: 150px;

	text-align: right;
}

#monthlybilling > .row.list .subitem.status {
	width: 100px;
	min-width: 100px;
	max-width: 150px;

	text-align: center;
}

#monthlybilling > .row.list .subitem.arrearsamount {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: right;
}

#monthlybilling > .row.message-notice {
	margin-top: 5px;
}

#monthlybilling > .row.message-notice .notice-text {
	font-size: 0.9rem;
}
/* ---------- */


/* monthly receipt page */
#monthlyreceipt {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#monthlyreceipt > .icon-view .item {
	width: 330px;
}
/* ---------- */


/* special receipt page */
#specialreceipt {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#specialreceipt > .icon-view .item {
	width: 330px;
}
/* ---------- */


/* deposit tax certificate page */
#deposittaxcert {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#deposittaxcert > .icon-view .item {
	width: 330px;
}
/* ---------- */


/* interest certificate page */
#loaninterestcert {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#loaninterestcert > .icon-view .item {
	width: 330px;
}
/* ---------- */


/* balance confirm page */
#balanceconfirm {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;

	padding-bottom: 5px;
}

#balanceconfirm > .row.title {
	border: none;
	margin-bottom: 10px;
	background-color: inherit;

	text-align: center;
	font-weight: 700;
}

#balanceconfirm > .row.type {
	height: 30px;
	margin-top: 10px;
}

#balanceconfirm > .row.item {
	height: 80px;
	padding-left: 20px;
}

#balanceconfirm > .row.item.no-data {
	height: 40px;
}

#balanceconfirm > .row.item {
	border-bottom: 1px solid var(--line-color, inherit);
}

#balanceconfirm > .row.item.error {
	background-color: var(--error-bg, inherit);
}

#balanceconfirm > .row.item + .row.item {
	margin-top: 5px;
}

#balanceconfirm > .row.item > * {
	height: 36px;
}

#balanceconfirm > .row.item.item-balconfirmactive > * {
	height: 36px;
}

#balanceconfirm > .row.item .item-detail {
	gap: 5px;
}

#balanceconfirm > .row.item .item-detail .description {
	width: 100px;
	min-width: 100px;
}

#balanceconfirm > .row.item .item-detail :nth-child(3) {
	width: 90px;
	min-width: 90px;
	max-width: 100px;

	text-align: right;
}

#balanceconfirm > .row.item .item-detail .amount {
	width: 100px;
	min-width: 100px;
	max-width: 150px;

	text-align: right;
}

#balanceconfirm > .row.item .item-detail :nth-child(5) {
	width: 40px;
	min-width: 40px;
	max-width: 40px;

	text-align: right;
}

#balanceconfirm > .row.item .item-confirm {
	gap: 10px;
}

#balanceconfirm > .row.item .item-confirm > .confirm:first-child {
	min-width: 220px;

	gap: 10px;
	flex-grow: 1;
	-webkit-flex-grow: 1;
}

#balanceconfirm > .row.item .item-confirm > .confirm:nth-child(2) {
	width: 150px;
	min-width: 150px;
	max-width: 150px;

	text-align: right;
}

#balanceconfirm > .row.item .item-confirm .confirm-no {
	flex-grow: 1;
	-webkit-flex-grow: 1;
}

#balanceconfirm > .row.item .item-confirm .confirm-yes > :first-child,
#balanceconfirm > .row.item .item-confirm .confirm-no > :first-child {
	width: 80px;
	height: 36px;
	min-width: 80px;
	max-width: 80px;

	padding: 0px 5px;
	line-height: 36px;
}

#balanceconfirm > .row.item .item-confirm .confirm-no > :first-child {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}


#balanceconfirm > .row.item .item-confirm .confirm-yes > :first-child.checked {
	color: var(--btn-success-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-success-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-success-bg, var(--btn-bg, var(--page-bg, inherit)));
}

#balanceconfirm > .row.item .item-confirm .confirm-no > :first-child.checked {
	color: var(--btn-danger-color, var(--btn-color, var(--page-color, inherit)));
	border-color: var(--btn-danger-border-color, var(--btn-border-color, inherit));
	background-color: var(--btn-danger-bg, var(--btn-bg, var(--page-bg, inherit)));
}

#balanceconfirm > .row.item .item-confirm .confirm-no > :nth-child(2) {
	padding-left: 5px;

	flex-grow: 1;
	-webkit-flex-grow: 1;
}

#balanceconfirm > .row.item .item-confirm .form-check-input {
	margin-top: 12px;
}

#balanceconfirm > .row.item .item-confirm .form-control.confirmno-reason {
	width: 100%;

	border-color: var(--btn-danger-border-color, var(--btn-border-color, inherit));
}

#balanceconfirm > .row.item .item-confirm .btn.statement {
	min-width: 140px;
}

#balanceconfirm > .row.action {
	padding-top: 10px;
}

#balanceconfirm > .row.action .column {
	gap: 10px;
}

#balanceconfirm > .row.action .btn.edit,
#balanceconfirm > .row.action .btn.save,
#balanceconfirm > .row.action .btn.cancel,
#balanceconfirm > .row.action .btn.confirmedletter {
	min-width: 140px;
}

#balanceconfirm ~ .modal .modal-body > .message-box:has(.message-confirmed) {
	height: 180px;
}
/* ---------- */


/* meeting page */
#meeting {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#meeting > .icon-view .item {
	width: 330px;
}
/* ---------- */


/* interest rate page */
#interestrate > .row {
	gap: 20px;
}

#interestrate > .row + .row {
	margin-top: 20px;
}

#interestrate > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#interestrate > .row .column .card {
	width: 100%;
	margin: 0;
	padding: 0px 15px 5px;
}

#interestrate > .row .column .card .line {
	height: 40px;
}

#interestrate > .row .column .card .line.header {
	padding: 0px 10px;
	margin-left: -15px;
	margin-right: -15px;

	font-size: 1.2rem;
}

#interestrate > .row .column .card .line.body:not(:last-child) {
	border-bottom: 1px solid var(--line-color, inherit);
}

#interestrate > .row .column .card .line.body.sub {
	padding-left: 20px;
}
/* --------- */


/* loan repayment page */
#loanrepayment > .row {
	gap: 20px;
}

#loanrepayment > .row + .row {
	margin-top: 20px;
}

#loanrepayment > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#loanrepayment > .row.list .column,
#loanrepayment > .row.action .column {
	max-width: 1040px;
}

#loanrepayment > .row.action .btn {
	width: 90px;
}

#loanrepayment > .row.action .column {
	gap: 10px;
}

#loanrepayment > .row.list {
	gap: 0;
}

#loanrepayment > .row.list .subitem.date {
	width: 100px;
	min-width: 100px;
	max-width: 120px;

	text-align: center;
}

#loanrepayment > .row.list .subitem.periods {
	width: 60px;
	min-width: 60px;
	max-width: 80px;

	text-align: center;
}

#loanrepayment > .row.list .subitem.amount {
	width: 100px;
	min-width: 100px;
	max-width: 180px;

	text-align: right;
}

#loanrepayment > .row.list .subitem.interest {
	width: 100px;
	min-width: 100px;
	max-width: 180px;

	text-align: right;
}

#loanrepayment > .row.list .subitem.totalamount {
	width: 100px;
	min-width: 100px;
	max-width: 180px;

	text-align: right;
}

#loanrepayment > .row.list .subitem.debtremain {
	width: 120px;
	min-width: 120px;

	text-align: right;
}

#loanrepayment > .row .input {
	width: 100%;
}

#loanrepayment > .row .input.contractdate {
	min-width: 140px;
	max-width: 160px;
}

#loanrepayment > .row .input.contractamount {
	min-width: 180px;
	max-width: 240px;
}

#loanrepayment > .row .input.paymenttype .control {
	margin-right: 30px;
}

#loanrepayment > .row .input.paymentamount {
	min-width: 180px;
	max-width: 240px;
}

#loanrepayment > .row .input.paymentperiods {
	min-width: 80px;
	max-width: 120px;
}

#loanrepayment > .row.message-notice {
	margin-top: 5px;
}

#loanrepayment > .row.message-notice .notice-text {
	font-size: 0.9rem;
}
/* ---------- */


/* change password page */
#changepassword > .row + .row {
	margin-top: 20px;
}

#changepassword > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#changepassword > .row.info,
#changepassword > .row.input,
#changepassword > .row.info .column,
#changepassword > .row.input .column {
	gap: 20px;
}

#changepassword > .row.info,
#changepassword > .row.input {
	width: 100%;
}

#changepassword > .row.info .memberno {
	min-width: 80px;
	max-width: 100px;
}

#changepassword > .row.info .membername {
	min-width: 280px;
}

#changepassword > .row.message-notice {
	margin-bottom: 15px;
}

#changepassword > .row.action .btn {
	min-width: 100px;
}

#changepassword > .row.action .btn + .btn {
	margin-left: 10px;
}

#changepassword ~ .modal .modal-body .action .btn {
	min-width: 80px;
}
/* ---------- */


/* sysconfig page */
#sysconfig > .row + .row {
	margin-top: 20px;
}

#sysconfig > .row.list .item {
	height: 40px;
}

#sysconfig > .row.list .item.extend {
	height: auto;
	min-height: 40px;
	margin-left: 16px;

	font-size: 0.8rem;
}

#sysconfig > .row.list .subitem {
	gap: 10px;
}

#sysconfig > .row.list .subitem.title {
	width: 300px;
	min-width: 300px;
}

#sysconfig > .row.list .subitem.value {
	width: 80px;
	min-width: 80px;
	max-width: 80px;
	padding-left: 0;
	padding-right: 0;
}

#sysconfig > .row.list .subitem.value select {
	width: 100%;
	height: 30px;
	text-align: center;
}

#sysconfig > .row.action .btn {
	min-width: 80px;
}

#sysconfig .btn.initbalance {
	height: 28px;
	min-width: max-content;
	font-size: 0.8rem;
}

#sysconfig > .row.action .column {
	gap: 10px;
}

#sysconfig ~ .modal .modal-body > .message-box.confirm-initbalance {
	height: 200px;
}

#sysconfig ~ .modal .modal-body > .message-box:has(.message-initialed) {
	height: 180px;
}
/* ---------- */


/* admin page */
#admin {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#admin > .row + .row {
	margin-top: 20px;
}

#admin > .row.list .item {
	height: 40px;
}

#admin > .row.list .subitem.userid {
	width: 80px;
	min-width: 80px;
	max-width: 120px;

	text-align: center;
}

#admin > .row.list .subitem.username {
	width: 200px;
	min-width: 200px;
	max-width: 500px;
}

#admin > .row.list .subitem.department {
	width: 250px;
	min-width: 250px;
}

#admin > .row.list .subitem.action {
	width: 180px;
	min-width: 180px;
	max-width: 180px;
	padding-right: 0;
}

#admin > .row.list .subitem.action .btn {
	height: 34px;

	font-size: 0.9rem;
}

#admin > .row.list .subitem.action .btn + .btn {
	margin-left: 10px;
}

#admin > .row.list .subitem.action .btn.editprivilege {
	width: 100px;
}

#admin > .row.list .subitem.action .btn.deleteadmin {
	width: 60px;
}

#admin > .row.action {
	margin-top: 5px;
}

#admin > .row.action .column {
	gap: 10px;
}

#admin > .row.action .btn {
	min-width: 100px;

	font-size: 0.9rem;
}

#admin > .row.action .btn.addadmin {
	width: 170px;
}

#admin ~ .modal .modal-body .row + .row {
	margin-top: 10px;
}

#admin ~ .modal .modal-body .row.action .column {
	gap: 10px;
}

#admin ~ .modal .modal-body .row.action .btn {
	min-width: 80px;
}

#admin ~ .modal .modal-body .row.message-status {
	height: 34px;
}

#admin ~ .modal .modal-body > .addadmin,
#admin ~ .modal .modal-body > .editadmin {
	padding: 10px;
	min-width: 300px;
	min-height: 200px;
}

#admin ~ .modal .modal-body > .addadmin .row.form-input .column {
	gap: 20px;
	padding: 0;
	min-width: 400px;
	max-width: 500px;
}

#admin ~ .modal .modal-body > .addadmin .row.form-input .info.memberno {
	min-width: 80px;
	max-width: 100px;
}

#admin ~ .modal .modal-body > .addadmin .row.form-input .info.membername {
	width: 100%;
	max-width: 380px;
}

#admin ~ .modal .modal-body > .addadmin .row.form-input .info.department {
	width: 100%;
	max-width: 500px;
}
/* ---------- */


/* committee page */
#committee {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#committee > .row + .row {
	margin-top: 20px;
}

#committee > .row.list .item {
	/* height: 40px; */
}

#committee > .row.list .subitem.memberno {
	width: 80px;
	min-width: 80px;
	max-width: 120px;

	text-align: center;
}

#committee > .row.list .subitem.membername {
	width: 200px;
	min-width: 200px;
	max-width: 350px;
}

#committee > .row.list .subitem.department {
	width: 250px;
	min-width: 250px;
}

#committee > .row.list .subitem.action {
	width: 70px;
	min-width: 70px;
	max-width: 70px;
	padding-right: 0;
}

#committee > .row.list .subitem.action .btn {
	height: 34px;

	font-size: 0.9rem;
}

#committee > .row.list .subitem.action .btn + .btn {
	margin-left: 10px;
}

#committee > .row.list .subitem.action .btn.deletecommittee {
	width: 60px;
}

#committee > .row.action {
	margin-top: 5px;
}

#committee > .row.action .column {
	gap: 10px;
}

#committee > .row.action .btn {
	min-width: 100px;

	font-size: 0.9rem;
}

#committee > .row.action .btn.addcommittee {
	width: 140px;
}

#committee ~ .modal .modal-body .row + .row {
	margin-top: 10px;
}

#committee ~ .modal .modal-body .row.action .column {
	gap: 10px;
}

#committee ~ .modal .modal-body .row.action .btn {
	min-width: 80px;
}

#committee ~ .modal .modal-body .row.message-status {
	height: 34px;
}

#committee ~ .modal .modal-body > .addcommittee {
	padding: 10px;
	min-width: 300px;
	min-height: 200px;
}

#committee ~ .modal .modal-body > .addcommittee .row.form-input .column {
	gap: 20px;
	padding: 0;
	min-width: 400px;
	max-width: 500px;
}

#committee ~ .modal .modal-body > .addcommittee .row.form-input .info.memberno {
	min-width: 80px;
	max-width: 100px;
}

#committee ~ .modal .modal-body > .addcommittee .row.form-input .info.membername {
	width: 100%;
	max-width: 380px;
}

#committee ~ .modal .modal-body > .addcommittee .row.form-input .info.department {
	width: 100%;
	max-width: 500px;
}
/* ---------- */


/* auditor page */
#auditor {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#auditor > .row + .row {
	margin-top: 20px;
}

#auditor > .row.list .item {
	height: 40px;
}

#auditor > .row.list .subitem.userid {
	width: 150px;
	min-width: 150px;
	max-width: 150px;

	text-align: center;
}

#auditor > .row.list .subitem.username {
	width: 220px;
	min-width: 220px;
}

#auditor > .row.list .subitem.action {
	width: 160px;
	min-width: 160px;
	max-width: 160px;
	padding-right: 0;
}

#auditor > .row.list .subitem.action .btn {
	height: 34px;

	font-size: 0.9rem;
}

#auditor > .row.list .subitem.action .btn + .btn {
	margin-left: 10px;
}

#auditor > .row.list .subitem.action .btn.editauditor {
	width: 80px;
}

#auditor > .row.list .subitem.action .btn.deleteauditor {
	width: 60px;
}

#auditor > .row.action {
	margin-top: 5px;
}

#auditor > .row.action .column {
	gap: 10px;
}

#auditor > .row.action .btn {
	min-width: 100px;

	font-size: 0.9rem;
}

#auditor > .row.action .btn.addauditor {
	width: 150px;
}

#auditor ~ .modal .modal-body .row + .row {
	margin-top: 10px;
}

#auditor ~ .modal .modal-body .row.action .column {
	gap: 10px;
}

#auditor ~ .modal .modal-body .row.action .btn {
	min-width: 80px;
}

#auditor ~ .modal .modal-body .row.message-status {
	height: 34px;
}

#auditor ~ .modal .modal-body > .addauditor,
#auditor ~ .modal .modal-body > .editauditor {
	padding: 10px;
	min-width: 300px;
	min-height: 200px;
}

#auditor ~ .modal .modal-body > .addauditor .row.form-input .column,
#auditor ~ .modal .modal-body > .editauditor .row.form-input .column {
	gap: 20px;
	padding: 0;
	min-width: 400px;
	max-width: 500px;
}

#auditor ~ .modal .modal-body > .addauditor .row.form-input .info.userid,
#auditor ~ .modal .modal-body > .editauditor .row.form-input .info.userid {
	min-width: 150px;
	max-width: 150px;
}

#auditor ~ .modal .modal-body > .addauditor .row.form-input .info.username,
#auditor ~ .modal .modal-body > .editauditor .row.form-input .info.username {
	width: 100%;
	max-width: 380px;
}

#auditor ~ .modal .modal-body > .addauditor .row.form-input .info.password,
#auditor ~ .modal .modal-body > .editauditor .row.form-input .info.password {
	width: 100%;
	max-width: 500px;
}
/* ---------- */


/* rights page */
#rights {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#rights > .row + .row {
	margin-top: 20px;
}

#rights > .row.list .item {
	height: 40px;
}

#rights > .row.list .subitem.name {
	width: 260px;
	min-width: 260px;
}

#rights > .row.list .subitem.action {
	width: 120px;
	min-width: 120px;
	max-width: 120px;
	padding-right: 0;
}

#rights > .row.list .subitem.action .btn {
	height: 34px;

	font-size: 0.9rem;
}

#rights > .row.list .subitem.action .btn + .btn {
	margin-left: 10px;
}

#rights > .row.list .subitem.action .btn.editrights {
	width: 100px;
}

#rights ~ .modal .modal-dialog .row + .row {
	margin-top: 10px;
}

#rights ~ .modal .modal-body .row.action .column {
	gap: 10px;
}

#rights ~ .modal .modal-body .row.action .btn {
	min-width: 80px;
}

#rights ~ .modal .modal-body .row.message-status {
	height: 34px;
}

#rights ~ .modal .modal-body > .editrights {
	padding: 5px;
	min-width: 300px;
	min-height: 200px;
}

#rights ~ .modal .modal-body > .editrights .input {
	min-height: 180px;
}

#rights ~ .modal .modal-body > .editrights .list .item {
	height: 34px;
}

#rights ~ .modal .modal-body > .editrights .list .subitem.userid {
	width: 80px;
	min-width: 80px;
	max-width: 100px;

	text-align: center;
}

#rights ~ .modal .modal-body > .editrights .list .subitem.username {
	width: 250px;
	min-width: 250px;

	text-align: left;
}

#rights ~ .modal .modal-body > .editrights .list .subitem.action {
	width: 100px;
	min-width: 90px;
	max-width: 100px;
	padding-right: 0;

	text-align: right;
}

#rights ~ .modal .modal-body .action .btn-action {
	min-width: 80px;
}
/* ---------- */


/* reset password page */
#resetpassword > .row + .row {
	margin-top: 20px;
}

#resetpassword > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#resetpassword > .row.info,
#resetpassword > .row.input,
#resetpassword > .row.info .column,
#resetpassword > .row.input .column {
	gap: 20px;
}

#resetpassword > .row.info,
#resetpassword > .row.input {
	width: 100%;
}

#resetpassword > .row.info .memberno {
	min-width: 80px;
	max-width: 100px;
}

#resetpassword > .row.info .membername {
	min-width: 280px;
}

#resetpassword > .row.action .column {
	gap: 10px;
}

#resetpassword > .row.action .btn {
	min-width: 100px;
}

#resetpassword ~ .modal .modal-body .action .column {
	gap: 10px;
}

#resetpassword ~ .modal .modal-body .action .btn {
	min-width: 80px;
}
/* ---------- */


/* balanceconfirmed page */
#balanceconfirmed {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#balanceconfirmed > .row + .row {
	margin-top: 10px;
}

#balanceconfirmed > .row.dashboard {
	gap: 20px;
}

#balanceconfirmed > .row.dashboard .card {
	width: 220px;
	height: fit-content;
	margin: 0;
	padding: 5px;
	min-width: 180px;
}

#balanceconfirmed > .row.dashboard .card.confirm-yes {
	border-color: #4ec05d;
	background-color: #5ce76f;
}

#balanceconfirmed > .row.dashboard .card.confirm-no {
	border-color: #d47e7e;
	background-color: #ff9696;
}

#balanceconfirmed > .row.dashboard .card.confirm-notverified {
	border-color: #b30000;
	background-color: #d10000;
}

#balanceconfirmed > .row.dashboard .card > .link {
	color: var(--icon-color, inherit);

	cursor: pointer;
	text-decoration: none;
}

#balanceconfirmed > .row.dashboard .card > .link.disabled {
	cursor: unset;
}

#balanceconfirmed > .row.dashboard .card .line {
	height: 40px;
}

#balanceconfirmed > .row.control {
	height: 36px;
}

#balanceconfirmed > .row.control .btn {
	height: 36px;
	min-width: 100px;
}

#balanceconfirmed > .row.control .btn.export {
	width: 320px;
}

#balanceconfirmed > .row.list .item {
	height: 40px;
}

#balanceconfirmed > .row.list .subitem.memberno {
	width: 80px;
	min-width: 60px;
	max-width: 100px;

	text-align: center;
}

#balanceconfirmed > .row.list .subitem.membername {
	width: 200px;
	min-width: 200px;
}

#balanceconfirmed > .row.list .subitem.department {
	width: 250px;
	min-width: 250px;
	max-width: 350px;
}

#balanceconfirmed.confirmed-nok > .row.list .subitem.membername {
	width: 120px;
	min-width: 120px;
}

#balanceconfirmed.confirmed-ok > .row.list .item.audited .subitem.membername::after {
	color: #4ec05d;
	margin-left: 5px;

	content: "\f058";
	font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

#balanceconfirmed.confirmed-nok > .row.list .item.audited .subitem.membername::after {
	color: #d47e7e;
	margin-left: 5px;

	content: "\f057";
	font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

#balanceconfirmed > .row.list .subitem.confirmeddate {
	width: 180px;
	min-width: 160px;
	max-width: 180px;

	text-align: center;
}

#balanceconfirmed > .row.list .subitem.action {
	gap: 10px;
	width: 140px;
	min-width: 140px;
	max-width: 140px;
	padding-right: 0;
}

/* #balanceconfirmed.confirmed-ok > .row.list .subitem.action, */
#balanceconfirmed.confirmed-nok > .row.list .subitem.action {
	width: 260px;
	min-width: 260px;
	max-width: 260px;
}

#balanceconfirmed > .row.list .subitem.action .btn {
	height: 34px;

	font-size: 0.9rem;
}

#balanceconfirmed > .row.list .subitem.action .btn.audited,
#balanceconfirmed > .row.list .subitem.action .btn.notaudited {
		width: 110px;
}

#balanceconfirmed > .row.list .subitem.action .btn.confirmedletter {
	width: 130px;
}
/* ---------- */


/* login history page */
#loginhist > .row {
	gap: 20px;
}

#loginhist > .row + .row {
	margin-top: 20px;
}

#loginhist > .row + .row.list {
	margin-top: 10px;
}

#loginhist > .row .column {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	/* max-width: 510px; */
	max-width: 640px;
}

#loginhist > .row.control .column:first-child {
	max-width: 380px;
}

#loginhist > .row.control .startat,
#loginhist > .row.control .endat {
	min-width: 140px;
	max-width: 160px;
}

#loginhist > .row.control .userid {
	min-width: 80px;
	max-width: 80px;
}

#loginhist > .row.control .channel div:nth-child(2) {
	padding-top: 5px;
}

#loginhist > .row.control .channel .form-check-input + .form-check-label {
	/* margin-top: 2px; */
	margin-left: 5px;
	margin-right: 20px;
}

#loginhist > .row.action .column {
	max-width: 1040px;
}

#loginhist > .row.action .btn {
	min-width: 100px;
}

#loginhist > .row.action .btn + .btn {
	margin-left: 10px;
}

#loginhist > .row.list {
	gap: unset;
}

#loginhist > .row.list .subitem {
	text-align: center;
}

#loginhist > .row.list .subitem.datetime {
	width: 160px;
	min-width: 160px;
	max-width: 220px;
}

#loginhist > .row.list .subitem.userid {
	width: 80px;
	min-width: 80px;
	max-width: 120px;
}

#loginhist > .row.list .subitem.status {
	width: 140px;
	min-width: 140px;
	max-width: 220px;
}

#loginhist > .row.list .subitem.ipaddress {
	width: 140px;
	min-width: 140px;
	max-width: 250px;
}

#loginhist > .row.list .subitem.deviceuid {
	width: 200px;
	min-width: 200px;
}

#loginhist > .row.list .subitem.channel {
	width: 80px;
	min-width: 80px;
	max-width: 140px;
}

#loginhist > .row.list .subitem.appversion {
	width: 80px;
	min-width: 80px;
	max-width: 100px;
}
/* ---------- */


/* password history page */
#passwordhist > .row {
	gap: 20px;
}

#passwordhist > .row + .row {
	margin-top: 20px;
}

#passwordhist > .row + .row.list {
	margin-top: 10px;
}

#passwordhist > .row .column {
	gap: 20px;
	width: 100%;
	padding: 0;
	min-width: 380px;
	/* max-width: 510px; */
	max-width: 640px;
}

#passwordhist > .row.control .column:first-child {
	max-width: 380px;
}

#passwordhist > .row.control .startat,
#passwordhist > .row.control .endat {
	min-width: 140px;
	max-width: 160px;
}

#passwordhist > .row.control .userid {
	min-width: 80px;
	max-width: 80px;
}

#passwordhist > .row.control .channel div:nth-child(2) {
	padding-top: 5px;
}

#passwordhist > .row.control .channel .form-check-input + .form-check-label {
	/* margin-top: 2px; */
	margin-left: 5px;
	margin-right: 20px;
}

#passwordhist > .row.action .column {
	max-width: 1040px;
}

#passwordhist > .row.action .btn {
	min-width: 100px;
}

#passwordhist > .row.action .btn + .btn {
	margin-left: 10px;
}

#passwordhist > .row.list {
	gap: unset;
}

#passwordhist > .row.list .subitem {
	text-align: center;
}

#passwordhist > .row.list .subitem.datetime {
	width: 160px;
	min-width: 160px;
	max-width: 220px;
}

#passwordhist > .row.list .subitem.userid {
	width: 80px;
	min-width: 80px;
	max-width: 120px;
}

#passwordhist > .row.list .subitem.type {
	width: 80px;
	min-width: 80px;
	max-width: 100px;
}

#passwordhist > .row.list .subitem.status {
	width: 140px;
	min-width: 140px;
	max-width: 220px;
}

#passwordhist > .row.list .subitem.staffid {
	width: 80px;
	min-width: 80px;
	max-width: 120px;
}

#passwordhist > .row.list .subitem.ipaddress {
	width: 140px;
	min-width: 140px;
	max-width: 250px;
}

#passwordhist > .row.list .subitem.deviceuid {
	width: 200px;
	min-width: 200px;
}

#passwordhist > .row.list .subitem.channel {
	width: 80px;
	min-width: 80px;
	max-width: 140px;
}

#passwordhist > .row.list .subitem.appversion {
	width: 80px;
	min-width: 80px;
	max-width: 100px;
}
/* ---------- */


/* transfer history page */
#transferhist {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#transferhist > .row + .row {
	margin-top: 20px;
}

#transferhist > .row.list .subitem {
	text-align: center;
}

#transferhist > .row.list .subitem.startat {
	width: 160px;
	min-width: 160px;
	max-width: 200px;
}

#transferhist > .row.list .subitem.finishat {
	width: 160px;
	min-width: 160px;
	max-width: 200px;
}

#transferhist > .row.list .subitem.status {
	width: 100px;
	min-width: 100px;
	max-width: 300px;
}

#transferhist > .row.list .subitem.flag {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}

#transferhist > .row.list .subitem.machine {
	width: 180px;
	min-width: 150px;
}
/* ---------- */


/* statistic page */
#statistic > .row + .row {
	margin-top: 20px;
}

#statistic > .row + .row.list {
	margin-top: 10px;
}

#statistic > .row .column {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 510px;
}

#statistic > .row.input,
#statistic > .row.input .column {
	gap: 20px;
}

#statistic > .row.action .column {
	max-width: 1040px;
}

#statistic .column .formattype .form-check-input + .form-check-label {
	/* margin-top: 2px; */
	margin-left: 5px;
	margin-right: 20px;
}

#statistic > .row.input .startat,
#statistic > .row.input .endat {
	min-width: 140px;
	max-width: 160px;
}

#statistic > .row.action .btn {
	min-width: 100px;
}

#statistic > .row.action .btn + .btn {
	margin-left: 10px;
}

#statistic > .row.list .subitem {
	text-align: center;
}

#statistic > .row.list .subitem.at {
	width: 100px;
	min-width: 100px;
	max-width: 150px;
}

#statistic > .row.list .subitem.appmember,
#statistic > .row.list .subitem.webmember,
#statistic > .row.list .subitem.applogin,
#statistic > .row.list .subitem.weblogin,
#statistic > .row.list .subitem.deposit,
#statistic > .row.list .subitem.withdrawal,
#statistic > .row.list .subitem.internal {
	width: 100px;
	min-width: 100px;
}
/* ---------- */


/* specinfo page */
#specinfo {
	width: 100%;
	padding: 0;
	min-width: 380px;
	max-width: 1040px;
}

#specinfo > .row + .row {
	margin-top: 20px;
}

#specinfo > .row.list .subitem {
	text-align: center;
}

#specinfo > .row.list .subitem.license {
	width: 80px;
	min-width: 80px;
	max-width: 120px;
}

#specinfo > .row.list .subitem.membercount {
	width: 70px;
	min-width: 70px;
	max-width: 120px;
}

#specinfo > .row.list .subitem.remoteuser {
	width: 100px;
	min-width: 100px;
	max-width: 180px;
}

#specinfo > .row.list .subitem.servername {
	width: 100px;
	min-width: 100px;
	max-width: 150px;
}

#specinfo > .row.list .subitem.serverip {
	width: 120px;
	min-width: 120px;
	max-width: 150px;
}

#specinfo > .row.list .subitem.servermac {
	width: 150px;
	min-width: 150px;
	max-width: 180px;
}

#specinfo > .row.list .subitem.serveros {
	width: 150px;
	min-width: 150px;
}

#specinfo > .row.list .subitem.lastupdate {
	width: 150px;
	min-width: 100px;
}
/* ---------- */


/* for extra small devices. (screen less than 576px, portrait phones) */
@media only screen and (max-width: 575.98px) {
	#depositaccount ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.code,
	#balanceconfirm ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.code {
		display: none;
	}

	#depositaccount ~ .modal .modal-body .account .list.statement .subitem.memo,
	#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.memo {
		display: none;
	}

	#loannewrequest > .row.list.contract .subitem.contractdate {
		display: none;
	}

	#scholarship > .row.list .subitem.date {
		display: none;
	}

	#scholarship.apply > .row.list .subitem.educationleveldesc {
		display: none;
	}

	#scholarship.children > .row.list .subitem.birthdate {
		display: none;
	}

	#admin > .row.list .subitem.userid {
		display: none;
	}

	#committee > .row.list .subitem.department {
		display: none;
	}

	#auditor > .row.list .subitem.userid {
		display: none;
	}

	#balanceconfirmed.confirmed-nok > .row.list .subitem.memberno {
		display: none;
	}

	#loginhist > .row.list .subitem.channel {
		display: none;
	}

	#passwordhist > .row.list .subitem.channel {
		display: none;
	}

	#transferhist > .row.list .subitem.finishat {
		display: none;
	}
}


/* for small devices. (screen less than 768px, landscape phones) */
@media only screen and (max-width: 767.98px) {
	.wrapper:has(.body .body-sidebar.fixedsize) {
		min-width: calc(var(--wrapper-min-width, 480px) + var(--sidebar-max-width, 200px) - var(--sidebar-min-width, 60px));
	}

	.header .header-banner {
		min-width: unset;
	}

	.body .body-sidebar:not(.fixedsize) {
		width: var(--sidebar-min-width);
		min-width: var(--sidebar-min-width);
		max-width: var(--sidebar-min-width);
	}

	.body .sidebar-profile {
		display: none;
	}

	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item {
		height: 60px;
	}

	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item.separator {
		height: auto;
		margin-left: -2px;
		/* margin-bottom: 30px; */
	
		border-top: 1px solid #dddddd;
	}
	
	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item.separator::before {
		content: "";
	
		display: block;
		margin-bottom: 5px;
	
		border-top: 1px solid #eeeeee;
	}

	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item .item-link:hover {
		box-shadow: none;
		-o-box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
	}

	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item .item-icon {
		width: 100%;
		font-size: 30px;
	}

	.body .body-sidebar:not(.fixedsize) .sidebar-menu .menu-item .item-text {
		display: none;
	}

	.footer .footer-space {
		width: var(--sidebar-max-width);
		min-width: var(--sidebar-max-width);
		max-width: var(--sidebar-max-width);
	}
	
	.body:not(:has(.body-sidebar.fixedsize)) + .footer .footer-space {
		width: var(--sidebar-min-width);
		min-width: var(--sidebar-min-width);
		max-width: var(--sidebar-min-width);
	}

	#depositaccount ~ .modal .modal-body .account .list.statement .subitem.sequence,
	#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.sequence {
		display: none;
	}

	#depositaccount ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.memo,
	#balanceconfirm ~ .modal .modal-body .account .list.statement.book-type-2 .subitem.memo {
		display: none;
	}

	#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.amount,
	#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.interest,
	#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.amount,
	#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.interest {
		display: none;
	}

	#loannewrequest > .row.list.contract .subitem.creditamount {
		display: none;
	}

	#guarantee > .row.list .subitem.memberno {
		display: none;
	}

	#beneficiary > .row.list .subitem.sequence {
		display: none;
	}

	#sharepurchase > .list .subitem.receiptno,
	#balanceconfirm ~ .modal .modal-body .share .list.statement .subitem.receiptno {
		display: none;
	}

	#scholarship.apply > .row.list .subitem.gpa {
		display: none;
	}

	/* #scholarship.children > .row.list .subitem.action .btn.detail {
		display: none;
	} */

	/* #scholarship.children > .row.list .subitem.action {
		min-width: 150px;
		max-width: 150px;
	} */

	#monthlybilling > .row.list .subitem.arrearsamount {
		display: none;
	}

	#loginhist > .row.list .subitem.appversion {
		display: none;
	}

	#passwordhist > .row.list .subitem.type {
		display: none;
	}

	#transferhist > .row.list .subitem.flag {
		display: none;
	}

	#specinfo > .row.list .subitem.servername {
		display: none;
	}

	#specinfo > .row.list .subitem.lastupdate {
		width: 100px;
	}
}


/* for medium devices (screen less than 992px, tablets) */
@media only screen and (max-width: 991.98px) {
	#loanagreement ~ .modal .modal-body .contract .list.statement .subitem.receiptno,
	#balanceconfirm ~ .modal .modal-body .contract .list.statement .subitem.receiptno {
		display: none;
	}

	#loannewrequest > .row.list.guarantor .subitem.department {
		display: none;
	}

	#guarantee > .row.list .subitem.creditamount,
	#guarantee > .row.list .subitem.contractstatus {
		display: none;
	}

	#beneficiary > .row.list .subitem.memberno {
		display: none;
	}

	#scholarship > .row.list .subitem.event {
		display: none;
	}

	#scholarship.apply > .row.list .subitem.academy {
		display: none;
	}

	#scholarship.children > .row.list .subitem.remark {
		display: none;
	}
	
	#monthlybilling > .row.list .subitem.amount,
	#monthlybilling > .row.list .subitem.interest {
		display: none;
	}

	#loanrepayment > .row.list .subitem.amount,
	#loanrepayment > .row.list .subitem.interest {
		display: none;
	}

	#admin > .row.list .subitem.department {
		display: none;
	}

	#balanceconfirmed > .row.list .subitem.confirmeddate {
		display: none;
	}

	#loginhist > .row.list .subitem.ipaddress {
		display: none;
	}

	#passwordhist > .row.list .subitem.ipaddress {
		display: none;
	}

	#transferhist > .row.list .subitem.machine {
		display: none;
	}

	#statistic > .row.list .subitem.applogin,
	#statistic > .row.list .subitem.appmember {
		display: none;
	}

	#specinfo > .row.list .subitem.serveros {
		display: none;
	}
}


/* for large devices (screen less than 1200px, desktops) */
@media only screen and (max-width: 1199.98px) {
	#balanceconfirmed > .row.list .subitem.department {
		display: none;
	}

	#loginhist > .row.list .subitem.deviceuid {
		display: none;
	}

	#passwordhist > .row.list .subitem.staffid,
	#passwordhist > .row.list .subitem.deviceuid {
		display: none;
	}

	#statistic > .row.list .subitem.deposit,
	#statistic > .row.list .subitem.withdrawal,
	#statistic > .row.list .subitem.internal {
		display: none;
	}

	#specinfo > .row.list .subitem.serverip,
	#specinfo > .row.list .subitem.servermac {
		display: none;
	}
}


/* for extra large devices (screen less than 1400px, desktops) */
@media only screen and (max-width: 1399.98px) {
	#passwordhist > .row.list .subitem.appversion {
		display: none;
	}
}


/* for screen less than 480px */
@media only screen and (max-width: 479.98px) {
	.modal .modal-dialog {
		min-width: 450px;
	}

	.body .body-content {
		width: calc(var(--wrapper-min-width) - (var(--wrapper-padding) * 2) - var(--sidebar-min-width));
		/* width: 416px; */
	}

	#depositaccount > .row .column .account-book .line.body .info.accountname {
		max-width: 250px;
	}
}


/* for screen greater than or equal to 480px */
@media only screen and (min-width: 480px) {
	#depositaccount > .row .column  .account-book .line.body .info.accountname {
		max-width: calc(100vw - 480px + 250px);
	}
}

/* for screen greater than or equal to 768px */
@media only screen and (min-width: 768px) {
	.body .sidebar-menu .menu-item.expand {
		display: none;
	}

	#depositaccount ~ .modal .modal-body .account .list.statement .subitem.amount,
	#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.amount {
		max-width: 200px;
	}

	#depositaccount ~ .modal .modal-body .account .list.statement .subitem.balance,
	#balanceconfirm ~ .modal .modal-body .account .list.statement .subitem.balance {
		max-width: 200px;
	}
}