/*	SiteNotation styles */


/*	----------------------------------------------------------------------------------------------

	Custom Properties (Variables)	

	----------------------------------------------------------------------------------------------	
*/


:root {
	
	/*	Colors */
	--action-orange: hsl(25 73% 52%);
	--action-orange-faded: hsl(25 73% 90%);
	--action-orange-hover: hsl(25 85% 60%);
	--cool-blue: hsl(220 50% 50%);
	--cool-blue-hover: hsl(220 95% 50%);
	--cool-blue-faded: hsl(220 50% 90%);
	--cool-blue-extra-faded: hsl(220 50% 95%);
	--cool-blue-almost-white: hsl(220 100% 99%);
	--dark-grey-for-darkened-pane: hsl(220 5% 30%); /* #333; */
	--dark-grey-with-green-tint: hsl(112 5% 45%);
	--dark-grey-with-green-tint-hover: hsl(254 5% 35%);
	--ivory: hsl(40 31% 94%); /* found in a Reddit post */
	--green: hsl(100 50% 50%);
	--green-hover: hsl(100 75% 50%);
	--light-grey-with-blue-tint: hsl(192 15% 98%);
	--neutral-grey: hsl(0 0% 80%);
	--red: hsl(0 90% 33%);
	--red-hover: hsl(0 100% 40%);
	--red-toned-down: hsl(0 50% 40%);
	--yellow-gold: hsl(44 80% 50%);
	--yellow-gold-hover: hsl(44 90% 40%);
	
	/*	Drop shadow (box shadow) */
	--drop-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	
	/*	Fonts */
	--header-font: "Shippori Antique";
}


/*	----------------------------------------------------------------------------------------------
	
	HTML Elements
	
	----------------------------------------------------------------------------------------------
*/

body {
	margin: 0;
	padding: 0;
}

div {
	box-sizing: border-box;
}

form {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font), Arial, sans-serif;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

iframe {
	box-sizing: border-box;
}

iframe.protected-from-pointer-events {
	pointer-events: none;
}

input[type=password] {
	box-sizing: border-box;
}

input[type=text] {
	box-sizing: border-box;
}

select {
	max-width: 100%;
}

textarea {
	box-sizing: border-box;
}


/*	----------------------------------------------------------------------------------------------
	
	Accordion Styles

	----------------------------------------------------------------------------------------------	
*/

.accordion-body {
	border: 1px solid #CCC;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 0 25px;
}

.accordion-item.closed .accordion-body {
	display: none;
}

.accordion-item.closed .accordion-top .accordion-contractor-arrow {
	display: none;
}

.accordion-item:not(.closed) .accordion-top {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.accordion-item:not(.closed) .accordion-top .accordion-expander-arrow {
	display: none;
}

.accordion-top {
	display: flex;
	flex-direction: row;
	background-color: #CCC;
	padding: 3px 15px 7px 15px;
	color: var(--dark-grey-with-green-tint);
	border-radius: 5px;
	cursor: pointer;
}

.accordion-top:hover {
	background-color: #AAA; /* change to give a hint of tint? */
	color: black;
}

.accordion-top .accordion-contractor-arrow {
	position: relative;
	top: 7px;
}

.accordion-top .accordion-expander-arrow {
	position: relative;
	top: 2px;
}

.accordion-top .accordion-expander-arrow,
.accordion-top .accordion-contractor-arrow {
	font-size: 24px;
	margin-right: 15px;
	flex: none;
}

.accordion-top h2 {
	font-size: 24px;
	margin: 0;
}


/*	----------------------------------------------------------------------------------------------
	
	Broken link DISPLAY panel

	----------------------------------------------------------------------------------------------
*/

#broken-link-display-panel {
	padding: 25px;
	font-size: 16px;
}

#broken-link-display-panel a {
	text-decoration: none;
	word-break: break-word;
}

#broken-link-display-panel a:hover {
	text-decoration: underline;
}

#broken-link-display-panel #broken-link-action-buttons {
	padding-top: 10px; /* compensate for box shadow of last comment above it */
	padding-bottom: 50px;
}

#broken-link-display-panel h3 {
	display: block;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 7px;
	color: #777;
}

#broken-link-comments {
	position: relative;
	/*	This is here for a weird but important reason. Font Awesome, in its infinite wisdom and
		support for accessibility, is going to automatically add spans with the class "sr-only"
		(screen-reader-only) that duplicate the title attribute I've given to the pencil
		button for editing a comment. This is the HTML I wrote:
		
		<span class="edit-comment-button fas fa-pencil-alt" title="Edit this comment"></span>
		
		Directly after that span, Font Awesome is going to write another span into the DOM:
		
		<span class="sr-only">Edit this comment</span>
		
		That "sr-only" class is designed to be read by screen readers without actually appearing
		on the screen. It uses elaborate CSS to accomplish this. As part of that CSS, it gives the
		span absolute positioning. And here's the problem: if the span doesn't have a positioned
		parent somewhere up the chain, it will end up at the bottom of the page and cause the
		browser to add scroll bars, as described here:
		
		https://stackoverflow.com/questions/66572172/sr-only-class-causing-page-scroll
		
		That ends up breaking the layout of the entire main column of the app and making everything
		look terrible. So do NOT dispense with this fix.
	*/
	
}

#broken-link-comments .comment-attribution {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-family: var(--header-font), Arial, sans-serif;
	font-weight: bold;
	border-bottom: 1px solid transparent;
}

#broken-link-comments .comment-attribution .comment-author-name {
	margin-top: 5px;
	color: var(--cool-blue);
}

#broken-link-comments .comment-attribution .comment-author-photo {
	border-radius: 50%;
	background-color: var(--dark-grey-with-green-tint);
	color: white;
	width: 35px;
	height: 35px;
	text-align: center;
	margin-right: 15px;
	padding-top: 3px;
	font-size: 18px; /* for user initials, if the user has no photo */
}

#broken-link-comments .comment-body p:last-child {
	margin-bottom: 0;
}

#broken-link-comments .comment-date-and-time {
	text-align: right;
	color: #333;
	font-style: italic;
	margin-top: 10px;
}

