@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400&display=swap");

/* ============================================================
   shibui (KGVA) für SnappyMail
   Basis: SnappyMail-Theme "NextcloudV25+" (Nextcloud-Nachbildung,
   liest die --color-* Variablen). Darunter folgt das Original-
   Nextcloud-shibui-CSS von KGVA, das genau diese --color-* setzt.
   ============================================================ */

/* ===== BASIS: NextcloudV25+ ===== */
/**
 * Nextcloud - SnappyMail mail plugin
 *
 * @author Rene Hampölz (@hampoelz), SnappyMail, Nextcloud Team
 */

/*
 * Default Nextcloud (v25+) theme variables and colors
 * based on https://github.com/nextcloud/server/blob/master/core/css/variables.scss
 */
/* #region theme */

:root {
	--border-color: var(--nc-color-border);
	--dialog-border-clr: var(--nc-color-border);
}

:not([data-themes~="dark"]) {
	--nc-color-main-background: var(--color-main-background, #ffffff);
	--nc-color-main-background-rgb: var(--color-main-background-rgb, 255, 255, 255);
	--nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8));
	--nc-filter-background-blur: var(--filter-background-blur, blur(25px));
	--nc-color-background-hover: var(--color-background-hover, #f5f5f5);
	--nc-color-background-dark: var(--color-background-dark, #ededed);
	--nc-color-background-darker: var(--color-background-darker, #dbdbdb);
	--nc-color-placeholder-light: var(--color-placeholder-light, #e6e6e6);
	--nc-color-placeholder-dark: var(--color-placeholder-dark, #cccccc);
	--nc-color-main-text: var(--color-main-text, #222222);
	--nc-color-text-light: var(--color-text-light, #222222);
	--nc-color-text-lighter: var(--color-text-lighter, #767676);
	--nc-color-text-maxcontrast: var(--color-text-maxcontrast, #767676);
	--nc-color-scrollbar: var(--color-scrollbar, rgba(34, 34, 34, .15));
	--nc-color-error: var(--color-error, #e9322d);
	--nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45);
	--nc-color-error-hover: var(--color-error-hover, #ed5a56);
	--nc-color-warning: var(--color-warning, #eca700);
	--nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0);
	--nc-color-warning-hover: var(--color-warning-hover, #efb832);
	--nc-color-success: var(--color-success, #46ba61);
	--nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97);
	--nc-color-success-hover: var(--color-success-hover, #6ac780);
	--nc-color-loading-light: var(--color-loading-light, #cccccc);
	--nc-color-loading-dark: var(--color-loading-dark, #444444);
	--nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 77, 77, 77);
	--nc-color-box-shadow: var(--color-box-shadow, rgba(var(--nc-color-box-shadow-rgb), 0.5));
	--nc-color-border: var(--color-border, #ededed);
	--nc-color-border-dark: var(--color-border-dark, #dbdbdb);
	--nc-color-border-maxcontrast: var(--color-border-maxcontrast, #949494);
	--nc-font-face: var(--font-face, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
	--nc-default-font-size: var(--default-font-size, 15px);
	--nc-default-line-height: var(--default-line-height, 24px);
	--nc-animation-quick: var(--animation-quick, 100ms);
	--nc-animation-slow: var(--animation-slow, 300ms);
	--nc-border-radius: var(--border-radius, 3px);
	--nc-border-radius-large: var(--border-radius-large, 8px);
	--nc-border-radius-pill: var(--border-radius-pill, 100px);
	--nc-default-grid-baseline: var(--default-grid-baseline, 4px);
	--nc-navigation-width: var(--navigation-width, 300px);
	--nc-sidebar-min-width: var(--sidebar-min-width, 300px);
	--nc-sidebar-max-width: var(--sidebar-max-width, 500px);
	--nc-list-min-width: var(--list-min-width, 200px);
	--nc-list-max-width: var(--list-max-width, 300px);
	--nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px);
	--nc-color-primary: var(--color-primary, #00639a);
	--nc-color-primary-default: var(--color-primary-default, #0082c9);
	--nc-color-primary-text: var(--color-primary-text, #ffffff);
	--nc-color-primary-hover: var(--color-primary-hover, #3282ae);
	--nc-color-primary-light: var(--color-primary-light, #e5eff4);
	--nc-color-primary-light-text: var(--color-primary-light-text, #00273d);
	--nc-color-primary-light-hover: var(--color-primary-light-hover, #dbe4e9);
	--nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed);
	--nc-color-primary-element: var(--color-primary-element, #00639a);
	--nc-color-primary-element-text: var(--color-primary-element-text, #ffffff);
	--nc-color-primary-element-hover: var(--color-primary-element-hover, #3282ae);
	--nc-color-primary-element-light: var(--color-primary-element-light, #e5eff4);
	--nc-color-primary-element-light-text: var(--color-primary-element-light-text, #00273d);
	--nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #dbe4e9);
	--nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed);
}

@media (prefers-color-scheme: dark) {
	:not([data-themes~="light"]) {
		--nc-color-main-background: var(--color-main-background, #171717);
		--nc-color-main-background-rgb: var(--color-main-background-rgb, 23, 23, 23);
		--nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8));
		--nc-filter-background-blur: var(--filter-background-blur, blur(25px));
		--nc-color-background-hover: var(--color-background-hover, #212121);
		--nc-color-background-dark: var(--color-background-dark, #292929);
		--nc-color-background-darker: var(--color-background-darker, #3b3b3b);
		--nc-color-placeholder-light: var(--color-placeholder-light, #313131);
		--nc-color-placeholder-dark: var(--color-placeholder-dark, #4a4a4a);
		--nc-color-main-text: var(--color-main-text, #D8D8D8);
		--nc-color-text-light: var(--color-text-light, #bfbfbf);
		--nc-color-text-lighter: var(--color-text-lighter, #a5a5a5);
		--nc-color-text-maxcontrast: var(--color-text-maxcontrast, #8c8c8c);
		--nc-color-scrollbar: var(--color-scrollbar, #3d3d3d);
		--nc-color-error: var(--color-error, #e9322d);
		--nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45);
		--nc-color-error-hover: var(--color-error-hover, #ed5a56);
		--nc-color-warning: var(--color-warning, #eca700);
		--nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0);
		--nc-color-warning-hover: var(--color-warning-hover, #efb832);
		--nc-color-success: var(--color-success, #46ba61);
		--nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97);
		--nc-color-success-hover: var(--color-success-hover, #6ac780);
		--nc-color-loading-light: var(--color-loading-light, #777);
		--nc-color-loading-dark: var(--color-loading-dark, #CCC);
		--nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 0, 0, 0);
		--nc-color-box-shadow: var(--color-box-shadow, #000000);
		--nc-color-border: var(--color-border, #292929);
		--nc-color-border-dark: var(--color-border-dark, #3b3b3b);
		--nc-color-border-maxcontrast: var(--color-border-maxcontrast, #646464);
		--nc-font-face: var(--font-face, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
		--nc-default-font-size: var(--default-font-size, 15px);
		--nc-default-line-height: var(--default-line-height, 24px);
		--nc-animation-quick: var(--animation-quick, 100ms);
		--nc-animation-slow: var(--animation-slow, 300ms);
		--nc-border-radius: var(--border-radius, 3px);
		--nc-border-radius-large: var(--border-radius-large, 8px);
		--nc-border-radius-pill: var(--border-radius-pill, 100px);
		--nc-default-grid-baseline: var(--default-grid-baseline, 4px);
		--nc-navigation-width: var(--navigation-width, 300px);
		--nc-sidebar-min-width: var(--sidebar-min-width, 300px);
		--nc-sidebar-max-width: var(--sidebar-max-width, 500px);
		--nc-list-min-width: var(--list-min-width, 200px);
		--nc-list-max-width: var(--list-max-width, 300px);
		--nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px);
		--nc-color-primary: var(--color-primary, #00639a);
		--nc-color-primary-default: var(--color-primary-default, #0082c9);
		--nc-color-primary-text: var(--color-primary-text, #ffffff);
		--nc-color-primary-hover: var(--color-primary-hover, #04537f);
		--nc-color-primary-light: var(--color-primary-light, #141e24);
		--nc-color-primary-light-text: var(--color-primary-light-text, #99c0d6);
		--nc-color-primary-light-hover: var(--color-primary-light-hover, #1d272d);
		--nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed);
		--nc-color-primary-element: var(--color-primary-element, #00639a);
		--nc-color-primary-element-text: var(--color-primary-element-text, #ffffff);
		--nc-color-primary-element-hover: var(--color-primary-element-hover, #04537f);
		--nc-color-primary-element-light: var(--color-primary-element-light, #141e24);
		--nc-color-primary-element-light-text: var(--color-primary-element-light-text, #99c0d6);
		--nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #1d272d);
		--nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed);
	}
}

/* #endregion */

/*
 * Icons
 */
/* #region icons */

#rl-app .iconcolor-green {
	color: var(--nc-color-success) !important;
}

#rl-app .iconcolor-red {
	color: var(--nc-color-error) !important;
}

#rl-app i.fontastic {
	line-height: unset;
}

#rl-app [data-icon]::before {
	vertical-align: -10%;
}

#rl-app .drag-handle {
	color: var(--nc-color-text-lighter);
}

/* #endregion */

/*
 *  Elements
 */

/* #region elements */

/* #region link */

:root {
	--link-color: var(--nc-color-primary-element-light-text);
}

#rl-app a[target="_blank"] {
	color: var(--nc-color-primary-element-light-text);
}

#rl-app a[target="_blank"]:visited,
#rl-app a[target="_blank"]:active {
	color: var(--nc-color-primary-element);
}

/* #endregion */

/* #region scrollbar */

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

::-webkit-scrollbar-thumb {
	background: var(--nc-color-scrollbar);
	border-radius: var(--nc-border-radius-large);
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece {
	background-color: transparent;
}

/* #endregion */

/* #region resizer */

#rl-app .resizer {
	opacity: 1;
	background-color: unset;
	border-right: solid 1px var(--nc-color-border);
}

::-webkit-resizer {
	border: 10px solid transparent;
	border-radius: var(--nc-border-radius);
	border-bottom-color: var(--nc-color-border-dark);
}

::-webkit-resizer {
	border-right-color: var(--nc-color-border-dark);
}

[dir="rtl"] ::-webkit-resizer {
	border-right-color: transparent;
	border-left-color: var(--nc-color-border-dark);
}

/* #endregion */

/* #region meter */

#rl-app meter::-webkit-meter-bar {
	background-color: var(--nc-color-border-dark);
	border-color: var(--nc-color-border-dark);
	border-width: 2px;
	height: 10px;
}

/* #endregion */

/* #region horizontal rule */

:root {
	--hr-color: var(--nc-color-border-dark);
}

#rl-app hr {
	border-color: var(--nc-color-border-dark);
}

/* #endregion */

/* #region tooltip */

#rl-app [data-rainloopErrorTip]::before,
#rl-app .help-block span {
	border: 1px solid var(--nc-color-border);
	border-radius: var(--nc-border-radius);
	box-shadow: 0 0 2px var(--nc-color-box-shadow);
	background-color: var(--nc-color-background-dark);
	font-size: 13px;
	color: unset;
	left: 10px;
	right: unset;
	padding: 5px;
	margin: 7px;
}

#rl-app [data-rainloopErrorTip]::before {
	color: var(--nc-color-error);
	font-weight: 700;
}

/* #endregion */

/* #region alert */

#rl-app .alert {
	text-shadow: unset;
	border: unset;
	color: var(--nc-color-main-text);
	background-color: rgba(var(--nc-color-warning-rgb), 0.1);
	border-inline-start: 4px solid var(--nc-color-warning);
	border-radius: var(--nc-border-radius);
	margin: 1rem;
	padding: 1rem;
}

#rl-app .alert h4 {
	font-weight: bold;
	font-size: 20px;
	margin-top: unset;
	margin-bottom: 12px;
	line-height: 30px;
	color: var(--nc-color-text-light);
}

#rl-app .alert.alert-info {
	background-color: var(--nc-color-background-dark);
	border-color: var(--nc-color-background-darker);
}

#rl-app .alert.alert-warning {
	background-color: rgba(var(--nc-color-warning-rgb), 0.1);
	border-color: var(--nc-color-warning);
}

#rl-app .alert.alert-success {
	background-color: rgba(var(--nc-color-success-rgb), 0.1);
	border-color: var(--nc-color-success);
}

#rl-app .alert.alert-error {
	background-color: rgba(var(--nc-color-error-rgb), 0.1);
	border-color: var(--nc-color-error);
}

#rl-app .alert .close {
	top: -0.6rem;
	right: unset;
}

#rl-app .alert br {
	display: none;
}

/* #endregion */

/* #region button */

#rl-app .btn,
#rl-app button,
#rl-app button.btn:not(.button-vue) {
	min-height: 36px;
	height: 36px;
	box-sizing: border-box;
	padding: 8px 14px;
	line-height: 20px;
	color: var(--nc-color-main-text);
	background-color: var(--nc-color-background-dark);
	border: 1px solid var(--nc-color-border-dark) !important;
	border-radius: var(--nc-border-radius-large);
	font-size: var(--nc-default-font-size);
	text-shadow: none;
	box-shadow: none;
}

#rl-app .btn:hover,
#rl-app .btn:focus,
#rl-app .btn:active,
#rl-app .btn.active,
#rl-app button:hover,
#rl-app button:focus,
#rl-app button:active,
#rl-app button.active,
#rl-app span.fontastic:hover,
#rl-app span.fontastic:focus,
#rl-app span.fontastic:active {
	outline: none;
	opacity: unset;
}

#rl-app .btn.fontastic,
#rl-app button.fontastic {
	border-radius: var(--nc-border-radius-large);
}

#rl-app .btn.btn-thin,
#rl-app button.btn-thin {
	padding-right: 9px;
	padding-left: 9px;
}

#rl-app .btn.btn-transparent,
#rl-app button.btn-transparent {
	background: unset !important;
	border: unset !important;
	opacity: 0.6;
}

#rl-app .btn.btn-warning,
#rl-app button.btn-warning {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-warning);
	border-color: var(--nc-color-warning) !important;
}

#rl-app .btn.btn-warning:hover,
#rl-app .btn.btn-warning:focus,
#rl-app button.btn-warning:hover,
#rl-app button.btn-warning:focus {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-warning-hover);
	border-color: var(--nc-color-warning-hover) !important;
}

#rl-app .btn.btn-danger,
#rl-app button.btn-danger {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-error);
	border-color: var(--nc-color-error) !important;
}

#rl-app .btn.btn-danger:hover,
#rl-app .btn.btn-danger:focus,
#rl-app button.btn-danger:hover,
#rl-app button.btn-danger:focus {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-error-hover);
	border-color: var(--nc-color-error-hover) !important;
}

#rl-app .btn.btn-success,
#rl-app button.btn-success,
#rl-app button.btn.buttonLogin {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-primary-element);
	border-color: var(--nc-color-primary-element) !important;
}

#rl-app .btn.btn-success:hover,
#rl-app .btn.btn-success:focus,
#rl-app button.btn-success:hover,
#rl-app button.btn-success:focus,
#rl-app button.btn.buttonLogin:hover,
#rl-app button.btn.buttonLogin:focus {
	color: var(--nc-color-primary-element-text);
	background-color: var(--nc-color-primary-element-hover);
	border-color: var(--nc-color-primary-element-hover) !important;
}

#rl-app span.fontastic {
	padding: 6px;
	height: fit-content;
	border-radius: var(--nc-border-radius);
}

#rl-app span.fontastic:hover {
	background-color: var(--nc-color-background-hover);
}

#rl-app span.fontastic:active {
	background-color: var(--nc-color-primary-light);
}

#rl-app .btn.disabled, .btn[disabled],
#rl-app .btn.disabled:hover, .btn[disabled]:hover,
#rl-app .btn.disabled:focus, .btn[disabled]:focus,
#rl-app .btn.disabled:active, .btn[disabled]:active,
#rl-app button.disabled, button[disabled],
#rl-app button.disabled:hover, button[disabled]:hover,
#rl-app button.disabled:focus, button[disabled]:focus,
#rl-app button.disabled:active, button[disabled]:active,
#rl-app span.fontastic.disabled, span.fontastic[disabled],
#rl-app span.fontastic.disabled:hover, span.fontastic[disabled]:hover,
#rl-app span.fontastic.disabled:focus, span.fontastic[disabled]:focus,
#rl-app span.fontastic.disabled:active, span.fontastic[disabled]:active {
	opacity: .5;
	filter: saturate(0.7);
}

#rl-app .btn:not(.disabled, [disabled]):hover,
#rl-app .btn:not(.disabled, [disabled]):focus,
#rl-app button:not(.disabled, [disabled]):hover,
#rl-app button:not(.disabled, [disabled]):focus,
#rl-app span.fontastic:not(.disabled, [disabled]):hover,
#rl-app span.fontastic:not(.disabled, [disabled]):focus {
	border-color: var(--nc-color-primary-element) !important;
}

#rl-app .btn:not(.disabled, [disabled]):active,
#rl-app .btn:not(.disabled, [disabled]).active,
#rl-app button:not(.disabled, [disabled]):active,
#rl-app button:not(.disabled, [disabled]).active,
#rl-app span.fontastic:not(.disabled, [disabled]):active,
#rl-app span.fontastic:not(.disabled, [disabled]).active {
	background-color: var(--nc-color-main-background);
	color: var(--nc-color-text-light);
}

/* #endregion */

/* #region button group */

#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
	margin-right: 0.5px;
}

/* fallback */
#rl-app .btn-group .btn:first-of-type {
	margin-right: 0.5px;
}

#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
	margin-left: 0.5px;
}

/* fallback */
#rl-app .btn-group .btn:last-of-type {
	margin-left: 0.5px;
}

#rl-app .btn-group .btn:nth-child(n+2 of :not([style*="display: none;"])):nth-last-child(n+2 of :not([style*="display: none;"])) {
	border-radius: 0 !important;
	margin-right: 0.5px;
	margin-left: 0.5px;
}

/* fallback */
#rl-app .btn-group .btn:not(:first-of-type):not(:last-of-type) {
	border-radius: 0;
	margin: 0 0.5px;
}

#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
	border-radius: 0 !important;
	border-top-left-radius: var(--nc-border-radius-large) !important;
	border-bottom-left-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn:first-of-type,
[dir="rtl"] #rl-app .btn-group .btn:last-of-type {
	border-radius: 0;
	border-top-left-radius: var(--nc-border-radius-large);
	border-bottom-left-radius: var(--nc-border-radius-large);
}

#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
	border-radius: 0 !important;
	border-top-right-radius: var(--nc-border-radius-large) !important;
	border-bottom-right-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn:last-of-type,
[dir="rtl"] #rl-app .btn-group .btn:first-of-type {
	border-radius: 0;
	border-top-right-radius: var(--nc-border-radius-large);
	border-bottom-right-radius: var(--nc-border-radius-large);
}

#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) {
	border-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn:first-of-type:last-of-type,
[dir="rtl"] #rl-app .btn-group .btn:first-of-type:last-of-type {
	border-radius: var(--nc-border-radius-large) !important;
}

#rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])) {
	border-radius: 0 !important;
	border-top-left-radius: var(--nc-border-radius-large) !important;
	border-bottom-left-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn.fontastic:first-of-type,
[dir="rtl"] #rl-app .btn-group .btn.fontastic:last-of-type {
	border-radius: 0;
	border-top-left-radius: var(--nc-border-radius-large);
	border-bottom-left-radius: var(--nc-border-radius-large);
}

#rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])) {
	border-radius: 0 !important;
	border-top-right-radius: var(--nc-border-radius-large) !important;
	border-bottom-right-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn.fontastic:last-of-type,
[dir="rtl"] #rl-app .btn-group .btn.fontastic:first-of-type {
	border-radius: 0;
	border-top-right-radius: var(--nc-border-radius-large);
	border-bottom-right-radius: var(--nc-border-radius-large);
}

#rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) {
	border-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .btn-group .btn.fontastic:first-of-type:last-of-type,
[dir="rtl"] #rl-app .btn-group .btn.fontastic:first-of-type:last-of-type {
	border-radius: var(--nc-border-radius-large) !important;
}

/* #endregion */

/* #region input & select */

#rl-app select,
#rl-app .select,
#rl-app .emailaddresses,
#rl-app input:not([type="checkbox"]) {
	padding: 0 12px;
	font-size: var(--nc-default-font-size);
	color: var(--nc-color-main-text);
	background-color: unset;
	height: 36px;
	border: 2px solid var(--nc-color-border-maxcontrast);
	border-radius: var(--nc-border-radius-large);
	line-height: 32px;
	outline: none;
}

#rl-app select:hover,
#rl-app select:active,
#rl-app select:focus,
#rl-app .select:hover,
#rl-app .select:active,
#rl-app .select:focus,
#rl-app .emailaddresses:hover,
#rl-app .emailaddresses:active,
#rl-app .emailaddresses:focus,
#rl-app input:hover,
#rl-app input:active,
#rl-app input:focus,
#rl-app input:not([type="checkbox"]):hover,
#rl-app input:not([type="checkbox"]):active,
#rl-app input:not([type="checkbox"]):focus {
	border-color: var(--nc-color-primary-element);
}

/* #endregion */

/* #region input */

#rl-app input {
	box-shadow: none;
}

#rl-app input[type="search"]::-webkit-search-decoration,
#rl-app input[type="search"]::-webkit-search-cancel-button,
#rl-app input[type="search"]::-webkit-search-results-button,
#rl-app input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

#rl-app input::-webkit-outer-spin-button,
#rl-app input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#rl-app input[type=number] {
	appearance: textfield;
	margin: 0;
	/* ? margin: 0 5px 0 0; */
}

