/* ============================================================
   STARS Mail — theme tokens and Roundcube neutralisation
   Built into styles/styles.css by:
     python tools/gen-theme.py <elastic>/styles/styles.min.css remap.css
     cat tools/theme-head.css remap.css tools/theme-tail.css > skins/stars/styles/styles.css

   Head: the token sets and the handful of base rules Elastic's palette
   cannot express. The generated block that follows rewrites every colour
   Elastic hard-codes — light and dark alike — into these tokens, so the
   whole application follows one palette and dark mode is a value swap.

   Two greys, one accent, nothing else. The accent is the one thing carried
   over from the STARS identity; everything else is chosen for reading email.
   ============================================================ */
@import url("../../elastic/styles/styles.min.css");

:root {
	color-scheme: light;

	/* surfaces */
	--rc-surface: #ffffff;
	--rc-surface-2: #f6f8fb;
	--rc-hover: #eef1f6;
	--rc-scrim: rgba(24, 28, 33, .45);

	/* ink */
	--rc-text: #1f2328;
	--rc-text-2: #5b6470;
	--rc-text-3: #8a939f;
	--rc-on-accent: #ffffff;

	/* lines */
	--rc-line: #e3e7ec;
	--rc-line-soft: #edf0f4;
	--rc-line-strong: #c8cfd8;

	/* the one brand accent */
	--rc-accent: #1F5C86;
	--rc-accent-hover: #17486A;
	--rc-accent-soft: #E4EDF5;
	--rc-accent-ring: rgba(31, 92, 134, .22);
	--rc-accent-ring-strong: rgba(31, 92, 134, .40);
	--rc-accent-wash: rgba(31, 92, 134, .05);

	/* status */
	--rc-danger: #B3261E;
	--rc-on-danger: #ffffff;
	--rc-danger-soft: #FCEDEC;
	--rc-ok: #1E6E42;
	--rc-ok-soft: #E9F4EE;
	--rc-star: #E0A030;
	--rc-warn: #8A6100;
	--rc-warn-soft: #FBF2E2;
	--rc-info-soft: #E9F0F7;
}

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

	--rc-surface: #1A1D21;
	--rc-surface-2: #141619;
	--rc-hover: #24282E;
	--rc-scrim: rgba(0, 0, 0, .62);

	--rc-text: #E4E7EA;
	--rc-text-2: #A8B1BC;
	--rc-text-3: #7E8794;
	--rc-on-accent: #0E1319;

	--rc-line: #2C3138;
	--rc-line-soft: #24282E;
	--rc-line-strong: #3C434C;

	--rc-accent: #7FB3D9;
	--rc-accent-hover: #9CC7E6;
	--rc-accent-soft: #1D2B36;
	--rc-accent-ring: rgba(127, 179, 217, .26);
	--rc-accent-ring-strong: rgba(127, 179, 217, .45);
	--rc-accent-wash: rgba(127, 179, 217, .07);

	--rc-danger: #E4837C;
	--rc-on-danger: #2A1210;
	--rc-danger-soft: #3A1F1D;
	--rc-ok: #7CC79B;
	--rc-ok-soft: #17301F;
	--rc-star: #F0BE5A;
	--rc-warn: #E0B96A;
	--rc-warn-soft: #33280F;
	--rc-info-soft: #16242E;
}

/* One system sans, the way a mail client should read: no webfont, no
   display face, no brand typography. */
