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

:root {
	--backgroundColor: #fefefe;
	--secondaryBackgroundColor: #efefef;
	--foregroundColor: #f1f1f6;
	--primaryTextColor: #000;
	--secondaryTextColor: #6D6D71;
	--accentColor: #007AFF;
	--inactiveAccentColor: #979797;
	--secondaryButtonColor: #8A8A8D;
	--constructiveColor: #49BF1F;
	--destructiveColor: #FE3C2F;
	--alertColor: rgb(194, 194, 25);
	--horizontalRuleColor: #D2D2D4;
	/* --headerBackgroundColor: rgba(0, 0, 0, 0.1); */
	--headerBackgroundColor: #f1f1f6bb;
	--switchBackgroundColor:  #e9e9ea;
	--switchActiveBackgroundColor: #67cd67;

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

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

@media (prefers-color-scheme: dark) {
	:root {
		--backgroundColor: #000;
		--secondaryBackgroundColor: #333;
		--foregroundColor: #1b1b1d;
		--primaryTextColor: #FEFEFE;
		--secondaryTextColor: #8E8E92;
		--accentColor: #0884FF;
		--inactiveAccentColor: #7d7d7d;
		--secondaryButtonColor: #8D8D92;
		--constructiveColor: #49BF1F;
		--destructiveColor: #FF453A;
		--alertColor: rgb(194, 194, 25);
		--horizontalRuleColor: #2A2A2D;
		--headerBackgroundColor: #141414cc;
		--switchBackgroundColor: #39393d;
		--switchActiveBackgroundColor:#65c466;
	}

	/* :root.green_room {
		--accentColor: #30d158;
	} */
}

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

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);
}

ol:empty {
	margin: 0;
	padding: 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-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f071";
	margin-right: 0.5em;
}

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

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: 2;
	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;
}

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-family: "Font Awesome 5 Free";
    font-size: 1.7rem;
    display: block;
    margin-bottom: 0.1em;
}

nav .exit::before {
	content: "\f52b";
	font-weight: 900;
	/* f2f5 */
}

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

nav .chatRooms::before {
	content: "\f0c0";
	font-weight: 900;
	content: "\f086";
}

nav .planner::before {
    content: "\f02d";
	content: "\f518";
    font-weight: 900;
}

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

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

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

nav .production::before {
	content: "\f630";
	content: "\f4b8";
	font-weight: 900;
}

nav .profile::before {
	content: "\f406";
	font-weight: 900;
}

nav .dashboard::before {
	content: "\f00b";
	content: "\f4b8";
	content: "\f6c0";
	font-weight: 900;
}

.nav li::before {
    font-family: "Font Awesome 5 Free";
    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;
}

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

.nav .auditions::before {
	font-weight: 900;
	content: "\f0c0";
    background: #8c32c7;
}

.nav .chat::before {
	font-weight: 900;
	content: "\f086";
    background: #54f16e;
	background: #008000;
}

.nav .venues::before {
    font-weight: 900;
    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: #5c5955;
}

@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-family: "Font Awesome 5 Free";
    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 {
	font-family: "Font Awesome 5 Free";
	content: "\f067";
	font-size: 1rem;
	font-weight: 900;
}

label.attach::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c6";
	font-size: 1.75rem;
	font-weight: 900;
}

a.participants {
	font-size: 0;
}

a.participants::before {
	font-family: "Font Awesome 5 Free";
	content: "\f500";
	font-size: 1rem;
	font-weight: 900;
}

button.help {
	font-size: 0;
}

button.help::before {
	font-family: "Font Awesome 5 Free";
	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? */
}

.details_header::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: contain;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 1rem 0 0.5rem;
	width: 80px;
	height: 120px;
	font-size: 0;
}

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

.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;
}

.details_header .text :first-child {
    font-size: min(1.7rem, 6.2vw);
    font-weight: normal;
}

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

