page{
	background-color: $page-color-light;
	font-size:$font-base;
	font-family: "Inter-Regular";
	font-weight:600;
}
.hz-page{
	padding-bottom:calc(var(--window-bottom) + 20px);
}
.hz-bg-white{
	background-color: $page-color-light;
}
.hz-bg-primary{
	background-color: $base-color;
}
.hz-bg-primary:active{
	background-color: $base-color-active;
}
.hz-bg-disPrimary{
	background-color: $base-color-disActive;
}
.hz-bg-light{
	background-color: $base-color-light;
}
.hz-font-color-black{
	color: $font-color-black;
}
.hz-font-color-dark{
	color: $font-color-dark;
}
.hz-spacing{
	margin-left:$page-col-spacing;
	margin-right:$page-col-spacing;
}
.hz-split{
	border-top:1rpx solid #dddddd;
	margin-top:6px;
	margin-bottom:6px;
}
.hz-split-primary{
	border-top:1rpx solid $base-color;
	margin-top:6px;
	margin-bottom:6px;
}
.text-truncate {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
.hz-row-spacing{
	margin-top:$page-row-spacing;
}
.hz-font-min{
	font-size:$font-min;
}
.hz-font-12px{
	font-size:$font-12px;
}
.hz-font-sm{
	font-size:$font-sm;
}
.hz-font-base{
	font-size:$font-base;
}
.hz-font-md{
	font-size:$font-md;
}
.hz-font-lg{
	font-size:$font-lg;
}
.hz-font-xl{
	font-size:$font-xl;
}
.hz-font-color-danger{
	color:$font-color-highlight1;
}
.hz-font-color-primary{
	color:$font-color-highlight2;
}
.hz-font-color-light{
	color:$base-color-light;
}
.hz-font-color-white{
	color:$font-color-white;
}
.hz-font-normal{
	font-family: "Inter-Regular";
}
.hz-font-bold{
	font-family: "Inter-Medium";
}
.hz-font-bolder{
	font-family: "Inter-Bold";
}
.hz-text-left{
	text-align: left;
}
.hz-text-center{
	text-align: center;
}
.hz-text-right{
	text-align: right;
}
.hz-banner-bg{
  border-radius:  0 0 5% 5%; 
}
.hz-card-profile{
  border-radius: 12px; 
  padding:18px;
  background-color: $font-color-highlight2;
  color:$font-color-white;
}
.hz-card-booking{
  border-radius: 12px; 
  padding:18px;
  background-color: $page-color-greylight;
  color:$font-color-black;
}
.hz-card-extend{
  border-radius: 12px; 
  padding:18px;
  background-color: $base-color-light;
  color:$font-color-black;
}
.hz-card-level{
  border-radius: 4px; 
  padding:0px 4px;
  font-size:9px;
  height:12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $uni-color-error;
  color:$font-color-white;
}
.hz-mr-t-30{
	margin-top:30rpx;
}
.hz-mr-b-30{
	margin-bottom:30rpx;
}
.hz-mr-t-20{
	margin-top:20rpx;
}
.hz-mr-b-20{
	margin-bottom:20rpx;
}
.hz-pd-16{
	padding:16rpx;
}
.hz-pd-30{
	padding:30rpx;
}
.hz-pd-l-30{
	padding-left:30rpx;
}
.hz-pd-r-30{
	padding-right:30rpx;
}
.hz-nav-btn{
	width:22px;
	height:22px;
}
.hz-flex-row{
	display: flex;
	flex-direction: row;
}
.hz-flex-col{
	display: flex;
	flex-direction: column;
}
.hz-flex-vertical-mid{
	justify-content: center;
	align-items: center;
}
.hz-btn-status{
	border-radius: 4px;
	padding: 3px 2px;
	font-size:20rpx;
	color:#ffffff;
	text-align:center;
}
.hz-status-duein{
	background-color: $font-color-spec;
}
.hz-status-reserved{
	background-color: $uni-color-primary;
}
.hz-status-cancel{
	background-color: $font-color-highlight2;
}
.hz-status-checkedin{
	background-color: $font-color-spec;
}
.hz-status-dueout{
	background-color: $font-color-spec;
}
.hz-status-pending{
	background-color: $uni-text-color-placeholder;
}
.hz-status-waitlist{
	background-color: $uni-color-error;
}
.hz-status-approval{
	background-color: $uni-color-error;
}
.hz-status-font-duein{
	color: $font-color-spec;
}
.hz-status-font-reserved{
	color: $uni-color-primary;
}
.hz-status-font-cancel{
	color: $font-color-highlight2;
}
.hz-status-font-approval{
	color: $uni-color-error;
}
.hz-status-font-checkedin{
	color: $font-color-spec;
}
.hz-status-font-dueout{
	color: $font-color-spec;
}
.hz-status-font-pending{
	color: $uni-text-color-placeholder;
}
.hz-status-font-waitlist{
	color: $uni-color-error;
}
.hz-status-font-pendingApproval{
	color: #E8D9BA
}
.hz-btn-extend{
	border-radius: 4px;
	padding: 3px 2px;
	background-color: $base-color;
	color:#ffffff;
	text-align:center;
	font-size: 20rpx;
	width:30%;
}
.hz-btn-group{
	border-radius: 4px;
	padding: 3px 2px;
	background-color: $font-color-spec;
	color:#ffffff;
	text-align:center;
	font-size: 20rpx;
	width:30%;
}
.hz-btn-sharer{
	border-radius: 4px;
	padding: 3px 2px;
	background-color: #4bc397;
	color:#ffffff;
	text-align:center;
	font-size: 20rpx;
	width:30%;
}
.hz-btn-sm{
	border-radius: 6rpx;
	padding: 10rpx 20rpx;
	background-color: $base-color;
	color:#ffffff;
	text-align:center;
	font-size:  $font-sm;
}
.hz-date-title{
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	background-color: $base-color;
	font-size: $font-lg;
	color:$font-color-white;
	font-weight:bold;
}
.hz-date-des {
  font-size: $font-12px;
  color: $font-color-base;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.hz-btn{
	background-color: $base-color;
	width:100%;
	margin-top:6px;
	height:44px;
	line-height:44px;
	border-radius:22px;
}
.hz-btn-line{
	background-color: #ffffff;
	border:1px solid $base-color;
	width:100%;
	color:$base-color;
	margin-top:6px;
	height:44px;
	line-height:44px;
	border-radius:22px;
}
.hz-btn:active{
    background-color: $base-color-active;
}
.hz-btn-light{
	background-color: $base-color-light;
	width:100%;
	margin-top:6px;
	height:44px;
	line-height:44px;
	border-radius:22px;
}
.hz-btn-danger{
	background-color: $base-color-danger;
	width:100%;
	margin-top:6px;
	height:44px;
	line-height:44px;
	border-radius:22px;
}
.hz-circle{
  width: 20px;
  height: 20px;
  background-color: $base-color;
  border-radius: 50%;
}
.hz-placeholder{
	color:#666;
	font-size:$font-md;
}
.hz-disabled{
  opacity: 0.4;
  background-color: #dddddd;
}
.hz-btn-leftRight {
	background-color: #ffffff;
	border-top:1rpx solid #f4f4f4;
	width:100%;
	.hz-btn-left {
		width: 50%;
		text-align: center;
		margin-top:12rpx;
		height:44px;
		line-height:44px;
		border-top-left-radius:22px;
		border-bottom-left-radius:22px;
	}
	.hz-btn-right {
		width: 50%;
		text-align: center;
		margin-top:12rpx;
		height:44px;
		line-height:44px;
		border-top-right-radius:22px;
		border-bottom-right-radius:22px;
	}
}
.hz-card-waitlist{
  border-radius: 12px; 
  padding:18px;
  background-color:$base-color-notice;
  color:$font-color-black;
}
.hz-card-approval{
  border-radius: 12px; 
  padding:18px;
  background-color:$base-color-approval;
  color:$font-color-black;
}
.book {
	background-color: #ffffff;
	border-top:1rpx solid #f4f4f4;
	width:100%;
}
/* textarea */
.uni-textarea{
	width:100%;
	background:#FFF;
}
.uni-textarea textarea{
	width:96%;
	padding:18rpx 2%;
	line-height:1.6;
	font-size:28rpx;
	height:150rpx;
}
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}

	&__line {
		@include flex;
		margin-top: 10px;
		text-align:center;

		&__item {
			margin-right: 15px;

			&__image {
				width: 60px;
				height: 60px;
			}

			&__text {
				margin-top: 5px;
				color: $u-content-color;
				font-size: 12px;
				text-align: center;
			}

			&--no-margin-right {
				margin-right: 0;
			}
		}
	}
}