/* 創建模板按鈕 */
.md_creat_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 16px 0 12px;
	border-radius: 24px;
	background: #3DB893;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.md_creat_btn i{
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	background: url(../../assets/images/control/icon_create.svg) no-repeat center;
	filter: invert(1);
	margin-right: 8px;
}
.md_creat_btn:disabled{
	background: #f6f6f6;
	color: rgba(0, 0, 0, 0.24);
}
.md_creat_btn:disabled i{
	filter: none;
	opacity: 0.24;
}
.md_main_txt{
	padding-top: 16px;
	line-height: 14px;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
}
.md_main_txt h2{
	font-weight: 700;
	line-height: 16px;
	margin-bottom: 8px;
}
.md_main_txt li.space {
	margin: 16px 0;
}

/* 模板解說 */
.md_comment{
	padding: 8px 16px;
	background: #fff;
}
.md_commBg{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 16px;
	background: #F9F9F9;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	color: #000;
	font-size: 14px;
}
.md_comm_txt{
	line-height: 16px;
}
.md_comm_txt li:first-child{
	line-height: 24px;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}
.md_commBg .md_creat_btn{
	width: auto;
}
.md_comm_txt a{
	margin-left: 4px;
}



/* 必填欄位 */
.md_required{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 16px;
	color: #FF4E65;
	font-size: 14px;
}
.md_required::before{
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background: #FF4E65;
	border-radius: 8px;
	margin-right: 8px;
}

/* 步驟 */
.md_step{
	display: flex;
	padding: 20px 16px;
	background: #fff;
	counter-reset: num;
}
.md_step li{
	position: relative;
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}
.md_step li+li{
	margin-left: 40px;
}
.md_step li::before{
	counter-increment: num;
	content: counter(num);
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	line-height: 24px;
	background: #3DB893;
	border: 1px solid #3DB893;
	border-radius: 24px;
	color: #fff;
	text-align: center;
	margin-right: 8px;
}
.md_step li.--ok::before{
	background: url(../../assets/images/control/icon_stepOk.svg) no-repeat center;
	color: transparent;
}
.md_step li.--on ~ li::before{
	background: #fff;
	color: #3DB893;
}

.md_step li + li::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(100% + 8px);
	width: 24px;
	height: 2px;
	background: #E0E0E0;
	border-radius: 4px;
	margin: auto;
}

/* modal button */
.md_list{
	position: relative;
	align-items: center;
	padding: 16px 0;
	background: #fff;
	border-top: 1px solid #f6f6f6;
}
.md_list_title{
	padding-left: 16px;
	line-height: 16px;
	color: #44484A;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 16px;
}
.md_list_item{
	position: relative;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
}
.md_list_item::before,
.md_list_item::after {
	content: '';
	flex: none;
	display: block;
	width: 16px;
	height: 1px;
}
.md_list_item li{
	padding: 3px 8px;
	line-height: 16px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.24);
	border-radius: 24px;
	color: rgba(0, 0, 0, 0.72);
	font-size: 14px;
	white-space: nowrap;	
}
.md_list_item li + li{
	margin-left: 8px;
}
.md_list_item li.--on{
	background: #5A5D5F;
	border: 1px solid #5A5D5F;
	color: #fff;
}

/* sport type */
.md_type{
	position: relative;
	background: #fff;
}
.md_type_list{
	display: flex;
	font-size: 13px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.72);
	overflow-x: auto;
	overflow-y: hidden;
}
.md_type_list li{
	padding: 16px;
	white-space: nowrap;
}
.md_type_list li.--on{
	color: #006666;
}
/* 左右滑動控制 */
.--scroll::before,
.md_list::after,
.md_type::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 100%;
	background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
	z-index: 2;
}

.md_list::after,
.md_type::after {
	left: auto;
	right: 0;
	transform: rotate(180deg);
}

.--right_no_scroll::after {
	content: none;
}