html.ios .details_header .text :nth-child(2),
html.ios .details_header .text :nth-child(3) {
	font: -apple-system-body;
}

.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 */
}

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;
}

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;
}

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

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

li > 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;
}

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 {
	color: var(--secondaryTextColor);
	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 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;
		font-family: "Font Awesome 5 Free";
		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 {
	overflow: hidden;
	/* white-space: nowrap; */
	position: relative;
	display: flex;
	margin-right: -1rem;
}

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

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

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

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

.deletable > 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 > div {
	width: calc(100% - 2rem);
	margin-left: 2rem;
	position: relative;
	align-items: center;
	display: flex;
}

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

.deletable > input[type=checkbox] + label::before {
	font-family: "Font Awesome 5 Free";
	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 .controls {
	left: -1rem;
}

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

.deletable button.accessory::before {
	content: "\f13a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.5rem;
	vertical-align: middle;
}

.deletable button:last-child,
.deletable 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 button.accessory ~ button {
	/* position: relative; */
	/* left: 0.5rem; */
}

.editable {
	cursor: pointer;
}

.editable::after {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	font-size: 1rem;
	font-weight: 900;
	color: var(--secondaryTextColor);
}

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-family: "Font Awesome 5 Free";
	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; */
}

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;
	/* align-self: normal; */
}

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;
}

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

div.switch.alt > input + span {
	/* min-height: var(--standardHeight); */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
}

/* .switch > label::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2em;
    background: white;
    border-radius: 500px;
    line-height: 0.6;
    color: dimgray;
    content: "\f205";
    transform: rotate(180deg);
}

.switch > input:checked ~ label::after {
    content: "\f205";
	color: var(--constructiveColor);
	transform: none;
	margin-bottom: -1px;
} */

.switch > 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;
}

.switch > input:checked ~ label::before {
    /* margin-left: calc(1rem - 1px); */
	margin-left: calc(1.65rem - 8px);
}

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

.switch > input:checked ~ label::after {
    background: var(--switchActiveBackgroundColor);
}

.check > label::after {
	font-family: "Font Awesome 5 Free";
	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(--secondaryButtonColor);
}

.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 -1rem;
}

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

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

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

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

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 {
	font-family: "Font Awesome 5 Free";
	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;
}

section header + div.notes,
section header ~ p {
	/* 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);
}

.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;
	/* z-index: 0; */
}

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

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

section li > .view:last-child::after {
	font-family: "Font Awesome 5 Free";
	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 .image-only {
	/* padding: var(--complexRowPadding); */
}

section li {
	display: flex;
	/* align-items: center; */
	/* min-height: 2.75rem; */
	/* box-sizing: border-box; */
	/* padding: 1rem 0 1rem 0; */
	/* padding: 0.9rem 0 0.9rem 0; */
	/* align-items: center; */
}

section .deletable li {
	padding: 0;
	/* margin: -1rem 0 -1rem 2rem; */
}

section li .image {
	/* margin: 0 0 0.7rem; */
}

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

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

section li .image ~ .contents {
	/* margin: -1rem 1rem -1rem 0; */
	/* margin-right: 1rem; */
	/* justify-content: center; */
}

section .deletable li .image {
	/* margin: 0 1rem 0 0; */
}

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; */
}

/* can't use :last-child because of .controls in admin */
/* TODO: figure out why the p is used for */
section li > p:last-of-type {
	/* margin-bottom: 1rem; */
}

section li .image ~ .subtext {
	/* margin-top: 1.4rem; */
}

section .image button {
	/* position: relative; */
}

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

li .contents {
	/* flex-direction: column; */
}

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

/* li .contents * { */
	/* flex-basis: 20ch; */
}

li.image-only .contents * {
	/* flex-basis: 50%; */
}

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

