/***
 * Copyright © 2025 Bible Scholastic / Timothy A. Lee. All rights reserved.
 */
:root {
	--base-clr: #FFFFFF;
	--input-clr: #FFFFFF;
	--line-clr: #E0E0E0;
	--shadow-clr: #B0B0B0;
	--text-clr: #000000;
	--action-clr: #00E;
	--hover-clr: #F0F0FF;
	--bground-clr: #F8F8F8;
	--selected-clr: rgb(193, 193, 255);
	--button-clr: #e2e1ff;
}
.night {
	--base-clr: #000000;
	--input-clr: #000000;
	--line-clr: #222222;
	--shadow-clr: #555555;
	--text-clr: #EEEEEE;
	--action-clr: #000090;
	--hover-clr: #333344;
	--bground-clr: #0A0A0A;
	--selected-clr: #5555AA;
	--button-clr: #555555;
}

@font-face {
	font-family: 'Ezra SIL';
	src: url('/css/fonts/ezra-sil.woff') format('woff');
}
@font-face {
	font-family: 'Galatia SIL';
	font-style: italic;
	src: url('/css/fonts/galatia-sil.woff') format('woff');
}
@font-face {
	font-family: 'dss4Q51';
	src: url('/css/fonts/4Q51.otf');
}
@font-face {
	font-family: 'Arabic Scheherazade';
	src: url('/css/fonts/scheherazade-regular.woff') format('woff');
}
@font-face {
	font-family: 'Syriac';
	src: url('/css/fonts/syrcomjerusalem.woff') format('woff');
}
@font-face {
	font-family: 'Cardo';
	src: url('/css/fonts/cardo-regular.ttf');
}
@font-face {
	font-family: 'EBGaramond';
	src: url('/css/fonts/EBGaramond-Medium.ttf') format('woff');
}
@font-face {
	font-family: 'SBL BibLit';
	src: url('/css/fonts/SBL_BLit.ttf');
}
* {
	box-sizing: border-box;
}
html {
	overscroll-behavior-y: none;
}
body {
	min-height: 100%;
	background-color: var(--base-clr);
	color: var(--text-clr);
	font-family: Cardo, Helvetica, Arial, Sans-Serif;
	font-size: 16px;
	margin: 0;
	word-break: break-word;
	overscroll-behavior-y: none;
	box-sizing: border-box;
	display: flex;
	/*grid-template-columns: auto 1fr;*/
}
.footer-details {
	font-size: 0.9em;
	display: table;
	justify-content: space-around;
	width: 100%;
	box-sizing: border-box;
}
.footer-icon {
	vertical-align: bottom;
}
.off {
	display: none;
}
.small-screen-only {
	display: none;
}
.asterisk {color:red;}
.tertiary {
	font-size: 0.9em;
}
/* Icons and logos */
.nav-logo-container {
	margin-bottom: 10px;
}
.header-logo {
	display: contents;
	background-size: auto;
	background-repeat: no-repeat;
	vertical-align: middle;
	background-image: url('/files/images/logo.svg');
	background-size: 100% 24px;
	filter: drop-shadow(1px 2px 3px var(--line-clr));
}
.night .header-logo {
	filter: invert(1) hue-rotate(238deg)
}
.logo-with-text {
	display: inline-block;
	background-size: auto;
	background-repeat: no-repeat;
	width: 200px;
	height: 32px;
	vertical-align: middle;
	background-image: url('/files/images/logo-full-vector.svg');
	background-size: 190px 32px;
	margin: 6px;
}
.icon {
	width: 32px;
	height: 32px;
	background-image: url('/files/images/icon32.png');
}
.logo-big {
	width: 320px;
	height: 145px;
	background-image: url('/files/images/logo-big.png');
}
.LoginButton {
	float: right;
	border: 1px solid #FFF;
	padding: 4px 8px;
	margin: 2px 8px;
	cursor: pointer;
	color: #444;
	background-color: #DAFFED;
}
.LoginButton:hover {
	color: black;
	border-color: #AAA;
}
.emoji-selection {
	max-height: 30vh;
	overflow-y:auto;
}
.emoji-selection .button {
	width: 32px;
	text-align: center;
}
.button-max {
	border: 1px solid var(--line-clr);
	padding: 6px 8px;
	margin: 2px 8px;
	cursor: pointer;
	background-color: #DAFFED;
	position: absolute;
	inset-inline-end: 0;
	opacity: 0.5;
	z-index:9;
}
.night .button-max {
	color: black;
}
.button.button-round {
	border-radius: 50%;
	padding: 5px;
	vertical-align: middle;
	background-color: black;
	margin-inline-start: 10px;
	opacity: 0.7;
}
.button.button-round .svg-img-small {
	margin: 0px;
}
main {
	width:100%;
	height: 100vh;
	overflow: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--bground-clr);
}
#minimised-hamburger {
	display: none;
	background-color: #FFFFFF;
	color: black;
	position: absolute;
	top: 0px;
	z-index: 10;
	margin: 5px;
	padding: 10px;
	opacity: 0.5;
	width: 50px;
	border-radius: 25px;
}
.sidebar {
	width: 260px;
	height: 100vh;
	display: flex;
	flex-direction: row;
	background-color: var(--base-clr);
	color: #333;	
	position: sticky;
	top: 0;
	z-index: 12;
	transition: 300ms ease-in-out;
}
.sidebar:has(.menu_2) {
	width: 360px;
}
.sidebar.close {
	padding: 0px;
	width: 64px;
	transition: 300ms ease-in-out;
}
.sidebar.close:has(.menu_2) {
	width: 200px;
	.menu_1 {width:64px;}
}
.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: center;
}
.close .sidebar-header {
	justify-content: flex-end;
}
.sidebar-header span {
	display: flex;
	font-weight: bold;
	font-size: 1.2em;
	color: #00A;
	flex-grow: 1;
	text-wrap-mode: nowrap;
}
.night .sidebar-header span {
	color: white;
}
.sidebar-header button {
	padding: 8px;
	border-radius: 32px;
	margin-block: 0;
	margin-inline-start: 14px;
	margin-inline-end: 2px;
}

.nav-menu {
	text-align: center;
	font-size: 0.8em;
	padding: 0px;
	list-style: none;
	scrollbar-gutter: stable both-edges;
}
.nav-menu-centre {
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.nav-menu-bottom {
	margin: auto 8px 0px 8px;
}
.nav-menu.nav-menu-top {
	min-height: 94px;
	margin: 0px 8px 0px 8px;
}
.close .nav-menu.nav-menu-top {
	min-height: 104px;
}
/* Handle */
.nav-menu::-webkit-scrollbar {
  width: 8px;
  background-color: inherit;
}
.nav-menu::-webkit-scrollbar-track {
	background: initial;
}
.nav-menu::-webkit-scrollbar-button:single-button {
	display: none;
}
.nav-menu::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 4px;
}

/* Handle on hover */
.nav-menu::-webkit-scrollbar-thumb:hover {
  background: #AAA;
}
.nav-menu li button, .search-bar-menu li button {
	background: none;
	border: none;
	text-align: initial;
	cursor: pointer;
	font: inherit;
	display: flex;
}
.search-bar-menu li div {
	width: 100%;
}

.nav-menu li a:active, .nav-menu li button:active, .search-bar button:active, .search-bar-menu li a:active,
.search-bar-menu li button:active, .home-menu .svgImg:active  {
	transform: scale(0.95);
}
.dropdown-btn {
	width: 100%;
	padding: 8px 10px;
	border-radius: 26px;
	align-items: center;
	justify-content: space-between;
}
.nav-menu li button .nav-text, .nav-menu li button .nav-text2, .search-bar-menu li button .nav-text, .home-menu .user-img {
	flex-grow: 1;
}

.nav-menu li svg, .search-bar-menu li svg {
	flex-shrink: 0;
	fill: var(--text-clr);
}
.nav-menu button svg, .search-bar-menu button svg {
	transition: 200ms ease;
}

