.busyweb {
	&.emberdatetime {
		&.c-date-time-picker {
			display: inline-block;
			position: relative;
			width: 100%;
			font-family: $ept-font-family;

			& > .main-container {
				width: 100%;

				& > .input-container {
					display: block;
					position: relative;
					width: 100%;
					height: 40px;
					padding: 0 10px;
					border: 1px solid #ccc;
					border-radius: 3px;
					background: #fff;
					color: #2d3e50;
					font-size: 13px;
					line-height: 40px;
					text-align: center;
					box-shadow: -1px 1px 9px -5px #000 inset;
					cursor: pointer;
					box-sizing: border-box;

					&.active,
					&:hover {
						border-color: #30aeef;
					}

					& > div {
						display: inline;
						height: 100%;
						padding: 0 15px 0 0;
						float: left;
						color: inherit;
						font-size: inherit;
						line-height: inherit;

						&:last-of-type {
							padding: 0;
						}

						& > .section {
							display: inline-block;
							width: 16px;
							height: 100%;
							float: left;
							color: inherit;
							font-size: inherit;
							line-height: inherit;

							& > input {
								width: 100%;
								height: 100%;
								margin: 0;
								padding: 0;
								float: left;
								border: 0;
								background: none;
								color: inherit;
								font-size: inherit;
								line-height: initial;
								text-align: center;
								box-shadow: none !important;

								&:focus {
									outline: none;
								}
							}

							&.year {
								width: 32px;
							}

							&.meridian {
								width: 20px;
								padding: 0 0 0 5px;
							}
						}

						& > .slash {
							display: inline-block;
							width: 4px;
							height: 100%;
							margin-right: 2px;
							margin-left: 2px;
							float: left;
							color: inherit;
							font-size: inherit;
							line-height: inherit;
						}

						& > .colon {
							display: inline-block;
							width: 3px;
							height: 100%;
							margin: 0 2px;
							float: left;
							color: inherit;
							font-size: inherit;
							line-height: inherit;
						}

						&.dash {
							display: inline-block;
							width: 5px;
							height: 100%;
							margin: 0 2px;
							float: left;
							font-size: 12px;
							line-height: 30px;
						}

						& > .date-right-padding {
							width: calc(100% - 118px);
							height: 100%;
							float: left;
						}

						& > .right-padding {
							width: calc(100% - 250px);
							height: 100%;
							float: left;
							cursor: pointer;
						}
					}

					&.invalid {
						border-color: #b7220f !important;
					}
				}

				& > .dialog-container {
					display: none;
					position: absolute;
					top: 50px;
					left: 15px;
					z-index: 50;

					&.show {
						display: block;
					}

					&.top {
						top: initial;
						bottom: 50px;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 500px) {
	.busyweb {
		&.emberdatetime {
			&.c-date-time-picker {
				& > .main-container {
					& > .dialog-container {
						position: fixed !important;
						top: 50% !important;
						left: 50% !important;
						transform: translate(-50%, -50%) !important;
					}
				}
			}
		}
	}
}