/* title */
.md_title{
	display: flex;
	align-items: center;
	height: 56px;
	padding: 16px;
	background: #F9F9F9;
	border-radius: 8px 8px 0 0;
}
.md_title ul{
	display: flex;
	font-weight: 700;
	font-size: 16px;
}
.md_title li{
	position: relative;
}
.md_title li + li{
	margin-left: 17px;
}
.md_title li + li::before{
	content: '';
	position: absolute;
	display: block;
	width: 1px;
	height: 12px;
	background: #334547;
	top: 0;
	bottom: 0;
	right: calc(100% + 8px);
	margin: auto;
}
.md_set_info {
	padding: 24px 16px 16px;
	background: #fff;
	border-radius: 0 0 8px 8px;
}
.md_set_info.--onlytxt{
	padding-top: 16px;
}
.md_info{
	position: relative;
	width: 24px;
	height: 24px;
	margin-left: 8px;
}
.md_info::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: url(../../assets/images/control/icon_notice.svg) no-repeat center;
	filter: invert(36%) sepia(54%) saturate(5928%) hue-rotate(201deg) brightness(103%) contrast(103%);
}
.md_inside_title,
.md_mini_title {
	display: flex;
	align-items: center;
	padding: 3px 0 0;
	color: rgba(0, 0, 0, 0.64);
	font-size: 14px;
	margin-bottom: 27px;
}
.md_inside_title{
	padding: 0;
	margin-bottom: 24px;
}
.md_inside_title.--dot::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background: #FF4E65;
	border-radius: 8px;
	margin: 0 12px 0 4px;
}
.md_mini_title{
	color: #44484A;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
}
.md_line{
	position: relative;
	display: block;
	height: 1px;
	background: #E0E0E0;
	margin: 16px 0;
}
.md_line::before,
.md_line::after{
	content: '';
	position: absolute;
	width: 16px;
	height: 1px;
	background: #f6f6f6;
	top: 0;
	right: 100%;
}
.md_line::after{
	left: 100%;
}
.md_set_txt{
	margin-bottom: 24px;
}
.md_set_txt li{
	line-height: 18px;
	color: #000;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 16px;
}
.md_set_txt li::before{
	content: attr(data-txt);
	display: block;
	line-height: 16px;
	color: rgba(0, 0, 0, .72);
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 4px;
}

/* 開關 */
.md_switch {
	position: relative;
	display: block;
	width: 28px;
	height: 16px;
	margin-left: auto;
	pointer-events: auto !important;
}
.md_switch input {
	display: none !important;
}

.md_switch>div {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #5A5D5F;
	border-radius: 16px;
}

.md_switch div::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	background: #5A5D5F;
	border-radius: 12px;
	transition: transform .3s ease-in-out;
}

.md_switch input:checked~div {
	background: #3DB893;
	border-color: #3DB893;
}

.md_switch input:checked~div::before {
	background: #fff;
	transform: translate3d(100%, 0, 0);
}
.md_switch div::after {
	content: attr(data-txt);
	position: absolute;
	top: 0;
	right: calc(100% + 8px);	
	color: rgba(0, 0, 0, 0.64);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
}
.md_switch input:checked~div::after{
	color: #3DB893;
}

