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

roster-shift > * {
	flex: 1;
}

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

roster-shift .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-shift .css_delete:hover {
	background-color: var(--theme-errorFont);
}

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

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

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

roster-shift .css_dayoffRules:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

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

roster-shift .css_dayoffRules svg {
	width: 1.5rem;
	fill: var(--theme-secondaryFont);
	transition-property: fill, opacity;
	transition-duration: var(--theme-transitionDuration);
}

roster-shift .css_dayoffRules:hover svg {
	fill: var(--theme-mainFont);
}

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

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

roster-shift .css_linkRules:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-shift .css_linkRules.target {
	background-color: rgb(255, 188, 65) !important;
}

roster-shift .css_linkRules.source {
	background-color: var(--theme-energized) !important;
}

roster-shift .css_linkRules svg {
	width: 1.5rem;
	fill: var(--theme-secondaryFont);
	transition-property: opacity, fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-shift .css_linkRules:hover svg {
	fill: var(--theme-mainFont);
}

roster-shift .css_linkRules.target svg {
	fill: black;
}

roster-shift .css_linkRules.source svg {
	fill: black;
}

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

roster-shift .css_pondRules:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-shift .css_pondRules.active {
	background-color: rgb(255, 127, 255);
}

roster-shift .css_pondRules svg {
	width: 1.5rem;
	fill: var(--theme-secondaryFont);
	transition-property: opacity, fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-shift .css_pondRules:hover svg {
	fill: var(--theme-mainFont);
}

roster-shift .css_pondRules.active svg {
	fill: black !important;
}




roster-links,
roster-ponds,
roster-newshift,
roster-dayoffrule {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 6;
	display: none;
	backdrop-filter: blur(6px) brightness(66%);
}

roster-links.active,
roster-ponds.active,
roster-newshift.active,
roster-dayoffrule.active {
	display: flex;
}

roster-links .box,
roster-ponds .box,
roster-newshift .box,
roster-dayoffrule .box {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 30vw;
	right: 0;
	width: 40vw;
	height: 80vh;
	overflow: scroll;
	padding: 0 1rem 1rem 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 1rem rgb(0, 0, 0);
	background-color: var(--theme-background);
	transition-property: background-color, box-shadow, border-color, left;
	transition-duration: var(--theme-transitionDuration);
	flex-direction: column;
	scrollbar-width: none;
	border-style: solid;
	border-width: 1px;
	border-color: var(--theme-highlightedBackgroundColor);
	max-width: 90%;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
}

roster-links.sided .box,
roster-ponds.sided .box,
roster-newshift.sided .box {
	left: 9vw;
}

roster-links hr,
roster-ponds hr,
roster-newshift hr {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--theme-highlightedBackgroundColor);
	transition-property: border-bottom-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-links button-state,
roster-ponds button-state,
roster-newshift button-state {
	margin-top: auto;
}

roster-ponds .add {
	margin: 0 0 0.5rem auto;
	color: var(--theme-mainFont);
	font-weight: 600;
	padding: 0 0.5rem;
	border-radius: 0.25rem;
	transition-property: background-color, color, text-decoration-color, opacity;
	transition-duration: var(--theme-transitionDuration);
	cursor: pointer;
	text-align: center;
	line-height: 2rem;
	font-size: 0.9rem;
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

roster-ponds .add:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-ponds .add i {
	font-size: 1.1rem;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
}

roster-ponds table-box {
	overflow: auto;
}

roster-dayoffrule .content {
	opacity: 0.5;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: var(--theme-transitionDuration);
	margin-bottom: auto;
}

roster-dayoffrule .content.active {
	opacity: 1;
    pointer-events: all;
}




roster-pickshift {
	position: fixed;
	z-index: 6;
	top: 0;
	bottom: 0;
	right: 9vw;
	width: 40vw;
	height: 80vh;
	padding: 0 1rem 1rem 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 1rem rgb(0, 0, 0);
	margin: auto;
	background-color: var(--theme-background);
	transition-property: background-color, box-shadow, border-color;
	transition-duration: var(--theme-transitionDuration);
	flex-direction: column;
	display: none;
	scrollbar-width: none;
	border-style: solid;
	border-width: 1px;
	border-color: var(--theme-highlightedBackgroundColor);
	max-width: 90%;
	overflow: auto;
}

roster-pickshift.active {
	display: flex;
}

roster-pickshift hr {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--theme-highlightedBackgroundColor);
	transition-property: border-bottom-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-pickshift > .body {
	display: flex;
	width: calc(100% - 2px);
	margin: 0 auto;
}

roster-pickshift > .body .block {
	flex: 1;
}

roster-pickshift > .body .separator {
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: var(--theme-highlightedBackgroundColor);
	height: 100%;
}

roster-pickshift > .body .block.right table-box {
	overflow: auto;
	max-height: calc(80vh - 6rem);
}

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




table-row .info span {
	font-size: 0.84rem;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	opacity: 0.88 !important;
	transition: color 0.15s ease 0s;
	display: flex !important;
	gap: 0.5rem;
	flex-wrap: wrap;
}

table-row .info .rolePool {
	opacity: 1;
	background-color: var(--theme-grayBackground);
	max-width: max-content;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
}