roster-calendar {
	margin-right: 2.5vw;
	margin-left: 2.5vw;
	height: calc(100vh - 6rem);
	position: relative;
	display: flex;
}

roster-calendar roster-view {
	/* scroll-snap-type: y mandatory; */
	scroll-behavior: smooth;
	overflow-y: scroll;
	height: calc(100vh - 6rem);
	display: block;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
}

roster-calendar roster-view::-webkit-scrollbar {
    display: none;
}

roster-calendar roster-view section {
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 6rem);
	flex-direction: column;
	width: calc(100% - 4rem);
	overflow-y: auto;
	scrollbar-width: thin;
}

roster-calendar roster-view section::-webkit-scrollbar {
    width: 8px;
}

roster-calendar roster-view section .sectionTitle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

roster-calendar roster-view section .sectionTitle .departmentCall {
	font-size: 0.85rem;
	font-weight: 100;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
	max-width: max-content;
	min-width: 10rem;
	text-align: right;
}

roster-calendar roster-view section .sectionTitle h1 {
	font-weight: 500;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
	margin: 0;
	font-size: 0.9rem;
	text-underline-offset: 0.25rem;
	max-width: max-content;
	min-width: 14rem;
	text-align: left;
}

roster-calendar roster-view section .sectionTitle h1.clickable {
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: pointer;
}

roster-calendar roster-view section .sectionTitle h1.clickable:hover {
	color: var(--theme-linkColor);
}






roster-calendar table {
	min-width: calc(100% - 10rem);
	border-collapse: collapse;
	margin-top: 1rem;
}

