@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-Book.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-Oblique.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-Medium.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-MediumOblique.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-MediumOblique.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-Black.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-BlackOblique.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-BlackOblique.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-Light.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../fonts/AvenirLTStd-LightOblique.woff2') format('woff2'),
		url('../fonts/AvenirLTStd-LightOblique.woff') format('woff');
	font-weight: 300;	
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WHLogo';
	src: url('../fonts/Ango.woff2') format('woff2'),
		url('../fonts/Ango.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WHLogo';
	src: url('../fonts/Ango-Italica.woff2') format('woff2'),
		url('../fonts/Ango-Italica.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WHHeading';
	src: url('../fonts/varelaround-regular.woff2') format('woff2'),
		url('../fonts/varelaround-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--bible-color1: hsl(21, 62%, 37%);
	--bible-color1-dark: hsl(21, 75%, 22%);
	--bible-color1-light: hsl(21, 55%, 48%);
	--bible-color1-ultradark: hsl(21, 75%, 9%);
	--bible-color1-ultralight: hsl(21, 55%, 68%);
	--bible-color1-lightest: hsl(21, 55%, 92%);
	--bible-color1-faint: hsl(21, 55%, 42%, 0.5);
	--bible-color1-fainter: hsl(21, 55%, 42%, 0.3);
	--bible-color1-megafaint: hsl(21, 55%, 42%, 0.1);

	--bible-color2: hsl(30, 81%, 47%);
	--bible-color2-dark: hsl(30, 100%, 28%);
	--bible-color2-light: hsl(30, 81%, 61%);
	--bible-color2-ultradark: hsl(30, 100%, 9%);
	--bible-color2-ultralight: hsl(30, 81%, 73%);
	--bible-color2-lightest: hsl(30, 81%, 92%);
	--bible-color2-faint: hsl(30, 81%, 38%, 0.5);
	--bible-color2-fainter: hsl(30, 81%, 38%, 0.3);
	--bible-color2-megafaint: hsl(30, 81%, 38%, 0.1);

	--bible-color3: hsl(2, 77%, 45%);
	--bible-color3-dark: hsl(2, 77%, 31%);
	--bible-color3-light: hsl(2, 77%, 59%);
	--bible-color3-ultradark: hsl(2, 77%, 10%);
	--bible-color3-ultralight: hsl(2, 77%, 77%);
	--bible-color3-lightest: hsl(2, 77%, 95%);
	--bible-color3-faint: hsl(2, 77%, 46%, 0.5);
	--bible-color3-fainter: hsl(2, 77%, 46%, 0.3);
	--bible-color3-megafaint: hsl(2, 77%, 46%, 0.1);

	--bible-color4: hsl(310, 46%, 38%);
	--bible-color4-dark: hsl(310, 46%, 26%);
	--bible-color4-light: hsl(310, 46%, 54%);
	--bible-color4-ultradark: hsl(310, 46%, 11%);
	--bible-color4-ultralight: hsl(310, 46%, 74%);
	--bible-color4-lightest: hsl(310, 46%, 93%);
	--bible-color4-faint: hsl(310, 46%, 44%, 0.5);
	--bible-color4-fainter: hsl(310, 46%, 44%, 0.3);
	--bible-color4-megafaint: hsl(310, 46%, 44%, 0.1);
		
	--bible-color5: hsl(233, 40%, 45%);
	--bible-color5-dark: hsl(233, 40%, 28%);
	--bible-color5-light: hsl(233, 40%, 65%);
	--bible-color5-ultradark: hsl(233, 40%, 11%);
	--bible-color5-ultralight: hsl(233, 40%, 81%);
	--bible-color5-lightest: hsl(233, 40%, 94%);
	--bible-color5-faint: hsl(233, 40%, 47%, 0.5);
	--bible-color5-fainter: hsl(233, 40%, 47%, 0.3);
	--bible-color5-megafaint: hsl(233, 40%, 47%, 0.1);

	--bible-color6: hsl(190, 100%, 33%);
	--bible-color6-dark: hsl(190, 100%, 23%);
	--bible-color6-light: hsl(190, 100%, 43%);
	--bible-color6-ultradark: hsl(190, 100%, 7%);
	--bible-color6-ultralight: hsl(190, 100%, 75%);
	--bible-color6-lightest: hsl(190, 100%, 92%);
	--bible-color6-faint: hsl(190, 100%, 29%, 0.5);
	--bible-color6-fainter: hsl(190, 100%, 29%, 0.3);
	--bible-color6-megafaint: hsl(190, 100%, 29%, 0.1);

	--bible-color7: hsl(154, 100%, 25%);
	--bible-color7-dark: hsl(154, 100%, 15%);
	--bible-color7-light: hsl(154, 100%, 30%);
	--bible-color7-ultradark: hsl(154, 100%, 7%);
	--bible-color7-ultralight: hsl(154, 100%, 72%);
	--bible-color7-lightest: hsl(154, 100%, 90%);
	--bible-color7-faint: hsl(154, 100%, 28%, 0.5);
	--bible-color7-fainter: hsl(154, 100%, 28%, 0.3);
	--bible-color7-megafaint: hsl(154, 100%, 28%, 0.1);

	--bible-color8: hsl(79, 70%, 39%);
	--bible-color8-dark: hsl(79, 70%, 27%);
	--bible-color8-light: hsl(79, 70%, 45%);
	--bible-color8-ultradark: hsl(79, 70%, 9%);
	--bible-color8-ultralight: hsl(79, 70%, 70%);
	--bible-color8-lightest: hsl(79, 70%, 90%);
	--bible-color8-faint: hsl(79, 70%, 34%, 0.5);
	--bible-color8-fainter: hsl(79, 70%, 34%, 0.3);
	--bible-color8-megafaint: hsl(79, 70%, 34%, 0.1);

	--highlight-color: hsl(195, 100%, 50%);
	--highlight-color-dark: hsl(195, 100%, 35%);
	--highlight-color-light: hsl(195, 100%, 55%);
	--highlight-color-complementary: hsl(2, 37%, 57%);
	--highlight-color-complementary-faint: hsl(2, 37%, 57% / 0.5);
	
	--woj-color: hsl(2, 90%, 75%);
	
	--wh-color1: hsl(195, 100%, 60%);
	--wh-color1-dark: hsl(195, 100%, 45%);

	--wh-color2: hsl(154, 50%, 50%);
	--wh-color2-dark: hsl(154, 53%, 32%);

	--wh-color3: hsl(18, 30%, 70%);
	--wh-color3-dark: hsl(18, 30%, 50%);

	--bs-body-bg: hsl(212, 10%, 12%);
	--bs-body-bg-film: hsl(212, 10%, 12%, 98%);

	font-family: 'Avenir';
}

html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	font-family: 'Avenir';
	font-size: 17px;
}

.bible-color1.color-fg {
	color: var(--bible-color1);
}
.bible-color1.color-bg {
	background-color: var(--bible-color1);
}
.bible-color1-dark.color-fg {
	color: var(--bible-color1-dark);
}
.bible-color1-dark.color-bg {
	background-color: var(--bible-color1-dark);
}
.bible-color1-light.color-fg {
	color: var(--bible-color1-light);
}
.bible-color1-light.color-bg {
	background-color: var(--bible-color1-light);
}

.bible-color2.color-fg {
	color: var(--bible-color2);
}
.bible-color2.color-bg {
	background-color: var(--bible-color2);
}
.bible-color2-dark.color-fg {
	color: var(--bible-color2-dark);
}
.bible-color2-dark.color-bg {
	background-color: var(--bible-color2-dark);
}
.bible-color2-light.color-fg {
	color: var(--bible-color2-light);
}
.bible-color2-light.color-bg {
	background-color: var(--bible-color2-light);
}

.bible-color3.color-fg {
	color: var(--bible-color3);
}
.bible-color3.color-bg {
	background-color: var(--bible-color3);
}
.bible-color3-dark.color-fg {
	color: var(--bible-color3-dark);
}
.bible-color3-dark.color-bg {
	background-color: var(--bible-color3-dark);
}
.bible-color3-light.color-fg {
	color: var(--bible-color3-light);
}
.bible-color3-light.color-bg {
	background-color: var(--bible-color3-light);
}

.bible-color4.color-fg {
	color: var(--bible-color4);
}
.bible-color4.color-bg {
	background-color: var(--bible-color4);
}
.bible-color4-dark.color-fg {
	color: var(--bible-color4-dark);
}
.bible-color4-dark.color-bg {
	background-color: var(--bible-color4-dark);
}
.bible-color4-light.color-fg {
	color: var(--bible-color4-light);
}
.bible-color4-light.color-bg {
	background-color: var(--bible-color4-light);
}

.bible-color5.color-fg {
	color: var(--bible-color5);
}
.bible-color5.color-bg {
	background-color: var(--bible-color5);
}
.bible-color5-dark.color-fg {
	color: var(--bible-color5-dark);
}
.bible-color5-dark.color-bg {
	background-color: var(--bible-color5-dark);
}
.bible-color5-light.color-fg {
	color: var(--bible-color5-light);
}
.bible-color5-light.color-bg {
	background-color: var(--bible-color5-light);
}

.bible-color6.color-fg {
	color: var(--bible-color6);
}
.bible-color6.color-bg {
	background-color: var(--bible-color6);
}
.bible-color6-dark.color-fg {
	color: var(--bible-color6-dark);
}
.bible-color6-dark.color-bg {
	background-color: var(--bible-color6-dark);
}
.bible-color6-light.color-fg {
	color: var(--bible-color6-light);
}
.bible-color6-light.color-bg {
	background-color: var(--bible-color6-light);
}

.bible-color7.color-fg {
	color: var(--bible-color7);
}
.bible-color7.color-bg {
	background-color: var(--bible-color7);
}
.bible-color7-dark.color-fg {
	color: var(--bible-color7-dark);
}
.bible-color7-dark.color-bg {
	background-color: var(--bible-color7-dark);
}
.bible-color7-light.color-fg {
	color: var(--bible-color7-light);
}
.bible-color7-light.color-bg {
	background-color: var(--bible-color7-light);
}

.bible-color8.color-fg {
	color: var(--bible-color8);
}
.bible-color8.color-bg {
	background-color: var(--bible-color8);
}
.bible-color8-dark.color-fg {
	color: var(--bible-color8-dark);
}
.bible-color8-dark.color-bg {
	background-color: var(--bible-color8-dark);
}
.bible-color8-light.color-fg {
	color: var(--bible-color8-light);
}
.bible-color8-light.color-bg {
	background-color: var(--bible-color8-light);
}

.wh1-txt {
	color: var(--wh-color1);
}
.wh2-txt {
	color: var(--wh-color2);
}
.wh3-txt {
	color: var(--wh-color3);
}

.wh1-bg {
	background-color: var(--wh-color1-dark);
}
.wh2-bg {
	background-color: var(--wh-color2-dark);
}
.wh3-bg {
	background-color: var(--wh-color3-dark);
}

.ltr {
	direction: ltr;
}

.rtl {
	direction: rtl;
}

.bi::before, [class*=" bi-"]::before, [class^="bi-"]::before {
	line-height: 1em;
	vertical-align: -0.23em;
}

/* get rid of ugly Bootstrap focus borders */
*:focus {
	box-shadow: none !important;
}

.off {
	display: none !important;
	transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.fadeable {
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

/* need #IDs here because id beats classes in selector specificity */
#audio-player.fadeable.invisible,
#selection-toolbar.fadeable.invisible {
	display: none;
}

.fadeable.visible {
	opacity: 1;
}

.fade-toggle {
	cursor: pointer;
}

.draggable {
	position: fixed;

	.move-handle {
		cursor: grab;
		padding-left: 0.05em;
		padding-right: 0.05em;
	}
}

.highlight {
	transition: background-color 0.3s ease-in-out, font-weight: 0.3s ease-in-out, -webkit-text-stroke 0.3s ease-in-out;
	-webkit-text-stroke: 0.05em white;
	/*background-color: var(--bible-color1-fainter);*/

	.verse-number {
		color: var(--highlight-color);
		-webkit-text-stroke: 0.05em var(--highlight-color);
	}
}

.selected {
	transition: background-color 0.3s ease-in-out;
	background-color: var(--bible-color8-fainter);
	text-shadow: none;
}

html[data-bs-theme="light"] {
	--woj-color: hsl(2, 90%, 36%);
	--bs-body-bg: hsl(212, 10%, 100%);
	--bs-body-bg-film: hsl(212, 10%, 100%, 98%);

	.logo .logo-word {
		color: var(--wh-color1-dark);
	}

	.logo svg #word-outer {
		fill: var(--wh-color1-dark);
	}

	.logo .logo-hide {
		color: var(--wh-color2-dark);
	}

	.logo svg #hide-outer {
		fill: var(--wh-color2-dark);
	}

	.navbar {
		background-color: rgba(255, 255, 255, 1);
	}

	.nav-link:hover {
		background-color: var(--highlight-color);
	}

	#books-nav-link.nav-link:hover, #books-nav-link.nav-link.show {
		background-color: var(--bible-color3-light);
	}

	#translations-nav-link.nav-link:hover, #translations-nav-link.nav-link.show {
		background-color: var(--bible-color6-light);
	}

	#lists-nav-link.nav-link:hover, #lists-nav-link.nav-link.show {
		background-color: var(--bible-color8-light);
	}

	#audio-nav-link.nav-link:hover, #audio-nav-link.nav-link.show {
		background-color: var(--bible-color2-light);
	}

	#settings-nav-link.nav-link:hover, #settings-nav-link.nav-link.show {
		background-color: var(--bible-color4-light);
	}

	.pagers {
		text-shadow: none;
	}

	.controls svg {
		filter: none;
	}

	.scroll-text {
		text-shadow: none;
	}

	.prev-text:hover,
	.next-text:hover,
	.scroll-text:hover {
		text-shadow: 0 0 0.25em var(--highlight-color-complementary), 0 0 0.45em var(--highlight-color-complementary);
	}

	.verse-number {
		color: var(--highlight-color-dark);
	}

	.highlight {
		-webkit-text-stroke: 0.05em var(--bs-body-color);

		.verse-number {
			color: var(--highlight-color-dark);
			-webkit-text-stroke: 0.05em var(--highlight-color-dark);
		}
	}

	#selection-toolbar,
	#audio-player {
		box-shadow: none;
	}

	#modal-books-list .modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color3) 70%, var(--bible-color3));
	}

	#modal-translations-list .modal-header,
	#modal-translation-info .modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color6) 70%, var(--bible-color6));
	}

	#modal-settings .modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color4) 70%, var(--bible-color4));
	}

	#modal-settings .modal-body h3 {
		background-color: var(--bible-color4-light);
	}

	#modal-settings .accordion-button {
		&.collapsed {
			color: var(--bible-color4);
			background-color: transparent;

			&::after {
				background-color: var(--bible-color4);
			}
			
			&:hover {
				background-color: var(--bible-color4-light);
				color: var(--bible-color4-lightest);

				&::after {
					background-color: var(--bible-color4-lightest);
				}
			}
		}
	}
}

