:root {
	--screen-size: 980px;

	--color-palette-white: hsl(0, 0%, 100%);
	--color-palette-black: hsl(0, 0%, 0%);
	--color-palette-red: hsl(345, 100%, 40%);
	--color-palette-orange: hsl(28, 100%, 50%);
	--color-palette-amber: hsl(40, 100%, 50%);
	--color-palette-yellow: hsl(60, 100%, 50%);
	--color-palette-chartreuse: hsl(90, 100%, 50%);
	--color-palette-green: hsl(130, 100%, 45%);
	--color-palette-turquoise: hsl(180, 100%, 40%);
	--color-palette-blue: hsl(210, 100%, 50%);
	--color-palette-indigo: hsl(250, 100%, 60%);
	--color-palette-violet: hsl(270, 100%, 50%);
	--color-palette-purple: hsl(290, 100%, 40%);
	--color-palette-magenta: hsl(320, 100%, 50%);
	--color-palette-pink: hsl(345, 50%, 60%);
	--color-palette-gray: hsl(0, 0%, 40%);

	--color-status-info: hsl(220, 60%, 50%);
	--color-status-success: hsl(120, 50%, 40%);
	--color-status-warning: hsl(30, 100%, 60%);
	--color-status-error: hsl(345, 100%, 40%);
	--color-status-notice: hsl(0, 0%, 40%);

	--color-elements-accent: var(--color-palette-red);
	--color-elements-activity: hsl(345, 100%, 40%);
	--color-elements-heading: hsl(0, 100%, 30%);
	--color-elements-input-background: hsl(0, 0%, 100%);
	--color-elements-input-foreground: hsl(0, 0%, 0%);
	--color-elements-link: hsl(220, 10%, 50%);
	--color-elements-new-testament: hsl(345, 100%, 40%);
	--color-elements-redletter: hsl(345, 100%, 40%);
	--color-elements-redletter-gray: hsl(345, 40%, 60%);
	--color-elements-select: hsla(210, 100%, 80%, 0.5);
	--color-elements-shadow: hsla(0, 0%, 0%, 0.6);

	--color-foreground: hsl(0, 0%, 0%);
	--color-background: hsl(0, 0%, 100%);

	--color-foreground-02: color-mix(in srgb, var(--color-background) 2%, var(--color-foreground));
	--color-foreground-04: color-mix(in srgb, var(--color-background) 4%, var(--color-foreground));
	--color-foreground-06: color-mix(in srgb, var(--color-background) 6%, var(--color-foreground));
	--color-foreground-08: color-mix(in srgb, var(--color-background) 8%, var(--color-foreground));
	--color-foreground-10: color-mix(in srgb, var(--color-background) 10%, var(--color-foreground));
	--color-foreground-20: color-mix(in srgb, var(--color-background) 20%, var(--color-foreground));
	--color-foreground-30: color-mix(in srgb, var(--color-background) 30%, var(--color-foreground));
	--color-foreground-40: color-mix(in srgb, var(--color-background) 40%, var(--color-foreground));
	--color-foreground-50: color-mix(in srgb, var(--color-background) 50%, var(--color-foreground));
	--color-foreground-60: color-mix(in srgb, var(--color-background) 60%, var(--color-foreground));
	--color-foreground-70: color-mix(in srgb, var(--color-background) 70%, var(--color-foreground));
	--color-foreground-80: color-mix(in srgb, var(--color-background) 80%, var(--color-foreground));
	--color-foreground-90: color-mix(in srgb, var(--color-background) 90%, var(--color-foreground));
	--color-foreground-92: color-mix(in srgb, var(--color-background) 92%, var(--color-foreground));
	--color-foreground-94: color-mix(in srgb, var(--color-background) 94%, var(--color-foreground));
	--color-foreground-96: color-mix(in srgb, var(--color-background) 96%, var(--color-foreground));
	--color-foreground-98: color-mix(in srgb, var(--color-background) 98%, var(--color-foreground));

	--color-background-02: color-mix(in srgb, var(--color-foreground) 2%, var(--color-background));
	--color-background-04: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
	--color-background-06: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
	--color-background-08: color-mix(in srgb, var(--color-foreground) 8%, var(--color-background));
	--color-background-10: color-mix(in srgb, var(--color-foreground) 10%, var(--color-background));
	--color-background-20: color-mix(in srgb, var(--color-foreground) 20%, var(--color-background));
	--color-background-30: color-mix(in srgb, var(--color-foreground) 30%, var(--color-background));
	--color-background-40: color-mix(in srgb, var(--color-foreground) 40%, var(--color-background));
	--color-background-50: color-mix(in srgb, var(--color-foreground) 50%, var(--color-background));
	--color-background-60: color-mix(in srgb, var(--color-foreground) 60%, var(--color-background));
	--color-background-70: color-mix(in srgb, var(--color-foreground) 70%, var(--color-background));
	--color-background-80: color-mix(in srgb, var(--color-foreground) 80%, var(--color-background));
	--color-background-90: color-mix(in srgb, var(--color-foreground) 90%, var(--color-background));
	--color-background-92: color-mix(in srgb, var(--color-foreground) 92%, var(--color-background));
	--color-background-94: color-mix(in srgb, var(--color-foreground) 94%, var(--color-background));
	--color-background-96: color-mix(in srgb, var(--color-foreground) 96%, var(--color-background));
	--color-background-98: color-mix(in srgb, var(--color-foreground) 98%, var(--color-background));
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	height: 100%;
}