#broken-link-comments .comment-on-broken-link {
	background-color: white;
	margin-bottom: 30px;
	padding: 25px;
	border: 1px solid hsl(192 9% 90%);
	border-radius: 10px;
	/* box-shadow: 0px 3px 15px rgba(0,0,0,0.2); */
	box-shadow: var(--drop-shadow);
}

#broken-link-comments .comment-on-broken-link:not(.editable) .edit-comment-button,
#broken-link-comments .comment-on-broken-link.being-edited .edit-comment-button {
	display: none;
}

#broken-link-comments .edit-comment-button {
	color: var(--dark-grey-with-green-tint);
}

#broken-link-comments .edit-comment-button:hover {
	cursor: pointer;
	color: black;
}

#broken-link-comments .edit-comment-button-container {
	margin-left: 25px;
}

#broken-link-hidden-panel--update-status-and-notes {
	display: none; /* will be shown with JavaScript */
	border: 3px solid var(--cool-blue);
	border-radius: 10px;
	padding: 0 25px;
	margin-bottom: 50px;
}

#broken-link-hidden-panel--update-status-and-notes #broken-link-folder-changing-menu {
	font-size: 16px;
}

#broken-link-hidden-panel--update-status-and-notes #label-for-broken-link-folder-changing-menu {
	display: block;
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
}

#broken-link-hidden-panel--update-status-and-notes #label-for-broken-link-notes {
	display: block;
	margin-top: 50px;
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: bold;
}

#broken-link-hidden-panel--update-status-and-notes .labeled-field {
	margin-bottom: 25px;
}

#broken-link-more-details-expander-button span,
#broken-link-more-details-contractor-button span {
	font-size: 36px;
	cursor: pointer;
	color: var(--dark-grey-with-green-tint);
}

#broken-link-more-details-expander-button span:hover,
#broken-link-more-details-contractor-button span:hover {
	color: var(--action-orange);
}

#broken-link-status-update-notification {
	display: none;
	background-color: var(--action-orange);
	color: white;
	border-radius: 10px;
	padding-left: 25px;
	font-family: Arial, sans-serif;
	font-size: 20px;
	margin-bottom: 50px;
}

#broken-link-text-of-link {
	font-size: 20px;
	margin-left: 15px;
	margin-right: 15px;
}

#broken-link-text-of-link-container .fas {
	color: var(--action-orange);
	font-size: 24px; /* for quotation-mark icon */
}

#close-button-for-broken-link-status-update-notification {
	float: right;
	background-color: transparent;
	border: none;
	color: white;
	font-size: 28px;
	cursor: pointer;
	position: relative;
	top: -10px;
	left: -10px;
	padding: 5px 10px;
	margin-left: 15px;
}

.close-button-for-notification-that-note-has-been-deleted {
	float: right;
	background-color: transparent;
	border: none;
	color: var(--dark-grey-with-green-tint);
	font-size: 28px;
	cursor: pointer;
	padding: 5px 10px;
	margin-top: -20px;
	margin-right: -20px;
}

.close-button-for-notification-that-note-has-been-deleted:hover {
	color: var(--cool-blue);
}

.darkened-pane-to-show-if-iframe-is-empty {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: var(--dark-grey-for-darkened-pane);
}

#go-to-full-list-of-broken-links {
	position: relative;
	top: -7px;
}

#go-to-full-list-of-broken-links.button.blue-outline:hover  {
	color: var(--action-orange);
	border: 2px solid var(--action-orange);
	background-color: transparent;
}

#show-next-broken-link-button,
#show-previous-broken-link-button {
	border: none;
	background-color: transparent;
	color: var(--cool-blue);
	font-size: 32px;
}

#show-next-broken-link-button:hover,
#show-previous-broken-link-button:hover {
	color: var(--action-orange);
}

#show-next-broken-link-button.disabled,
#show-previous-broken-link-button.disabled {
	color: #CCC;
}


/*	----------------------------------------------------------------------------------------------
	
	Broken link EDITING panel

	----------------------------------------------------------------------------------------------
*/

#broken-link-editing-panel {
	padding: 25px;
}

#broken-link-editing-panel #broken-link-input--location-of-link-on-page {
	height: 100px;
}

#broken-link-editing-panel.creating .show-only-if-editing-existing-broken-link-report {
	display: none;
}

#broken-link-editing-panel.editing .show-only-if-creating-new-broken-link-report {
	display: none;
}

#broken-link-editing-panel .broken-link-fieldset {
	padding: 25px;
	margin-bottom: 50px;
	width: 100%;
	background-color: white;
	border: 2px solid var(--action-orange);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#broken-link-editing-panel h3 {
	background-color: var(--action-orange);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 24px;
	padding: 5px 15px;
	margin-bottom: 0;
}

#broken-link-editing-panel input[type=text] {
	width: 100%;
}

#broken-link-editing-panel label {
	font-family: Arial, sans-serif;
	font-size: 18px;
}

#broken-link-editing-panel textarea {
	width: 100%;
	height: 70px;
}

#broken-link-folder-placement-menu {
	font-size: 15px;
	margin-top: 5px;
}

#broken-link-folder-placement-menu {
	padding: 5px;
}


/*	----------------------------------------------------------------------------------------------
	
	Broken link LISTING panel

	----------------------------------------------------------------------------------------------
*/

#broken-link-listing {
	margin: 0 25px 25px 25px;
}

#broken-link-listing-panel .heading-and-buttons {
	padding: 25px 25px 2px 25px;
}

#broken-link-listing .closed > .folder-contents {
	display: none;
}

#broken-link-listing:not(.pages-hidden) .closed > .page-contents {
	display: none;
}

#broken-link-listing .closed > .folder-row > .contractor,
#broken-link-listing .closed > .folder-row > .spacer,
#broken-link-listing .closed > .page-row > .contractor,
#broken-link-listing .closed > .page-row > .spacer  {
	display: none;
}

#broken-link-listing .empty > .folder-row > .contractor,
#broken-link-listing .empty > .folder-row > .expander {
	display: none;
}

#broken-link-listing .open > .folder-row > .expander,
#broken-link-listing .open > .folder-row > .spacer,
#broken-link-listing .open > .page-row > .expander,
#broken-link-listing .open > .page-row > .spacer {
	display: none;
}