html[data-bs-theme="dark"] {
	.navbar {
		background-color: var(--bs-body-bg);
	}

	.chapter-text,
	.chapter-indicator {
		text-shadow: 0 0 0.3em rgba(0, 0, 0, 1), 0 0 0.3em rgba(0, 0, 0, 1);
	}
}

header,
footer {
	position: sticky;
	flex-shrink: 0;
	z-index: 100;
	left: 0;
}

header {
	top: 0;
}

footer {
	bottom: 0;
}

#nav-top {
	padding: 0.5em 0 0.4em 0;
}

#nav-top .navbar-nav {
	width: 100%;
}

.menu-title {
	display: none;
	margin-left: 0.3em;
}

.navbar-brand {
	margin-right: 0;
}

.logo {
	position: relative;
	font-family: 'WHLogo';
	text-transform: lowercase;
	font-size: 1.15em;
	width: 6.5em;
	display: inline-block;
	text-align: center;
	transition: transform 1s ease-in-out;
}

.logo svg {
	height: 1.6em;
	padding-left: 0.4em;
	vertical-align: -0.38em;
	transition: -webkit-transform 1s ease-in-out, -ms-transform 1s ease-in-out, transform 1s ease-in-out;
	-webkit-transform: rotate(-90deg) scale(0.8) translate(-0.2em, 0.65em);
	-ms-transform: rotate(-90deg) scale(0.8) translate(-0.2em, 0.65em);
	transform: rotate(-90deg) scale(0.8) translate(-0.2em, 0.65em);
}

