@charset "utf-8";

/* --- BASICS --- */

:root {
	--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	--primary-brand-color: #001E44; /* #001E44 or #1E407C */
	--secondary-brand-color: #009CDE;
	--secondary-brand-color-hover: #32AFE4;
	--secondary-brand-color-subtle: #CCEBF8;
	--off-white-color: #EDEDED;
	--input-border-color: #CCC;
	--input-disabled-color: #CCC;
	--inactive-link-color: #AAA;
	--error-color: darkorange;
	--success-color: green;

	/* Shadows */
	--img-box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
	--page-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
	--subtle-page-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.05);
	--top-box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.15);


	/* Spacing */
	--compact-spacing: 8px;
	--default-spacing: 10px;
	--larger-spacing: 15px;
	--large-spacing: 30px;
	--section-padding: 7%;
	--large-grid-column-gap-spacing: 100px;
	--large-grid-row-gap-spacing: 50px;

	--readable-width: 900px;

	/* Font size */
	--smallest-font-size: 12px;
	--smaller-font-size: 14px;
	--default-font-size: 16px;
	--larger-font-size: 18px;
	--header-font-size: 22px; /* Header website name */
	--extra-large-font-size: 30px; /* Extra large, non-header text */

	--default-border-radius: 5px;
	--large-border-radius: 15px;
	--default-bold-font-weight: 600;

	--default-font-color: #444;
	--caption-font-color: #777;

	--default-hover-color-transition: color 0.4s ease;
	--default-hover-background-color-transition: background-color 0.4s ease;

	--default-link-border: 1px solid;
}

body {
	color: var(--default-font-color);
	font-family: var(--default-font-family);
	font-size: var(--default-font-size);
	margin: 0;
	-webkit-text-size-adjust: none; /* Prevent WebKit from automatically enlarging the text unnecessarily. */
}

a:link,
a:visited,
a:active {
	color: var(--primary-brand-color);
	text-decoration: none;
	border-bottom: var(--default-link-border);
}
a:hover {
	color: var(--secondary-brand-color);
	transition: var(--default-hover-color-transition);
}
a.inactive {
	color: var(--inactive-link-color);
}

strong {
	font-weight: var(--default-bold-font-weight);
}

h1 {
	margin: 0 0 var(--default-spacing);
	font-weight: var(--default-bold-font-weight);
	font-size: 36px;
	line-height: 38px;
}

h2 {
	margin: 0 0 var(--default-spacing);
	font-weight: var(--default-bold-font-weight);
	font-size: 30px;
	line-height: 32px;
}
h3 {
	margin: 0 0 var(--default-spacing);
	font-weight: var(--default-bold-font-weight);
	font-size: 20px;
}

.heading-link {
	font-size: 20px;
	text-decoration: none !important;
	border-bottom: none !important;
}

img {
	border-radius: var(--default-border-radius);
	box-shadow: var(--img-box-shadow);
}

.caption {
	font-size: var(--smaller-font-size);
}
.img-caption {
	font-size: var(--smaller-font-size);
	color: var(--caption-font-color);
}

.readable-width {
	max-width: var(--readable-width);
	margin-left: auto;
	margin-right: auto;
}

/* Make text unselectable */
.unselectable {
	user-select: none;
}

/* --- RESPONSIVE --- */
/* TODO: Are all of the !important tags necessary? */

@media (max-width: 1000px) {
	/* Update header */
	header .nav {
		display: none !important; /* Hide nav links */
	}
	header #hamburger {
		display: block; /* Show hamburger */
	}
	header {
		padding: 0 0 0 20px !important; /* Reduce left padding in header */
	}
	header .cta-button {
		margin: var(--default-spacing) !important; /* Add margin around CTA button to fix vertically spacing */
	}

	/* Change three columns to two columns */
	section .trio {
		grid-template-columns: max-content max-content !important;
	}
}

