* {
	margin: 0;
	padding: 0;
	font-size: clamp(11px, 1.75vmin, 16px);
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	text-align: center;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
}

html {
	background: linear-gradient(150deg, steelblue 10%, lightblue 80%);
	height: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: auto 1fr auto;
	overflow: auto;
}

header {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: clamp(5px, 1vmin, 10px);
	color: white;
	z-index: 3;
}

header button {	min-width: 60px; }
header button img { 
	width: clamp(30px, 5vmin, 40px);
	height: clamp(30px, 5vmin, 40px);
}

#PageTitle {
	font-size: 2.5rem;
	text-align: left;
	flex: 0 1 auto;
}

#HeadSpace {
	flex: 4 1 0;
}

#nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;	
	flex: 1 1 0;
}

#MainSettingsButton {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;	
}

#Menu, #Main {
	grid-column: 1 / 3;
	width: 100%;
	padding: 0 10px;
	overflow: auto;
}

#Main { display: grid; }
#Menu.off { display: none; }
#Menu:not(.off) + #Main { display: none; }

input, select, textarea {
	width: 100%;
	padding: 5px;
	border: solid 1px #454545;
	border-radius: 5px;
	background: white;
	-webkit-user-select: auto;
	user-select: auto;
	min-height: 40px;
}

select {
	-webkit-appearance: menulist-button;
	appearance: menulist-button;
}

td > input, td > select, td > textarea { 
	border: 0;
	border-radius: 0; 
}

textarea {
	resize: vertical;
}

input[type='radio'], input[type='checkbox'] {
	width: 20px;
	margin: 5px;
	vertical-align: middle;
	min-height: 20px;
}

input[type='color'] {
	padding: 0;
	height: 40px;
}

input[type="range"] {
	-webkit-appearance: none; 
	appearance: none;
	padding: 20px 5px;
	min-width: 100px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 50px;
	height: 25px;
	position: relative;
	top: -10px;
	border: solid 1px black;
	border-radius: 10px;
	background: #FFF;
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	width: 50px;
	height: 25px;
	border: solid 1px black;
	border-radius: 10px;
	background: #FFF;
	cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
	background: #FFF;
	border: solid 1px #000;
	border-radius: 10px;
	height: 5px;
}

input[type=range]::-moz-range-track {
	background: #FFF;
	border: solid 1px #000;
	border-radius: 10px;
	height: 5px;
}

input[type=range]::-ms-track {
	background: #FFF;
	border: solid 1px #000;
	border-radius: 5px;
	height: 5px;
}

.RangeBubbleHolder {
	position: relative;
	top: -34px;
	width: 100%;
	height: 0;
	padding: 0 5px;
	pointer-events: none;
}

.RangeBubble {
	position: relative;
	width: 50px;
	height: 25px;
	pointer-events: none;
}

.RangeAnchors {
	display: grid; 
    justify-content: space-between;	
	grid-template-columns: repeat(5, 0.2fr); 
	font-size: 10px
}

button {
	border: 0;
	border-radius: 5px;
	color: white;
	cursor: pointer;
}

.ClearButton, .rad {
	background: transparent;
	color: inherit;
	height: 100%;
	min-height: 32px;
	margin: 0;
}

.ClearButton {
	width: 100%;
	padding: 2px;
}

.formbutton {
	display: inline-flex;
	justify-content: space-evenly;
	place-items: center;
	height: 40px;
	padding: 0 5px;
	gap: 5px;
	text-decoration: none;
}
.menubutton {
	display: inline-flex;
	height: 50px;
	place-items: center;
}
.menubutton img {
	box-sizing: content-box;
	margin: 0 10px;
}
.menubutton p {
	margin-right: 10px;
}

