@import 'variable.less';
.mymain_container{
	min-height: 80vh;
	.number-list{
		height: 60px;
    margin-bottom: 22px;
		>ul{
		    margin: 0 auto;
		    width: 100%;
		    padding: 0;
		    text-align: center;
			>li{
				max-width:72%;
				list-style: none;display: inline-block;

				div{
					display: inline-block;
					vertical-align: middle;
					transition: ease all 0.2s;
					background: @m-pink;
					&.circle{
						transition: ease all 0.2s;
					    color: @txt-sub;
				        width: 48px;
					    border-radius: 50%;
					    font-size: 21px;
					    height: 48px;
					    line-height: 44px;
					}
					&.line{
						width: 40px;
						height: 2px;
					}
				}
				
				&.active{
					div{
						transition: ease all 0.2s;
						background: @main-blue;
						&.circle{
							transition: ease all 0.2s;
							height: 60px;
						    width: 60px;
						    line-height: 55px;
						}
					}
				}
				&.done{
						div{
							background: @main-blue;
						}
				}
			}
		}
	}
	.form_list{
		display: none;
		&.active{
			display: block;
		}
		.title_name{
			font-size: 20px;
			color: @m-pink;
			font-weight: 500;
		}
		.verification_text{
			li{
				margin-bottom: auto;
			}
		}
		.veri{
			text-align: center;
		}
		.event_custom{
			background: @gray3;
			text-align: center;
			padding: 30px 0; 
			position: relative;
			.custom{
				background: @m-pink;
				padding: 15px 45px;
				border: none;
				color:@txt-sub; 
				cursor: pointer;
			}
			.back_but{
				cursor: pointer;
			    background: none;
			    border: none;
			    position: absolute;
			    left: 34px;
			    top: 35%;
			    color: white;
				@media (max-width: 580px) {
					.mymain_container .form_list .event_custom .back_but{
					position:relative;
					width:100%;
					display:block;
					margin-bottom: 15px;
					left:0px;}
					}
			    i{
			    	margin-right: 5px;
			    	font-size: 15px;
			    }
			}
		}
		.cus_form{
			.table_form{
				margin-top: 15px;
				.form_elem{
					position: relative;
					margin-bottom: 10px;
					label,input,select{
						display: inline-block;
						font-weight: lighter;
					    vertical-align: top;
					}
					.myemail2{
					    pointer-events: none;
    					background: rgb(232, 232, 232);
					}
					label{
						width: 35%;
						span{
							color: @m-pink;
							font-size: 12px;
						}
					}
					i{
				    	font-size: 16px;
					    font-weight: normal;
					    position: absolute;
					    top: 26%;
					    margin-left: 10px;
					    color: #e6007e;
					}
					input{
					    border-radius: 5px;
					    border: 1px solid #ebebeb;
					    width: 60%;
					    padding: 11px 10px;
						&:active{
							 border: 1px solid #ebebeb;
						}
					}
					select{
						border-radius: 5px;
					    border: 1px solid #ebebeb;
					    padding: 11px 10px;
					}
				}
			}
		}
		.cus_formtext{
			background:white; 
			margin: 0 auto;
			.list_information{
				padding: 2%;
				box-sizing: border-box;
				.info_text{
					>div{
						display: inline-block;
						vertical-align: top;
						margin-bottom: 15px;
						&:first-child{
							width: 35%;
							position: relative;
							>span{
								float: right;
							}
							@media (max-width: 560px) {
							margin-bottom: 0;
							padding-left: 10px;
							width: 100%;
							}
						}
						&:last-child{
							width: 64%;
							padding-left: 10px;
							box-sizing: border-box;
							@media (max-width: 560px) {
							width: 100%;
							}
						}
					}
				}
			}
		}
		.agree{
		    padding: 2%;
    		box-sizing: border-box;
    		i{
			    width: 20px;
			    height: 20px;
			    background: #fff;
			    text-align: center;
			    border: 1px solid #bcbcbc;
			    padding: 1px;
			    border-radius: 2px;
			    cursor: pointer;
			    float: left;
			    margin-right: 10px;
    		}
		}
		.cont_steps{
			
			color: @txt-gray;
			p{
				font-weight: 600;
			}
			.pinkme{
				color: @m-pink;
				margin-right: 5px;
			}
			.blueme{
				color: @m-blue;
				margin-right: 5px;
			}
			.field_list{
				background:@m-graylight;
				padding: 30px 15px;
				.limit_width{
					max-width: 1000px;
					margin: 0 auto;
				}
			}

		}
	}
	.form_list_out{
		display: none;
		&.active{
			display: block;
		}
		.title_name{
			font-size: 20px;
			color: @m-pink;
			font-weight: 500;
		}
		.verification_text{
			li{
				margin-bottom: auto;
			}
		}
		.veri{
			text-align: center;
		}
		.event_custom{
			background: @gray3;
			text-align: center;
			padding: 30px 0; 
			position: relative;
			.custom{
				background: @m-pink;
				padding: 15px 45px;
				border: none;
				color:@txt-sub; 
				cursor: pointer;
			}
			.back_but{
				cursor: pointer;
			    background: none;
			    border: none;
			    position: absolute;
			    left: 34px;
			    top: 35%;
			    color: white;
				@media (max-width: 580px) {
					.mymain_container .form_list .event_custom .back_but{
					position:relative;
					width:100%;
					display:block;
					margin-bottom: 15px;
					left:0px;}
					}
			    i{
			    	margin-right: 5px;
			    	font-size: 15px;
			    }
			}
		}
		.cus_form{
			.table_form{
				margin-top: 15px;
				.form_elem{
					position: relative;
					margin-bottom: 10px;
					label,input,select{
						display: inline-block;
						font-weight: lighter;
					    vertical-align: top;
					}
					.myemail2{
					    pointer-events: none;
    					background: rgb(232, 232, 232);
					}
					label{
						width: 35%;
						span{
							color: @m-pink;
							font-size: 12px;
						}
					}
					i{
				    	font-size: 16px;
					    font-weight: normal;
					    position: absolute;
					    top: 26%;
					    margin-left: 10px;
					    color: #e6007e;
					}
					input{
					    border-radius: 5px;
					    border: 1px solid #ebebeb;
					    width: 60%;
					    padding: 11px 10px;
						&:active{
							 border: 1px solid #ebebeb;
						}
					}
					select{
						border-radius: 5px;
					    border: 1px solid #ebebeb;
					    padding: 11px 10px;
					}
				}
			}
		}
		.cus_formtext{
			background:white; 
			margin: 0 auto;
			.list_information{
				padding: 2%;
				box-sizing: border-box;
				.info_text{
					>div{
						display: inline-block;
						vertical-align: top;
						margin-bottom: 15px;
						&:first-child{
							width: 35%;
							position: relative;
							>span{
								float: right;
							}
							@media (max-width: 560px) {
							margin-bottom: 0;
							padding-left: 10px;
							width: 100%;
							}
						}
						&:last-child{
							width: 64%;
							padding-left: 10px;
							box-sizing: border-box;
							@media (max-width: 560px) {
							width: 100%;
							}
						}
					}
				}
			}
		}
		.agree{
		    padding: 2%;
    		box-sizing: border-box;
    		i{
			    width: 20px;
			    height: 20px;
			    background: #fff;
			    text-align: center;
			    border: 1px solid #bcbcbc;
			    padding: 1px;
			    border-radius: 2px;
			    cursor: pointer;
			    float: left;
			    margin-right: 10px;
    		}
		}
		.cont_steps{
			
			color: @txt-gray;
			p{
				font-weight: 600;
			}
			.pinkme{
				color: @m-pink;
				margin-right: 5px;
			}
			.blueme{
				color: @m-blue;
				margin-right: 5px;
			}
			.field_list{
				background:@m-graylight;
				padding: 30px 15px;
				.limit_width{
					max-width: 1000px;
					margin: 0 auto;
				}
			}

		}
	}
}