html,
body,
button,
input,
optgroup,
select,
textarea,
.popover,
.ui-widget {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
pre, code, kbd, samp, .monospace {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
}

html { font-size: 16px; }
body {
	font-size: 14px;
	line-height: 1.5;
	background-color: var(--rc-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Elastic's own dark switch is the mechanism; the palette above is the theme.
   Nothing else should try to paint the shell. */
html.dark-mode body { background-color: var(--rc-surface); }
a{color:var(--rc-accent)}
a:hover{color:var(--rc-accent-hover)}
html{scrollbar-color:var(--rc-line-strong) var(--rc-line-soft)}
html:not(.touch) ::-webkit-scrollbar-track{background-color:var(--rc-line-soft)}
html:not(.touch) ::-webkit-scrollbar-thumb{background-color:var(--rc-line-strong)}
body{color:var(--rc-text)}
#layout>div>.header{border-bottom:1px solid var(--rc-line);color:var(--rc-text);background-color:var(--rc-surface-2)}
#layout>div>.header a.button{color:var(--rc-text)}
#layout>div>.footer{border-top:1px solid var(--rc-line);background-color:var(--rc-surface)}
#layout-sidebar{border-right:1px solid var(--rc-line);background-color:var(--rc-surface)}
#layout-sidebar.sidebar-right{border-left:1px solid var(--rc-line)}
#layout-list{border-right:1px solid var(--rc-line);background-color:var(--rc-surface)}
#layout-content{background-color:var(--rc-surface)}
#rcmdraglayer{background-color:var(--rc-surface-2);color:var(--rc-on-accent);box-shadow:3px 3px 5px var(--rc-line-soft)}
.popup .listbox .footer{border-top:1px solid var(--rc-line);background-color:var(--rc-surface-2)}
p.image-attachment{border:1px solid var(--rc-line);background-color:var(--rc-accent-wash)}
p.image-attachment span{color:var(--rc-text-2)}
fieldset.image-attachment legend{color:var(--rc-text-2)}
.iframe-loader .spinner-border{color:var(--rc-text-3);border-color:currentColor var(--rc-line) currentColor currentColor}
.webkit-scroller::-webkit-scrollbar-thumb{border:2px solid var(--rc-surface)}
.quota-widget{color:var(--rc-text-2)}
.quota-widget .bar{background-color:var(--rc-surface);border:1px solid var(--rc-line)}
.quota-widget .value{background-color:var(--rc-accent)}
.quota-widget .value.warning{background-color:var(--rc-danger)}
.image-tools a{color:var(--rc-on-accent)!important}
.image-tools a:focus,.image-tools a:hover{background-color:var(--rc-accent-ring-strong)!important}
.quota-info .root{color:var(--rc-text-2);background-color:var(--rc-surface-2)}
.table-widget{border:1px solid var(--rc-line)}
.table-widget>.footer{border-top:1px solid var(--rc-line)}
.table-widget table.options-table tr:last-child td{border-bottom:1px solid var(--rc-line)}
.table-widget table.options-table tr.selected td{background-color:var(--rc-accent-soft);color:var(--rc-text)}
table.table tr.deleted td{color:var(--rc-text-3)!important}
.floating-action-buttons a.button{background:var(--rc-accent);color:var(--rc-on-accent)}
.btn-link{color:var(--rc-accent)}
.btn-secondary{color:var(--rc-on-accent);background:var(--rc-line);border-color:var(--rc-line)}
.btn-secondary:focus{background:var(--rc-line);border-color:var(--rc-line)}
.btn-secondary:hover{background:var(--rc-line);border-color:var(--rc-line)}
.btn-secondary.disabled,.btn-secondary:disabled{background:var(--rc-line);border-color:var(--rc-line)}
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active{background:var(--rc-line);border-color:var(--rc-line)}
.btn-primary{color:var(--rc-on-accent);background:var(--rc-accent);border-color:var(--rc-accent)}
.btn-primary:focus{background:var(--rc-accent);border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring-strong)}
.btn-primary:hover{background:var(--rc-accent);border-color:var(--rc-accent)}
.btn-primary.disabled,.btn-primary:disabled{background:var(--rc-accent);border-color:var(--rc-accent)}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active{background:var(--rc-accent);border-color:var(--rc-accent)}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem var(--rc-accent-ring-strong)}
.btn-danger{color:var(--rc-on-accent);background:var(--rc-danger);border-color:var(--rc-danger)}
.btn-danger.disabled,.btn-danger:disabled{background:var(--rc-danger);border-color:var(--rc-danger)}
.ui-widget-overlay{background-color:var(--rc-scrim)}
.ui-widget{border:1px solid var(--rc-line);box-shadow:3px 3px 5px var(--rc-line-soft)}
.ui-menu .ui-state-active{background-color:var(--rc-accent)!important}
.ui-dialog .ui-dialog-titlebar{border-bottom:1px solid var(--rc-line)}
.ui-dialog .ui-dialog-title{color:var(--rc-text)}
.ui-dialog .ui-dialog-titlebar-close{color:var(--rc-text)}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link{color:var(--rc-text)}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:var(--rc-accent-ring-strong)}
.ui-slider .ui-slider-handle.ui-state-active{background:var(--rc-accent)}
.ui-datepicker .ui-datepicker-header{border-bottom:1px solid var(--rc-line)}
.ui-datepicker .ui-datepicker-next,.ui-datepicker .ui-datepicker-prev{color:var(--rc-text)}
.ui-datepicker .ui-state-default,.ui-datepicker.ui-widget-content .ui-state-default{color:var(--rc-text)}
.ui-datepicker .ui-datepicker-days-cell-over a,.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,.ui-datepicker .ui-state-highlight,.ui-datepicker.ui-widget-content .ui-state-highlight{color:var(--rc-accent)}
.ui-datepicker a.ui-state-active{background:var(--rc-accent)!important;color:var(--rc-on-accent)!important}
.minicolors-panel{border:1px solid var(--rc-line);box-shadow:3px 3px 5px var(--rc-line-soft)}
.popover{box-shadow:3px 3px 5px var(--rc-line-soft);border-color:var(--rc-line)}
html.layout-phone .popover:not(.select-menu) .listing li:last-child,html.layout-small .popover:not(.select-menu) .listing li:last-child{border-bottom:1px solid var(--rc-line-soft)}
html.layout-phone .popover-overlay,html.layout-small .popover-overlay{background-color:var(--rc-scrim)}
html.layout-phone .popover-header,html.layout-small .popover-header{color:var(--rc-on-accent)}
html.layout-phone .popover-header a,html.layout-small .popover-header a{color:var(--rc-on-accent)}
.pgpkeyimport div.key.disabled,.pgpkeyimport div.key.revoked{color:var(--rc-text-2)}
.menu a:not(.disabled):focus,.menu a:not(.disabled):hover{background-color:var(--rc-surface-2)}
.menu.toolbar a{color:var(--rc-text)}
.menu.toolbar a.selected{color:var(--rc-ok)}
.menu.toolbar .dropbutton:not(.disabled):hover{background-color:var(--rc-surface-2)}
.menu.pagenav a{color:var(--rc-text)}
.menu.pagenav .pagenav-text{color:var(--rc-text-2)}
.menu.pagenav.pagenav-list{background-color:var(--rc-surface-2);border-bottom:1px solid var(--rc-line-soft)}
.menu.pagenav.pagenav-list+.navlist{background-color:var(--rc-surface-2)}
.menu.pagenav.pagenav-list.expanded+.navlist{border-bottom:1px solid var(--rc-line)}
.menu .buttons button{color:var(--rc-text)}
.popover .menu li.separator{color:var(--rc-text-2);background-color:var(--rc-surface-2)}
.popover .menu li a:not(.disabled):hover{color:var(--rc-on-accent);background-color:var(--rc-accent)}
.popover .menu li a[aria-haspopup]:after{color:var(--rc-text-2)}
.popover .menu li a[aria-haspopup].dropdown:after{color:var(--rc-text)}
.popover .menu li a[aria-haspopup]:hover:after{color:var(--rc-on-accent)}
.popover .menu .dropbutton a.dropdown:hover{background-color:var(--rc-accent)}
.searchbar{background-color:var(--rc-surface-2);border-bottom:1px solid var(--rc-line-soft)}
.searchbar form:before{color:var(--rc-text-2)}
.searchbar a{color:var(--rc-text)}
.searchbar a.selected{color:var(--rc-ok)}
.ui.alert{color:var(--rc-text);background-color:var(--rc-accent-wash)}
.ui.alert.alert-success>i.icon:before{color:var(--rc-ok)}
.ui.alert.alert-warning>i.icon:before{color:var(--rc-warn)}
.ui.alert.alert-danger>i.icon:before{color:var(--rc-danger)}
.ui.alert a:not(.btn){color:var(--rc-accent)}
.ui.alert.boxwarning{background-color:var(--rc-warn-soft)}
#messagestack div{background-color:var(--rc-text);color:var(--rc-on-accent)}
#messagestack div>i.icon:before{color:var(--rc-on-accent)}
#messagestack .alert-info.information{background-color:var(--rc-accent)}
#messagestack .alert-success{background-color:var(--rc-ok)}
#messagestack .alert-warning{background-color:var(--rc-warn);color:var(--rc-text)}
#messagestack .alert-warning>i.icon:before{color:var(--rc-text)}
#messagestack .alert-danger{background-color:var(--rc-danger)}
.listing li,.listing tbody td{border-bottom:1px solid var(--rc-line-soft)}
.listing li a,.listing tbody td{color:var(--rc-text)}
.listing tbody td a{color:var(--rc-text)}
.listing li.selected,.listing tr.selected td{color:var(--rc-text);background-color:var(--rc-accent-soft)}
.listing li.disabled,.listing tr.disabled td{color:var(--rc-text-3)}
.listing span.secondary{color:var(--rc-text-2)}
html:not(.touch) .listing li>a:focus,html:not(.touch) .listing.focus tbody tr.focused>td:first-child,html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left:2px solid var(--rc-accent)}
ul.listing li ul{border-top:1px solid var(--rc-line-soft)}
.listing-info{color:var(--rc-text-2)}
.listing-hover-menu{background-color:var(--rc-surface);border:1px solid var(--rc-line)}
.listing-hover-menu a.button{color:var(--rc-text)}
.listing-hover-menu span.txt{color:var(--rc-text-2)}
.popupmenu .listing li>a:not(.disabled):hover{color:var(--rc-on-accent);background-color:var(--rc-accent)}
.popupmenu .listing li.selected{color:var(--rc-on-accent);background-color:var(--rc-accent)}
ul.treelist li.selected>a,ul.treelist li.selected>div>a{color:var(--rc-text);background-color:var(--rc-accent-soft)}
.folderlist li.mailbox .unreadcount{background:var(--rc-accent);color:var(--rc-on-accent)}
.folderlist li.mailbox.recent>a>.unreadcount{background:var(--rc-accent);color:var(--rc-on-accent)}
.messagelist td.subject span.date,.messagelist td.subject span.size{color:var(--rc-text-2)}
.messagelist td.subject span.fromto{color:var(--rc-text-2)}
.messagelist tr.flagged span.size,.messagelist tr.flagged td,.messagelist tr.flagged td.subject span.date,.messagelist tr.flagged td.subject span.fromto,.messagelist tr.flagged td.subject span.subject a{color:var(--rc-danger)}
.messagelist tr.deleted td,.messagelist tr.deleted td.subject span.date,.messagelist tr.deleted td.subject span.fromto,.messagelist tr.deleted td.subject span.subject a{color:var(--rc-text-3)}
.contactlist span.email{color:var(--rc-text-2)}
.attachmentslist{border:1px solid var(--rc-line-soft)}
.attachmentslist li .attachment-name{color:var(--rc-text)}
.attachmentslist li .attachment-size{color:var(--rc-text-2)}
.propform .form-text{color:var(--rc-text-2)}
.formcontent .hint{color:var(--rc-text-2)}
.formcontent.raweditor .CodeMirror{border:1px solid var(--rc-line);color:var(--rc-text)}
.formcontent.raweditor .CodeMirror-focused{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.formcontent.raweditor .CodeMirror-linebackground.line-error{background-color:var(--rc-danger)}
.input-group a:focus{background-color:var(--rc-accent-ring)}
.proplist li.with-sublist>a.dropdown{color:var(--rc-text)}
.multi-input>.content{border:1px solid var(--rc-line)}
.multi-input>.content.focused{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.multi-input .input-group-text,.multi-input input,.multi-input input:focus{border-bottom:1px solid var(--rc-line)}
.multi-input .input-group-text{border-left:1px solid var(--rc-line)}
.multi-input.is-invalid>.content{border:1px solid var(--rc-danger)}
.multi-input.is-invalid>.content.focused{border-color:var(--rc-danger)}
.file-upload{border:.2rem dashed var(--rc-line)}
.file-upload .hint{color:var(--rc-text-2)}
.file-upload.droptarget.hover{background-color:var(--rc-surface-2)}
.recipient-input.focus{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.recipient-input li.recipient,body>li.recipient.ui-sortable-helper{border:1px solid var(--rc-line);background-color:var(--rc-surface-2)}
.recipient-input li.recipient a.button.icon,body>li.recipient.ui-sortable-helper a.button.icon{color:var(--rc-text)}
.tagedit-list[tabindex="-1"]{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.tagedit-list li.tagedit-listelement-old{border:1px solid var(--rc-line);background-color:var(--rc-surface-2)}
.skinselection .skinthumbnail{border:1px solid var(--rc-line);background:var(--rc-surface)}
.image-upload{background-color:var(--rc-surface-2)}
.form-control{color:var(--rc-text)}
.form-control:focus{color:var(--rc-text);border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.form-control.is-invalid{border-color:var(--rc-danger)}
.form-control.is-invalid:focus{border-color:var(--rc-danger)}
.invalid-feedback{color:var(--rc-danger)}
.input-group-text{color:var(--rc-text);background-color:var(--rc-surface-2)}
.input-group-text input:focus{border-color:var(--rc-accent)!important}
.custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:var(--rc-accent)}
.custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:var(--rc-accent);background-color:var(--rc-accent)}
.custom-file-input:focus~.custom-file-label{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
div.tox.tox-tinymce{border:1px solid var(--rc-line)}
div.tox.focused{border-color:var(--rc-accent)!important;box-shadow:0 0 0 .2rem var(--rc-accent-ring)!important}
div.tox .tox-toolbar-overlord>div{background-color:var(--rc-surface-2)}
div.tox .tox-toolbar{background-color:var(--rc-surface-2)}
div.tox .tox-dialog{border-color:var(--rc-line)}
div.tox .tox-dialog .tox-dialog__body-nav-item--active{color:var(--rc-accent)}
div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover{color:var(--rc-accent-hover)}
div.tox .tox-dialog-wrap__backdrop{background-color:var(--rc-scrim)}
div.tox .tox-dialog__header{border-bottom:1px solid var(--rc-line)}
div.tox .tox-dialog__header .tox-button{color:var(--rc-text)}
div.tox .tox-dialog__footer .tox-button{color:var(--rc-on-accent);background:var(--rc-accent);border-color:var(--rc-accent)}
div.tox .tox-dialog__footer .tox-button:focus{background:var(--rc-accent);border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring-strong)}
div.tox .tox-dialog__footer .tox-button:hover{background:var(--rc-accent);border-color:var(--rc-accent)}
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled{background:var(--rc-accent);border-color:var(--rc-accent)}
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active,div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active{background:var(--rc-accent);border-color:var(--rc-accent)}
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus,div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem var(--rc-accent-ring-strong)}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled){background:var(--rc-accent);border-color:var(--rc-accent)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary{background:var(--rc-line);border-color:var(--rc-line);color:var(--rc-on-accent)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary.disabled,div.tox .tox-dialog__footer .tox-button.tox-button--secondary:disabled{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled).active,div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled):active{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled){background:var(--rc-line);border-color:var(--rc-line)}
div.tox .tox-dialog__title{color:var(--rc-text)}
div.tox .tox-label{color:var(--rc-text)}
div.tox .tox-color-input>input,div.tox .tox-listboxfield .tox-listbox--select,div.tox .tox-textarea,div.tox .tox-textfield{color:var(--rc-text)}
div.tox .tox-color-input>input:focus,div.tox .tox-listboxfield .tox-listbox--select:focus,div.tox .tox-textarea:focus,div.tox .tox-textfield:focus{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
div.tox .image-selector button{color:var(--rc-on-accent);background:var(--rc-line);border-color:var(--rc-line)}
div.tox .image-selector button:focus{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .image-selector button:hover{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .image-selector button.disabled,div.tox .image-selector button:disabled{background:var(--rc-line);border-color:var(--rc-line)}
div.tox .image-selector button:not(:disabled):not(.disabled).active,div.tox .image-selector button:not(:disabled):not(.disabled):active{background:var(--rc-line);border-color:var(--rc-line)}
.image-selector.droptarget{border:.2rem dashed var(--rc-line)}
.image-selector .attachmentslist li:focus,.image-selector .attachmentslist li:hover{background:var(--rc-accent-soft)}
.image-selector .attachmentslist li span.img{border:1px solid var(--rc-line-soft);background:var(--rc-surface)}
.html-editor .editor-toolbar{border-bottom:1px solid var(--rc-line);background-color:var(--rc-surface-2)}
.html-editor>iframe{border:1px solid var(--rc-line)}
.googie_edit_layer{border:1px solid var(--rc-line)}
.googie_link{color:var(--rc-danger)}
.googie_list li.googie_list_onhover{color:var(--rc-on-accent);background-color:var(--rc-accent)}
#login-footer{color:var(--rc-text-2)}
#login-footer>div{background:var(--rc-surface-2)}
#contactpic{background-color:var(--rc-surface-2)}
#contacthead.readonly .source.row{color:var(--rc-text-2)}
body.status-flagged #message-header>.subject:before{color:var(--rc-danger)}
#message-header>.header img.contactphoto{background:var(--rc-surface-2)}
#message-header .header-headers .header-title{color:var(--rc-text-2)}
.message-partheaders{border-top:1px solid var(--rc-line-soft)}
.message-partheaders table.headers-table{color:var(--rc-text-2)}
.message-htmlpart:not(:first-child),.message-part:not(:first-child){border-top:1px solid var(--rc-line-soft)}
.message-htmlpart blockquote,.message-part blockquote{color:var(--rc-accent-hover);border-left:2px solid var(--rc-accent-hover);border-right:2px solid var(--rc-accent-hover)}
.message-htmlpart blockquote blockquote,.message-part blockquote blockquote{color:var(--rc-ok);border-left:2px solid var(--rc-ok);border-right:2px solid var(--rc-ok)}
.message-htmlpart blockquote blockquote blockquote,.message-part blockquote blockquote blockquote{color:var(--rc-danger);border-left:2px solid var(--rc-danger);border-right:2px solid var(--rc-danger)}
.message-htmlpart blockquote span.blockquote-link,.message-part blockquote span.blockquote-link{color:var(--rc-text-2);background:var(--rc-surface-2);border:1px solid var(--rc-line)}
.message-part span.sig{color:var(--rc-text-2)}
.suspicious-address-warning:before{color:var(--rc-warn)}
html.dark-mode{scrollbar-color:var(--rc-accent-hover) var(--rc-line)}
html.dark-mode:not(.touch) ::-webkit-scrollbar-track{background-color:var(--rc-line)}
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb{background-color:var(--rc-accent-hover)}
html.dark-mode body{color:var(--rc-text);background-color:var(--rc-surface)}
html.dark-mode #layout-content,html.dark-mode #layout-list,html.dark-mode #layout-sidebar,html.dark-mode #layout>div>.footer,html.dark-mode #layout>div>.header,html.dark-mode .menu.pagenav.pagenav-list,html.dark-mode .menu.pagenav.pagenav-list+.navlist,html.dark-mode .menu.pagenav.pagenav-list.expanded+.navlist,html.dark-mode .popup .listbox .footer{border-color:var(--rc-line)}
html.dark-mode #layout>div>.footer a.button,html.dark-mode #layout>div>.header a.button{color:var(--rc-text)}
html.dark-mode #layout-menu{border-right:1px solid var(--rc-line)}
html.dark-mode #layout-menu .special-buttons a:not(:focus){background:var(--rc-surface)}
html.dark-mode.layout-phone #layout-menu{background:var(--rc-surface-2)}
html.dark-mode .searchbar{border-color:var(--rc-line)}
html.dark-mode .searchbar a.selected{color:var(--rc-ok)}
html.dark-mode #messagestack div{color:var(--rc-text)}
html.dark-mode #messagestack div i.icon:before{color:var(--rc-text)}
html.dark-mode #messagestack .alert-info,html.dark-mode .ui.alert.boxinformation{background-color:var(--rc-info-soft)}
html.dark-mode #messagestack .alert-danger,html.dark-mode .ui.alert.boxerror{background-color:var(--rc-danger-soft)}
html.dark-mode #messagestack .alert-warning,html.dark-mode .ui.alert.boxwarning{background-color:var(--rc-warn-soft)}
html.dark-mode #messagestack .alert-success,html.dark-mode .ui.alert.boxconfirmation{background-color:var(--rc-ok-soft)}
html.dark-mode #messagestack .loading{background-color:var(--rc-surface-2)}
html.dark-mode .ui.alert.boxconfirmation,html.dark-mode .ui.alert.boxerror,html.dark-mode .ui.alert.boxinformation,html.dark-mode .ui.alert.boxwarning{color:var(--rc-text)}
html.dark-mode .ui.alert.boxconfirmation i.icon:before,html.dark-mode .ui.alert.boxerror i.icon:before,html.dark-mode .ui.alert.boxinformation i.icon:before,html.dark-mode .ui.alert.boxwarning i.icon:before{color:var(--rc-text)}
html.dark-mode .ui.alert a:not(.btn){color:var(--rc-text)}
html.dark-mode .iframe-loader{background-color:var(--rc-scrim)}
html.dark-mode .iframe-loader .spinner-border{border-color:currentColor var(--rc-line) currentColor currentColor}
html.dark-mode #taskmenu a,html.dark-mode .menu.toolbar a{color:var(--rc-text)}
html.dark-mode #taskmenu a.selected,html.dark-mode .menu.toolbar a.selected{background-color:var(--rc-hover)}
html.dark-mode #taskmenu .action-buttons a{color:var(--rc-accent)}
html.dark-mode.layout-phone .popover,html.dark-mode.layout-small .popover{border-left:1px solid var(--rc-line)}
html.dark-mode.layout-phone .popover:not(.select-menu) .listing li:last-child,html.dark-mode.layout-small .popover:not(.select-menu) .listing li:last-child{border-color:var(--rc-line)}
html.dark-mode.layout-phone .popover-header,html.dark-mode.layout-small .popover-header{background:var(--rc-surface-2);border-bottom:1px solid var(--rc-line)}
html.dark-mode.layout-phone .popover-overlay,html.dark-mode.layout-small .popover-overlay{background:var(--rc-scrim)}
html.dark-mode #taskmenu a:hover,html.dark-mode .header a.button.icon:not(.disabled):focus,html.dark-mode .header a.button.icon:not(.disabled):hover,html.dark-mode .menu a:not(.disabled):focus,html.dark-mode .menu a:not(.disabled):hover,html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover,html.dark-mode .popupmenu .listing li>a:not(.disabled):hover{background-color:var(--rc-hover)}
html.dark-mode .menu.toolbar a.selected{color:var(--rc-ok)}
html.dark-mode .menu.toolbar .dropbutton a.dropdown:hover{background-color:var(--rc-surface-2)}
html.dark-mode .listing li a,html.dark-mode .listing tbody td,html.dark-mode .listing tbody td a,html.dark-mode .proplist li.with-sublist>a.dropdown{color:var(--rc-text)}
html.dark-mode .listing li,html.dark-mode .listing li ul,html.dark-mode .listing tbody td{border-color:var(--rc-line)}
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{color:var(--rc-accent);background-color:var(--rc-hover)}
html.dark-mode .listing li.selected ul{background-color:var(--rc-surface)}
html.dark-mode .listing li.selected ul div.treetoggle{color:var(--rc-text)}
html.dark-mode .listing li.disabled,html.dark-mode .listing tr.disabled td{color:var(--rc-text-3)}
html.dark-mode .listing li.droptarget>a,html.dark-mode .listing tr.droptarget>td{background-color:var(--rc-warn-soft)}
html.dark-mode .messagelist{color:var(--rc-text)}
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size{color:var(--rc-text-2)}
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status{color:var(--rc-text)}
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) span.flag{color:var(--rc-text)}
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:var(--rc-accent)}
html.dark-mode .messagelist tr.flagged:not(.deleted) span.attachment span,html.dark-mode .messagelist tr.flagged:not(.deleted) td{color:var(--rc-danger)}
html.dark-mode .messagelist tr.deleted td span.attachment span,html.dark-mode .messagelist tr.deleted td span.flag,html.dark-mode .messagelist tr.deleted td.subject span.date,html.dark-mode .messagelist tr.deleted td.subject span.fromto,html.dark-mode .messagelist tr.deleted td.subject span.msgicon.status,html.dark-mode .messagelist tr.deleted td.subject span.msgicon.status.unread:before,html.dark-mode .messagelist tr.deleted td.subject span.subject a{color:var(--rc-text-3)}
html.dark-mode .messagelist span.attachment span{color:var(--rc-text-2)}
html.dark-mode .folderlist li.mailbox .unreadcount{background-color:var(--rc-line);color:var(--rc-text)}
html.dark-mode .attachmentslist{background-color:var(--rc-hover)}
html.dark-mode .attachmentslist a{color:var(--rc-text)}
html.dark-mode .attachmentslist li .attachment-name{color:var(--rc-text)}
html.dark-mode .attachmentslist li .attachment-size{color:var(--rc-text-2)}
html.dark-mode .btn{color:var(--rc-text)}
html.dark-mode .btn:focus,html.dark-mode .btn:hover{color:var(--rc-text)}
html.dark-mode .btn-primary{background-color:var(--rc-accent-hover);color:var(--rc-text)}
html.dark-mode .btn-primary:hover:not(:disabled){background-color:var(--rc-accent-hover)}
html.dark-mode .btn-secondary{background-color:var(--rc-line);color:var(--rc-text)}
html.dark-mode .btn-secondary:hover:not(:disabled){background-color:var(--rc-hover)}
html.dark-mode .btn-danger{background-color:var(--rc-danger-soft);color:var(--rc-text)}
html.dark-mode .btn-danger:hover:not(:disabled){background-color:var(--rc-danger)}
html.dark-mode .floating-action-buttons a.button{background:var(--rc-accent-hover)}
html.dark-mode .custom-file-label,html.dark-mode .form-control{background-color:var(--rc-surface);color:var(--rc-text)}
html.dark-mode .custom-file-label:not(.is-invalid),html.dark-mode .form-control:not(.is-invalid){border-color:var(--rc-line)}
html.dark-mode .custom-file-label:focus,html.dark-mode .form-control:focus{background-color:var(--rc-surface-2)}
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid){color:var(--rc-text)!important;border-color:var(--rc-accent)}
html.dark-mode .custom-file-label::after{color:var(--rc-text);background-color:var(--rc-hover)}
html.dark-mode .custom-switch .custom-control-label::before{background-color:var(--rc-line)}
html.dark-mode .custom-switch .custom-control-label::after{background-color:var(--rc-text)}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before{background-color:var(--rc-accent-hover)}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::after{background-color:var(--rc-text)}
html.dark-mode .multi-input:not(.is-invalid)>.content{border-color:var(--rc-line)}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused{border-color:var(--rc-accent)}
html.dark-mode .input-group-text{color:var(--rc-text);background-color:var(--rc-hover);border-color:var(--rc-line)}
html.dark-mode .input-group a:focus{border-color:var(--rc-accent);box-shadow:0 0 0 .2rem var(--rc-accent-ring)}
html.dark-mode .recipient-input.focus{color:var(--rc-text);background-color:var(--rc-surface-2);border-color:var(--rc-accent)}
html.dark-mode .recipient-input a.button.icon,html.dark-mode .recipient-input input{color:var(--rc-text)}
html.dark-mode .recipient-input .recipient{background-color:var(--rc-hover);border-color:var(--rc-line)}
html.dark-mode .file-upload{border-color:var(--rc-line)}
html.dark-mode .file-upload.droptarget.active{border-color:var(--rc-text)}
html.dark-mode .file-upload.droptarget.hover{border-color:var(--rc-text);background-color:var(--rc-hover)}
html.dark-mode .image-upload{background-color:var(--rc-hover)}
html.dark-mode .image-upload a.button{background-color:var(--rc-scrim)}
html.dark-mode .formcontent.raweditor .CodeMirror{color:var(--rc-text);background-color:var(--rc-surface);border-color:var(--rc-line)}
html.dark-mode .formcontent.raweditor .CodeMirror-focused{background-color:var(--rc-surface-2);border-color:var(--rc-accent)}
html.dark-mode .CodeMirror-line::selection,html.dark-mode .CodeMirror-line>span::selection,html.dark-mode .CodeMirror-line>span>span::selection,html.dark-mode .CodeMirror-selected{background:var(--rc-hover)}
html.dark-mode .CodeMirror-gutters{background-color:var(--rc-surface-2)}
html.dark-mode .CodeMirror-activeline-background{background:var(--rc-hover)}
html.dark-mode .skinselection .skinthumbnail{border-color:var(--rc-line)}
html.dark-mode .html-editor .editor-toolbar{background-color:var(--rc-hover);border-color:var(--rc-line)}
html.dark-mode .html-editor .editor-toolbar .mce-i-html:focus,html.dark-mode .html-editor .editor-toolbar .mce-i-html:hover{background-color:var(--rc-hover)}
html.dark-mode .tox.tox-tinymce{border-color:var(--rc-line)}
html.dark-mode .tox .tox-toolbar{background-color:var(--rc-hover);border-color:var(--rc-line)}
html.dark-mode .tox .tox-toolbar-overlord>div{background:url("data:image/svg+xml,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%237c949c'/%3E%3C/svg%3E") var(--rc-hover)}
html.dark-mode .tox .tox-pop.tox-pop--top:after,html.dark-mode .tox .tox-pop.tox-pop--top:before{border-bottom-color:var(--rc-line)}
html.dark-mode .tox .tox-pop__dialog{border-color:var(--rc-line)}
html.dark-mode .tox .tox-split-button,html.dark-mode .tox .tox-swatches__picker-btn,html.dark-mode .tox .tox-tbtn{color:var(--rc-text)}
html.dark-mode .tox .tox-split-button svg,html.dark-mode .tox .tox-swatches__picker-btn svg,html.dark-mode .tox .tox-tbtn svg{fill:var(--rc-text)!important}
html.dark-mode .tox .tox-split-button:focus,html.dark-mode .tox .tox-split-button:hover,html.dark-mode .tox .tox-swatches__picker-btn:focus,html.dark-mode .tox .tox-swatches__picker-btn:hover,html.dark-mode .tox .tox-tbtn:focus,html.dark-mode .tox .tox-tbtn:hover{color:var(--rc-text);background:var(--rc-hover)}
html.dark-mode .tox .tox-tbtn--enabled{background:var(--rc-hover)}
html.dark-mode .tox .tox-button--naked.tox-button--icon:hover:not(:disabled),html.dark-mode .tox .tox-button--naked:focus:not(:disabled){color:var(--rc-text);background-color:var(--rc-hover)}
html.dark-mode .tox .tox-selectfield select{color:var(--rc-text)}
html.dark-mode .tox .tox-selectfield svg{fill:var(--rc-text)}
html.dark-mode .tox .tox-color-input span::before{background-color:var(--rc-text)}
html.dark-mode .tox .tox-toolbar__group:not(:last-of-type){border-color:var(--rc-line)}
html.dark-mode .tox .tox-dialog,html.dark-mode .tox .tox-dialog__body,html.dark-mode .tox .tox-dialog__footer,html.dark-mode .tox .tox-dialog__header,html.dark-mode .tox .tox-dialog__title{color:var(--rc-text);border-color:var(--rc-line);background-color:var(--rc-surface)}
html.dark-mode .tox .tox-button--naked,html.dark-mode .tox .tox-color-input>input,html.dark-mode .tox .tox-dialog__body-nav-item,html.dark-mode .tox .tox-dialog__header .tox-button,html.dark-mode .tox .tox-insert-table-picker__label,html.dark-mode .tox .tox-label,html.dark-mode .tox .tox-textfield{color:var(--rc-text)}
html.dark-mode .tox .tox-dialog__footer .tox-button{background-color:var(--rc-accent-hover);color:var(--rc-text)}
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled){background-color:var(--rc-accent-hover)}
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled){background-color:var(--rc-accent-hover)}
html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary{background-color:var(--rc-line);color:var(--rc-text)}
html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled){background-color:var(--rc-line)}
html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled){background-color:var(--rc-hover)}
html.dark-mode .tox .tox-dialog__body-nav-item--active{color:var(--rc-accent)}
html.dark-mode .tox .tox-dialog-wrap__backdrop{background-color:var(--rc-scrim)}
html.dark-mode .tox .tox-menu{background-color:var(--rc-surface-2);border-color:var(--rc-line)}
html.dark-mode .tox .tox-collection__item-caret svg{fill:var(--rc-text)}
html.dark-mode .tox .tox-collection__item{color:var(--rc-text)}
html.dark-mode .tox .tox-collection__item:not(:last-child){border-bottom:1px solid var(--rc-line)}
html.dark-mode .tox .tox-collection__item--active,html.dark-mode .tox .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:var(--rc-text);background-color:var(--rc-hover)}
html.dark-mode .tox .tox-collection__item--enabled{color:var(--rc-accent);background-color:var(--rc-hover)}
html.dark-mode .message-part{border-color:var(--rc-line)}
html.dark-mode .message-part blockquote{background-color:var(--rc-surface);border-color:var(--rc-accent-hover);color:var(--rc-accent-hover)}
html.dark-mode .message-part blockquote span.blockquote-link{background:var(--rc-surface)}
html.dark-mode .message-part blockquote blockquote{color:var(--rc-ok);border-color:var(--rc-ok)}
html.dark-mode .message-part blockquote blockquote blockquote{color:var(--rc-danger);border-color:var(--rc-danger)}
html.dark-mode .message-part span.sig{color:var(--rc-text-2)}
html.dark-mode .message-htmlpart{background-color:var(--rc-surface);color:var(--rc-text)}
html.dark-mode #message-header .header-headers .header-title{color:var(--rc-text)}
html.dark-mode .message-partheaders{background-color:var(--rc-hover)}
html.dark-mode .message-partheaders table.headers-table{color:var(--rc-text)}
html.dark-mode p.image-attachment{border-color:var(--rc-line);background-color:var(--rc-hover)}
html.dark-mode p.image-attachment span{color:var(--rc-text-2)}
html.dark-mode fieldset.image-attachment legend{color:var(--rc-text-2);border-color:var(--rc-line)}
html.dark-mode #messagepartframe{background:var(--rc-surface)}
html.dark-mode .ui-widget{border-color:var(--rc-line)}
html.dark-mode .ui-widget-overlay{background-color:var(--rc-scrim)}
html.dark-mode .ui-widget-content,html.dark-mode .ui-widget-header{background-color:var(--rc-surface)}
html.dark-mode .ui-dialog .ui-dialog-titlebar{border-color:var(--rc-line)}
html.dark-mode .ui-dialog .ui-dialog-title,html.dark-mode .ui-dialog .ui-dialog-titlebar-close{color:var(--rc-text)}
html.dark-mode .ui-dialog .ui-dialog-buttonpane{border-color:var(--rc-line)}
html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link{color:var(--rc-text)}
html.dark-mode .ui-datepicker .ui-datepicker-header{border-color:var(--rc-line)}
html.dark-mode .ui-datepicker th{color:var(--rc-text-2)}
html.dark-mode .ui-datepicker .ui-datepicker-next,html.dark-mode .ui-datepicker .ui-datepicker-prev,html.dark-mode .ui-datepicker .ui-state-default,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-default{color:var(--rc-text)}
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight{color:var(--rc-accent);background-color:var(--rc-hover)}
html.dark-mode .ui-datepicker .ui-datepicker-days-cell-over a{background-color:var(--rc-line)}
html.dark-mode .ui-menu{background-color:var(--rc-surface-2);border-color:var(--rc-line)}
html.dark-mode .ui-menu .ui-menu-item{border-bottom:1px solid var(--rc-line)}
html.dark-mode .ui-menu .ui-state-active{background-color:var(--rc-hover)!important}
html.dark-mode .minicolors-panel{border-color:var(--rc-line);background:var(--rc-surface-2)}
html.dark-mode #contacthead.readonly .source.row,html.dark-mode #login-footer,html.dark-mode .contactlist span.email,html.dark-mode .file-upload .hint,html.dark-mode .formcontent .hint,html.dark-mode .listing span.secondary,html.dark-mode .listing-info,html.dark-mode ::-webkit-input-placeholder,html.dark-mode ::placeholder{color:var(--rc-text-2)}
html.dark-mode .popover{background-color:var(--rc-surface-2);border-color:var(--rc-line)}
html.dark-mode .popover .menu li.separator{color:var(--rc-text-2)}
html.dark-mode .popover .menu ul+li.separator{border-top:1px solid var(--rc-line)}
html.dark-mode .popover-body{color:var(--rc-text)}
html.dark-mode .bs-popover-auto[x-placement^=right]>.arrow::after,html.dark-mode .bs-popover-right>.arrow::after{border-right-color:var(--rc-line)}
html.dark-mode .bs-popover-auto[x-placement^=left]>.arrow::after,html.dark-mode .bs-popover-left>.arrow::after{border-left-color:var(--rc-line)}
html.dark-mode .bs-popover-auto[x-placement^=top]>.arrow::after,html.dark-mode .bs-popover-top>.arrow::after{border-top-color:var(--rc-line)}
html.dark-mode .bs-popover-auto[x-placement^=bottom]>.arrow::after,html.dark-mode .bs-popover-bottom>.arrow::after{border-bottom-color:var(--rc-line)}
html.dark-mode .listing-hover-menu{background-color:var(--rc-surface-2);border-color:var(--rc-line)}
html.dark-mode .listing-hover-menu a.button{color:var(--rc-text)}
html.dark-mode .listing-hover-menu span.txt{color:var(--rc-text-2)}
html.dark-mode .nav-tabs{border-color:var(--rc-line)}
html.dark-mode .nav-tabs .nav-link{color:var(--rc-text);border-bottom-color:var(--rc-line)}
html.dark-mode .nav-tabs .nav-link:hover{background:var(--rc-surface);border-color:var(--rc-line);color:var(--rc-text)}
html.dark-mode .nav-tabs .nav-link.active{background:var(--rc-surface);border-color:var(--rc-line);color:var(--rc-on-accent)}
html.dark-mode .table{color:var(--rc-text)}
html.dark-mode .table td,html.dark-mode .table th,html.dark-mode .table thead th{border-color:var(--rc-line)}
html.dark-mode .table-widget{border-color:var(--rc-line)}
html.dark-mode .table-widget>.footer{border-color:var(--rc-line)}
html.dark-mode .table-widget table.options-table tr:last-child td{border-color:var(--rc-line)}
html.dark-mode .table-widget table.options-table tr.selected td{background-color:var(--rc-hover);color:var(--rc-text)}
html.dark-mode #rcmdraglayer{background-color:var(--rc-surface-2);border:1px solid var(--rc-line);color:var(--rc-text)}
html.dark-mode .quota-widget .bar{border-color:var(--rc-line);background-color:var(--rc-line)}
html.dark-mode .quota-info .root{color:var(--rc-text-2)}
html.dark-mode #contactpic,html.dark-mode img.contactphoto{background-color:var(--rc-hover)!important}
html.dark-mode .pgpkeyimport div.key.disabled,html.dark-mode .pgpkeyimport div.key.revoked{color:var(--rc-text-3)}
@media screen and (min-width:481px){
  #layout-menu .popover-header{background-color:var(--rc-surface-2)!important}
  #layout-menu{background-color:var(--rc-surface-2)}
  #taskmenu a{color:var(--rc-on-accent)}
  #taskmenu a.selected{color:var(--rc-on-accent);background:var(--rc-hover)}
  #taskmenu a.selected:hover{color:var(--rc-on-accent);background:var(--rc-hover)}
  #taskmenu a:hover{color:var(--rc-on-accent);background:var(--rc-hover)}
  #taskmenu .special-buttons{background-color:var(--rc-surface-2)}
  #taskmenu .action-buttons a{color:var(--rc-accent)}
  #taskmenu .action-buttons a:hover{color:var(--rc-accent);background:var(--rc-hover)}
  #taskmenu a.logout{color:var(--rc-danger)!important}
  #taskmenu a.logout:hover{color:var(--rc-danger)!important}
}
@media screen and (max-width:768px){
  #layout>div>.header{background-color:var(--rc-surface-2)}
  #layout>div>.footer{background-color:var(--rc-surface-2)}
  .menu.listing a{color:var(--rc-text)}
}
@media screen and (max-width:480px){
  .ui-dialog .ui-dialog-titlebar{background-color:var(--rc-surface-2)}
  .ui-dialog .ui-dialog-buttonpane{border-top:1px solid var(--rc-line);background-color:var(--rc-surface-2)}
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary,.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary{color:var(--rc-text)}
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger{color:var(--rc-danger)}
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link{color:var(--rc-text)}
  #taskmenu a{border-bottom:1px solid var(--rc-line-soft)!important;color:var(--rc-text)}
  div.tox .tox-dialog__footer{border-top:1px solid var(--rc-line)}
  div.tox .tox-dialog__header{background-color:var(--rc-surface-2)}
  div.tox .tox-dialog__footer{background-color:var(--rc-surface-2)}
  div.tox .tox-dialog__footer .tox-button{color:var(--rc-text)!important}
  div.tox .tox-dialog__footer .tox-button:active,div.tox .tox-dialog__footer .tox-button:focus,div.tox .tox-dialog__footer .tox-button:hover{color:var(--rc-text)}
  html.dark-mode #layout-menu .popover-header{border-bottom:1px solid var(--rc-line)}
  html.dark-mode #taskmenu a{border-color:var(--rc-line)!important}
  html.dark-mode .tox .tox-dialog__footer .tox-button{color:var(--rc-text)!important}
  html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary:not(.btn-danger),html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary{color:var(--rc-text)}
}
@media screen and (min-width:769px){
  .header a.button.icon:not(.disabled):focus,.header a.button.icon:not(.disabled):hover{background-color:var(--rc-surface-2)}
}
@media screen and (min-width:1025px){
  #taskmenu a:focus{background-color:var(--rc-hover)}
}
@media screen and (max-width:1200px){
  .listing.selection-large-only li.selected{color:var(--rc-text)}
}
/* ============================================================
   Tail: the few places where re-colouring Elastic is not enough and the
   correction has to sit immediately after the generated block. Everything
   about the application's shape lives in styles/app.css.
   ============================================================ */

