* {
	--podmail_bg_color: #0a0a0a;
	--podmail_bg_hover: #1f1f1f;
}

html {
	font-size: 14px;
}

body {
	font-size: 1rem;
	background-color: var(--podmail_bg_color) !important;

	overflow-wrap: break-word;
	white-space: normal;
}

#mail_body a,
#mail_body a:active,
#mail_body a:hover,
#mail_body a:visited,
#compose_body_textarea a,
#compose_body_textarea a:active,
#compose_body_textarea a:hover,
#compose_body_textarea a:visited {
	color: #ffff00 !important;
}

#compose_body {
	overflow: auto;
	/* still scrollable */
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE/Edge */
}

#compose_body::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari */
}

#mail_body font[size],
#compose_body_textarea font[size] {
	font-size: var(--bs-body-font-size);
}

#mail_body font[color='#000000'],
#compose_body_textarea font[color='#000000'] {
	color: #222222 !important;
}

#mail_body p br {
	display: none;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar {
	width: 12px;
}

#mail_header_timestamp {
	margin-right: 12px;
}

#mail_headers_parent {
	overflow-y: scroll;
}

.timestamp {
	padding-right: 1rem;
}

::-webkit-scrollbar-track {
	background: #222;
}

::-webkit-scrollbar-thumb {
	background-color: #555;
	border-radius: 6px;
	border: 2px solid #222;
}

#sitelogo {
	height: 32px;
	max-height: 32px;
	margin: 0.25rem;
}

#charimg {
	width: 32px;
	height: 32px;
	margin: 0.25rem;
}

h4 {
	line-height: 32px;
}

.capitalize {
	text-transform: capitalize;
}

#tqStatus.offline,
#tqStatus.offline::before,
.red {
	color: red;
	content: "X ";
}

#tqStatus.online,
#tqStatus.online::before,
.green {
	color: green;
	content: "\2713 ";
}

.folder_label,
.mail_header {
	cursor: pointer;
	border: solid 1px transparent;
	background-color: inherit;
}

.mail_header {
	border-bottom: solid 1px #111;
	padding-top: 0.05em;
	padding-bottom: 0.05em;
}

.folder_selected,
.folder_label:hover,
.mail_header.selected,
.mail_header:hover {
	background: var(--podmail_bg_hover);
	transition: filter 0.2s ease;
}

.mail_header_top {
	cursor: default;
}

.mail_header_top:hover {
	background: inherit;
}

.mail_header span.from {
	min-width: 15em;
	width: 15em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mail_header span.timestamp {
	min-width: 11em;
	width: 11em;
}

.mail_header span.from {
	padding-right: 0.5em;
}

.showhide {
	display: none;
}

.mail_header_top {
	display: block;
	font-weight: bold;
}

.unread {
	font-weight: bold;
}

.hideit {
	display: none;
}

.messages {
	width: 100%;
	display: flex;
	flex-flow: column;
}

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

.resizable-x {
	resize: horizontal;
	overflow: auto;
}

.resizable-y {
	resize: vertical;
	overflow: auto;
}

#mail_container_full {
	margin-bottom: 0.5em;
	padding-left: 0.25em;
}

#leftpanel {
	min-width: 200px;
	max-width: 500px;
	padding-left: 0.25em;
}

.recipient+.recipient::before,
.compose_recipient+.compose_recipient::before {
	content: ', ';
}

.folder-name {
	font-weight: bold;
}

.folder-name:has(+ .unread_count:empty) {
	font-weight: normal;
}

.unread_count {
	font-weight: bold;
}

.unread_count:empty {
	display: none;
}

.unread_count:before {
	content: ' (';
}

.unread_count:after {
	content: ')';
}

.spinner {
	display: inline-block;
	/* make span behave like a block */
	width: 25px;
	height: 25px;
	border: 4px solid #ccc;
	border-top: 4px solid #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	vertical-align: middle;
	/* optional: align with surrounding text */
	margin-right: 1em;
	margin-top: 0.25em;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.esi-container {
	padding-top: 0.2em;
	padding-left: 0.25em;
	padding-right: 0.25em;
	margin-left: 0.25em;
	margin-right: 0.25em;
	text-align: center;
	background-color: red;
	color: white;
	line-height: 1.25em;
}

#about {
	margin: 0.25em;
}

