.busyweb {
	&.emberdatetime {
		&.c-date-range-picker {
			position: relative;
			width: 515px;
			height: 46px;
			margin: 0;
			padding: 0;
			float: left;
			z-index: 1000;

			.button {
				display: inline-block;
				padding: 11px 15px;
				border: 1px solid $ept-color-5;
				border-radius: 4px;
				outline: none;
				background: $ept-color-1;
				color: $ept-color-6-1;
				font: 14px/1 $ept-font-family;
				letter-spacing: 1px;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				box-sizing: border-box;

				&:hover {
					text-decoration: none;
				}

				&.blue {
					border-color: $ept-color-3;
					background: $ept-color-3;
					color: $ept-color-1;
				}

				&.text {
					border-color: transparent;
					background: transparent;

					&:hover {
						text-decoration: underline;
					}
				}

				&.select {
					position: relative;
					padding-right: 50px;
					padding-left: 10px;
					text-align: left;

					&:after {
						position: absolute;
						top: 16px;
						right: 10px;
						width: 0;
						height: 0;
						border: 5px solid transparent;
						border-top-color: $ept-color-6-2;
						content: '\00a0';
					}
				}

				&.arrow {
					& > span {
						width: 12px;
						height: 12px;
						float: left;
						transform: rotate(45deg);
						border: 2px solid $ept-color-6-2;
						cursor: pointer;
					}

					&.disabled {
						border-color: #ddd;
						background: #efefef;
						cursor: not-allowed;

						& > span {
							border-color: #ddd;
						}
					}

					&.left {
						padding-right: 10px;
						padding-left: 15px;

						& > span {
							border-top-color: transparent;
							border-right-color: transparent;
						}
					}

					&.right {
						padding-right: 15px;
						padding-left: 10px;

						& > span {
							border-bottom-color: transparent;
							border-left-color: transparent;
						}
					}
				}
			}

			& > .menu {
				width: 100%;
				height: 100%;
				cursor: initial;

				& > .select {
					margin-right: 58px;
					float: left;
				}

				& > .arrows {
					margin-left: -58px;
					padding: 0 0 0 10px;
					float: left;

					& > .arrow {
						margin: 0;

						&.left {
							border-radius: 3px 0 0 3px;
						}

						&.right {
							border-radius: 0 3px 3px 0;
						}
					}
				}

				& > .date {
					padding: 0 0 0 10px;
					float: left;
					color: $ept-color-6-2;
					font: 14px/46px $ept-font-family;
				}
			}

			& > .list {
				display: none;
				position: absolute;
				top: 55px;
				left: 0;
				padding: 10px 0;
				border: 1px solid $ept-color-5;
				border-radius: 4px;
				background: $ept-color-1;
				z-index: 10000;

				&.active {
					display: block;
				}

				& > li {
					min-width: 260px;
					padding: 10px 20px;
					font: 14px/1 $ept-font-family;
					cursor: pointer;

					&.custom {
						&.active {
							padding: 10px 20px 20px;
						}
					}

					&.active {
						color: $ept-color-3;
					}

					&.focus {
						background-color: aliceblue;
					}

					&.picker {
						display: none;
						position: relative;
						width: 300px;
						padding: 0;
						border-top: 1px solid $ept-color-6-3;
						cursor: initial;

						& > .header {
							display: inline-block;
							position: relative;
							width: 100%;
							height: 80px;
							padding: 22px 15px 18px;
							box-sizing: border-box;

							& > span {
								width: 10%;
								float: left;
								color: $ept-color-6-2;
								font: 14px/40px $ept-font-family;
								text-align: center;

								&:first-of-type {
									width: 45%;
									line-height: 1;
								}

								&:last-of-type {
									width: 45%;
									line-height: 1;
								}

								//&.state {
								//	& > input {
								//	}

								//	&.open {
								//		& > input {
								//		}
								//	}
								//}

								//&:last-of-type {
								//	&.open {
								//		& > input {
								//			border-color: $ept-color-7;
								//		}
								//	}
								//}
							}
						}

						& > .body {
							display: inline-block;
							width: 100%;
							height: 325px;
							padding: 0;
							border-top: 1px solid $ept-color-6-3;
							border-bottom: 1px solid $ept-color-6-3;
							box-sizing: border-box;

							& > .p-date-picker {
								width: 100%;

								& > .calendar-container {
									& > .header-container {
										display: none;
									}
								}
							}
						}

						& > .footer {
							display: inline-block;
							width: 100%;
							height: 70px;
							padding: 20px 15px 10px;
							box-sizing: border-box;
						}

						&.active {
							display: inline-block;
						}

						&.disable-custom {
							& > .header {
								& > span {
									display: none;

									&.start {
										display: inline;
										width: 100%;
									}
								}
							}
						}
					}
				}
			}

			&.right {
				float: right;

				& > .list {
					right: 0;
					left: initial;
				}
			}

			&.large {
				.button {
					font-size: 16px;

					&.select {
						padding-top: 14px;
						padding-bottom: 14px;

						&:after {
							top: 20px;
						}
					}

					&.arrow {
						padding-top: 14px;
						padding-bottom: 14px;

						& > span {
							width: 12px;
							height: 12px;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 525px) {
	.busyweb {
		&.emberdatetime {
			&.c-date-range-picker {
				display: inline-block;
				width: 100%;

				& > .menu {
					position: relative;
					width: 100%;
					padding: 0 0 0 84px;
					box-sizing: border-box;

					& > .button {
						position: relative;
						width: 100%;
						margin: 0 0 0 -84px;
						border-radius: 3px 0 0 3px;
						background-color: transparent;
						color: transparent;
						z-index: 2;
					}

					& > .arrows {
						position: relative;
						height: 46px;
						margin: 0;
						padding: 0;
						z-index: 3;

						& .button {
							&.arrow {
								width: 42px;
								height: 46px;
								margin: 0;
								float: left;
								overflow: hidden;

								&.left {
									border-left: 0;
									border-radius: 0;
								}

								&.right {
									border-left: 0;
								}
							}
						}
					}

					& > .date {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						background-color: $ept-color-1;
						font-size: 12px;
						z-index: 1;
						box-sizing: border-box;
					}
				}

				//& > .menu {
				//	position: relative;

				//	& > .button {
				//		&.select {
				//			display: block;
				//			position: relative;
				//			width: calc(100% - 86px);
				//			margin: 0 43px;
				//			//padding-top: 8px !important;
				//			//padding-bottom: 8px !important;
				//			float: none;
				//			border-right: 0;
				//			border-left: 0;
				//			border-radius: 0;
				//			border-color: transparent;
				//			//border-bottom-color: $ept-color-3;
				//			background-color: transparent;
				//			color: transparent; //$ept-color-3;
				//			//font-size: 14px;
				//			//text-align: center;
				//			z-index: 3;

				//			&:after {
				//				//top: 18px;
				//				//right: 0;
				//				border-top-color: $ept-color-3;
				//			}
				//		}
				//	}

				//	& > .arrows {
				//		display: block;
				//		position: relative;
				//		width: 100%;
				//		height: 46px;
				//		margin: -46px 0 0;
				//		padding: 0;
				//		float: none;
				//		z-index: 2;

				//		& > .button {
				//			&.arrow {
				//				&.left {
				//					//padding-right: 5px;
				//					//padding-left: 15px;
				//					float: left;
				//					border-color: transparent;
				//					background-color: transparent;

				//					& > span {
				//						border-bottom-color: $ept-color-3;
				//						border-left-color: $ept-color-3;
				//					}
				//				}

				//				&.right {
				//					//padding-right: 15px;
				//					//padding-left: 5px;
				//					float: right;
				//					border-color: transparent;
				//					background-color: transparent;

				//					& > span {
				//						border-top-color: $ept-color-3;
				//						border-right-color: $ept-color-3;
				//					}
				//				}

				//				&.disabled {
				//					&.left {
				//						& > span {
				//							border-bottom-color: $ept-color-6-3;
				//							border-left-color: $ept-color-6-3;
				//						}
				//					}

				//					&.right {
				//						& > span {
				//							border-top-color: $ept-color-6-3;
				//							border-right-color: $ept-color-6-3;
				//						}
				//					}
				//				}
				//			}
				//		}
				//	}

				//	& > .date {
				//		display: block;
				//		position: relative;
				//		width: calc(100% - 86px);
				//		margin: -46px 43px 0;
				//		padding: 0 10px;
				//		float: none;
				//		//background-color: $ept-color-1;
				//		color: $ept-color-3;
				//		font-size: 12px;
				//		//line-height: 34px;
				//		text-align: left;
				//		text-overflow: ellipsis;
				//		white-space: nowrap;
				//		overflow: hidden;
				//		z-index: 2;
				//		box-sizing: border-box;
				//	}
				//}

				& > .list {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 0;
					overflow: hidden;
					overflow-y: auto;
					box-sizing: border-box;

					& > li {
						&.picker {
							display: inline-block;
							width: 100%;

							& > .footer {
								clear: both;
							}
						}
					}
				}
			}
		}
	}
}