#broken-link-listing .contractor,
#broken-link-listing .expander,
#broken-link-listing .spacer {
	width: 35px;
	flex: none;
	text-align: center;
	user-select: none;
}

#broken-link-listing .contractor,
#broken-link-listing .expander {
	cursor: pointer;
}

#broken-link-listing .expander {
	position: relative;
	top: -3px;
}

#broken-link-listing .folder {
	margin-left: -10px; /*	bring the *apparent* left padding of the pane down to about 25px; the
							left padding of the expander/contractor arrows makes them farther from
							the left edge than they ought to be*/
}

#broken-link-listing .folder-contents {
	margin-left: 25px;
}

#broken-link-listing .folder-name:hover {
	cursor: pointer;
	text-decoration: underline;
}

#broken-link-listing .folder-row,
#broken-link-listing .link-row,
#broken-link-listing .page-row {
	display: flex;
	flex-direction: row;
	padding-top: 10px;
	padding-bottom: 10px;
}
	
#broken-link-listing .icon {
	flex: none;
	width: 25px;
	user-select: none;
}

#broken-link-listing .link-row {
	margin-left: 25px;
}


#broken-link-listing .link-row .broken-link-title {
	cursor: pointer;
}

#broken-link-listing .link-row .broken-link-title:hover {
	text-decoration: underline;
}

#broken-link-listing .page-contents {
	margin-left: 60px;
}

#broken-link-listing .page-row {
	margin-left: 25px;
}

#broken-link-listing .page-row .broken-link-page-title {
	cursor: pointer;
}

#broken-link-listing .page-row .broken-link-page-title:hover {
	text-decoration: underline;
}

#broken-link-listing.pages-hidden .link-row {
	margin-left: 10px;
}

#broken-link-listing.pages-hidden .page-contents {
	margin-left: 0;
}

#broken-link-listing.pages-hidden .page-row {
	display: none;
}


/*	----------------------------------------------------------------------------------------------
	
	Button Styles

	----------------------------------------------------------------------------------------------
*/


button.cancel {
	background-color: transparent;
	color: #555;
	border: 2px solid #555;
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 14px;
}

button.cancel:hover {
	color: var(--cool-blue-hover);
	border: 2px solid var(--cool-blue-hover);
}

button.cancel.large {
	padding: 8px 13px; /* smaller to compensate for border */
	font-size: 18px;
}

button[type=submit] {
	background-color: var(--cool-blue);
	border: 2px solid var(--cool-blue);
	color: white;
	border: none;
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 14px;
}

button[type=submit]:hover {
	background-color: var(--cool-blue-hover);
}

.button {
	padding: 10px 15px;
	border-radius: 7px;
	font-size: 18px;
	/* min-width: 100px; */
}

.button .fa-check-circle,
.button .fa-times-circle {
	font-size: 24px;
	margin-right: 10px;
	position: relative;
	top: 2px;
}

.button.blue {
	background-color: var(--cool-blue);
	border: 2px solid var(--cool-blue);
	color: white;
	border: none;
}

.button.blue:hover {
	background-color: var(--cool-blue-hover);
}

.button.blue.disabled {
	color: white;
	background-color: #DDD;
}

.button.blue-outline {
	background-color: transparent;
	padding: 8px 13px; /* smaller to compensate for border */
	color: var(--cool-blue);
	border: 2px solid var(--cool-blue);
}

.button.blue-outline:hover {
	color: white;
	background-color: var(--cool-blue);
}

.button.blue-outline.disabled {
	color: white;
	background-color: #DDD;
	border: 2px solid #DDD;
}

.button.dark-grey {
	background-color: var(--dark-grey-with-green-tint);
	color: white;
	border: none;
}

.button.dark-grey:hover {
	background-color: var(--dark-grey-with-green-tint-hover);
}

.button.green {
	background-color: var(--green);
	color: white;
	border: none;
}

.button.green:hover {
	background-color: var(--green-hover);
}

.button.grey-outline {
	background-color: transparent;
	padding: 8px 13px; /* smaller to compensate for border */
	color: var(--dark-grey-with-green-tint);
	border: 2px solid var(--dark-grey-with-green-tint);
}

.button.grey-outline:hover {
	color: black;
	border-color: black;
}

.button.icon-first span {
	margin-right: 5px;
}

.button.orange {
	background-color: var(--action-orange);
	color: white;
	border: none;
}

.button.orange:hover {
	background-color: var(--action-orange-hover);
}

.button.red {
	background-color: var(--red);
	color: white;
	border: none;
}

.button.red:hover {
	background-color: var(--red-hover);
}

.button.red.disabled {
	color: white;
	background-color: #DDD;
}

.button.red-outline {
	background-color: transparent;
	padding: 8px 13px; /* smaller to compensate for border */
	color: var(--red-toned-down);
	border: 2px solid var(--red-toned-down);
}

.button.red-outline:hover {
	border: 2px solid var(--red-hover);
	background-color: var(--red-hover);
	color: white;
}

.button.small {
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 14px;
}

.button.yellow {
	background-color: var(--yellow-gold);
	color: white;
	border: none;	
}

.button.yellow:hover {
	background-color: var(--yellow-gold-hover);
}

.button.yellow-outline {
	background-color: transparent;
	border: 2px solid var(--yellow-gold);
	color: var(--yellow-gold-hover);
}

.button.yellow-outline:hover {
	background-color: var(--yellow-gold-hover);
	border-color: var(--yellow-gold-hover);
	color: white;
}
.button .fa-comment-dots {
	font-size: 24px;
	margin-right: 7px;
	position: relative;
	top: 2px;
}

.button .fa-file-alt {
	font-size: 20px;
}

.button .fa-pencil-alt {
	font-size: 24px;
	margin-right: 7px;
	position: relative;
	top: 2px;
}

.button.small .fa-pencil-alt {
	font-size: 18px;
	margin-right: 5px;
	position: relative;
	top: 0;	
}

.button.small .fa-plus {
	font-size: 18px;
}
	
.button-row {
	margin-top: 25px;
}

.button-row button {
	margin-bottom: 10px;
}

.button-row button:not(:first-child){
	margin-left: 20px;
}

.button-row-flex-spaced {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.button-row-flex-spaced button {
	margin-top: 25px;
	margin-right: 25px;
}

#rename-broken-link-folder-button .fa-pencil-alt {
	font-size: 20px;
	position: absolute;
	top: -1px;

}