a {
	text-decoration: none;
	color: var(--color-elements-link);
	transition: all 0.2s;
}

a:hover {
	opacity: 0.6;
}

body.admin a {
	--color-elements-link: hsl(210, 80%, 33%);
	color: var(--color-elements-link);
}

body.admin > nav.sidebar a {
	--color-elements-link: var(--color-foreground);
	color: var(--color-elements-link);
}

body.admin > nav.sidebar a:hover {
	--color-elements-link: var(--color-background);
	color: var(--color-elements-link);
}

#admin_content {
	margin: 1rem;
}


/* Layout */

html {
	font-size: 22px;
}

body {
	height: 100%;
	margin: 0 auto;
	padding: 0px;
	color: #000000;
	font-family: 'Roboto Condensed', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1rem;
}

body.main {
	width: calc(var(--screen-size) - 3rem);
	background: url('/images/bk.jpg') no-repeat center center fixed;
	background-size: cover;
	background-position: top;
}

body.main > :is(header, nav, main, footer) {
	margin: 1rem 0;
	padding: 1rem;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8);
}

/* body.main > header {
	display: flex;
	color: #FFFFFF;
	background-color: #990033;
} */
body.main > header {
	display: flex;
	color: #FFFFFF;
	position: relative;
	box-shadow: none;
}

body.main > header::before {
	position: absolute;
	display: block;
	inset: 0;
	z-index: -1;
	transform: skew(-8deg);
	background-color: #990033;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8);
	content: '';
}

body.main > header > *:nth-child(2) {
	flex: 1;
	text-align: right;
}

body.main > header img {
	filter: drop-shadow(0.5rem 0.5rem 0.2rem var(--color-elements-shadow));
}

body.main > header h1 a {
	color: #FFFFFF;
}

body.main > nav {
	position: relative;
	padding: 0;
	overflow: hidden;
	color: #CCCCCC;
	background-color: hsla(0, 0%, 10%, 0.8);
	transform: skew(-8deg);
}