#rl-app .search-input-wrp a {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: unset;
	min-height: unset;
	height: 32px;
	font-size: 20px;
	line-height: 30px;
}

/* #endregion */

/* #region checkbox */

#rl-app .e-checkbox.material-design {
	width: fit-content !important;
	width: -moz-fit-content !important;
	display: flex;
	position: relative;
	align-items: center;
	user-select: none;
	height: 44px;
	border-radius: 44px;
	padding: 0 14px;
	margin: 0;
}

#rl-app .e-checkbox.material-design:hover,
#rl-app .e-checkbox.material-design:focus-within {
	background-color: var(--nc-color-primary-light);
	outline: none;
}

#rl-app .e-checkbox input[type="checkbox"] {
	display: none;
}

#rl-app .e-checkbox:focus {
	outline: none;
}

input[type="checkbox"] {
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

#rl-app .e-checkbox.material-design>div {
	position: relative;
	width: 18px;
	top: 2px;
}

#rl-app input[type="checkbox"],
#rl-app .e-checkbox.material-design input+div {
	position: unset;
	height: 18px !important;
	width: 18px !important;
	min-width: 18px !important;
	flex-shrink: 0 !important;
	border: 2px solid var(--nc-color-primary-element);
	border-radius: 2px;
	box-sizing: border-box;
	animation: none;
	transform: unset;
}