/* Elastic paints the task rail as a solid bar and the panel headers as a
   filled strip. The application draws its own chrome, so these are cleared
   here rather than fought selector by selector further down. */
#layout-menu,
html.dark-mode #layout-menu {
	background: transparent;
	border: 0;
}
#layout > div > .header,
#layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
	background: transparent;
}

/* A quiet scrollbar, the same in both themes. */
html:not(.touch) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:not(.touch) ::-webkit-scrollbar-track { background-color: transparent; }
html:not(.touch) ::-webkit-scrollbar-thumb {
	background-color: var(--rc-line-strong);
	border: 3px solid var(--rc-surface);
	border-radius: 6px;
}
html:not(.touch) ::-webkit-scrollbar-thumb:hover { background-color: var(--rc-text-3); }
html { scrollbar-width: thin; scrollbar-color: var(--rc-line-strong) transparent; }

/* One focus ring for the whole product. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--rc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Elastic's decorative bits that have no place in a mail client. */
#messagestack .loading:before { display: none; }
.floating-action-buttons { box-shadow: none; }

/* Elastic ships Roboto and Font Awesome and asks for both on every page. The
   product is on the system font stack and its icons are CSS masks, so neither
   file is wanted. Roboto is stopped here, by redefining the family with a
   local() source only: a later @font-face for the same family, weight and
   style wins, and nothing is fetched. The icon font is stopped in icons.css
   instead, by taking font-family away from every :before it decorates —
   overriding its @font-face does not work, because a face that fails to load
   sends the browser back to the earlier declaration. */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local("Roboto"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; src: local("Roboto Italic"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; src: local("Roboto Bold"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 700; src: local("Roboto Bold Italic"); }

/* the editor's own chrome asks for Roboto by name too */
div.tox,
div.tox :not(.svg),
div.tox .tox-color-input > input,
div.tox .tox-listboxfield .tox-listbox--select,
div.tox .tox-textarea,
div.tox .tox-textfield {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}