body.main > nav ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body.main > nav li {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body.main > nav a {
	display: inline-block;
	padding: 0.3rem 1rem 0.4rem;
	color: #CCCCCC;
	font-size: 0.8rem;
	font-weight: bold;
	font-variant: small-caps;
	letter-spacing: 0.2rem;
}

body.main > nav a:hover {
	color: #999999;
}

body.main > nav a:hover.select {
	color: #999999;
}

body.main > nav a.select {
	color: #333333;
	background-color: #FFFFFF;
}

body.main > nav div.content {
	margin: 16px 10px;
	font-size: 0.8rem;
}

body.main > main {
	position: relative;
	margin: 0;
	padding: 1rem;
	background-color: hsla(0, 0%, 100%, 0.8);
}

body.main > main::after {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clear: both;
	content: '';
}

body.main > main .nopad {
	margin: 0 -1rem 1rem;
}

body.main > footer {
	position: relative;
	color: #999999;
	background-color: hsla(0, 0%, 10%, 0.8);
	font-size: 0.8rem;
	text-decoration: none;
}
/* body.main > footer {
	position: relative;
	display: flex;
	color: #999999;
	font-size: 0.8rem;
	background-color: hsla(0, 0%, 10%, 0.8);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8);
	transform: skew(-8deg);
} */

body.main > footer::before {
	position: absolute;
	display: block;
	inset: 0;
	z-index: -1;
	box-shadow: none;
	content: '';
}


body.main > footer .footer-tools {
	position: absolute;
	display: flex;
	gap: 0.6rem;
	bottom: 1rem;
	right: 1rem;
}

body.admin {
	width: 100%;
	text-align: justify;
}

body.admin > header {
	display: flex;
	margin: 0;
	padding: 0.5rem;
}

body.admin > nav {
	margin: 0;
}


/* Utility Classes */

.capslock {
	display: inline-block;
	/* margin: 0 0.5rem 0 -1rem; */
	color: var(--color-palette-orange);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}

.capslock.capslock-on {
	opacity: 1;
}

[data-char-limit] + [data-char-counter] {
	display: block;
	margin: 0.2rem 0;
	font-size: 0.8rem;
}

[data-checkcount]:empty {
	display: none;
}

[data-checkcount] {
	display: inline-block;
	margin-inline-start: 0.2rem;
	padding: 0.1rem;
	padding-inline-start: 0.2rem;
	font-size: 0.8em;
	border-radius: 0.2rem;
	background-color: hsla(0, 0%, 0%, 0.4);
}

[data-indicator] {
	color: var(--color-foreground);
}

[data-indicator].activity {
	opacity: 1;
	color: var(--color-elements-activity);
}

.badge {
	padding: 0 0.2rem;
	border-radius: 0.2rem;
	background-color: var(--color-background-10);
	font-family: var(--font-family-emoji), var(--font-family-interface);
	font-size: 0.8em;
}

.badge-small {
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.badge:empty {
	display: none;
}

.bold {
	font-weight: bold;
}

.display-none {
	display: none !important;
}

#ees {
	float: right;
	opacity: 0.05;
	transition: all 0.4s;
}

#ees:hover {
	opacity: 1.0;
}

.external {
	padding-right: 17px;
	background: transparent url('/images/ext0.png') no-repeat right 60%;
}

.external:hover {
	background: transparent url('/images/ext1.png') no-repeat right 60%;
	text-decoration: underline;
}

.gray {
	color: #AAAAAA;
	background-color: transparent;
}


/* General */

hr {
	margin: 1rem 0 2rem;
}

ul {
	padding: 0 0 0 1rem;
}


/* Headings */

h1, h2, h3, h4, h5, h6 {
	font-family: Neuton, Georgia, "Times New Roman", times, serif;
	color: var(--color-elements-heading);
	margin: 4px 0px;
}

h1.imgrepl {
	margin: 4px 0px 24px 0px;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.6rem;
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-size: 1rem;
}

h5 {
	font-size: 0.9rem;
}

h6 {
	font-size: 0.8rem;
}

.hilite {
	padding: 1px 2px;
	background-color: #FFFF66;
	color: #333333;
}

hr {
	height: 2px;
	color: #990000;
	background-color: #990000;
	border: 1px solid #990000;
}

html {
	height: 100%;
}

.inactive {
	opacity: 0.5;
	transition: all 0.2s;
}

.inactive:hover {
	opacity: unset;
}


/* Form Controls */

label {
	color: color-mix(in srgb, currentColor 60%, transparent);
}

button, input:not([type=button], [type=checkbox], [type=radio], [type=checkbox]), select, textarea {
	margin: 0;
	padding: 0.1rem 0.2rem;
	appearance: none;
	font-family: inherit;
	font-size: 0.9rem;
	border: 0.1rem solid var(--color-foreground-80);
	border-radius: 0.2rem;
}

fieldset {
	border: 0.1rem solid var(--color-foreground-80);
	border-radius: 0.2rem;
}

:is(input, select, textarea)[readonly] {
	color: color-mix(in srgb, var(--color-elements-input-foreground) 80%, var(--color-elements-input-background));
	background-color: color-mix(in srgb, var(--color-elements-input-background) 90%, var(--color-elements-input-foreground));
	border: 0.1rem solid var(--color-foreground-80);
}