@media (max-width: 725px) {
	/* Change columns into rows */
	section .duo,
	section .trio {
		grid-template-columns: initial !important;
	}
	section .duo-compact,
	section .trio-compact {
		grid-row-gap: var(--large-grid-row-gap-spacing) !important;
	}
	section .section-ctas {
		grid-auto-flow: initial !important;
	}

	/* Hide the duo image column on small screens */
	section .duo-image-column {
		display: none;
	}

	/* Reduce space between stacked CTA buttons */
	.cta-button {
		margin: 15px 0 5px !important;
	}
	.cta-button-caption {
		margin-top: var(--default-spacing) !important;
	}

	/* Shrink size between list items */
	section .people li {
		margin: var(--default-spacing) !important;
	}
	section .people-grid-condensed li {
		margin: 4px var(--default-spacing) !important;
	}

	/* Reduce padding around card section style */
	.section-style-card {
		padding: var(--larger-spacing) !important;
	}

	/* Officer Admin (ex: Manage Accounts page): Use full width dropdown boxes and search box */
	#selectPerson,
	#selectPosition {
		width: 100%;
	}
	#searchContainer {
		width: 100% !important;
	}
	#searchContainer input {
		width: 100% !important;
		box-sizing: border-box; /* Prevents 100% width from including padding and being too wide */
	}
}

/* Small phone */
@media (max-width: 320px) {
	/* Reduce header font size so that it doesn't wrap */
	header .home {
		font-size: var(--larger-font-size) !important;
	}
}

/* --- HEADER --- */

header {
	background-color: var(--primary-brand-color);
	border-bottom: 2px solid var(--secondary-brand-color);
	padding: 0 30px;
	box-shadow: var(--page-box-shadow);

	font-size: var(--smaller-font-size);

	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}

header a {
	padding: 15px 15px;
	display: inline-block;
	text-decoration: none;
	border: none !important;
}

header a:link,
header a:visited,
header a:active {
	color: white;
}
header a:hover {
	color: var(--secondary-brand-color);
}

header .home {
	font-size: var(--header-font-size);
	font-weight: var(--default-bold-font-weight);

	/* Grid for tennis ball and title side-by-side */
	display: grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: 15px;
	align-items: center;
	padding-left: 0;
}

header .nav {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	grid-column-gap: 2px;
}

header .cta-button {
	font-size: unset;
	margin: unset;
	margin-left: var(--default-spacing);
	box-shadow: none;
	background-color: #314D64;

	/* Padding and height is carefully coordinated to match the height of cta-button-logo */
	padding: 11px 20px;
}

header .cta-button-logo {
	display: inline-grid; /* Allows button to display properly in the hamburger menu */
	grid-column-gap: var(--default-spacing);

	/* Padding and height is carefully coordinated to match the height of cta-button */
	padding: 8px 20px;
}
header .cta-button-logo img {
	border-radius: 50%;
}

#hamburger .cta-button {
	padding: var(--default-spacing) 20px;
	height: unset; /* Reset the button heights used in the non-hamburger menu */
}

/* --- HAMBURGER --- */
/* Credit to: https://codepen.io/erikterwan/pen/EVzeRP */
#hamburger {
	display: none;
	position: relative;
	top: 2px;
	left: 0;
	margin-right: 20px;
	z-index: 99;
	user-select: none;
}

#hamburger input {
	width: 40px;
	height: 30px;
	position: absolute;
	top: -8px;
	left: -6px;
	cursor: pointer;
	opacity: 0; /* Hide the actual checkbox control */
	z-index: 2; /* Place the checkbox on top of the hamburger */
}

#hamburger span {
	display: block;
	width: 25px;
	height: 3px;
	margin-bottom: 5px;
	position: relative;
	background: white;
	border-radius: 3px;
	z-index: 1;
	
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
}
#hamburger span:first-child {
	transform-origin: 0% 0%;
}
#hamburger span:nth-last-child(2) {
	transform-origin: 0% 100%;
}

/* Rotate the hamburger slices */
#hamburger input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(1px, 2px);
}

/* Rotate the bottom slice 45 degrees counterclockwise */
#hamburger input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, 0);
}

/* Hide the middle hamburger slice */
#hamburger input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

/* When tapping the checkbox, trigger the transform. */
#hamburger input:checked ~ ul {
	transform: none;
}