:dir(rtl) .nav-menu button svg, :dir(rtl) .search-bar-menu button svg {
	transform: scaleX(-1);
}
.nav-menu button:hover, .nav-menu li a:hover, .search-bar-menu button:hover, .search-bar-menu li a:hover {
	background-color: var(--hover-clr);
}
.sub-menu {
	display: grid;
	grid-template-rows: 0fr;
	transition: 300ms ease-in-out;
	> ul {
		overflow: hidden;
		padding-inline-start: 0px;
	}
}
.sub-menu.show {
	grid-template-rows: 1fr;
	> ul {
		overflow: hidden;
	}
}
.rotate svg:last-child {
	rotate: 180deg;
}
.nav-menu li {
	margin: 3px 10px;
}
.nav-menu .home-menu li {
	margin: 0px;
	font-size: 1em;
}
.close .nav-menu li {
	margin: 0px;
}
.nav-menu li a {
	/*color: #777;*/
	padding: 8px 10px;
	border-radius: 26px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.close .nav-menu li a {
	width: fit-content;
	margin: auto;
}
.nav-menu li.nav-selected a {
	background-color: var(--selected-clr);
}
.nav-menu li a {
	display: flex;
	flex-direction: row;
	cursor: pointer;
}
.nav-menu .nav-text, .nav-menu .nav-text2 {
	/*text-wrap: nowrap;*/
	max-width: 200px;
	text-overflow: ellipsis;
	white-space: break-spaces;
}
.nav-menu .dropdown-btn span, .nav-menu .nav-text, .nav-menu .nav-text2 {
	font-size: 1.2em;
}
.nav-text, .nav-text2 {
	color: var(--text-clr);
}
.close .home-menu .nav-text {
	display: none; /* Fixes Bug where label extends page height */
}
.close .nav-text, .menu_2 .nav-text {
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 2px 6px;
	color: white;
	display: none;
	position: absolute;
	z-index: 3;
	width: 64px;
	left: 50%;
	margin: 64px 0px 0px -34px;
	border-radius: 4px;
	word-break: normal;
	font-size: 0.9em;
}
.menu_2 .nav-text {
	font-size: 1.1em;
	text-wrap: auto;
}
.close .dropdown-btn {
	flex-direction: column;
	width: fit-content;
	margin: auto;
}
.close .home-menu .dropdown-btn {
	flex-direction: row;
	width: 100%;
	margin: initial;
}
.close .nav-menu li a:hover .nav-text, .menu_2 .nav-menu li a:hover .nav-text {
	visibility: visible;
	display: block;
	position: absolute;
}
.menu_1 .nav-menu .svgImg {
	display: block;
	margin-block: 0;
	margin-inline-start: 0;
	margin-inline-end: 6px;
	filter: grayscale(1);
}
.menu_1 .nav-menu .svgImg.user-img 	{
	filter: none;
}
.dropdown-menu * * * .svg-img-small {
	margin-block: 0;
	margin-inline-start: 0;
	margin-inline-end: 6px;
}
.close .nav-menu {
	position: relative;
}
.close .menu_1 .nav-menu .svgImg, .home-menu .user-img {
	margin: 0px;
}
.close .nav-menu .svgImg {
	margin: auto;
	width: 24px;
	height: 24px;
}
.close .nav-menu .svgImg.user-img {
	width: 40px;
	height: 40px;
}
.nav-menu li.nav-selected .svgImg {
	filter: none;
	filter: drop-shadow(2px 2px 6px gray);
}
.night .nav-menu .svgImg {
	filter: invert(0.8);
}
.nav-menu li a:hover .svgImg, .nav-menu li button:hover .svgImg {
	filter: drop-shadow(2px 2px 6px gray);
}
.nav-menu ul {
	list-style: none;
	padding: 0px;
}
.nav-menu li button.nav-mobile  {
	display: none;
}
.menu_1 {
	width: inherit;
	height: 100vh;
	padding: 0px;
	display: flex;
	flex-direction: column;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	border-right: 1px solid var(--line-clr);
	transition: 300ms ease-in-out;
}
.menu_1_underline {
	border-bottom: 1px solid var(--line-clr);
	z-index: 6;
}
.night .menu_1_underline {
	border-bottom: 1px solid gray;
}
.blog-bar {
	width:100px;
}
.menu_2 {
	width: 120px;
	min-width:120px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--line-clr);
	overflow: auto;
}
.menu_2 .nav-menu {
	position: relative;
}
.menu_2 li a, .menu_2 li a span span {
	justify-content: center;
}
.menu_3 {
	width:100%;
	background-color: #EEF;
	display: table;
}
.night	.menu_3 {
	background-color: #77A;
}
.menu_4 {
	width:100%;
	background-color: white;
	height:48px;
	display: table;
}
.night	.menu_4 {
	background-color: #AAA;
}
.new-mail-alert {
	margin: 10px auto 0px auto;
}
/* SideBar */
.sideMenu {
	margin: 0;
	width: 0px;
	transition: 0.5s;
	/*display:none;
	min-width: 530px;*/
	background-color: white;
	height: 100%; /* Full height */
	position: fixed; /* Make it stick, even on scroll */
	overflow: auto; /* Enable scrolling if the sidenav has too much content */
	border: 0px;
	padding: 8pt 0pt;
	z-index: 11;
}
.night .sideMenu {
	background-color: #222;
}
.toggle-menu-button, .mobile-toggle-button {
	height: 40px;
	width: 40px;
	margin: 2px 0px;
	padding: 10px 30px;
	display: none;
	box-sizing: border-box;
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.night .mobile-toggle-button {
	filter: invert(0.7);
}
.mobile-toggle-button:hover {
	filter: drop-shadow(2px 4px 6px grey);
}
.background-container {
	position: absolute; /*fixed*/
	inset-inline-start: 0;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: var(--base-clr);
	opacity: 0.8;
	display: none;
	cursor: pointer;
}
.side-menu-button {
	padding: 8pt;
}
.side-menu-button-item {
	cursor: pointer; 
	font-size: 1.2em;
	white-space: nowrap;
	display: flex;
}
.side-menu-button-item:hover {
	background-color: #473198;
	color: #DDD;
}
.sideBarItemList > li {
	color: #222;
}
.night .sideBarItemList > li {
	color: #CCC;
}
.sideBarItemList {
	list-style: none;
	padding: 0px;
}
.side-menu-sub-button {
	list-style: none;
	padding: 0.5em 0px 0.5em 2em;
}
.side-bar-options {
	list-style: none;
	display:none;
	float: right;
	top: 0;
	position: absolute;
	left: 130px;
	color: #111;
	background-color: #aae;
	height: 100%;
	width: 360px;
	font-size: 1.4em;
	padding-right: 20px;
	overflow: auto;
}
.night .side-bar-options {
	background-color: #557;
}
.sub-list {
	padding: 0.2em 0em 0.2em 0.1em;
	overflow-y: auto;
	list-style: none;
}
.sub-list li {
	color: #444;
	padding: 0.5em;
}
.night .sub-list li {
	color: #DDD;
}
li:hover > .sub-list {
	display: block;
}
.sideBarItemList ol {
	padding-left: 1em;
}
details:hover > .sub-list li:hover {
	background-color: var(--hover-clr);
	color: #DDD;
}
summary {
	outline:none;
	cursor: pointer;
}
summary .svgImg, .sub-list .svgImg {
	margin-right: 6px;
}
/**
User Display
*/
.card-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	padding: 8px 6px;
	border-radius: 12px;
	border: 1px solid var(--line-clr);
	margin: 2px 0px;
	background-color: var(--base-clr);
}
.card-container:hover {
	background-color: var(--hover-clr); 
}
.card-container.selected {
	background-color: var(--selected-clr);
}
.card-anchor {
	display: flex;
	flex-grow:1;
}
.handle-card {
	display: inline-flex;
	flex-direction: column;
}
.card-anchor .handle-card {
	padding-left: 5px;
}
.handle-name {
	font-size: 12pt;
	font-weight: bold;
	color: #00A;
	width: max-content;
}
.night .handle-name {
	color: #CCF;
}
.handle-display {
	font-size: 0.8em;
	color: gray;
	direction: ltr;
}