input[data-captcha] {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

select {
	position: relative;
	min-width: 2rem;
	padding-right: 1.2rem;
	font-family: inherit;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 140 140" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z" fill="gray" /></g></svg>') no-repeat;
	background-position: right 0.2rem top 60%;
}

optgroup, option {
	font-size: 0.9em;
}

optgroup option {
	font-size: 1em;
}

:disabled {
	opacity: 0.4;
	pointer-events: none;
}

form:invalid [type=submit] {
	opacity: 0.4;
	pointer-events: none;
}

button {
	font-family: inherit;
}

input.button {
	font-size: 0.8rem;
}

.invalid:is(input, select, textarea), :invalid:is(input, select, textarea) {
	border-color: var(--color-status-error);
	background-color: color-mix(in srgb, var(--color-status-error) 20%, var(--color-elements-input-background));
}

::placeholder {
	font-size: 0.8em;
	font-style: italic;
}

/* Switch Toggle */

[type=checkbox].switch {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 1em;
	top: 0.15em;
	margin: 0 0.5em;
	font-size: inherit;
	appearance: none;
	outline: none;
	border: none;
	border-radius: 0.5em;
	background-color: var(--color-background-30);
	transition: all 0.2s;
}

[type=checkbox].switch:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

[type=checkbox].switch:checked {
	border: none;
	background-color: var(--color-elements-accent);
}

[type=checkbox].switch::after {
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0;
	left: 0;
	appearance: none;
	border: none;
	border-radius: 0.5em;
	background-color: var(--color-background-08);
	transition: all 0.2s;
	content: '';
}

[type=checkbox].switch:focus::after {
	box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--color-background-40) 30%, transparent);
}

[type=checkbox].switch:checked::after {
	left: 50%;
	border: none;
	background-color: var(--color-palette-white);
}

[type=checkbox].switch:checked:focus::after {
	box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--color-elements-accent) 40%, transparent);
}


.italic {
	font-style: italic;
}

li {
	list-style-type: square;
}

#message {
	color: #000000;
	background-color: #EEEEEE;
	border-left-color: #FFCC33;
	border-bottom-color: #CCCCCC;
	border-width: 0px 0px 1px 18px;
	border-style: solid;
	padding: 2px 18px;
	margin: 24px 0px;
	position: relative;
	overflow: auto;
}

#message p {
	margin: 0px;
	padding: 6px 0px;
}

#message_close {
	position: absolute;
	top: 4px;
	right: 4px;
}

.mgt {
	float: left;
	margin-right: 16px;
}

.nrw {
	width: 1%;
}

p {
	margin: 0 0 1.2rem 0;
	padding: 0;
}

.pageedit {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
}

#page_review {
	border: 1px dotted #CCCCCC;
}

.photo {
	width: 80px;
	height: 80px;
	float: left;
	margin: 0px 24px 24px 0px;
	text-align: center;
}

.photo_disp img {
	width: 100%;
}

.photo-large {
	position: fixed;
	display: grid;
	place-content: center;
	width: 100vw;
	height: 100vh;
	inset: 0;
	padding: 2rem;
	z-index: 10;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s;
}

.photo-large.active {
	opacity: 1;
	backdrop-filter: blur(0.4rem);
	pointer-events: all;
}

.photo-large > nav {
	position: absolute;
	display: flex;
	justify-content: space-between;
	margin: 1rem;
	align-items: center;
	inset: 0;
}

.photo-large > nav .button-round {
	opacity: 0.6;
}

.photo-large > nav .button-round:hover {
	opacity: 0.2;
}

.photo-large img {
	width: inherit;
	height: inherit;
	max-width: inherit;
	max-height: inherit;
	object-fit: contain;
	aspect-ratio: 1 / 1;
	box-shadow:
		0 1rem 2rem var(--color-elements-shadow),
		0 2rem 4rem var(--color-elements-shadow);
}

#photos-panel > main {
	display: flex;
	flex-direction: column;
}

#photos-panel > main > * {
	padding: 0.8rem;
	overflow: auto;
}

#photos-panel > main[data-view=thumbs] > [data-thumbs] {
	display: block;
	flex: 1 1 auto;
}

#photos-panel > [data-view=thumbs] > [data-thumbs] {
	display: block;
	flex: 1 1 auto;
	padding-bottom: 0;
}