#hamburger-menu {
	background: var(--primary-brand-color);
	text-align: center;
	opacity: 0.98;
	font-size: var(--larger-font-size);
	font-weight: var(--default-bold-font-weight);
	list-style-type: none;
	margin: 0;
	padding: 100px 0;

	transform-origin: 0% 0%;
	transform: translate(-100%, 0);

	/* Allow list to be scrolled if screen is short (like phone landscape mode) */
	overflow-y: scroll;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;

	/* Full screen */
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; right: 0; bottom: 0; left: 0;
}

/* --- FOOTER --- */

footer {
	padding: 50px var(--default-spacing) 30px;
}
footer img {
	border: unset;
	box-shadow: unset;
}
footer a {
	padding: 10px 0; /* Use padding on the link to make the touch target bigger */
	font-size: var(--smallest-font-size);
	color: #999 !important;
	border-bottom: none !important;

	/* Grid for tennis ball and title side-by-side */
	display: grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: 5px;
	align-items: center;
	justify-content: center;
}

/* --- SECTION --- */

section {
	padding: 40px var(--section-padding);
	text-align: center;
	box-shadow: var(--subtle-page-box-shadow);
	line-height: 1.4em;
}

section .section-content {
	max-width: var(--readable-width);
	margin: 0 auto;
}
section .section-content-wide {
	max-width: 1050px;
	margin: 0 auto;
}

.section-hero {
	padding: 120px var(--section-padding) 120px;
	background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.2)),url("/images/facilities/sarni-court-level-sideline.jpg"); /* https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image */
	background-size: cover;
	background-position: top;
	color: white;
	font-weight: var(--default-bold-font-weight);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.section-hero-2 {
	background: linear-gradient(0deg,rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url("/images/facilities/sarni-lights-hero.jpg");
	background-size: cover;
	background-position: bottom;
}
.section-hero-3 {
	background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.2)),url("/images/facilities/sarni-sunset.jpg");
	background-size: cover;
	background-position: center;
}
.section-hero-4 {
	background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.2)),url("/images/facilities/tennis-center-court-level-sign.jpg");
	background-size: cover;
	background-position: center;
}
.section-hero h1,
.section-hero h2 {
	font-weight: 700;
}
.section-hero .cta-button {
	box-shadow: none;
	text-shadow: none;
}
.section-hero-slim {
	padding: 50px var(--section-padding);
}
.section-hero a {
	color: white;
}

.section-style-0 {
	background-color: #FDFDFD;
	box-shadow: var(--subtle-page-box-shadow);
}

.section-style-1 {
	background-color: var(--off-white-color);
}

.section-style-2 {
	background-color: #314D64;
	color: var(--off-white-color);
}
.section-style-2 a {
	color: var(--off-white-color);
}
.section-style-2 a:hover {
	color: var(--secondary-brand-color);
	transition: var(--default-hover-color-transition);
}
.section-style-2 .form-field-caption {
	color: var(--off-white-color);
}

.section-style-3 {
	background-color: var(--secondary-brand-color);
	color: var(--off-white-color);
}
.section-style-3 a {
	color: var(--off-white-color);
}
.section-style-3 a:hover {
	color: var(--primary-brand-color);
	transition: var(--default-hover-color-transition);
}

.section-style-4 {
	background-color: #CCEBF854;
	box-shadow: none;
}

/* Card style with background */
.section-style-card {
	margin: 0;
	padding: var(--large-spacing);
	box-shadow: none;
}
.section-style-card .section-content {
	max-width: 990px; /* This is the normal section max-width minus the left/right padding */
	padding: var(--large-spacing);
	background-color: var(--secondary-brand-color-subtle);
	border: 1px solid var(--secondary-brand-color);
	border-radius: var(--large-border-radius);
	box-shadow: var(--subtle-page-box-shadow);
}

/* Subtle section for use at the bottom of a page */
.section-style-minimal {
	box-shadow: none;
	font-size: var(--smaller-font-size);
}
.section-style-minimal .cta-button {
	margin: 0 !important; /* Remove margin from CTA buttons so that they're center aligned */
}

