/*
 * Skymesh overrides for the elastic skin, loaded by skymesh_extensions after elastic's styles.css
 * on every page, including login. Elastic's dark mode adds class "dark-mode" to <html>, so colour
 * overrides normally need a matching "html.dark-mode ..." rule.
 *
 * Colours: skymesh Style Sheet v1.0 (brand) plus its functional UI tokens (canvas, border, muted...).
 */

:root {
	--sm-midnight: #2B314B;
	--sm-sun: #FFB043;
	--sm-coast: #A4CFCF;
	--sm-sun-strong: #E08F1F;
	--sm-sun-ring: rgba(255, 176, 67, 0.30);
	--sm-canvas: #F3F4F8;
	--sm-surface: #FFFFFF;
	--sm-surface-2: #F7F8FB;
	--sm-border: #E6E8EF;
	--sm-border-strong: #D5D9E3;
	--sm-text: #222740;
	--sm-muted: #646C84;
	--sm-subtle: #9298AD;
}

/* ---------- login page ---------- */

body.task-login,
body.task-login #layout-content {
	background-color: var(--sm-canvas);
	color: var(--sm-text);
}

body.task-login #login-form .input-group-text {
	background-color: var(--sm-surface-2);
	border-color: var(--sm-border-strong);
	color: var(--sm-muted);
}

body.task-login #login-form .form-control {
	background-color: var(--sm-surface);
	border-color: var(--sm-border-strong);
	color: var(--sm-text);
}

body.task-login #login-form .form-control::placeholder {
	color: var(--sm-subtle);
}

body.task-login #login-form .form-control:focus {
	border-color: var(--sm-sun);
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

/* primary pill: Sun fill, Midnight text (never white on Sun) */
body.task-login #rcmloginsubmit,
body.task-login #rcmloginsubmit:disabled {
	background-color: var(--sm-sun);
	border-color: var(--sm-sun);
	color: var(--sm-midnight);
	border-radius: 9999px;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:not(:disabled):active {
	background-color: var(--sm-sun-strong);
	border-color: var(--sm-sun-strong);
	color: var(--sm-midnight);
}

body.task-login #rcmloginsubmit:focus,
body.task-login #rcmloginsubmit:not(:disabled):active:focus {
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

body.task-login #login-footer {
	color: var(--sm-muted);
}

body.task-login #login-footer a {
	color: var(--sm-midnight);
	text-decoration: underline;
}

/* dark mode: Midnight surface, white logo at full strength, same Sun button */

html.dark-mode body.task-login,
html.dark-mode body.task-login #layout-content {
	background-color: var(--sm-midnight);
	color: #E8EAF3;
}

html.dark-mode body.task-login #logo {
	opacity: 1;
}

html.dark-mode body.task-login #login-form .input-group-text {
	background-color: #3A4467;
	border-color: #59618A;
	color: #C4C9DA;
}

html.dark-mode body.task-login #login-form .form-control {
	background-color: #343C5E;
	border-color: #59618A;
	color: #E8EAF3;
}

html.dark-mode body.task-login #login-form .form-control::placeholder {
	color: #9AA2BC;
}

html.dark-mode body.task-login #login-form .form-control:focus {
	border-color: var(--sm-sun);
}

html.dark-mode body.task-login #login-footer {
	color: #9AA2BC;
}

html.dark-mode body.task-login #login-footer a {
	color: var(--sm-sun);
}

/* ---------- left task menu (desktop/tablet; on phones it is a pop-out list) ---------- */

