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%;
}

/* bookingRecord.vue */
.hz-nav-right {
	margin-top: 2px;
	margin-right: 3px;
}

.hz-nav-right-group {
	border: 1rpx solid #ccc;
	border-radius: 14px;
	padding: 4px 12px;
}

.hz-nav-right-divider {
	height: 20px;
	border-left: 1px solid #ccc;
	margin-left: 8px;
	margin-right: 8px;
}

.hz-record-card {
	margin-top: 20rpx;
	align-items: center;
}

.hz-row-gap {
	margin-top: 6px;
}

.hz-w-40 {
	width: 40%;
}

.hz-w-50 {
	width: 50%;
}

.hz-w-55 {
	width: 55%;
}

.hz-w-60 {
	width: 60%;
}

.hz-w-100 {
	width: 100%;
}

.hz-sharer-wrap {
	width: 50%;
	text-align: right;
	justify-content: flex-end;
}

.hz-sharer-tag {
	width: 40%;
	height: 14px;
	line-height: 14px;
	margin-right: 3px;
}

.hz-limo-dropoff-wrap {
	padding-right: 50rpx;
}

.hz-book-btn-wrap {
	width: 45%;
}

.hz-limo-status {
	color: #ff9b9b;
}

.hz-booking-type-row {
	justify-content: space-between;
	align-items: center;
}

.hz-booking-type-wrap {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.hz-booking-type-icon {
	width: 24px;
	height: 24px;
}

/* newLimo.vue */
.limo-text-input[disabled],
.limo-text-input--disabled {
	background-color: #F5F7FA;
	color: #4D4D4D;
}

.limo-booking-contact-row {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.limo-booking-contact-row + .limo-booking-contact-row {
	margin-top: 5px;
}

.limo-booking-contact-label {
	color: #4D4D4D;
	align-self: center;
	flex: 0 0 38%;
	font-size: 26rpx;
	font-weight: 600;
	white-space: nowrap;
}

.limo-booking-contact-controls {
	align-items: stretch;
	display: flex;
	flex: 0 0 62%;
	flex-direction: row;
	gap: 2%;
	justify-content: flex-end;
	min-height: 36px;
	min-width: 0;
}

.limo-booking-contact-code-picker {
	align-self: stretch;
	flex: 0 0 38%;
	min-width: 0;
	min-height: 36px;
}

.limo-booking-contact-code-picker ::v-deep .lu-data-select-box {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid #e5e5e5 !important;
	border-radius: 4rpx;
	box-sizing: border-box;
	color: #4D4D4D;
	display: flex;
	font-size: 24rpx;
	font-weight: 600;
	height: 36px !important;
	justify-content: center;
	min-height: 36px !important;
	padding: 0 5% !important;
	width: 100%;
}

.limo-booking-contact-code-picker ::v-deep .wid {
	align-items: center;
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.limo-booking-contact-code-picker ::v-deep .lu-select-text,
.limo-booking-contact-code-picker ::v-deep .lu-data-select-input,
.limo-booking-contact-code-picker ::v-deep .placeholder-class {
	color: #4D4D4D !important;
	font-size: 24rpx !important;
	font-weight: 600 !important;
	flex: 1;
	min-width: 0;
	padding: 0 !important;
	text-align: center;
}

.limo-booking-contact-code-picker ::v-deep .lu-data-select-close {
	margin-left: 4%;
}

.limo-text-input.limo-booking-contact-phone {
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4rpx;
	box-sizing: border-box;
	color: #4D4D4D;
	flex: 0 0 47%;
	font-size: 24rpx;
	font-weight: 600;
	height: 36px;
	min-width: 0;
	min-height: 36px;
	padding: 0 3%;
}

.limo-booking-contact-btn {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4rpx;
	box-sizing: border-box;
	color: #4D4D4D;
	display: flex;
	flex: 0 0 10%;
	font-size: 28rpx;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	min-height: 36px;
}

.limo-booking-contact-disabled {
	background-color: #F5F7FA;
	color: #4D4D4D;
	pointer-events: none;
}

.limo-booking-contact-disabled ::v-deep .lu-data-select-box {
	background-color: #F5F7FA;
	color: #4D4D4D;
}

.limo-additional-options {
	display: flex;
	flex-direction: column;
}

.limo-additional-options ::v-deep .u-checkbox-group {
	margin-bottom: 5px;
}

.limo-additional-options .limo-booking-contact-row {
	margin-bottom: 5px;
}

.limo-additional-options .limo-booking-contact-row + .limo-booking-contact-row {
	margin-top: 0;
}

/* 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;
			}
		}
	}
}


.find-player-ico {
	width: 64px;
	height: 64px;
}

// spacing utilities
@for $i from 0 through 2000 {
	.p-\[#{$i}\] { padding: #{$i}rpx !important; }
	.px-\[#{$i}\] { padding-left: #{$i}rpx !important; padding-right: #{$i}rpx !important; }
	.py-\[#{$i}\] { padding-top: #{$i}rpx !important; padding-bottom: #{$i}rpx !important; }
	.pt-\[#{$i}\] { padding-top: #{$i}rpx !important; }
	.pr-\[#{$i}\] { padding-right: #{$i}rpx !important; }
	.pb-\[#{$i}\] { padding-bottom: #{$i}rpx !important; }
	.pl-\[#{$i}\] { padding-left: #{$i}rpx !important; }
	.m-\[#{$i}\] { margin: #{$i}rpx !important; }
	.mx-\[#{$i}\] { margin-left: #{$i}rpx !important; margin-right: #{$i}rpx !important; }
	.my-\[#{$i}\] { margin-top: #{$i}rpx !important; margin-bottom: #{$i}rpx !important; }
	.mt-\[#{$i}\] { margin-top: #{$i}rpx !important; }
	.mr-\[#{$i}\] { margin-right: #{$i}rpx !important; }
	.mb-\[#{$i}\] { margin-bottom: #{$i}rpx !important; }
	.ml-\[#{$i}\] { margin-left: #{$i}rpx !important; }
}