/* Compact section for stacking information dense sections on top of each other */
.section-style-compact {
	box-shadow: none;
	padding: 20px var(--section-padding);
}
.section-style-compact-0 {
	background-color: #FDFDFD;
}

/* Full bleed section used for map page */
.section-style-full-bleed {
	padding-left: 0;
	padding-right: 0;
}
.section-style-full-bleed .section-content {
	max-width: 1600px;
}
.section-style-full-bleed img {
	border-radius: 0;
}
.section-style-full-bleed .full-bleed-text {
	padding-left: var(--section-padding);
	padding-right: var(--section-padding);
}

section .section-ctas {
	display: inline-grid;
	grid-auto-flow: column;
	grid-column-gap: 30px;
}
section .section-ctas-subtle {
	margin-top: 35px;
	font-size: var(--smaller-font-size);
}

.fixed-bottom-section {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	padding: var(--large-spacing) 0 calc(var(--large-spacing) + env(safe-area-inset-bottom)); /* Add extra bottom padding to account for iPhone home indicator */
	box-shadow: var(--top-box-shadow);
	display: none; /* Hidden by default because jQuery will slide it up */
}

/* Stacked CTA buttons */
section .section-ctas-stack {
	margin: 5px 0;
	display: inline-grid;
	grid-row-gap: 15px;
}
section .section-ctas-stack .cta-button {
	margin: 0 !important; /* Prevents margin from being applied on narrower screens */
}

section .solo {
	margin: var(--larger-spacing) 0;
}
section .solo img {
	max-width: 100%;
	margin: var(--compact-spacing) 0;
}
section .solo-large {
	margin: var(--large-spacing) 0;
}
section .solo-xl {
	margin: var(--large-spacing) 0 50px;
}
section .solo-last {
	margin-bottom: 0 !important;
}

section .solo-status {
	font-size: var(--larger-font-size);
	font-weight: var(--default-bold-font-weight);
	margin-top: 25px;
}
.solo-status-success {
	color: var(--success-color);
}
.solo-status-warning {
	color: var(--error-color);
}

section .duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--large-spacing);

	margin: var(--large-spacing) 0;
}

section .duo-with-featured-image {
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--compact-spacing);
}
section .duo-with-featured-image-and-cta {
	margin-bottom: var(--larger-spacing);
}
section .duo-with-featured-image img {
	max-width: 400px;
}
section .duo-with-featured-image .duo-text-column {
	min-width: 350px;
}

section .trio {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--large-spacing);

	margin: var(--large-spacing) 0;
}

section .duo img,
section .trio img {
	width: 100%;
	margin: var(--compact-spacing) 0;
}
section .duo-description,
section .trio-description {
	width: 95%;
	margin: 0 auto;
}
section .duo ul,
section .trio ul {
	padding: 0;
}
section .duo li,
section .trio li {
	list-style-type: none;
	margin: 4px 0;
}
section .duo-compact {
	margin: var(--compact-spacing);
	grid-template-columns: max-content max-content;
	grid-column-gap: var(--large-grid-column-gap-spacing);
	justify-content: center;
}
section .trio-compact {
	margin: var(--compact-spacing);
	grid-template-columns: max-content max-content max-content;
	grid-column-gap: var(--large-grid-column-gap-spacing);
	justify-content: center;
}

section .instructions ol,
section .instructions ul {
	text-align: left;
	max-width: 800px;
	margin: 0 auto;
	padding-left: 30px;
}
section .instructions ol li,
section .instructions ul li {
	margin: var(--default-spacing) 0;
	padding-left: 5px;
}
section .instructions ol li.completed {
	text-decoration: line-through;
}

/* --- INPUT --- */

