/* Vorota Mail: content surfaces. Load after Elastic and the shared theme.
 * Keep native layout/visibility and message HTML under Roundcube's control. */

/* Preferences, identities, contacts and other embedded forms. */
html.iframe body:is(.task-settings, .task-addressbook) {
  background: var(--cm-surface, #fff);
  color: var(--cm-text, #202124);
}

body:not(.task-login) .formcontent:not(.popupmenu) {
  padding: 24px 28px;
  color: var(--cm-text, #202124);
}

html.iframe body:is(.task-settings, .task-addressbook) > .formcontent {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  margin-inline: auto;
}

html.iframe body:not(.task-login) .formcontent > .propform {
  padding: 0;
}

body:not(.task-login) :is(.formcontent, .propform) fieldset {
  min-width: 0;
}

body:not(.task-login) :is(.formcontent, .propform) fieldset:not(.tab-pane) + fieldset {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cm-line, #e0e3e7);
}

body:not(.task-login) :is(.formcontent, .propform) legend {
  margin-bottom: 20px;
  padding: 0;
  color: var(--cm-text, #202124);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.2px;
}

body:not(.task-login) :is(.formcontent, .propform) .form-group {
  margin-bottom: 18px;
}

body:not(.task-login) :is(.formcontent, .propform) :is(label, .col-form-label, td.title) {
  color: var(--cm-text, #202124);
  line-height: 1.5;
}

body:not(.task-login) :is(.formcontent, .propform) label.col-form-label {
  padding-block: 11px;
  padding-right: 20px;
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(.form-control, .custom-select),
html:root body:not(.task-login) :is(.formcontent, .propform, .ui-dialog-content) input:not([type]):not(.custom-control-input) {
  min-width: 0;
  min-height: 44px;
  height: auto;
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 8px;
  background-color: var(--cm-surface, #fff);
  color: var(--cm-text, #202124);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) select:is(.form-control, .custom-select) {
  padding-right: 34px;
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) textarea.form-control {
  min-height: 112px;
  resize: vertical;
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(.form-control, .custom-select):hover:not(:disabled):not(:focus) {
  border-color: var(--cm-muted, #5f6368);
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(.form-control, .custom-select):focus {
  outline: 0;
  background-color: var(--cm-surface, #fff);
  color: var(--cm-text, #202124);
  border-color: var(--cm-primary, #0b57d0);
  box-shadow: 0 0 0 1px var(--cm-primary, #0b57d0);
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(.form-control, .custom-select):disabled {
  color: var(--cm-muted, #5f6368);
  background-color: var(--cm-bg, #f6f8fc);
  cursor: not-allowed;
  opacity: .7;
}

html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(input, textarea)::placeholder {
  color: var(--cm-muted, #5f6368);
  opacity: 1;
}

html:root body:not(.task-login) :is(.formcontent, .propform) :is(.form-text, .hint, .text-muted),
html:root body:not(.task-login) .file-upload .hint {
  color: var(--cm-muted, #5f6368) !important;
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

body:not(.task-login) :is(.formcontent, .propform) .form-text {
  margin-top: 8px;
}

body:not(.task-login) :is(.formcontent, .propform) .input-group {
  min-width: 0;
}

html:root body:not(.task-login) :is(.formcontent, .propform) .input-group-text {
  min-height: 44px;
  padding-inline: 12px;
  border-color: var(--cm-line, #e0e3e7);
  background: var(--cm-bg, #f6f8fc);
  color: var(--cm-muted, #5f6368);
}

body:not(.task-login) :is(.formcontent, .propform) .input-group-text.icon:hover {
  color: var(--cm-primary, #0b57d0);
  background: var(--cm-hover, #eaf1fb);
}

body:not(.task-login) :is(.formcontent, .propform) .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body:not(.task-login) :is(.formcontent, .propform) .input-group-append:last-child > .input-group-text {
  border-radius: 0 8px 8px 0;
}

/* Native switches retain their input, label, dimensions and click behavior. */
html:root body:not(.task-login) .custom-switch .custom-control-label::before {
  border-color: var(--cm-muted, #5f6368);
  background-color: var(--cm-bg, #f6f8fc);
}

html:root body:not(.task-login) .custom-switch .custom-control-label::after {
  background-color: var(--cm-muted, #5f6368);
}

html:root body:not(.task-login) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--cm-primary, #0b57d0);
  background-color: var(--cm-primary, #0b57d0);
}

html:root body:not(.task-login) .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--cm-on-primary, #fff);
}

html:root body:not(.task-login) .custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--cm-primary, #0b57d0);
  outline-offset: 3px;
  box-shadow: none;
}

html:root body:not(.task-login) .custom-switch .custom-control-input:disabled ~ .custom-control-label {
  opacity: .45;
}

/* Gmail-style pill actions; no overrides of native mobile display states. */
html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn {
  min-height: 40px;
  padding: 9px 22px;
  border-radius: 22px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  line-height: 20px;
  box-shadow: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn-primary {
  background: var(--cm-primary, #0b57d0);
  border-color: var(--cm-primary, #0b57d0);
  color: var(--cm-on-primary, #fff);
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn-primary:hover:not(:disabled):not(.disabled) {
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%), inset 0 0 0 999px rgb(255 255 255 / 8%);
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn-secondary {
  border-color: var(--cm-line, #e0e3e7);
  background: var(--cm-surface, #fff);
  color: var(--cm-primary, #0b57d0);
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--cm-hover, #eaf1fb);
  border-color: var(--cm-primary, #0b57d0);
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn-link {
  color: var(--cm-primary, #0b57d0);
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn:focus-visible,
body:not(.task-login) :is(.formcontent, .popupmenu, .popover, .ui-dialog, #message-header) a:focus-visible {
  outline: 2px solid var(--cm-primary, #0b57d0);
  outline-offset: 3px;
  box-shadow: none;
}

html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn:is(:disabled, .disabled) {
  opacity: .45;
  box-shadow: none;
}

body:not(.task-login) .formbuttons {
  padding: 16px 28px;
  border-top: 1px solid var(--cm-line, #e0e3e7);
  background-color: var(--cm-surface, #fff);
}

body:not(.task-login) .formbuttons .btn + .btn {
  margin-left: 8px;
}

/* Tabbed contact details and settings sections. */
html:root body:not(.task-login) .formcontent .nav-tabs {
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cm-line, #e0e3e7);
}

html:root body:not(.task-login) .formcontent .nav-tabs .nav-link {
  position: relative;
  min-height: 48px;
  padding: 13px 18px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--cm-muted, #5f6368);
  font-weight: 500;
}

html:root body:not(.task-login) .formcontent .nav-tabs .nav-link:hover {
  background: var(--cm-hover, #eaf1fb);
  color: var(--cm-text, #202124);
}

html:root body:not(.task-login) .formcontent .nav-tabs .nav-link.active {
  color: var(--cm-primary, #0b57d0);
  background: transparent;
}

html:root body:not(.task-login) .formcontent .nav-tabs .nav-link.active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cm-primary, #0b57d0);
  content: "";
}

html:root body.task-addressbook .contact-header {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cm-line, #e0e3e7);
}

body.task-addressbook .contact-header .contact-photo {
  flex: 0 0 96px;
  min-width: 96px;
}

body.task-addressbook .contact-photo :is(img, .image-upload) {
  max-width: 96px;
  border-radius: 50%;
}

body.task-addressbook .contact-header .contact-head {
  flex: 1;
  min-width: 0;
  margin-left: 0;
}

html:root body.task-addressbook #contacthead .names span.namefield {
  color: var(--cm-text, #202124);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html:root body.task-addressbook #contacthead.readonly .source.row {
  color: var(--cm-muted, #5f6368);
  font-size: 12px;
}

html:root body.task-addressbook #contacttabs .readonly .form-control-plaintext {
  color: var(--cm-text, #202124);
  overflow-wrap: anywhere;
}

html:root body.task-addressbook #contacttabs .readonly label {
  color: var(--cm-muted, #5f6368);
}

html:root body.task-addressbook #contacts-table td {
  height: 54px;
  padding: 10px 16px;
  border-color: var(--cm-line, #e0e3e7);
  color: var(--cm-text, #202124);
  background: var(--cm-surface, #fff);
  vertical-align: middle;
}

html:root body.task-addressbook #contacts-table tr:not(.selected):hover td {
  background: var(--cm-hover, #eaf1fb);
}

html:root body.task-addressbook #contacts-table tr.selected td {
  background: var(--cm-selected, #d3e3fd);
  color: var(--cm-text, #202124);
}

html:root body.task-addressbook #contacts-table td:is(.contact, .contactgroup)::before {
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--cm-bg, #f6f8fc);
  color: var(--cm-muted, #5f6368);
  font-size: 14px;
  line-height: 32px;
}

html:root body.task-addressbook #contacts-table .email {
  color: var(--cm-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
}

/* Compose: clean ruled address rows and rounded recipient chips. */
body.action-compose #compose-content > .formcontent {
  padding: 10px 28px 20px;
}

body.action-compose #compose-headers .form-group {
  margin-bottom: 0;
  padding-block: 4px;
  border-bottom: 1px solid var(--cm-line, #e0e3e7);
}

body.action-compose #compose-headers .col-form-label {
  color: var(--cm-muted, #5f6368);
  font-size: 13px;
}

html:root body.action-compose #compose-headers :is(.form-control, .recipient-input) {
  min-height: 42px;
  border-color: transparent;
  border-radius: 5px;
  background-color: transparent;
  padding: 9px 8px;
}

html:root body.action-compose #compose-headers :is(.form-control, .recipient-input):hover:not(:focus):not(.focus) {
  border-color: transparent;
}

html:root body.action-compose #compose-headers :is(.form-control:focus, .recipient-input.focus) {
  border-color: transparent;
  background: var(--cm-surface, #fff);
  box-shadow: inset 0 -2px 0 var(--cm-primary, #0b57d0);
}

html:root body.action-compose #compose-headers .input-group-text {
  min-width: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  justify-content: center;
  padding: 8px;
}

html:root body.action-compose #compose-headers .input-group-text:hover {
  background: var(--cm-hover, #eaf1fb);
}

html:root body.action-compose #compose-headers .recipient-input {
  padding-top: 1px;
  padding-bottom: 5px;
}

html:root body.action-compose #compose-headers .recipient-input li.recipient {
  align-items: center;
  min-height: 28px;
  max-width: calc(100% - 4px);
  margin: 5px 4px 0 0;
  padding: 2px 6px 2px 8px;
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 18px;
  background: var(--cm-bg, #f6f8fc);
  color: var(--cm-text, #202124);
}

html:root body.action-compose #compose-headers .recipient-input li.recipient .name {
  line-height: 18px;
}

html:root body.action-compose #compose-headers .recipient-input :is(input, a.button.icon) {
  color: var(--cm-text, #202124);
}

html:root body.action-compose #composebodycontainer {
  margin-top: 16px;
}

html:root body.action-compose #composebody {
  min-height: 260px;
  border-color: transparent;
  border-radius: 8px;
  /* Reserve space for Elastic’s absolutely positioned 34px editor toolbar. */
  padding: 46px 12px 12px;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
}

html:root body.action-compose #composebody:focus {
  border-color: var(--cm-line, #e0e3e7);
  box-shadow: none;
}

body.action-compose #compose-options.formcontent {
  padding: 20px 18px;
}

body.action-compose #compose-options .form-group {
  margin-bottom: 18px;
}

body.action-compose #compose-options .col-form-label {
  font-size: 13px;
  padding-right: 12px;
}

body.action-compose #compose-attachments .upload-form {
  padding: 22px 16px;
  border-bottom: 1px solid var(--cm-line, #e0e3e7);
  background: var(--cm-panel, #fff);
}

body.action-compose #compose-attachments .upload-form .btn {
  max-width: 100%;
  white-space: normal;
}

/* Message chrome only: deliberately no #messagebody descendant rules. */
html:root body #message-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cm-line, #e0e3e7);
  color: var(--cm-text, #202124);
}

html:root body #message-header > .subject {
  margin-bottom: 22px;
  color: var(--cm-text, #202124);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.35px;
  overflow-wrap: anywhere;
}

html:root body #message-header > .subject a.extwin {
  display: inline-block;
  margin-left: 8px;
  color: var(--cm-muted, #5f6368);
  vertical-align: middle;
}

html:root body #message-header > .header img.contactphoto {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  background: var(--cm-bg, #f6f8fc);
}

html:root body #message-header .header-content {
  min-width: 0;
  min-height: 40px;
}

html:root body #message-header .header-summary {
  margin-top: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

html:root body #message-header .header-headers {
  color: var(--cm-text, #202124);
  font-size: 13px;
  line-height: 1.6;
}

html:root body #message-header .header-headers td {
  padding-block: 3px;
  overflow-wrap: anywhere;
}

html:root body #message-header .header-headers .header-title {
  color: var(--cm-muted, #5f6368);
  font-weight: 400;
}

html:root body #message-header .header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
}

html:root body #message-header .header-links a {
  margin: 0;
  padding-block: 4px;
  color: var(--cm-muted, #5f6368);
  font-size: 12px;
  line-height: 20px;
}

html:root body #message-header .header-links a:hover {
  color: var(--cm-primary, #0b57d0);
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist {
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist:empty {
  padding: 0;
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist li {
  align-items: center;
  min-height: 40px;
  margin: 4px;
  padding: 5px 10px;
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 10px;
  background: var(--cm-bg, #f6f8fc);
}

html:root body #compose-attachments .attachmentslist li {
  padding-right: 34px;
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist li:hover {
  background: var(--cm-hover, #eaf1fb);
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist :is(a, .attachment-name) {
  color: var(--cm-text, #202124);
}

html:root body :is(#message-content, #compose-attachments) .attachmentslist .attachment-size {
  color: var(--cm-muted, #5f6368);
  font-size: 11px;
}

/* Floating menus and dialogs use the same surfaces in both color modes. */
html:root body .popover {
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 12px;
  background: var(--cm-panel, #fff);
  color: var(--cm-text, #202124);
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%), 0 2px 6px rgb(0 0 0 / 8%);
}

html:root body .popover-body {
  border-radius: inherit;
  color: var(--cm-text, #202124);
  background: var(--cm-panel, #fff);
}

html:root body .popover-body > .popupmenu > .listing {
  padding-block: 6px;
}

html:root body .popupmenu .listing li > a {
  min-height: 40px;
  padding: 9px 16px;
  border: 0;
  color: var(--cm-text, #202124);
  line-height: 22px;
}

html:root body .popupmenu .listing li > a:not(.disabled):is(:hover, :focus),
html:root body .popupmenu .listing li.selected {
  color: var(--cm-text, #202124);
  background: var(--cm-hover, #eaf1fb);
}

html:root body .popupmenu .listing li > a.disabled {
  color: var(--cm-muted, #5f6368);
  opacity: .5;
}

html:root body .popupmenu .listing :is(li.separator, li.separator-above) {
  border-color: var(--cm-line, #e0e3e7);
}

html:root body .ui-widget-overlay {
  background: #202124;
  opacity: .38;
}

html:root body .ui-dialog {
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 20px;
  background: var(--cm-panel, #fff);
  color: var(--cm-text, #202124);
  box-shadow: 0 16px 48px rgb(0 0 0 / 24%);
}

html:root body .ui-dialog .ui-dialog-titlebar {
  border-color: var(--cm-line, #e0e3e7);
  border-radius: 20px 20px 0 0;
  background: var(--cm-panel, #fff);
}

html:root body .ui-dialog .ui-dialog-title {
  padding-inline: 24px 56px;
  color: var(--cm-text, #202124);
  font-size: 20px;
  font-weight: 400;
}

html:root body .ui-dialog .ui-dialog-titlebar-close {
  color: var(--cm-muted, #5f6368);
  border-radius: 50%;
}

html:root body .ui-dialog .ui-dialog-content {
  color: var(--cm-text, #202124);
  background: var(--cm-panel, #fff);
}

html:root body .ui-dialog .ui-dialog-content:not(.iframe) {
  padding: 20px 24px;
}

html:root body .ui-dialog .ui-dialog-buttonpane {
  padding: 10px 20px;
  border-color: var(--cm-line, #e0e3e7);
  border-radius: 0 0 20px 20px;
  background: var(--cm-panel, #fff);
}

html:root body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
  color: var(--cm-primary, #0b57d0);
}

html:root body .ui-autocomplete {
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 12px;
  background: var(--cm-panel, #fff);
  color: var(--cm-text, #202124);
  padding: 6px 0;
  box-shadow: 0 6px 20px rgb(0 0 0 / 16%);
}

html:root body .ui-autocomplete .ui-menu-item-wrapper {
  min-height: 40px;
  padding: 10px 14px;
}

html:root body .ui-autocomplete .ui-state-active {
  margin: 0;
  border-color: transparent;
  color: var(--cm-text, #202124);
  background: var(--cm-hover, #eaf1fb);
}

/* Embedded editor chrome. The editable message document remains untouched. */
html:root body div.tox.tox-tinymce {
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 12px;
  background: var(--cm-surface, #fff);
}

html:root body .tox :is(.tox-editor-header, .tox-toolbar, .tox-toolbar__primary, .tox-toolbar__overflow, .tox-menubar, .tox-statusbar) {
  border-color: var(--cm-line, #e0e3e7);
  background: var(--cm-bg, #f6f8fc);
  color: var(--cm-muted, #5f6368);
}

html:root body .tox .tox-editor-header {
  padding: 4px;
  box-shadow: none;
}

html:root body .tox .tox-toolbar__group {
  padding-inline: 3px;
  border-color: var(--cm-line, #e0e3e7);
}

html:root body .tox :is(.tox-tbtn, .tox-mbtn) {
  border-radius: 6px;
  color: var(--cm-text, #202124);
}

html:root body .tox :is(.tox-tbtn, .tox-mbtn) svg {
  fill: currentColor;
}

html:root body .tox :is(.tox-tbtn, .tox-mbtn):hover {
  color: var(--cm-text, #202124);
  background: var(--cm-hover, #eaf1fb);
}

html:root body .tox :is(.tox-tbtn--enabled, .tox-mbtn--active) {
  background: var(--cm-selected, #d3e3fd);
  color: var(--cm-primary, #0b57d0);
}

html:root body .tox :is(.tox-tbtn, .tox-mbtn, .tox-button):focus-visible {
  outline: 2px solid var(--cm-primary, #0b57d0);
  outline-offset: 1px;
}

html:root body .tox :is(.tox-menu, .tox-dialog, .tox-dialog__header, .tox-dialog__body, .tox-dialog__footer, .tox-collection--list, .tox-insert-table-picker) {
  border-color: var(--cm-line, #e0e3e7);
  background: var(--cm-panel, #fff);
  color: var(--cm-text, #202124);
}

html:root body .tox :is(.tox-menu, .tox-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 20%);
}

html:root body .tox :is(.tox-label, .tox-listbox__select-label, .tox-collection__item, .tox-dialog__title) {
  color: var(--cm-text, #202124);
}

html:root body .tox :is(.tox-textfield, .tox-textarea, .tox-listboxfield .tox-listbox--select) {
  min-height: 40px;
  border: 1px solid var(--cm-line, #e0e3e7);
  border-radius: 8px;
  background: var(--cm-surface, #fff);
  color: var(--cm-text, #202124);
}

html:root body .tox :is(.tox-textfield, .tox-textarea):focus {
  border-color: var(--cm-primary, #0b57d0);
  box-shadow: 0 0 0 1px var(--cm-primary, #0b57d0);
}

html:root body .tox .tox-collection--list :is(.tox-collection__item--active, .tox-collection__item--enabled) {
  background: var(--cm-hover, #eaf1fb);
  color: var(--cm-text, #202124);
}

html:root body .tox .tox-button {
  min-height: 38px;
  padding-inline: 20px;
  border-color: var(--cm-primary, #0b57d0);
  border-radius: 20px;
  background: var(--cm-primary, #0b57d0);
  color: var(--cm-on-primary, #fff);
}

html:root body .tox .tox-button--secondary {
  border-color: var(--cm-line, #e0e3e7);
  background: var(--cm-panel, #fff);
  color: var(--cm-primary, #0b57d0);
}

html:root body .tox .tox-button--icon {
  min-width: 32px;
  padding: 5px;
  border-color: transparent;
  background: transparent;
  color: var(--cm-muted, #5f6368);
}

html:root body .tox :is(.tox-statusbar__path-item, .tox-statusbar__wordcount, .tox-statusbar a) {
  color: var(--cm-muted, #5f6368);
}

/* Application-owned tables only, never received email tables. */
html:root body :is(.formcontent, .ui-dialog-content, #about-dialog) table.table {
  color: var(--cm-text, #202124);
}

html:root body :is(.formcontent, .ui-dialog-content, #about-dialog) table.table :is(th, td) {
  padding: 12px 16px;
  border-color: var(--cm-line, #e0e3e7);
  color: var(--cm-text, #202124);
}

html:root body :is(.formcontent, .ui-dialog-content, #about-dialog) table.table th {
  background: var(--cm-bg, #f6f8fc);
  color: var(--cm-muted, #5f6368);
  font-size: 12px;
  font-weight: 500;
}

/* Match Elastic's one-panel mode, retaining its fullscreen mobile dialogs. */
@media (max-width: 768px) {
  body:not(.task-login) .formcontent:not(.popupmenu) {
    padding: 20px;
  }

  body:not(.task-login) .formbuttons {
    padding: 14px 20px;
  }

  html:root body .ui-dialog {
    border-radius: 0;
    border: 0;
  }

  html:root body .ui-dialog .ui-dialog-titlebar,
  html:root body .ui-dialog .ui-dialog-buttonpane {
    border-radius: 0;
  }

  html:root body .ui-dialog .ui-dialog-title {
    padding-inline: 16px;
    font-size: 16px;
  }

  html:root body .ui-dialog .ui-dialog-content:not(.iframe) {
    padding: 18px;
  }

  html:root body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
    border-radius: 0;
    padding: .45rem;
  }

  html:root body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:is(.btn-primary, .btn-secondary) {
    background: transparent;
    color: var(--cm-primary, #0b57d0);
  }

  html:root body .popover .popover-header {
    color: var(--cm-text, #202124);
    background: var(--cm-bg, #f6f8fc);
    border-bottom: 1px solid var(--cm-line, #e0e3e7);
  }

  html:root body .popover .popover-header a {
    color: var(--cm-text, #202124);
  }

  html:root body .popupmenu .listing li > a {
    min-height: 48px;
    padding-block: 13px;
  }

  body.action-compose #compose-content > .formcontent {
    padding: 8px 16px 18px;
  }

  html:root body #message-header > .subject {
    margin-bottom: 18px;
    font-size: 22px;
  }

  html:root body .tox .tox-toolbar__group {
    padding-inline: 1px;
  }
}

@media (max-width: 575px) {
  html:root body:not(.task-login) :is(.formcontent, .propform, .ui-dialog-content) :is(input.form-control, textarea.form-control, select.form-control, .custom-select),
  html:root body.action-compose #compose-headers .recipient-input input {
    font-size: 16px;
  }

  body:not(.task-login) :is(.formcontent, .propform) label.col-form-label {
    padding-top: 4px;
    padding-bottom: 8px;
  }

  body:not(.task-login) :is(.formcontent, .propform) .row.form-check label.col-form-label {
    padding-block: 8px;
  }

  body:not(.task-login) :is(.formcontent, .propform) .form-group {
    margin-bottom: 20px;
  }

  html:root body.task-addressbook .contact-header {
    gap: 16px;
    margin-bottom: 20px;
  }

  body.task-addressbook .contact-header .contact-photo {
    flex-basis: 64px;
    min-width: 64px;
  }

  body.task-addressbook .contact-photo :is(img, .image-upload) {
    max-width: 64px;
  }

  html:root body.task-addressbook #contacthead .names span.namefield {
    font-size: 22px;
  }

  body.task-addressbook.action-edit .contact-header,
  body.task-addressbook.action-add .contact-header {
    flex-direction: column;
  }

  body.task-addressbook:is(.action-edit, .action-add) .contact-header .contact-head {
    width: 100%;
  }

  html:root body.task-addressbook .propform.grouped:not(.readonly) .row.input-group > :first-child {
    min-width: 6rem;
    max-width: 36%;
    font-size: 13px;
  }

  html:root body:not(.task-login) .formcontent .nav-tabs {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  html:root body:not(.task-login) .formcontent .nav-tabs .nav-item {
    flex-shrink: 0;
  }

  html:root body:not(.task-login) .formcontent .nav-tabs .nav-link {
    padding-inline: 12px;
    font-size: 13px;
  }

  html:root body.action-compose #compose-headers .form-group {
    margin-bottom: 0;
  }

  html:root body.action-compose #compose-headers .col-form-label {
    flex: 0 0 62px;
    max-width: 62px;
    padding-top: 12px;
    padding-right: 6px;
    font-size: 12px;
  }

  html:root body.action-compose #compose-headers .col-10 {
    flex: 1;
    width: 0;
    min-width: 0;
    max-width: none;
  }

  html:root body.action-compose #compose-headers .input-group-text {
    min-width: 36px;
    padding-inline: 6px;
  }

  html:root body #message-header > .header img.contactphoto {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  html:root body #message-header .header-headers .header-title {
    white-space: normal;
    padding-right: 10px;
  }

  html:root body #message-header .header-links a {
    min-height: 36px;
    padding-block: 8px;
  }
}

@media (max-width: 360px) {
  body:not(.task-login) .formcontent:not(.popupmenu),
  html:root body .ui-dialog .ui-dialog-content:not(.iframe) {
    padding: 16px 12px;
  }

  body:not(.task-login) .formbuttons {
    padding-inline: 12px;
  }

  body.action-compose #compose-content > .formcontent {
    padding-inline: 8px;
  }

  html:root body.action-compose #compose-headers .col-form-label {
    flex-basis: 52px;
    max-width: 52px;
  }

  html:root body.task-addressbook .propform.grouped:not(.readonly) .row.input-group > :first-child {
    min-width: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body:not(.task-login) :is(.formcontent, .propform, .searchoptions, .ui-dialog-content) :is(.form-control, .custom-select),
  html:root body:not(.task-login) :is(.formbuttons, .file-upload, .formcontent, .ui-dialog-buttonpane) .btn {
    transition: none;
  }
}
/* Native plain-text editor's HTML switch bar uses the same palette as TinyMCE. */
html:root .html-editor .editor-toolbar {background:var(--cm-hover);border-color:var(--cm-line);}
html:root .html-editor .editor-toolbar a {color:var(--cm-muted);}