/* 創建模板修改刪除 */
.md_editBar{
	margin-bottom: 16px;
}
.md_editBar_item{
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.24);
	border-radius: 4px;
}
.md_edit_btn{
	position: relative;
	display: block;
	flex: 1 1 100%;
	height: 100%;
	padding-left: 32px;
	color: rgba(0, 0, 0, 0.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}
.md_edit_btn::before{
	position: absolute;
	content: '';
	width: 32px;
	height: 32px;
	background: url(../../assets/images/control/icon_edit_B.svg) no-repeat center;
	opacity: 0.64;
	top: 8px;
	left: 0;
}
.md_editBar_item i,
.md_copyUrl i {
	flex: none;
	width: 32px;
	height: 32px;
	opacity: 0.64;
}
.md_editBar_item i{
	margin-left: 8px;
}
.icon_copy_B{
	background: url(../../assets/images/control/icon_copy_B.svg) no-repeat center;
}
.icon_del_B {
	background: url(../../assets/images/control/icon_del_B.svg) no-repeat center;
}

/* 複製網址 */
.md_copyUrl{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	height: 32px;
	line-height: 32px;
	background: #fff;
	border-radius: 8px;
	color: #000;
}
.md_copyUrl i{
	margin-left: 16px;
}

/* 輸入匡 */
.md_label{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 56px;
	padding: 12px 8px 12px 16px;
	background: #fff;
	border: 1px solid #5A5D5F;
	border-radius: 4px;
}
.md_label_w {
	width: 100%;
	max-width: 460px;
}
.md_label:not(.--pc):not([style])+.md_label:not(.--mini),
.md_notice+.md_label,
.md_label.--pc:not([style])+.md_label.--pc{
	margin-top: 24px;
}
/* .md_label:not([style])+.md_label{
	margin-top: 0!important;
} */
.md_label.--pre{
	padding: 12px;
}
.md_label.--dot::after{
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background: #FF4E65;
	border-radius: 8px;
	left: calc(100% - 4px);
	bottom: calc(100% - 4px);
}
.md_label input{
	flex: 1 1 100%;
	max-width: 100%;
	height: 100%;
	color: #000;
	font-size: 16px;
}
/* 320出現寬度錯誤*/
.md_label.--pre input {
	max-width: 100px;
}
.md_label code {
	position: absolute;
	height: 32px;
	line-height: 32px;
	color: rgba(0, 0, 0, 0.64);
	font-size: 16px;
	top: 0;
	bottom: 0;
	left: 16px;
	margin: auto;
	pointer-events: none;
	transition: all 0.3s ease;
}
.md_label .md_pre{
	display: block;
	flex: none;
	height: 100%;
	line-height: 32px;
	padding: 0 8px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 2px;
	color: rgba(0, 0, 0, 0.4);
	font-size: 16px;
	font-weight: 700;
	margin-right: 8px;
}
.md_label .icon_load{
	flex: none;
	width: 32px;
	height: 100%;
	background: url(../../assets/images/control/icon_miniload.svg) no-repeat center;
	animation: lds_spinner 1s linear infinite;
}
@keyframes lds_spinner {
	100% {
		transform: rotate(360deg);
	}
}
.md_name_btn{
	flex: none;
	height: 100%;
	line-height: 32px;
	padding: 0 12px;
	background: #3DB893;
	border-radius: 16px;
	color: #fff;
	font-size: 12px;
	margin-left: auto;
}
.md_label i {
	flex: none;
	width: 32px;
	height: 32px;
	opacity: 0.64;
}
.icon_pw_hidden{
	background: url(../../assets/images/control/icon_pw_hidden.svg) no-repeat center;
}
.icon_pw_visible {
	background: url(../../assets/images/control/icon_pw_visible.svg) no-repeat center;
}
.icon_dropdown{
	background: url(../../assets/images/control/icon_dropdown.svg) no-repeat center;
	pointer-events: none;
}

/* 多種組合 */
.md_double_label,
.md_complex_label {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.md_double_group {
	width: calc((100% - 17px) / 2);
}
.md_complex_label.--readonly{
	margin-top: 8px;
}
.md_double_group .md_notice{
	color: rgba(0, 0, 0, 0.64);
}
.md_complex_label .md_label:first-child {
	width: calc(100% - 140px);
}
.md_complex_label label.--mini {
	width: 131px;
	margin-left: 9px;
}
.md_rate{
	color: #000;
	font-size: 12px;
	font-weight: bold;
	margin-top: 8px;
}

/* 錯誤警告字 */
.md_notice{
	padding-top: 8px;
	color: #FF4E65;
	font-size: 12px;
}
.--pre+.md_notice{
	color: #29C2CC;
}
.md_list .md_notice{
	padding: 16px 0 0 16px;
}
.md_notice:empty{
	display: none;
}
/* 密碼強度 */
.md_notice_pw{
	line-height: 14px;
	padding-top: 8px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.64);
}
.md_pw_strong{
	display: flex;
	align-items: center;
	margin-bottom: 4px;
}
.md_pw_strong span{
	margin-right: 8px;
}
.md_pw_strong ul{
	display: flex;
	justify-content: space-between;
	width: 68px;
	height: 6px;
	margin-right: 8px;
	border-radius: 6px;
	overflow: hidden;
}
.md_pw_strong li{
	width: 12px;
	height: 100%;
	background: #f6f6f6;
}
.md_pw_strong.lv1 li {
	background: #FF4E65;
}
.md_pw_strong.lv1 li:nth-child(1)~li {
	background: #f6f6f6;
}
.md_pw_strong.lv2 li {
	background: #FF4E65;
}
.md_pw_strong.lv2 li:nth-child(2)~li {
	background: #f6f6f6;
}
.md_pw_strong.lv3 li {
	background: #29C2CC;
}
.md_pw_strong.lv3 li:nth-child(3)~li {
	background: #f6f6f6;
}
.md_pw_strong.lv4 li {
	background: #29C2CC;
}
.md_pw_strong.lv4 li:nth-child(4)~li {
	background: #f6f6f6;
}
.md_pw_strong.lv5 li {
	background: #29C2CC;
}
.md_pw_strong code{
	color: #FF4E65;
	font-weight: 700;
}
.md_pw_strong:not(.lv1):not(.lv2) code {
	color: #29C2CC;
}
.md_pw_strong.hide_item+.md_pw_warn{
	display: none;
}
.md_pw_warn{
	margin-bottom: 8px;
}
.md_pw_warn code{
	font-weight: 700;
}
.md_notice_pw .md_notice{
	padding-top: 0;
	margin-bottom: 8px;
	color: #FF4E65;
}
.md_pw_note{
	list-style: decimal outside;
	padding-left: 14px;
}
.md_pw_note li{
	margin-bottom: 8px;
}

/* 下拉選單 */
.md_label select,
.md_select_title{
	display: flex;
	align-items: center;
	flex: 1 1 100%;
	height: 100%;
	margin-right: 8px;
	background: #fff;
	color: #000;
	font-size: 16px;
}
.md_select_ul{
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	width: 100%;
	max-height: 256px;
	padding: 8px 0;
	background: #fff;
	border-radius: 4px;
	filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.16));
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1;
}
.md_select_ul li{
	line-height: 48px;
	padding: 0 16px;
}

