:root {
	color-scheme: light;

	--bs-bg: #F8F8F8;
	--bs-surface: #FFFFFF;
	--bs-surface-alt: #F0F0F0;
	--bs-border: #E5E5E5;


	--bs-text: #0A0A0A;
	--bs-text-dim: #6B7280;


	--bs-accent: #7C3AED;
	--bs-accent-strong: #6D28D9;
	--bs-accent-soft: #EDE9FE;
	--bs-accent-text: #0A0A0A;


	--bs-radius: 0;
	--bs-radius-sm: 0;
	--bs-radius-pill: 0;


	--bs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;


	--bs-scroll: #0000003d;
	--bs-scroll-hover: #00000066;

	--bs-on-accent: #FFFFFF;
	--bs-rail-hover: rgba(255, 255, 255, .08);
	--bs-shadow: rgba(0, 0, 0, .28);

	--bs-danger: #DC2626;
	--bs-danger-soft: #FEE2E2;
	--bs-info: #2563EB;
	--bs-info-soft: #DBEAFE;
	--bs-success: #16A34A;
	--bs-success-soft: #DCFCE7;
	--bs-warning: #EA580C;
	--bs-warning-soft: #FFEDD5;
}

html.dark-mode,
body.dark-mode {
	color-scheme: dark;

	--bs-bg: #000000;
	--bs-surface: #0A0A0A;
	--bs-surface-alt: #171717;
	--bs-border: #1F1F1F;

	--bs-text: #F5F5F5;
	--bs-text-dim: #9CA3AF;

	--bs-accent: #A78BFA;
	--bs-accent-strong: #8B5CF6;
	--bs-accent-soft: #1E1838;
	--bs-accent-text: #F5F5F5;

	--bs-scroll: #ffffff33;
	--bs-scroll-hover: #ffffff59;

	--bs-on-accent: #0A0A0A;
	--bs-rail-hover: rgba(255, 255, 255, .08);
	--bs-shadow: rgba(0, 0, 0, .5);

	--bs-danger: #EF4444;
	--bs-danger-soft: #3B1111;
	--bs-info: #3B82F6;
	--bs-info-soft: #0F1E3A;
	--bs-success: #22C55E;
	--bs-success-soft: #0A2818;
	--bs-warning: #F97316;
	--bs-warning-soft: #2E1A07;
}

body,
#layout,
.listing,
.messagelist,
.toolbar {
	font-family: var(--bs-font);
}

#layout {
	background: var(--bs-bg);
	gap: 8px;
	padding: 8px 8px 8px 0;
	box-sizing: border-box;
}

#layout-sidebar,
#layout-list,
#layout-content {
	background: var(--bs-surface);
	border: 0 !important;
	box-sizing: border-box;
}

#layout-content > .header,
#layout-content > .footer {
	background: transparent !important;
}

#layout-menu {
	border: 0;
	margin: -8px 0;
}

#taskmenu a.compose {
	background: transparent !important;
	box-shadow: none;
	transition: background .15s ease;
}

#taskmenu a.compose:hover {
	background: var(--bs-rail-hover) !important;
}

#taskmenu a.compose::before {
	color: var(--bs-accent) !important;
	background: transparent !important;
}

#mailboxlist li a,
.folderlist li a {
	color: var(--bs-text);
	transition: background .15s ease;
}

#mailboxlist li a:hover,
.folderlist li a:hover {
	background: var(--bs-surface-alt);
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
#mailboxlist li.selected,
.folderlist li.selected {
	background: var(--bs-accent-soft) !important;
	color: var(--bs-accent-text) !important;
	font-weight: 600;
}

#mailboxlist li.selected > a *,
.folderlist li.selected > a * {
	color: var(--bs-accent-text) !important;
}

#mailboxlist li a,
.folderlist li a,
.listing li a,
.treelist li a,
#settings-menu li a,
#mailboxlist li a:focus,
.folderlist li a:focus,
.listing li a:focus,
.treelist li a:focus,
#settings-menu li a:focus {
	border-left-color: transparent !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
.listing li.selected > a,
.treelist li.selected > a,
#settings-menu li.selected > a,
#mailboxlist li.selected > a:focus,
.folderlist li.selected > a:focus,
.listing li.selected > a:focus,
.treelist li.selected > a:focus,
#settings-menu li.selected > a:focus {
	border-left-color: var(--bs-accent) !important;
}

#mailboxlist li.selected > a .unreadcount,
.folderlist li.selected > a .unreadcount {
	background: transparent;
	color: var(--bs-accent-text);
	font-weight: 700;
}