roster-calendar table tr {
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar table tr:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-calendar table tr:first-child:hover {
	background-color: var(--theme-background);
}

roster-calendar table tr.officeName {
	background-color: var(--theme-discreetBoxShadow);
}

roster-calendar table tr td {
	border: dashed 1px var(--theme-secondaryFont);
	padding: 0.25rem;
	vertical-align: middle;
}

roster-calendar table tr td:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-calendar table tr:first-child td:hover {
	background-color: unset;
}

roster-calendar table tr td.tdCustomShift {
	vertical-align: top;
}

roster-calendar table tr td.tdblock {
	vertical-align: top;
}

roster-calendar table tr:first-child td {
	border-top: medium none;
}

roster-calendar table tr:last-child td {
	border-bottom: medium none;
}

roster-calendar table tr td:first-child {
	border-left: medium none;
	max-width: max-content;
}

roster-calendar table tr:first-child td:first-child {
	font-size: 0.9rem;
	text-align: center;
	font-weight: 600;
	vertical-align: bottom;
	line-height: 1;
}

roster-calendar table tr td:last-child {
	border-right: medium none;
}

roster-calendar table tr td p {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

roster-calendar table tr.officeName td p {
	margin: 0.1rem 0;
}

roster-calendar table tr.officeName td p {
	flex-direction: row;
	gap: 0.5rem;
}

roster-calendar table tr td p span {
	font-size: 0.8rem;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
	font-weight: 300;
}

roster-calendar table tr.officeName td p span.officeProclaim {
	font-size: 0.85rem;
	line-height: 1;
}

roster-calendar table tr td p samp {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar table tr td:first-child p samp {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.25rem;
	cursor: pointer;
}

roster-calendar table tr td p samp.rolename {
	max-width: 15rem;
	text-align: center;
	line-height: 1rem;
	text-decoration: none;
}

roster-calendar table tr td:first-child p samp:hover {
	color: var(--theme-linkColor);
}




roster-calendar table tr td .customAddShift {
	width: 1.75rem;
	display: flex;
	min-width: 1.75rem;
	max-width: 1.75rem;
	height: 1.75rem;
	margin: 0 auto;
	background-color: var(--theme-linkColor);
	border-radius: 500px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar table tr:hover td .customAddShift {
	opacity: 1;
}

roster-calendar table tr td .customAddShift svg {
	fill: white;
}




roster-calendar .soleAddShift {
	width: 1.75rem;
	display: none;
	min-width: 1.75rem;
	max-width: 1.75rem;
	height: 1.75rem;
	margin: 0 auto;
	background-color: var(--theme-linkColor);
	border-radius: 500px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar tr:hover .soleAddShift {
	opacity: 1;
}

roster-calendar .block:empty + .soleAddShift {
	display: flex;
}

roster-calendar .soleAddShift svg {
	fill: white;
}

roster-calendar .block {
	display: flex;
	flex-direction: column;
	border-radius: 0.25rem;
	gap: 0.25rem;
}

roster-calendar rostercalendar-input {
	position: relative;
	display: flex;
	gap: 0.25rem;
}

roster-calendar rostercalendar-input.hintPond {
	background-color: var(--theme-grayBackground);
	box-shadow: 0 0 0.5rem 0.5rem var(--theme-importantDetail);
	padding: 0.25rem;
	border-radius: 0.25rem;
	transform: scale(1.25);
	z-index: 1;
}

roster-calendar rostercalendar-input input {
	font-size: 0.9rem;
	line-height: 2rem;
	color: black;
	flex: 1;
	background-color: rgb(255, 255, 38);
	padding-left: 0.25rem;
	transition-property: box-shadow;
	transition-duration: var(--theme-transitionDuration);
	border-radius: 0.25rem;
	box-shadow: 0 0 0 1px var(--theme-highlightedBackgroundColor) inset;
}

roster-calendar rostercalendar-input.hintPond input {
	opacity: 0.25;
}

roster-calendar rostercalendar-input input.css_necessary0 {
	background-color: rgb(234, 234, 156);
	opacity: 1;
}

roster-calendar rostercalendar-input input.css_isManuallySet1 {
	background-color: rgb(255, 175, 255);
}

roster-calendar rostercalendar-input input.css_isAutomaticallyAllocated1 {
	background-color: rgb(158, 255, 158) !important;
}

roster-calendar rostercalendar-input input.css_isAutomaticallyAllocated1.css_necessary1 {
	background-color: rgb(87, 255, 87) !important;
}

roster-calendar.automaticallyAllocated rostercalendar-input input {
	background-color: rgb(255, 106, 106);
}

roster-calendar.automaticallyAllocated rostercalendar-input.hintPond input {
	background-color: var(--theme-secondaryFont) !important;
}

roster-calendar.automaticallyAllocated rostercalendar-input input.css_necessary0 {
	background-color: rgb(255, 166, 166);
}

roster-calendar rostercalendar-input .hasDayoffRules {
	width: 2rem;
	min-width: 2rem;
	max-width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--theme-mainFont);
	border-radius: 0.25rem;
	transition-property: background-color, opacity;
	transition-duration: var(--theme-transitionDuration);
	opacity: 0.66;
}

roster-calendar rostercalendar-input:hover .hasDayoffRules {
	opacity: 1;
}

roster-calendar rostercalendar-input .hasDayoffRules svg {
	width: 75%;
	fill: var(--theme-background);
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar rostercalendar-input .targetLink,
roster-calendar rostercalendar-input .sourceLink,
roster-calendar rostercalendar-input .shiftPond {
	width: 2rem;
	min-width: 2rem;
	max-width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.25rem;
	transition-property: background-color, opacity;
	transition-duration: var(--theme-transitionDuration);
	opacity: 0.66;
}

roster-calendar rostercalendar-input .targetLink {
	background-color: rgb(255, 188, 65);
}

roster-calendar rostercalendar-input .sourceLink {
	background-color: var(--theme-energized);
}

roster-calendar rostercalendar-input .shiftPond {
	background-color: rgb(255, 127, 255);
	cursor: pointer;
}

roster-calendar rostercalendar-input.hintPond .shiftPond {
	background-color: var(--theme-grayBackground);
	opacity: 1;
}

roster-calendar rostercalendar-input.hintPond.pondMaster .shiftPond {
	background-color: var(--theme-mainFont);
	opacity: 1;
}

roster-calendar rostercalendar-input:hover .targetLink,
roster-calendar rostercalendar-input:hover .sourceLink,
roster-calendar rostercalendar-input:hover .shiftPond {
	opacity: 1;
}

roster-calendar rostercalendar-input .targetLink svg,
roster-calendar rostercalendar-input .sourceLink svg,
roster-calendar rostercalendar-input .shiftPond svg {
	width: 75%;
	fill: black;
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar rostercalendar-input.hintPond .shiftPond svg {
	fill: var(--theme-secondaryFont);
}

roster-calendar rostercalendar-input.hintPond.pondMaster .shiftPond svg {
	fill: var(--theme-background);
}

roster-calendar rostercalendar-input .controls {
	position: relative;
	top: 0;
	right: 0;
	height: 2rem;
	width: 1.5rem;
	bottom: 0;
	margin: auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

roster-calendar rostercalendar-input .controls samp {
	width: 1.75rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.25rem;
	cursor: pointer;
	transition-property: border-color, border-radius, border-left-color, background-color;
	transition-duration: var(--theme-transitionDuration);
	min-width: 1.75rem;
	max-width: 1.75rem;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(0, 0, 0, 0);
}

roster-calendar rostercalendar-input .controls samp:hover {
	border-color: var(--theme-secondaryFont);
}

roster-calendar rostercalendar-input .controls.active samp {
	border-color: var(--theme-secondaryFont);
	border-radius: 0 0.25rem 0.25rem 0;
	border-left-color: var(--theme-background);
	z-index: 3;
	background-color: var(--theme-background);
}

roster-calendar rostercalendar-input .controls samp svg {
	fill: var(--theme-secondaryFont);
	transition-property: fill, transform;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar rostercalendar-input .controls samp:hover svg,
roster-calendar rostercalendar-input .controls.active samp svg {
	fill: var(--theme-mainFont);
}

roster-calendar rostercalendar-input .controls.active samp svg {
	transform: rotate(90deg);
}

roster-calendar rostercalendar-input .controls .body {
	position: absolute;
	right: calc(1.75rem - 3px);
	background-color: var(--theme-background);
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition-property: background-color, border-color;
	transition-duration: var(--theme-transitionDuration);
	display: none;
	flex-direction: column;
	border-style: solid;
	border-width: 1px;
	border-color: var(--theme-secondaryFont);
}

roster-calendar rostercalendar-input .controls.active .body {
	display: flex;
	z-index: 1;
}

roster-calendar rostercalendar-input .controls .body hr {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--theme-highlightedBackgroundColor);
	margin: 0.25rem 0;
	transition-property: border-bottom-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar rostercalendar-input .controls .body div {
	min-width: max-content;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	transition-property: border-bottom-color, background-color;
	transition-duration: var(--theme-transitionDuration);
	padding: 0 1rem;
	align-items: center;
	cursor: pointer;
	border-radius: 0.5rem;
}

roster-calendar rostercalendar-input .controls .body div:hover {
	background-color: var(--theme-highlightedBackgroundColor);
}

roster-calendar rostercalendar-input .controls .body div p {
	font-size: 0.9rem;
	line-height: 2.5rem;
	font-weight: 500;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
}




roster-calendar roster-bullets {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	top: 0;
	right: 0;
	bottom: 0;
	height: max-content;
	margin-top: auto;
	margin-bottom: auto;
	border-style: solid;
	border-width: 1px;
	border-color: var(--theme-background);
	border-radius: 0.5rem;
	width: 2rem;
	transition-property: background-color, width, border-color;
	transition-duration: 0.05s;
	background-color: var(--theme-background);
	overflow: hidden;
}

roster-calendar roster-bullets:hover {
	border-color: var(--theme-secondaryFont);
	width: max-content;
}

roster-calendar roster-bullets div {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	cursor: pointer;
	transition-property: background-color, border-bottom-color;
	transition-duration: var(--theme-transitionDuration);
	justify-content: flex-end;
	width: 100%;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: var(--theme-background);
}

roster-calendar roster-bullets:hover div {
	border-bottom-color: var(--theme-secondaryFont);
	padding-left: 1rem;
}

roster-calendar roster-bullets div:hover {
	background-color: var(--theme-border);
}

roster-calendar roster-bullets div p {
	font-size: 0.9rem;
	color: var(--theme-mainFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
	line-height: 2rem;
	white-space: nowrap;
}

roster-calendar roster-bullets div span {
	width: 0.8rem;
	min-width: 0.8rem;
	max-width: 0.8rem;
	height: 0.8rem;
	background-color: var(--theme-discreetBoxShadow);
	border-radius: 500px;
	margin-left: 0.6rem;
	transition-property: background-color, transform;
	transition-duration: var(--theme-transitionDuration);
	margin-right: 0.6rem;
}

roster-calendar roster-bullets div:hover span,
roster-calendar roster-bullets div.active span {
	background-color: var(--theme-mainFont);
	transform: scale(1.25);
}




roster-calendar roster-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--theme-background);
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration);
	gap: 2rem;
	z-index: 2;
	display: none;
}

roster-calendar roster-loading.active {
	display: flex;
}

roster-calendar roster-loading span {
	width: 3rem;
	max-width: 3rem;
	min-width: 3rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

roster-calendar roster-loading span svg {
	fill: var(--theme-secondaryFont);
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-calendar roster-loading p {
	color: var(--theme-secondaryFont);
	font-size: 0.85rem;
	font-weight: 500;
}




roster-progressmodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 6;
	display: none;
	backdrop-filter: blur(6px) brightness(66%);
	justify-content: center;
	align-items: center;
}

roster-progressmodal.active {
	display: flex;
}

roster-progressmodal .box {
	position: absolute;
	left: 0;
	right: 0;
	min-width: 50rem;
	overflow: scroll;
	padding: 3rem;
	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);
	width: 40vw;
	scrollbar-width: none;
	border-style: solid;
	border-width: 1px;
	border-color: var(--theme-highlightedBackgroundColor);
	height: max-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

roster-progressmodal .box .icon {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

roster-progressmodal .box .icon svg {
	fill: var(--theme-secondaryFont);
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration);
}

roster-progressmodal.error .box .icon svg {
	fill: var(--theme-disapproveColor);
}

roster-progressmodal .box h1 {
	text-align: center;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--theme-mainFont);
	margin-bottom: 2rem;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
}

roster-progressmodal .box p {
	margin-bottom: 0.25rem;
	font-size: 0.9rem;
	color: var(--theme-secondaryFont);
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
}

roster-progressmodal.error .box p {
	opacity: 0;
}

roster-progressmodal .box .barWrap {
	width: 100%;
	height: 0.5rem;
	background-color: var(--theme-grayBackground);
	border-radius: 500px;
	overflow: hidden;
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration);
}

roster-progressmodal.error .box .barWrap {
	opacity: 0;
}

roster-progressmodal .box .barWrap .bar {
	width: 0%;
	height: 100%;
	background-color: var(--theme-importantDetail);
	border-radius: 500px;
	transition-property: width;
	transition-duration: 0.1s;
}

roster-progressmodal .box button {
	display: block;
	margin-top: 3rem;
	max-width: max-content;
	margin-left: auto;
	margin-right: auto;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1px;
	background-color: rgba(0, 0, 0, 0);
	color: var(--theme-secondaryFont);
	font-size: 1.1rem;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration);
	cursor: pointer;
}

roster-progressmodal .box button:hover {
	color: var(--theme-mainFont);
}