input,
select,
textarea {
	font-family: var(--default-font-family);
	font-size: var(--default-font-size);
	margin: 5px 0;
	padding: var(--compact-spacing);
	border: 1px solid var(--input-border-color);
	border-radius: var(--default-border-radius);
	-webkit-text-size-adjust: none; /* Prevent WebKit from automatically enlarging the text unnecessarily */
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea {
	background-color: white;
	-webkit-appearance: none; /* Removes inner shadow on iOS */
	width: 100%; /* Use 100% width -- width is restricted to not span the entire page via simple-form or immersive-form-fields */
	box-sizing: border-box; /* Prevents 100% width from including padding and being too wide */
}

input[type=checkbox] {
	margin: var(--default-spacing) 0;
	width: 17px; /* Default size set for hamburger menu */
	height: 17px;
	padding: 0px; /* Fix checkbox styling issue on Edge */
}

input[type=submit],
input[type=button] {
	-webkit-appearance: none; /* Removes default button style on iOS */
}

input[type=submit]:disabled {
	color: var(--input-disabled-color) !important;
}

select {
	background-color: white;
}

/* --- FORMS --- */

form .error {
	border-color: var(--error-color);
	outline-color: var(--error-color);
	border-width: 2px;
}

form .error-message {
	color: var(--error-color);
	font-weight: var(--default-bold-font-weight);
}

form label {
	display: block;
	margin-top: 15px;
	font-weight: var(--default-bold-font-weight);
}

form .inline-label {
	display: inline;
	font-weight: initial;
	margin: 0;
}

form .form-field-caption {
	font-size: var(--smaller-font-size);
	color: var(--caption-font-color);
	line-height: normal;
	word-wrap: break-word;
}

form .form-question {
	margin-top: 20px;
	font-weight: var(--default-bold-font-weight);
}

form .minimum-width-input input {
	width: unset !important; /* Don't stretch the input fields */
}

form .date-picker {
	margin: var(--default-spacing) 0;
}

.form-status-message {
	color: var(--error-color);
	margin: 20px 0;
	font-weight: var(--default-bold-font-weight);
}
.section-style-3 .form-status-message {
	color: lightcyan;
	font-weight: initial;
}
.form-status-message-success {
	color: var(--success-color);
}

/* CHECKBOX AND RADIO GRID */
.checkbox-grid,
.radio-grid {
	margin: var(--default-spacing) 0;
	display: grid;
	justify-content: center; /* Horizontally center the entire grid */
	justify-items: left; /* Horizontally align the items inside the grid */
	align-items: center; /* Vertically center the items inside the grid */
}
.checkbox-grid {
	grid-template-columns: max-content auto;
	grid-column-gap: var(--compact-spacing);
	grid-row-gap: var(--default-spacing);
}
.checkbox-grid-four {
	grid-template-columns: max-content max-content max-content max-content; /* 4 elements */
}
.radio-grid {
	grid-template-columns: repeat(4, max-content);
	grid-column-gap: 6px;
}
.checkbox-grid-question,
.radio-grid-question {
	margin-top: 20px;
	font-weight: var(--default-bold-font-weight);
	text-align: center;
}

.checkbox-grid-big label,
.radio-grid-big label {
	margin: 0;
	font-size: var(--larger-font-size);
	text-align: left;
}
.checkbox-grid-big input[type=checkbox],
.radio-grid-big input[type=radio] {
	width: 25px;
	height: 25px;
}

/* Checkbox grid specific */
.checkbox-grid-big input[type=checkbox] {
	margin: 0;
}

/* Checkbox grid with multiline text */
.checkbox-grid-multiline input[type=checkbox] {
	margin: 2px 0 0 0;
	align-self: normal;
}

/* Radio grid specific */
.radio-grid-big input[type=radio] {
	border-radius: 50%; /* Make sure radio buttons render as circles on iOS */
	margin: 0 0 0 15px;
	padding: 0px; /* Fix radio button styling issue on Edge */
}

/* SELECT GRID */
.select-grid {
	display: grid;
	grid-template-columns: max-content max-content max-content;
	grid-column-gap: var(--default-spacing);
	justify-content: center; /* Horizontally center the entire grid */
}
.select-grid select {
	width: 100%; /* Show the dropdown boxes at 100% width */
}

/* SIMPLE FORM - Use this on the <form> element for a self-contained form that exists entirely within a single <section> */
.simple-form {
	max-width: 325px;
	margin: var(--large-spacing) auto var(--larger-spacing);
}
.simple-form label {
	text-align: left; /* Left align the labels that appear above the input fields */
}
.simple-form input[type=checkbox] {
	margin: 0;
}
.simple-form .error-message {
	text-align: left; /* Left align the error messages that appear below the input fields */
}

/* IMMERSIVE FORM FIELDS - Use this on a child <div> container within a <form> for a wider form */
.immersive-form-fields {
	max-width: 400px;
	margin: var(--larger-spacing) auto var(--default-spacing);
	text-align: left; /* Left align non-full width input fields like dropdown boxes */
}

/* Remove margin for checkbox-grid so that it's left aligned */
.immersive-form-fields .checkbox-grid {
	justify-content: initial;
	margin: initial;
}

/* Image selection form */
#selectedImage {
	display: none;
}