.logo:hover svg {
	-webkit-transform: rotate(0deg) scale(1.0) translate(0em);
	-ms-transform: rotate(0deg) scale(1.0) translate(0em);
	transform: rotate(0deg) scale(1.0) translate(0em);
}

.nav-link {
	border-radius: 0.4em;
	cursor: pointer;
}

.navbar-expand .navbar-nav .nav-link {
	padding: 0.45em 0.7em;
	border-radius: 0.4em;
	transition: background-color 0.2s ease-in-out;
}

.nav-link:hover {
	background-color: var(--highlight-color-dark);
}

.nav-link.show[aria-expanded="true"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#books-nav-link.nav-link:hover,
#books-nav-link.nav-link.show {
	background-color: var(--bible-color3);
}

#translations-nav-link.nav-link:hover,
#translations-nav-link.nav-link.show {
	background-color: var(--bible-color6);
}

#lists-nav-link.nav-link:hover,
#lists-nav-link.nav-link.show {
	background-color: var(--bible-color8);
}

#audio-nav-link.nav-link:hover,
#audio-nav-link.nav-link.show {
	background-color: var(--bible-color2);
}

#settings-nav-link.nav-link:hover,
#settings-nav-link.nav-link.show {
	background-color: var(--bible-color4);
}

.dropdown-toggle::after {
	display: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'WHHeading';
	break-inside: avoid;
}

.hidden {
	visibility: hidden;
}

.inline-wordhide-logo {
	height: 1.3em;
	margin: -0.3em 0;
	vertical-align: 0;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
	/* overrides Bootstrap defaults so hamburger menu isn't so big */
	font-size: 0.8em;
}

.books-wrapper {
	width: 100%;
	position: relative;
}

.books {
	position: relative;
	width: 100%;
	min-width: 24em;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	flex: 1 1 auto;
	font-size: 0.85em;
}

.book-column {
	position: relative;
	display: inline-block;
	height: auto;
	flex: 1 1 auto;
}

