@import "fontawesome/css/light.min.css";
@import "fontawesome/css/regular.min.css";
@import "fontawesome/css/solid.min.css";

:root {
	--backgroundColor: #f1f1f6;
	--secondaryBackgroundColor: #efefef; /* conflicts uses this */
	--foregroundColor: #fefefe;
	--primaryTextColor: #000000;
	--secondaryTextColor: #85858a;
	--accentColor: #3478f6;
	--inactiveAccentColor: #999999;
	/* --inactiveCheckboxColor: #8A8A8D; */
	--constructiveColor: #49BF1F;
	--destructiveColor: #ea4e3d;
	--alertColor: rgb(194, 194, 25);
	--horizontalRuleColor: #c6c6c8;
	/* --headerBackgroundColor: rgba(0, 0, 0, 0.1); */
	--headerBackgroundColor: #f1f1f6aa;
	--switchBackgroundColor:  #e9e9ea;
	--switchActiveBackgroundColor: #65c466;

	--standardHeight: 2.75rem;
	--standardPadding: 0.6rem 0;
	/* --complexRowPadding: 1rem 0 0; */
	--complexRowPadding: 0.95rem 0 0.7rem;
}

/* :root.green_room {
	--accentColor: #4cd964;
} */

@media (prefers-contrast: more) {
	:root {
		--secondaryTextColor: #5f5f65;
		--accentColor: #183fd4;
		--destructiveColor: #c42925;
		--horizontalRuleColor: #b7b7b9;
		--switchBackgroundColor: #95959b;
		--switchActiveBackgroundColor:#458846;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--backgroundColor: #000000;
		--secondaryBackgroundColor: #333; /* conflicts uses this */
		--foregroundColor: #1c1c1e;
		--primaryTextColor: #fefefe;
		--secondaryTextColor: #8d8d92;
		--accentColor: #3b82f6;
		--inactiveAccentColor: #757575;
		/* --inactiveCheckboxColor: #8d8d92; */
		--constructiveColor: #49BF1F;
		--destructiveColor: #eb5545;
		/* --alertColor: rgb(194, 194, 25); */
		--horizontalRuleColor: #3d3d41;
		--headerBackgroundColor: #000000aa;
		--switchBackgroundColor: #39393d;
		--switchActiveBackgroundColor:#67cd67;
	}

	@media (prefers-contrast: more) {
		:root {
			--foregroundColor: #242426;
			--secondaryTextColor: #8d8d92;
			--accentColor: #599af7;
			--destructiveColor: #ec7267;
			--horizontalRuleColor: #444448;
			--switchBackgroundColor: #6f6f76;
			--switchActiveBackgroundColor:#6cd76b;
		}
	}
}

* {
	outline: 0; /* TODO: fix this */
}

*::before,
*::after {
    font-family: "Font Awesome";
    font-weight: 100;
}

html {
	filter: none !important;
}

html,
body,
#root {
	height: 100%;
	height: calc(100% + constant(safe-area-inset-bottom));
	height: calc(100% + env(safe-area-inset-bottom));
}

html {
	/* overflow: hidden; TODO: only for iOS? */
}

html.busy::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url(images/loading.gif) no-repeat;
	background-position: center center;
	background-color: rgba(0,0,0,0.75);
	z-index: 99999;
	background-size: 2rem 2rem;
}

body {
	background: var(--backgroundColor);
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
	color: var(--primaryTextColor);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	cursor: default;
}

html.ios body {
	font: -apple-system-body;
}

body {
	/* overflow-y: auto; TODO: only for iOS? */
}

@media only screen {
	body {
		background: #333;
	}

	/* ¯\_(ツ)_/¯ */
	body::before {
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: inherit;
		z-index: -1;
	}
}

body,
ul,
p,
fieldset,
button {
	margin: 0;
}

button,
a {
    font: inherit;
    border: 0;
	background: none;
	color: var(--accentColor);
	text-decoration: none;
	/* outline: 0; TODO: only for mobile */
	padding: 0;
}

button[disabled] {
	color: gray;
	cursor: not-allowed;
}

summary {
	padding: 0.5rem 1rem;
	cursor: pointer;
	background: var(--foregroundColor);
	color: var(--accentColor);
	/* display: flex;
    justify-content: space-between; */
}

summary::marker {
	/* content: none; */
}

summary::after {
    /* font-weight: 900;
    transition: all 0.4s ease;
    content: "\f105"; */
}

details[open] summary::after {
    /* transform: rotate(90deg); */
}

ol:empty {
	margin: 0;
	padding: 0;
}

p br {
	margin: 0.5rem 0;
}

p br + br {
	margin: 0;
}

.destructive {
    color: var(--destructiveColor) !important;
}

.constructive {
    color: var(--constructiveColor) !important;
}

.invalid {
    color: var(--alertColor) !important;
}

p.invalid {
	padding-bottom: 0.5em;
}

.alert {
	color: var(--alertColor) !important;
}

.alert::before {
	font-weight: 900;
	content: "\f071";
	margin-right: 0.5em;
}

.canceled *:not(.controls):not(.controls button) {
	text-decoration: line-through;
}

.canceled .controls.rsvp {
	display: none;
}

input:invalid {
    /* color: var(--destructiveColor) !important; */
}

.modal > section > header,
#root > header,
main > header {
	background: var(--backgroundColor);
}

@supports (backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px)) {
	.modal > section > header,
	#root > header,
	main > header {
		background: var(--headerBackgroundColor);
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
	}
}

#root > header {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* text-align: right; */
	padding: 0.5rem 0;
	z-index: 3;
	max-width: 1024px;
	margin: 0 auto;
	box-sizing: border-box;
	border-top: 1px solid var(--horizontalRuleColor);
}

nav {
	padding-bottom: 1rem;
	padding-bottom: max(1rem, calc(constant(safe-area-inset-bottom) - 0.5rem));
	padding-bottom: max(1rem, calc(env(safe-area-inset-bottom) - 0.5rem));
	line-height: 1;
}

html.ios nav {
	padding-bottom: calc(env(safe-area-inset-bottom) - 0.5rem);
}

nav ul {
	display: flex;
	justify-content: space-around;
}

nav button,
nav a {
    border: 0;
	font-size: 0.7rem;
	text-align: center;
    display: block;
}

nav li:not(.active) button,
nav li:not(.active) a {
	color: 	var(--inactiveAccentColor);
}

nav li span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

nav button::before,
nav a::before {
	/* font-weight: 400; */
    font-size: 1.7rem;
    display: block;
    padding-bottom: 0.2em;

	font-weight: 900;
}

/* nav .active button::before,
nav .active a::before {
	font-weight: 900;
} */

nav .exit::before {
	content: "\f52b";
}

nav .details::before {
    content: "\f15c";
}

nav .chatRooms::before {
	content: "\f0c0";
	content: "\f086";
}

nav .planner::before {
    content: "\f02d";
	content: "\f518";
}

nav .events::before {
    content: "\f073";
}

nav .files::before {
	content: "\f07c";
}

nav .membership::before {
    content: "\f2b9";
}

nav .production::before {
	content: "\f6c1";
    content: "\f6c0";
	content: "\f4b8";
}

nav .profile::before {
	content: "\f406";
}

nav .dashboard::before {
	content: "\f00b";
	content: "\f4b8";
	content: "\f6c0";
	content: "\f819";
}