#broken-link-viewer-settings-button {
	position: relative;
	top: 4px;
	padding-top: 8px;
	padding-bottom: 6px;
}

#broken-link-viewer-settings-button .fa-cog {
	font-size: 24px;
	position: relative;
}


/*	----------------------------------------------------------------------------------------------
	
	Flexbox Classes

	----------------------------------------------------------------------------------------------
*/

.flex-child-with-fixed-height,
.flex-child-with-fixed-width {
	flex: none;
}

.flex-child-that-fills-available-height {
	flex: 1 0 0;
}

.flex-child-that-fills-available-width {
	flex: 1 0 0;
}

.flex-child-that-grows-as-needed {
	flex: 1 0 auto;
}

.flex-child-that-shrinks-as-needed {
	flex: 0 1 auto;
}

.flex-child-that-grows-or-shrinks-as-needed {
	flex: 1 1 auto;
}

.flex-child-with-content-that-scrolls-if-needed {
	flex: 1 0 0;
	overflow-y: auto;
}

.flex-parent-horizontal {
	display: flex;
	flex-direction: row;
	overflow-x: hidden;
}

.flex-parent-horizontal.space-between {
	justify-content: space-between;
}

.flex-parent-vertical {
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
}


/*	----------------------------------------------------------------------------------------------
	
	Node Notes (as displayed in the node-info column of the "Sites" tab)
	
	----------------------------------------------------------------------------------------------	
*/

#cancel-and-okay-buttons-for-editing-node-note {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 25px;
	overflow-x: auto;
}

#cancel-and-okay-buttons-for-editing-node-note > .left-group {
	margin-right: 25px;
}

#cancel-and-okay-buttons-for-editing-node-note > .right-group {
	display: flex;
	flex-direction: row;
	flex-wrap: none;
}

#cancel-and-okay-buttons-for-editing-node-note > .right-group button:not(:first-child) {
	margin-left: 10px;
}

#node-notes {
	position: relative; /* keep Font Awesome from f'ing up my layout! */
}

#node-notes .note-attribution {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-family: var(--header-font), Arial, sans-serif;
	font-weight: bold;
	border-bottom: 1px solid transparent;
}

#node-notes .note-attribution .note-author-name {
	margin-top: 5px;
	color: var(--cool-blue);
}

#node-notes .note-attribution .note-author-photo {
	border-radius: 50%;
	background-color: var(--dark-grey-with-green-tint);
	color: white;
	width: 35px;
	height: 35px;
	text-align: center;
	margin-right: 15px;
	padding-top: 3px;
	font-size: 18px; /* for user initials, if the user has no photo */
}

#node-notes .note-on-node .note-body .quote {
	padding-left: 30px;
	padding-right: 30px;
	font-family: Arial, sans-serif;
}

#node-notes .note-body p:last-child {
	margin-bottom: 0;
}

#node-notes .note-date-and-time {
	text-align: right;
	color: #333;
	font-style: italic;
	margin-top: 10px;
}

#node-notes .note-on-node,
#note-to-display-if-there-are-no-notes,
.notification-that-note-has-been-deleted {
	background-color: white;
	margin-bottom: 30px;
	padding: 25px;
	border: 1px solid hsl(192 9% 90%);
	border-radius: 10px;
	/* box-shadow: 0px 3px 15px rgba(0,0,0,0.2); */
	box-shadow: var(--drop-shadow);
}

#node-notes .note-on-node:not(.editable) .edit-note-button,
#node-notes .note-on-node.being-edited .edit-note-button {
	display: none;
}

#node-notes .edit-note-button,
#node-notes .delete-note-button {
	color: var(--dark-grey-with-green-tint);
}

#node-notes .edit-note-button:hover {
	cursor: pointer;
	color: black;
}

#node-notes .edit-note-button-container {
	margin-left: 25px;
}

#node-notes .note-on-node .note-body table {
	border-collapse: collapse;
}

#node-notes .note-on-node .note-body table td {
	border: 1px solid var(--dark-grey-with-green-tint);
	padding: 10px;
}

#node-notes .note-on-node .note-body table th {
	border: 1px solid var(--dark-grey-with-green-tint);
	background-color: var(--cool-blue-faded);
	padding: 10px;
	text-align: left;
}

#note-to-display-if-there-are-no-notes {
	display: none;
}

.notification-that-note-has-been-deleted {
	font-family: Arial, sans-serif;
	font-size: 20px;
	color: var(--dark-grey-with-green-tint);
}


/*	----------------------------------------------------------------------------------------------
	
	Site Title and Controls at Top of Site Tree (buttons, search bar)
	
	----------------------------------------------------------------------------------------------	
*/

#heading-and-controls-at-top-of-site-tree {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start; /* prevents buttons from getting taller to fill up vertical space */
}

#site-name-container {
	flex: 1 1 auto;
	margin-right: 20px;
	overflow-x: hidden;
	min-width: 100px;
	margin-bottom: 10px;
}

#site-name {
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
}

#site-buttons {
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	padding-top: 4px;
	margin-right: 20px;
	margin-bottom: 10px;
}

#site-buttons button {
	margin-left: 5px;
	margin-right: 5px;
}

#site-search-bar-container { 
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-bottom: 10px;
}

#site-search-bar {
	flex: 0 1 325px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px; /* account for border-radius */
	padding-right: 30px; /* don't allow typed characters to cover magnifying-glass icon */
	border: none;
	background-color: white;
	border-radius: 20px;
	margin-top: 6px; /* align vertically with #site-buttons when everything on one line */
	margin-right: 5px; /* helps positions magnifying glass correctly */
}

#site-search-bar:focus {
	outline: 2px solid var(--cool-blue);
}

#site-search-magnifying-glass-button {
	border: none;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: transparent;
	color: var(--dark-grey-with-green-tint);
	cursor: pointer;
	margin-top: 8px;
	margin-left: -35px;
	padding-right: 15px;
}

#site-search-magnifying-glass-button:focus {
	outline: none;
}

#site-tree-parent-panel {
	margin-top: 15px;
}

/*	----------------------------------------------------------------------------------------------
	
	Site Search Styles
	
	----------------------------------------------------------------------------------------------	
*/