/* Underlined label with emphasis */
label .underline-emphasis {
	border-bottom: 1px dashed var(--secondary-brand-color);
	font-style: italic;
}

/* --- Q&A --- */

.info-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.info-list li {
	margin: var(--default-spacing) 0;
}

.qa {
	margin: var(--large-spacing) 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

.qa li {
	margin: var(--large-spacing) 0;
}

.question {
	font-weight: var(--default-bold-font-weight);
	margin: 2px 0;
}

/* --- CALL TO ACTION (CTA) BUTTON --- */

.cta-button {
	display: inline-block;

	font-size: var(--larger-font-size);
	font-weight: var(--default-bold-font-weight);

	margin: 15px 0 0;
	padding: var(--default-spacing) 20px;

	background: #FFF;
	color: #444 !important;
	
	border: none !important;
	border-radius: var(--default-border-radius);
	box-shadow: 1px 2px 5px 0 #BCBCBCBF; /* position x, position y, blur, spread */

	text-decoration: none;

	cursor: pointer;
}
.cta-button:hover {
	background: var(--off-white-color);
	transition: var(--default-hover-background-color-transition);
}
.cta-button:focus {
	background: var(--off-white-color);
}

.cta-button-accent {
	background-color: var(--secondary-brand-color);
	color: white !important;
}
.cta-button-accent:hover,
.cta-button-accent:focus {
	background-color: var(--secondary-brand-color-hover);
}

.cta-button-green {
	background-color: green;
	color: white !important;
}
.cta-button-green:hover,
.cta-button-green:focus {
	background-color: darkgreen;
}

.cta-button-danger {
	background-color: orangered;
	color: white !important;
}
.cta-button-danger:hover,
.cta-button-danger:focus {
	background-color: red;
}

.cta-button-secondary {
	background: none;
	box-shadow: none;
}
.cta-button-secondary:hover {
	color: var(--secondary-brand-color) !important;
	transition: var(--default-hover-color-transition);
	background: none;
}

.cta-button-logo {
	display: grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: var(--compact-spacing);
	text-align: left;
	align-items: center; /* Center the text vertically within the button. */
	justify-content: center; /* Center logo and text horizontally within the button. */
}
.cta-button-logo img {
	border-radius: 0;
	box-shadow: none;
}

.cta-button-caption {
	margin-top: var(--large-spacing);
}

.cta-button-caption-subtle {
	margin-top: var(--default-spacing);
	font-size: var(--smaller-font-size);
	line-height: 16px;
}

/* --- PEOPLE --- */

section .people ul {
	list-style-type: none;
	margin: var(--larger-spacing) 0;
	padding: 0;
}
section .people img {
	border-radius: 50%;
	margin: 0;
}
section .people li,
section .people-individual {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: var(--default-spacing);
	grid-row-gap: 5px;
	align-items: center;
	margin: 20px;
	text-align: left;
	vertical-align: top; /* Align columns of people in the same row that include both avatar images and placeholder avatars. */
}
section .people-individual {
	margin: var(--default-spacing) 0;
}
section .people-grid li {
	width: 250px;
}

/* Stacked grid of selectable people */
section .people-selection {
	width: 275px !important; /* Use slightly wider width than normal, limit the width so that all of the input elements are left aligned */
}
section .people-selection li {
	grid-template-columns: auto auto 1fr; /* # columns: radio button, avatar, name */
}
section .people-selection input[type=radio] {
	margin: 0 !important; /* Don't add any margin to radio buttons because they're stacked */
}

/* Stacked grid of people */
section .people-grid-stacked {
	width: 250px; /* Limit the entire width of the element to prevent issues for drag and drop scenarios */
	margin: 0 auto;
}
section .people-grid-stacked li {
	display: grid;
	width: unset;
	justify-content: center;
	margin: 20px !important; /* Keep margin at all times, even on narrow screens, because display: grid; overlaps margins instead of stacking them */
}
.sortable {
	cursor: move; /* Change the cursor for draggable items */
}

/* People attributes */
section .people .name {
	font-weight: var(--default-bold-font-weight);
}
section .people .name-larger {
	font-size: var(--larger-font-size);
	margin-bottom: 2px;
}
section .people .info {
	font-size: var(--smaller-font-size);
}
section .people .bio {
	grid-column: 1 / span 2;
	margin: 0 auto;
	max-width: 725px;
}
section .people .name a {
	border: none;
}
section .people .name a:hover {
	border-bottom: var(--default-link-border);
}

/* Avatar image+placeholder header */
.member-avatar-hero {
	position: relative; /* Allow CTA to be positioned absolutely inside of the hero container */
}
.member-avatar-cta {
	position: absolute;
	top: -15px;
	left: 50%;
	margin: 0 0 0 var(--compact-spacing) !important;
	font-size: var(--smaller-font-size);
	padding: var(--compact-spacing) var(--default-spacing);
}
.member-avatar-hero .member-avatar,
.member-avatar-hero .member-avatar-placeholder {
	margin: 0 auto 10px;
}
.member-avatar-hero a {
	border: none;
}

/* Avatar image */
.member-avatar {
	border-radius: 50px;
}

/* Avatar placeholder */
.member-avatar-placeholder {
	border-radius: 50%;
	box-shadow: var(--img-box-shadow);
	color: var(--off-white-color);
	font-weight: var(--default-bold-font-weight);
	user-select: none;

	/* Horizontally and vertically center the initials */
	display: flex;
	justify-content: center;
	align-items: center;
}

.member-avatar-placeholder-25 {
	width: 25px; height: 25px;
	font-size: 12px;
}
.member-avatar-placeholder-35 {
	width: 35px; height: 35px;
	font-size: 16px;
}
.member-avatar-placeholder-50 {
	width: 50px; height: 50px;
	font-size: 20px;
}
.member-avatar-placeholder-75 {
	width: 75px; height: 75px;
	font-size: 30px;
}
.member-avatar-placeholder-100 {
	width: 100px; height: 100px;
	font-size: 40px;
}
.member-avatar-placeholder-tint1 {
	background-color: var(--secondary-brand-color);
}
.member-avatar-placeholder-tint2 {
	background-color: #006d9b;
}
.member-avatar-placeholder-tint3 {
	background-color: #4cb9e7;
}

/* Review avatars page */
.avatars img {
	border-radius: 50%;
}
.avatars a {
	border: none;
	margin: 5px;
}

/* Condensed grid */
section .people-grid-condensed ul {
	margin: var(--compact-spacing) 0 0;
}
section .people-grid-condensed li {
	margin: var(--compact-spacing) var(--larger-spacing) var(--compact-spacing) 5px;
	width: unset;
}

.people-grid-header {
	font-size: var(--larger-font-size);
	margin: 35px 0 0 0;
}


/* --- MISC --- */
section .data-grid {
	display: inline-grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: var(--large-spacing);
	grid-row-gap: 4px;
}
section .data-grid-disabled {
	color: lightgray;
}

section .data-grid-data {
	text-align: left;
}
section .data-grid .condensed {
	word-spacing: -2px;
}
section .data-grid-header {
	font-size: var(--larger-font-size);
	font-weight: var(--default-bold-font-weight);
	margin: var(--large-spacing) 0 -5px 0;
}

/* --- Select and Search Person --- */
#selectOrSearchPersonForm {
	margin: 0 var(--default-spacing);
}
#selectOrSearchPersonForm select {
	margin-right: var(--default-spacing); /* Space between dropdown box and search box */
}
#searchContainer {
	margin: 0 auto;
	display: inline-block; /* Show search inline next to dropdown box */
	position: relative; /* Required for results to be the right size on narrow screen when width is switched to 100% */
}
#searchContainer input {
	margin-bottom: 0px; /* Remove bottom margin so search results sit flush against bottom of text box */
}
.noBottomBorderRadius {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
#searchResultsContainer {
	display: none;
	width: 100%;
	background-color: white;
	box-sizing: border-box; /* Maintain correct width when border is applied */
	margin-top: -1px; /* Sit on top of search box border */

	/* Apply border radius to only the bottom so that it sits flush against the search box. */
	border-bottom-left-radius: var(--default-border-radius);
	border-bottom-right-radius: var(--default-border-radius);
	border: 1px solid var(--input-border-color);

	/* Overlay the results on top of content below it */
	position: absolute;
	z-index: 1;
}
#searchResultsLoading {
	padding: var(--larger-spacing) 0 var(--default-spacing);
}
#searchContainer input {
	width: 280px;
}
#searchContainer .people ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#searchContainer .people li {
	margin: 0 !important; /* "important" needed to override style on iOS */
	padding: 0 var(--default-spacing);
	width: 100%; /* Make row fill entire width */
	box-sizing: border-box; /* Prevents 100% width from including padding and being too wide */
}
#searchContainer .people li:hover,
#searchContainer .people li.selected {
	background-color: var(--off-white-color);
}
#searchContainer .people .name {
	font-weight: unset; /* Reset the font weight because search highlights the relevant part */
}
#searchContainer .people .name a {
	display: block; /* Make link fill the entire width of the list item */
	padding: var(--default-spacing) 0;
}
#searchContainer .people .name a:hover {
	border: none; /* Remove link underline because the entire list item is being highlighted */
}
#searchContainer .people li.selected a {
	color: var(--secondary-brand-color);
	transition: var(--default-hover-color-transition);
}
#searchContainer .people li.disabled a {
	color: var(--default-font-color) !important;
}