.formbutton, .menubutton, .GuideNav button {
	box-shadow: 2px 2px black;
	border: solid 1px black;
	background: linear-gradient(150deg, #636363 10%, #454545 80%);	
	transition: 0.3s;
}

.GuideNav button {
	margin: 5px;
	width: 70px;
	height: 30px;
	display: block;
}

.formbutton:hover, .navbutton:hover, .menubutton:hover, .GuideNav button:hover, 
.formbutton:focus, .navbutton:focus, .menubutton:focus, .GuideNav button:focus {
	background: linear-gradient(150deg, #26c6da 10%, #229faf 80%);
	box-shadow: 2px 2px grey;
}

.del, .add, .upd, .sub, .acc, .rej, .can, .ins {
	width: 30px;
	height: 30px;
	border: solid 2px #454545;
	border-radius: 50%;
	margin: 5px;
	background-size: 20px;
	background-color: #636363;
	background-position: center;
	background-repeat: no-repeat;
}
.del { background-image: url('/img/delete.svg'); }
.add { background-image: url('/img/add.svg'); }
.upd { background-image: url('/img/update.svg'); }
.sub { background-image: url('/img/submit.svg'); }
.acc { background-image: url('/img/accept.svg'); }
.rej { background-image: url('/img/reject.svg'); }
.can { background-image: url('/img/return.svg'); }
.ins { background-image: url('/img/insert.svg'); }

/* https://codepen.io/martinvd/pen/xbQJom */
.wait {
	height: 40px;
	/* position: relative; */
}

.wait div {
	position: absolute;
	height: 40px;
	width: 40px;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	border-radius: 50%;  
}
  
.wait div:nth-child(1) {  
	animation: rotate-one 1s linear infinite;
	border-bottom: 3px solid #454545;
}
  
.wait div:nth-child(2) {  
	animation: rotate-two 1s linear infinite;
	border-right: 3px solid #454545;
}
  
.wait div:nth-child(3) {  
	animation: rotate-three 1s linear infinite;
	border-top: 3px solid #454545;
}
  
@keyframes rotate-one {
	0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
	100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes rotate-two {
	0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
	100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes rotate-three {
	0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
	100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

 
img {
	vertical-align: middle;
}

table {
	border-right: solid 1px #454545;
	border-bottom: solid 1px #454545;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}

td, th {
	border-top: solid 1px #454545;
	border-left: solid 1px #454545;
	overflow: hidden;
	min-width: 75px;
}

th { 
	position: -webkit-sticky;
	position: sticky; 
	z-index: 990;
}

.TH1, .TH2 { font-weight: bolder; color: #FFF;}
.TH1 th { top: 0; height: 40px; background: linear-gradient(0deg, #636363 10%, #454545 80%); }
.TH2 th { top: 40px; height: 30px; background: #906b10; }
.TH3 { height: 30px;  }
.TH3 th, .TH3 td { top: 70px; background: khaki; color: brown; font-weight: bold; height: 30px;}
.TF1 th { bottom: 0; height: 30px; }
.TF1 th, .TF1 td { background: #436f6b; color: white; font-weight: bold; }

sup, sub { font-size: 10px; }

.row:nth-child(odd) { background: #ededed; }
.row:nth-child(even) { background: #e0e0e0; }
.row:hover, .row:hover input, .row:hover select { background-color: lightblue;}
.greyrow { background-color: #ededed; }

ul { display: grid; }
ul li {	list-style-type: none; }
ul.dsc li { list-style-type: disc; }
li {
	list-style-position: inside;
    text-indent: -20px;
	text-align: left;
	vertical-align: middle;
	padding: 3px 40px
}

li input[type="checkbox"], li input[type="radio"] {
	margin: 0;
	position: relative;
	left: -10px;
}

#Overlay {
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow: auto;
}

.MenuNavButtons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	grid-gap: 5px;
	padding-bottom: 10px;
}

.mainnavbutton { 
	background: transparent;
	border: solid 2px transparent; 
	border-radius: 0;
	margin: 0;
}

.location img {
	border-bottom: solid 2px white;
}

.on, .row.on, .CalendarDay.on {
	background: aquamarine;
}

.of.oo, .on.oo {
	background: aqua;
}

.bl, .bh, #ClosePopUp, .sug, .ord, [data-pick], [data-rot], [data-pop] {
	cursor: pointer;
}
.Hours .bl, .DayCell .bl, [name="ShiftsCalendar"] .bl {
	border: solid 1px grey;
	border-radius: 4px;
}
.DayCell .bl, [name="ShiftsCalendar"] .bl { margin: 3px; }

.bl.ss, .HoursRow .sh div { background: hsl(120, 25%, 65%); }
.bl.us, .HoursRow .us div { background: hsl(0, 0%, 65%); }
.bl.ev, .HoursRow .ev div { background: hsl(330, 15%, 75%); }
.bl.ho, .HoursRow .ho div { background: #87cefa }
.bl.tr, .HoursRow .tr div { background: hsl(30, 60%, 70%); }

.ss.on { background: hsl(120, 25%, 35%); color: white; }
.os.on { background: hsl(30, 60%, 50%); color: white; }
.os.of.tu { background: hsl(300, 50%, 75%); }
.us.on { background:hsl(0, 0%, 35%); color: white; }
.rq.on { background: aqua; color: white; }
.rq.oo, .ss.oo, .os.oo, .us.oo, .es.oo { background: aqua; color: black; } 
.rq.oo { opacity: 0.5; }
.rm.bl { color: white;}

.HoursRow div { 
	position: relative;
	background: transparent;
	height: 5px;
}

.HoursRow div > div {
	position: absolute;
}

#ViewRequests { background: darksalmon; }
#ViewEditAids { background: khaki; color: grey; }
#ViewReminder { background: #f8ae53;}

.rad {font-size: 0.8em;}
.st0::before, .rad[value="0"]::before { content: '?'; }
.st1::before, .rad[value="1"]::before { content: '✓'; }
.st2::before, .rad[value="2"]::before { content: '✗'; }

.bl .tr, .rad {
	margin: 0; 
	border: 0;
	flex: 0 0 40px;
}
.bl .tr::after { content: "⇌"; }

#Pop {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 5vmin;
	z-index: 997;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	background: #00000055;
	place-content: center;
}

#PopUpContent {
	display: grid;
	grid-gap: 10px;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	border: solid 5px #454545;
	border-radius: 5px;
	padding: 2vmin;
	background: linear-gradient(150deg, beige 10%, #9e9e84 80%);
	color: #454545;
	box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.7);
}

#PopUpHeader {
	display: flex;
	justify-content: space-between;
	gap: 3vh;
	color: steelblue;
}

#PopUpHeader div {
	font-size: clamp(20px, 3vh, 40px);
}

#PopUpHeader > div:first-child {
	text-align: left;
	flex: 1 0;
}

.PopUpForm {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
	align-items: center;
}

#PopUpBody { overflow: auto; }

.PopUpForm input:not(input[type="range"]), .PopUpForm select {
	width: auto;
}
.PopUpForm > div:not(.SliderContainer), #Footer .TF1 div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
}
#Footer .TF1 div {
	justify-content: space-around;
}
#Footer .TF1 div input, #Footer .TF1 div select, #Footer .TF1 div label {
	flex: 1 1 auto;
	width: auto;
}
.PopUpForm div label, .PopUpForm div input, .PopUpForm div select {
	flex: 1 1 auto;
	border: solid 1px black;
	border-radius: 5px;
}

.PopUpForm label { text-align: left; }

#PopUpFoot { display: none; }

#Message, #Message:empty + #PopUpFoot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	place-items: center;
	gap: 10px;
}

#Message > p, #PopUpFoot > p {
	flex: 0 0 100%;
}

#Message button, #PopUpFoot button {
	flex: 1 1;
	max-width: 200px;
}
#Message button p, #PopUpFoot button p {
	display: none; 
}