.search-result {
	padding: 15px 25px;
	border-bottom: 1px solid #DDD;
}

.search-result:hover {
	background-color: var(--cool-blue-faded);
}

.search-result.selected {
	background-color: var(--cool-blue-extra-faded);
	border: 3px solid var(--action-orange);
}

.search-result .search-result-node-title {
	font-family: Arial, sans-serif;
	font-size: 18px;
}

.search-result .search-result-node-ancestry-chain {
	margin-top: 10px;
	color: var(--dark-grey-with-green-tint);
}

#search-results {
	display: none;
}

#search-results-summary {
	display: none;
	margin-bottom: 25px;
}

#search-results-summary p {
	font-family: Arial, sans-serif;
	font-size: 22px;
}

#search-results-summary .horizontal-menu {
	font-family: Arial, sans-serif;
	color: blue; /* var(--cool-blue); */
	text-decoration: underline;
	font-size: 18px;
}

#search-string {
	font-weight: bold;
}


/*	----------------------------------------------------------------------------------------------
	
	Site Tree Styles
	
	----------------------------------------------------------------------------------------------	
*/

.node {
	margin-left: 35px;
}

.node > .node-title-row .node-icon-and-title > .node-icon {
	width: 25px;
	flex: none;
}

.node > .node-title-row > .twisty {
	background-position: center center;
	background-repeat: no-repeat;
}

.node.closed > .node-title-row > .twisty {
	background-image: url("images/triangle-pointing-right.png");
}

.node.closed > .node-title-row > .twisty:hover {
	cursor: pointer;
}

.node.open > .node-title-row > .twisty {
	background-image: url("images/triangle-pointing-down.png");
}

.node.open > .node-title-row > .twisty:hover {
	cursor: pointer;
}

.node.closed > .child-nodes {
	display: none;
}

.node.highlighted-as-search-result > .node-title-row {
	background-color: var(--cool-blue-faded);
}

.node.root {
	margin-left: -45px;
}

.node.root > .node-title-row {
	display: none;
}

.node.selected > .node-title-row,
.node.selected > .node-title-row .node-icon-and-title {
	/*	The second selector above is essential in order to ensure that the background color
		extends to the end of the node name in a horizontal-overflow situation. */
	background-color: var(--cool-blue-faded);
}

.node-icon-and-title {
	flex: none;
	display: flex;
	flex-direction: row;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}

.node-title-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

#node-error-message {
	display: none;
}

#site-tree {
	padding: 15px 25px;
	min-height: 100%; /* make sure drag-and-drop coverage extends to bottom of panel */
}

#sites-tab {
	/*	Make this div the offset parent of everything in the "sites" tab. This is essential for
		(1) managing drag-and-drop in the site tree
		(2) preventing Font Awesome from messing up the layout of the page
	*/
	position: relative;
}

#site-tree .twisty {
	width: 35px;
	flex: none;
	text-align: center;
	user-select: none;
}

#site-tree.in-drag-and-drop-mode .node.root {
	margin-left: -55px;
}


#site-tree.in-drag-and-drop-mode .node-icon-and-title {
	touch-action: none;
}


/*	----------------------------------------------------------------------------------------------
	
	Site Tree Styles, Part 2: Drag-and-Drop Mode
	
	----------------------------------------------------------------------------------------------	
*/

#site-tree.in-drag-and-drop-mode {
	user-select: none;
}

#site-tree.in-drag-and-drop-mode .node {
	/*	The background image below is used to create a 3-pixel left border of #AAA grey. For
		reasons too complex to fully explain here, using a background image in lieu of a border
		makes it possible to keep connecting lines straight across different browser zoom levels
		and Windows "display scale" settings. See Dan's Tech Notes for details. */
	background-image: url("images/pseudo-border.png");
	background-repeat: repeat-y;
}

#site-tree.in-drag-and-drop-mode .node.being-dragged {
	background-image: none;
	position: absolute;
	pointer-events: none;
}

#site-tree.in-drag-and-drop-mode .node:last-child {
	background-image: none; /* suppresses background image used to simulate left border */
}

#site-tree.in-drag-and-drop-mode .node > .node-title-row > .connector-to-icon-and-title {
	border-bottom: 3px solid #AAA;
	margin-left: -6px; /* extend outside boundaries to touch twisty to the left */
	flex: none;
	width: 29px; /* 35px width - 6px overflow */
	height: 26px;
}

#site-tree.in-drag-and-drop-mode .node > .node-title-row > .connector-to-parent-node {
	border-bottom: 3px solid #AAA;
	margin-right: -7px; /* extend outside boundaries to touch twisty to the right */
	flex: none;
	width: 42px; /* 35px width + 7px overflow */
	height: 26px;
}

#site-tree.in-drag-and-drop-mode .node:last-child > .node-title-row > .connector-to-parent-node {
	/*	See note above on using background images instead of borders to create connecting lines. */
	background-image: url("images/pseudo-border.png");
	background-repeat: repeat-y;
}

#site-tree.in-drag-and-drop-mode .node > .node-title-row > .node-icon-and-title {
	border: 1px solid #AAA;
	margin-top: 5px;
	margin-bottom: 5px;
}

#site-tree.in-drag-and-drop-mode .node#drop-target > .node-title-row > .node-icon-and-title {
	border: 4px dashed blue;
	margin-top: 1px;
	margin-bottom: 3px;
	background-color: var(--cool-blue-faded);
}

#site-tree.in-drag-and-drop-mode .node#drop-target > .node-title-row > .node-icon-and-title > * {
	visibility: hidden;
}

#site-tree.in-drag-and-drop-mode .node > .child-nodes {
	margin-left: 17px;
}

#site-tree.in-drag-and-drop-mode .node > .node-title-row > .node-icon-and-title > .node-icon {
	flex: none;
	width: 35px;
	text-align: center;
}

#site-tree.in-drag-and-drop-mode .node > .node-title-row > .twisty  {
	flex: none;
	width: 35px;
	z-index: 2; /* maintain clickability across the full width; neighbors have negative margins */
}

#site-tree.in-drag-and-drop-mode .node.closed > .node-title-row > .twisty {
	background-image: url("images/site-tree-twisty-for-closed-node.fw.png");
}