#rl-app input[type="checkbox"]:checked,
#rl-app .e-checkbox.material-design input:checked+div {
	--nc-svg-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'><path d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'></path></svg>");
	-webkit-mask-image: var(--nc-svg-checked);
	mask-image: var(--nc-svg-checked);
	background: var(--nc-color-primary-element);
	border-width: 0;
	animation: none;
	transform: unset;
}

/* #endregion */

/* #region select */

#rl-app select option,
#rl-app select::-webkit-scrollbar-corner,
#rl-app select::-webkit-scrollbar-track-piece {
	background-color: var(--nc-color-main-background);
	color: var(--nc-color-main-text);
}

/* #endregion */

/* #region select email address */

#rl-app .emailaddresses {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 4px;
	width: 100%;
	height: auto;
	min-height: 44px;
	max-height: calc(44px*2);
	line-height: var(--nc-default-line-height);
	background-color: var(--nc-color-main-background);
	white-space: normal;
}

#rl-app .emailaddresses.emailaddresses-focused {
	border: 2px solid var(--nc-color-primary-element);
}

#rl-app .emailaddresses li {
	margin: 4px 2px 0;
}

#rl-app .emailaddresses li.emailaddresses-input>input[type="text"],
#rl-app .emailaddresses li.emailaddresses-input>input[type="text"]:focus,
#rl-app .emailaddresses li.emailaddresses-input>input[type="text"]:hover {
	padding: 0 7px;
	height: 36px;
	max-width: 390px;
	color: var(--nc-color-main-text);
	font-size: var(--nc-default-font-size);
	line-height: var(--nc-default-line-height);
}

#rl-app .emailaddresses li[draggable] {
	display: flex;
	align-items: center;
	padding: 0 0.5em;
	min-height: 36px;
	line-height: var(--nc-default-line-height);
	color: var(--nc-color-main-text);
	border: 0;
	border-radius: var(--nc-border-radius-large);
	background-color: var(--nc-color-background-dark);
	box-shadow: none;
}

#rl-app .emailaddresses li[draggable]>span {
	max-width: calc(100vw - 140px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#rl-app .emailaddresses li[draggable]>a.ficon {
	position: unset;
	color: transparent;
	text-shadow: 0 0 0 var(--nc-color-text-maxcontrast);
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	margin-left: 4px;
	padding: 0;
}

@media screen and (max-width: 480px) {
	#rl-app .emailaddresses li.emailaddresses-input>input[type="text"] {
		max-width: calc(100vw - 116px) !important;
	}
}

/* #endregion */

/* #region textarea */

#rl-app .squire-toolbar {
	height: 50px;
	padding: 5px;
	box-sizing: content-box;
	border: none;
}

#rl-app textarea,
#rl-app div[contenteditable],
#rl-app .squire-wysiwyg,
#rl-app .squire-plain {
	padding: 8px 12px;
	margin: unset;
	font-size: var(--nc-default-font-size);
	color: var(--nc-color-main-text);
	background-color: unset;
	outline: none;
	border: 2px solid var(--nc-color-border-dark);
	border-radius: var(--nc-border-radius-large);
}

#rl-app textarea:hover,
#rl-app textarea:active,
#rl-app textarea:focus,
#rl-app div[contenteditable=true]:hover,
#rl-app div[contenteditable=true]:active,
#rl-app div[contenteditable=true]:focus,
#rl-app .squire-wysiwyg:hover,
#rl-app .squire-wysiwyg:active,
#rl-app .squire-wysiwyg:focus,
#rl-app .squire-plain:hover,
#rl-app .squire-plain:active,
#rl-app .squire-plain:focus {
	border-color: var(--nc-color-primary-element);
}

/* #endregion */

/* #region dropdown */

#rl-app .dropdown.show {
	box-shadow: none;
}

#rl-app .dropdown-menu {
	background-color: var(--nc-color-main-background);
	filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow));
	border-radius: var(--nc-border-radius-large);
	color: var(--nc-color-main-text);
	padding: 4px;
}

#rl-app .dropdown-menu a {
	background-color: unset;
	color: unset;
	height: 22px;
	line-height: 22px;
	border-radius: 3px;
	margin: 2px;
	box-sizing: content-box;
	text-align: start;
}

#rl-app .dropdown-menu li.disabled>a,
#rl-app .dropdown-menu li.disabled>a:hover,
#rl-app .dropdown-menu li.disabled>a:focus,
#rl-app .dropdown-menu li.disabled>a:active {
	opacity: .5;
	filter: saturate(0.7);
}

#rl-app .dropdown-menu li:not(.disabled)>a:hover,
#rl-app .dropdown-menu li:not(.disabled)>a:focus {
	background-color: var(--nc-color-background-hover);
	color: unset;
	opacity: unset;
}

#rl-app .dropdown-menu li:not(.disabled)>a:active {
	background-color: var(--nc-color-primary-element-light);
}

#rl-app .dropdown-menu *+.dividerbar {
	border-color: var(--nc-color-border);
}

#rl-app .dropdown-menu::-webkit-scrollbar-track-piece {
	background-color: inherit;
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
}

.rl-left-panel-disabled #rl-app .dropdown-menu:not(.right-edge) {
	position: fixed;
	top: auto;
	left: 5px;
	right: auto;
}

/* #endregion */

/* #region dropdown account */

#rl-app #V-SystemDropDown {
	margin: 2px 5px 0 5px;
}

#rl-app #V-SystemDropDown .btn-toolbar {
	border: solid 1px var(--nc-color-border-dark);
	border-radius: var(--nc-border-radius-large);
	height: 36px;
	padding: 2px;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: content-box;
}

#rl-app #V-SystemDropDown .accountPlace {
	background: unset;
	color: unset;
	text-shadow: none;
	border-color: var(--nc-color-border);
}

#rl-app #V-SystemDropDown #top-system-dropdown-id {
	background-color: unset;
	border: unset !important;
	border-radius: var(--nc-border-radius-large) !important;
	height: 20px;
}

#rl-app #V-SystemDropDown #top-system-dropdown-id:hover,
#rl-app #V-SystemDropDown #top-system-dropdown-id:focus {
	background-color: var(--nc-color-background-hover);
}

#rl-app #V-SystemDropDown #top-system-dropdown-id:active {
	background-color: var(--nc-color-background-dark);
}

/* #endregion */

/* #region tab */

#rl-app .tabs>[id^=tab]:checked+label {
	background-color: var(--nc-color-main-background);
	border-color: var(--nc-color-primary-element);
	border-bottom-color: transparent;
}

#rl-app .tabs>label {
	margin: 0 2px -1px 2px;
	border-radius: 0;
	border-top-left-radius: var(--nc-border-radius);
	border-top-right-radius: var(--nc-border-radius);
	overflow-wrap: anywhere;
}

#rl-app .tabs>label:first-of-type {
  margin-left: 0px;
}

#rl-app .tabs>label:last-of-type {
  margin-right: 0px;
}


#rl-app .tabs>label:hover {
	border-color: transparent;
	border-bottom-color: var(--nc-color-primary-element);
	background-color: var(--nc-color-background-hover)
}

#rl-app .tabs .tab-content {
	border-top: solid 1px;
	border-radius: 4px;
	border-color: var(--nc-color-primary-element);
}

@media screen and (max-width: 480px) {
	#rl-app .tabs>label>i,
	#rl-app .tabs>label::before {
		display: none;
	}
}

/* #endregion */

/* #region table */

#rl-app .table td,
#rl-app .table th,
#rl-app .table-bordered {
	border-color: var(--nc-color-border-dark);
}

#rl-app .table-hover tbody tr:hover td,
#rl-app .table-hover tbody tr:hover th {
	background-color: var(--nc-color-background-hover);
}

#rl-app .table-striped tbody tr:nth-child(odd) td,
#rl-app .table-striped tbody tr:nth-child(odd) th {
	background-color: var(--nc-color-background-dark);
}

/* #endregion */

/* #region attachment */

#rl-app .attachmentItem {
	background-color: var(--nc-color-background-dark);
	border-radius: var(--nc-border-radius);
	box-shadow: none;
	padding: 2px;
}

#rl-app .attachmentListSimple {
  flex-wrap: wrap;
  display: flex;
}