.book,
.translation {
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.translation {
	display: flex;
	padding: 0.5em 0.7em;

	.span {
		display: inline-block;
	}

	.translation-name {
		flex-grow: 1;
		overflow-wrap: break-word;
	}

	.translation-short-name {
		flex-grow: 0;
		font-weight: bold;
		font-size: 0.92em;
		margin-left: 0.8em;
		text-align: right;
		/*text-shadow: 0 0 0.45em rgba(0, 0, 0, 1), 0 0 0.3em rgba(0, 0, 0, 1);*/
	}

	.language-name {
		flex-grow: 0;
		margin-left: 0.8em;
		text-align:right;
		width: 6em;

		.badge {
			color: white;
			width: 8.5em;
			white-space: wrap;
			overflow-wrap: break-word;
			vertical-align: 10%;
		}
	}

	&.bible-color1 {
		background-color: var(--bible-color1-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color1-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color1-faint);
		}

		.translation-name {
			color: var(--bible-color1-light);
		}

		.translation-short-name {
			color: var(--bible-color1);
		}

		.badge {
			background-color: var(--bible-color1);
		}
	}

	&.bible-color2 {
		background-color: var(--bible-color2-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color2-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color2-faint);
		}

		.translation-name {
			color: var(--bible-color2-light);
		}

		.translation-short-name {
			color: var(--bible-color2);
		}

		.badge {
			background-color: var(--bible-color2);
		}
	}

	&.bible-color3 {
		background-color: var(--bible-color3-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color3-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color3-faint);
		}

		.translation-name {
			color: var(--bible-color3-light);
		}

		.translation-short-name {
			color: var(--bible-color3);
		}

		.badge {
			background-color: var(--bible-color3);
		}
	}

	&.bible-color4 {
		background-color: var(--bible-color4-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color4-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color4-faint);
		}

		.translation-name {
			color: var(--bible-color4-light);
		}

		.translation-short-name {
			color: var(--bible-color4);
		}

		.badge {
			background-color: var(--bible-color4);
		}
	}

	&.bible-color5 {
		background-color: var(--bible-color5-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color5-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color5-faint);
		}

		.translation-name {
			color: var(--bible-color5-light);
		}

		.translation-short-name {
			color: var(--bible-color5);
		}

		.badge {
			background-color: var(--bible-color5);
		}
	}

	&.bible-color6 {
		background-color: var(--bible-color6-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color6-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color6-faint);
		}

		.translation-name {
			color: var(--bible-color6-light);
		}

		.translation-short-name {
			color: var(--bible-color6);
		}

		.badge {
			background-color: var(--bible-color6);
		}
	}

	&.bible-color7 {
		background-color: var(--bible-color7-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color7-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color7-faint);
		}

		.translation-name {
			color: var(--bible-color7-light);
		}

		.translation-short-name {
			color: var(--bible-color7);
		}

		.badge {
			background-color: var(--bible-color7);
		}
	}

	&.bible-color8 {
		background-color: var(--bible-color8-megafaint);

		&:hover,
		&.active {
			background-color: var(--bible-color8-faint);

			.translation-name {
				color: white;
			}
		}

		&.last {
			border-bottom: 0.05em solid var(--bible-color8-faint);
		}

		.translation-name {
			color: var(--bible-color8-light);
		}

		.translation-short-name {
			color: var(--bible-color8);
		}

		.badge {
			background-color: var(--bible-color8);
		}
	}

}

.book {
	padding: 0.3em 0.7em;
	display: block;
	color: white;
}

