.appointment_status_confirmed {
	background-color: #428bca;
	color: #fff;
}

.appointment_status_staged {
	background-color: #FF1E1E;
	color: #fff;
}

.appointment_status_canceled {
	background-color: #7777;
	color: #000;
}

.appointment_status_processing {
	background-color: #dfba49;
	color: #000;
}

.appointment_status_postprocessing {
	background-color: #2ca01c;
	color: #fff;
}

.appointment_status_preprocessing {
	background-color: #45B6AF;
	color: #000;
}

.btn.appointment_status_confirmed:hover, .btn.appointment_status_confirmed:focus {
	filter: brightness(85%);
	color: #fff;
}

.btn.appointment_status_processing:hover, .btn.appointment_status_processing:focus {
	filter: brightness(85%);
	color: #000;
}

.btn.appointment_status_postprocessing:hover, .btn.appointment_status_postprocessing:focus {
	filter: brightness(85%);
	color: #fff;
}

.btn.appointment_status_preprocessing:hover, .btn.appointment_status_preprocessing:focus {
	filter: brightness(85%);
	color: #000;
}

.time_slot_grid {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(18, calc(100% / 18));
	padding: 4px;
}

.time_slot_grid_header_cell {
	border: 1px solid #0b94ea;
	border-collapse: collapse;
	text-align: center;
	margin-bottom: 16px;
}

.time_slot_grid_cell {
	border: 1px solid #fff;
	border-collapse: collapse;
	padding: 8px;
	overflow: hidden;
}

.time_slot_grid_block {
	grid-column: var(--time-slot-start, 1) / span var(--time-slot-length, 2);
}