.CopyContent {
	-webkit-user-select: text;
	user-select: text;
}

.wsn { white-space: normal; }

pre {
	text-align: left;
	font-size: 12px;
}

.LongText p {
	padding: 10px;
	text-align: left;
}

#Help-Topics-Tab {
	grid-template-columns: auto 1fr;
	overflow: hidden;
}
#HelpIndex {
	font-size: 0.9em;
	background: khaki;
	color: brown;
	padding: 10px;
	overflow: auto;
	width: max-content;
}

#HelpIndex button { 
    background: transparent;
	margin: 0;
    text-align: left;
	display: block;
}

#HelpIndexShow:checked ~ button { display: none; }
#HelpIndexShow:checked ~ button.selected { 
	display: block;
	transform: rotate(-90deg);
	height: 100%;
	width: 30px;
}

#HelpIndex .Level0 { color:hsl(250, 65%, 40%); margin-top: 10px; }
#HelpIndex .Level1 { color:hsl(275, 65%, 40%); margin-top: 5px; }
#HelpIndex .Level2 { color:hsl(300, 65%, 40%); }
#HelpIndexShow:not(:checked) ~ .Level1::before { content: '— '; }
#HelpIndexShow:not(:checked) ~ .Level2::before { content: '— — '; }
#HelpIndex .selected { font-weight: bold; }
#HelpIndex .selected:after { 
	content: '➤';
    margin-left: 10px;
}