.searchbar {
	background: var(--bs-surface-alt);
	border: 0;
	margin: 8px;
	transition: background .15s ease, box-shadow .15s ease;
}

.searchbar:focus-within {
	background: var(--bs-surface-alt);
	box-shadow: inset 0 -2px 0 var(--bs-accent);
}

.searchbar input,
.searchbar input:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.messagelist tbody tr {
	border-bottom: 1px solid var(--bs-border);
	transition: background .12s ease;
}

.messagelist tbody tr:hover {
	background: var(--bs-surface-alt);
}

.messagelist tbody tr.unread td.subject,
.messagelist tbody tr.unread td.fromto {
	font-weight: 700;
	color: var(--bs-text);
}

.messagelist tbody tr.selected {
	background: var(--bs-accent-soft);
}

.messagelist tbody tr.selected td,
.messagelist tbody tr.selected td.subject,
.messagelist tbody tr.selected td.fromto {
	color: var(--bs-accent-text);
}

.toolbar,
#messagetoolbar,
#messagelistcontrols {
	background: transparent;
	border-bottom: 0;
}

.toolbar a.button,
.toolbar button,
#messagetoolbar a.button {
	transition: background .15s ease;
}

.toolbar a.button:hover,
.toolbar button:hover,
#messagetoolbar a.button:hover {
	background: var(--bs-surface-alt);
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
	background: transparent;
	border-bottom: 1px solid var(--bs-border);
	color: var(--bs-text);
}

.pagenav .countdisplay {
	color: var(--bs-text-dim);
}

#messageheader,
.message-part,
.message-htmlpart {
	background: transparent;
}

#messageheader .subject {
	font-weight: 600;
}

.message-partheaders .buttons a.button,
#message-buttons a.button {
	border: 1px solid var(--bs-border);
}

.ui-dialog,
.popupmenu,
.popover {
	overflow: hidden;
}

.popupmenu li a,
.popover li a,
.popupmenu li a.active,
.popover li a.active,
.select-menu li a {
	margin: 0;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--bs-scroll) transparent;
}

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

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--bs-scroll);

	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--bs-scroll-hover);
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

#taskmenu a.theme,
#taskmenu a.about,
#taskmenu a.logout {
	background: transparent !important;
	transition: background .15s ease;
}

#taskmenu a.theme:hover,
#taskmenu a.about:hover,
#taskmenu a.logout:hover {
	background: var(--bs-rail-hover) !important;
}

.listing li > a:hover,
.contactlist tbody tr:hover,
#folderslist li a:hover,
.pagenav a.button:hover {
	background: var(--bs-surface-alt);
}

.messagelist tbody tr.selected:hover {
	background: var(--bs-accent-soft);
}

html.dark-mode #layout,
body.dark-mode #layout {
	background: var(--bs-bg);
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
body.dark-mode #layout-sidebar,
body.dark-mode #layout-list,
body.dark-mode #layout-content {
	background: var(--bs-surface) !important;
}

html.dark-mode .searchbar,
body.dark-mode .searchbar {
	background: var(--bs-surface-alt) !important;
}

html.dark-mode .messagelist tbody tr:hover,
body.dark-mode .messagelist tbody tr:hover {
	background: var(--bs-surface-alt) !important;
}

.button.mainaction,
button.mainaction,
input.mainaction,
#rcmloginsubmit,
.ui-dialog .ui-dialog-buttonpane button.mainaction {
	background: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
	color: var(--bs-on-accent) !important;
}

.btn-primary,
button.btn-primary,
input[type="submit"],
.formbuttons .button,
#formfooter .button.mainaction,
.footer .button.mainaction {
	background: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
	color: var(--bs-on-accent) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover {
	background: var(--bs-accent-strong) !important;
	border-color: var(--bs-accent-strong) !important;
}

.button.mainaction:hover,
button.mainaction:hover,
input.mainaction:hover,
#rcmloginsubmit:hover {
	background: var(--bs-accent-strong) !important;
	border-color: var(--bs-accent-strong) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus {
	border-color: var(--bs-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}

a,
.listing li a.active,
#login-form a {
	color: var(--bs-accent);
}

#login-form .box-inner img,
#login-form #logo {
	max-width: 96px;
	height: auto;
}

.pretty-checkbox input:checked + span,
.custom-switch input:checked ~ .custom-control-label::before {
	background-color: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--bs-accent);
	background-color: transparent !important;
	border: 1px solid var(--bs-border) !important;
	box-shadow: none !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
}