/* 輸入匡各種狀態與內部元件樣式 */
/* 滑入點下 */
.md_label.--on {
	border-color: #3DB893;
}
.md_label input:valid + code,
.md_label.--on code,
.md_label.--pre code,
.md_label.--select code {
	height: 16px;
	line-height: 16px;
	padding: 0 8px;
	background: #fff;
	color: rgba(0, 0, 0, 0.8);
	font-size: 14px;
	top: auto;
	bottom: calc(100% - 8px);
	left: 8px;
}
.md_label.--on .icon_dropdown{
	transform: rotate(-180deg);
	opacity: 1;
}

/* disabled */
.--all_disabled .md_type_list,
.--all_disabled .md_type_list li.--on,
.--all_disabled .md_mini_title,
.--all_disabled .md_title,
.--all_disabled .md_double_group .md_notice{
	color: rgba(0, 0, 0, .4);
	pointer-events: none;
}
.--all_disabled .md_info::before{
	filter: invert(100%) sepia(0%) saturate(1140%) hue-rotate(348deg) brightness(110%) contrast(76%);
}
.--all_disabled .icon_dropdown{
	filter: invert(77%) sepia(78%) saturate(1%) hue-rotate(48deg) brightness(100%) contrast(97%);
}
.--all_disabled .md_label,
.--readonly .md_label,
.md_label:not(.--pre).--disabled{
	/*border-color: #f6f6f6;*/
	border-color: #E0E0E0;
	pointer-events: none;
}
.--all_disabled .--dot::after,
.md_label.--disabled.--dot::after {
	content: none;
}
.md_label.--disabled i {
	visibility: hidden;
}
.md_label.--disabled .md_name_btn {
	background: #f6f6f6;
	color: rgba(0, 0, 0, 0.24);
}
.--all_disabled .md_label code,
.--all_disabled .md_label select,
.--all_disabled input:valid+code,
.--all_disabled input,
.--all_disabled .--select span,
.--all_disabled .md_rate,
.md_label:not(.--pre).--disabled code,
.md_label.--disabled input {
	color: rgba(0, 0, 0, 0.24);
}

