.page-yy-form{
	width:100vw;
	height:100vh;
	min-height:100vh;
	overflow: hidden;
	background:#000;
	display:flex;
	flex-direction: column;
	
	 .date-list{
		 display:flex;
		 width:100%;
		 height:60px;
		 // border:1px solid red;
		 padding-top:10px;
		 background:#e2e2e2;
		 padding-bottom:5px;
		 .date-item{
			 display: flex;
			 height:100%;
			 width:15%;
			 flex-direction: column; 
			 justify-content: center;
			 align-items: center;
			 font-size:12px;
			 .week{
				 display:flex;
				 height:40%;
				 justify-content: center;
				 align-items: center;
				 font-size:14px;
				 
				 .text{
					 
				 }
			 }
			 .day{
				 display:flex;
				 height:60%;
				 justify-content: center;
				 align-items: center;
				 font-size:14px;
				 margin-top:10px;
				 
			 }
			 
		 }
		
		 
		 .active{
			 .week{
				 .text{
					 display:flex;
					 color:#FFf;
					 width:25px;
					 height:25px; 
					 background:#b21c1c;
					 border-radius: 50%;
					 justify-content: center;
					 align-items: center; 
				 }
			 }
		 }
		 
	 }
	 
	 .time-list{
		 width:100%;
		 height:90%;
		 background:#f0f0f0; 
		 padding-bottom:80px;
		 overflow: hidden;
		 overflow-y: scroll;
		 .times{
			 height:100%;
			 width:100%;
			  
			 .item{
				 display: flex;
				 flex-direction: row;
				 height:35px!important;
				 border-bottom: 1px solid #f4f4f4;
				 justify-content: flex-start;
				 background:#FFF;
				 align-items: center;
				 
				 .time{
					 display:flex;
					 width:15%; 
					 height:100%;
					 justify-content: center;
					 align-items: center;
					 .text{
						 color:#a2a2a2;
					 }
				 }
				 .status{
					 display:flex;
					 height:100%;
					 width:85%;
					 justify-content: flex-start;
					 align-items: center;
					 .text{
						 font-size:12px;
						 width:100%;
						 height:100%;
						 display:flex;
						 justify-content:center;
						 align-items: center;
					 }
				 }
			 }
			 .disabled{
				background:#f1f1f1;
				.time{
					 .text{
						 color:#b3b3b3;
					 }
				}
				.status{
					 .text{
						 color:#b3b3b3;
					 }
				} 
			 }
			 .Full{
				 background:#ff5500;
				 .time{
					 .text{
						 color:#FFF;
					 }
				 }
				 .status{
					 .text{
						 color:#FFF;
					 }
				 }
			 }
			 .active{
				 background:#ffffff;
				 .time{
					 .text{
						 color:#333;
					 }
				 }
				 .status{
					 .text{
						 color:#333;
					 }
				 }
			 }
			 .selected{
				 background:#ffaa00;
				 .time{
					 .text{
						 color:#FFF;
					 }
				 }
				 .status{
					 .text{
						 color:#FFF;
					 }
				 }
			 }
			 
		 }
		 
	 }
	 
	 .footer{
		 position: absolute;
		 bottom:0px;
		 height:50px;
		 display:flex;
		 width:100%;
		 background:#eeeeee;
		 flex-direction: row; 
		 border-top:1px solid #dcdcdc;
		 justify-content: center;
		 align-items: center;
		.btn{
			background:#eb5c20;
			height:30px;
			width:80%;
			justify-content: center;
			align-items: center;
			font-size:12px;
			display:flex;
			color:#FFF;
			border-radius: 10px;
		}
	 }
	 
	 .package{
		 
		 width:100%;
		 min-height: 200px;
		 background:#FFF;
		 overflow: hidden;
		 border-top-left-radius: 10px;
		 border-top-right-radius: 10px;
		 .title{
			 font-size:14px;
			 font-weight: bold;
			 width:100%; 
			 height:30px;
			 line-height: 30px;
			 text-align:center;
		 }
		 
		 .list{
			 width:100%;
			 background:#FFF;
			 padding:10px;
			 .item{
				 width:180px; 
				 height:200px;
				 border:1px solid red;
				 display:flex;
				 flex-direction: column;
				 justify-content: flex-start;
				 align-items: center;
				 .img{
					 width:100%; 
					 display:flex;
					 flex-direction: column;
					 justify-content: center;
					 align-items: center;
					 border:1px solid red;
					 .icon{
						 width:150px; 
						 height:150px;
						 border:1px solid red;
					 }
				 }
			 }
		 }
	 }
}