#layout,
#layout-sidebar,
#layout-list,
#layout-content,
.listing li,
.listing li a,
.propform,
.boxtitle,
.formcontent,
fieldset legend {
	color: var(--bs-text);
}

.listing li a,
.listing.iconized li a,
#settings-menu li a,
#sections-table td a,
#folders-table td a,
.treelist li a {
	color: var(--bs-text) !important;
}

.listing li.selected > a,
.listing li a.selected,
#settings-menu li.selected a,
.treelist li.selected > a {
	color: var(--bs-accent-text) !important;
	background: var(--bs-accent-soft) !important;
}

.listing li a::before,
.listing.iconized li a::before,
#settings-menu li a::before,
.treelist li a::before,
.menu li a::before,
.toolbar a.button::before,
.toolbar button::before {
	color: var(--bs-accent) !important;
}

a,
a.button.icon,
a.sortcol,
.message-part a,
#messageheader a,
#messageheader .subject a,
.propform a,
.attachmentslist a,
.rcmaddcontact,
.boxfooter a {
	color: var(--bs-accent) !important;
}

a:hover,
a.sortcol:hover {
	color: var(--bs-accent-strong) !important;
}

.listing li a,
.listing li a:hover,
.treelist li a,
.treelist li a:hover,
#taskmenu a,
#taskmenu a:hover,
.toolbar a.button,
.toolbar a.button:hover,
.pagenav a.button {
	color: var(--bs-text) !important;
}

#taskmenu a {
	color: inherit !important;
}

.watermark,
#messagecontframe {
	background-color: var(--bs-surface) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
input[type="checkbox"].form-check-input:checked,
.pretty input:checked ~ .state label:before {
	background-color: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before,
.form-check-input:focus {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-accent) 25%, transparent) !important;
	border-color: var(--bs-accent) !important;
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--bs-accent);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked,
.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--bs-accent) !important;
	border-color: var(--bs-accent) !important;
}

html,
body,
body.task-settings,
body.task-addressbook,
body.task-mail,
#layout-menu,
#taskmenu {
	background-color: var(--bs-bg) !important;
	color: var(--bs-text) !important;
}

#taskmenu a,
#taskmenu a span {
	color: var(--bs-text) !important;
}

#taskmenu a.selected,
#taskmenu a.selected span {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-accent) !important;
}

#taskmenu a.selected::before {
	color: var(--bs-accent) !important;
}

#taskmenu a:hover {
	background-color: var(--bs-rail-hover) !important;
}

.messagelist td,
.messagelist td.selection,
.messagelist span.fromto,
.messagelist span.adr,
.messagelist span.date,
.messagelist span.subject,
.contactlist td,
td.selection {
	color: var(--bs-text) !important;
}

.messagelist span.date,
.messagelist span.size,
.messagelist tr:not(.unread) span.fromto,
.contactlist .email {
	color: var(--bs-text-dim) !important;
}

input,
textarea,
select,
option,
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.custom-select {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text) !important;
	border-color: var(--bs-border) !important;
}

option:checked,
option:hover {
	background-color: var(--bs-accent-soft) !important;
	color: var(--bs-accent-text) !important;
}

label,
label.custom-control-label,
.propform label,
fieldset legend,
.boxtitle,
.header .header-title {
	color: var(--bs-text) !important;
}

.hint,
.formcontent .hint,
small.form-text,
.text-muted {
	color: var(--bs-text-dim) !important;
}

.listing li,
.listing li a,
ul.listing,
ul.groups,
ul.groups li,
ul.groups li a,
table.listing td,
td.section,
th,
th.threads,
.listing-info {
	background-color: transparent !important;
	color: var(--bs-text) !important;
}

.listing li.selected,
.listing li.selected > a,
.listing li.selected > a span,
ul.groups li.selected,
ul.groups li.selected a,
li.listitem.selected,
li.listitem.selected a {
	background-color: var(--bs-accent-soft) !important;
	color: var(--bs-accent-text) !important;
}

.listing li.selected > a::before,
li.listitem.selected a::before {
	color: var(--bs-accent) !important;
}

.input-group-text,
label.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text-dim) !important;
	border-color: var(--bs-border) !important;
}

select.custom-select,
select.form-control,
select {
	color: var(--bs-text) !important;
}

.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.ui-dialog,
.ui-dialog-content,
.ui-dialog-titlebar,
.ui-dialog-buttonpane,
.popupmenu,
.popover,
.popover-body,
.popover-header {
	background-color: var(--bs-surface) !important;
	color: var(--bs-text) !important;
	border-color: var(--bs-border) !important;
}