#photos-panel > [data-view=thumbs] > [data-table] {
	overflow: visible;
}

#photos-panel > [data-view=thumbs] > [data-table] table {
	display: none;
}

#photos-panel > [data-view=thumbs] > [data-table] :where(.dataTables_wrapper, .dt_navtop) {
	margin-bottom: 0;
}

#photos-panel > [data-view=table] > [data-thumbs] {
	display: none;
}

#photos-panel > [data-view=table] > [data-table] {
	display: block;
}

#photos-panel > [data-view=split] > [data-thumbs] {
	display: block;
	flex: 1 1 50%;
}

#photos-panel > [data-view=split] > [data-table] {
	display: block;
	flex: 1 1 50%;
}

.picl {
	margin: 0px 16px 16px 0px;
	float: left;
	color: #666666;
	font-size: 0.8rem;
	font-style: italic;
}

.picr {
	margin: 0px 0px 16px 16px;
	float: right;
	color: #666666;
	font-size: 0.8rem;
	font-style: italic;
}

.recordform {
	width: 100%;
	border: #000000 solid 0px;
	border-spacing: 0px;
}

.recordform td, .recordform th {
	margin: 0px;
	padding: 2px 4px;
}

.recordlist {
	border-spacing: 0px;
}

.recordlist a {
	display: block;
	width: 100%;
}

.recordlist input {
	width: 11px;
	height: 11px;
	margin: 2px;
}

.recordlist .sort_col {
	background-color: #E6EDFA;
}

.recordlist td, .recordlist th {
	border: none;
	border-bottom: #DDDDDD solid 1px;
	padding: 2px 4px;
}

.recordlist th {
	color: #FFFFFF;
	background-color: #003366;
	font-weight: bold;
}

.recordlist th a {
	color: #FFFFFF;
}

.recordlist th a:hover {
	color: #CCCCCC;
}

.recordlist th.sort_col {
	background-color: #336699;
}

.recordlist tr:hover {
	color: #FFFFFF;
	background-color: #EEF4FF;
}

.row {
	border-bottom-color: #DDDDDD;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.small-gray:not(.dataTable th) {
	font-size: 0.6rem;
	color: var(--color-foreground-50);
}

.smalltext {
	font-size: 0.8rem;
	color: #666666;
}

.spacer {
	clear: both;
	display: block;
	overflow: hidden;
	height: 0px;
	line-height: 0px;
	font-size: 0;
	content: "&nbsp;";
}

svg {
	/* width: 1rem;
	height: 1rem; */
	fill: currentColor;
}

.dt_navtop {
	margin: 0 0 0.4rem 0;
}

.dataTable tr {
	border-bottom: 0.05rem solid var(--color-background-20);
}

.dataTable td {
	border-bottom: 0.05rem solid var(--color-background-20);
}

/* td {
	max-width: 20rem;
	margin: 0;
	overflow: hidden;
	vertical-align: baseline;
	text-overflow: ellipsis;
	text-align: left;
	border-bottom: 0.05rem solid var(--color-background-20);
}

th {
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
}

th a {
	color: #FFFFFF;
	background-color: transparent;
}

th a:hover {
	color: #CCCCCC;
	background-color: transparent;
} */

textarea {
	width: 100%;
	max-width: 60ch;
	font-family: inherit;
	font-size: 0.8rem;
}

.tdc {
	text-align: center;
	white-space: nowrap;
	vertical-align: top;
}

.tdl {
	text-align: left;
	white-space: nowrap;
	vertical-align: top;
}

.tdr {
	text-align: right;
	white-space: nowrap;
	vertical-align: top;
}

.tdcw {
	text-align: center;
	vertical-align: top;
}

.tdlw {
	text-align: left;
	vertical-align: top;
}

.tdrw {
	text-align: right;
	vertical-align: top;
}

.thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.admin .thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.thumbs[hidden] {
	display: none;
}

/* .thumbs > * {
	width: 8rem;
	height: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
} */

.main .thumb {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 128px;
	height: 128px;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0.6rem;
	transition: all 0.2s;
}

.main .thumbs-large .thumb {
	width: 320px;
	height: 320px;
}

.admin .thumbs-large .thumb {
	width: 320px;
	height: 320px;
}

.admin .thumbs:not(.thumbs-large) [data-thumb-large] {
	display: none;
}