#rl-app .attachmentListSimple .attachmentItem {
	display: flex;
	width: min-content;
	max-width: unset;
}

#rl-app .attachmentListSimple .attachmentName {
	max-width: 200px;
	margin: 5px;
}

#rl-app .attachmentListSimple .checkboxAttachment {
	position: initial;
  margin: 5px;
  margin-left: 0;
}

#rl-app .attachmentItem:hover,
#rl-app .attachmentItem:active {
	background-color: var(--nc-color-background-darker);
}

#rl-app .attachmentItem:focus {
	outline: none;
}

#rl-app .attachmentItem .iconProgress {
	background-color: var(--nc-color-background-darker);
}

#rl-app .attachmentItem .iconBG {
	font-weight: 700;
	line-height: 48px;
	font-size: unset;
	text-shadow: unset;
}

#rl-app .attachmentItem .attachmentNameParent {
	border-color: var(--nc-color-border-dark);
}

#rl-app .attachmentItem .iconMain,
#rl-app .attachmentItem .iconPreview {
	color: var(--nc-color-text-light);
}

/* #endregion */

/* #endregion */

/*
 *  Views
 */

/* #region views */

/* #region app */

#rl-app {
	color: var(--nc-color-main-text);
	background-color: transparent;
	font-family: var(--nc-font-face);
	font-size: var(--nc-default-font-size);
}

#rl-app #rl-left {
	background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background));
	-webkit-backdrop-filter: var(--nc-filter-background-blur, none);
	backdrop-filter: var(--nc-filter-background-blur, none);
	border-color: var(--nc-color-border);
	width: 300px;
}

html:not(.rl-left-panel-disabled) #rl-left {
	max-width: var(--nc-sidebar-max-width);
}

html.rl-left-panel-disabled #rl-app #rl-left {
	width: 65px !important;
}

html.rl-mobile.rl-left-panel-disabled #rl-app #rl-left {
	width: 0px !important;
}

#rl-app #rl-right {
	background-color: var(--nc-color-main-background);
}

#rl-app::selection {
	background-color: var(--nc-color-primary);
	color: var(--nc-color-primary-text);
}

#rl-app .control-group {
	margin-bottom: 0.5em;
}

#rl-app .form-horizontal .control-group {
	display: flex;
	align-items: center;
	margin-left: 0;
}

#rl-app .form-horizontal .control-group {
	margin-bottom: 1em;
}

@media screen and (max-width: 799px) {
	#rl-app .form-horizontal .control-group>label {
		text-align: right;
	}
}

/* #endregion */

/* #region login & loading */

#rl-app #V-Login,
#rl-app #rl-loading,
#rl-app #rl-loading-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;

	top: unset;
	position: unset;
	min-width: unset;
	max-width: unset;
	transform: unset;
	text-shadow: none;
	transition: none;

	background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background));
	-webkit-backdrop-filter: var(--nc-filter-background-blur, none);
	backdrop-filter: var(--nc-filter-background-blur, none);

	color: var(--nc-color-main-text);
	width: 100%;
	height: 100%;
}

#rl-app .LoginView .descWrapper {
	color: var(--nc-color-main-text);
}

#rl-app .LoginView .alert {
	position: unset;
}

#rl-app .LoginView form {
	min-width: 250px;
	max-width: 500px;
	width: 90%;

	background-color: var(--nc-color-main-background);
	border: unset;
	border-radius: var(--nc-border-radius-large);
	box-shadow: 0 0 10px var(--nc-color-box-shadow);
	color: var(--nc-color-main-text);
}

#rl-app .LoginView .controls>.fontastic:first-child {
	padding: unset;
	left: 10px;
}

#rl-app .LoginView .controls span.fontastic {
	user-select: none;
}

#rl-app .LoginView .controls span.fontastic:active,
#rl-app .LoginView .controls span.fontastic:hover {
	background: unset;
}

#rl-app .LoginView .controls input:not([type="checkbox"]) {
	padding-left: 30px;
}

#rl-app #rl-loading[hidden],
#rl-app #rl-loading-error[hidden],
#rl-app .LoginView .alert[hidden] {
	display: none;
}

/* #endregion */

/* #region side panel */

html.rl-left-panel-disabled #rl-app #rl-left:has(#V-SettingsMenu:not([hidden])) {
	width: 250px !important;
}

#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu>.b-toolbar {
	top: 0;
	left: 0;
	height: auto !important;
	padding-top: calc(var(--nc-default-grid-baseline) * 2) !important;
	padding-bottom: calc(var(--nc-default-grid-baseline) * 2) !important;
	font-weight: bold;
}

#rl-app .b-folders .b-toolbar {
	height: unset;
	display: flex;
	flex-direction: row;
	padding: 8px;
}

html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar {
	flex-direction: column;
}

#rl-app .b-folders .b-toolbar .btn.buttonCompose,
#rl-app .b-folders .b-toolbar .btn.buttonContacts,
#rl-app .b-footer .btn {
	box-sizing: border-box;
	padding: 4px 14px;
	line-height: 36px;
	height: 44px;
	min-width: fit-content;
	width: stretch;
	width: -moz-available;
	width: -webkit-fill-available;
	margin: 3px !important;

	font-size: var(--nc-default-font-size);
}

#rl-app .b-folders .b-toolbar .btn.buttonCompose {
	min-width: 16px;
	max-width: 100%;
	font-weight: bold;
	box-sizing: content-box !important;
}

#rl-app .b-folders .b-toolbar .btn.buttonContacts {
	width: 44px;
	min-width: 44px;
}

#rl-app #V-AdminMenu nav,
#rl-app #V-SettingsMenu nav,
#rl-app .b-folders .b-content {
	padding: calc(var(--nc-default-grid-baseline) * 2);
}

#rl-app .b-folders .b-content {
	top: 60px;
	bottom: 162px;
	color: unset;
}

#rl-app .b-folders .b-content.show-on-panel-disabled {
	bottom: 56px;
}

#rl-app #V-AdminMenu nav a,
#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu nav a,
#rl-app #V-SettingsMenu>.b-toolbar,
#rl-app .b-folders li a.selectable {
	margin: 2px;
	padding: 0 2em 0 15px;
	height: 38px;
	line-height: 38px !important;
	border-radius: var(--nc-border-radius-large);
	color: unset;
	border: none;
}

#rl-app #V-AdminMenu nav a,
#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu nav a,
#rl-app #V-SettingsMenu>.b-toolbar {
	height: 44px;
	min-height: 44px;
	line-height: 44px !important;
}

#rl-app #V-AdminMenu nav a.selected,
#rl-app #V-SettingsMenu nav a.selected,
#rl-app .b-folders li a.selectable.selected {
	color: unset;
	background-color: var(--nc-color-primary-light);
}

#rl-app #V-AdminMenu nav a:not(.selected):hover,
#rl-app #V-AdminMenu nav a:not(.selected):focus,
#rl-app #V-SettingsMenu nav a:not(.selected):hover,
#rl-app #V-SettingsMenu nav a:not(.selected):focus,
#rl-app .b-folders li a.selectable:not(.selected):hover,
#rl-app .b-folders li a.selectable:not(.selected):focus {
	color: unset;
	background-color: var(--nc-color-background-hover);
}

#rl-app .b-folders .b-folders-system a[data-unread]::after,
#rl-app .b-folders .b-folders-user a[data-unread]::after {
	display: block;
	margin: 0;
	padding: 2px 6px;
	top: 50%;
	transform: translateY(-50%);

	color: var(--nc-color-primary-element);
	background-color: var(--nc-color-primary-element-light);

	font-size: 12px;
	text-shadow: none;
}

html.rl-left-panel-disabled #rl-app .b-folders .b-folders-system a.selectable {
	text-overflow: clip;
}

#rl-app .b-folders hr {
	border-top: solid var(--nc-color-main-text);
	border-radius: var(--nc-border-radius-large);
	opacity: .1;
}

#rl-app .b-folders .search-input-wrp {
	width: calc(100% - 20px);
	margin: 5px 10px;
	opacity: .7;
}

#rl-app .b-folders .search-input-wrp input {
	width: 100%;
}

#rl-app .b-footer.btn-toolbar.hide-mobile,
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
	display: flex;
	flex-direction: column;
	align-content: stretch;
	justify-content: flex-start;
	height: unset;
	box-sizing: border-box;
}

#rl-app .b-footer.btn-toolbar.hide-mobile,
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
	margin: 0;
	padding: 0;
	bottom: 0;
}

#rl-app .b-footer.btn-toolbar {
	overflow: unset;
	padding: 3px;
}

#rl-app .b-footer.btn-toolbar .btn {
	background: transparent;
	border: unset !important;
}

#rl-app .b-footer.btn-toolbar .btn {
	text-align: left;
	font-size: 22px;
	user-select: none;
}

#rl-app .b-footer.btn-toolbar .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
#rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
[dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) {
	border-radius: var(--nc-border-radius-large) !important;
}

/* fallback */
#rl-app .b-footer.btn-toolbar .btn-group .btn,
#rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic,
[dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn,
[dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic {
	border-radius: var(--nc-border-radius-large) !important;
}

#rl-app .b-footer.btn-toolbar .btn:hover,
#rl-app .b-footer.btn-toolbar .btn.fontastic:hover {
	background-color: var(--nc-color-background-hover);
}

#rl-app .b-footer.btn-toolbar .btn:active,
#rl-app .b-footer.btn-toolbar .btn.fontastic:active {
	background-color: var(--nc-color-primary-light);
}

#rl-app .b-footer.btn-toolbar .btn:focus,
#rl-app .b-footer.btn-toolbar .btn.fontastic:focus {
	outline: none;
}