hr {
	color: #ccc;
	background-color: #ccc;
}

hr.vertical-hr {
	width: 1px;
	transform-origin: right;
	border: none;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

#compose_body_textarea {
	margin: 0px;
	height: calc(100% - 4em);
}

.folder-name:has(+ .unread_count:empty) {
	font-weight: normal;
}

.compose_recipient {
	cursor: pointer;
	margin-right: 0.75rem;
}

#mail_all {
	padding-right: 0.5rem;
}

.recipient {
	margin-right: 0.75rem;
	margin-bottom: 0.5rem;
}

input,
textarea,
#compose_body_textarea,
#compose_body_textarea:focus {
	background-color: black;
	color: #ffffff;
	border: 1px solid #444;
	padding: 0.25em;
}

[contenteditable]:focus,
input:focus,
textarea:focus,
button:focus {
	outline: none;
	box-shadow: none;
}

input::placeholder,
textarea::placeholder,
[contenteditable]:empty::before {
	color: #aaa;
}

[contenteditable]:empty::before {
	content: attr(data-placeholder);
}

#mail_options .btn:not(:last-of-type),
#multi_mail_options .btn:not(:last-of-type),
#compose_options .btn:not(:last-of-type),
#compose_final_options .btn:not(:last-of-type) {
	margin-right: 1rem;
}

#btn_backToFolder {
	margin-right: 2rem;
}

#compose_options .btn:before {
	content: '+ ';
}

[contenteditable="true"]::-webkit-scrollbar-thumb:hover {
	cursor: default;
}


.left-img[style*="--left-img"]::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: var(--left-img);
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 0.5em;
	vertical-align: middle;
}

#compose_recipients_calculated {
	min-height: 35px;
	height: 32px;
}

#compose_recipients_calculated:empty:after {
	content: 'no recipients selected';
	font-size: 70%;
	font-style: italic;
	padding-top: 8px;
}

#mail_body_adjusted a {
	text-decoration: none;
}

#mail_body_adjusted[data-contrast="false"] {
	display: none;
}

.span_chk {
	padding: 0px;
	padding-right: 0.5rem;
	padding-top: 2px;
}

#btn_markReadStatus:after,
#btn_multi_markReadStatus:after {
	content: 'Read';
}

#btn_markReadStatus[data-read="true"]:after,
#btn_multi_markReadStatus[data-read="true"]:after {
	content: 'Unread';
}

#toast-container {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.toast {
	background: #333;
	color: #fff;
	padding: 14px 22px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	font-size: 1rem;
	pointer-events: auto;
}

#btn_viewLeft {
	width: 32px;
}

#btn_viewLeft:after {
	content: '☰';
}

#podmail:has(#mail_container_full:not(.d-none)) #btn_viewLeft:after {
	content: '⟵';
}

#folder_0 {
	border-bottom: solid 1px #333;
	margin-bottom: 0.5em;
}


.mailing_list:not(.mailing_list ~ .mailing_list):before {
	content: 'Mailing Lists';
	display: block;
	border-bottom: solid 1px #333;
	font-weight: bold;
	background-color: var(--podmail_bg_color);
	cursor: default;
}

@media (max-width: 60em) {
	body {
		width: 100% !important;
		max-width: 100% !important;
	}

	.overflow-auto {
		overflow: visible !important;
	}

	.mail_header.d-flex {
		flex-direction: column;
		border-bottom: solid 1px #ccc;
		padding-bottom: 1rem;
	}

	.mail_header span {
		text-align: left !important;
	}

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

	.xs-showit {
		display: block !important;
	}

	#leftpanel,
	#rightpanel {
		width: 100% !important;
	}
}

#compose_body,
#compose_body .ql-editor {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	overflow-x: hidden !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

#compose_body .ql-editor .ql-editing {
	max-width: 100% !important;
}