.admin .thumbs.thumbs-large [data-thumb-small] {
	display: none;
}

.main .thumb img {
	box-shadow: 0 1rem 2rem var(--color-elements-shadow);
}

.admin .thumb {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 128px;
	height: 128px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	font-size: 0.6rem;
	background-color: var(--color-background-10);
	transition: all 0.2s;
}

.thumb.selected {
	background-color: var(--color-elements-select);
}

.thumb-image {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
}

.admin .thumbs-large .thumb-image {
	width: 320px;
	height: 320px;
}

.thumb-image [name=ordr] {
	position: absolute;
	top: 0.2rem;
	left: 0.2rem;
	width: 1.4rem;
	padding: 0 0.1rem;
	font-size: 0.6rem;
	text-align: center;
}

.thumb-image .active, .thumb-image .featured {
	position: absolute;
	display: inline-block;
	top: 0.2rem;
	width: 1rem;
	height: 1rem;
	padding: 0.1rem;
	border-radius: 0.2rem;
	background-color: var(--color-background);
}

.thumb-image .active {
	right: 0.2rem;
}

.thumb-image .featured {
	right: 1.4rem;
}

.thumb-caption {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 0;
	padding: 0.2rem;
	overflow: hidden;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: var(--color-background-20);
	opacity: 0;
	transition: all 0.4s;
}

.thumb:hover .thumb-caption {
	opacity: 1;
}

.warning, a.warning {
	color: var(--color-status-error);
}

#www {
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 4px;
}

.caution {
	color: #FF9900;
}

.notice {
	color: #FFCC00;
}

.mceVisualAid {
	border: 1px dotted #BBBBBB !important;
}

svg:is(.icon, .icon10, .icon12) {
	vertical-align: middle;
}

svg.icon {
	width: 0.8em;
	height: 0.8em;
}

svg.icon10 {
	width: 1em;
	height: 1em;
}

svg.icon12 {
	width: 1.2em;
	height: 1.2em;
}


/* Buttons */

button, .button-rect {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.3rem 0.4rem;
	font-size: 0.6rem;
	line-height: normal;
	text-align: center;
	white-space: nowrap;
	color: var(--color-background-20);
	background-color: var(--color-foreground-20);
	border: none;
	border-radius: 0.2rem;
}

.button-rect {
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
}

.button-rect:hover {
	opacity: 0.7;
}

.button-rect.button-small {
	width: auto;
}

.button-rect svg {
	width: 0.8rem;
	height: 0.8rem;
	margin: 0 0.2rem 0 0;
}

.button-rect select {
	appearance: none;
	margin: 0;
	padding: 0;
	color: currentColor;
	background-color: transparent;
	border: none;
	line-height: inherit;
	font-family: inherit;
	font-size: 1em;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}


/* Button Round */

.button-round {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0.4rem;
	font-size: 1.2rem;
	line-height: 0;
	text-align: center;
	appearance: none;
	color: var(--color-foreground);
	background-color: transparent;
	border: none;
	border-radius: 1rem;
	opacity: 0.4;
	visibility: visible;
	transition: all 0.4s;
}

.button-round:hover {
	color: var(--color-background);
	background-color: var(--color-foreground);
	opacity: 0.7;
}

.button-round.active {
	color: var(--color-foreground);
	/* background-color: var(--color-foreground); */
	opacity: 1;
}

.button-round.active:hover {
	color: var(--color-foreground);
	background-color: var(--color-background-20);
	opacity: 1;
}

.button-round.dirty {
	color: var(--color-elements-accent);
}

.button-round svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: all 0.4s;
}

.button-small {
	position: relative;
	/* display: inline-flex; */
	width: 1.2rem;
	height: 1.2rem;
	padding: 0.2rem;
}

.button-small svg {
	width: 0.8rem;
	height: 0.8rem;
}

.button-round.button-small.button-text {
	padding: 0.2rem;
	font-size: 0.7rem;
	line-height: 1.2;
}

.button-round.button-reversed {
	color: var(--color-background);
	background-color: var(--color-foreground);
	opacity: 0.2;
}

.button-round.button-reversed:hover {
	opacity: 0.7;
}

.button-round.button-solid {
	color: var(--color-background);
	background-color: var(--color-foreground);
	opacity: 1;
}

