roster-timetable {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

roster-timetable > * {
	flex: 1;
}

roster-timetable > input-box:first-child {
	flex: 2;
}

roster-timetable .css_delete {
	width: 4.2rem;
	height: 4.2rem;
	overflow: hidden;
	border-radius: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 4.2rem;
	max-width: 4.2rem;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-timetable .css_delete:hover {
	background-color: var(--theme-errorFont);
}

roster-timetable .css_delete svg {
	width: 1.5rem;
	fill: var(--theme-secondaryFont);
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-timetable .css_delete:hover svg {
	fill: white;
}

roster-timetable .css_dayoffRules {
	width: 4.2rem;
	min-width: 4.2rem;
	max-width: 4.2rem;
	height: 4.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--theme-highlightedBackgroundColor);
	border-radius: 0.5rem;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-timetable .css_dayoffRules.active {
	background-color: var(--theme-energized) !important;
}

roster-timetable .css_dayoffRules svg {
	width: 50%;
	fill: var(--theme-mainFont);
	opacity: 0.6;
	transition-property: fill, opacity;
	transition-duration: var(--theme-transitionDuration);
}

roster-timetable .css_dayoffRules.active svg {
	fill: black !important;
}

roster-timetable .css_dayoffRules:hover svg {
	opacity: 1;
}

roster-timetable time-box {
	max-width: 8rem;
}