/* Forms */
select {
	border-width: 2px;
	padding: 8px 9px 8px 9px;
	border-radius: 4px;
	background-color: inherit;
	color: inherit;
	margin: 1em 4px;
}
option {
	background-color: var(--base-clr);
}
kbd {
	background-color: #eee;
	border-radius: 3px;
	border: 1px solid #b4b4b4;
	box-shadow:
		0 1px 1px rgba(0, 0, 0, 0.2),
		0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
	color: #333;
	display: inline-block;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	white-space: nowrap;
}
/* middle alignment */
.middle {
	margin:auto;
	max-width: 1024px;
	padding: 4px;
}
.middleCompressed {
	margin:auto;
	max-width: 1024px;
	padding: 0px;
}
.middle-no-padding {
	margin:auto;
	max-width: 1024px;
	padding: 0px;
	max-height: 48px;
	overflow: auto;
}
.wrapper {
	margin: 0px auto;
	padding: 1vh 8px;
	max-width: 1024px;
}
.wrapperOuter {
	margin: 0 1vw 0 1vw;
}
.wrapper-home-outer {
	margin: 0 1vw 0 1vw;
	display: flex;
}
.rightWrapper {
	display: block;
}
.widget {
	border: none;
	padding: 8pt;
}
.widgetHeader {
	font-weight: bold;
	color: navy;
}
.wrapper-central {
	margin: auto;
	max-width: 880px;
	border-radius: 0 0 14px 14px;
	overflow: auto;
}
.wrapper-right {
	width: 422px;
	min-width: 422px;
	max-width: 422px;
}
/* Widgets Editing */
.DraggableBox {
	border: 2px solid;
	min-width: 100px;
	min-height: 100px;
	padding: 8px;
	margin: 2px;
}
.widgetBox {
	overflow-y:auto;
	max-height: 60vh;
	min-width: 160px;
}
.widget-box-large {
	overflow-y:auto;
	max-height:500px;
	min-width: 260px;
}
.availableWidgetBox {
	overflow-y:auto;
	max-height:600px;
	min-width: 160px;
}
.widgetFormBox {
	display:none;
}
/* UI Controls */
.container-group {
	padding: 1em;
	margin: 12px;
	border-radius: 1em;
	border: 1px solid var(--line-clr);
	width: 100%;
	background-color: var(--base-clr);
}
/* Form */
form {
	display: initial;
}
/* Headers */
h1 {
	color: #473198;
	font-family: sans-serif;
	margin-bottom: 0;
	vertical-align:top;
	font-weight: normal;
}
.night h1 {color: #6666BB;}
.menuHeader {
	color: white;
	text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
	vertical-align: top;
	display: inline;
	margin-bottom: 0;
	font-size: 32px;
	font-family: "Arial";
	font-variant:small-caps;
}
h2 {
	color: #44C; /*66C*/
	font-weight: normal;
}
.night h2 {
	color: #88C;
}
h3 {
	color: #7777BB;
	margin-bottom: 0;
	font-family: Helvetica, sans-serif;
}
.night h3 {
	color: #FFFFFF;
}
h4 {
	color: #7777CC;
	margin-bottom: 0;
	font-size: 16px;
}
h5 {
	color: #7777CC;
	margin-bottom: 0;
}
.lemma {
	color: grey;
	font-style: italic;
}
.lemma-active {
	color: grey;
	font-style: italic;
	cursor: pointer;
}
.night .lemma-active {
	color: #CCC;
}
hr {
	border: 0;
	height: 1px;
	background: #7755BB;
}
/* A */
a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
}
a:hover {
}
/* Buttons */
.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input.button:disabled {
	cursor: not-allowed;
	color: #DDD;
	border: #DDD;
}
.button {
	color: var(--text-clr);
	background-color: var(--button-clr);
	cursor: pointer;
	font-family: "Calibri", Helvetica, Sans-Serif;
	font-size: 1em;
	padding: 4px 22px;
	margin: 2px;
	border: none;
	border-radius: 32px;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	justify-content: center;
	word-break: normal;
}
.button.action {
	background-color: var(--action-clr);
	color: white;
}
.button:active {
	transform: scale(0.95);
}
.button.bordered {
	border: 1px solid #CCCCCC;
}
.button-tab {
	background-color: var(--base-clr);
	border-radius: 4px;
	margin-right: 0px;
	border-bottom: 4px solid var(--selected-clr);
}
.button.button-tab.selected {
	background-color: var(--selected-clr);
	border-bottom: 4px solid var(--action-clr);
}
.action-control {
	display: flex;
}
:dir(rtl) .action-control {
  flex-direction: row-reverse;
}
.action-control .button.action {
	width: 100%;
}
.button.button-small {
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.8em;
}
.button.button-medium {
	padding: 2px 6px;
	border-radius: 3px;
}
.button:hover { 
	background-color: #BBF;
	color: black;
	transition: 0.4s;
}
.button.selected {
	color: #FFFFFF;
	border-color: var(--selected-clr);
}
.bookButton {
	font-size: 1.1em;
	color: #777;
	background-color: #ccd;
	cursor: pointer;
	padding: 4px 8px;
	margin: 2px;
	border: 2px solid #aca;
	display: block;
	-webkit-column-break-inside: avoid;
	user-select: none;
	-webkit-user-select: none;
}
.bookButton:hover {
	border-color: #55A;
	background-color: #BBD;
	transition: 1s;
	color: #555;
}
.book-button {
	color: #777;
	background-color: #fafafa;
	cursor: pointer;
	padding: 8px 8px;
	margin: 4px 2px;
	border: 1px solid #CCC;
	border-radius: 6px;
	display: block;
	-webkit-column-break-inside: avoid;
}
.book-button:hover {
	border-color: #AAF;
	transition: 0.2s;
	background-color: #DDF;
	color: #555;
}
.book-work {
	border: 2px solid #ffe2e2;
	padding: 5px;
	margin: 5px;
	background-color: #fafaff;
	display: inline-block;
}
.book-work-title {
	font-size: 1.2em;
	color: darkred;
	cursor: pointer;
}
.bookNameButton {
	font-size: 1.2em;
	color: #777;
	cursor: pointer;
	padding: 4px;
	margin: 2px;
	display: block;
	-webkit-column-break-inside: avoid;
}
.translationButton {
	font-size: 0.9em;
	color: #777;
	background-color: #f4f4ff;
	cursor: pointer;
	padding: 4px;
	margin: 2px;
	border: 1px solid #d4e0d4;
	border-radius: 8px;
	display: block;
	-webkit-column-break-inside: avoid;
}
.translationButton:hover {
	border-color: #55A;
	background-color: #BBD;
	transition: 1s;
	color: #555;
}

.home-buttons-group {
	text-align: center;
	user-select: none;
}
.home-button {
	vertical-align: top;
	padding: 8px 8px;
	margin: 2px 7px 9px 7px;
	width: 125px;
	height: 125px;
	display: inline-flex;
	-webkit-column-break-inside: avoid;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	flex-direction: column;
	font-size: 0.6em;
	text-align: left;
}
.home-button-icon {
	width: 110px;
	height: 110px;
	font-family: sans-serif;
	cursor: pointer;
	color: #113;
	font-weight: bold;
	vertical-align: bottom;
	background-size: 80%;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	transition: 0.3s;
}
.night .home-button-icon {
	color: #DDD;
	border-color: #777;
	box-shadow: none;
}
.night .kebab-icon, .night .meatball-icon, .night .hamburger-icon {
	filter: invert(1);
}
.night .home-button-icon.flashcard-icon, .night .home-button-icon.shop-icon, .night .side-menu-button-item .flashcard-icon {
	filter: invert(100%);
}
.home-button:hover {
	border-color: #CCF;
	background-color: #EEF;
	color: #00A;
	/*filter: drop-shadow(2px 4px 6px var(--line-clr));*/	
	box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}
.night .home-button:hover {
	background-color: #473198;
}
.home-button-icon:hover {
	margin-top: -10px;
}
.home-button-text {
	font-size: 14px;
	color: #115;
	cursor: pointer;
}
.night .home-button-text {
	color: #AAA;
}
.home-widget {
	font-size: 1.7em;
	color: #113;
	vertical-align: bottom;
	display: inline-block;
	/*height: 100px;*/
	width: 100%;
	padding: 1px;
	box-sizing: border-box;
	text-align: center;	
	overflow-y: auto;
}
.home-widget .button {
	white-space: nowrap;
}
.home-widget img {
	min-height: 100%;
	min-width:100%;
}
.home-widget .home-widget-header {
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	color: #473198;
}
.night .home-widget-header {
	color: #EEE;
}
.tile-2 {
	padding: 8px 9px 9px 9px;
	margin: 2px 7px 9px 7px;
	width: 390px;
	height: auto; /*109px;*/
	display: block;
}
.tile-3 {
	padding: 8px 9px 9px 9px;
	margin: 2px 7px 9px 7px;
	width: 390px;
	height: auto; /*109px;*/
	display: block;
}
.tile-3x3 {
	padding: 8px 9px 9px 9px;
	margin: 2px 7px 9px 7px;
	width: 390px;
	height: 390px;
	overflow: hidden;
	display: block;
}
.tile-3x3 .home-widget {
	height: 98%;
}
.night .home-widget {
	color: #DDD;
}

.home-widget a {
	/*vertical-align: baseline;
	padding: initial;
	display: inline;*/
}
.disabled {
	pointer-events:none;
	opacity: 0.6;
}
.disabled .home-button {
	color: #AAA;
	border-color: #BBB;
	opacity: 0.2;
}

/* Home */
.list-of-notes {
	display: inline-block;
	text-align: center;
	font-size: 1.3em;
	padding: 0.1em;
	margin: 0.3em;
}
.overflow {
	max-width: 320px;
	min-width: 240px;
	height: 320px;
	overflow: auto;
	margin: 8px;
}
.downloaded-works {
	max-height: 200px;
	overflow: auto;
}
/* Folder Explorer */
.actionBar {
	width: 100%;
	min-height: 44px;
}
.actionBar a {
	vertical-align: middle;
}
.folderMenuBar {
	text-align: right;
	padding: 2px;
}
.noteColumns {
	font-size: 0.8em;
}
.bookColumns {
	font-size: 0.8em;
	column-width: 420px;
}
.Box {
	border: 1px solid var(--line-clr);
	display: inline-block;
}
.userFolder {
	background-color: #CEC;
}
.group-folder {
	background-color: #e0dd5b;
	border-radius: 0px 1em 0px 0px;
	color: #222222;
	max-width: 216px;
	font-size: 13pt;
	cursor: pointer;
	padding: 4px;
	margin: 2px;
	-webkit-column-break-inside: avoid;
	vertical-align: middle;
}
.group-folder:hover {
	/*border-color: #473198;*/
	color: #473198;
	box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}
.noteFile {
	max-width: 216px;
	max-height: 100px;
	overflow: hidden;
	font-size: 13pt;
	color: grey;
	background-color: #e4f5e6;
	cursor: pointer;
	padding: 4px;
	margin: 2px;
	border-radius: 6px;
	-webkit-column-break-inside: avoid;
	vertical-align: middle;
}
.noteFile:hover {
	border-color: #333;
}
.narrow {
	margin: 0;
}
.noteButton {
	font-size: 13pt;
	color: grey;
	background-color: #DDD;
	cursor: pointer;
	padding: 4px;
	margin: 2px;
	border: 2px solid var(--line-clr);
	display: inline-block;
	-webkit-column-break-inside: avoid;
}
.noteButton:hover {
	border-color: #333;
}
.note-extended {
	display: inline-block;
	width: 170px;
	padding: 0.2em;
}
.trans-meta {
	padding: 0px 4px;
	margin: 4px;
	border: 1px;
	border-radius: 4px;
	float: right;
}
.published {
	background-color: #77D;
	color: white;
}
.shared {
	background-color: #7D7;
	color: white;
}
.hidden {
	display: none;
}
.smallText {
	font-size: 9pt;
}
.extraPadding {
	padding-left: 12px;
	padding-right: 12px;
}
input[type=checkbox].noteBox {width:22px; height:22px;}
.right {
	float:right; 
}

/* Button Colours */
.OT {
	background-color: #8855CC;
	color: white;
}
.NT {
	background-color: #DD7777;
	color: white;
}
.AP {
	background-color: #ADA;
	color: #555;
}
.MajorProphet {
	background-color: #CC44AA;
	color: white;
}
.MinorProphet {
	background-color: #DD66CC;
	color: white;
}
.Law {
	background-color: #5533BB;
	color: white;
}
.non-bib {
	background-color: #DDA;
	color: gray;
}
.favourite {
	background-color: #FFA;
	color: grey;
}
.mindmap {
	background-color: #DDF;
}