/* --- Loader courtesy of: https://loading.io/css/ -- */
.loading-ring {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
}
.loading-ring-big {
	width: 30px;
	height: 30px;
}
.loading-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	border: 3px solid;
	border-radius: 50%;
	border-color: #777 transparent transparent transparent;
	animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loading-ring-big div {
	width: 30px;
	height: 30px;
	border: 4px solid;
	border-color: #777 transparent transparent transparent;
}
.loading-ring div:nth-child(1) {
	animation-delay: -0.4s;
}
.loading-ring div:nth-child(2) {
	animation-delay: -0.25s;
}
.loading-ring div:nth-child(3) {
	animation-delay: -0.1s;
}
@keyframes loading-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* --- Offline --- */
#offline {
	margin: var(--large-spacing);
}

/* --- Activities --- */
#activities ul {
	list-style-type: none;
	padding: 0;
}
#activities li {
	padding: var(--compact-spacing);
}
#activities li a {
	border-bottom: none;
	font-weight: var(--default-bold-font-weight);
}
#activities .activity-time {
	font-size: var(--smaller-font-size);
	color: var(--caption-font-color);
	margin-top: 2px;
}
#activitiesLoading {
	margin: var(--large-spacing);
}
#showMoreActivitiesButton {
	display: none; /* Hide by default */
	margin-top: var(--default-spacing);
}

/* --- Bar graph --- */
.bar-graph {
	list-style-type: none;
	margin: var(--default-spacing) auto 0;
	padding: 0;
	max-width: 500px;
}
.bar-graph li {
	text-align: left;
	border-radius: var(--default-border-radius);
	margin: 4px;
	background-color: #CDCDCD;
	color: black;
	white-space: nowrap; /* Allow text in the bar to go outside the bar */	
}
.bar-graph li div {
	padding: var(--default-spacing) 0 var(--default-spacing) var(--default-spacing); /* No right padding to minimize the minimum width of the bar */
	border-radius: var(--default-border-radius);
	background-color: var(--secondary-brand-color);
	box-sizing: border-box;
}