#site-tree.in-drag-and-drop-mode .node.childless > .node-title-row > .twisty {
	background-image: url("images/site-tree-twisty-for-childless-node.fw.png");
}

#site-tree.in-drag-and-drop-mode .node.open > .node-title-row > .twisty {
	background-image: url("images/site-tree-twisty-for-open-node.fw.png");
}

#site-tree.in-drag-and-drop-mode .node > .child-nodes > .node:first-child::before {
	/* connects first-child nodes to their parent twisties */
	content: "";
	display: block;
	margin-top: -15px;
	width: 15px;
	height: 15px;
	background-image: url("images/pseudo-border.png");
	background-repeat: repeat-y;
}

#site-tree.in-drag-and-drop-mode .node > .child-nodes > .node.being-picked-up:first-child::before,
#site-tree.in-drag-and-drop-mode .node > .child-nodes > .node.being-put-down:first-child::before {
	display: none;
}

#site-tree.in-drag-and-drop-mode .node.being-dragged > .node-title-row > .connector-to-parent-node,
#site-tree.in-drag-and-drop-mode .node.being-dragged > .node-title-row > .connector-to-icon-and-title,
#site-tree.in-drag-and-drop-mode .node.being-dragged > .node-title-row > .twisty {
	visibility: hidden;
}

#site-tree.in-drag-and-drop-mode .temporary-connecting-line {
	margin-left: 52px; /* 17px for .child-nodes, 35px for .node */
	margin-top: -15px;
	height: 15px;
	background-image: url("images/pseudo-border.png");
	background-repeat: repeat-y;
}


/*	----------------------------------------------------------------------------------------------

	Miscellaneous Styles (IDs and Classes)

	----------------------------------------------------------------------------------------------	
*/

#additional-user-settings {
	margin: 25px 0;
}

.admin-only {
	display: none;
}

#administrator-controls {
	border: 2px solid white;
	padding: 10px;
}

#administrator-controls button {
	margin-bottom: 10px;
}

#administrator-controls > div,
#site-setting-buttons > div {
	padding: 10px;
	border: 1px solid #CCC;
	border-top: none;
	font-size: 14px;
	font-family: Arial, sans-serif;
}

#administrator-controls > div:hover,
#site-setting-buttons > div:hover {
	cursor: pointer;
	background-color: #DDD;
}

#administrator-controls > div:first-child,
#site-setting-buttons > div:first-child {
	border-top: 1px solid #CCC;
}

#administrator-controls > div span.far,
#administrator-controls > div span.fas {
	font-size: 18px;
	padding-right: 5px;
}

#administrator-controls h2 {
	margin-top: 0;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

#all-screens {
	display: none; /* will be changed to "block" with JS */
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.bottom-margin-replacement-25,
.top-margin-replacement-25 {
	width: 100%;
	height: 25px;
}

.bottom-margin-replacement-50,
.top-margin-replacement-50 {
	width: 100%;
	height: 50px;
}

.bottom-padding-replacement,
.top-padding-replacement {
	width: 100%;
	height: 25px;
}

#broken-link-iframe-column--blank-panel {
	background-color: var(--ivory); /* or go with white? */
}

#broken-link-iframe-column iframe {
	width: 100%;
	height: 100%;
	overflow: auto;
}

#broken-link-iframe-column--iframe-selector {
	padding: 10px 25px;
}

#broken-link-iframe-column--iframe-selector .fa-redo {
	position: relative;
	top: 2px;
	color: var(--dark-grey-for-darkened-pane);
}

#broken-link-iframe-column--iframe-selector .fa-redo:hover {
	color: orange;
}

#broken-link-info-column {
	background-color: var(--ivory);
}

#broken-links-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

#broken-links-tab .heading-and-buttons h2 {
	font-size: 36px;
}

#cancel-and-okay-buttons-for-editing-comment-on-broken-link {
	margin-bottom: 25px;
}

.centered {
	text-align: center;
}

#change-password-input {
	width: 100%;
}

#clickable-list-of-recently-viewed-nodes > div {
	padding: 10px;
	border: 1px solid #CCC;
	font-size: 14px;
	font-family: Arial, sans-serif;
	cursor: pointer;
}

#clickable-list-of-recently-viewed-nodes > div:not(:first-child) {
	border-top: none;
}
	
#clickable-list-of-recently-viewed-nodes > div:hover {
	background-color: var(--cool-blue-extra-faded);
}

.column-resizing-handle {
	width: 25px;
	flex: none;
	background-color: var(--cool-blue);
	color: white;
	cursor: col-resize;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	touch-action: none;
}

#container-for-welcome-screens {
	height: 100%;
}

#control-panel h3 {
	margin-top: 30px;
	margin-bottom: 10px;
}

#date-input-container {
	padding-left: 20px;
}

#date-input-container label {
	margin-right: 10px;
}

#date-picker-controls {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.dialog-buttons {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 20px;
}

.dialog-buttons button {
	margin-left: 10px;
}

.divider-bullet {
	margin: 0 10px;
}

.do-not-display {
	display: none;
}

#edit-broken-link-folder-overlay h2 {
	color: #555;
	padding-bottom: 5px;
	border-bottom: 1px solid #AAA;
}

#edit-broken-link-folder-overlay #broken-link-folder-name {
	font-size: 24px;
	margin-top: 15px;
}

#edit-broken-link-folder-overlay .fa-folder {
	color: var(--yellow-gold);
	margin-top: 12px;
	margin-right: 15px;
	font-size: 40px;
}

#edit-node-title-button {
	color: var(--dark-grey-with-green-tint);
	font-size: 18px;
	padding: 0 5px;
	cursor: pointer;
}

#edit-node-title-button:hover {
	color: black;
}

#empty-site-tree-message {
	margin: 25px;
}

#error-message p:first-child {
	margin-top: 0;
}

#everything-but-overlays {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}

.faded {
	opacity: 0.3;
}

.fieldset {
	margin-bottom: 50px;
	border: 1px solid #777;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 25px;
}

.fieldset-header {
	border: 1px solid #777;
	border-bottom: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #EEE;
	padding: 10px 20px;
	font-size: 18px;
	font-weight: bold;
}

#first-link-iframe {
	display: none;
}