/* err */
.md_editBar_item.--err,
.md_label.--err{
	border-color: #FF4E65;
}
.--pre.--err+.md_notice {
	color: #FF4E65;
}

/* 彈出視窗 */
.md_alert{
	max-width: 480px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}
.md_alert_title{
	display: flex;
	align-items: center;
	padding: 12px 8px 12px 16px;
	line-height: 24px;
	background: #F9F9F9;
	color: #000;
	font-weight: 700;
	font-size: 16px;
}
.md_alert_title i{
	display: block;
	width: 32px;
	height: 32px;
	background: url(../../assets/images/control/close_x.svg) no-repeat center;
	margin-left: auto;
	opacity: 0.64;
}
.md_alert_info{
	padding: 16px;
}
.md_alert_txt{
	line-height: 16px;
	color: #000;
	font-size: 14px;
}
.md_alert_txt code{
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}
.md_alert_txt li:not(:last-child){
	margin-bottom: 16px;
}
.md_alert_foot{
	display: flex;
	justify-content: space-between;
	padding-top: 24px;
}
.md_alert_foot button{
	width: calc((100% - 16px) / 2);
}
.md_gray_btn{
	height: 40px;
	background: #fff;
	border: 1px solid #5A5D5F;
	border-radius: 4px;
	color: #5A5D5F;
	font-weight: 700;
	font-size: 14px;
}
.md_gray_btn.--cancel{
	background: #5A5D5F;
	color: #fff;
}

/* 確認按鈕 */
.md_footG{
	/* position: absolute; 打開 */
	display: flex;
	width: 100%;
	max-width: 640px;
	height: 40px;
	bottom: constant(safe-area-inset-bottom);
	bottom: env(safe-area-inset-bottom);
}
.md_normal_btn{
	width: 50%;
	height: 100%;
	line-height: 16px;
	padding: 12px 16px;
	background: #3DB893;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}
.md_normal_btn.--cancel{
	background: #5A5D5F;
}
.md_normal_btn:disabled{
	background: #f6f6f6;
	color: rgba(0, 0, 0, 0.24);
}




/* RWD */
.--ph {
	display: none;
}
@media (pointer: coarse),
(-moz-touch-enabled: 1),
screen and (pointer: fine) and (min-resolution: 2dppx) and (max-width: 1023px) {
	.--ph {
		display: flex;
	}

	/*.--pc {
		display: none;
	}*/

	.md_step li::before{
		line-height: 23px;
	}
}

@media only screen and (max-width: 1023px){
	.md_label_w{
		max-width: none;
	}
	.md_step li:not(.--on) code{
		display: none;
	}
	.md_title,
	.md_set_info{
		border-radius: 0;
	}

	.md_step li:not(.--on)::before {
		margin-right: 0;
	}
	.md_double_label .md_label,
	.md_double_group{
		width: 100%;
	}
	.md_double_group+.md_double_group{
		margin-top: 16px;
	}
	.md_comm_txt{
		margin-bottom: 16px;
	}
	.md_comm_txt a{
		display: block;
		margin: 4px 0 0;
	}
	.md_commBg .md_creat_btn{
		width: 100%;
	}
	.md_step li:nth-child(2) {
		white-space: pre-line;
	}
}