#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn {
	width: -webkit-fill-available;
	width: -moz-available;
	width: fill-available;
	overflow: hidden;
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic {
	background-color: var(--nc-color-main-background);
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after,
[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:before {
	font-family: var(--nc-font-face);
	font-size: var(--nc-default-font-size);
	margin-left: 15px;
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after {
	position: absolute;
}

[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after {
	position: unset;
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after,
[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:before {
	content: attr(title);
	width: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after {
	content: unset;
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:before {
	line-height: unset;
}

#rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after {
	content: attr(title);
	width: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

html.rl-left-panel-disabled #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.fontastic:after,
html.rl-left-panel-disabled #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after,
html.rl-left-panel-disabled[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.fontastic:before {
	content: '';
}

#rl-app #V-MailFolderList .b-footer .btn[data-bind*="toggleLeftPanel"] {
	width: unset !important;
}

/* #endregion */

/* #region message list & view */

#rl-app .messageList,
#rl-app .messageView {
	height: calc(100% - 65px);
	margin: 0 5px;
	border: 0;
	border-top: 1px solid transparent;
	box-shadow: none !important;
	background: var(--nc-color-main-background);
}

#rl-app #V-MailMessageList .btn-toolbar,
#rl-app #V-MailMessageView .btn-toolbar {
	padding: 10px;
	margin-top: 5px;
}

/* fallback */
#rl-app #V-MailMessageList .btn-toolbar .btn-group .btn,
#rl-app #V-MailMessageView .btn-toolbar .btn-group .btn {
	border-radius: var(--nc-border-radius-large);
}

/* #endregion */

/* #region message list */

#rl-app #V-MailMessageList {
	overflow: unset;
}

#rl-app #V-MailMessageList .btn-toolbar {
	background: var(--nc-color-primary-light);
	border-radius: var(--nc-border-radius-large);
	margin: 5px 5px 0 5px;
	text-align: start;
}

html.sm-msgView-side #V-MailMessageList .btn-toolbar {
	text-align: center !important;
}

#rl-app #V-MailMessageList .btn-toolbar .btn:not(.btn-success) {
	background: var(--nc-color-main-background);
}

#rl-app #V-MailMessageList .messageList {
	min-width: 370px;
}

html.sm-msgView-bottom #rl-app .messageList {
	height: 35vh;
}

#rl-app .messageList .second-toolbar,
#rl-app .messageList .b-footer {
	border-color: var(--nc-color-border);
	background: unset !important;
}

#rl-app .messageList .second-toolbar {
	align-items: center;
}

#rl-app .messageList .b-footer {
	padding-bottom: 10px;
}

#rl-app .messageList .inputSearch {
	max-width: unset;
}

#rl-app .messageList .checkboxCheckAll {
	margin: 0 12px;
}

#rl-app .messageList .checkboxCheckAll:hover,
#rl-app .messageList .checkboxCheckAll:focus {
	color: var(--nc-color-primary-element);
}

#rl-app .messageList .checkboxCheckAll:active {
	color: var(--nc-color-primary-element-hover);
}

html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll {
	display: none;
}

#rl-app .messageList .btn.buttonMoreSearch {
	background: unset;
	border-radius: var(--nc-border-radius-large);
	margin: 0 0 0 8px;
	line-height: 20px !important;
}

#rl-app .messageList .checkboxCheckAll,
#rl-app .messageList .btn.buttonMoreSearch {
	font-size: var(--nc-default-font-size);
	height: 28px;
	line-height: 28px;
}

#rl-app .messageList .b-content .listThreadUidDesc {
	margin: 8px;
	color: var(--nc-color-main-text);
	background: unset;
	border: solid 1px;
	border-radius: var(--nc-border-radius-large);
	border-color: var(--nc-color-border-dark);
}

#rl-app .messageList .b-content .listThreadUidDesc:hover,
#rl-app .messageList .b-content .listThreadUidDesc:focus {
	background: var(--nc-color-background-hover);
}

#rl-app .messageList .b-content .listThreadUidDesc:active {
	background-color: var(--nc-color-primary-element-light);
}

#rl-app .messageList .b-content .listSearchDesc {
	border-color: var(--nc-color-border);
}

#rl-app .messageList .b-content .listError {
	color: var(--nc-color-error);
}

#rl-app .messageList .b-content .listDragOver.dragOverEnter {
	background-color: var(--nc-color-background-dark);
	border-radius: var(--nc-border-radius);
	margin: 5px;
}

#rl-app .messageList .b-content .listDragOver,
#rl-app .messageList .b-content .listEmptyMessage,
#rl-app .messageList .b-content .listError,
#rl-app .messageList .b-content .listLoading {
	color: var(--nc-color-text-lighter);
}

#rl-app .messageList .groupLabel {
	background-color: var(--nc-color-background-dark);
	border-radius: var(--nc-border-radius);
	margin: 2px 0;
}

/* #endregion */

/* #region message list item */

#rl-app .messageListItem .checkboxMessage {
	border-color: var(--nc-color-text-lighter);
	color: var(--nc-color-text-lighter);
}

#rl-app .messageListItem .checkboxMessage:hover,
#rl-app .messageListItem .checkboxMessage:focus {
	background-color: var(--nc-color-background-darker);
}

#rl-app .messageListItem .checkboxMessage:active {
	background-color: var(--nc-color-primary-light-hover);
}

#rl-app .messageListItem .threads-len {
	color: var(--nc-color-text-light);
	border-color: var(--nc-color-text-light);
	padding: 0 4px;
	margin-right: 5px;
}

#rl-app .messageListItem .threads-len:hover,
#rl-app .messageListItem .threads-len:focus {
	background-color: var(--nc-color-background-darker);
	border-color: unset;
}

#rl-app .messageListItem .threads-len:active {
	background-color: var(--nc-color-primary-element-light-hover);
}

#rl-app .messageListItem {
	padding: 8px;
	margin: 2px 0;
	border-bottom: unset;
	border-radius: var(--nc-border-radius);
}

#rl-app .messageListItem,
#rl-app .messageListItem.focused {
	background-color: var(--nc-color-background);
	border-color: var(--nc-color-border);
}

#rl-app .messageListItem:hover,
#rl-app .messageListItem.focused:hover {
	background-color: var(--nc-color-background-hover);
	border-color: var(--nc-color-primary-light-hover);
}

#rl-app .messageListItem.selected,
#rl-app .messageListItem.selected:hover {
	background-color: var(--nc-color-primary-light) !important;
	border-color: var(--nc-color-primary-light-text) !important;
}

#rl-app .messageListItem.unseen {
	background-color: unset;
	border-color: var(--nc-color-primary);
}

#rl-app .messageListItem.unseen.focused,
#rl-app .messageListItem.unseen.focused:hover {
	background-color: var(--nc-color-primary-light);
	border-color: var(--nc-color-primary);
}

#rl-app .messageListItem.unseen:hover {
	background-color: var(--nc-color-background-hover);
	border-color: var(--nc-color-primary-hover);
}

#rl-app .messageListItem [data-unseen] {
	border-color: var(--nc-color-primary-element);
	background-color: var(--nc-color-primary-element-light);
	border-width: 2px;
	font-weight: 700;
}

#rl-app .messageListItem [data-unseen]:hover {
	border-color: var(--nc-color-primary-element-hover);
	background-color: var(--nc-color-primary-element-light-hover);
}

#rl-app .messageListItem.checked {
	background-color: unset;
	border-color: var(--nc-color-primary-light-text);
}

#rl-app .messageListItem.checked.focused {
	background-color: inherit;
	border-color: var(--nc-color-primary-light-text);
}

#rl-app .messageListItem.checked:hover,
#rl-app .messageListItem.checked.focused:hover {
	background-color: var(--nc-color-background-hover);
	border-color: inherit;
}

#rl-app #messagesDragImage {
	padding: 5px 5px 5px 10px;
	color: var(--nc-color-text-lighter);
	background-color: var(--nc-color-background-darker);
	border-radius: var(--nc-border-radius);
	box-shadow: 0 0 4px var(--nc-color-box-shadow);
	height: unset;
	min-width: unset;
}

/* #endregion */

/* #region message view */

#rl-app #V-MailMessageView {
	bottom: 0;
}

html.sm-msgView-bottom #rl-app .messageView {
	height: 100%;
}

#rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit {
	padding: 4px 8px;
	min-height: 28px;
	height: 28px;
	opacity: 0.8;
}

#rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:hover,
#rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:focus,
#rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:active {
	opacity: unset;
}

#rl-app .messageView .b-message-view-desc,
#rl-app .messageView .b-message-view-checked-helper {
	color: var(--nc-color-text-lighter);
}

#rl-app .messageView .b-message-view-desc.error {
	color: var(--nc-color-error);
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-optimum-value {
	background-color: var(--nc-color-success);
	border-radius: var(--nc-border-radius-large);
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-suboptimum-value {
	background-color: var(--nc-color-warning);
	border-radius: var(--nc-border-radius-large);
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-even-less-good-value {
	background-color: var(--nc-color-error);
	border-radius: var(--nc-border-radius-large);
}

#rl-app .messageView .messageItemHeader .hasVirus {
	background: unset;
	border: solid 2px var(--nc-color-error);
	border-radius: var(--nc-border-radius);
	margin: 5px;
}

#rl-app .messageView .messageItemHeader .subject {
	line-height: 30px;
	height: 30px;
}

#rl-app .messageView .crypto-control.encrypted,
#rl-app .messageView .crypto-control.signed {
	border-radius: var(--nc-border-radius);
}

#rl-app #V-MailMessageView .b-message-view-backdrop {
	background-color: var(--nc-color-main-background-blur);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

#rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message {
	background-color: var(--nc-color-main-background);
	border: solid 1px var(--nc-color-primary);
	border-radius: var(--nc-border-radius-large);
	text-shadow: none;
	margin: 10px;
	color: unset;
}

#rl-app .messageView .messageAssignedTags {
	margin: 0 5px;
}

#rl-app .messageView .messageAssignedTags span {
	border-radius: var(--nc-border-radius-large);
	background: unset;
	padding: 2px 5px;
}

#rl-app #messageItem .bodySubHeader {
	background-color: unset;
}

#rl-app #messageItem .bodySubHeader>* {
	border-color: var(--nc-color-border);
}

.rl-left-panel-disabled #rl-app #messageItem .dropdown-menu {
	position: absolute;
}

#rl-app #messageItem .readReceipt,
#rl-app #messageItem .showImages {
	margin: 8px;
	padding: 10px;
	color: var(--nc-color-main-text);
	border: solid 1px var(--nc-color-primary);
	background-color: var(--nc-color-primary-light);
	border-radius: var(--nc-border-radius-large);
}

#rl-app #messageItem .showImages>.btn,
#rl-app #messageItem .showImages>.btn-group {
	margin: 2px;
}

#rl-app #messageItem .readReceipt:hover {
	background-color: var(--nc-color-primary-light-hover);
}

#rl-app .messageView .messageItemHeader,
#rl-app #messageItem .attachmentsPlace {
	background-color: unset;
	border-color: var(--nc-color-border);
	color: var(--nc-color-main-text);
}

#rl-app #messageItem .attachmentsPlace {
	border-top: 1px solid var(--nc-color-border);
	top: -1px;
}

#rl-app #messageItem .attachmentsPlace .controls-handle {
	-webkit-user-select: none;
	user-select: none;
}