.book.active {
	font-size: 1.25em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.lists a.active {
	background-color: var(--highlight-color-dark);
}

.book {
	&.bible-color1 {
		text-shadow: 0 0 0.25em var(--bible-color1-dark), 0 0 0.5em var(--bible-color1-dark);
		&:hover {
			background-color: var(--bible-color1-dark);
		}
	}
	&.bible-color2 {
		text-shadow: 0 0 0.25em var(--bible-color2-dark), 0 0 0.5em var(--bible-color2-dark);
		&:hover {
			background-color: var(--bible-color2-dark);
		}
	}
	&.bible-color3 {
		text-shadow: 0 0 0.25em var(--bible-color3-dark), 0 0 0.5em var(--bible-color3-dark);
		&:hover {
			background-color: var(--bible-color3-dark);
		}
	}
	&.bible-color4 {
		text-shadow: 0 0 0.25em var(--bible-color4-dark), 0 0 0.5em var(--bible-color4-dark);
		&:hover {
			background-color: var(--bible-color4-dark);
		}
	}
	&.bible-color5 {
		text-shadow: 0 0 0.25em var(--bible-color5-dark), 0 0 0.5em var(--bible-color5-dark);
		&:hover {
			background-color: var(--bible-color5-dark);
		}
	}
	&.bible-color6 {
		text-shadow: 0 0 0.25em var(--bible-color6-dark), 0 0 0.5em var(--bible-color6-dark);
		&:hover {
			background-color: var(--bible-color6-dark);
		}
	}
	&.bible-color7 {
		text-shadow: 0 0 0.25em var(--bible-color7-dark), 0 0 0.5em var(--bible-color7-dark);
		&:hover {
			background-color: var(--bible-color7-dark);
		}
	}
	&.bible-color8 {
		text-shadow: 0 0 0.25em var(--bible-color8-dark), 0 0 0.5em var(--bible-color8-dark);
		&:hover {
			background-color: var(--bible-color8-dark);
		}
	}
}

.book.active:hover,
.back-to-books:hover + .books .book.active {
	&.bible-color1 {
		background-color: var(--bible-color1-light);
	}
	&.bible-color2 {
		background-color: var(--bible-color2-light);
	}
	&.bible-color3 {
		background-color: var(--bible-color3-light);
	}
	&.bible-color4 {
		background-color: var(--bible-color4-light);
	}
	&.bible-color5 {
		background-color: var(--bible-color5-light);
	}
	&.bible-color6 {
		background-color: var(--bible-color6-light);
	}
	&.bible-color7 {
		background-color: var(--bible-color7-light);
	}
	&.bible-color8 {
		background-color: var(--bible-color8-light);
	}
}

.back-to-books {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 1;
	font-size: 0.9em;
	color: white;
	cursor: pointer;
	display: none;
}

.back {
	float: right;
	padding: 0.45em 0.6em;
}

.chapters {
	display: none;
	flex-flow: row wrap;
	justify-content: flex-start;
	flex: 0 1 auto;
	width: 100%;
	padding: 0.35em;

	&::after {
		content: '';
		flex-grow: 1000000000;
	}

	&.bible-color1-dark .chapter:hover {
		background-color: var(--bible-color1);
	}
	&.bible-color2-dark .chapter:hover {
		background-color: var(--bible-color2);
	}
	&.bible-color3-dark .chapter:hover {
		background-color: var(--bible-color3);
	}
	&.bible-color4-dark .chapter:hover {
		background-color: var(--bible-color4);
	}
	&.bible-color5-dark .chapter:hover {
		background-color: var(--bible-color5);
	}
	&.bible-color6-dark .chapter:hover {
		background-color: var(--bible-color6);
	}
	&.bible-color7-dark .chapter:hover {
		background-color: var(--bible-color7);
	}
	&.bible-color8-dark .chapter:hover {
		background-color: var(--bible-color8);
	}
}

.chapter {
	flex: 0 0 2.75em;
	padding: 0.4em 0;
	border-radius: 0.35em;
	color: white;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	display: inline-block;
	text-align: center;
	transition: background-color 0.2s;
}

span.chapter {
	height: 0;
	padding: 0;
	margin: 0;
}

.chapters.bible-color1-dark .chapter:hover {
	background-color: var(--bible-color1);
}

main {
	flex: 1;
	position: relative;
	padding: 2em 3em 1em 3em;
	overflow-x: auto;
	overflow-y: hidden;
}

.controls {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-flow: row nowrap;
	flex-grow: 10000;

	> span {
		display: inline-block;
	}
}

.scrollers {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	flex-grow: 10000;
}

.scroll-icon {
	margin: 0 0.45em;
	cursor: pointer;

	&.open {
		.top-line {
			x: 11.25%;
			width: 77.5%;
		}

		.bottom-line {
			x: 6.5%;
			width: 86.5%;
		}

		.text-clipper-rect {
			x: -12.5%;
			width: 74%;
		}
	}

	&.ll-scroll .scroll-icon-left,
	&.open .scroll-icon-left {
		transform: translate(-0.5em, 0);
	}

	&.l-scroll .scroll-icon-left {
		transform: translate(-0.15em, 0);
	}

	&.r-scroll .scroll-icon-right {
		transform: translate(0.15em, 0);
	}

	&.rr-scroll .scroll-icon-right,
	&.open .scroll-icon-right {
		transform: translate(0.5em, 0);
	}

	svg {
		font-size: 0.88em;
		height: 3em;
		vertical-align: -64%;
		filter: drop-shadow(0 0 0.1em rgb(0, 0, 0)) drop-shadow(0 0 0.1em rgb(0, 0, 0));
		opacity: 0.6;
		transition: opacity 0.2s ease-in-out;

		path,
		rect {
			transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
			fill: var(--highlight-color-complementary);
		}

		g {
			transition: transform 0.25s ease-in-out;
		}
	}
}

.scroll-text {
	z-index: 1;
	position: relative;
	font-size: 0.8em;
	text-align: center;
	color: var(--highlight-color-complementary);
	text-shadow: 0 0 0.1em rgba(0, 0, 0, 1), 0 0 0.05em rgba(0, 0, 0, 1);
	opacity: 0.6;
	cursor: pointer;
	padding: 0.4em;
	transition: opacity 0.2s ease-in-out;

	i.bi {
		font-size: 1.4em;
		display: inline-block;
	}
}

.scroll-icon:hover svg,
.scroll-text:hover {
	opacity: 1;
}

#scroll-text-left {
	left: 0.3em;
}

#scroll-text-right {
	right: 0.3em;
}

.prev-text,
.next-text {
	position: relative;
	
	svg {
		width: 1.4em;
		height: 1.4em;
		filter: drop-shadow(0 0 0.1em rgb(0, 0, 0)) drop-shadow(0 0 0.1em rgb(0, 0, 0));
	}
}

.scroll-icon .text-clipper-rect,
.scroll-icon .top-line,
.scroll-icon .bottom-line {
	transition: x 0.25s ease-in-out, width 0.25s ease-in-out;
}

.ll-scroll {
	.top-line {
		x: 11.25%;
		width: 52.66%;
	}

	.bottom-line {
		x: 6.5%;
		width: 61.5%;
	}

	.text-clipper-rect {
		x: -12.5%;
		width: 49.5%;
	}
}
.l-scroll {
	.top-line {
		x: 28.5%;
		width: 35.5%;
	}

	.bottom-line {
		x: 24%;
		width: 44%;
	}

	.text-clipper-rect {
		x: 4%;
		width: 33%;
	}
}

.r-scroll {
	.top-line {
		width: 35.33%;
	}

	.bottom-line {
		width: 44%;
	}

	.text-clipper-rect {
		x: 13%;
		width: 33%;
	}
}
.rr-scroll {
	.top-line {
		width: 52.66%;
	}

	.bottom-line {
		width: 61.5%;
	}

	.text-clipper-rect {
		x: 13%;
		width: 49.5%;
	}
}

.pagers {
	margin: 1em 3em 0 3em;
	position: sticky;
	min-width: 12em;
	text-align: center;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 1), 0 0 0.35em rgba(0, 0, 0, 1);
	color: var(--highlight-color-complementary);
	top: 1em;
}