.book {
	display:block;
	width:100%;
}
img {
	cursor: pointer;
	/*border-radius: 5px;*/
}
.refSearch {
	font-size: 1em;
	vertical-align: top;
	padding: 8px 6px 9px 6px;
	background-image: url('/files/images/magnify-glass.svg');
	background-position: 8px 8px; 
	background-repeat: no-repeat;
	padding-left: 40px;
}
.input-group {
	margin: 1em 0px;
}
.input-group label {
	display: flex;
	margin-bottom: 2px;
	font-family: Helvetica;
	font-weight: bold;
}
.input-group input {
	margin : 2px 0px;
}
.input-group .svg-img-small {
	filter: grayscale(1);
}
.login-email {	background-color: #FFFFFF;
	font-size: 1.1em;
	font-family: sans-serif;
	border-radius: 4px;
	margin: 10px 0px;
	padding: 8px;
	width: 280px;
	padding: 8px 6px 9px 6px;
}
.password {
	background-color: #FFFFFF;
	font-size: 1.1em;
	font-family: sans-serif;
	border-radius: 4px;
	margin: 10px 0px;
	padding: 8px;
	width: 280px;
	padding: 8px 6px 9px 6px;
}
input {
	border: 1px solid #aae;
	border-radius: 3px;
	outline: none;
	transition: 0.5s;
	background-color: var(--input-clr);
	color: inherit;
	padding: 6px;
}
input:focus {
	border-color: #555;
	background-color: var(--hover-clr);
}
.night input:focus {
	background-color: #020;
}
textarea {
	background-color: var(--input-clr);
	color: inherit;
	padding: 0.5em;
	font-family: inherit;
	font-size: inherit;
	border: 1px solid var(--line-clr);
	border-radius: 6px;
}
textarea:focus {
	border: 1px solid blue;
	outline: none;
}

a.hashtag {
	color: #88F;
}
a.hashtag:hover {
	color: #22C;
	text-decoration: underline;
}
.svgImg {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}
.sidebar .svgImg {
	width: 24px;
	height: 24px
}
.button .svgImg {
	margin: 0px 4px;
}
.svg-img-small {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	display: inline-flex;
	vertical-align: middle;
}
.button .svg-img-small, .dropdown-menu > li > span.svg-img-small {
	margin: 0px 4px;
}
.svg-img-medium {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	display: inline-flex;
	vertical-align: middle;
}
.dropdown-menu > li > span.svg-img-small.meatballs-icon {
	margin: 0px;
}
.dropdown-menu { 
	select {margin: 0px;}
	li span {padding: inherit;}
}
.svg-img-tiny {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	display: inline-flex;
}
.svg-min {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
}
.button .svgImg {
	margin-right: 6px;
}
.button-svg-img {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-repeat: no-repeat;
	width: 22px;
	margin: 0px 2px;
	width: 32px;
	height: 32px;
	background-size: 32px;
	display: inline-block;
}
.menu-float {
	cursor: pointer;
	display: inline-block;
	vertical-align:middle;
	position: absolute;
	right: 4px;
	z-index: 3;
}
.context-menu {
	display: none;
	z-index: 1;
	position: absolute;
	background-color: var(--base-clr);
	border: 1px solid var(--line-clr);
	border-radius: 0.4em;
	padding: 0.2em;
	z-index: 5!important;
	list-style-type: none;
	box-shadow: 1px 2px 4px 0px var(--shadow-clr);
}
.context-menu li {
	min-width: 160px;
	padding: 6px 10px;
	border-radius: 0.4em;
	cursor: pointer;
}
.context-menu li:hover {
	background-color: var(--hover-clr);
}

