.formItem {
  margin: 12px 0;
  padding-left: 10px;
  /*
  */
}
.formItem .label {
  color: #8a8a8a;
  font-size: 14px;
  line-height: 21px;
  margin: 8px 0;
}

.bg {
	/*
	background-color: #F5F5F8;
	*/
	background-color: var(--firstBgColor);
}

.g-panel {
	background-color: var(--secondBgColor);
}

.ft {
	/* 用於文本字體，正文文字、副標題等 */
	/* same as .ft.text */
	/*
	color: #262626FF;
	 */
	font-family: PingFang SC;
	font-weight: medium;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0px;
	color: var(--firstTextColor);
}

.ft.head {
	/* 用於首頁問候、或其它重大需要突出的提示 */
	font-size: 30px;
	line-height: 38px;
}

.ft.info {
	/* 用於頁面級空狀態等頁面級提示文字、二級頁價格標簽等 */
	font-size: 28px;
	line-height: 36px;
}

.ft.title {
	/* 用於首頁大標題和資訊類標題文字、卡片內價格標簽等 */
	font-size: 23px;
	line-height: 32px;
}

.ft.alert {
	/* 用於彈窗、頁面級提示、頁面重要提示文本、頁面按鈕文字 */
	font-size: 20px;
	line-height: 29px;
}

.ft.title2 {
	/* 用於副標題、二級服務卡片列表、次要按鈕文字等 */
	font-size: 18px;
	line-height: 26px;
}

.ft.text {
	/* 用於文本字體，正文文字、副標題等 */
}

.ft.msg {
	/* 用於頁面次級描述信息、備註信息、引言、列表註釋等 */
	font-size: 14px;
	line-height: 21px;
}

.ft.modal-title {
	font-size: 18px;
	/*
	color: #13A07B;
	*/
	color: var(--modal-title);
	line-height: 29px;
	font-weight: bold;
}

.ft.modal-title.fail {
	/*
	color: #F48766;
	*/
	color: var(--fail);
}

.ft.modal-text {
	/*
	color: #6C6C6CFF;
	*/
	color: var(--secondTextColor:hsla);
	font-weight: regular;
	text-align: justify;
	font-size: 14px;
	line-height: 24px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
}

.ft.input-label {
	/* label for input */
	/*
	color: #232323FF;
	*/
	color: var(--firstTextColor);
	font-weight: regular;
	font-size: 18px;
	line-height: 22px;
}

.ft.input-head {
	/* label for input */
	color: var(--input-head);
	font-weight: regular;
	font-size: 18px;
	line-height: 28px;
}

.ft.input-label-name {
	/*
	color: #232323FF;
	*/
	color: var(--input-head);
	font-weight: regular;
	font-size: 16px;
	line-height: 22px;
	padding-top: 6px;
}

.ft.input-label-name label {
	font-weight: normal !important;
	padding-left: 5px;
}

.ft.upload-msg {
	/*
	color: #232323FF;
	*/
	color: var(--firstTextColor);
	font-weight: regular;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	text-align: left;
}

.item-gray {
	color: #ACACACFF !important;
}


.g-button {
	border-radius: 80px;
	/*
	 */
	background: #13A07BFF;
	border: 1px solid #13A07BFF;
	background: var(--primaryColor);
	border: 1px solid var(--primaryColor);
	color: #FFFFFF;
	font-family: PingFang SC;
	font-weight: regular;
	letter-spacing: 0px;
	justify-content: center;
	width: 83%;
	max-width: 260px;
	padding: 5px;
	display: inline-flex;
	font-size: 18px;
	line-height: 22px;
}

.ft.summary-title {
	font-size: 16px;
	line-height: 20px;
	color: #232323FF;
	font-weight: regular;
}

.ft.summary-item {
	font-size: 16px;
	line-height: 20px;
	color: var(--secondTextColor);
	font-weight: regular;
}

.ft.summary-item.primary {
	color: var(--firstTextColor);
}

.ft.msg.summary {
	color: var(--secondTextColor);
	font-weight: regular;
	/*
	text-align: center;
	*/
}

.ft.msg.summary.m {
	font-size: 15px;
}

.g-button.max {
	width: 100%;
}

.g-button:active {
	background-color: #0F8062;
}