.chapter-indicator {
	opacity: 0;
	pointer-events: none;
	cursor: auto;
	transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	height: 100%;
	max-height: 2.8em;
	margin: 0;
	padding: 0 1em 0 0;
	font-family: 'WHHeading';
	font-size: 1.55em;
	font-weight: 500;
	text-align: center;
	line-height: 1.15em;
	word-break: break-all;
	color: var(--highlight-color-dark);
	/* These 5 rules cause ellipsis after 2 wrapped lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	&.long {
		font-size: 1em;
	}

	&.active {
		opacity: 1;
		cursor: pointer;
		pointer-events: auto;
	}
}

.translation-indicator {
	display: flex;
	align-items: center;
	align-content: center;
	height: 100%;
	font-family: 'WHHeading';
	text-align: center;
	color: var(--highlight-color-dark);
	opacity: 0.6;
	cursor: pointer;
	transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;

	a {
		display: block;
		font-size: 1em;
		padding: 0.5em 1em 0.5em 2.2em;

		i {
			font-size: 0.8em;
			vertical-align: 5%;
			padding-left: 0.2em;
		}
	}
}

.chapter-indicator.active:hover,
.translation-indicator:hover {
	opacity: 1;
}

.chapter-indicator:hover {
	color: var(--highlight-color);
}

.pane {
	position: relative;
	height: 100%;
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	columns: auto 20em;
	column-gap: 3em;
	column-fill: auto;
	font-size: 1.1em;
	line-height: 1.5em;
	padding-bottom: 1em;
}

#pane2 {
	display: none;
}

.chapter-text {
	padding: 0 5px;
	text-justify: inter-character;

	& > br {
		content: "";
		display: block;
		margin-bottom: 0.75em;
	}

	h1 {
		font-size: 1.45em;
		/* padding instead of margin, so floated elements are affected */
		padding-top: 1.7em;
		padding-bottom: 1.5em;
		margin: 0;
		clear: both;
		text-align: center;
		color: var(--highlight-color-dark);
		cursor: cell;
		transition: color 0.5s ease-in-out;
	}

	h1 span {
		cursor: pointer;
	}

	h1 span:hover {
		color: var(--highlight-color):
	}

	h2 {
		cursor: cell;
		font-size: 1em;
		color: var(--highlight-color-complementary);
		/* padding instead of margin, so floated elements are affected */
		padding: 1em 0 0.4em 0;
		margin: 0;
		clear: both;
	}
}

.chapter-text.ltr .verse {
	text-align: left;
}

.verse {
	position: relative;
	/* necessary for situations like translation=san_sin, 1 Thessalonians 2 */
	overflow-wrap: anywhere;
	word-break: normal;
	cursor: cell;
	break-inside: avoid;
}

.woj {
	color: var(--woj-color);
	transition: color 0.5s ease-in-out;


	&.off {
		display: revert;
		color: inherit;
	}
}

.poem {
	display: block;
	background-color: inherit;
}

.v-text {
	display: inline;
}

.poem1 {
	padding-left: 4.5em;
	text-indent: -3em;
}

.poem2 {
	padding-left: 4.5em;
	text-indent: -1.5em;
}

/* this weirdness is to deal with Selah-like situations in Psalm 3, 136, etc - where a regular-ish line follows poem lines in a verse. eventually helloao might apply a style to these, since source USFM/X tags them
.poem ~ .v-text {
	display: block;
	text-align: right;
	background-color: inherit;
}*/

.verse-number {
	line-height: inherit;
	top: -0.35em;
	margin: 0;
	padding: 0;
	color: var(--highlight-color);
	white-space: nowrap;
	overflow: visible;
}

.verse-number.before-poem {
	position: absolute;
	left: 0;
}

#nav-bottom {
	padding: 0;
}

#nav-bottom-nav {
	padding-right: 2.2em;
}

#audio-player,
#selection-toolbar {
	display: flex;
	position: fixed;
	overflow: hidden;
	flex-flow: column wrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	max-width: calc(100% - 1em);
	left: 3em;
	border-radius: 0.5em;
	box-shadow: 0 0 0.8em 0.2em rgba(0,0,0,0.6);
	z-index: 1100;
}

#audio-player {
	bottom: 3em;
	background: var(--bible-color2);
	border: 0.05em solid var(--bible-color2-dark);

	.progress-wrapper,
	.volume-wrapper	{
		display: flex;
		align-items: center;
		align-content: center;
		padding: 0 0.3em;
		border-left: 0.1em solid var(--bible-color2-light);
	}

	.progress-wrapper {
		max-width: 9em;
	}

	.volume-wrapper {
		/* disable/hide volume control, but leave all the code intact in case I want to add it back later */
		display: none;
		max-width: 7em;
	}
}

#selection-toolbar {
	bottom: 5.2em;
	background: var(--bible-color8);
	border: 0.05em solid var(--bible-color8-dark);
}

#selection-toolbar .wrapper,
#audio-player .wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

#audio-player.dragging,
#selection-toolbar.dragging {
	z-index: 1101;
}

#tools-collapse,
#audio-collapse {
	display: flex;
	align-items: center;
	align-content: center;

	&.collapse:not(.show) {
		display: none;
	}
}

.tool,
.audio-control {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 0 0.22em;
	height: 1.5em;
	cursor: pointer;
	transition: text-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	
	&.disabled {
		cursor: default;
		&:hover {
			background-color: transparent;
		}
	}

	i.bi {
		inline-block;
	}
}

.tool {
	color: var(--bible-color8-lightest);

	&:not(.disabled):hover {
		text-shadow: 0 0 0.25em var(--bible-color8-dark), 0 0 0.5em var(--bible-color8-dark);
		background-color: var(--bible-color8-light);
	}

	&.disabled {
		color: var(--bible-color8-dark);
	}
}

.audio-control {
	color: var(--bible-color2-lightest);

	&:not(.disabled):hover {
		text-shadow: 0 0 0.25em var(--bible-color2-dark), 0 0 0.5em var(--bible-color2-dark);
		background-color: var(--bible-color2-light);
	}

	&.disabled {
		color: var(--bible-color2-dark);
	}
}

#toolbar-close,
#audio-close,
.move-handle {
	font-size: 1em;
}

#toolbar-close,
#selection-toolbar .move-handle {
	color: var(--bible-color8-lightest);
	box-shadow: inset 0 0 0.4em var(--bible-color8-dark);

	&:hover {
		background: var(--bible-color8-dark);
	}
}

#audio-close,
#audio-player .move-handle {
	color: var(--bible-color2-lightest);
	box-shadow: inset 0 0 0.4em var(--bible-color2-dark);
	
	&:hover {
		background: var(--bible-color2-dark);
	}
}

#audio-player {
	.form-range::-moz-range-thumb {
		background-color: var(--bible-color2-lightest);
	}

	.audio-time {
		padding-top: 0.15em;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: var(--bible-color2-lightest);
		font-size: 0.7em;
		font-weight: 600;
	}
}

#passage-pane {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-image: linear-gradient(to bottom, var(--bible-color8-dark), var(--bible-color8));
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.2em;
	text-align: center;
	word-break: break-all;
	color: var(--bible-color8-lightest);
	text-shadow: 0 0 0.25em var(--bible-color8-dark), 0 0 0.5em var(--bible-color8-dark);

	span {
		display: block;
		padding: 0.4em 0.6em;
	}
}