.button-round.button-reversed:hover {
	opacity: 0.6;
}


/* Button Open */

.button-open {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 0;
	vertical-align: middle;
	appearance: none;
	color: var(--color-foreground);
	background-color: transparent;
	border: none;
	opacity: 0.4;
	visibility: visible;
	transition: all 0.4s;
}

.button-open:hover {
	color: var(--color-foreground);
	opacity: 1;
}

.button-open:focus {
	color: var(--color-foreground);
	opacity: 1;
	outline: none;
}

.button-open.active {
	color: var(--color-foreground);
}

.button-open.active:hover {
	color: var(--color-background-20);
}

.button-open.dirty {
	color: var(--color-elements-accent);
}

.button-open svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: currentColor;
	transition: all 0.4s;
}


/* Modals */

.modal {
	position: fixed;
	display: flex;
	flex-direction: column;
	top: 1.5rem;
	bottom: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	min-height: 8rem;
	overflow: hidden;
	z-index: 6;
	font-family: var(--font-family-emoji), var(--font-family-hebrew), var(--font-family-greek), var(--font-family-interface), 'Fira Sans Condensed', 'Fira Sans', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-foreground);
	background-color: var(--color-background);
	border-radius: 0.2rem;
	box-shadow: 0 1rem 2rem var(--color-elements-shadow);
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
	visibility: hidden;
	transition: all 0.4s;
}

.modals-fill-screen .modal:not(.modal-small) {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 0;
}

.modal.modal-small {
	max-width: 20rem;
	max-height: 20rem;
	margin: 0 auto;
}

.modal.modal-content {
	max-width: 20rem;
	height: auto;
	bottom: auto;
}

.panel-enable, .panel-flip, .toggle-enable {
	display: none;
}

.toggle-enable + .panel-inline {
	display: none;
	margin: 0;
	pointer-events: none;
	transition: all 0.4s;
}

.toggle-enable:checked + .panel-inline {
	display: block;
	margin: 0.6rem 0 1.2rem 0;
	clear: both;
	pointer-events: all;
}

.panel-enable + .panel {
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
}

.panel-enable:checked + .panel {
	opacity: 1;
	pointer-events: all;
}

.panel-enable + label {
	position: fixed;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 4;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--color-elements-shadow);
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
}

.panel-enable:checked + label {
	opacity: 0.6;
	pointer-events: all;
}

.panel-enable:checked + label + .modal,
.panel-enable:checked + label + .modal + .modal {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1.0) rotateY(0deg);
	visibility: visible;
	transition: opacity 0.4s, transform 0.4s, visibility 0s;
}

.modal-flip {
	transform: rotateY(0deg);
	backface-visibility: hidden;
}

.modal-flip + .modal-flip {
	transform: rotateY(-180deg);
	z-index: 5;
}

.panel-flip + .panel-enable + label + .modal-flip {
	transform: scale(1.0) rotateY(0deg);
}

.panel-flip + .panel-enable + label + .modal-flip + .modal-flip {
	transform: scale(1.0) rotateY(-180deg);
}

.panel-flip:checked + .panel-enable + label + .modal-flip {
	transform: scale(1.0) rotateY(180deg);
}

.panel-flip:checked + .panel-enable + label + .modal-flip + .modal-flip {
	transform: scale(1.0) rotateY(0deg);
}

.modal > * {
	transition: color 1s, background-color 1s;
}

.modal > :is(header, footer) {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 2.4rem;
	padding: 0 0.8rem;
	overflow: auto;
	background-color: var(--color-background-10);
}

.modal > header {
	gap: 0.8rem;
	justify-content: space-between;
	border-bottom: 0.06rem dotted var(--color-foreground);
}

.modal > header > :is(h1, h2, h3, h4, h5, h6) {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 0.4rem;
	flex: 1 1 auto;
	overflow: auto;
	white-space: nowrap;
}

.modal > header > label[data-shortcutkey] {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 0.2em;
	flex-basis: auto;
	overflow: auto;
	white-space: nowrap;
	font-size: 0.8em;
	font-weight: normal;
	opacity: 0.7;
}

.modal > header > label[data-shortcutkey]:hover {
	opacity: 1;
}

.modal > footer {
	/* justify-content: flex-end; */
	/* BUG with above; fix with below */
	flex-direction: row-reverse;
	border-top: 0.06rem dotted var(--color-foreground);
}