@media screen and (min-width: 481px) {
	#layout-menu,
	html.dark-mode #layout-menu,
	#taskmenu .special-buttons {
		background-color: var(--sm-midnight);
	}

	#layout-menu .popover-header,
	html.dark-mode #layout-menu .popover-header {
		background-color: var(--sm-midnight) !important;
	}

	html.dark-mode #layout-menu {
		border-right-color: #3A4467;
	}

	html.dark-mode #layout-menu #logo {
		opacity: 1;
	}

	#taskmenu a,
	html.dark-mode #taskmenu a {
		color: #FFFFFF;
	}

	html.dark-mode #layout-menu .special-buttons a:not(:focus) {
		background: none;
	}

	#taskmenu a:hover,
	#taskmenu a:focus,
	html.dark-mode #taskmenu a:hover,
	html.dark-mode #taskmenu a:focus,
	#taskmenu .action-buttons a:hover {
		background-color: rgba(255, 255, 255, 0.10);
	}

	/* current task: Coast with Midnight text (brand contrast rule) */
	#taskmenu a.selected,
	#taskmenu a.selected:hover,
	html.dark-mode #taskmenu a.selected,
	html.dark-mode #taskmenu a.selected:hover {
		background-color: var(--sm-coast);
		color: var(--sm-midnight);
	}

	/* Compose */
	#taskmenu .action-buttons a,
	html.dark-mode #taskmenu .action-buttons a,
	#taskmenu .action-buttons a:hover {
		color: var(--sm-sun);
	}

	/* ... except while composing, when it is the selected (Coast) item */
	#taskmenu .action-buttons a.selected,
	html.dark-mode #taskmenu .action-buttons a.selected {
		color: var(--sm-midnight);
	}

	/* Logout keeps a red, lightened for contrast on Midnight */
	#taskmenu a.logout,
	#taskmenu a.logout:hover {
		color: #F77171 !important;
	}
}

/* ---------- settings, mail (preview, compose) and contacts: buttons; settings and compose: switches, radios ---------- */

body.task-settings .btn,
body.task-mail .btn,
body.task-addressbook .btn {
	border-radius: 9999px;
}

/* Save etc.: Sun pill with Midnight text, as on the login page */
body.task-settings .btn-primary,
body.task-mail .btn-primary,
body.task-addressbook .btn-primary,
body.task-settings .btn-primary:disabled,
body.task-mail .btn-primary:disabled,
body.task-addressbook .btn-primary:disabled,
html.dark-mode body.task-settings .btn-primary,
html.dark-mode body.task-mail .btn-primary,
html.dark-mode body.task-addressbook .btn-primary {
	background-color: var(--sm-sun);
	border-color: var(--sm-sun);
	color: var(--sm-midnight);
}

body.task-settings .btn-primary:hover,
body.task-mail .btn-primary:hover,
body.task-addressbook .btn-primary:hover,
body.task-settings .btn-primary:not(:disabled):active,
body.task-mail .btn-primary:not(:disabled):active,
body.task-addressbook .btn-primary:not(:disabled):active,
html.dark-mode body.task-settings .btn-primary:hover,
html.dark-mode body.task-mail .btn-primary:hover,
html.dark-mode body.task-addressbook .btn-primary:hover {
	background-color: var(--sm-sun-strong);
	border-color: var(--sm-sun-strong);
	color: var(--sm-midnight);
}

body.task-settings .btn-primary:focus,
body.task-mail .btn-primary:focus,
body.task-addressbook .btn-primary:focus,
body.task-settings .btn-primary:not(:disabled):active:focus,
body.task-mail .btn-primary:not(:disabled):active:focus,
body.task-addressbook .btn-primary:not(:disabled):active:focus {
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

/* secondary (Cancel, Attach a file, ...): soft neutral pill, quieter than the Sun primary */
body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close),
body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close),
body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close) {
	background-color: #E6E8EF;
	border-color: #E6E8EF;
	color: var(--sm-midnight);
}

body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close):hover,
body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close):hover,
body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close):hover,
body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active,
body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active,
body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active {
	background-color: #D5D9E3;
	border-color: #D5D9E3;
	color: var(--sm-midnight);
}

body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close):focus,
body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close):focus,
body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close):focus {
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

html.dark-mode body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close),
html.dark-mode body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close),
html.dark-mode body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close) {
	background-color: #3A4467;
	border-color: #3A4467;
	color: #FFFFFF;
}

html.dark-mode body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close):hover,
html.dark-mode body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close):hover,
html.dark-mode body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close):hover,
html.dark-mode body.task-settings .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active,
html.dark-mode body.task-mail .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active,
html.dark-mode body.task-addressbook .btn-secondary:not(.ui-dialog-titlebar-close):not(:disabled):active {
	background-color: #4A5578;
	border-color: #4A5578;
	color: #FFFFFF;
}

/* switches when on (settings and compose): Sun in light mode, Coast in dark mode; Midnight knob in both */
body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
body.task-mail .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--sm-sun);
	border-color: var(--sm-sun-strong);
}

html.dark-mode body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode body.task-mail .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--sm-coast);
}

body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
body.task-mail .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
html.dark-mode body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
html.dark-mode body.task-mail .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
	background-color: var(--sm-midnight);
}

html.dark-mode body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode body.task-mail .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--sm-coast);
}