.Narrative { padding: 20px; overflow: auto; }
.Narrative .fl, .Narrative .fr { margin: 10px; }
.Narrative .fl { float: left; }
.Narrative .fr { float: right; }
.Narrative p { text-align: justify; padding: 10px; }
.Narrative img { max-width: 100%;}

.FlexBoxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
}

.FlexBoxes > div {
	flex: 1 1 auto;
	border: solid 1px black;
	border-radius: 5px;
	padding: 10px;
	margin: 10px;
	background: beige;
	box-shadow: 5px 5px 10px #454545;
}
.tab .FlexBoxes > div {
	flex: 1 1;
}

.FlexBoxes div > p:first-of-type {
	color: brown;
	font-weight: bold;
	border-bottom: solid 1px brown;
	padding: 2px;
	margin: 5px;
}

.FlexBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.fi {
	flex: 1 1;
	margin: 0 5px;
	align-self: center;
}
.InputBox {
	flex: 1 1 fit-content;
	margin: 5px;
}
.InputBox > * {
	display: block;
}

.InputBox label {
	width: 100%;
	text-align: left;
	background: #8fbc8f;
	border: solid 1px #454545;
	border-radius: 5px 5px 0 0;
	padding: 3px;
	transition: 0.3s;
}

.InputBox input, .InputBox select { border-radius: 0; border-top: 0;}
.InputBox input:last-child, .InputBox select:last-child { border-radius: 0 0 5px 5px; }

.InputBox:focus-within label, .SmallTable:focus-within thead td  {
	background: #26c6da;
	color: white;
}

.SmallTable {
	flex: 1 1 auto;
	justify-content: space-between;
	width: auto;
	min-width: 100px;
	background: white;
	margin: 10px;
	border-radius: 5px;
}

.SmallTable td {
	padding: 3px;
}

.SmallTable thead td {
	background: #8fbc8f;
	transition: 0.3s;
}

.SmallTable thead td:first-child { border-radius: 5px 0 0 0; }
.SmallTable thead td:last-child { border-radius: 0 5px 0 0; }
.SmallTable thead td:first-child:last-child { border-radius: 5px 5px 0 0; }
.SmallTable tfoot td:first-child { border-radius: 0 0 0 5px; }
.SmallTable tfoot td:last-child { border-radius: 0 0 5px 0; }
.SmallTable tfoot td:first-child:last-child { border-radius: 0 0 5px 5px; }

.FocusBox {
	background: white; 
	padding: 20px; 
	margin: 20px;
}

