.busyweb {
	&.emberdatetime {
		&.p-time-picker {
			position: relative;
			width: $ept-width;
			height: ($ept-width + 80);

			& > .clock-container {
				width: 100%;
				height: 100%;
				padding: 80px 0 0;
				box-sizing: border-box;

				& > .header {
					width: 100%;
					height: 96px;
					margin: -80px 0 0;
					padding: 20px 0;
					border-radius: 2px 2px 0 0;
					background: $ept-color-7;
					box-sizing: border-box;
					color: $ept-color-4-1;

					& > span {
						height: 100%;
						margin: 0;
						padding: 0;
						float: right;
						font-style: lighter;
						line-height: 1;
						text-align: center;
						box-sizing: border-box;

						& > span {
							display: inline-block;
							height: 100%;
							margin: 0;
							background-color: none;
						}

						&.numbers-container {
							text-align: right;

							& > span {
								font-size: 55px;
								font-weight: lighter;

								&.number {
									cursor: pointer;
								}
							}
						}

						&.am-pm-container {
							width: 60px;
							margin: 0 20px 0 0;
							padding: 6px 0 0;

							& > .button {
								width: 40px;
								height: 24px;
								border-radius: 2px;
								font-size: 16px;
								font-weight: lighter;
								line-height: 24px;
								text-align: center;
								cursor: pointer;

								&.am,
								&.pm {
									margin: 0;
								}

								&.active {
									//background: #42ace1;
									color: $ept-color-4;
								}
							}
						}
					}
				}

				& > .body {
					width: 100%;
					height: 100%;
					overflow: hidden;

					& > .outside-container {
						display: block;
						position: relative;
						width: 100%;
						height: 100%;
						padding: 20px;
						float: left;
						transform: translate(0, 0);
						box-sizing: border-box;

						&.--svg-clock__hours {
							transform: translate(-100%, 0);

							&.active {
								transform: translate(0, 0);
							}
						}

						&.--svg-clock__minutes {
							transform: translate(100%, -100%);

							&.active {
								transform: translate(0, -100%);
							}
						}

						& > h1 {
							color: #2e3e4f;
							font-size: 16px;
							text-align: center;
						}

						$clock-font: ($ept-width * .0522);
						$clock-font-small: ($ept-width * .0478);
						$clock-hand-stroke: ($ept-width * .0087);

						& > svg {
							margin: 0;
							pointer-events: all;
							box-sizing: content-box;

							.cls-dark-fill {
								fill: $ept-color-2;
							}

							.cls-bright-fill {
								fill: $ept-color-3;
							}

							.cls-bright-stroke {
								stroke: $ept-color-3;
							}

							.cls-cursor {
								cursor: pointer;
							}

							.cls-line {
								fill: none;
								stroke-miterlimit: 10;
								stroke-width: $clock-hand-stroke;
							}

							.cls-text {
								font-size: $clock-font;
								font-weight: lighter;
								line-height: 1;
								fill: $ept-color-6-1;
								user-select: none;
							}

							.cls-text-small {
								font-size: $clock-font-small;
								font-weight: lighter;
								line-height: 1;
								fill: $ept-color-6-1;
								user-select: none;
							}

							.cls-transparent {
								fill: transparent !important;
							}

							path {
								&.disabled {
									pointer-events: none;
								}
							}

							circle {
								.cls-2 {
									cursor: pointer;
								}
							}

							text {
								&.disabled {
									pointer-events: none;
									fill: $ept-color-6-2;
								}

								&.selected {
									fill: $ept-color-6 !important;
								}
							}
						}
					}
				}

				&.hours {
					& > .header {
						& > .numbers-container {
							& > .number {
								&.hours {
									color: $ept-color-4;
								}
							}
						}
					}
				}

				&.minutes {
					& > .header {
						& > .numbers-container {
							& > .number {
								&.minutes {
									color: $ept-color-4;
								}
							}
						}
					}
				}

				&.invalid {
					& > .header {
						color: lighten(indianred, 20%);

						& > span {
							&.am-pm-container {
								& > .button {
									&.active {
										color: indianred;
									}
								}
							}
						}
					}

					&.hours {
						& > .header {
							& > .numbers-container {
								& > .number {
									&.hours {
										color: indianred;
									}
								}
							}
						}
					}

					&.minutes {
						& > .header {
							& > .numbers-container {
								& > .number {
									&.minutes {
										color: indianred;
									}
								}
							}
						}
					}
				}
			}
		}

		&.flash-warn {
			.p-time-picker {
				& > .clock-container {
					& > .body {
						& > .outside-container {
							& > svg {
								.--svg-plot {
									&.cls-bright-fill {
										fill: cornflowerblue;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}