body.task-settings .custom-switch .custom-control-input:focus ~ .custom-control-label::before,
body.task-mail .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

body.task-settings .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
body.task-mail .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--sm-sun);
}

body.task-settings input[type="radio"],
body.task-mail input[type="radio"],
body.task-settings input[type="checkbox"]:not(.custom-control-input),
body.task-mail input[type="checkbox"]:not(.custom-control-input) {
	accent-color: var(--sm-midnight);
}

html.dark-mode body.task-settings input[type="radio"],
html.dark-mode body.task-mail input[type="radio"],
html.dark-mode body.task-settings input[type="checkbox"]:not(.custom-control-input),
html.dark-mode body.task-mail input[type="checkbox"]:not(.custom-control-input) {
	accent-color: var(--sm-coast);
}

/* ---------- unread counts: Midnight badge (white in dark mode, like dark-mode selections) ---------- */
body.task-mail .folderlist li.mailbox .unreadcount,
body.task-mail .folderlist li.mailbox.recent > a > .unreadcount {
	background: var(--sm-midnight);
	color: #FFFFFF;
}

html.dark-mode body.task-mail .folderlist li.mailbox .unreadcount {
	background: #FFFFFF;
	color: var(--sm-midnight);
	font-weight: 700;
}

/* ---------- list selections: elastic's own, except white instead of blue text in dark mode ---------- */

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
	color: #FFFFFF;
}

html.dark-mode:not(.touch) .listing li > a:focus,
html.dark-mode:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html.dark-mode:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
	border-left-color: #FFFFFF;
}

/* ---------- mail (and contacts, below) links: calmer "Info" blue instead of elastic's bright #00ACFF ----------
 * Message view (preview frame and full view) and compose's button row only, so menus and lists
 * keep their own colours. Links that an HTML email colours itself are unaffected.
 */

body.task-mail .frame-content a,
body.task-mail #compose-content .formbuttons a.button {
	color: #2563EB;
}

body.task-mail .frame-content a:hover,
body.task-mail #compose-content .formbuttons a.button:hover {
	color: #1D4ED8;
}

html.dark-mode body.task-mail .frame-content a,
html.dark-mode body.task-mail #compose-content .formbuttons a.button {
	color: #60A5FA;
}

html.dark-mode body.task-mail .frame-content a:hover,
html.dark-mode body.task-mail #compose-content .formbuttons a.button:hover {
	color: #93C5FD;
}

/* HTML message bodies stay white in dark mode, so they keep the light-mode blue */
html.dark-mode body.task-mail .frame-content .message-htmlpart a {
	color: #2563EB;
}

html.dark-mode body.task-mail .frame-content .message-htmlpart a:hover {
	color: #1D4ED8;
}

/* contacts: same Info blue for links in the contact details / edit frame */
body.task-addressbook.formcontainer a {
	color: #2563EB;
}

body.task-addressbook.formcontainer a:hover {
	color: #1D4ED8;
}

html.dark-mode body.task-addressbook.formcontainer a {
	color: #60A5FA;
}

html.dark-mode body.task-addressbook.formcontainer a:hover {
	color: #93C5FD;
}

/* settings: same Info blue for links in the framed forms (preferences, folders, identities) and About */
html.iframe body.task-settings a,
body.task-settings.action-about a {
	color: #2563EB;
}

html.iframe body.task-settings a:hover,
body.task-settings.action-about a:hover {
	color: #1D4ED8;
}

html.iframe.dark-mode body.task-settings a,
html.dark-mode body.task-settings.action-about a {
	color: #60A5FA;
}

html.iframe.dark-mode body.task-settings a:hover,
html.dark-mode body.task-settings.action-about a:hover {
	color: #93C5FD;
}

/* ---------- focused fields everywhere: Sun border and ring, as on the login page ---------- */

body .form-control:focus,
body .recipient-input.focus,
body .multi-input > .content.focused,
body .custom-file-input:focus ~ .custom-file-label,
body .formcontent.raweditor .CodeMirror-focused,
body .tagedit-list[tabindex="-1"],
body div.tox .tox-color-input > input:focus,
body div.tox .tox-listboxfield .tox-listbox--select:focus,
body div.tox .tox-textarea:focus,
body div.tox .tox-textfield:focus {
	border-color: var(--sm-sun);
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

body div.tox.focused {
	border-color: var(--sm-sun) !important;
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring) !important;
}

body .input-group-text input:focus {
	border-color: var(--sm-sun) !important;
}