#rl-app #messageItem .attachmentsControls {
	background-color: unset;
	border-color: var(--nc-color-border);
	-webkit-user-select: none;
	user-select: none;
}

#rl-app #messageItem .attachmentsControls .icon-file-archive,
#rl-app #messageItem .attachmentsControls .fontastic {
	color: var(--nc-color-main-text);
}

/* #endregion */

/* #region settings */

#rl-app #V-SettingsPane {
	margin: 62px 0 8px 0;
	height: calc(100% - 62px - 8px);
	background-color: unset;
	box-shadow: none;
	border: none;
}

#rl-app #V-SettingsPane .btn-toolbar {
	padding: 8px;
}

#rl-app .row {
	margin-left: unset;
}

#rl-app .legend,
#rl-app #V-AdminPane hr,
#rl-app #V-SettingsPane hr {
	color: unset;
	border-color: var(--nc-color-border);
}

#rl-app #V-Settings-Themes figure,
#rl-app #V-Settings-Themes img {
	border-radius: var(--nc-border-radius-large);
}

#rl-app #V-Settings-Themes figure:not(.selected):hover {
	background-color: var(--nc-color-background-hover);
	border-color: transparent;
}

#rl-app #V-Settings-Themes figure:not(.selected):active {
	background-color: var(--nc-color-primary-element-light);
}

#rl-app #V-Settings-Themes figure:not(.selected):focus {
	outline: none;
}

#rl-app #V-Settings-Themes figure.selected {
	background-color: var(--nc-color-primary-element);
	border-color: transparent;
	color: var(--nc-color-primary-element-text);
}

/* hide additional theme settings, as these are made via Nextcloud theming */

/* fonts */
#rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(3) {
	display: none !important;
}

/* background */
#content.app-snappymail #rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(4) {
	display: none !important;
}

/* #endregion */

/* #region settings admin */

#rl-app #V-AdminPane {
	margin: 8px 0px;
	height: calc(100% - 2*8px);
	background-color: unset;
	box-shadow: none;
	border: none;
}

#rl-app #V-AdminPane>.b-toolbar {
	width: 300px;
	text-shadow: none;
}

html.rl-mobile #rl-app #V-AdminPane {
	margin: 60px 0px 8px 0px;
	height: calc(100% - 60px - 8px);
}

html.rl-mobile #rl-app #V-AdminPane>.b-toolbar {
	width: unset;
}

#rl-app #V-Settings-Config th {
	background-color: var(--nc-color-background-dark);
}

#rl-app #V-Settings-Config em {
	word-break: break-word;
}

#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] {
	align-self: self-start;
}

#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"]~div .alert.alert-info {
	margin-left: -130px;
}

#rl-app #V-Settings-Domains .btn[data-i18n="GLOBAL/TEST"] {
	margin-left: 1rem;
}

@media screen and (max-width: 1024px) {
	#rl-app #V-AdminPane table {
		width: 100%;
	}

	#rl-app #V-AdminPane [class*="span"] {
		width: unset;
	}
}

@media screen and (max-width: 480px) {
	#rl-app #V-Settings-Config .table {
		border-collapse: collapse;
	}

	#rl-app #V-Settings-Config .table tr {
		border-top: 10px solid transparent;
	}

	#rl-app #V-Settings-Config .table td,
	#rl-app #V-Settings-Config .table th {
		display: block;
		border-style: solid;
		border-width: 1px 0px;
	}
}

/* #endregion */

/* #region popup */

#rl-app dialog {
	background: var(--nc-color-main-background);
	color: var(--nc-color-main-text);
	border-radius: var(--nc-border-radius-large);
	filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow));
	box-shadow: none;
	border-color: var(--nc-color-border);
}

#rl-app dialog>header,
#rl-app dialog>footer {
	border-color: var(--nc-color-border);
}

#rl-app dialog>footer .btn+.btn,
#rl-app dialog>footer button+button {
	margin: 0 0 0 5px;
}

#rl-app #V-PopupsPlugin .help-block {
	margin-left: 5px;
}

#rl-app #V-PopupsIdentity .e-signature-place {
	border: none;
}

#rl-app #V-PopupsLanguages label {
	background-color: var(--nc-color-background-dark) !important;
	border-color: var(--nc-color-border);
	border-radius: var(--nc-border-radius);
	padding: 8px 15px;
}

#rl-app #V-PopupsLanguages label:hover {
	border-color: var(--nc-color-primary-element);
	background-color: unset;
}

#rl-app #V-PopupsLanguages label.user {
	background-color: var(--nc-color-main-background) !important;
	color: var(--nc-color-text-light);
}

#rl-app #V-PopupsLanguages label.selected {
	background-color: var(--nc-color-primary-element-light) !important;
	border-color: var(--nc-color-primary-element);
}

@media screen and (max-width: 480px) {
	#rl-app #V-PopupsAdvancedSearch .e-component.e-checkbox {
		margin-left: -100%;
	}

	#rl-app #V-PopupsLanguages label {
		margin-left: 0;
		margin-right: 0;
	}

	#rl-app #V-PopupsKeyboardShortcutsHelp .modal-body,
	#rl-app #V-PopupsDomain .modal-body {
		padding-left: 0;
		padding-right: 0;
		overflow-x: hidden;
	}
}

#rl-app #V-PopupsOpenPgpImport textarea {
	width: 100%;
}

/* #endregion */

/* #region popup contacts */

#rl-app #V-PopupsContacts .right,
#rl-app #V-PopupsContacts .b-list-toolbar,
#rl-app #V-PopupsContacts .b-list-footer-toolbar,
#rl-app #V-PopupsContacts .b-view-content-toolbar {
	border-color: var(--nc-color-border);
}

#rl-app #V-PopupsContacts .b-list-toolbar {
	height: 55px;
}

#rl-app #V-PopupsContacts .b-list-toolbar .e-search {
	margin: 9px 5px;
	width: calc(100% - 2*5px);
}

#rl-app #V-PopupsContacts .b-view-content {
	margin-top: 20px;
	height: calc(100% - 72px);
	overflow: hidden;
}

#rl-app #V-PopupsContacts .b-list-content {
	height: calc(100% - 35px - 72px);
}

#rl-app #V-PopupsContacts .b-list-content .listClear {
	box-shadow: none;
}

#rl-app #V-PopupsContacts .tabs {
	height: 100%;
}

#rl-app #V-PopupsContacts .tab-content {
	overflow: auto;
}

#rl-app #V-PopupsContacts .e-contact-item {
	padding: 4px;
	margin: 2px 4px;
	max-height: unset;
	border-bottom: 0 !important;
	border-radius: var(--nc-border-radius);
}

#rl-app #V-PopupsContacts .e-contact-item,
#rl-app #V-PopupsContacts .e-contact-item.focused {
	background-color: var(--nc-color-background);
	border-color: var(--nc-color-border);
}

#rl-app #V-PopupsContacts .e-contact-item:hover,
#rl-app #V-PopupsContacts .e-contact-item.focused:hover {
	background-color: var(--nc-color-background-hover);
	border-color: var(--nc-color-primary-light-hover);
}

#rl-app #V-PopupsContacts .e-contact-item.selected,
#rl-app #V-PopupsContacts .e-contact-item.selected:hover {
	background-color: var(--nc-color-primary-light);
	border-color: var(--nc-color-primary-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked {
	background-color: unset;
	border-color: var(--nc-color-primary-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked.focused {
	background-color: inherit;
	border-color: var(--nc-color-primary-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked:hover,
#rl-app #V-PopupsContacts .e-contact-item.checked.focused:hover {
	background-color: var(--nc-color-background-hover);
	border-color: inherit;
}

@media screen and (max-width: 799px) {
	#rl-app #V-PopupsContacts .modal-body {
		flex-direction: column;
	}

	#rl-app #V-PopupsContacts .left {
		max-width: unset;
		height: 40%;
	}

	#rl-app #V-PopupsContacts .b-list-footer-toolbar {
		display: none;
	}

	#rl-app #V-PopupsContacts .b-list-content {
		height: calc(100% - 55px);
		border-bottom: 1px solid var(--nc-color-border);
	}

	#rl-app #V-PopupsContacts .right {
		height: 60%;
		border-left: unset;
	}

	#rl-app #V-PopupsContacts .control-group {
		margin-right: 1em;
	}
}

/* #endregion */

/* #region popup compose */

#rl-app #V-PopupsCompose header {
	background-color: unset;
	color: unset;
}

#rl-app #V-PopupsCompose header .close,
#rl-app #V-PopupsCompose header .minimize-custom {
	border-color: unset;
}

#rl-app #V-PopupsCompose .b-header {
	background: unset;
}

#rl-app #V-PopupsCompose .b-header .error-to {
	color: var(--nc-color-error);
}

#rl-app #V-PopupsCompose .pull-right>.btn,
#rl-app #V-PopupsCompose .pull-right>.btn-group {
	margin-left: 3px;
}

#rl-app #V-PopupsCompose .no-attachments-desc {
	text-shadow: unset;
}

#rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:hover,
#rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:active {
	background-color: var(--nc-color-background-dark);
}

#rl-app #V-PopupsCompose .b-attachment-place {
	border-color: var(--nc-color-border);
	background-color: var(--nc-color-background-dark);
}

#rl-app #V-PopupsCompose .b-attachment-place.dragAndDropOver {
	border-color: var(--nc-color-border);
}

#rl-app #V-PopupsCompose .tabs label[for="tab-attachments"] b {
	padding: 2px 6px;
	border-radius: 1em;
	color: var(--nc-color-primary-element);
	background-color: var(--nc-color-primary-element-light);
	font-size: 12px;
}

/* #endregion */

/* #region popup nextcloud files */

#rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"] {
	font-size: 0;
}

#rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"]::before {
	display: block;
	content: "";
	height: 100%;
	width: 30px;
	--nc-logo: url("data:image/svg+xml,<svg height='29' width='64' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='m32.028 0c-6.6304 0-12.249 4.4952-13.991 10.564-1.5172-3.259-4.7762-5.5066-8.5971-5.5066-5.1694 0-9.4398 4.2704-9.4398 9.496s4.2704 9.4961 9.496 9.4961c3.7647 0 7.0799-2.2476 8.5971-5.5066 1.6856 6.0685 7.3046 10.564 13.935 10.564 6.5742 0 12.193-4.4389 13.991-10.451 1.5171 3.1466 4.7761 5.338 8.4846 5.338 5.2257 0 9.4961-4.2704 9.4961-9.4961s-4.2704-9.4398-9.4961-9.4398c-3.7085 0-6.9675 2.1914-8.4846 5.338-1.7981-5.9561-7.3608-10.395-13.991-10.395zm0 5.5628c5.0009 0 8.9903 3.9894 8.9903 8.9903s-3.9894 8.9904-8.9903 8.9904-8.9903-3.9895-8.9903-8.9904 3.9894-8.9903 8.9903-8.9903zm-22.532 5.057c2.1914 0 3.9333 1.7419 3.9333 3.9333s-1.7419 3.9333-3.9333 3.9333-3.9332-1.7419-3.9332-3.9333 1.7419-3.9333 3.9332-3.9333zm45.008 0c2.1915 0 3.9333 1.7419 3.9333 3.9333s-1.7418 3.9333-3.9333 3.9333-3.9332-1.7419-3.9332-3.9333c0.0562-2.1914 1.7418-3.9333 3.9332-3.9333z' fill-rule='nonzero'></path></svg>");
	-webkit-mask-image: var(--nc-logo);
	mask-image: var(--nc-logo);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 30px;
	mask-size: 30px;
	background-color: var(--nc-color-main-text);
}

#rl-app #V-PopupsNextcloudFiles {
	user-select: none;
}

#rl-app #V-PopupsNextcloudFiles li {
	line-height: unset;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon],
#rl-app #V-PopupsNextcloudFiles li:has(>button[name="create"]),
#rl-app #V-PopupsNextcloudFiles li details summary {
	padding: 5px 10px;
	display: flex;
	align-items: center !important;
	overflow-wrap: anywhere;
}

/* fallback (Firefox ignores complete selector list if :has is used) */
#rl-app #V-PopupsNextcloudFiles li[data-icon],
#rl-app #V-PopupsNextcloudFiles li details summary {
	padding: 5px 10px;
	display: flex;
	align-items: center !important;
	overflow-wrap: anywhere;
}

#rl-app #V-PopupsNextcloudFiles li button,
#rl-app #V-PopupsNextcloudFiles li input {
	margin-left: auto !important;
	align-self: center;
}

#rl-app #V-PopupsNextcloudFiles li input {
	min-width: 100px;
	flex-shrink: 1;
}

#rl-app #V-PopupsNextcloudFiles li button {
	flex-shrink: 0;
}

#rl-app #V-PopupsNextcloudFiles li button[name="create"] {
	margin-left: 10px !important;
}

#rl-app #V-PopupsNextcloudFiles li:not(:last-child),
#rl-app #V-PopupsNextcloudFiles li details[open]>summary {
	border-bottom: 1px solid var(--nc-color-border);
}

#rl-app #V-PopupsNextcloudFiles li details[open]>summary {
	background-color: var(--nc-color-primary-element-light);
	border-bottom-color: var(--nc-color-primary-element-hover);
}

#rl-app #V-PopupsNextcloudFiles li:hover {
	background-color: unset;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon]:hover,
#rl-app #V-PopupsNextcloudFiles li details:not([open]):hover,
#rl-app #V-PopupsNextcloudFiles li details[open]>summary:hover {
	background-color: var(--nc-color-background-hover);
}

#rl-app #V-PopupsNextcloudFiles li details summary[data-icon] {
	list-style-type: none;
}

#rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before {
	color: var(--nc-color-primary);
	font-size: 20px;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon]::before,
#rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before {
	margin: 5px 10px 5px 0;
}

/* #endregion */

/* #region popup nextcloud calendars */

#rl-app #V-PopupsNextcloudCalendars li {
	padding: 5px;
	display: flex;
	align-items: center !important;
	border-bottom: solid 1px var(--nc-color-border);
}

#rl-app #V-PopupsNextcloudCalendars li button {
	border: 0px !important;
	margin-left: 8px !important;
	color: var(--nc-color-primary-element-light-text) !important;
}

/* #endregion */

/* #region popup openpgp generate */

#rl-app #openpgp-generate.form-horizontal .control-group:has(.e-checkbox) {
	flex-direction: column;
	align-items: flex-start;
}

#rl-app #openpgp-generate.form-horizontal .control-group:has(.e-checkbox) br {
	display: none;
}

/* #endregion */

/* #endregion */

/*
 * Extensions
 */

/* #region extensions */

/* #region avatars */

#rl-app .messageCheckbox .fromPic {
	margin: -5px 0 -9px 8px;
	height: 32px;
	width: 32px;
}

/* #endregion */

/* #endregion */

/*
 * Message Flags
 */

/* #region message flags */

:root {
	--msgflag-\$label1-color: #ae2c35;
	--msgflag-\$label1-color-hover: #e13a45;
	--msgflag-\$label2-color: #cc9827;
	--msgflag-\$label2-color-hover: #ffbf31;
	--msgflag-\$label3-color: #005235;
	--msgflag-\$label3-color-hover: #008557;
	--msgflag-\$label4-color: #005cc4;
	--msgflag-\$label4-color-hover: #0074f8;
	--msgflag-\$label5-color: #5631c0;
	--msgflag-\$label5-color-hover: #6d3ff3;

	--msgflag-\\flagged-color: #ffca32;
}

#rl-app .msgflag-\$label5:not(.focused) { border-color: var(--msgflag-\$label5-color); }
#rl-app .msgflag-\$label4:not(.focused) { border-color: var(--msgflag-\$label4-color); }
#rl-app .msgflag-\$label3:not(.focused) { border-color: var(--msgflag-\$label3-color); }
#rl-app .msgflag-\$label2:not(.focused) { border-color: var(--msgflag-\$label2-color); }
#rl-app .msgflag-\$label1:not(.focused) { border-color: var(--msgflag-\$label1-color); }

#rl-app .msgflag-\$label5.focused:not(.selected) { border-color: var(--msgflag-\$label5-color) !important; }
#rl-app .msgflag-\$label4.focused:not(.selected) { border-color: var(--msgflag-\$label4-color) !important; }
#rl-app .msgflag-\$label3.focused:not(.selected) { border-color: var(--msgflag-\$label3-color) !important; }
#rl-app .msgflag-\$label2.focused:not(.selected) { border-color: var(--msgflag-\$label2-color) !important; }
#rl-app .msgflag-\$label1.focused:not(.selected) { border-color: var(--msgflag-\$label1-color) !important; }

#rl-app .msgflag-\$label5:not(.focused):hover { border-color: var(--msgflag-\$label5-color-hover); }
#rl-app .msgflag-\$label4:not(.focused):hover { border-color: var(--msgflag-\$label4-color-hover); }
#rl-app .msgflag-\$label3:not(.focused):hover { border-color: var(--msgflag-\$label3-color-hover); }
#rl-app .msgflag-\$label2:not(.focused):hover { border-color: var(--msgflag-\$label2-color-hover); }
#rl-app .msgflag-\$label1:not(.focused):hover { border-color: var(--msgflag-\$label1-color-hover); }

#rl-app .msgflag-\$label1:not(.focused), #rl-app .msgflag-\$label1 .checkboxMessage,
#rl-app .msgflag-\$label2:not(.focused), #rl-app .msgflag-\$label2 .checkboxMessage,
#rl-app .msgflag-\$label3:not(.focused), #rl-app .msgflag-\$label3 .checkboxMessage,
#rl-app .msgflag-\$label4:not(.focused), #rl-app .msgflag-\$label4 .checkboxMessage,
#rl-app .msgflag-\$label5:not(.focused), #rl-app .msgflag-\$label5 .checkboxMessage {
	background-color: unset;
	color: unset;
}

#rl-app .messageListItem.msgflag-\$label1:hover,
#rl-app .messageListItem.msgflag-\$label2:hover,
#rl-app .messageListItem.msgflag-\$label3:hover,
#rl-app .messageListItem.msgflag-\$label4:hover,
#rl-app .messageListItem.msgflag-\$label5:hover {
	background-color: var(--nc-color-background-hover);
}

#rl-app a.msgflag-\$label1,
#rl-app a.msgflag-\$label2,
#rl-app a.msgflag-\$label3,
#rl-app a.msgflag-\$label4,
#rl-app a.msgflag-\$label5 {
	border-left: solid 5px;
}

#rl-app .btn-group.show .dropdown-menu div li a[class^='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5),
#rl-app .btn-group.show .dropdown-menu div li a[class*='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5) {
	border-left: solid 5px gray;
}

#rl-app .b-folders .is-flagged .flag-icon::after,
#rl-app .messageListItem.hasFlaggedSubMessage .flagParent::after,
#rl-app .messageListItem.msgflag-\\flagged .flagParent::after {
	color: var(--msgflag-\\flagged-color);
}

#rl-app #messageItem .b-text-part.swapColors {
	background-color: var(--nc-color-primary);
	color: var(--nc-color-primary-text);
}

/* #endregion */

/* #endregion */

/*
 * Tablet Layout
 */

/* #region tablet layout */

@media screen and (min-width: 800px) and (max-width: 1024px) {
	#rl-app #rl-left {
		width: 250px;
	}

	html:not(.rl-left-panel-disabled) #rl-left {
		max-width: calc(var(--nc-sidebar-max-width) / 2);
	}

	#rl-app #V-SystemDropDown .accountPlace {
		display: none;
	}
}

/* #endregion */

/*
 * Keyframes
 */

/* #region keyframes */

@keyframes highlight-folder-row {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(.95)
	}

	100% {
		transform: scale(1)
	}
}


/* ===== OVERLAY: KGVA shibui (Original-Nextcloud-CSS, setzt --color-*) ===== */
/* ============================================================
   shibui — a Nextcloud theme
   渋い · restrained · unobtrusive · quietly refined
   ============================================================ */

/* Nextcloud sets its theme variables on body[data-theme-*], which beats :root.
   We must match that specificity or our overrides only apply for one frame. */