.g-button.default {
	/*
	background: #FFFFFF;
	color: #13A07B;
	*/
	color: var(--primaryColor);
	background: var(--secondBgColor);
	border: 1px solid #13a07b;
}

.g-button.default.max {
	width: 100%;
}

.g-button.default:active {
	background-color: rgba(0, 0, 0, 0.1);
}

.g-button.sm {
	border-radius: 60px;
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.g-button.xs {
	border-radius: 60px;
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 14px;
	line-height: 22px;
	background-color: var(--btn-xs-bg);
	border-color: var(--btn-xs-border);
	color: var(--btn-xs-color);
}

.g-button.xs.thin {
	line-height: 18px;
}

.g-button.xs-sms {
	border-radius: 60px;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 4px;
	font-size: 14px;
	line-height: 14px;
	white-space: nowrap;
}

.g-button.default.sm {
	border-radius: 60px;
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.g-button.info {
	background: #13A07B33;
	color: #13A07BFF;
	text-align: center;
	border: 0px solid;
}
.g-button.info2 {
	background: #E5E5E5FF;
	color: #ACACACFF;
	text-align: center;
	border: 0px solid;
}
.g-button.info:active {
	background: #13A07B33;
}
.g-button.info2:active {
	background: #E5E5E5FF;
}
.g-button.error {
	background: #F33B40FF;
	color: #FFFFFFFF;
	font-weight: medium;
	text-align: center;
	border: 0px solid;
}
.g-button.error:active {
	border-radius: 90px;
	background: #C22F33;
	
}
.g-button.warning {
	background: #FFC107FF;
	color: #FFFFFFFF;
	font-weight: medium;
	text-align: center;
	border: 0px solid;
}
.g-button.warning:active {
	border-radius: 90px;
	background: #CC9A06;
}
.g-button.success {
	background: #13A07B;
	color: #FFFFFFFF;
	font-weight: medium;
	text-align: center;
	border: 0px solid;
}
.g-button.success:active {
	border-radius: 90px;
	background: #0F8062;
}
.g-button.fail {
	/*
	background: #F48766;
	*/
	background: var(--fail);
	color: #FFFFFFFF;
	font-weight: medium;
	text-align: center;
	border: 0px solid;
}
.g-button.fail:active {
	border-radius: 90px;
	background: #C36C52;
}

.g-button:disabled {
	background: #E5E5E5FF;
	color: #ACACACFF;
	border: 1px solid #E5E5E5FF;
}

.g-button.default:disabled {
	/*
	background: #FFFFFFFF;
	border: 2px solid #E5E5E5FF;
	*/
	background: var(--secondBgColor);
	color: #ACACACFF;
	border: 2px solid var(--borderColor2);
}

.g-button.one {
	width: 40%;
}

.g-button.gray {
	color: #252525;
	background-color: #F5F5F5;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0px;
	border: none;
}

.g-button.gray.max {
	width: 100%;
}

.g-space {
	padding: 6px 0 6px 0;
}

.g-row-row {
	padding: 0 15px 0 15px;
}

.g-row:after {
  content: "";
  display: table;
  clear: both;
}

.columns2 {
	column-count: 2;
	column-gap: 0px;
	column-rule: 0px;
	margin-left: 15px;
	margin-right: 15px;
	text-align: center;
}

.columns2.no-margin {
	margin-left: 0px;
	margin-right: 0px;
}

.columns2.left {
	text-align: left;
}

.g-input {
	padding: 5px 0 5px 0;
	/*
	*/
}

.form-group .form-control-feedback {
  top: 0;
  pointer-events: initial; /* or - auto // or -  unset  */
}

input[type=radio] {
    appearance: none;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
	/*
    border-radius: 2px;
    */
    border-radius: 50px;
    display: inline-grid;
    place-content: center;
    border: 2px solid #C1C1C1FF;
}

input[type=radio]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: bottom left;
    background-color: #fff;
    clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}

input[type=radio]:checked::before {
    transform: scale(1);
}

input[type=radio]:checked {
    background-color: #13A07BFF;
    border: 2px solid #13A07BFF;
}

input[type=radio]:checked:disabled {
    background-color: #D1D1D6FF;
    border: 2px solid #C1C1C1FF;
}

input.green[type=checkbox] {
	appearance: none;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    display: inline-grid;
    place-content: center;
    border: 2px solid #C1C1C1FF;
}

input.green[type=checkbox]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: bottom left;
    background-color: #fff;
    clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}