body .input-group a:focus {
	background-color: var(--sm-sun-ring);
}

body .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

body .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--sm-sun);
}

html.dark-mode body .form-control:focus:not(.is-invalid),
html.dark-mode body .custom-file-label:focus:not(.is-invalid),
html.dark-mode body .multi-input:not(.is-invalid) > .content.focused,
html.dark-mode body .recipient-input.focus,
html.dark-mode body .formcontent.raweditor .CodeMirror-focused {
	border-color: var(--sm-sun);
}

html.dark-mode body .input-group a:focus {
	border-color: var(--sm-sun);
	box-shadow: 0 0 0 .2rem var(--sm-sun-ring);
}

/* ---------- pop-up menus (More, Mark, Reply all, select lists): same as list selections ----------
 * Light: elastic's pale list-selection blue with dark text, not its solid bright blue with white text.
 * Dark: elastic's slate with white text (the selected item gets white from the list-selection rules above).
 */

body .popupmenu .listing li > a:not(.disabled):hover,
body .popupmenu .listing li.selected {
	background-color: #EBF9FF;
	color: var(--sm-midnight);
}

html.dark-mode body .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode body .popupmenu .listing li.selected {
	background-color: #374549;
	color: #FFFFFF;
}

/* ---------- phones / small screens ---------- */

/* pop-out menu and dialog headers */
html.layout-phone body .popover-header,
html.layout-small body .popover-header,
html.dark-mode.layout-phone body .popover-header,
html.dark-mode.layout-small body .popover-header {
	background-color: var(--sm-midnight);
}

/* elastic clears the menu header in dark mode with !important */
html.dark-mode.layout-phone body #layout-menu .popover-header,
html.dark-mode.layout-small body #layout-menu .popover-header {
	background-color: var(--sm-midnight) !important;
}

/* the menu logo at full strength in dark mode at every width (elastic dims it to 80%) */
html.dark-mode #layout-menu #logo {
	opacity: 1;
}

/* floating Compose / Create button: Sun with a Midnight icon */
body .floating-action-buttons a.button,
html.dark-mode body .floating-action-buttons a.button {
	background: var(--sm-sun);
	color: var(--sm-midnight);
	box-shadow: 0 0 5px 5px var(--sm-sun-ring);
}

html.dark-mode body .floating-action-buttons a.button {
	box-shadow: none;
}

/* ---------- Epilogue (bundled, see plugins/skymesh_extensions/fonts) ----------
 * Only on the login page (not its text fields), the left task menu and the pill buttons (.btn-primary / .btn-secondary);
 * everything else keeps elastic's Roboto. Two brand weights: Regular for 100-500, SemiBold for 600-900.
 */

@font-face {
	font-family: Epilogue;
	font-style: normal;
	font-weight: 100 500;
	font-display: swap;
	src: url(../../fonts/epilogue-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Epilogue;
	font-style: normal;
	font-weight: 100 500;
	font-display: swap;
	src: url(../../fonts/epilogue-latin-ext-400-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Epilogue;
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url(../../fonts/epilogue-latin-600-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Epilogue;
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url(../../fonts/epilogue-latin-ext-600-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.task-login,
body.task-login button,
#layout-menu,
.btn-primary,
.btn-secondary {
	font-family: Epilogue, Roboto, sans-serif;
}

.btn-primary,
.btn-secondary {
	font-weight: 600;
}

/* ---------- text selection: soft Sun ---------- */

::selection {
	background-color: rgba(255, 176, 67, 0.35);
}

/* ---------- rounded shapes: pill badges, softer dialogs ---------- */

.folderlist li.mailbox .unreadcount {
	border-radius: 9999px;
}

/* dialogs (not on phones, where elastic makes them full screen) */
@media screen and (min-width: 481px) {
	.ui-dialog {
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 25px 50px -12px rgba(13, 16, 28, 0.35);
	}
}

.ui-widget-overlay {
	background-color: rgba(13, 16, 28, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

html.dark-mode .ui-widget-overlay {
	background-color: rgba(0, 0, 0, 0.65);
}

/* ---------- status colours (the brand skill's functional tokens; no red in the brand palette) ----------
 * Success #15924B, Warning #B27514 (Sand fill for the amber toast), Error #D63333, Info #2563EB;
 * dark-mode text/icon variants #34D399 / #FBBF24 / #F77171 / #60A5FA.
 */

/* notification toasts: same fills in both modes (elastic's light and dark modes disagree on "notice") */
#messagestack div,
html.dark-mode #messagestack div,
html.dark-mode #messagestack .alert-info {
	background-color: var(--sm-midnight);
	color: #FFFFFF;
}

#messagestack .alert-info.information,
html.dark-mode #messagestack .alert-info.information {
	background-color: #2563EB;
}

#messagestack .alert-success,
html.dark-mode #messagestack .alert-success {
	background-color: #15924B;
}

#messagestack .alert-danger,
html.dark-mode #messagestack .alert-danger {
	background-color: #D63333;
}

#messagestack .alert-warning,
html.dark-mode #messagestack .alert-warning {
	background-color: #FED366;
	color: var(--sm-midnight);
}

#messagestack .loading,
html.dark-mode #messagestack .loading {
	background-color: #646C84;
}

#messagestack div > i.icon::before,
html.dark-mode #messagestack div i.icon::before {
	color: #FFFFFF;
}