html.ios section li .text {
	font: -apple-system-body;
	/* overflow-wrap: break-word; */
	/* TODO: do this when making the site more phone-like */
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

section li .contents .text {
	margin: 0;
	order: 1;
	line-height: 1.2;
	/* max-width: calc(100vw - 2rem); */
}

section ul:not(.cards) li > .text {
	/* padding: var(--standardPadding); */
	/* min-height: var(--standardHeight); */
	/* box-sizing: border-box; */
	/* display: flex; */
	/* align-items: center; */
}

section li > .text + .controls {
	/* margin-top: -1rem; */
	/* margin-bottom: -1rem; */
}

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

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

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

section li blockquote.text {
	/* flex-basis: 100%; */
}

section li .text,
section li .detail-text {
	/* flex-grow: 1; */
	/* flex-basis: calc(100% - 20ch); */
}

section li .text:nth-last-child(3) {
	/* flex-basis: 100%; */
}

section li .detail-text {
	/* white-space: nowrap; */
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
}

section .default button.text {
	color: inherit;
	width: 100%;
    text-align: left;
}

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

section .deletable li.flexible .text,
section .deletable li.flexible .detail-text {
	/* white-space: normal; */
}

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

html.ios li .detail-text {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

li .contents .detail-text {
	/* order: 3; */
	/* margin-top: 0.25rem; */
}

li .contents .text:nth-last-child(2),
li .contents .detail-text:last-child {
	/* flex-basis: 100%; */
}

li .contents .secondary-text,
li .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 li .contents .secondary-text,
html.ios li .contents .secondary-detail-text {
	font: -apple-system-caption1;
	font: -apple-system-footnote;
}

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

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

li .contents > .text + .secondary-text + .secondary-detail-text {
	/* flex-basis: 100%; */
	margin-left: auto;
}

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

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

li .contents .subtext {
	/* max-width: calc(100vw - 2rem); */
	flex-basis: 100%;
	/* order: 5; */
}

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

li .controls {
	display: flex;
	position: relative;
    z-index: 1;
	/* font-size: min(1rem,max(0.6rem,1.7vw)); */
	/* font: -apple-system-caption1; */

	/* flex-direction: column; */
	/* justify-content: space-between; */

	align-items: center;
	/* justify-content: center; */
	/* flex-direction: row; */
	margin-left: auto;
}

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

li.right_detail .contents {
	display: flex;
}

li.right_detail .contents .text {
	/* flex: 1; */
}

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

li.image-only .contents .image {
	/* flex-basis: 100%; */
}

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

li.image-only.animated .contents .image a::after {
    font-family: "Font Awesome 5 Free";
    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;
	/* object-fit: contain; */
}

section .default {
	/* min-height: var(--standardHeight); */
    /* display: flex; */
    /* justify-content: center; */
	/* flex-direction: column; */
	/* padding: var(--standardPadding); */
	/* box-sizing: border-box; */
}

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

form#send textarea {
	/* margin-left: 1rem; */
	filter: brightness(0.98);
}

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

form#send button::before {
	content: "\f1d8";
	font-family: "Font Awesome 5 Free";
	font-size: 1.75rem;
}

li .controls a,
li .controls button {
    /* border: 1px solid; */
    /* color: var(--secondaryButtonColor); */
    /* border-radius: 5px; */
    /* font-weight: bolder; */
	/* padding: 0.7em 1em; */
	font-size: 0;
	position: relative;
}

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

