//color
$bar-background-color: #F1F1F1;
$bar-title-color: #343434;
$bar-bottom-color: #C4C4C4;
$article-background-color: #FFFFFF;



//font
$city-title-font: 1rem;
$article-color: #333333;


//global
html, body {
	font-size: 100%;
//	font-size: 62.5%;
}

ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;

	li {
		padding: 0px;
		margin: 0px;
	}
}

a {
	color: #333333;
	display: block;
}

article {
	font-size: 1rem;
	color: $article-color;
	background-color: $article-background-color;
}
.page{
	background-color:$article-background-color;
}





.btn {
	border-radius: 0px;
}

.btn-block {
	margin: 0px;
}




//search page style
$operate-background-color: #FFFFFF;

//icon
$station-switch-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0JFNDU0QjQ3OTQzMTFFNEE1MDhCN0EwM0Q5RkE2OTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0JFNDU0QjU3OTQzMTFFNEE1MDhCN0EwM0Q5RkE2OTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQkU0NTRCMjc5NDMxMUU0QTUwOEI3QTAzRDlGQTY5OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQkU0NTRCMzc5NDMxMUU0QTUwOEI3QTAzRDlGQTY5OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phzn8DkAAAfTSURBVHja7FxrbBRV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");


@mixin bottom-triangle {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-top: 8px solid #FFFFFF;
    border-right: 8px solid #C5C5C5;
}


.flight-search {
	padding: 10px 5%;

	.operate {

		background-color: $operate-background-color;

		.station {
			
			padding: 10px 0px;

				.choose-station {
					float: left;
					width: 40%;
					border-bottom: 1px solid #E0E0E0;
					position: relative;

					.station-title {
						color: #757575;
						font-size: $city-title-font;
						padding-left: 2px;
						height: 25px;
						line-height: 25px;
					}

					.choose-btn {
						color: #404040;
						font-weight: bold;
						font-size: 1.2rem;
						height: 40px;
						line-height: 40px;
						cursor: pointer;
						position: relative;
                        padding-left: 1px;
                        white-space: nowrap;

						span {
							overflow:hidden;
                        	text-overflow:ellipsis;
                        	display: block;
							@include transition(all 0.2s ease-in-out);
						}

					}
    
					.bottom-triangle {
                        @include bottom-triangle;
                    }
					
					.switch-right {
						@include transform(translateX(150%));
					}

					.switch-left {
						@include transform(translateX(-150%));
					}

					.overturn {
						@include transform(rotateX(90deg));
					}
				}

				.switch {
					float: left;
					width: 20%;
					padding-top: 25px;

					.switch-btn {
						width: 30px;
						height: 30px;
						margin: 0px auto;
						background-image: $station-switch-icon;
						background-position: center bottom;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						cursor: pointer;
						
					}

					.switch-ratate {
						@include transform(rotate(180deg));
						transition: all 0.3s ease-in-out;
					}
				}
			
		}

		.date, .ticket{
			padding: 10px 0px;
			
			.date-from {

			}
			
			.around {
				margin-right: 5px;
				float: left;
				width: 45%;
				overflow: hidden;
			}

			.date-to {
				float: right;
				width: 45%;
				display: none;
				overflow: hidden;
			}

	        .date-title, .ticket-title {
	            color: #757575;
	            font-size: $city-title-font;
	            padding-left: 2px;
	            height: 25px;
	            line-height: 25px;
	        }
	    
			.date-region, .ticket-region {
	            position: relative;
				padding: 10px 0px 10px 1px;
				border-bottom: 1px solid #D8D8D8;
				font-size: 1rem;
//	            font-size: 1.2rem;
	            font-weight: bold;
	            height: 41px;
	            
	            span {
	            	white-space: nowrap;
	            }

	            .bottom-triangle {
	                @include bottom-triangle;
	            }
			}

		}

		.filter {
			padding-bottom: 10px;

			.filter-item {
				height: 50px;
				line-height: 50px;
                float: left;
                width: 50%;
			}
			
		}

	}

	.search {
		padding: 20px 0px;
	}
	
	.memberBtn{
		background: #fceeed;
		border:1px solid #ee897f;
		text-align: center;
		color:#e65749;
		float:left;
		width: 45%;
		padding:10px 0px;
	}

	.guestBtn{
		background: #ecf3fd;
		border:1px solid #7c9dea;
		text-align: center;
		color:#4473df;
		float:right;
		width: 45%;
		padding:10px 0px;
		
	}

	.history {
		color: #666666;
		margin-bottom: 40px;

		.history-title {
			text-align: center;
            color: #404040;
            height: 40px;
            line-height: 40px;
		}

		.item {
			text-align: center;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
		}

		.active{
			background:#f8d1cc;
			color:#e6584a;
		}
	}

}