.flex-item-with-fixed-height {
	flex: none;
}

.flexible-image-container {
	overflow: hidden;
}

.flexible-image-container img {
	max-width: 100%;
	max-height: 100%;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.floating-white-panel {
	background-color: white;
	border-radius: 5px;
	padding: 25px;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.floating-white-panel.no-padding {
	padding: 0;
}

#get-new-user-first-and-last-name-screen {
	background-image: url("images/migrating-canadian-geese.jpg");
	background-size: cover;
}

.heading-and-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.heading-and-buttons > .buttons {
	margin-top: 10px;
	flex: 0 1 auto /* allows buttons to break into second row if needed */
}

.heading-and-buttons > .buttons > button {
	margin-bottom: 20px;
}

.heading-and-buttons > .buttons > button:not(:first-child) {
	margin-left: 15px;
}

.heading-and-buttons h2 {
	margin-top: 0;
	margin-bottom: 12px;
	margin-right: 20px;
	flex: 1 1 auto;
}

.hide-for-now {
	display: none;
}

.hide-until-server-replies {
	display: none;
	border: 1px solid transparent;
}

.highlighted-due-to-error {
	color: red;
	font-weight: bold;
}

.horizontal-menu {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-direction: row;
}

.horizontal-menu li {
	flex: none;
	margin-left: 10px;
	margin-right: 10px;
}

.horizontal-menu li:hover {
	text-decoration: underline;
	cursor: pointer;
}

.horizontal-menu li:first-child {
	margin-left: 0;
}

.horizontal-menu li:last-child {
	margin-right: 0;
}

.horizontal-menu li a:hover {
	cursor: pointer;
}

.horizontal-menu.with-pipes li {
	border-right: 1px solid black;
}

.horizontal-menu.with-pipes li:last-child {
	border-right: none;
}

.hyperlink {
	cursor: pointer;
	text-decoration: underline;
	color: blue;
}

.hyperlink:hover {
	cursor: pointer;
}

.iframe-container {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
}

.iframe-container > * {
	width: 100%;
	height: 100%;
}

.indented {
	margin-left: 25px;
	margin-right: 25px;
}

.labeled-checkbox,
.labeled-radio-button {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin: 10px 0;
}

.labeled-checkbox.always-do-this {
	margin-top: 50px;
	border-top: 1px solid var(--dark-grey-with-green-tint);
	padding-top: 25px;
	margin-bottom: 50px;
}

.labeled-checkbox input[type=checkbox],
.labeled-radio-button input[type=radio] {
	flex: none;
}

.labeled-checkbox label,
.labeled-radio-button label {
	margin-left: 5px;
}

.labeled-control:not(:first-child) {
	margin-top: 25px;
}

.labeled-control:not(:last-child) {
	margin-bottom: 25px;
}

.labeled-control label {
	display: block;
	margin-bottom: 3px;
}

.labeled-control.with-extra-bottom-margin {
	margin-bottom: 20px;
}

.labeled-radio-button.with-associated-text-input input[type=text] {
	flex: 0 1 200px;
}

.labeled-radio-button.with-associated-text-input label {
	flex: none;
	margin-right: 10px;
}

#loading-broken-link-info-message {
	text-align: center;
	font-family: Arial, sans-serif;
	color: var(--dark-grey-with-green-tint);
	font-size: 36px;
	padding-bottom: 70px; /* center the paragraph a little higher */
}

#loading-indicator-to-show-while-broken-link-info-is-loading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.loading-indicator-to-show-while-iframe-source-is-loading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--neutral-grey);
}

.loading-indicator-to-show-while-iframe-source-is-loading p {
	flex: none;
	text-align: center;
	font-family: Arial, sans-serif;
	color: var(--dark-grey-with-green-tint);
	font-size: 36px;
}

#logged-in-as {
	font-style: italic;
}

#login-screen,
#sign-up-screen,
#get-new-user-first-and-last-name-screen,
#waiting-screen {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#login-screen {
	background-image: url("images/sky-1.jpg");
	background-size: cover;
}

.login-panel {
	margin: 20px;
	margin-bottom: 100px; /* leads to the panel being slightly above center on the screen */
	padding: 20px;
	border-radius: 10px;
	width: 400px;
	max-width: 100%;
	background-color: white;
}

.login-panel input {
	width: 100%;
}

#main-screen {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.mce-tinymce.mce-container {
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
}

.mce-tinymce.mce-container > .mce-container-body {
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
}

.mce-tinymce.mce-container > .mce-container-body > .mce-edit-area {
	flex: 1 1 0px;
}

.migration-status-choice-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 10px;
	cursor: pointer;
}

.migration-status-choice-row .color-box {
	flex: none;
}

.migration-status-choice-row .migration-status-wording {
	flex: 1 1 auto;
	margin-left: 10px;
}

.migration-status-choice-row.selected .check-mark {
	display: inline;
}

.migration-status-choice-row.selected .migration-status-wording {
	font-weight: bold;
}

#new-site_site-name-input {
	width: 100%;
}

#new-user-info-form {
	border: 1px solid #CCC;
	background-color: white;
	border-radius: 5px;
	margin: 5vh 0;
	padding: 20px 40px;
	max-width: 350px;
}

#no-site-message-for-site-tree-column {
	justify-content: center;
	font-size: 24px;
	text-align: center;
}

#no-standard-links-message {
	border: 1px solid transparent;
}

.no-top-margin {
	margin-top: 0 !important;
}

#node-iframe-column {
	padding-left: 0;
	padding-right: 0;
}

#node-info-column {
	padding-top: 25px;
	background-color: var(--ivory);
}

#node-info-column a {
	word-break: break-word;
}

#node-info-column .labeled-field p {
	margin-top: 5px;
}

#node-info-column h3 {
	margin-bottom: 12px;
}

