@font-face {
	font-family: COMFORTAA-BOLD;
	src: url("../fonts/COMFORTAA-BOLD.TTF");
}

input[id="timepicker"]::-webkit-outer-spin-button,
input[id="timepicker"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[id="timepicker"] {
	-moz-appearance: textfield;
}

h1 {
	font-size: 42px;
	text-align: center;
	text-transform: uppercase;
	margin: 30px 0px;
	font-weight: 900;
}

h1 span {
	font-weight: 300;
}

.time-picker {
	display: flex;
	width: 100%;
	max-width: 200px;
	padding: 25px 15px;
	color: #53565A;
	font-size: 28px;
	font-weight: 700;
	user-select: none;
}

.time-picker .hour,
.time-picker .minute {
	position: relative;
	min-width: 60px;
	text-align: center;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
}

.time-picker .hour .hr,
.time-picker .minute .min {
	background: none;
	font-size: 32px;
	appearance: none;
	border-bottom: 2px solid rgb(108, 73, 230);
	line-height: 48px;
	border-top: 2px solid rgb(108, 73, 230);
	outline: none;
	display: block;
	width: 100%;
	text-align: center;
	font-family: COMFORTAA-BOLD;
}

.time-picker .hour .hr-up,
.time-picker .hour .hr-down,
.time-picker .minute .min-up,
.time-picker .minute .min-down {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 20px;
	/*
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;*/
	cursor: pointer;
}

.time-picker .hour .hr-up,
.time-picker .minute .min-up {
	top: -45px;
	/*border-bottom: 20px solid #AAA;*/
}

.time-picker .hour .hr-down,
.time-picker .minute .min-down {
	bottom: -22px;
	/*border-top: 20px solid #AAA;*/
}

.time-picker .hour .hr-up:hover,
.time-picker .hour .hr-down:hover,
.time-picker .minute .min-up:hover,
.time-picker .minute .min-down:hover {
	border-bottom-color: #53565A;
	border-top-color: #53565A;
}


/*==================================== Time Picker ===================================*/

input[id="timepicker2"]::-webkit-outer-spin-button,
input[id="timepicker2"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[id="timepicker2"] {
	-moz-appearance: textfield;
}

h1 {
	font-size: 42px;
	text-align: center;
	text-transform: uppercase;
	margin: 30px 0px;
	font-weight: 900;
}

h1 span {
	font-weight: 300;
}

.time-picker2 {
	display: flex;
	width: 100%;
	max-width: 200px;
	padding: 25px 15px;
	color: #53565A;
	font-size: 28px;
	font-weight: 700;
	user-select: none;
}

.time-picker2 .hour2,
.time-picker2 .minute2 {
	position: relative;
	min-width: 60px;
	text-align: center;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
}

.time-picker2 .hour2 .hr2,
.time-picker2 .minute2 .min2 {
	background: none;
	font-size: 32px;
	appearance: none;
	border-bottom: 2px solid rgb(108, 73, 230);
	line-height: 48px;
	border-top: 2px solid rgb(108, 73, 230);
	outline: none;
	display: block;
	width: 100%;
	text-align: center;
	font-family: COMFORTAA-BOLD;
}

.time-picker2 .hour2 .hr-up2,
.time-picker2 .hour2 .hr-down2,
.time-picker2 .minute2 .min-up2,
.time-picker2 .minute2 .min-down2 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 20px;
	/*
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;*/
	cursor: pointer;
}

.time-picker2 .hour2 .hr-up2,
.time-picker2 .minute2 .min-up2 {
	top: -45px;
	/*border-bottom: 20px solid #AAA;*/
}

.time-picker2 .hour2 .hr-down2,
.time-picker2 .minute2 .min-down2 {
	bottom: -22px;
	/*border-top: 20px solid #AAA;*/
}

.time-picker2 .hour2 .hr-up2:hover,
.time-picker2 .hour2 .hr-down2:hover,
.time-picker2 .minute2 .min-up2:hover,
.time-picker2 .minute2 .min-down2:hover {
	border-bottom-color: #53565A;
	border-top-color: #53565A;
}