.app-menu-control-bottom {
	flex-direction: column;
	display: block;
	bottom: 0px;
	width: 100%;
	border-top: 1px solid var(--line-clr);
}
.app-menu-float {
	inset-inline-start: 0;
	padding: 0px;
	bottom: 0px;
	z-index: 3;
	/*position: fixed;*/
}
.hamburger-float {
	cursor: pointer;
	display: inline-block;
	vertical-align:middle;
	margin: 8px;
}
.flag {
	cursor: pointer;
	background-size: contain;
	text-align: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	display: inline-block;
	vertical-align: middle;
	margin: 4px 0px;
}
.hamburger {
	background-image: url('/files/images/hamburger.svg');
}
.hamburger:hover {
	filter: invert(78%) sepia(41%) saturate(3996%) hue-rotate(198deg) brightness(103%) contrast(100%);
}
.hamburger-white {
	background-image: url('/files/images/hamburger-white.svg');
	vertical-align: middle;
}
.hamburger-white:hover {
	filter: invert(22%) sepia(41%) saturate(3996%) hue-rotate(198deg) brightness(103%) contrast(100%);
}
.highlight {
	background-image: url('/files/images/highlight.svg');
}
.analyse-icon {
	background-image: url('/files/images/analyse-icon.svg');
}
.admin-icon {
	background-image: url('/files/images/admin-icon.svg');
}
.audio-icon {
	background-image: url('/files/images/audio.svg');
}
.back-icon {
	background-image: url('/files/images/back-icon.svg');
}
.bible-icon {
	background-image: url('/files/images/bible.svg');
}
.blogs-icon {
	background-image: url('/files/images/blogs-icon.svg');
}
.book-icon {
	background-image: url('/files/images/book-icon.svg');
}
.bookmark-icon {
	background-image: url('/files/images/bookmark-icon.svg');
}
.bug-icon {
	background-image: url('/files/images/bug-icon.svg');
}
.camera-icon {
	background-image: url('/files/images/camera-icon.svg');
}
.collaboration-icon {
	background-image: url('/files/images/collaboration-icon.svg');
}
.commentaries-icon {
	background-image: url('/files/images/reception-history-icon.svg');
}
.copy-icon {
	background-image: url('/files/images/copy.svg');
}
.courses-icon {
	background-image: url('/files/images/courses-icon.svg');
}
.dashboard-icon {
	background-image: url('/files/images/dashboard-icon.svg');
}
.delete-icon {
	background-image: url('/files/images/delete-icon.svg');
}
.download-icon {
	background-image: url('/files/images/download-icon.svg');
}
.eye-icon {
	background-image: url('/files/images/eye-icon.svg');
}
.globe-icon {
	background-image: url('/files/images/globe-icon.svg');
}
.history-icon {
	background-image: url('/files/images/history-icon.svg');
}
.feature-icon {
	background-image: url('/files/images/admin-icon.svg');
}
.feedback-icon {
	background-image: url('/files/images/feedback-icon.svg');
}
.files-icon {
	background-image: url('/files/images/hyperlink.svg');
}
.health-icon {
	background-image: url('/files/images/health-icon.svg');
}
.location-icon {
	background-image: url('/files/images/location-icon.svg');
}
.justify-icon {
		background-image: url('/files/images/align-justify.svg');
}
.like-icon {
		background-image: url('/files/images/like-icon.svg');
}
.search-icon {
	background-image: url('/files/images/search-icon.svg');
}
.shop-icon {
	background-image: url('/files/images/shop.svg');
}
.mail-icon {
	background-image: url('/files/images/mail-icon.svg');
}
.note-icon {
	background-image: url('/files/images/copy.svg');
}
.upload-icon {
	background-image: url('/files/images/upload-icon.svg');
}
.article-icon {
	background-image: url('/files/images/article-icon.svg');
}
.articles-icon {
	background-image: url('/files/images/articles.svg');
}
.save-icon {
	background-image: url('/files/images/save.svg');
}
.shortcut-icon {
	background-image: url('/files/images/font.svg');
}
.study-icon {
	background-image: url('/files/images/parallel-note-icon.svg');
}
.parallel-icon {
	background-image: url('/files/images/parallel.svg');
}
.perspective-icon {
	background-image: url('/files/images/perspective-icon.svg');
}
.pin-icon {
	background-image: url('/files/images/pin-icon.svg');
}
.print-icon {
	background-image: url('/files/images/print.svg');
}
.information-icon {
	background-image: url('/files/images/information-icon.svg');
}
.logout-icon {
	background-image: url('/files/images/logout-icon.svg');
}
.maximise-icon {
	background-image: url('/files/images/maximise.svg');
}
.minimise-icon {
	background-image: url('/files/images/minimise-icon.svg');
}
.night .minimise-icon {
	filter: invert(100%);
}
.write-icon {
	background-image: url('/files/images/pen-icon.svg');
}
.feed-icon {
	background-image: url('/files/images/feed-icon.svg');
}
.folders-icon {
	background-image: url('/files/images/folder-icon.svg');
}
.highlight-icon {
	background-image: url('/files/images/highlight.svg');
}
.liturgy-icon {
	background-image: url('/files/images/liturgy-icon.svg');
}
.dictionary-icon {
	background-image: url('/files/images/dictionary-icon.svg');
}
.exercise-icon {
	background-image: url('/files/images/exercise-icon.svg');
}
.flashcard-icon {
	background-image: url('/files/images/flashcard.svg');
}
.map-icon {
	background-image: url('/files/images/map.svg');
}
.model-icon {
	background-image: url('/files/images/model.svg');
}
.manuscript-icon {
	background-image: url('/files/images/manuscript.svg');
}
.manuscript-index-icon {
	background-image: url('/files/images/manuscript-index.svg');
}
.mindmap-icon {
	background-image: url('/files/images/mindmap.svg');
}
.notification-icon {
	background-image: url('/files/images/notification-icon.svg');
}
.ocr-icon {
	background-image: url('/files/images/ocr-icon.svg');
}
.picture-icon {
	background-image: url('/files/images/picture.svg');
}
.calendar-icon {
	background-image: url('/files/images/lectionary-icon.svg');
}
.bibliography-icon {
	background-image: url('/files/images/bibliography-icon.svg');
}
.comment-icon {
	background-image: url('/files/images/comment-icon.svg');
}
.close-icon {
	background-image: url('/files/images/close-icon.svg');
}
.close-icon-grey {
	background-image: url('/files/images/close-icon.svg');
	filter: invert(1);
}
.repost-icon {
	background-image: url('/files/images/repost-icon.svg');
}
.sandbox-icon {
	background-image: url('/files/images/sandbox-icon.svg');
}
.security-icon {
	background-image: url('/files/images/security-icon.svg');
}
.settings {
	background-image: url('/files/images/settings.svg');
	display: inline-block;
	vertical-align: middle;
}
.send-icon {
	background-image: url('/files/images/send-icon.svg');
}
.filter-icon {
	background-image: url('/files/images/filter-icon.svg');
}
.filter-bottle-icon {
	background-image: url('/files/images/filter-bottle-icon.svg');
}
.meatballs-icon {
	background-image: url('/files/images/meatballs-icon.svg');
}
.kebab-icon {
	background-image: url('/files/images/kebab-icon.svg');
}
.statistics-icon {
	background-image: url('/files/images/statistics-icon.svg');
}
.translation-icon {
	background-image: url('/files/images/translation-icon.svg');
}
.tagging-icon {
	background-image: url('/files/images/tagging-icon.svg');
}
.font-size-icon {
		background-image: url('/files/images/size.svg');
}
.help-icon {
	background-image: url('/files/images/help.svg');
}
.info-icon {
	background-image: url('/files/images/info-icon.svg');
}
.undo-icon {
	background-image: url('/files/images/undo.svg');
}
.verify-icon {
	background-image: url('/files/images/verify-icon.svg');
	margin: 0px 2px;
}
.home-icon {
	background-image: url('/files/images/home.svg');
	display: inline-block;
	vertical-align: middle;
}
.night .home-icon {
	filter: invert(100%);
}
.magnify-glass {
	background-image: url('/files/images/magnify-glass.svg');
	display: inline-block;
	vertical-align: middle;
}
.night-icon {
	background-image: url('/files/images/night.svg');
	display: inline-block;
	vertical-align: middle;
}
.profile-icon {
	background-image: url('/files/images/profile.png');
	display: inline-block;
	vertical-align: middle;
}
.people-icon {
	background-image: url('/files/images/people-icon.svg');
}
.group-icon {
	background-image: url('/files/images/group-icon.svg');
}
.url-icon {
	background-image: url('/files/images/hyperlink.svg');
}
.video-icon {
	background-image: url('/files/images/video.svg');
}
.red-delete {
	background-color: #C55;
	color: #DD0;
	font-weight:bold;
	cursor: pointer;
	padding: 0px 0.5em;
	border-radius: 0.5em;
}
.red {
	background-color: #D55;
	color: #FFE;
	cursor: pointer;
}
.pink {
	background-color: #ffc0cb;
	color: #000;
	cursor: pointer;
}
.orange {
	background-color: #FA0;
	font-weight: bold;
	/*text-decoration:underline;*/
	cursor: pointer;
}
.green {
	color: #888;
	background-color: #0A0;
	font-weight:bold;
	/*text-decoration:underline;*/
	cursor: pointer;
	display:none;
}
.plain-green {
	color: #008800;
	background-color: #0F0;
	font-weight:bold;
	cursor: default;
	border:none;
	border-radius: 0px;
	background-color: white;
}
table.bordered {
	border-collapse: collapse;
	border: 1px solid;
	border-color: #DDF;
	page-break-inside: avoid;
}
.divider {
	border-left: 2px solid #888;
	height: 100%;
	margin: 0em 0.5em;
	
}
#dictionaryTable.tr {
	border-top: solid 1px;
}
.dictionaryDiv {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.dictionary-table {
	overflow: auto;
	height: 100%;
}
th {
	background: linear-gradient(0deg, rgb(156 172 219) 0%, rgb(100 153 193) 100%);
	padding: 0.3em;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	border: none;
	user-select:none;
}
.night th {
	background: linear-gradient(0deg, rgb(92 92 92) 0%, rgb(60 60 60) 100%);
	color: #DDD;
}
th.bordered {
	border-collapse:collapse;
	border:1px solid;
	border-color: #CCF;
}
td.bordered {
	padding: 0.2em 0.3em 0.2em 0.3em;
	border-collapse:collapse;
	border:1px solid;
	border-color: #DDDDFF;
}
th .sort {
	cursor: pointer;
}
th .check {
	width: 0.9em;
	height:0.9em;
	border: 1px solid gray;
	display: inline-flex;
	cursor: pointer;
}
.hebrew-table td {	
	direction: rtl;
	padding: 0px 0.2em;
}
.bordered tr {
	border: 1px solid var(--line-clr);
}
.selectable {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.coloured tr.selectable:hover {
	background-color: lightgreen;
	transition: 0.5s;
}
.compressed-table td:nth-child(4) {
	max-height: 480px;
	display: block;
	overflow: auto;
}
.selectable td {
	padding: 0.5em 0.2em;
}

.bordered td {
	border: 1px solid var(--line-clr);
}
td.clipped {
	max-width: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.normal-size {
	font-size: inherit;
}
.coloured tr:nth-child(odd)		{ background-color:#eef; }
.coloured tr:nth-child(even)		{ background-color:#fff; }

.coloured-odd tr:nth-child(odd)		{ background-color:#fff; }
.coloured-odd tr:nth-child(even)		{ background-color:#eef; }

table.plain {
	border: none;
}
table.plain th {
	background-color: transparent;
	border: none;
}
table.plain td {
	border: none;
}
.collapse {
	border-collapse: collapse;
	padding: 0;
	margin: 0;
}
.collapse td {
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	margin :0;
}
.backend {
	font-size: 1em;
	border-collapse: collapse;
	border: none;
	margin-top: 0.5em;
}
.backend .home-button {
	border: 1px solid var(--line-clr);
	background-color: #DAFFED;
}
.night .backend .home-button {
	border: none;
	background-color: #444;
}
.backend th {
	border-right: 1px solid var(--line-clr);
	padding: 0.8em 5px;
	word-break: normal;
}

.backend td {
	border-bottom: 1px solid #DDD;
	word-break: normal;
}
.backend tr:hover {
	background-color: #AAF;
}

.comment-entry {
	padding-bottom: 0.5em;
}
.message-entry-box {
	width:100%;
	box-sizing: border-box;
	font-family: sans-serif;
	padding: 8pt;
	border: 1px solid grey;
	margin: 2px;
}
.commentButton {
	font-size: 0.9em;
	cursor: pointer;
	padding: 4px;
	border: none;
	display: inline-block;
	-webkit-column-break-inside: avoid;	
}
.commentBox {
	border: solid;
	border-color: gray;
	border-width: 1px 0px 0px 0px;
}
.commentBox a {
	display: initial;
	color: navy;
	text-decoration: underline;
}
.commentSubBox {
	box-sizing: border-box;
	border: solid;
	border-color: var(--line-clr);
	border-width: 1px 0px 0px 0px;
	margin-left: 24px;
	margin-top: 0px;
	background-color: #F0F0FF;
	color: black;
}
.commentSubBox a {
	display: initial;
}
.commentReplyBox {
	border: 1px;
	background-color: #FFF;
	color: black;
	min-width: 200px;
	display: inline-block;
	border: 1px solid var(--line-clr);
}
.comment-entry-box {
	background-color: inherit;
}

/* Popup menus */
.feedback-form form {
	width: 100%;
}
.feedback-form textarea {
	resize: vertical;
}
.canvas-container {
	display:flex;
	margin: auto;
}
canvas {
	margin: auto;
}
.feedback-form canvas {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	overflow: auto;
}
.popup-container {
	width: 100%;
	height: 100%;
	z-index: 15;
	top: 0px;
	inset-inline-start: 0;
	position: fixed;
	visibility: hidden;
	display: flex;
	align-items: center;
}
.popup-items {
	max-height:70vh;
	overflow:auto;
}
.printOptions {
	width: 320px;
}
.publishOptions {
	width: 310px;
}
.popupOptions {
	position: relative;
	margin: auto;
	padding: 10px 1em;
	max-height: 100vh;
	overflow: auto;
	border: solid 1px;
	background-color: var(--base-clr);
	border-radius: 10px;
	border-color: var(--line-clr);
	display: none;
	visibility: visible;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.2);
}
.night .popupOptions {
	background-color: black;
}
.popupOptions.publishOptions.setup {
	position: fixed;
	z-index: 15;
	top: 0px;
	inset-inline-start: 0;
	height: 100%;
	padding: 10px;
	margin: 0px;
	border: 1px solid var(--line-clr);
	/* border-radius: 5px; */
	display: none;
	width: initial;
	max-width: 100%;
	overflow: auto;
	box-sizing: border-box;
	border-width: 2px;
}
/** Tooltip */
.tooltip {
	position: absolute;
	background: var(--text-clr);
	color: var(--base-clr);
	padding: 6px 10px;
	border-radius: 4px;
	z-index: 9999;
	pointer-events: auto; /* tooltip never blocks hover */
	max-width: 300px;
}

/* Arrow ABOVE tooltip, pointing UP */
#tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -6px; /* arrow sits above tooltip */
    width: 0;
    height: 0;

    /* THIS is the correct orientation */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--text-clr); /* UPWARD arrow */
}
/** Images */
.image-display {
	position:fixed;
	z-index:15;
	top:5%;
	left: 10%;
	width: 80%;
	padding: 1em;
	display: none;
	flex-direction: column;
	overflow: auto;
	max-width: 100vw;
	max-height: 100vh;
	background-color: white;
	border: 2px solid var(--line-clr);
	border-radius: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.night .image-display {
	background-color: black;
}
.image-api-display-image {
	max-width: 60vw;
	max-height: 60vh;
	margin: 1em;
	flex-direction: column;
	border-radius: 8px;
}
.image-photo {
	display: flex;
	flex-direction: column;
}
.image-details {
	display: flex;
	width: 100%;
	flex-direction: column;
}
.image-row {
	display: flex;
	width: 100%;
	flex-direction: row;
}
.submit-buttons-container {
	text-align: right;
}
ul {
	margin:0;
}
ol {
	margin:0;
}
/* Pagination */
ul.pagination {
	display: inline-block;
	padding: 0;
	margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	border: 1px solid #008040;
	margin: 4px;
}
ul.pagination li a.active {
	background-color: #4CAF50;
	color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.centre {
	text-align: center;
}
/* Menu Bar Notification messages*/
.new-messages {
	float: right;
	padding: 1px 6px;
	color: white;
	font-size: 12px;
	background-color: red;
	border: 1px solid white;
	border-radius: 1em;
	margin: 4px 4px 0px 1px;
	cursor: pointer;
}
.nav-new {
	position: absolute;
	margin: -22px -10px 0px 15px;
	z-index: 2;
}
.night .new-messages {
	background-color: darkred;
	color: #AAA;
	border-color: #AAA;
}
/*userOptionsMenu*/
ul.userOptionsMenu, ul.dropdown-menu {
	list-style: none;
	display: flex;
	margin: auto;/*0px;*/
	padding: 0px 5px;
	position: relative;
}
ul.dropdown-menu {
	list-style: none;
	display: flex;
	margin: auto;/*0px;*/
	padding: 0px 5px;
	position: relative;
	padding: 8px;
	border-radius: 0.5em;
	user-select: none;
}
ul.dropdown-menu.round-menu {
	border-radius: 2em;
}
ul.dropdown-menu.dropdown-menu-round {
	border-radius: 2em;
	padding: 8px;
}
ul.dropdown-menu:hover {
	background-color: #e2e1ff;
}
.night ul.dropdown-menu:hover {
	background-color: #333;	
}
.find-form .dropdown-menu > li {
	width: max-content;
}
.dropdown-menu li .userOptionsSubMenu {
	padding: 0.7em;
}
.userOptionsSubMenu li {
	justify-content: flex-start;
	display: flex;
	align-items: stretch;
	padding: 8px 4px;
}
.userOptionsSubMenu li label {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.userOptionsSubMenu li label:first-child {
	flex-grow: 1;
	/*padding-left: 12px;*/
}
.userOptionsSubMenu li div {
	width: 100%;
}
ul.dropdown-menu li {
	cursor: pointer;
	border-radius: 12px;
}
ul.dropdown-menu .svg-img-tiny {
	margin-right: 0.4em;
}
ul.userOptionsSubMenu li:hover {
	/*font-weight: bold;*/
	background-color: var(--hover-clr);
}
.menu-options-controls {
	float: right;
	display: flex;
	flex-direction: row-reverse;
}
.bottom-left-menu {
	inset-inline-start: 0;
	bottom: 32px;
}
.home-menu {
	align-items: center;
	box-sizing: border-box;
	min-height: fit-content;
	margin-top: auto;
	text-align: left;
}

ul.home-menu {
	padding: 8px 0px 8px 4px;
	align-items: stretch;
}
.home-menu .nav-text, .home-menu .nav-text2 {
	overflow: hidden;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-grow: 1;
}
.close .home-menu  ul.userOptionsMenu, .close ul.dropdown-menu {
	margin: 0px;/*auto 0px 0px 7px;*/
	padding: 4px;
	width: fit-content; 
}
.close .home-menu .svgImg {
	margin: 0px;
}
.home-menu .bottom-left-menu {
	bottom: 50px;
}
.dropdownRight {
	padding: 5px 5px;
	position: absolute;
	right: 12px;
}

.userOptionsSubMenu.leftMenu {
	min-width: 200px;
	max-width: 320px;
	width: max-content;
	float:right;
	inset-inline-end: 0;	/* replaces right:0 */
	list-style: none;
	position: absolute;
	display: none;
	background-color: var(--base-clr);
	max-height: 90vh;
	overflow: auto;
	border: 1px solid var(--line-clr);
	border-radius: 10px;
	padding: 4px 0px;
	margin: 0px 4px;
	box-shadow: 1px 2px 4px 0px var(--shadow-clr);
	z-index: 12;
}
.search-bar-menu .userOptionsSubMenu {
	min-width: 340px;
}
.search-bar-menu .userOptionsSubMenu details {
	width: 100%;
}
.userOptionsSubMenu.right-menu {
	inset-inline-start: 0;
	max-height: 90vh;
	overflow: auto;
}
.userOptionsSubMenu.rightMenu {
	min-width: 150px;
	float:right;
	inset-inline-start: 0;
	list-style: none;
	position: absolute;
	display: none;
	background-color: white;
	border: 2px solid var(--line-clr);
	border-radius: 10px;
	padding: 4px 0px;
	margin: 4px;
	box-shadow: 0px 0px 16px 8px rgba(0,0.2,0,0.2);
	z-index: 3;
}
.night .userOptionsSubMenu.rightMenu {
	background-color: #555;
	border-color: #777;
}
.show-menu .userOptionsSubMenu {
	display: block;
}
ul.userOptionsMenu:hover .userOptionsSubMenu {
	display: block;
	position: absolute;
	z-index: 4;
}

.userOptionsSubMenu > li > span, .find-text-container .userOptionsSubMenu > li,
.search-bar-menu .userOptionsSubMenu > li.menu-button, .search-bar-menu .userOptionsSubMenu .sub-menu ul > li.menu-button {
	color: var(--text-clr);
	display: inline-flex;
	padding: 12px 10px;
	text-decoration: none;
	border:none;
	vertical-align: middle;
	box-sizing: border-box;
}
.userOptionsSubMenu > li {
	padding: 12px 10px;
}
.find-text-container .userOptionsSubMenu li {
	width: 100%;
}
.find-text-container .userOptionsSubMenu li a {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}
.userOptionsSubMenu.compact-menu li {
	padding: 8px 8px;
}
.night .userOptionsSubMenu li a,.night .userOptionsSubMenu > li > span {
	color: #EEE;
}

.userOptionsSubMenu-bottom {
	min-width: 160px;
	float: left;
	inset-inline-start: 0;
	list-style: none;
	position: absolute;
	display: none;
	background-color: white;
	border: 1px solid var(--line-clr);
	border-radius: 10px;
	padding: 4px 0px;
	margin: -4px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 3;
}
.night .userOptionsSubMenu-bottom {
	background-color: #555;
}
.night .userOptionsSubMenu-bottom li a {
	color: #DDD;
}
.userOptionsMenu-bottom li:hover {
	background-color: #aaf;
}

.dropmenu-head-2 {
	display: block;
}
.menu-left::before {
	color: rgb(116, 119, 121);
	content: "◄";
	margin-right: 5px;
}
.menu-right::after {
	color: rgb(116, 119, 121);
	content: "►";
	margin-right: 5px;
	float: right;
}
.dropmenu-head-2:hover .dropmenu-2 {
	display: inline-table;
	min-width: 180px;
}
.dropmenu-2 {
	position: absolute;
	right: calc(100% - 8px);
	list-style: none;
	background-color: white;
	display: none;
	border: 1px solid var(--line-clr);
	border-radius: 10px;
	padding: 8px 0px;
	margin: -32px 0px;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.2);
}
.dropmenu-2.left {
	position: absolute;
	left: calc(100% - 8px);
}
.night .dropmenu-2 {
	background-color: #555;
	border-color: #777;
}
.dropmenu-2 li hr {
	background: navy;
	height: 2px;
}

ul.userOptionsMenu:hover .userOptionsSubMenu-bottom {
	display: block;
	position: absolute;
	bottom: 100%;
	z-index: 4;
}
.userOptionsSubMenu-bottom li a {
	color: black;
	padding: 8px 16px;
	text-decoration: none;
	border:none;
	vertical-align: middle;
	width: 100%;
	box-sizing: border-box;
}
.menu-controls {
	white-space: nowrap;
	padding: 0px 8px;
}
.dropdown {
	padding: 4px;
	margin: 0px 4px;
	cursor: pointer;
}
ul.userOptionsMenu.home-menu {
	margin: 12px auto;
}
.home-menu .userOptionsSubMenu li {
	width: 100%;
	display: inline-flex;
	text-align: left;
	padding: 0px;
}
.home-menu .userOptionsSubMenu li a {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}
.home-menu .userOptionsSubMenu li span {
	display: inline-flex;
}
.nav-menu .home-menu li.home-menu-copyright {
	font-size: 1em;
	opacity: 0.6;
}
.home-menu .userOptionsSubMenu li.home-menu-copyright > span {
	display: block;
	padding: 0px 10px;
}
.home-menu .userOptionsSubMenu li.home-menu-copyright a {
	display: inline-block;
	padding: 0px 10px 0px 0px;
	width: auto;
}
ul.userOptionsSubMenu li.home-menu-copyright:hover {
	background-color: initial;
	font-weight: initial;
}
.home-menu .userOptionsSubMenu li.home-menu-copyright a:hover {
	text-decoration: underline;
}
.home-menu .dropdown {
	padding: 0px;
	margin: 0px;
	display: block;
	border: none;
	background-color: transparent;
}
.home-menu .label {
	color: white;
	padding-right: 4px;
}
.home-menu .svgImg {
	padding: 2px 4px 2px 0px;
	width: 28px;
	height: 28px;
	min-width: 28px;
	margin: 2px 6px 2px 2px;
}

.home-menu .user-img {
	display: block;
	margin: 0px 8px 0px 0px;
	background-image: url(/image-profile/tiny);
	border: 1px solid #555;
	padding: 0px;
	border-radius: 20px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
.home-menu .dropdown::after {
	color: rgb(116, 119, 121);
	content: "";
	margin-left: 0px;
}
.home-menu .userOptionsSubMenu.leftMenu {
	margin: 0px;
	width: 350px;
	overflow: auto;
}
.home-apps-icon {
	width: 32px;
	height: 32px;
	background-image: url(/files/images/bento-icon.svg);
	filter: brightness(0) invert(1);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
	display:block;
}
.home-apps .dropdown {
	padding: 0px;
	margin: 0px;
	display: block;
	border: none;
	background-color: transparent;
}
.home-apps .dropdown::after {
	 content: "";
}

/*Images */
.image-popup {
	max-width: 280px;
	border-radius: 10px;
}
.imageThumbnail {
	display:inline-block;
	max-width: 100px;
	max-height: 100px;
	width: 50px;
	height: 50px;
	border-radius: 6px;
}
.imageThumbnailContainer {
	display:inline-block;
	text-align: center;
	width: 150px;
	height: 150px;
	padding: 0.8em;
	margin: 2px;
	vertical-align: top;
	border-radius: 6px;
}
.imageThumbnailContainer:hover {
	background-color: #DDF;
}
.delete {
	color:red;
	cursor:pointer;
}
.cardo-font {
	font-family: Cardo, "Galatia SIL", "Ezra SIL", Syriac, serif;
}
.cardo-font table {
	font-family: Cardo, "Galatia SIL", "Ezra SIL", Syriac, serif;
}
.cardo-font .button {
	font-family: Cardo, "Galatia SIL", "Ezra SIL", Syriac, serif;
}
.hebrew {
	float: right;
	word-break: initial;
	direction: rtl;
}
.greek {
	word-break: initial;
}
.nobreak {
	word-break: initial;
}
/**
 * For book-explorer.php
 */
.work-author {
	font-size: 1.3em;
	display: block;
	font-weight: bold;
}
.book-group {
	margin-left: 2em;
}
/**
 * Loading icon
 */
.load-box {
	position: absolute;
	top:40%;
	bottom: 60%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 1.2em;
}
.load-box.fixed {
	position: fixed;
}
.loader {
	border: 10px solid #f0f0f0;
	border-top: 10px solid #8989c1;
	border-radius: 50%;
	box-sizing: border-box;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 80px;
	height: 80px;
	animation: spin 1.5s linear infinite;
}
.loader.small-loader {
	width: 24px;
	height: 24px;
	border-width: 4px;
	vertical-align: middle;
}
.load-percent {
	position: relative;
	top: 57px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/**
 * Night mode
 */
.night .coloured tr:nth-child(even) {
	background-color: black;
	color: white;
}
.night .coloured tr:nth-child(odd) {
	background-color: #555;
	color: white;
}
.night .coloured-odd tr:nth-child(odd)		{ background-color:black; }
.night .coloured-odd tr:nth-child(even)		{ background-color:#555; }
/**
 * Notifications and hints
 */
.notification {
	display: block;
	position: fixed;
	bottom: 10px;
	left: 10px;
	background-color: #333;
	font-family: sans-serif;
	color: #CCC;
	padding: 5px 10px 5px 1em;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
	z-index: 20;
}
.notification.alert {
	background-color: #A00;
	color: #FFC;
}
.notification.cookie-alert {
	background-color: #473198;
	color: #EEE;
}
.hint {
	display: block;
	border: 1px solid #AAA;
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: #CEF;
	font-family: sans-serif;
	color: #333;
	padding: 5px 10px 5px 1em;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
}
.night .hint {
	background-color: #552;
	color: #CCC;
	border-color: #111;
}
.notification a {
	text-decoration: underline;
}

/* Preference pages */
.preferences summary {
	font-size: 1.5em;
	font-weight: bold;
	cursor: pointer;
	color: #444;
	background-color: #AAF;
	border-radius: 12px;
	padding: 6px;
}
.preferences select {
	max-width: 100%;
}
.preferences summary:hover {
	background-color: #55C;
	color: #EEE;
}
.preferences details {
	border: 1px solid var(--line-clr);
	border-radius: 12px;
	margin: 6px 0px;
}
.preference-group {
	padding: 0.5em 1em;
	background-color: var(--base-clr);
}
.preference-group div {
	display: flex;
}
.preference-row {
	display: flex;
}
.settings-text {
	display: flex;
	flex-grow: 1;
	align-items: center;
}

/* The switch - the box around the slider */
input[type=radio] {
	border: 0px;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin: 1em 4px;
}
input[type=range] {
	vertical-align: middle;
	margin: 1em 4px;
	width: 240px;
	padding: 0px;
}
.menu-list-expanded input[type=range] {
	width: 420px;
	max-width: 90vw;
}
.switch {
	position: relative;
	display: inline-block;
	width: 54px;
	height: 24px;
	vertical-align: middle;
	margin: 4px 4px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 24px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 5px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(32px);
	-ms-transform: translateX(32px);
	transform: translateX(32px);
}


.find-text-container {
	display: flex;
	flex-direction: row;
	min-height: fit-content;
}
.search-bar-menu, .search-bar-options {
	display: flex;
}
.search-bar-menu > ul, .search-bar-options > ul {
	width: max-content;
	display: flex;
}
.search-bar-menu .userOptionsSubMenu > li {
	padding: 0px;
}
.search-bar-menu .userOptionsSubMenu > li[data-action] {
	padding: 12px 10px;
}
.search-bar-menu .userOptionsSubMenu > li > details > summary {
	padding: 12px 0px;
}
.find-form {
	margin-top: 0px;
	flex-grow: 1;
	position: relative;
}
.find-form form {
	display: flex;
}
.find-form li {
	display: block;
}
.find-form:focus-within {
	background-color: var(--input-clr);
	
}
.find-form:focus-within .search-bar {
	border-radius: 0px;
	border-color: var(--input-clr);
}
.search-option {
	min-width:200px;
	height:1em;
}
.autocomplete-items div.search-page {
	background-color: #DDF;
}
.search-bar-autocomplete {
	display: block;
	z-index: 4;
	position: absolute;
	top: 40px;
	display: none;
	width: 100%;
}
.search-bar-autocomplete.show-menu {
	display: inherit;
}
.search-bar-autocomplete .autocomplete-dropdown {
	width: 100%;
	background-color: var(--input-clr);
	border-radius: 0px 0px 10px 10px;
	padding: 10px;
	filter: drop-shadow(1px 2px 3px var(--line-clr));
}

.night .search-bar-autocomplete .autocomplete-items {
	background-color: black;
}
.search-bar-autocomplete .autocomplete-items div {
	padding: 4px;
}
.autocomplete-items div {
	padding: 0px 0.3em;
	cursor: pointer;
	background-color: var(--base-clr); 
	border-bottom: 1px solid #d4d4d4; 
}
.search-bar-autocomplete .autocomplete-items div {
	display: flex;
	justify-content: space-between;
}
.night .autocomplete-items div {
	background-color: black;
}
.search-bar {
	background-color: var(--input-clr);
	border: 1px solid #CCF;
	border-radius: 2em;
	padding: 2px 8px;
	display: flex;
	width: 100%;
	min-width: 150px;
	margin-inline-start: 4px;
	background-image: url(/files/images/magnify-glass.svg);
	background-position: 12px 9px;
	background-repeat: no-repeat;
	background-size: 24px;
	padding-inline-start: 36px;
}
:dir(rtl) .search-bar {
	background-position: right 12px top 9px;
}

.search-bar-items {
	display: inline-flex;
	margin-inline-start: 10px;
	width: 100%;
}
.search-bar-item-group {
	display: flex;
	flex-direction: row;
}
.search-bar-items > div:last-child {
	width: 100%;
}
.search-bar-items > div:last-child input {
	width: 100%!important;
}
.search-bar-items .delete-icon {
	width: 10px;
	height: 10px;
	margin-block: 0;
	margin-inline-start: 4px;
	margin-inline-end: 0;
}
.search-bar .button {
	transition: 0s;
}
.search-bar .button:focus {
	border: 2px solid gray;
	filter: drop-shadow(1px 2px 3px gray);
	margin: 0px;
}
.search-bar input {
	background-color: var(--input-clr);
	color: var(--text-clr);
	border: none;
	padding: 2px 2px 2px 2px;
	margin: 0px 0px;
	/*height: 40px;*/
	font-size: 1.2em;
	font-family: Cardo, 'Galatia SIL','Ezra SIL', Syriac, 'Arabic Scheherazade', serif;
	box-sizing: border-box;
	display: inline-flex;
	transition: 0s;
	unicode-bidi: plaintext;
}
.search-bar-clear {
	margin: auto;
	filter: opacity(0.4);
	padding-inline-end: 8px;
}
.search-bar-clear span {
	vertical-align: middle;
}
.search-bar-clear:hover {
	filter: opacity(1);
}
.night .search-bar input {
	background-color: black;
	border-color: black;
	color: #CCC;
}
.search-bar .button {
	color: #555;
	background-color: #EEF;
	cursor: pointer;
	font-family: Cardo, 'Ezra SIL', 'Galatia SIL', SBL, Syriac, 'Arabic Scheherazade';
	font-size: 1.1em;
	padding: 4px 8px;
	margin: 2px;
	border: none;
	border-radius: 8px;
	vertical-align: middle;
	display: inline-flex;
	white-space: nowrap;
}
.search-bar .search-button {
	color: #555;
	background-color: var(--input-clr);
	cursor: pointer;
	padding: 4px 8px;
	margin: 2px;
	border: none;
	border-radius: 16px;
	vertical-align: middle;
	display: inline-flex;
}
.search-bar .search-button:hover, .userOptionsSubMenu li div div ul li:hover {
	background-color: var(--hover-clr);
}
.search-bar .button.search-reference {
	background-color: #FEE;
}
.search-bar .button.search-translation {
	background-color: #DEE;
}
.search-bar .button.search-lemma{
	background-color: #DFD;
}
/** Autocomplete */
.autocomplete-items.auto-menu {
	position: absolute;
	border: 1px solid gray;
	z-index: 99;
	filter: drop-shadow(2px 4px 6px gray);
}
.find-form .autocomplete-items {
	max-height: calc(100vh - 100px);
	overflow: auto;
	display: block;
}
.expanded .autocomplete-items {
	position: absolute;
}


/*when hovering an item:*/
.autocomplete-items div:hover {
	background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
	background-color: DodgerBlue !important; 
	color: #ffffff; 
}
/* Profile page */
.bio {
	width: 100%;
	height: 80px;
	max-width: 100%;
}
/* Store */
.shared-notes-list {
	margin: 1em;
}
.shop-item {
	padding: 1em;
	border: 1px solid var(--line-clr);
	border-radius: 6px;
	margin: 1.5em 1em;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	background-color: var(--base-clr);
}
.shop-container .shop-item:hover {
	transform: scale(1.02);
	transition: transform .2s;
}
.shop-item a {
	text-decoration: underline;
}
.shop-item img {
	max-width: 100%;
}
.shop-item.selectable:hover {
	background-color: #CCE;
	transition: 0.5s;
}
.shop-collection {
	background-color: #eeefe0;
}
.package-collection {
	float: right;
	position: relative;
	font-weight: bold;
}
.post-feedback-container {
	height: 300px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: 1em;
	border: 1px solid var(--line-clr);
}
.img-thumb {
	vertical-align: middle;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
.img-thumb.large {
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}
.img-thumb:hover, .profile-photo:hover {
	filter: brightness(1.05) contrast(1.08);
}
.img-thumb.round {
	border-radius: 5px;
}
.img-thumb-group {
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 5px;
}
.note-image {
	max-height: 240px;
	max-width: 90%;
	margin: auto;
	float: left;
	padding: 1em;
}
.note-box {
	padding-bottom: 1em;
	margin: 12px 0px;
}
.note-box a{
	display: initial;
}
.category {
	color: grey;
	background-color: #ded;
	margin: 2px;
	padding: 4px;
	border: solid 1px #aba;
	border-radius: 3px;
}
.tag {
	background-color: #eef;
	margin: 2px;
	padding: 4px;
	border: solid 1px #ccd;
	border-radius: 3px;
}
.night .tag {
	background-color: #333;
}
/* Community */
.wide {
	width: 100%;
}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
	max-width: 100%;
	min-width: 25%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}
@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* The Close Button */
.image-close-button {
	position: fixed;
	top: 15px;
	right: 35px;
	color: #bbb;
	background-color: rgba(50,50,50,0.7);
	font-size: 30px;
	font-weight: bold;
	transition: 0.3s;
	border-radius: 20px;
	text-align: center;
	height: 40px;
	width: 40px;
}

.image-close-button:hover {
	color: #f1f1f1;
	background-color: rgba(50,50,50,1);
	text-decoration: none;
	cursor: pointer;
}
.image-next {
	top: 50%;
}
.image-previous {
	top: 50%;
	left: 5px;
}

/*Media Queries */
@media screen and (min-device-width: 641px) {
	/** Chrome scrollbar*/
	.night main ::-webkit-scrollbar {
		background-color: var(--line-clr);
		width: 12px;
	}
	/* Track */
	.night  main ::-webkit-scrollbar-track {
		background: #222;
	}
	body.night ::-webkit-scrollbar-thumb {
		background: #444; 
	}
	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #CCC;
		border-radius: 6px;
	}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #AAA; 
	}
	.translation-type li {
		margin: 0.3em 0.2em 0em 0.2em;
	}
	.menu-list-expanded {
		max-width: 640px;
	}
/* Buttons */
::-webkit-scrollbar-button:single-button {
	background-color: #EEE;
	display: block;
	border-style: solid;
	height: 13px;
	width: 16px;
}
.night ::-webkit-scrollbar-button:single-button {
	border-color: #333!important;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #CCC transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
	border-color: transparent transparent #888 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
	border-width: 6px 6px 0 6px;
	border-color: #CCC transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
	border-color: #888 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:decrement:hover {
	border-color: transparent transparent #888 transparent;
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #CCC;
}
::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
	border-color: transparent transparent transparent #888;
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
	border-width: 6px 6px 6px 0;
	border-color: transparent #CCC transparent transparent;
}
::-webkit-scrollbar-button:horizontal:single-button:decrement:hover {
	border-color: transparent #888 transparent transparent;
}


}
@media screen and (max-width: 800px) { /*iPad vertical*/
	#wrapper-left {display:none;}
}
@media screen and (max-width: 639px) {
	.mobile-toggle-button {
		display: inline-block;
	}
	.sidebar {
		display: none;
		position: absolute;
	}
	#minimised-hamburger {display: none!important}
	.parallax {
		background-position-y: 31px;
	}
	.menu_1 {
	}
	ul.userOptionsMenu {
		margin: 0px;
	}
	.login-sign-up {
		display: none;
	}
	.home-button {
		width: 100px;
		height: 100px;
	}
	.home-button-icon {
		width: 80px;
		height: 80px;
	}
	.home-button-icon:hover {
		margin-top: 0px;
	}
	.tile-2 {
		width: 324px;; /*205px;*/
		height: auto;/*92px;*/
		padding: 4px 9px 4px 4px;
	}
	.tile-3 {
		width: 324px;/*324px;*/
		height: auto;/*92px;*/
		padding: 4px 9px 4px 4px;
	}
	.tile-3x3 {
		padding: 4px 9px 4px 4px;
		width: 324px;
		height: 324px;
	}
	.parallax-detail {
		font-size: 1em;
		padding: 30px 20px;
	}
	.widget-home-container {
		display: none;
	}
	.medium-expanded {
		display: none;
	}
	.small-screen-only {
		display: initial;
	}
	.wrapper-home-outer {
		display: block;
	}
	.wrapper-right {
		width: 352px;
		min-width: 352px;
		max-width: 352px;
	}
	.find-form {
		position: initial;
		min-width: 100%;
	}
}
@media screen and (max-width: 480px) {
	.wrapper {
		padding: 0px;
	}
	.footer-spans {
		display: none;
	}
	.expanded {
		display: none;
	}
	.button {
		padding: 6px 14px;
	}
	.nav-menu li button.nav-mobile  {
		display: inherit;
	}
	.sidebar-header button {
		padding: 8px 2px;
		margin: 0px 2px 0px 2px;
	}
	.find-text-container {
		overflow-x: auto;
	}
	.find-text-container .userOptionsSubMenu {
		left: 0px;
		position: fixed;
		width: 100%;
	}
	ul .userOptionsSubMenu.leftMenu.nav-menu {
		width: 100%;
		box-sizing: border-box;
		inset-inline-start: 0;   /* replaces left:0 */
		margin: 0px;
		max-height: 90vh;
		position: fixed;
		min-width: 100%;
		overflow: auto;
	}
	.home-menu .userOptionsSubMenu.leftMenu {
		width: 100vw;
		box-sizing: border-box;
		margin: 0px;
		max-height: 90vh;
		position: fixed;
		min-width: 100%;
	}
	ul.userOptionsMenu:hover .userOptionsSubMenu {
		display: block;
		position: fixed;
	}
	.image-display {
		top: 0px;
		left: 0px;
		width: 100%;
		box-sizing: border-box;
	}
	.sub-list {
		max-height: 300px;
	}
	.shop-item {
		padding: 0.4em;
		margin: 10px 6px;
	}
	.preference-group {
		padding: 0.1em;
	}
	.find-form button {
		display: none;
	}
	.search-option {
		display: none;
	}
}


@container (max-width: 639px) {
	.wrapper {
		padding: 0px;
	}
	.expanded {
		display: none;
	}
	.button {
		padding: 6px 14px;
	}
	.medium-expanded {
		display: none;
	}
	ul .userOptionsSubMenu.leftMenu.nav-menu {
		width: 100%;
		box-sizing: border-box;
		inset-inline-start: 0;   /* replaces left:0 */
		margin: 0px;
		max-height: 90vh;
		position: fixed;
		min-width: 100%;
		overflow: auto;
	}
	ul.userOptionsMenu:hover .userOptionsSubMenu {
		display: block;
		position: fixed;
	}
	.image-display {
		top: 0px;
		left: 0px;
		width: 100%;
		box-sizing: border-box;
	}
	.sub-list {
		max-height: 300px;
	}
	.shop-item {
		padding: 0.4em;
		margin: 10px 6px;
	}
	.preference-group {
		padding: 0.1em;
	}
}