input.green[type=checkbox]:checked::before {
    transform: scale(1);
}

input.green[type=checkbox]:checked {
    background-color: #13A07BFF;
    border: 2px solid #13A07BFF;
}

input.green[type=checkbox]:checked:disabled {
    background-color: #D1D1D6FF;
    border: 2px solid #C1C1C1FF;
}

input.green[type=checkbox]:disabled {
    background-color: #D1D1D6FF;
    border: 2px solid #C1C1C1FF;
}

input[type=text]:disabled {
	background: var(--text-bg-disabled);
	border: 2px solid #C1C1C1FF;
	color: var(--form-control-color);
}

.g-grid-name {
	display: grid;
	grid-template-columns: 35% auto;
	grid-gap: 10px;
	/*
	background-color: #2196F3;
	padding: 10px;
	 */
	/*
	box-shadow: 0px 4px 20px 0px #0000003F;
	 */
}

.g-grid-name > div {
	/*
  	background-color: rgba(255, 255, 255, 0.8);
  	 */
	color: var(--firstTextColor);
	/*
	color: #232323FF;
	*/
	font-family: PingFang SC;
	font-weight: regular;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

.g-grid-label {
	/*
	color: #8a8a8a !important;
	*/
	color: var(--thirdTextColor) !important;
}

.g-grid-value {
	line-height: 20px;
	color: var(--firstTextColor);
}

.g-top-grid {
	display: grid;
	grid-template-columns: 46px auto 46px;
	grid-gap: 0px;
}

.g-top-grid-cols > div {
	color: var(--firstTextColor);
	font-family: PingFang SC;
	font-weight: regular;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.g-top-grid-cols.left > div {
	padding-left: 16px;
	padding-right: 6px;
	text-align: center;
}
.g-top-grid-cols.middle > div {
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
.g-top-grid-cols.middle > div > div.sub {
	position: fixed;
	right: 46px;
	top: max(calc(0px + max(0px, env(safe-area-inset-top))), 50px);
	/*
	top: calc(12px + max(0px, env(safe-area-inset-top)));
	top: 12px;
	padding-top: max(100px, env(safe-area-inset-top));
	*/
}
.g-top-grid-cols.middle > div > div > div.sub-label {
	font-size: 14px;
	line-height: 22px;
	/*
	color: #6C6C6C;
	*/
	color: var(--secondTextColor);
}
.g-top-grid-cols.right > div {
	padding-right: 16px;
	padding-left: 6px;
	text-align: right;
}

.g-list-group {
	min-height: 62px;
	padding-top: 12px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.g-list-group.default {
	background-color: var(--listgroup-default);
}
.g-list-group.primary {
	background-color: var(--listgroup-primary);
}
.g-list-group.info {
	background-color: var(--listgroup-info);
}
.g-list-group.danger {
	background-color: var(--listgroup-danger);
}
.g-list-group.clear {
	background-color: var(--secondBgColor);
}

.g-list-group.default > div {
	color: var(--listgroup-head);
}
.g-list-group.primary > div {
	color: var(--listgroup-head);
}
.g-list-group.info > div {
	color: var(--listgroup-head);
}
.g-list-group.danger > div {
	color: var(--listgroup-head);
}

.ft.input-label.group-name {
	/* label for list-group */
	margin-left: 20px;
	margin-right: 30px;
	padding-left: 8px;
	padding-top: 8px;
}
.ft.group-name-remark {
	font-size: 14px;
	/*
	color: #666666;
	*/
	color: var(--group-name-remark);
	margin-left: 20px;
	padding-left: 8px;
	padding-bottom: 8px;
}

.info-bg {
	/*
	background-color: #fff;
	 */
	background-color: var(--secondBgColor);
}

.line {
	/*
	border-top: 1px solid #E0E0E0;
	*/
	border-top: 1px solid var(--line);
	margin-left: 15px;
	margin-right: 15px;
}

.break {
	height: 15px;
}

.shadow {
	box-shadow: 0px 6px 10px 0px #0000003F;
	/*
	*/
	/*
	box-shadow: 0px 0px 0px 0px #00000000, 
				0px 5px 20px #0000003F, 
				0px 5px 20px #0000003F, 
				0px 8px 20px #0000003F;
	*/
}

.round-top {
	border-radius: 5% 5% 0% 0%;
}

.round-bottom {
	border-radius: 0% 0% 5% 5%;
}

.round {
	border-radius: 5% 5% 5% 5%;
}

.no-round {
	border-radius: 0% 0% 0% 0%;
}

.round-top-10 {
	border-radius: 10px 10px 0% 0%;
	-webkit-border-radius: 10px 10px 0% 0%;
	-moz-border-radius: 10px 10px 0% 0%;
}

.round-bottom-10 {
	border-radius: 0% 0% 10px 10px;
	-webkit-border-radius: 0% 0% 10px 10px;
	-moz-border-radius: 0% 0% 10px 10px;
}

.round-10 {
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

.nocopy-menu {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.loading-msg {
	color: var(--loading-msg);
	font-family: PingFang SC;
	font-weight: regular;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: center;
}

.fixtop {
  overflow: hidden;
  /*
  background-color: #fff;
   */
  background-color: var(--secondBgColor);
  position: fixed;
  top: 0px;
  width: 100%;
  min-height: 45px;
  z-index: 999;
  padding-top: max(env(safe-area-inset-top), 50px);
}

.fixtop-space {
	height: 46px;
}

.w3-modal {
	z-index: 1000;
	display: none;
	/*
	padding-top: 50px;
	*/
	position: fixed;
	left: 0;
	top: max(calc(12px + env(safe-area-inset-top)), 50px);
	/*
	top: 0;
	*/
	/*
	width: 100%;
	height: 100%;
	height: 0%;
	 */
	width: 160px;
	overflow: auto;
	/*
	background-color: rgb(0, 0, 0);
	 */
	background-color: rgba(0, 0, 0, 0.3);
	/*
	padding-top: max(0px, env(safe-area-inset-top));
	*/
}

.w3-modal-content {
	/*
	margin: auto;
	 */
	z-index: 1001;
	background-color: #fff;
	/*
	position: relative;
	position: fixed;
	*/
	padding: 0;
	outline: 0;
	/*
	width: 160px;
	*/
	min-width: 160px;
	
	margin-top: 10px;
	position: fixed;
	right: 15px;
	/*
	padding-top: max(0px, env(safe-area-inset-top));
	*/
}

.w3-container {
	z-index: 101;
	padding: 0.01em 16px;
	background-color: var(--secondBgColor)
}

.w3-container:after, .w3-container:before {
	content: "";
	display: table;
	clear: both
}


input.apple-switch {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 50px;
  height: 30px;
  background-color: #fff;
  border: 2px solid #D9DADC;
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #fff;
}

input.apple-switch:disabled {
  box-shadow: inset -20px 0 0 0 #C1C1C1;
  border-color: #C1C1C1;
}

input.apple-switch:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}

input.apple-switch:checked {
  /*
  box-shadow: inset 20px 0 0 0 #13A07B;
  border-color: #13A07B;
  */
  box-shadow: inset 20px 0 0 0 var(--primaryColor);
  border-color: var(--primaryColor);
}

input.apple-switch:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.apple-switch:checked:disabled {
  box-shadow: inset 20px 0 0 0 #C1C1C1;
  border-color: #C1C1C1;
}

.minus-sign::before {
	content: "\229D";
}

.minus-sign-style {
	font-size: 38px;
	/*
	color: #13A07BFF;
	*/
	color: var(--primaryColor);
	position: relative;
	top: 1px;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	line-height: 0.8em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ft-success {
	/*
	color: #13A07BFF;
	*/
	color: var(--primaryColor);
}

.ft-success-title {
	/*
	color: #00785DFF;
	*/
	color: var(--success);
}

.ft-fail {
	/*
	color: #F48766FF;
	*/
	color: var(--fail);
}

.upload-box {
	border: 1px solid #C1C1C1;
	border-radius: 10px;
	width: 70px;
	height: 70px;
	display: flex;
	justify-content: right;
	align-items: right;
}

.bgImg {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.bgImg.default {
	background-image: url('../images/file_attach.png');
}
.bgImg.plus {
	background-image: url('../images/plus70.png');
}
.bgImg.doc {
	background-image: url('../images/file_doc.png');
}
.bgImg.xls {
	background-image: url('../images/file_xls.png');
}
.bgImg.pdf {
	background-image: url('../images/file_pdf.png');
}
.bgImg.unknown {
	background-image: url('../images/file_unknown.png');
}

.mo-classnull {
  position: relative;
  height: 100%;
  padding: 16px;
  overflow: auto;
  /*
  background-color: #f2f3f5;
  */
  background-color: var(--firstBgColor);
  font-family: 'Microsoft JhengHei', 'Roboto', 'HanHei TC', 'PingFang HK', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-family: 'PingFangSC-Regular';
  position: relative;
}
.mo-classnull-triangletop {
  border-top: 6px solid #bbb;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  right: 10%;
  top: 5%;
}
.mo-classnull-bgImg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 275px;
  height: 170px;
  margin: 20px auto 0;; /* 155px auto 0 */
  margin-left: 35px;
  background-size: cover;
  background-image: url('../images/not-found.svg');
}
.mo-classnull-tip {
  color: #6c6c6c; /* #ffffffc2 */
  font-size: 16px;
  text-align: center;
  margin-top: 20px; /* 54px; */
  padding-right: 15px;
}

.modal-content.mo {
	background-color: var(--secondBgColor);
}

.modal-header.mo {
	border-bottom: none;
	padding: 15px 15px 0px 15px;
}

.modal-footer.mo {
	border-top: none;
	/*
	padding: 0px 15px 15px 15px;
	*/
}

.has-success .form-control-feedback.mo {
	color: var(--has-success);
}
.has-warning .form-control-feedback.mo {
	color: var(--has-warning);
}
.has-error .form-control-feedback.mo {
	color: var(--has-error);
}
.form-control-feedback.eye {
	color: var(--black);
}

.help-block.success {
	color: var(--has-success);
}
.help-block.warning {
	color: var(--has-warning);
}
.help-block.error {
	color: var(--has-error);
}

.form-control.mo {
	background-color: var(--secondBgColor);
	color: var(--form-control-color);
}

.form-control.mo:focus {
	border-color: var(--form-control-focus);
	-webkit-box-shadow: var(--form-control-focus-shadow);
	box-shadow: var(--form-control-focus-shadow);
}
.form-control.mo[disabled] {
	border-color: var(--borderColor2);
	color: var(--form-control-color-disabled);
}

/* other */
#loading {
	position: absolute;
	/*
	left: 40%;
	*/
	left: 25%;
	top: 40%;
	z-index: 9999;
}

#loading-box {
	width: 180px;
	height: 140px;
	/*
	background-color: #c6c6c6af;
	*/
	background-color: var(--loading-box);
	padding-top: 20px;
	border-radius: 15px;
}
	
#loading-indicator {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1);
  /*
  background-color: rgba(0,0,0,0.2);
  background-color: rgba(0,0,0,0.5);
  */
  z-index: 2;
  cursor: pointer;
}

#loading-indicator.show {
	display: '';
}

.vm {
	vertical-align: middle;
}

.ui-helper-hidden-accessible { display:none; }

/* end of other */

.DSEDJ {
	background-image: url('../images/DSEDJ.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
	/*
	background-size: auto 100%;
	background-size: cover;
	height: auto;
	width: auto;
	*/
}

.textr { text-align: right; }
.textc { text-align: center; }
.padding-right-120 { padding-right: 120px; }

* {
	touch-action: manipulation;
}

body {
	padding-top: max(env(safe-area-inset-top), 50px);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-bottom: max(env(safe-area-inset-bottom), 30px);
}

.adm-divider {
	display: flex;
	align-items: center;
	margin: 16px 0;
	color: var(--adm-color-weak);
	font-size: 14px;
	border-width: 0;
	border-color: var(--adm-border-color);
	border-style: solid;
}

.adm-divider-left.adm-divider::before {
	max-width: 10%;
}

.adm-divider-right.adm-divider::after {
	max-width: 10%;
}

.adm-divider::after, .adm-divider::before {
	flex: auto;
	display: block;
	content: '';
	border-style: inherit;
	border-color: inherit;
	border-width: 1px 0 0;
}

.adm-divider-content {
	flex: none;
	padding: 0 16px;
}

.modal.anti-antd {
	white-space: normal;
}

.ant-form-item-label.anti-antd {
	white-space: normal;
}