#PopUpBody div.ShortcutGroup {
	padding: 1%;
	justify-content: space-evenly;
	border-bottom: solid 1px black;
}		

.ShortcutKey {
	display: inline-block;
	background: #747474;
	color: white;
	border: solid 1px black;
	border-radius: 5px;
	box-shadow: 0 5px 10px black;
	padding: 10px 20px;
	margin: 10px;
	font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace; 
}

.Shortcut {
	display: block;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2px;
	position: relative;
	overflow: hidden;
}

.tabs:only-child {
	height: 100%;
}

.tabs > label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1 1;
	gap: 5px;
	padding: 3px 10px;
	height: 40px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(0deg, #7f5824 10%, #966a34 80%);
	color: white;
	cursor: pointer;
}
.tabs > label::after {
	content: "➤";
	transform: rotate(-90deg);
	float: right;
	transition: 300ms;
}
.tab {
	display: none;
	flex-wrap: wrap;
    justify-content: space-evenly;	
	align-items: stretch;
	flex: 0 0 100%;
	height: calc(100% - 40px);
	order: 999;
	background: #dbcfad;
	overflow: auto;
}

.tabs .selector {
	display: none;
}

.tabs > input:checked + label + div.tab { display: grid; grid-template-columns: 1fr; }
.tabs > input:checked + label + div.tab.FlexBoxes { display: flex; }
.tabs > input:checked + label {
	background: #a3682e;
	background: linear-gradient(0deg, #966a34 10%, #a3682e 80%);
	transition: 300ms;
}

.tabs > input:checked + label::after {
	transform: rotate(90deg);
}

.CurrentDate {
	padding: 5px;
	background: white;
	color: grey;
	width: 100%;
	cursor: pointer;
}

.FlexBoxes p {
	text-align: left;
	padding: 10px;
}

input[type="radio"] {
	height: 20px;
	width: 20px;
	margin-right: 10px;
	vertical-align: middle;
}

.tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 8px;
	gap: 8px;
}

.tile {
	flex: 1 1;
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
	gap: 5px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	border: solid 2px #636363;
	border-radius: 10px;
	padding: 8px;
	color: white;
	cursor: pointer;
	background: linear-gradient(0deg, steelblue 10%, #19586d 80%);
}
.tile:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}
.tile.selected {
	background: #661f5d;
}

.tiles > input[type="checkbox"] { display: none; }
input:not(:checked) + label.tile { opacity: 0.5; }
.tile.ss { background: linear-gradient(150deg, #526b26 10%, #679467 80%); }
.tile.os { background: linear-gradient(150deg, #7f5824 10%, #966a34 80%); }

.Invited { background: goldenrod; color: brown; border: solid 2px brown; }


#ScheduleProgress {
	border: solid 1px darkslategrey; 
	height: 30px;
	width: 100%;
	margin: auto; 
	padding: 10px; 
	background: khaki
}

@media screen and (min-width: 900px) {
	
	#Menu {
		grid-column: 1 / 2;
		grid-row: 2 / 4;
		width: fit-content;
	}

	#Main {
		display: grid !important;
		grid-template-rows: 1fr auto;
		grid-row: 2 / 3;
		grid-column: 2 / 3;
	}
	
	#Menu.off { display: block; }
	#Menu.off .menubutton p, 
	#Menu.off #MenuSettings,
	#Menu.off #CalendarSettings,
	#Menu.off #ViewOptions label { display: none; }
	
	#Menu.off #ViewOptions { grid-template-columns: auto; place-items: center; }
	#Menu.off #ViewOptions button { padding: 0; }
	#Menu.off .OptionBox { margin: 10px; }
	.MenuNavButtons { grid-template-columns: auto; }

}

@media screen and (min-width: 615px) {
	.PopUpForm { grid-template-columns: minmax(100px, auto) 1fr; }
	#Message button p, #PopUpFoot button p { display: block; }
}