.color-tester {
	display: flex;
	display: none;
	position: absolute;
	top: 10em;
	left: 3em;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	z-index: 2000;

	.ultradark {
		width: 2em;
		height: 2em;
		&.bible-color1 {
			background-color: var(--bible-color1-ultradark);
		}
		&.bible-color2 {
			background-color: var(--bible-color2-ultradark);
		}
		&.bible-color3 {
			background-color: var(--bible-color3-ultradark);
		}
		&.bible-color4 {
			background-color: var(--bible-color4-ultradark);
		}
		&.bible-color5 {
			background-color: var(--bible-color5-ultradark);
		}
		&.bible-color6 {
			background-color: var(--bible-color6-ultradark);
		}
		&.bible-color7 {
			background-color: var(--bible-color7-ultradark);
		}
		&.bible-color8 {
			background-color: var(--bible-color8-ultradark);
		}
	}
}

.modal {
	z-index: 1100;
}

.modal .modal-header {
	padding: 0.25em 0.8em;
	border-bottom: none;
	opacity: 0.9;

	h1 {
		flex: max-content;
		font-size: 1em;
		color: white;
	}
}

.modal .modal-body {
	padding: 0;
}

#modal-books-list {
	display: none;

	.modal-dialog {
		max-width: 29em;
	}

	.modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color3-ultradark) 70%, var(--bible-color3-ultradark));
	}

	.modal-content {
		background-color: transparent;
	}

	.modal-body {
		display: flex;
		flex-flow: row wrap;
	}
}

#modal-translations-list,
#modal-translation-info {
	.modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color6-ultradark) 70%, var(--bible-color6-ultradark));
	}
}

#modal-translation-info {
	.modal-dialog {
		max-width: 25em;
	}

	.modal-body {
		padding: 1em 1em 0 1em;

		h2 {
			padding: 0.25em 0 .4em 0;
			color: var(--highlight-color-dark);
			font-size: 1.1em;
			font-weight: bold;
		}

		dt {
			font-weight: normal;
			font-size: 0.9em;
		}

		dd {
			font-size: 1em;
			color: var(--highlight-color-dark);
		}

		a {
			text-decoration: none;
			color: white;
			color: var(--highlight-color-dark);
		}

		a:hover {
			color: var(--highlight-color);
		}
	}

	.tr-info {
		display: block;
	}
}

#modal-audio {
	.modal-dialog {
		max-width: 28em;
	}

	.modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color2-ultradark) 70%, var(--bible-color2-ultradark));
	}

	.modal-body {
        padding: 0.5em;

		h3 {
			display: block;
			width: 100%;
			color: var(--bible-color2-lightest);
			padding: 0.25em 0.5em;
			font-size: 1em;
			text-align: center;
			border-radius: 0.3em;

			&.inline {
				width: auto;
				margin: 0 0 0.25em 0;
				padding: 0;
				font-size: 0.9em;
			}
		}

		.container {
			display: flex;
			flex-flow: row wrap;
			align-items: flex-start;
			gap: 0.3em 0.5em;
			margin-bottom: 0.5em;
			padding: 0;
			max-width: none;
		}

		.container:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
	}

	fieldset,
	.flex-child {
		flex: 1 1 9em;
		border: none;
		padding: 0.5em;
		text-align: center;
		min-inline-size: auto;
		padding-block: 0;
		padding-inline: 0;

		&:last-child {
			align-self: flex-start;
			margin-right: auto;
		}
	}

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

	legend {
		font-family: 'WHHeading';
		margin-bottom: 0.5em;
		display: block;
		width: 100%;
		color: var(--bible-color2-lightest);
		background-color: var(--bible-color2);
		padding: 0.3em 0.5em 0.22em 0.5em;
		font-size: 1em;
		line-height: 1.1em;
		font-weight: 500;
		text-align: center;
		border-radius: 0.3em;
	}

	label.icon {
		display: inline-flex;
		justify-items: center;
		align-items: center;
		text-align: center;
		width: 1.7em;
		height: 1.7em;
		cursor: pointer;
		padding: 0;
		margin: 0 0.2em 0.4em 0;
		position: relative;
		bottom: -0.1em;

		&.w-auto span {
			padding: 0 0.2em;
		}
	}

	label.icon input[type="radio"] {
		display: none;
	}

	label.icon span {
		display: inline-block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		color: white;
		font-weight: bold;
		font-size: 1.1em;
		border: 0.15em solid transparent;
		border-radius: 0.25em;
		transition: transform 0.15s ease-in-out, border 0.15s ease-in-out;
	}

	input[type="radio"]:checked + span {
		border: 0.15em solid white;
		transform: scale(1.1);
	}

	.radio-playback-bible + span {
		background-color: var(--bible-color2);
	}

	.radio-playback-book + span {
		background-color: var(--bible-color3);
	}

	.radio-playback-chapter + span {
		background-color: var(--bible-color7);
	}

	.radio-playback-verse + span {
		background-color: var(--bible-color5);
	}

	.wordhide-delay-input {
		display: none;
	}
	.wordhide-delay-input.active {
		display: inline-block;
	}

	#wordhide-delay-seconds,
	#wordhide-delay-percent {
		margin-right: 0.15em;
		width: 3.5em;
	}

	#radio-delay-seconds + span {
		background-color: var(--bible-color8);
	}
	
	#radio-delay-percent + span {
		background-color: var(--bible-color4);
	}

	.form-check.form-switch {
		width: auto;
		display: inline-block;
	}

	#fieldset-voices label {
		margin-right: 0.3em;
		
		&:last-child {
			margin-right: 0;
		}
	}
}