li .controls a::before,
li .controls button::before {
	font-family: "Font Awesome 5 Free";
	font-size: 1.7rem;
	/* vertical-align: text-top; */
	/* padding: 0.65em; */
	/* display: block; */
/* } */

/* li .controls a::before, */
/* li .controls button::before { */
	/* padding: 0.78rem; */
	/* position: relative; */
	/* right: -0.78rem; */
	/* margin-left: -0.78rem */
	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.member::before {
	color: var(--alertColor);
}

li .controls .clone.day::before {
	content: "\f783";
	/* padding: 0 0 0 0.65em; */
	font-weight: 900;
}

li .controls .clone.week::before {
	content: "\f784";
	/* padding: 0 0 0 0.65em; */
	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;
	/* text-shadow: 1px 0px 1px var(--foregroundColor),
				-1px 0px 1px var(--foregroundColor),
				0px 1px 1px var(--foregroundColor),
				0px -1px 1px var(--foregroundColor),
				1px 0px 1px var(--foregroundColor),
				0px 1px 1px var(--foregroundColor),
				1px 1px 1px var(--foregroundColor),
				0px 0px 1px var(--foregroundColor); */
	-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 .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 .info::before {
	content: "\f05a";
	font-weight: 900;
}

li .controls .download::before {
	content: "\f381";
	font-weight: 900;
}

li .controls .production::before {
	content: "\f630";
	font-weight: 900;
}

li .controls .production::after {
	font-family: "Font Awesome 5 Free";
	font-size: 1rem;
	position: absolute;
	bottom: 0.8rem;
	font-weight: 900;
	padding: 0;
	margin: 0;
	line-height: 0;
	/* text-shadow: 1px 0px 2px var(--backgroundColor), -1px 0px 2px var(--backgroundColor), 0px 1px 2px var(--backgroundColor), 0px -1px 2px var(--backgroundColor), 1px 0px 2px var(--backgroundColor), 0px 1px 2px var(--backgroundColor), 1px 1px 2px var(--backgroundColor), 0px 0px 2px var(--backgroundColor); */
	-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;
	/* display: block; */
}

ul.cards .text,
ul.cards .detail-text {
	font-size: min(0.6rem, 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);
}

.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 .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) {
	section .calendar-grid li {
		display: flex;
		flex-direction: column;
	}

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

	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: 0;
		margin: 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.7rem;
		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;
	}
}

/* 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 5 Free";margin-right: 0.2em;font-weight: 900;}
.controls.rsvp label.Late::before {content: "\f70c";}
.controls.rsvp label.Yes::before {content: "\f058";content: "\f00c";}
.controls.rsvp label.Maybe::before {content: "\f059";content: "\f128";}
.controls.rsvp label.No::before {content: "\f057";content: "\f00d";}
.Yes {color: var(--constructiveColor);}
.Maybe {color: var(--alertColor);}
.No {color: var(--destructiveColor);}
.Late {color: orange;}

.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 {
	font-family: "Font Awesome 5 Free";
	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;
}




legend + ul {
	/* padding-top: 0.4rem; */
}

section li.deletable {
	/* min-height: 0; */
	/* padding: 0; */
}

/* member role list */
.deletable > div p:only-child {
	min-height: var(--standardHeight);
	padding: var(--standardPadding);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	/* padding: 0.9rem 0; */
}

.deletable button:last-child,
.deletable a.delete {
	/* margin: 0 -4.42rem 0rem 0; */
}

section .deletable li {
	/* margin: 0.9rem 0 0.9rem 2rem; */
}

.editable::after {
	/* right: 1rem; */
}

section .deletable li {
	/* margin: 0rem 0 0rem 2rem; */
}

section .deletable li .image {
	/* margin: -1rem 1rem -1rem 0; */
}

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

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

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

li .contents * {
	/* flex-basis: auto; */
}

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

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

li .contents .secondary-text, li .contents .secondary-detail-text {
	/* min-width: 13ch; */
	margin-left: 1ch;
}
li .contents .secondary-text {
	order: 3;
}

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

li .contents .subtext {
	order: 9;
}

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

section li .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 .text,
.deletable .detail-text {
	/* padding-right: 4ch; */
	/* box-sizing: border-box; */
	/* max-width: calc(100% - 4ch); */
	/* white-space: normal; */
}

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

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



/* FOR SAFARI 9 */

@supports not (display: grid) {
	section li .contents .text,
	section li .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;
		}
	}
}

/* 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 li .contents .text,
section li .contents .detail-text {
	flex-basis: auto;
}

section li .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;
} */