.time-picker {
	--option-height: 35px;
	--selector-height: 200px;
}
.scroll-selector {
	width: 50px;
	height: var(--selector-height);
	max-height: var(--selector-height);
	position: relative;
}
.scroll-selector .options {
	scroll-padding-top: calc(var(--selector-height)/2 - var(--option-height)/2);
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: calc((var(--selector-height) - var(--option-height))/2);
	padding-bottom: calc((var(--selector-height) - var(--option-height))/2);
	box-sizing: border-box;
	scrollbar-width: none;
}
.scroll-selector .options::-webkit-scrollbar {
  background: transparent;
  width: 0px;
}
.scroll-selector .options * {
	height: 35px;
	display: block;
	min-height: var(--option-height);
	scroll-snap-align: start;
}
.scroll-selector::after {
	top: calc((200px - 35px)/2);
	left: 0;
	width: 50px;
	height: 35px;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	position: absolute;
	content: '';
	box-sizing: border-box;
	pointer-events: none;
}

.time-input {
	display: flex;
	flex-direction: row;
	max-width: 75%;
	width: 75%;
	position: relative;
	margin-bottom: 30px;
}
.time-input input.form-control[type="text"] {
	width: 200px;
	max-width: initial;
	margin: 0;
}

.time-picker {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: fit-content;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0px 5px 15px rgba(0,0,0, 0.2);
	background: #fff;
}
.time-picker h4 {
	width: 100%;
	color: #fff;
	margin: 0;
	padding: 15px;
	box-sizing: border-box;
	background:	#002235;
	text-align: center;
}
.time-picker fieldset {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 16pt;
	padding: 0;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	background: #fff;
}
.time-picker button {
	font-size: 14pt;
	background: white;
	border: none;
}
.time-picker .options button:hover {
	border: 2px solid #44bbdd;
	cursor: pointer;
}
.time-input svg {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 50%;
	margin-right: 15px;
	color: #007a74;
	width: auto;
	aspect-ratio: 1/1;
}
input[type="checkbox"].time-picker-toggle, .time-picker-toggle-icon {
	aspect-ratio: 1/1;
	width: auto;
	position: absolute;
	right: 0;
	margin: 0;
}
.time-picker-toggle-icon {
	height: 50%;
	top: 50%;
	transform: translateY(-50%);
	right: 0.8em;
}
input[type="checkbox"].time-picker-toggle {
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.time-input {
	width: fit-content;
}
.time-picker-toggle-icon {
	background: url('data:image/svg+xml,<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23007a74" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>');
}
.time-input:not(:focus-within) input[type="checkbox"].time-picker-toggle:not(:checked) ~ .time-picker {
	display: none;
}

.time-input .confirm {
	height: 2em;
	width: 4em;
	margin: 5px;
	margin-left: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='color: rgb(0, 133, 127); fill: rgb(0, 133, 127);'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'%3E%3C/path%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: solid 1px grey;
	border-radius: 3px;
}

.time-input .confirm:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='color: rgb(255, 255, 255); fill: rgb(255, 255, 255);'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(to right, rgb(0, 133, 127), rgb(0, 133, 127));
	background-size: contain, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	cursor: pointer;
	border: none;
}