.modal > footer svg {
	vertical-align: middle;
}

.modal > main {
	flex: 1 1 auto;
	padding: 0.8rem;
	overflow: auto;
	background-color: var(--color-background);
	outline: none;
}

.modal > main.nopad {
	padding: 0;
}

/* .modal :is(header, footer) > * {
	flex: 0 1 auto;
} */


/* Sidebars */

nav.sidebar {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	top: 0;
	bottom: 0;
	width: 3rem;
	padding: 0.5rem;
	overflow: hidden auto;
	z-index: 6;
	font-family: var(--font-family-emoji), var(--font-family-hebrew), var(--font-family-greek), var(--font-family-interface), 'Fira Sans Condensed', 'Fira Sans', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	background-color: var(--color-background);
	opacity: 0;
	transition: all 0.4s;
}

/* will not be visible with element overflow hidden */
nav.sidebar[data-label]::after {
	position: absolute;
	top: 0;
	padding: 0.1rem 0.6rem;
	font-family: var(--font-family-interface);
	font-size: 0.6rem;
	background-color: var(--color-background);
	white-space: nowrap;
	transition: all 0.4s;
	content: attr(data-label);
}

nav.sidebar-left {
	left: -3rem;
	box-shadow: 1rem 0 4rem var(--color-elements-shadow);
}

nav.sidebar-left[data-label]::after {
	left: 0;
	transform-origin: top left;
	transform: rotate(90deg);
}

nav.sidebar-right {
	right: -3rem;
	box-shadow: -1rem 0 4rem var(--color-elements-shadow);
}

nav.sidebar-right[data-label]::after {
	right: 0;
	transform-origin: top right;
	transform: rotate(-90deg);
}

nav.sidebar-reverse {
	flex-direction: column-reverse;
}

.panel-enable:checked + label + nav.sidebar-left {
	left: 0;
	opacity: 1;
}

.panel-enable:checked + label + nav.sidebar-left[data-label]::after {
	left: 4.2rem;
}

.panel-enable:checked + label + nav.sidebar-right {
	right: 0;
	opacity: 1;
}

.panel-enable:checked + label + nav.sidebar-right[data-label]::after {
	right: 4.2rem;
}


/* Flex stuff */

.flex-fill {
	flex: 1 1 auto;
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 1rem;
	margin: 0 0 1rem;
}

.flex-row > * {
	flex: 0 0 auto;
}

.flex-start {
	justify-content: flex-start;
}

.flex-end {
	justify-content: flex-end;
}

.flex-full {
	justify-content: space-between;
}

.flex-wrap {
	flex-wrap: wrap;
}


/* Status */

.status-info {
	color: var(--color-palette-white);
	background-color: var(--color-status-info);
}

.status-success {
	color: var(--color-palette-white);
	background-color: var(--color-status-success);
}

.status-warning {
	color: var(--color-palette-white);
	background-color: var(--color-status-warning);
}

.status-error {
	color: var(--color-palette-white);
	background-color: var(--color-status-error);
}


table.dataTable thead .header-filter {
	background-color: transparent;
}

table.dataTable thead .header-filter td {
	background-color: transparent;
}

table.dataTable thead .header-filter select {
	width: 100%;
	font-size: 0.7rem;
	text-overflow: ellipsis;
	border: none;
	background-color: transparent;
}

table.dataTable thead .header-filter option {
	font-size: 0.9em;
}


/* Media Queries */

@media only screen and (min-width: 320px) and (max-width: 479px) {

	:root {
		--screen-size: 320px;
	}

	html {
		font-size: 12px;
	}

}

@media only screen and (min-width: 480px) and (max-width: 799px) {

	:root {
		--screen-size: 480px;
	}

	html {
		font-size: 16px;
	}

}

@media only screen and (min-width: 800px) and (max-width: 1023px) {

	:root {
		--screen-size: 800px;
	}

	html {
		font-size: 18px;
	}

}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

	:root {
		--screen-size: 1024px;
	}

}

@media only screen and (min-width: 1280px) and (max-width: 1439px) {

	:root {
		--screen-size: 1280px;
	}

}

@media only screen and (min-width: 1440px) and (max-width: 2559px) {

	:root {
		--screen-size: 1440px;
	}

}