.modal-header,
.ui-dialog-titlebar {
	border-bottom-color: var(--bs-border) !important;
}

.modal-footer,
.ui-dialog-buttonpane {
	border-top-color: var(--bs-border) !important;
}

.modal-title,
.ui-dialog-title {
	color: var(--bs-text) !important;
}

.btn-secondary,
button.btn-secondary,
.ui-dialog-buttonpane button:not(.mainaction),
.modal-footer button:not(.mainaction):not(.btn-primary) {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text) !important;
	border-color: var(--bs-border) !important;
}

.btn-secondary:hover,
.modal-footer button:not(.mainaction):hover {
	background-color: var(--bs-border) !important;
}

.close,
.modal-header .close,
button.btn-close {
	color: var(--bs-text) !important;
	opacity: .8;
}

thead,
tbody,
tr,
td,
span.flag,
span.report,
.messagelist thead th {
	color: var(--bs-text) !important;
}

span.report,
.messagelist span.report {
	color: var(--bs-text-dim) !important;
}

.header,
div.header,
.popover-header,
span.special-buttons,
.searchbar,
div.searchbar,
#messagelist,
table#messagelist,
span.msgicon,
span.msgicon.status,
select#rcmfd_layout {
	background-color: transparent !important;
	color: var(--bs-text) !important;
}

.searchbar,
div.searchbar.menu {
	background-color: var(--bs-surface-alt) !important;
}

.popover-header,
span.special-buttons {
	background-color: var(--bs-surface) !important;
}

.alert-warning,
.ui-state-highlight,
div.warning,
.boxwarning {
	background-color: var(--bs-warning-soft) !important;
	color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
}

.alert-danger,
.ui-state-error,
div.error,
.boxerror {
	background-color: var(--bs-danger-soft) !important;
	color: var(--bs-danger) !important;
	border-color: var(--bs-danger) !important;
}

.alert-success,
div.confirmation,
.boxconfirmation {
	background-color: var(--bs-success-soft) !important;
	color: var(--bs-success) !important;
	border-color: var(--bs-success) !important;
}

.alert-info,
div.information,
.boxinformation {
	background-color: var(--bs-info-soft) !important;
	color: var(--bs-info) !important;
	border-color: var(--bs-info) !important;
}

#messageheader,
.message-headers,
.message-partheaders,
table.headers-table,
.headers-table td,
.rectangle-headers {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text) !important;
}

.headers-table td.header-title,
.message-headers .header-title {
	color: var(--bs-text-dim) !important;
}

.contactphoto,
.contactphoto span,
.image-attachment .photo,
span.contactphoto {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text-dim) !important;
}

.menu.listing-hover-menu,
label.custom-file-label,
div.row.account-row,
.popover-header {
	background-color: var(--bs-surface) !important;
	color: var(--bs-text) !important;
}

span.txt,
span.pagenav-text,
#rcmcountdisplay,
table#messagelist-fixedcopy {
	color: var(--bs-text-dim) !important;
}

.btn-danger,
button.btn-danger,
button.btn.btn-danger {
	background-color: var(--bs-danger) !important;
	border-color: var(--bs-danger) !important;
	color: var(--bs-on-accent) !important;
}

.btn-danger i,
button.btn-danger i {
	color: var(--bs-on-accent) !important;
}

.popover .popover-header,
div.popover div.popover-header,
.popover-header,
.ui-dialog .popover-header {
	background-color: var(--bs-surface) !important;
	color: var(--bs-text) !important;
	border-bottom-color: var(--bs-border) !important;
}

.attachmentslist,
ul.attachmentslist,
ul.attachmentslist li,
ul.attachmentslist li a,
.message-partheaders,
.attachment-list,
#attachment-list {
	background-color: var(--bs-surface-alt) !important;
	color: var(--bs-text) !important;
}

ul.attachmentslist li a {
	background-color: transparent !important;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
div.header,
.boxtitle,
.header-title {
	background-color: transparent !important;
	color: var(--bs-text) !important;
}

li,
span.inner,
a.button.icon,
div.custom-control,
label.custom-control-label,
ul.menu.listing,
.listing li span,
.contactlist li {
	color: var(--bs-text) !important;
}

html body #layout-menu > .popover-header {
	background-color: var(--bs-bg) !important;
}

html body #layout-menu > .popover-header img {
	max-width: 44px;
	height: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--bs-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--bs-surface-alt) inset !important;
	box-shadow: 0 0 0 1000px var(--bs-surface-alt) inset !important;
	caret-color: var(--bs-text);
	transition: background-color 9999s ease-in-out 0s;
}