.nav li::before {
    font-size: 1.2rem;
    margin-right: 1rem;
    height: calc(var(--standardHeight) - 0.75rem);
    width: calc(var(--standardHeight) - 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3em;
    align-self: center;
	color: #fff;
	font-weight: 900;
}

.nav .general::before {
    content: "\f15c";
    background: #ff9502;
	/* background: #baba07; */
}

.nav .script::before {
    content: "\f70e";
    background: #21b7a3;
}

.nav .notes::before {
    content: "\f249";
    color: yellow;
    /* font-weight: 900; */
    background: #444;
    /* background: #cece00; */
}

.nav .announcements::before {
    /* content: "\f08d"; */
    /* background: #e6aa71; */
	/* background: #9e9e04; */
	/* background: #f3b23c; */
	background: #baba07;
    content: "\f0a1";
}

.nav .auditions::before {
	content: "\f0c0";
    background: #269f25;
}

.nav .chat::before {
	/* content: "\f086"; */
	content: "\f075";
    background: #54f16e;
	background: #008000;
}

.nav .venues::before {
    content: "\f64f";
    background: #abab10;
	background: #b5651d;
}

.nav .events::before {
    content: "\f073";
    background: #fe3b39;
}

.nav .files::before {
	content: "\f07c";
    background: #19abf8;
	background: #4169e1;
	letter-spacing: -2px;
}

.nav .membership::before {
    content: "\f2b9";
    background: #8c32c7;
}

.nav .defaults::before {
    /* content: "\f0ae"; */
	content: "\f0ca";
    background: #219d9c;
}

.nav .seasons::before {
    content: "\f145";
    background: #c73262;
	font-weight: 400;
}

.nav .checklist::before {
    /* content: "\f15c"; */
    background: cornflowerblue;
    /* content: "\f316"; */
    /* content: "\e5a0"; */
    /* content: "\f65b"; */
    /* content: "\f733"; */
    content: "\f46c";
    font-weight: 400;
}

@media screen {
	.modal > section,
	main {
		margin: 0 auto;
		max-width: 1024px;
		min-height: 100%;
		background: var(--backgroundColor);
	}

	main {
		padding: 2.5rem 0 5rem;
		padding-top: calc(2.5rem + constant(safe-area-inset-top));
		padding-bottom: calc(5rem + constant(safe-area-inset-bottom));
		padding-top: calc(2.5rem + env(safe-area-inset-top));
		padding-bottom: calc(7rem + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
}

[data-modal=true] {
	max-height: 0;
	overflow: hidden;
}

.modal > section > header,
main > header {
	top: 0;
	z-index: 2;
	max-width: 1024px;
	/* left: 50%; */
	/* transform: translateX(-50%); */
	width: 100%;
	display: flex;
	align-items: center;
}

.modal > section > header {
	position: sticky;
	padding: 0;
}

main > header {
	position: fixed;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}

.modal > section > header h1,
main > header h1 {
    text-align: center;
    font-size: 1rem;
    max-width: calc(100% - 10rem);
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.8rem 1px; /* 1px for a weird bug with contenteditable outline */
	flex: 1;
}

.modal > section > header h1:not(:only-child),
main > header h1:not(:only-child) {
    position: absolute;
    left: 50%;
    top: 0;
	top: constant(safe-area-inset-top);
	top: env(safe-area-inset-top);
	transform: translateX(-50%);
	margin: 0;
}

/* :-webkit-any(a, label, button) ~ h1 {
    position: relative;
    left: 50%;
    top: 0;
	transform: translateX(-50%);
	margin: 0;
} */

main > header button {
    /* border: 0; */
}

.modal > section > header > button,
.modal > section > header > a,
main > header a,
main > header button,
section.submit > a,
section.submit > button {
    padding: 0 1rem;
	box-sizing: border-box;
	min-height: var(--standardHeight);
	display: inline-flex;
	align-items: center;
	white-space: pre;
}

/* main > header a:first-child {
	position: fixed;
	top: 0;
	z-index: 2;
	margin: 0;
	background: none;
	left: 0;
	padding: .8em 1em;
} */

.modal > section > header a span,
main > header a span {
	font-size: 0;
}

.modal > section > header > .back::before,
main > header > .back::before {
    margin-right: 0.5rem;
    display: inline-block;
    font-weight: 900;
    content: "\f053";
}

.modal > section > header label,
main > header label
{
	/* position: absolute; */
    /* right: 1rem; */
    line-height: 0.5;
    /* font-size: 0; */
    /* top: 50%; setting to 0.9rem didn't work with iOS */
    /* transform: translateY(-50%); */
	color: var(--accentColor);
}

/* TODO: rework */
.modal > section > header > .add,
.modal > section > header > label,
main > header > .add,
main > header > label,
section > .add:only-child {
    font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal > section > header > .add,
main > header > .add {
	margin-left: auto;
}

.modal > section > header > label,
main > header > label {
	border: 1px solid;
	height: 30px;
	width: 30px;
	border-radius: 0.2rem;
	padding: 0px;
    margin: 0.4rem 0.5rem;
}

.modal > section > header > a::before,
.modal > section > header > label::before,
main > header > a::before,
main > header > label::before {
	font-size: 1rem;
}

.modal > section > header > .add::before,
main > header > .add::before,
section > .add::before {
	content: "\f067";
	font-size: 1rem;
	font-weight: 900;
}

label.attach::before {
	content: "\f0c6";
	font-size: 1.75rem;
	/* font-weight: 900; */
}

a.participants {
	font-size: 0;
}

a.participants::before {
	content: "\f500";
	font-size: 1rem;
	/* font-weight: 900; */
}

button.help {
	font-size: 0;
}

button.help::before {
	content: "\f059";
	font-size: 1rem;
}

.details_header {
	align-items: center;
	/* background-color: var(--foregroundColor); */
	background-position: center;
	background-size: cover;
    position: relative;
	display: flex;
	/* padding: 0.7rem 0; */
	padding: 0.7rem 0.5rem 0.7rem 0;
	z-index: 0; /* why was this set to 1? */

	background-image: none !important;
    background-color: var(--foregroundColor);
}

.details_header.member {
	background: var(--foregroundColor) !important;
}

.details_header:not(.member)::before {
    /* content: ""; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.86;
    background: var(--backgroundColor);
	z-index: -1;
}

.details_header > .image {
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;
    position: relative;
    margin: 0 1rem 0 0.5rem;
	width: 80px;
	min-width: 80px; /* for some reason, it can get smaller than 80px if text wraps */
	height: 120px;
	font-size: 0;
}

.theatre.details_header > .image {
	height: 80px;
}

.details_header.no_person > .image {
	width: 0;
	min-width: 0;
}

.details_header > .image::before {
	/* content: ""; */
    background: url(images/no_picture_available.png) no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.details_header img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.theatre.details_header img {
	/* object-fit: contain; */
}

.details_header > .text {
    position: relative;
}

.details_header .text :nth-child(1),
.details_header .text :nth-child(2),
.details_header .text :nth-child(3) {
    margin: 0;
}

html.ios .details_header .text {
	font: -apple-system-title2;
}

html:not(.ios) .details_header .text :first-child {
	font-size: min(2.2rem, max(1rem, 4vw));
    font-weight: normal;
}

html.ios .details_header .text :first-child {
	font: inherit;
	font-size: 0.9em;
	margin-bottom: 1em;
}

.details_header .text :nth-child(2),
.details_header .text :nth-child(3) {
    font-weight: normal;
	font-size: min(1.2rem, max(1rem, 1.1vw));
	font-size: min(1.5rem, max(1rem, 3vw));
}

html.ios .details_header .text :nth-child(2),
html.ios .details_header .text :nth-child(3) {
	font: inherit;
	font-size: 0.75em;
}

.details_header .text :nth-child(2) {
    margin-top: 0.25rem;
}

fieldset {
    border: 0;
    position: relative;
}

section > fieldset {
    padding: 1.3em 1em 0;
	min-width: 0; /* https://stackoverflow.com/questions/7434756/overflow-and-text-overflow-within-fieldsets/29499408#29499408 */
}

fieldset.deletable {
	overflow: hidden;
}

section.simple > fieldset,
fieldset.simple {
	padding: 0 1em;
	box-sizing: border-box;
}

legend {
    text-transform: uppercase;
    position: absolute;
    left: 0;
	width: 100%;
    top: 0;
    color: var(--secondaryTextColor);
    background: var(--backgroundColor);
    padding: 0 1rem 0.45em;
    font-size: min(0.8rem, max(0.5rem, 3vw));
	box-sizing: border-box;
}

/* legend {
    text-transform: uppercase;
    color: var(--secondaryTextColor);
    background: var(--backgroundColor);
    padding: 0 1rem 0.45em;
    font-size: min(0.8rem, max(0.5rem, 3vw));
    box-sizing: border-box;
    margin: 0 -1rem;
    width: calc(100% + 2rem);
} */

html.ios legend {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

.simple legend {
	opacity: 0;
	font-size: 0;
}

fieldset fieldset legend {
	left: -1rem;
	right: -1rem;
    padding-top: 1.5em;
}

legend + button,
legend + a
{
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 1rem 0.45em;
	font-size: min(0.8rem, max(0.5rem, 3vw));
}

section > fieldset > label {
	min-height: var(--standardHeight);
	display: flex;
	align-items: center;
}

section > fieldset > label:has(> input) {
    font-size: 0;
	margin-right: -1rem;
	border-bottom: 1px solid var(--horizontalRuleColor);
}

section > fieldset > label > input {
    font-size: 1rem !important; /* TODO: can this be removed? */
}

fieldset label {
    /* white-space: nowrap; */
    /* display: block; */
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
}

li:not(.inline) > label:first-child {
	font-size: 0;
}

/* TODO: make sure this doesn't need to be specific to .inlined.check, or something */
.check > label:first-child {
	pointer-events: none;
}

input:not([type=checkbox]):not([type=radio]),
select,
textarea {
    padding: 0;
    font: inherit;
    color: inherit;
    background: inherit;
    border: 0;
    width: 100%;
	display: block;
	margin: 0;
}

section.pages input[type=number] {
    text-align: left;
    width: 4.5ch;
    flex: none;
}

.inline > label + input:not([type=checkbox]):not([type=radio]):not([type=text]):not([type=email]),
.inline > label + select {
	width: auto;
	margin-left: auto;
	color: var(--secondaryTextColor);
    background: var(--foregroundColor);
}

fieldset > input:not([type=checkbox]):not([type=radio]),
fieldset > select {
	padding: var(--standardPadding);
	box-sizing: border-box;
	min-height: var(--standardHeight);
}

input[type="checkbox"],
input[type="radio"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select,
button,
label {
	cursor: pointer;
}

select {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

.inline > select {
	direction: rtl;
}

textarea {
	box-sizing: border-box;
    resize: vertical;
	height: 4em; /* this makes it tall enough for a 2.5 lines of text */
	padding: 0.57rem 1rem 0.57rem 0;
}

legend + textarea {
	/* padding: 0.57rem 0; */
}

input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="number"],
.inline input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	text-align: right; /* for edgehtml */
	text-align: end;
	color: var(--secondaryTextColor);
}

@supports (selector(input[type="datetime-local"]::-webkit-calendar-picker-indicator)) {
	input[type^="date"],
	input[type="time"] {
		position: relative;
	}

	::-webkit-calendar-picker-indicator,
	::-webkit-calendar-picker-indicator {
		background: none;
		cursor: pointer;
	}

	input[type^="date"]::after,
	input[type="time"]::after {
		pointer-events: none;
			position: absolute;
	}

	input[type^="date"]::after {
		content: "\f133";
		right: 0.3em;
		margin-top: -1px;
		font-size: 1.07rem;
	}

	input[type="time"]::after {
		content: "\f017";
		right: .25em;
		font-size: 0.95rem;
	}
}

input[type="checkbox"] {
	margin-right: 0.5rem;
}

section li {
	/* min-height: var(--standardHeight); */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
}

.deletable li {
	/* overflow: hidden; */
	/* white-space: nowrap; */
	position: relative;
	display: flex;
}

.deletable li > input:first-child + label,
.deletable li > input[type=checkbox] + label,
.deletable li > input[type=checkbox] ~ button,
.deletable li > input[type=checkbox] ~ a.delete,
.deletable li > input[type=checkbox] ~ div {
	transition: transform 0.5s linear;
}

.deletable li > input[type=checkbox]:not(:checked) + label,
.deletable li > input[type=checkbox]:not(:checked) ~ button,
.deletable li > input[type=checkbox]:not(:checked) ~ a.delete,
.deletable li > input[type=checkbox]:not(:checked) ~ div {
	transform: translateX(-5.44rem);
}

.deletable li.deleting * {
	transition: none !important;
}

.deletable li > input[type=checkbox]:first-child {
	position: absolute;
	opacity: 0;
}

.deletable li > input:first-child + label {
	align-items: center;
	display: inline-flex;
	font-size: 0 !important;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.deletable li > div {
	width: calc(100% - 2.2rem);
	margin-left: 2.2rem;
	position: relative;
	align-items: center;
	display: flex;
}

.deletable li > input[type=checkbox]:not(:checked) ~ div {
	pointer-events: none;
}

.deletable li > input[type=checkbox] + label::before {
	font-weight: 900;
	/* margin-right: 1rem; */
	border-radius: 50%;
	font-size: 0.8rem;
	color: white;
	display: flex;
	justify-content: center;
	border: 1px solid;
	line-height: 0.9;
	padding: 0.4em;
	content: "\f068";
	background: var(--destructiveColor);
}

.deletable li .controls {
	left: -1rem;
}

.deletable li button.accessory {
	/* font-size: 0; */
	/* position: relative; */
	/* left: -1.5rem; */
	/* vertical-align: middle; */
}

.deletable li button.accessory::before {
	content: "\f13a";
	font-weight: 900;
	font-size: 1.5rem;
	vertical-align: middle;
}

.deletable li button:last-child,
.deletable li a.delete {
	/* border: 0; */
	background: var(--destructiveColor);
	padding: 0 0.7em;
	color: #fff;
	/* flex: 0; */
	/* flex-basis: 0; */
	/* vertical-align: middle; */
	/* height: auto; */
	margin-right: -4.42rem;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	position: relative;
	left: 1rem;
	/* align-self: normal; */
}

.deletable li button.accessory ~ button {
	/* position: relative; */
	/* left: 0.5rem; */
}

.editable {
	cursor: pointer;
}

li.sortable {
	position: relative;
}

.sortable::after,
.editable::after {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	font-weight: 900;
	color: var(--secondaryTextColor);
}

.editable::after {
	content: "\f054";
}

.sortable::after {
    /* content: "\f7a4"; */
	cursor: grab;
	padding: 1rem;
    margin-right: -1rem;
}

/* TODO: not crazy about the !important */
/* input.text {
	background: var(--backgroundColor) !important;
    border: 1px solid var(--secondaryTextColor) !important;
	padding: 0.5rem !important;
} */

input.text.divider {
    /* font-weight: 900; */
}

.sortable [contenteditable] {
    border: 1px solid var(--secondaryTextColor);
    /* margin-right: 3rem !important; */
    cursor: text;
	background: var(--backgroundColor);
}

.sortable [contenteditable]:only-child {
	padding: 0.5rem;
}

fieldset > .add,
section ul ~ .add {
    display: flex;
	align-items: center;
	justify-content: flex-start;
	color: inherit;
	width: 100%;
	padding: var(--standardPadding);
	position: relative;
	box-sizing: border-box;
	min-height: var(--standardHeight);
}

section ul:not(:empty) ~ .add {
	border-top: 1px solid var(--horizontalRuleColor);
}

section > .add:not(:only-child) {
	padding: 0 1rem;
}

fieldset > .add::before,
section ul ~ .add::before {
	font-weight: 900;
	margin-right: 0.5rem;
	border-radius: 50%;
	font-size: 0.8rem;
	color: white;
	display: flex;
	justify-content: center;
	border: 1px solid;
	line-height: 0.9;
	padding: 0.4em;
	content: "\f067";
	background: var(--constructiveColor);
}

fieldset > .add select,
section ul + .add select {
	padding-left: 3ch;
	/* position: relative; */
	/*left: -3ch; /* this is to keep ::before clickable */
	/* pointer-events: all; */
	line-height: 1;
	/* height: 1em; */
	transform: translateX(-3ch); /* this is to keep ::before clickable */
}

.switch,
.check {
	display: flex;
	flex-wrap: wrap; /* for .inline within .switch */
	position: relative;
}

.switch,
.check {
	/* min-height: var(--standardHeight); */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
}

/* .default:hover::before,
.deletable li:hover::before,
li.switch:hover::before,
li.check:hover::before,
.inline:hover::before {
    background: var(--headerBackgroundColor);
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    right: -1rem;
    bottom: 0;
} */

div.switch {
	/* min-height: var(--standardHeight); */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
	/* padding: 0 1rem; */
}

.switch > input,
.check > input[type=checkbox],
.check > input[type=radio] {
    position: absolute;
    opacity: 0;
	pointer-events: none;
}

.switch > label {
	display: flex;
	align-items: center;
	position: relative;
}

li.switch > label {
	/* min-height: 1.7rem; */
}

.check > label {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
}

.check > input[type=radio]:checked ~ label {
	cursor: default;
}

.check > label ~ label {
	left: auto;
	width: 2rem;
}

/* SO COOL! */
.inlined.check > input[type=text]:placeholder-shown ~ label {
	pointer-events: none;
}

.switch > input:disabled ~ label {
	cursor: not-allowed;
}

form > input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.switch > span,
.switch > input + label,
.check > span {
	flex: 1;
	display: flex;
    align-items: center;
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	box-sizing: border-box;
	position: relative;
}

.switch > span + label::before,
.switch > label + label::before {
    content: "";
    /* height: calc(1.3rem - 2px); */
	height: calc(1.95rem - 4px);
    /* width: calc(1.3rem - 2px); */
	width: calc(1.95rem - 4px);
    /* display: block; */
    position: absolute;
    border-radius: 50%;
    /* margin-left: 1px; */
	margin-left: 2px;
    background: white;
    transition: all 0.4s;
}

input[type="checkbox"]:checked + section .switch > label::before,
.switch > input:checked + span + label::before,
.switch > input:checked + label + label::before {
    /* margin-left: calc(1rem - 1px); */
	margin-left: calc(1.65rem - 8px);
}

.switch > span + label::after,
.switch > label + label::after {
    border-radius: 500px;
    background: var(--switchBackgroundColor);
    content: "";
    /* width: 2.2rem; */
	width: 3rem;
    height: 1.95rem;
    /* height: 1.3rem; */
    transition: all 0.4s;
}

input[type="checkbox"]:checked + section .switch > label::after,
.switch > input:checked ~ label:nth-child(3)::after {
    background: var(--switchActiveBackgroundColor);
}

.check > label::after {
	font-weight: 900;
	color: var(--accentColor);
	font-size: 1em;
	position: absolute;
	right: 0;
	transform: translateY(-50%);
	top: 50%;
	content: " ";
}

.check > input:not(:checked) ~ label:hover::after {
	content: "\f00c";
	color: var(--secondaryTextColor);
}

.check > input:checked ~ label::after {
	content: "\f00c";
}

/* SO COOL! */
.inlined.check > input[type=text]:placeholder-shown ~ input:checked ~ label::after {
	color: gray;
}

.switch > input:disabled ~ label::after {
	color: gray;
	background: darkgray;
}

.switch > label span,
.check > label * {
	font-size: 0 !important;
}

.switch > button {
	/* display: none; */
}

footer,
.modal > section > h2,
main > h2,
section h2 {
	font-size: 1rem;
    font-size: min(1rem, max(0.5rem, 3vw));
    color: var(--secondaryTextColor);
    background: var(--backgroundColor);
	padding: 0.5rem 1rem 0;
	font-weight: normal;
	margin-bottom: 0;
}

html.ios footer,
html.ios .modal > section > h2,
html.ios main > h2,
html.ios section h2 {
	font: -apple-system-footnote;
}

footer:last-child {
	border-top: 1px solid var(--horizontalRuleColor);
}

/* TODO: should this be more specific to <detail>? */
section h2 {
	padding-bottom: 1rem;
	margin: 0;
}

.switch + footer {
	margin: 0 0 0 -1rem;
}

ul {
	list-style: none;
	padding: 0;
}

/* TODO: this is in member details; can it be fixed? <<< YES! */
ul:empty {
	/* display: none; */
}

input[type=file] + ul:not(:empty) {
	border-top: 1px solid var(--horizontalRuleColor);
}

section {
	background: var(--foregroundColor);
}

section,
section + details,
details + details,
.modal > section > details,
main > details {
	margin-top: 1.5rem;
}

summary + section {
    margin-top: 0;
}

section.button_group {
    display: flex;
}

section.submit {
	position: fixed;
	top: 0;
	top: constant(safe-area-inset-top);
	top: env(safe-area-inset-top);
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	margin: 0;
	background: none;
	box-sizing: border-box;
	right: calc(50vw - 512px);
}

/* TODO: rework */
section.submit a.compose {
    font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* TODO: rework */
section.submit a.compose::before {
	content: "\f044";
	font-size: 1rem;
	/* font-weight: 900; */
}

:not(.modal) > section header {
	display: flex;
	background: var(--backgroundColor);
	padding: 0 1rem;
	font-size: min(0.8rem, max(0.5rem, 3vw));
}

html.ios :not(.modal) > section header {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

section header h3 {
	margin: 0 0 0.5em;
    text-transform: uppercase;
	font: inherit;
	font-weight: normal;
	flex: 1;
	color: var(--secondaryTextColor);
}

section.simple header h3 {
	/* font-size: 0; */
	/* margin: 0; */
	opacity: 0;
	pointer-events: none;
}

section header + div.notes,
section header ~ p,
section > p:only-child {
	/* margin: 0 1rem; */
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--horizontalRuleColor);
	border-bottom: 1px solid var(--horizontalRuleColor);
    overflow-wrap: anywhere;
}

.inline > button:only-child,
.inline > a:only-child,
section > button,
section > a {
    /* border: 0; */
	/* display: block; */
	/* background: inherit; */
	/* font: inherit; */
	width: 100%;
	/* padding: 0.7rem 0; */
	/* text-align: center; */
	box-sizing: border-box;
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	display: flex;
	align-items: center;
	justify-content: center;
}

section > a + button,
section > a + a,
section > button + a,
section > button + button {
	border-top: 1px solid var(--horizontalRuleColor);
}

.inline:last-child > button:only-child,
.inline:last-child > a:only-child {
	margin: -1rem 0;
}

section > ul {
    padding: 0 1rem;
}

/* TODO: figure this out */
section > ul:first-child:not(.calendar-grid):not(.venues),
section > header + ul:not(.calendar-grid):not(.venues) {
	border-top: 1px solid var(--horizontalRuleColor);
}

section > ul:not(.calendar-grid):not(.venues):last-child {
	border-bottom: 1px solid var(--horizontalRuleColor);
}

section > ul li {
	position: relative;
}

section li {
	display: flex;
}

section .deletable li {
	padding: 0;
}

section ul:not(.cards):not(.calendar-grid):not(.venues) li + li,
section > header + div ~ div,
fieldset > div + div,
fieldset > div + ul,
:not(legend) + .inline {
	border-top: 1px solid var(--horizontalRuleColor);
}

section .view {
    position: absolute;
    left: 0;
    top: 0;
	font-size: 0;
	color: transparent;
	padding: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

section .view::after {
	font-size: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondaryTextColor);
    content: "\f054";
    font-weight: 900;
}

/* section .view:last-child::after {
	font-size: 1rem;
	font-weight: 900;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--secondaryTextColor);
	content: "\f054";
} */

section li img {
	height: 100%;
	max-height: 120px;
	width: 100%;
	object-fit: cover;
}

section ul:not(.cards) li:not(.image-only) .image {
	background: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	width: 120vw; /* ¯\_(ツ)_/¯ */
	height: 18vw;
	max-width: 3rem;
	max-height: 4.5rem;
	margin-right: 1rem;
	font-size: 0;
}

section.theatres ul:not(.cards) li:not(.image-only) .image {
	max-height: 3rem;
}

section li .image::before {
	/* content: ""; */
	background: url(images/no_picture_available.png) no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

/* TODO: why did i do this? */
section li + li .image::after {
    /* content: ""; */
    /* border-top: 1px solid var(--foregroundColor); */
    /* width: calc(100% + 1rem); */
    /* position: absolute; */
	/* top: -1px; */
	/* left: 0; */
}

section .contents {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
}

section .contents * {
	align-self: flex-end;
	overflow-wrap: break-word;
}

section .contents a {
    position: relative;
    z-index: 1; /* this was 2, but that caused event addresses to display on top of the header */
	line-break: anywhere;
}

section li .text,
section > .contents .text {
	font-size: min(1.2rem, max(0.5rem, 4.5vw));
}

html.ios section li .text,
html.ios section > .contents .text {
	font: -apple-system-body;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

section .contents .text {
	margin: 0;
	order: 1;
	line-height: 1.2;
}

/* TODO: not sure about this, but it *should* be fine */
li .controls:not(.rsvp) {
	padding-left: 1rem;
}

.deletable li .controls {
	padding-left: 2rem;
}

li .controls:nth-last-child(2) {
	margin-right: 1rem;
}

section li > button.text {
	color: inherit;
	width: 100%;
	text-align: left;
	display: flex;
}

section .default > a:only-child::after,
section .default > button:only-child::after {
	font-size: 1rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--secondaryTextColor);
	content: "\f054";
	font-weight: 900;
}

section > .contents .detail-text,
li .detail-text {
	font-style: normal;
	font-size: min(1rem, max(0.5rem, 3.5vw));
	color: var(--secondaryTextColor);
}

html.ios section > .contents .detail-text,
html.ios li .detail-text {
	font: -apple-system-short-subheadline;
}

section .contents .secondary-text,
section .contents .secondary-detail-text {
    white-space: nowrap;
	text-align: right;
	font-size: min(1rem, max(0.5rem, 3.5vw));
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

html.ios section .contents .secondary-text,
html.ios section .contents .secondary-detail-text {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

section .contents .secondary-text {
	color: var(--primaryTextColor);
}

section .contents .secondary-detail-text {
	color: var(--secondaryTextColor);
}

section .contents > .detail-text + .secondary-detail-text {
    flex: 1.5;
}

section ul.events .contents > .detail-text {
    flex: 0.5;
}

section ul.events .contents > .detail-text + .secondary-detail-text {
    flex: 0.5;
}

section .contents > .text + .secondary-text + .secondary-detail-text {
	margin-left: auto;
}

section .contents .subtext {
	margin-top: 0.3rem;
	font-size: min(0.8rem, max(0.5rem, 3.5vw));
	overflow-wrap: normal;
	color: var(--secondaryTextColor);
}

html.ios section .contents .subtext {
	font: -apple-system-caption1;
}

section .contents .subtext {
	flex-basis: 100%;
}

/* fixes a weird issue with wrapping */
html.ios section .contents .subtext span::before {
	content: "\a";
	letter-spacing: -0.4ch;
}

li .controls {
	display: flex;
	position: relative;
    z-index: 1;
	/* align-items: center; */
	margin-left: auto;
}

li .controls:not(.rsvp) {
	order: 3;
}

li .controls:first-child {
	order: 0;
	width: 3rem;
	padding: 0 1rem 0 0;
}

section.right_detail {
	position: relative;
}

section.right_detail > .contents,
li.right_detail .contents {
	display: flex;
}

section.right_detail > .contents + .contents {
    position: relative;
}

section.right_detail > .contents + .contents::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 0;
    border-top: 1px solid var(--horizontalRuleColor);
}

section.right_detail > .contents .detail-text,
li.right_detail .contents .detail-text {
	font-size: min(1.2rem, max(0.5rem, 4.5vw));
	color: var(--secondaryTextColor);
	flex: revert;
}

section.right_detail > .view + .contents .text,
section.right_detail > .view + .contents .detail-text {
	color: var(--accentColor) !important;
}

li.image-only .contents .image a {
	display: inline-block;
	position: relative;
}

li.image-only.animated .contents .image a::after {
    content: "\f144";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: black;
    opacity: 0.5;
    background: white;
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    line-height: 1;
}

li.image-only .contents .image img {
	width: auto;
}

form#send {
	display: flex;
	margin-top: 1rem;
	background: var(--foregroundColor);
}

form#send textarea {
	filter: brightness(0.98);
}

form#send button {
	font-size: 0;
	padding: 0.5rem;
	margin: 0 0.5rem;
}

form#send button::before {
	content: "\f1d8";
	font-size: 1.75rem;
}

li .controls a,
li .controls button {
	font-size: 0;
	position: relative;
	display: flex;
    align-items: center; /* for some reason, Edit Membership needs this, maybe all of Planner */
}

li .controls:last-child a:last-child,
li .controls:last-child button:last-child {
	margin-right: -0.5rem;
}

li .controls a::after,
li .controls button::after,
li .controls a::before,
li .controls button::before {
	font-size: 1.7rem;
	display: flex;
	min-width: var(--standardHeight);
	min-height: var(--standardHeight);
	align-items: center;
	justify-content: center;
}

li .controls .conflicts::before {
	content: "\f017";
	content: "\f273";
}

li .controls .clone::before {
	content: "\f24d";
}

li .controls .clone.day::before {
	content: "\f783";
	font-weight: 900;
}

li .controls .clone.week::before {
	content: "\f784";
	font-weight: 900;
}

li .controls .notes::before {
	content: "\f249";
	color:rgb(194, 194, 25);
	font-weight: 900;
}

li .controls .up::before {
	content: "\f062";
}

li .controls .down::before {
	content: "\f063";
}

li .controls .calendar::before {
	content: "\f073";
}

li .controls .clone.day::after,
li .controls .clone.week::after {
	content: "+";
	font-size: 1.3rem;
	position: absolute;
	right: 0.4rem;
	bottom: 0.9rem;
	color: var(--primaryTextColor);
	font-weight: bold;
	padding: 0;
	margin: 0;
	line-height: 0;
	-webkit-text-stroke: 1px var(--foregroundColor);
	font-family: Helvetica, Arial, sans-serif; /* to overcome bug with variable fonts */
}

li .controls .share::before {
	content: "\f064";
}

li .controls .link::before {
	content: "\f0c1";
}

li .controls .delete::before {
	content: "\f057";
}

li .controls .deactivate::before {
	content: "\f2f5";
	font-weight: 900;
}

li .controls .constructive::before {
	content: "\f2f6";
	font-weight: 900;
}

li .controls .convert::before {
	content: "\f3bf";
}

li .controls .compose::before {
	content: "\f303";
	font-weight: 900;
}

li .controls .chat::before {
	content: "\f4ad";
	/* font-weight: 900; */
}

li .controls .auditions::before {
	content: "\f4fd";
	font-weight: 900;
}

li .controls .join::before {
	content: "\f0c0";
	content: "\f234";
	font-weight: 900;
}

li .controls .edit::before {
	content: "\f044";
	content: "\f085";
	content: "\f1de";
	content: "\f7d9";
	content: "\f0ad";
	/* content: "\f552"; */
	/* content: "\f013"; */
	/* content: "\f518"; */
	font-weight: 900;
}

li .controls .planner::before {
	content: "\f518";
}

li .controls .info::before {
	content: "\f05a";
}

li .controls .download::before {
	content: "\f381";
}

li .controls .reschedule::before {
	/* content: "\f133"; */
	content: "\f333";
	font-size: 1.8rem;
    padding-bottom: 0.3rem;
}

li .controls .reschedule::after {
	/* content: "\f303"; */
	font-weight: 900;
	font-size: 0.7rem;
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% + 0.25rem));
}

li .controls .production::before {
	content: "\f630";
}

li .controls .production::after {
	font-size: 1rem;
	position: absolute;
	bottom: -0.8rem;
	font-weight: 900;
	padding: 0;
	margin: 0;
	line-height: 0;
	-webkit-text-stroke: 1px var(--foregroundColor);
	left: -0.5rem;
	transform: rotate(150deg);
	content: "\f3e5";
}

ul.cards {
	display: flex;
	overflow-x: auto;
	max-width: calc(100% - 3rem);
	padding-bottom: 0.5rem;
}

ul.cards li {
	/* display: flex; */
	flex-direction: column;
	text-align: center;
}

ul.cards li + li {
	margin-left: 0.5rem;
}

ul.cards .image {
	/* margin-bottom: 0; */
	width: 20vw;
	max-width: 80px;
	height: 30vw;
	max-height: 120px;
	/* margin-right: 0; */
	background-color: var(--backgroundColor);
	background-position: center center;
	background-size: cover;
	/* display: block; */
}

ul.cards .text,
ul.cards .detail-text {
	font-size: min(0.72rem, max(0.5rem, 3.5vw));
	width: 20vw;
	max-width: 80px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal !important;
	overflow: hidden;
}

html.ios ul.cards .text,
html.ios ul.cards .detail-text {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

ul.cards .text {
	margin-top: 0.3em;
}

ul.cards .detail-text {
	color: var(--secondaryTextColor);
}

/* section.submit > a,
section.submit > button {
	width: auto;
	padding: .8em 1em;
	height: auto;
} */

.image_chooser {
    background: var(--foregroundColor);
    display: block;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--horizontalRuleColor);
}

.image_chooser span {
    display: block;
    text-align: center;
    color: var(--accentColor);
	margin-top: 0.5rem;
}

.image_chooser span:first-of-type {
    width: 80px;
    height: 120px;
    background-size: cover;
    margin: 0 auto;
	background-position: center;
	background-repeat: no-repeat;
}

.theatre.image_chooser span:first-of-type {
	height: 80px;
}

.image_chooser + section {
	margin: 0;
}

.image_chooser input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
	opacity: 0;
	width: 0;
    height: 0;
}

.modal {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	background: var(--backgroundColor);
	padding-bottom: 5rem;
	overflow-y: auto;
	transition: 0.4s;
	margin: 0;
}

.modal[data-state="hidden"] {
	top: 100%;
}

header.standard_buttons .done {
	margin-left: auto;
}

@media screen and (max-width: 1024px) {
	#root > header {
		/* padding-left: 2rem;
		padding-right: 2rem; */
	}

	.modal > section,
	main {
		padding-left: 0;
		padding-right: 0;
	}

	main > header button:first-child,
	main > header a:first-child {
		/* left: 0; */
	}

	section.submit {
		right: 0;
	}
}

.inline {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	box-sizing: border-box;
}

.inline > ul {
	width: 100%;
}

.switch .switch.inline {
	padding: 0;
}

.switch:not(.alt) > input:checked ~ .inline {
	display: none;
}

.switch.alt > input:not(:checked) ~ .inline {
	display: none;
}

/* commented these out just to see if it fails anywhere */
.inline:not(.switch) label {
	/* position: absolute; */
	/* pointer-events: none; */

	white-space: nowrap;
}

.inline label span {
    position: absolute;
    opacity: 0;
}

section .calendar-grid li > div + div {
    margin-top: 1rem;
}

section .calendar-grid .controls {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	font: inherit;
	margin: 0;
	padding-top: 0.5rem;
}

section .calendar-grid .controls.rsvp label {
	font-size: 0;
	border-radius: 50%;
}

section .calendar-grid .controls.rsvp label::before {
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
}

section .calendar-grid .controls.rsvp > input:not(:checked) + label {
	opacity: 0.75;
}

section .calendar-grid .controls.rsvp > input:not(:checked) + label:hover {
	opacity: 1;
}

@media screen and (max-width: 568px) {
	.legend span span {
		font-size: 0;
	}

	section .calendar-grid li {
		display: flex;
		flex-direction: column;
	}

	section .calendar-grid li:empty,
	section .calendar-grid li.empty {
		display: none;
	}

	section .calendar-grid li:not(:empty) ~ li {
		margin-top: 2rem;
	}

	section .calendar-grid time {
		/* font-size: small; */
	}

	section .calendar-grid li .controls {
		/* position: absolute; */
		/* right: 0; */
		/* top: 50%; */
		/* transform: translateY(-50%); */
		/* width: 20ch; */
		/* margin-right: -1rem; */
		margin-top: 0.5rem;
	}

	section .calendar-grid .controls.rsvp label::before {
		font-size: 1rem;
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media print, (min-width: 569px) {
	section .calendar-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem;
	}

	section .calendar-grid li {
		width: calc(100% / 7);
		border: 1px solid;
		border-top-width: 0;
		border-left-width: 0;
		padding: 0.5rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	section .calendar-grid li:nth-child(-n+7) {
		border-top-width: 1px;
	}

	section .calendar-grid li:nth-child(7n+1) {
		border-left-width: 1px;
		border-bottom-width: 1px;
	}

	section .calendar-grid li:empty {
		border-left: 1px solid var(--foregroundColor);
		border-top: 1px solid var(--foregroundColor);
		border-right: 1px solid var(--foregroundColor);
	}

	section .calendar-grid li:empty + li:not(:empty)::before {
		border-left: 1px solid;
		position: absolute;
		content: "";
		left: -1px;
		top: -1px;
		bottom: -1px;
	}

	section .calendar-grid time {
		margin-bottom: 0.2rem;
		text-align: center;
		display: block;
		font-weight: bold;
		font-size: 1rem;
		font-size: min(1rem, max(0.5rem, 1.6vw));
	}

	section .calendar-grid time span {
		white-space: nowrap;
	}

	section .calendar-grid p,
	section .calendar-grid a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		line-height: 1.3;
		font-size: 0.8rem;
		font-size: min(0.8rem, max(0.5rem, 1.3vw));
		margin: 0;
		display: block; /* for <a> */
	}

	section .calendar-grid .controls + p {
		margin-top: 1rem;
	}

	section .calendar-grid .title ~ .title {
		margin-top: 1em;
	}
}

@media print {
	section .calendar-grid p {
		letter-spacing: -0.05em;
	}

	section .calendar-grid p.title {
		font-weight: 600;
	}

	section .calendar-grid p:not(.subtext),
	section .calendar-grid a {
		white-space: normal;
	}
}

/* TODO: clean this up */
section .calendar-grid .text ~ .text {margin-top: 1rem;}
.controls.rsvp label {position: relative;padding: 0.2em 0.5em;}
.controls.rsvp input {position: absolute;opacity: 0;pointer-events: none;}
.controls.rsvp label::before {font-family: "Font Awesome";margin-right: 0.2em;font-weight: 900;}
.Late::before {content: "\f70c";}
.Yes::before {content: "\f058";content: "\f00c";font-size: 0.9rem !important;}
.Maybe::before {content: "\f059";content: "\f128";font-size: 0.75rem !important;}
.No::before {content: "\f057";content: "\f00d";}
.Yes {color: var(--constructiveColor);}
.Maybe {color: var(--alertColor);}
.No {color: var(--destructiveColor);}
.Late {color: orange;}

.legend {
    display: flex;
	justify-content: center;
    white-space: nowrap;
}

.legend > span {
    margin-left: 1rem;
}

.legend > span::before {
    font-weight: 900;
    margin-right: 0.25rem;
}

.calendar-grid .controls input:checked + label {
	color: white;
}

.calendar-grid .controls input:checked + label.Yes {
	background: var(--constructiveColor);
}

.calendar-grid .controls input:checked + label.No {
	background: var(--destructiveColor);
}

.calendar-grid .controls input:checked + label.Maybe {
	background: var(--alertColor);
}

.calendar-grid .controls input:checked + label.Late {
	background: orange;
}

h2 + form {
	margin-top: 1.5rem;
}

.add_to_calendar::before {
	content: "\f133";
	content: "\f271";
}

/* .controls .add_to_calendar::after {
	content: "+";
	font-size: 1.1rem;
	position: absolute;
	left: 1.055rem;
	bottom: calc(1.25rem - 0px);
	font-weight: bold;
	padding: 0;
	margin: 0;
	line-height: 0;
	font-family: Arial, Helvetica, sans-serif;
} */

section.calendar > .add_to_calendar::before {
	margin-right: 0.5rem;
}

.deletable li > div p:only-child {
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

section .contents {
	overflow: hidden; /* for safari */
	align-self: center;
	position: relative;
}

li > :not(.image):first-child + .contents,
section .contents {
	min-height: var(--standardHeight);
	box-sizing: border-box;
	padding: var(--standardPadding);
	padding-right: 1.5rem;
}

/* TODO: remove !important */
section > .contents {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

section:not(.right_detail) .contents::before,
li:not(.right_detail) .contents::before {
	content: "";
	height: 0;
	flex-basis: 100%;
	order: 4;
}

section .contents .text,
section .contents .detail-text {
	flex: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
	min-width: 1ch;
}

section ul.summary .contents .detail-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

section .contents .detail-text {
	order: 5;
}

section .contents .secondary-text,
section .contents .secondary-detail-text {
	margin-left: 1ch;
}

section .contents .secondary-text {
	order: 3;
}

section .contents .secondary-detail-text {
	order: 7;
}

section .contents .detail-text,
section .contents .secondary-detail-text {
	margin-top: 0.25em;
}

section .contents .subtext {
	order: 9;
}

/* section li .text:nth-last-child(3), */
section .contents blockquote {
	/* white-space: normal; */
	margin: 0;
}

section .contents cite {
	font-style: normal;
}

/* should this just be put in .contents? <<< Yes! */
li > .text {
	/* align-self: center; */
}

.switch > span {
	/* min-height: var(--standardHeight); */
	/* align-items: center; */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
}

.deletable li .text,
.deletable li .detail-text {
	/* padding-right: 4ch; */
	/* box-sizing: border-box; */
	/* max-width: calc(100% - 4ch); */
	/* white-space: normal; */
}

.deletable li > div {
	/* width: calc(min(1024px, 100vw) - 4rem); */
}

section.downloads li .text::after {
	content: "\f381";
	font-weight: 900;
	position: absolute;
	right: 0;
	color: var(--accentColor);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}



/* FOR SAFARI 9 */

@supports not (display: grid) {
	section .contents .text,
	section .contents .detail-text {
		flex-basis: auto;
	}

	.details_header > .headshot,
	label.fullscreen,
	a.resume,
	label.attach,
	form#send button,
	section .calendar-grid .controls.rsvp label,
	section ul:not(.cards) li:not(.image-only) .image,
	section li > .view,
	section.simple header h3,
	li > label:first-child,
	.simple legend,
	.details_header > .image,
	.modal > section > header > .add,
	.modal > section > header > label,
	main > header > .add,
	main > header > label,
	section > .add:only-child,
	.modal > section > header a span,
	main > header a span,
	li .controls a,
	li .controls button {
		font-size: 1px !important;
		letter-spacing: -1px !important;
	}

	a.resume::before {
		font-size: 1.7rem;
	}

	li .controls.rsvp {
		display: block;
		text-align: center;
	}

	section .calendar-grid .controls.rsvp label {
		display: inline-block;
	}

	ul.cards li {
		min-width: 80px;
	}

	ul.cards .text,
	ul.cards .detail-text {
		font-size: 0.6rem;
	}

	li.image-only .contents .image img {
		object-fit: contain;
	}

	@media (min-width: 768px) and (max-width: 768px) {
		ul.calendar-grid {
			margin-left: 0;
			margin-right: 0;
		}

		section .calendar-grid li {
			padding: 0.25rem;
		}

		section .calendar-grid p.time {
			text-overflow: revert;
			letter-spacing: -1.5px;
		}
	}
}

.conflicts li {
	padding: var(--standardPadding);
    min-height: var(--standardHeight);
    align-items: center;
	box-sizing: border-box;
}

.conflicts li p {
	margin: 0;
	line-height: 1.2;
	font-size: min(1rem, max(0.5rem, 3.5vw));
}

.conflicts li p:nth-child(1) {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.conflicts li p:nth-child(2) {
	text-align: right;
	white-space: nowrap;
}

.conflicts li p:nth-child(3) {
	text-align: right;
	width: 10%;
	margin-left: 1rem;
}

.conflicts li p:nth-child(3)::before {
	content: none;
}

.conflicts li p:nth-child(3)::after {
	font-family: "Font Awesome";
	font-weight: 900;
}

.resume object {
    display: block;
    width: 100%;
    aspect-ratio: 11 / 8.5;
}

.resume img {
    display: block;
    width: 100%;
}

section.enlarge {
	position: fixed;
	top: 0rem;
	left: 0;
	z-index: 9;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
}

section.enlarge button {
	padding: 1rem;
}

section.enlarge button span:first-child,
section:not(.enlarge) button span:last-child {
	display: none;
}

section.enlarge object,
section.enlarge iframe,
section.enlarge img {
	width: 100vw;
	max-width: none;
	max-height: none;
}

section.enlarge object,
section.enlarge iframe {
	height: calc(100vh - 2rem);
}

.resume.enlarge {
	margin: 0;
	overflow-y: auto;
}

.resume.enlarge header {
	display: none;
}

.resume button span {
    pointer-events: none;
}

ul.venues li {
    display: block;
}

ul.venues li + li {
    display: block;
    margin-top: 1rem;
}

/* section header {
	font-size: 0.8rem;
}

section.simple header h3 {
	font-size: 1px;
}

.productions li .controls {
	align-self: center;
	flex-basis: 7.4%;
}

.auditions li .controls {
	flex-basis: calc(7.4% * 2);
}

.theatres li .controls {
	flex-basis: calc(7.4% * 3);
}

li .controls a,
li .controls button {
	flex: 1;
}

.controls .add_to_calendar::after {
	left: 1.4rem;
}

.text-breaks-admin-events,
section .contents .text,
section .contents .detail-text {
	flex-basis: auto;
}

section .contents .text {
	font-size: 1.2rem;
}

ul.cards li {
	min-width: 80px;
}

ul.cards .text,
ul.cards .detail-text {
	font-size: 0.6rem;
}

li.image-only .contents .image img {
	object-fit: contain;
}

section.additional.cast li > label {
	height: 0;
	overflow: hidden;
}

li .detail-text {
	font-size: 1rem;
}

section .calendar-grid {
	margin: 1rem 0.5rem;
}

section .calendar-grid li {
	padding: 0.25rem;
}

section .calendar-grid time {
	font-size: 1rem;
}

section .calendar-grid p,
section .calendar-grid a {
	font-size: 0.8rem;
	text-overflow: revert;
}

section .calendar-grid .controls {
	flex-wrap: nowrap;
	padding-left: 0;
}

section .calendar-grid .controls.rsvp label {
	font-size: 0.8rem;
	width: 1.5rem;
	height: 1.5rem;
	overflow: hidden;
	border-radius: revert;
	padding: 0;
}

section .calendar-grid .controls.rsvp label ~ label {
	position: absolute;
}

section .calendar-grid .controls.rsvp label:nth-of-type(2) {
	left: calc(1.5rem + (100% - (1.5rem * 4)) / 3);
}

section .calendar-grid .controls.rsvp label:nth-of-type(3) {
	left: calc(3rem + 2 * (100% - (1.5rem * 4)) / 3);
}

section .calendar-grid .controls.rsvp label:last-of-type {
	right: 0%;
}

.calendar-grid .controls input:checked + label {
	background: none !important;
}

section .calendar-grid .controls.rsvp label::before {
	font-size: inherit;
	border-radius: 50%;
	border: 1px solid;
}

.calendar-grid .controls input:checked + label.Yes::before {
	background: var(--constructiveColor);
}

.calendar-grid .controls input:checked + label.No::before {
	background: var(--destructiveColor);
}

.calendar-grid .controls input:checked + label.Maybe::before {
	background: var(--alertColor);
}

.calendar-grid .controls input:checked + label.Late::before {
	background: orange;
}

.details_header > .headshot {
	max-width: 80px;
}

body[data-fullscreen=true] input.fullscreen:checked + article .details_header > .headshot {
	max-width: 50px;
}

body:not([data-fullscreen=true]) #toggleCompact:checked ~ main > article .details_header > .headshot {
	max-width: 2rem;
}

a.resume {
	font-size: 1px !important;
}

a.resume::before {
	font-size: 1.7rem;
}

li .controls a,
li .controls button {
	font-size: 1px;
}






li .controls a {
	max-height: var(--standardHeight);
}

.details_header > .headshot {
	font-size: 1px !important;
} */


/* TODO: fully test */

/* main > h2 {
	margin-left: 2rem;
	margin-right: 2rem;
}

section {
	background: none;
	margin-left: 2rem;
	margin-right: 2rem;
}

section > p:only-child > *,
section ul:not(.cards):not(.calendar-grid):not(.venues) li + li,
section > header + div ~ div,
fieldset > div + div,
fieldset > div + ul,
:not(legend) + .inline,
fieldset input,
fieldset textarea {
	position: relative;
}

section > p:only-child,
section > ul {
	border-top: 0 !important;
	border-bottom: 0 !important;
	position: relative;
}

section > ul > li:first-child {
	border: 0 !important;
}

section > p:only-child::before,
section > ul::before,
fieldset::before {
	content: "";
	position: absolute;
	background: rgba(255,0,0,0.1);
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: var(--foregroundColor);
	border-radius: 0.5rem;
}

section:not(.simple) > fieldset:not(.simple)::before {
	top: 1.3rem;
}

fieldset > textarea {
	padding: 1rem 1rem 3.5rem;
	margin-left: -1rem;
	width: calc(100% + 2rem);
}

footer:last-child {
	border-top: none;
}

summary {
	background: none;
}

section > ul {
	padding: 0 0 0 1rem;
}

section .view {
	padding-right: 1rem;
	box-sizing: border-box;
}

section .view::after {
	right: 1rem;
} */

:root {
	--standardPadding: 0.6rem 1rem 0.6rem 0;
}

.modal {padding: 0;background: #333;}
.modal > section, main {box-sizing: border-box;padding-bottom: 10rem;}
main {padding-bottom: 10rem;}

section > fieldset {
	padding: 1.3em 0 0 1rem;
}

section.simple > fieldset, fieldset.simple {
	padding: 0 0 0 1rem;
}

section > ul {
	padding: 0 0 0 1rem;
}

/* section .deletable li, */
section .default > a:only-child::after,
section .default > button:only-child::after,
section .view::after,
.switch > label,
.check > label::after {
	padding-right: 1rem;
}

section > fieldset > label:has(> input) {
	padding-right: 1rem;
}

/* these should be fixed above */
section > .contents > .view::after {
	right: 0 !important;
}

/* section .contents, THIS SEEMS TOO GENERAL */
li > :not(.image):first-child + .contents {
	padding-right: 1rem;
}
.default > button > .contents {
    padding-right: 2.5rem;
}

li > a + .contents, section a + .contents {
	padding-right: 2.5rem !important;
}

section > fieldset > label:has(> input) {
	margin: 0;
}

/* figure this out - duplicate event */
li .controls:not(.rsvp) {
	margin-right: 2rem;
	padding: 0;
}
li .controls:last-child a:last-child, li .controls:last-child button:last-child {
	margin: 0;
}

/* entity.php */
a[href="announcements/"] + p {
	padding-right: 1.5rem !important;
}



@supports not selector(:has(a)) {
	.switch > div:not([class]),
	.switch > div.container {
		width: 100%;
	}

	/* TODO: why div:not([class]) ? */
	.switch:not(.alt) > input:checked ~ div:not([class]),
	.switch:not(.alt) > input:checked ~ div.container,
	.switch.alt > input:not(:checked) ~ div:not([class]),
	.switch.alt > input:not(:checked) ~ div.container {
		display: none;
	}
}

:has(> .switch > .container) > .switch {
	overflow: hidden;
	max-height: var(--standardHeight);
	transition: 0.4s ease;
}

fieldset:has(> .switch > input:checked ~ .container) > .switch {
	overflow: hidden;
	max-height: attr(--maxheight);
}

:has(> .switch > .container) > .switch > span,
:has(> .switch > .container) > .switch > label {
	z-index: 1;
	background: var(--foregroundColor);
}

fieldset .container {
	width: 100%;
}

:has(> .switch > .container) > .switch > input ~ div {
	position: relative;
	z-index: 0;
	transition: 0.4s ease;
}

fieldset:has(> .switch.alt > .container) > .switch > input:not(:checked) ~ div,
fieldset:has(> .switch:not(.alt) > .container) > .switch > input:checked ~ div {
	opacity: 0;
	transform: translateY(-100%);
}




/* For Chrome and Safari  */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button  {
	-webkit-appearance: none;
	margin: 0;
}

/* For Firefox  */

input[type="number"] {
	-moz-appearance: textfield;
}

/********************************/
/* TODO: fix Edit Announcements */
/********************************/




:not(.right_detail):not(.default) .contents:has(.secondary-text):not(:has(.detail-text)):not(:has(.secondary-detail-text))::after {
	margin-top: 0.25em;
    order: 5;
    min-width: 1ch;
    font: inherit;
	font-size: min(1rem, max(0.5rem, 3.5vw));
    white-space: pre;
    content: " ";
}