.node-link-editing-panel {
	background-color: white;
	border-radius: 5px;
	padding: 25px;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.node-link-editing-panel .labeled-control label {
	font-family: Arial, sans-serif;
	font-size: 18px;
}

.node-link-editing-panel .labeled-control input[type=text],
.node-link-editing-panel .labeled-control textarea {
	font-size: 16px;
}

.node-link-editing-panel .more-options {
	display: none;
}

.node-link-editing-panel .link-replacement-options {
	border: 3px solid var(--cool-blue-faded);
	border-radius: 5px;
	padding: 25px;
}

.node-link-editing-panel .link-replacement-options.activated {
	border: 3px solid var(--cool-blue);
}

.node-link-editing-panel .link-replacement-options p {
    font-family: Arial, sans-serif;
    font-size: 18px;
}

#node-links h4,
#node-links .labeled-control label {
	display: block;
	color: #555;
	margin-bottom: 5px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

#node-links input[type=text] {
	width: 100%;
}

#node-links .node-link:not(:first-child) {
	margin-top: 25px;
}

#node-links .node-link {
	margin-bottom: 25px;
}


#node-new-note-container {
	display: none;
}

#overlays {
	display: none; /* will be set to "flex" with jQuery */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 101;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding: 20px;
	overflow: hidden;
}

#overlays > form {
	background-color: white;
	border-radius: 10px;
	padding: 40px;
	width: 500px;
	max-width: 100%;
	overflow-y: auto;
}

#overlays > form input[type="text"],
#overlays > form textarea {
	width: 100%;
}

#overlays #change-password-overlay {
	width: 400px;
}

#overlays #error-overlay {
	max-width: 1200px;
	overflow-y: auto;
}

#overlays #link-editing-overlay  {
	background-color: var(--cool-blue-almost-white);
	width: 700px;
}

#overlays #report-broken-link-part-2-overlay {
	width: 800px;
}

#overlays #edit-standard-links-for-site-overlay {
	background-color: var(--cool-blue-almost-white);
	width: 700px;	
}

#overlays #site-access-overlay {
	width: 700px;
}

#page-title-headline {
	margin-top: -5px;
}

.panel-in-overlay {
	background-color: white;
	border-radius: 5px;
	padding: 25px;
	margin-bottom: 35px;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.radio-buttons-with-extra-space .labeled-radio-button {
	margin: 25px 0;
}

#screen-dimmer {
	/*	borrowed from:
		http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
	*/
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
	opacity: 0.7;
    z-index: 100;
	display: none; /* jQuery will override this setting when needed. */
}

.scrollbox {
	flex: 0 1 auto;
	border: 1px solid black;
	min-height: 40px;
	overflow-y: auto;
}

.show-only-in-development-version {
	display: none;
}

#show-page-on-legacy-site:hover,
#show-page-on-new-site:hover {
	border-bottom: 2px solid var(--cool-blue);
	text-decoration: none;
}

#show-page-on-legacy-site.selected,
#show-page-on-new-site.selected {
	border-bottom: 2px solid orange;
}

.sidebar {
	padding: 0 25px;
	overflow-x: hidden;
	overflow-y: auto;
}

.sidebar-panel {
	background-color: white;
	border-radius: 5px;
	padding: 25px;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

#sign-up-screen {
	background-image: url("images/sky-1.jpg");
	background-size: cover;
}

#site-access-table {
	width: 100%;
	margin-bottom: 25px;
	border-collapse: collapse;
}

#site-access-table tbody tr:nth-child(odd) {
	background-color: var(--cool-blue-extra-faded);
}

#site-access-table tbody tr:first-child {
	border-top: 1px solid var(--cool-blue-faded);
}

#site-access-table tbody tr:last-child {
	border-bottom: 1px solid var(--cool-blue-faded);	
}

#site-access-table th,
#site-access-table td {
	text-align: center;
	padding: 10px 25px;
	border: none;
}

#site-access-table td:first-child {
	text-align: left;
}

#site-changing-menu-outer-container {
	margin-bottom: 30px;
	overflow-x: auto;	
}

#site-controls {
	margin-top: 25px;
}

#site-setting-buttons > div span.far,
#site-setting-buttons > div span.fas {
	padding-right: 5px;
}

#site-settings-column {
	background-color: var(--ivory);
}

#site-settings-column h2 {
	margin-top: 50px;
	margin-bottom: 12px;
}

#site-tree-column {
	padding: 25px;
	background-color: var(--ivory);
}

#sites-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.special-option {
	font-style: italic;
}

.sp-palette-button-container {
	margin-top: 10px; /* for "more" button in Spectrum color picker */
}

.subtle-bottom-border {
	padding-bottom: 5px;
	border-bottom: 1px solid #CCC;
}

#tabs-on-main-screen {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.top-nav-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;	
	padding: 5px 20px;
	background-color: #333;
	color: white;
}

.top-nav-bar h1 {
	margin: 0;
}

#top-nav-bar-for-welcome-screens {
	display: block;
	text-align: center;	
	background-image: radial-gradient(49% 81% at 45% 47%, #FFE20345 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #FF7000FF 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #FFDB00FF 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #FF7000FF 0%, #FF0000FF 100%);
	/*
		See:
		https://colorgradient.dev/gradient-generator/
	*/
}

#top-nav-bar-for-welcome-screens h1 {
	font-size: 64px;
	margin-top: -25px;
}

#top-nav-bar-for-welcome-screens p {
	font-family: var(--header-font), Arial, sans-serif;
	font-size: 18px;
}

#top-nav-bar-for-welcome-screens p:last-child {
	margin-top: -5px;
	font-size: 24px;
}

#top-nav-bar-on-main-screen li {
	color: white;
	font-family: var(--header-font), Arial, sans-serif;
}

#top-nav-bar-on-main-screen li.selected {
	border-bottom: 2px solid white;
}

#top-nav-bar-on-main-screen li.selected:hover {
	border-bottom: 2px solid var(--yellow-gold);
}

#top-nav-bar-on-main-screen li:hover {
	color: var(--yellow-gold);
	
	text-decoration: none;
}

#user-account-tab {
	padding: 25px;
}

#view-search-result-in-context-button {
	display: none;
}

#waiting-message {
	color: white;
	font-family: var(--header-font), Arial, sans-serif;
	font-size: 5vw;
	font-weight: bold;
}

#waiting-screen {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("images/sky-2.jpg");
	overflow: hidden;
}

#warning-about-descendant-nodes {
	padding-bottom: 10px;
}

.with-25px-bottom-margin {
	margin-bottom: 25px;
}

.with-25px-bottom-padding {
	padding-bottom: 25px;
}