#modal-settings {
	.modal-header {
		background: linear-gradient(to left, var(--bs-body-bg), var(--bs-body-bg) 10%, var(--bible-color4-ultradark) 70%, var(--bible-color4-ultradark));
	}

	.modal-body {
		padding: 0;

		h2 {
			font-size: 1.3em;
			color: var(--bible-color4-light);
		}

		h3 {
			display: block;
			width: 100%;
			color: var(--bible-color4-lightest);
			background-color: var(--bible-color4-dark);
			padding: 0.25em 0.5em;
			font-size: 1em;
			text-align: center;
			border-radius: 0.3em;
		}

		h4 {
			color: var(--bible-color4);
			font-size: 1em;
		}
	}

	.accordion {
		--bs-accordion-border-radius: 0;
		--bs-accordion-inner-border-radius: 0;
		--bs-accordion-border-color: var(--bible-color4-dark);
		border-radius: 0;
	}

	.accordion-body {
		display: flex;
		flex-flow: row wrap;
		gap: 0.5em 1.5em;
		h2, h3, h4 {
			margin: 0.5em 0;
		}

		section {
			flex: 1 1 12em;
			margin-bottom: 0.7em;

			&.w-100 {
				flex: 1 1 100%;
			}

			$.empty {
				height: 0;
			}
		}
	}

	.accordion-header {
		padding: 0;
	}


	.accordion-button {
		padding: 0.5em 1em;
		color: var(--bible-color4-lightest);
		background-color: var(--bible-color4);

		&.collapsed {
			background-color: transparent;
		}

		&:hover,
		&.collapsed:hover {
			background-color: var(--bible-color4-light);
		}

		&::after {
			background: var(--bible-color4-lightest);
			-webkit-mask-image: var(--bs-accordion-btn-icon);
			mask-image: var(--bs-accordion-btn-icon);
		}
	}

	.accordion-button:focus,
	.form-check-input:focus,
	.form-range:focus::-moz-range-thumb {
		box-shadow: 0 0 0.25em 0.25em var(--bible-color4-faint);
	}

	.form-label {
		display: block;
		margin-bottom: 0.25em;
		margin-top: 0.5em;
	}

	.form-check {
		display: inline-block;
		margin-right: 1.2em;
	}

	.color-picker {
		padding: 0.25em;
		width: 7em;
		height: 2em;
	}

	.form-check-input:checked,
	.form-range::-moz-range-thumb {
		background-color: var(--bible-color4);
	}

	.form-check-input:checked {
		border-color: var(--bible-color4);
	}
}

@media (max-width: 768px) {
	#nav-top {
		padding: 0.2em 0;
		box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.4);
	}

	footer {
		&:has(.navbar-collapse.show),
		&:has(.collapsing) {
			z-index: 1200;
		}
	}

	#nav-bottom {
		box-shadow: 0 -0.4em 1em rgba(0, 0, 0, 0.4);
		background-color: var(--bs-body-bg-film);
	}

	.navbar-brand {
		padding: 0;
	}

	.logo {
		font-size: 1em;
		padding-top: 0.25em;
		-webkit-transform: translate(-0.9em);
		-ms-transform: translate(-0.9em);
		transform: translate(-0.9em);
		text-align: left;
	}

	.logo:hover {
		-webkit-transform: translate(-0.4em);
		-ms-transform: translate(-0.4em);
		transform: translate(-0.4em);
	}

	.chapter-indicator {
		font-size: 1.05em;

		&.long {
			font-size: 0.75em;
		}
	}
	
	main {
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.chapter-text h1 {
		padding-bottom: 0.5em;
	}

	.chapters {
		grid-template-columns: repeat(auto-fit, minmax(2em, 11.1%));
	}

	#nav-bottom .navbar-toggler {
		font-size: 0.6em;
		padding: 0.3em 0.5em;
	}

	.translation-indicator a {
		font-size: 0.7em;
		padding-left: 0;
	}

	.nav-link {
		font-size: 0.95em;
		padding: 0.3em 0.4em;
	}

	.nav-link.dropdown-toggle.show {
		padding-left: 0.6em;
	}

	.scrollers {
		font-size: 0.75em;
	}

	.controls {
		z-index: 1;
		padding: 0;
	}

	.translation-indicator a {
		padding-left: 0.2em;
	}

	.scroll-text-left,
	.scroll-text-right {
		display: none;
	}

	.prev-text {
		left: 0.52em;
	}

	.next-text {
		right: 0.52em;
	}

	html[data-bs-theme="light"] {
		.pagers {
			background-color: rgba(255, 255, 255, 0.95);
		}
	}

	.pane {
		width: 100%;
		padding: 0 1em 3em 1em;
		columns: auto auto;
		column-gap: 1.5em;
		overflow-x: visible;
		overflow-y: auto;
	}

	#audio-player,
	#selection-toolbar {
		left: 1em;
		font-size: 1.15em;
	}

	.modal .modal-dialog {
		align-items: end;
	}

	#modal-translations-list,
	#modal-translation-info,
	#modal-books-list,
	#modal-lists,
	#modal-audio,
	#modal-settings {
		.modal-header {
			order: 3;
		}
	}

	#modal-books-list {
		.modal-dialog {
			max-width: 24em;
		}

		.modal-header {
			top: auto;
			bottom: 0;
		}
	}

	.modal .modal-header {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.back {
		padding: 0.45em 0.8em .45em 0.6em;
	}
}

@media (min-width: 768px) {
	.chapter-indicator {
		position: absolute;
		left: 0;
		right: 0;
		top: 1.6em;
		height: auto;
		max-width: 60%;
		margin-left: auto;
		margin-right: auto;
	}

	.navbar-expand-md .navbar-nav .nav-link {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
}

@media (max-width: 575px) {
	.menu-title {
		display: inline-block;
	}

	#nav-bottom .navbar-collapse {
		padding-bottom: 0.5em;
	}

	#nav-bottom-nav {
		padding-right: 0;

		.navbar-nav {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
			justify-items: stretch;

			.nav-item {
				align-self: stretch;
			}
		}
	}

	#modal-books-list {
		.modal-dialog {
			max-width: none;
		}
	}
}

@media (max-width: 450px) {
	#modal-audio #fieldset-wordhide .flex-child:first-child {
		flex-basis: 100%;
	}
}

@media (max-width: 400px) {
	.navbar-brand {
		margin-right: 0.4em;

		.logo {
			width: auto;
		}
	}

	.navbar-expand .navbar-nav .nav-link {
		padding: 0.45em 0.45em;
	}

	.books {
		min-width: 15em;
	}

	.chapter-indicator {
		font-size: 1.1em;
	}

	#modal-settings .accordion-body section {
		flex: 1 1 100%;
	}
}

@media (max-height: 450px) {
	.pane {
		overflow-x: visible;
	}

	.chapter-text {
		height: auto;
		width: 100%;
		columns: auto auto;
	}
}