:root,
body,
body[data-theme-default],
body[data-theme-light],
body[data-theme-light-highcontrast],
body[data-theme-dark],
body[data-theme-dark-highcontrast] {
    /* ---------- palette ----------
       neutral paper (no green tint in the ground), petrol sits as the
       only color note. dossier-style soft sage-teal as the accent. */
    --shibui-washi:        #F0F0F0;   /* neutral light, no undertone */
    --shibui-washi-soft:   #E8E8E8;   /* recessed surfaces */
    --shibui-washi-warm:   #DCDCDC;   /* hover wash — clearly distinct */
    --shibui-border:       #C2C2C2;   /* hairline */
    --shibui-border-soft:  #D6D6D6;
    --shibui-sumi:         #1A1A1A;   /* near-black neutral ink */
    --shibui-sumi-soft:    #3D3D3D;   /* secondary text */
    --shibui-sumi-mute:    #666666;   /* tertiary — readable against washi */
    --shibui-petrol:       #7BA89B;   /* sage-petrol, the only color note */
    --shibui-petrol-deep:  #557A6D;   /* hover / accent text */
    --shibui-petrol-light: #D4E4DE;   /* light variant for soft fills */
    --shibui-kakishibu:    #A85A3C;   /* persimmon, signal */
    --shibui-matcha:       #5A7050;   /* moss green, success */
    --shibui-bengara:      #8C3A2E;   /* iron red, error */

    /* ---------- nextcloud variable overrides ----------
       !important on each: Nextcloud's Theming app declares its own
       variable values with !important on body[data-theme-*]. Without
       !important here we tie on specificity and lose on source order. */
    --color-main-background:        var(--shibui-washi) !important;
    --color-main-background-rgb:    240, 240, 240 !important;
    --color-main-background-translucent: rgba(240, 240, 240, 0.92) !important;
    --color-main-background-blur:   rgba(240, 240, 240, 0.78) !important;
    --color-main-text:              var(--shibui-sumi) !important;

    --color-background-plain:       var(--shibui-washi) !important;
    --color-background-hover:       var(--shibui-washi-warm) !important;
    --color-background-dark:        var(--shibui-washi-soft) !important;
    --color-background-darker:      var(--shibui-border-soft) !important;
    --color-background-translucent: rgba(240, 240, 240, 0.85) !important;

    --color-placeholder-light:      var(--shibui-border-soft) !important;
    --color-placeholder-dark:       var(--shibui-border) !important;

    --color-text-light:             var(--shibui-sumi-soft) !important;
    --color-text-lighter:           var(--shibui-sumi-mute) !important;
    --color-text-maxcontrast:       var(--shibui-sumi-soft) !important;
    --color-text-maxcontrast-default: var(--shibui-sumi-soft) !important;
    --color-text-maxcontrast-background-blur: var(--shibui-sumi) !important;

    --color-primary:                var(--shibui-petrol) !important;
    --color-primary-default:        var(--shibui-petrol) !important;
    --color-primary-text:           var(--shibui-sumi) !important;
    --color-primary-hover:          var(--shibui-petrol-deep) !important;
    --color-primary-light:          var(--shibui-petrol-light) !important;
    --color-primary-light-text:     var(--shibui-petrol-deep) !important;
    --color-primary-light-hover:    #C2D7CF !important;
    --color-primary-element:        var(--shibui-petrol) !important;
    --color-primary-element-default: var(--shibui-petrol) !important;
    --color-primary-element-text:   var(--shibui-sumi) !important;
    --color-primary-element-hover:  var(--shibui-petrol-deep) !important;
    --color-primary-element-light:  var(--shibui-petrol-light) !important;
    --color-primary-element-light-text: var(--shibui-petrol-deep) !important;
    --color-primary-element-light-hover: #C2D7CF !important;

    --color-border:                 var(--shibui-border) !important;
    --color-border-dark:            var(--shibui-border) !important;
    --color-border-maxcontrast:     var(--shibui-sumi-mute) !important;

    --color-loading-light:          var(--shibui-washi-soft) !important;
    --color-loading-dark:           var(--shibui-border) !important;

    --color-box-shadow:             rgba(0, 0, 0, 0.10) !important;

    --color-success:                var(--shibui-matcha) !important;
    --color-warning:                var(--shibui-kakishibu) !important;
    --color-error:                  var(--shibui-bengara) !important;
    --color-favorite:               var(--shibui-kakishibu) !important;

    /* ---------- typography ----------
       Inter for UI, Instrument Serif for quiet accents (login title,
       headings on empty states), JetBrains Mono for code. */
    --font-face:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif !important;
    --font-face-serif:
        "Instrument Serif",
        "Iowan Old Style",
        "Hoefler Text",
        Georgia,
        serif !important;
    --font-face-monospace:
        "JetBrains Mono",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace !important;

    /* ---------- geometry ----------
       softer corners; shibui prefers gentle curves over hard edges,
       but never decorative roundness. */
    --border-radius:        4px;
    --border-radius-large:  8px;
    --border-radius-rounded: 12px;
    --border-radius-pill:   999px;

    /* header sits flat on the page like a horizon line */
    --header-height:        50px;
    --color-header:         var(--shibui-washi) !important;
    --color-header-text:    var(--shibui-sumi) !important;
    --color-header-contrast: var(--shibui-sumi) !important;
    --color-header-primary: var(--shibui-washi) !important;

    /* Nextcloud's auto-invert system: tell it our header is bright,
       so SVG masks that would otherwise be white get inverted to dark. */
    --background-invert-if-bright: invert(100%) !important;
    --background-invert-if-dark: no-invert !important;
    --background-image-invert-if-bright: invert(100%) !important;
    --primary-invert-if-bright: invert(100%) !important;
    --primary-invert-if-dark: no-invert !important;
}

/* ============================================================
   base
   ============================================================ */
body,
input,
textarea,
select,
button,
.body-login-container {
    font-family: var(--font-face);
    font-weight: 400;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--shibui-washi);
    color: var(--shibui-sumi);
}

/* ---------- serif: every title is a held breath ---------- */
h1, h2, h3,
.app-navigation-caption,
.section-title,
.empty-content h2,
.empty-content__title {
    font-family: var(--font-face-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    font-feature-settings: "ss01", "liga";
}

h1,
.empty-content__title {
    font-size: 1.75rem;
    line-height: 1.15;
}

/* ============================================================
   scrollbars — almost invisible
   ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--shibui-border) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--shibui-border);
    border-radius: var(--border-radius-pill);
    border: 2px solid var(--shibui-washi);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--shibui-sumi-mute);
}

/* ============================================================
   selection
   ============================================================ */
::selection {
    background-color: rgba(123, 168, 155, 0.35);
    color: var(--shibui-sumi);
}

/* ============================================================
   dark mode — sumi night (only if explicitly opted in)
   ============================================================ */
body[data-theme-dark],
body[data-theme-dark-highcontrast] {
    --shibui-washi:        #0F0F0F;
    --shibui-washi-soft:   #161616;
    --shibui-washi-warm:   #1F1F1F;
    --shibui-border:       #2E2E2E;
    --shibui-border-soft:  #1F1F1F;
    --shibui-sumi:         #EAEAEA;
    --shibui-sumi-soft:    #B5B5B5;
    --shibui-sumi-mute:    #888888;
    --shibui-petrol:       #7BA89B;
    --shibui-petrol-deep:  #9BC4B7;
    --shibui-petrol-light: #1F3331;
    --shibui-kakishibu:    #C97A5C;
    --shibui-matcha:       #8AA078;
    --shibui-bengara:      #C26A5C;

    --color-main-background-rgb: 15, 15, 15 !important;
    --color-main-background-translucent: rgba(15, 15, 15, 0.92) !important;
    --color-main-background-blur: rgba(15, 15, 15, 0.78) !important;
    --color-box-shadow: rgba(0, 0, 0, 0.50) !important;
    --color-primary-text: var(--shibui-sumi) !important;
    --color-primary-element-text: var(--shibui-sumi) !important;
}

/* ============================================================
   KGVA-Feinschliff: SnappyMail-Chrome -> echte Nextcloud-Optik
   (nackte Toolbar-Icons, kein sage-Strip, Such-Pille)
   ============================================================ */

/* Toolbar-Container: kein getönter Hintergrund, keine Linie */
#rl-app .b-toolbar,
#rl-app .btn-toolbar,
#rl-app .b-folders .b-toolbar,
#rl-app .messageList .b-toolbar,
#rl-app .messageList .second-toolbar,
#rl-app .b-footer.btn-toolbar {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Toolbar-Buttons = NACKTE Icons (ohne Box/Rand), außer Compose/Contacts.
   Dezenter runder Hover statt geschlossener/halb-offener Kästchen. */
#rl-app .b-toolbar .btn:not(.buttonCompose):not(.buttonContacts),
#rl-app .btn-toolbar .btn:not(.buttonCompose):not(.buttonContacts),
#rl-app .messageList .second-toolbar .btn,
#rl-app .b-footer.btn-toolbar .btn,
#rl-app .b-toolbar .btn-group > .btn:not(.buttonCompose):not(.buttonContacts) {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: var(--border-radius-pill, 999px) !important;
}
#rl-app .b-toolbar .btn:not(.buttonCompose):not(.buttonContacts):hover,
#rl-app .btn-toolbar .btn:not(.buttonCompose):not(.buttonContacts):hover,
#rl-app .messageList .second-toolbar .btn:hover,
#rl-app .b-footer.btn-toolbar .btn:hover {
	background-color: var(--shibui-washi-warm) !important;
}

/* Such-Zeile als rundes Pill mit zarter Linie (wie Nextcloud-Suche) */
#rl-app .messageList .inputSearch,
#rl-app .messageList .inputSearch input,
#rl-app .inputSearch input {
	border-radius: var(--border-radius-pill, 999px) !important;
	background-color: var(--shibui-washi-soft) !important;
	border: 1px solid var(--shibui-border-soft) !important;
	box-shadow: none !important;
	padding-left: 14px !important;
}
#rl-app .inputSearch input:focus {
	background-color: var(--shibui-washi) !important;
	border-color: var(--shibui-petrol) !important;
	box-shadow: 0 0 0 3px rgba(123, 168, 155, 0.28) !important;
	outline: none !important;
}

/* ----- Feinschliff 2: gerade Linie statt geschwungen + Nav-Pills ----- */

/* Listen-/Lese-Panel: gerade Kanten (durchgezogene Linie statt Rundung),
   kein Box-Shadow im Fokus -> keine geschwungene Linie mehr */
#rl-app .messageList,
#rl-app .messageView,
#rl-app .messageListPlace,
#rl-app #V-MailMessageList.focused .messageList,
#rl-app #V-MailMessageView.focused .messageView {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Folder-Nav: Einträge & Auswahl als Pills (wie Nextcloud-Sidebar) */
#rl-app .b-folders li a.selectable {
	border-radius: var(--border-radius-pill, 999px) !important;
}

/* "New message" / Compose: volle Pill-Form (konsistent mit Nav-Pills) */
#rl-app .b-folders .b-toolbar .btn.buttonCompose,
#rl-app .b-folders .b-toolbar .btn.buttonContacts,
#rl-app .buttonCompose {
	border-radius: var(--border-radius-pill, 999px) !important;
}