$z-index: 10000;
	$cell-spacing: 20rpx;
	$calendar-size: 525rpx;
	$calendar-item-size: 75rpx;

	.picker {
		// position: fixed;
		// z-index: $z-index;
		// background: rgba(0, 0, 0, 0.3);
		// left: 0;
		// top: 0;
		// width: 100%;
		// height: 100%;
		// font-size: 28rpx;

		&-btn {
			padding: $cell-spacing*0.5 $cell-spacing;
			border-radius: 12rpx;
			color: #666;

			&-active {
				background: rgba(0, 0, 0, .1);
			}
		}

		&-display {
			color: #666;

			&-text {
				color: #000;
				margin: 0 $cell-spacing*0.5;
			}

			&-link {
				display: inline-block;

				&-active {
					background: rgba(0, 0, 0, .1);
				}
			}
		}

		&-modal {
			position: relative;
			background: #fff;
			&-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;

				&-title {
					display: inline-block;
					width: 40%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #212121;
				}
				.date-btn{
					display: flex;
					justify-content: center;
					align-items: center;
					align-self: stretch;
					flex-basis: 80rpx;
					font-size: 0;
					border-radius: 50%;
					.inner-img{
						width: 36rpx;
						height: 36rpx;
					}
				}
				
				.picker-icon {
					&-active {
						// background: rgba(188, 188, 188, .1);
					}
				}
			}

			&-body {
				display: flex;
				margin: 0 auto;
				width: 100% !important;
				height: 480rpx;
				position: relative;
			}

		}

		&-calendar {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 80rpx 60rpx 60rpx 60rpx 60rpx 60rpx 60rpx;
			grid-column-gap: 30rpx;
			align-items: center;	
			flex-wrap: wrap;

			&-view {
				position: relative;
				display: flex;
				justify-content: center;
				width: 100%;
				box-sizing: border-box;
				height: 100%;
				text-align: center;
				.text{
					font-family: DIN;
				}
				&-bgbegin,
				&-bg,
				&-bgend,
				&-item,
				&-dot,
				&-tips {
					position: absolute;
					transition: .2s;
				}

				&-bgbegin,
				&-bg,
				&-bgend {
					opacity: .15;
					height: 80%;
				}

				&-bg {
					left: 0;
					top: 10%;
					width: 100%;
				}

				&-bgbegin {
					border-radius: $calendar-item-size 0 0 $calendar-item-size;
					top: 10%;
					left: 10%;
					width: 90%;
				}

				&-bgend {
					border-radius: 0 $calendar-item-size $calendar-item-size 0;
					top: 10%;
					left: 0%;
					width: 90%;
				}

				&-item {
					left: 5%;
					top: 5%;
					width: 90%;
					height: 90%;
					border-radius: $calendar-item-size;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&-dot {
					right: 10%;
					top: 10%;
					width: 12rpx;
					height: 12rpx;
					border-radius: 12rpx;
				}

				&-tips {
					bottom: 100%;
					left: 50%;
					transform: translateX(-50%);
					background: #4E4B46;
					color: #fff;
					border-radius: 12rpx;
					padding: 10rpx 20rpx;
					font-size: 24rpx;
					width: max-content;
					margin-bottom: 5rpx;
					pointer-events: none;

					&:after {
						content: "";
						position: absolute;
						top: 100%;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 5rpx 5rpx 0 5rpx;
						border-color: #4E4B46 transparent transparent transparent;
					}
				}
			}
		}
	}

	@font-face {
		font-family: "mxdatepickericon";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMYAAsAAAAACBgAAALMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDIgqDRIJiATYCJAMUCwwABCAFhG0HSRvfBsg+QCa3noNAyAQ9w6GDvbwpNp2vloCyn8bD/x+y+/5qDhtj+T4eRVEcbsCoKMFASzCgLdDkmqYDwgxkWQ6YH5L/YnppOlLEjlnter43YRjU7M6vJ3iGADVAgJn5kqjv/wEii23T86UsAQT+04fV+o97VTMx4PPZt4DlorLXwIQiGMA5uhaVrBWqGHfQXcTEiE+PE+g2SUlxWlLVBHwUYFMgrgwSB3wstTKSGzqF1nOyiGeeOtNjV4An/vvxR58PSc3AzrMViyDvPo/7dVEUzn5GROfIWAcU4rLXfMFdhte56y4We9gGNEVIezkBOOaQXUrbTf/hJVkhGpDdCw7dSOEzByMEn3kIic98hMxnAfeFPKWCbjRcA148/HxhCEkaA94eGWFaGolsblpaWz8/Po2WVuNHh1fmBpZHIpqal9fOjizhTteY+RZ9rv02I/pq0W6QVH3pSncBz3m55r9ZIPycHfmenvxe4uyutIgfT5u4bgkDusl9gcF0rnfnz+b2NpSaQWBFeu8GIL1xQj5AH/6FAsEr/50F28e/gA9ny6KjLrxIp0TE+UucmQOl5AFNLXkzZufWamWHYEI39PEP2If97CMdm51N6DSmIekwAVmneXTBr0PVYx+aTgfQbU3p+R4jKHdRurBq0oEw6AKSfm+QDbpGF/w3VOP+oBnMHbqdx409FjP4RRHHkAj5IWgQiBUjHfMTuQ1Icpg5avI4sQVRu8EHdWptM1aKrIjuscfeL+kZwxBTYoElztOQ2UygjRIjEphaZsyWodHgvm9SC8QC/JygEA6DiCDeEMhAQFhhOpvxa/18A0TiYMahIy0L2hYIZWeYH9JR085Al4qts1re5St2/SR6DINBGEVYQCWOETHDMAHZ+pcZIQJGTV4RtMmg8UbhuWL1+VLLA2RFHYC71kiRo0SNpjwQh8pj2EFU3oTNmS1WqgIA') format('woff2');
	}

	.picker-icon {
		font-family: "mxdatepickericon" !important;
	}

	.picker-icon-you:before {
		content: "\e63e";
	}

	.picker-icon-zuo:before {
		content: "\e640";
	}

	.picker-icon-zuozuo:before {
		content: "\e641";
	}

	.picker-icon-youyou:before {
		content: "\e642";
	}