#messagestack .alert-warning > i.icon::before,
html.dark-mode #messagestack .alert-warning i.icon::before {
	color: var(--sm-midnight);
}

/* inline alert boxes (e.g. "remote content blocked") */
.ui.alert.boxinformation {
	background-color: rgba(37, 99, 235, 0.10);
}

.ui.alert.boxconfirmation {
	background-color: rgba(21, 146, 75, 0.12);
}

.ui.alert.boxwarning {
	background-color: rgba(254, 211, 102, 0.35);
}

.ui.alert.boxerror {
	background-color: rgba(214, 51, 51, 0.10);
}

.ui.alert.alert-success > i.icon::before {
	color: #15924B;
}

.ui.alert.alert-warning > i.icon::before {
	color: #B27514;
}

.ui.alert.alert-danger > i.icon::before {
	color: #D63333;
}

.ui.alert a:not(.btn) {
	color: #2563EB;
}

html.dark-mode .ui.alert.boxinformation {
	background-color: rgba(96, 165, 250, 0.16);
}

html.dark-mode .ui.alert.boxconfirmation {
	background-color: rgba(52, 211, 153, 0.14);
}

html.dark-mode .ui.alert.boxwarning {
	background-color: rgba(251, 191, 36, 0.15);
}

html.dark-mode .ui.alert.boxerror {
	background-color: rgba(247, 113, 113, 0.16);
}

html.dark-mode .ui.alert.boxconfirmation i.icon::before {
	color: #34D399;
}

html.dark-mode .ui.alert.boxwarning i.icon::before {
	color: #FBBF24;
}

html.dark-mode .ui.alert.boxerror i.icon::before {
	color: #F77171;
}

/* errors in forms */
.invalid-feedback {
	color: #D63333;
}

html.dark-mode .invalid-feedback {
	color: #F77171;
}

body .form-control.is-invalid,
body .multi-input.is-invalid > .content {
	border-color: #D63333;
}

body .form-control.is-invalid:focus,
body .multi-input.is-invalid > .content.focused {
	border-color: #D63333;
	box-shadow: 0 0 0 .2rem rgba(214, 51, 51, 0.25);
}

/* destructive buttons (e.g. Delete in confirm dialogs, which is also .btn-primary): filled brand red */
html body .btn.btn-danger,
html.dark-mode body .btn.btn-primary.btn-danger {
	background-color: #D63333;
	border-color: #D63333;
	color: #FFFFFF;
}

html body .btn.btn-danger:hover,
html body .btn.btn-danger:not(:disabled):active,
html.dark-mode body .btn.btn-primary.btn-danger:hover {
	background-color: #B42828;
	border-color: #B42828;
	color: #FFFFFF;
}

html body .btn.btn-danger:focus {
	box-shadow: 0 0 0 .2rem rgba(214, 51, 51, 0.30);
}

/* phones: elastic draws dialog buttons as plain text in a bottom bar */
@media screen and (max-width: 480px) {
	html body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger {
		background: none;
		color: #D63333;
	}

	html.dark-mode body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger {
		color: #F77171;
	}
}

.quota-widget .value.warning {
	background-color: #D63333;
}

/* "active" toggles in toolbars and the search bar (elastic's green) */
.menu.toolbar a.selected,
.searchbar a.selected {
	color: #15924B;
}

html.dark-mode .menu.toolbar a.selected,
html.dark-mode .searchbar a.selected {
	color: #34D399;
}