.application-body.application-mail {
  --app-colour: var(--app-colour-mail, #0078D4);
  --mail-flag-red: #d93025;
  --mail-flag-orange: #f28c28;
  --mail-flag-yellow: #e8b800;
  --mail-flag-green: #2e9e4f;
  --mail-flag-blue: #1a73e8;
  --mail-flag-purple: #8e44ad;
}
.application-body.application-mail .document-body {
  --pat-x-list-padding: 20px;
}
.application-body.application-mail #editor-toolbar-mail-markdown li:has(.button-checklist) {
  display: none;
}
.application-body.application-mail #editor-toolbar-mail-markdown li:has(.button-image) {
  display: none;
}
.application-body.application-mail .pat-link-list .pat-avatar,
.application-body.application-mail .pat-table .pat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--app-colour);
  background: color-mix(in srgb, var(--app-colour) 10%, white);
  color: var(--app-colour);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
  text-transform: uppercase;
}
@container screen style(--screen-small: true) {
.application-body.application-mail #page-head-mail-message h1 {
  font-size: 1.7rem;
  line-height: 1;
}
}
.application-body.application-mail #application-body-mail .mail-webmail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@container screen style(--screen-small: true) {
.application-body.application-mail #mail-message-toolbar .mail-toolbar-wide-only {
  display: none;
}
}
@container screen style(--screen-small: true) {
.application-body.application-mail .document-body {
  background-color: var(--application-body-background-colour);
}
}
@container screen style(--screen-small: false) {
.application-body.application-mail .pat-menu-list .mail-phone-only {
  display: none;
}
}
.application-body.application-mail #sidebar-mail .mail-box-header {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
}
.application-body.application-mail #sidebar-mail .mail-box-header .mail-box-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-body.application-mail #sidebar-mail .mail-box-header .well-vendor-brandmark,
.application-body.application-mail #sidebar-mail .mail-box-header .mail-box-glyph {
  flex: none;
}
.application-body.application-mail #sidebar-mail .mail-box-header svg.well-vendor-brandmark {
  width: 1.1em;
  height: 1.1em;
}
.application-body.application-mail #sidebar-mail .mail-box-folders-loader {
  height: 2.5em;
}
.application-body.application-mail .kik-pay-card .icon.euro {
  background-color: color-mix(in srgb, green 12%, white);
  color: color-mix(in srgb, green 70%, black);
  border: 1px solid color-mix(in srgb, green 35%, transparent);
  font-weight: 700;
}
.application-body.application-mail .kik-pay-card .message-byline {
  font-variant-numeric: tabular-nums;
}
@container screen style(--screen-small: true) {
.application-body.application-mail #mail-body {
  padding: 0;
  background: none;
  box-shadow: none;
}
}
.application-body.application-mail .mail-draft-state:empty {
  display: none;
}
@container screen style(--screen-small: true) {
.application-body.application-mail .pat-toolbar .pat-button.save-draft,
.application-body.application-mail .pat-toolbar .pat-button.send {
  position: relative;
  box-sizing: border-box;
  width: var(--pat-toolbar-button-height);
  min-width: var(--pat-toolbar-button-height);
  height: var(--pat-toolbar-button-height);
  padding: 0;
  overflow: hidden;
  text-indent: -1000em;
  text-align: left;
}
}
@container screen style(--screen-small: true) {
body[dir=rtl] .application-body.application-mail .pat-toolbar .pat-button.save-draft,
body[dir=rtl] .application-body.application-mail .pat-toolbar .pat-button.send {
  text-align: right;
}
}
@container screen style(--screen-small: true) {
.application-body.application-mail .pat-toolbar .pat-button.send > svg.kik-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-indent: 0;
  width: var(--kik-toolbar-icon-size);
  height: var(--kik-toolbar-icon-size);
}
}
.application-body.application-mail #mail-compose-toolbar .toolbar-section.quick-functions {
  min-width: 0;
}
.application-body.application-mail #mail-compose-toolbar .toolbar-section.quick-functions > .pat-button:not(.save-draft) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container screen style(--screen-small: true) {
.application-body.application-mail #mail-compose-toolbar .toolbar-section.quick-functions > .pat-button:not(.save-draft).send {
  min-width: var(--pat-toolbar-button-height);
}
}
.application-body.application-mail .mail-byline-cc {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
.application-body.application-mail .mail-byline-cc:hover,
.application-body.application-mail .mail-byline-cc:focus {
  text-decoration: underline;
}
}
.application-body.application-mail .mail-panel {
  --modal-panel-width-large: min(980px, 95%);
  --mail-panel-side: min(
            var(--modal-panel-width-medium),
            100cqw - 2 * var(--modal-panel-gutter-inline)
        );
}
@container screen style(--screen-large: true) {
.application-body.application-mail .mail-panel {
  --mail-panel-side: min(
                980px,
                95cqw,
                100cqw - 2 * var(--modal-panel-gutter-inline)
            );
}
}
@container screen style(--screen-small: false) {
.application-body.application-mail .mail-panel .mail-compose-panel-body {
  min-height: min(60vh, 620px);
}
}
@container screen style(--screen-small: false) {
.application-body.application-mail .mail-panel > .modal-panel-contents {
  height: var(--mail-panel-side);
}
}
@container screen style(--screen-small: false) {
.application-body.application-mail .pat-modal-panel.mail-panel {
  width: var(--mail-panel-side);
}
}
.application-body.application-mail .mail-panel > .modal-panel-contents {
  --mail-body-background: var(--kik-mail-frame-ground, var(--colour-base-background));
}
@container screen style(--screen-small: false) {
.application-body.application-mail .mail-message-panel-body .pat-grid-list {
  display: grid;
  grid-column-gap: 14px;
  grid-template-columns: 70px auto;
}
}
.application-body.application-mail .mail-byline-date-mobile {
  display: none;
}
@container screen style(--screen-small: true) {
.application-body.application-mail .mail-message-panel-body .message-headers.pat-grid-list {
  display: none;
}
}
@container screen style(--screen-small: true) {
.application-body.application-mail .mail-byline-date-mobile {
  display: inline;
}
}
@container screen style(--screen-small: true) {
.application-body.application-mail .mail-message-panel-body .quaive-page-head {
  margin-bottom: 0.75rem;
}
}
@container screen style(--screen-small: true) {
.application-body.application-mail .mail-message-panel-body article.pat-rich.message-body {
  font-size: 1rem;
}
}
.application-body.application-mail .mail-message-panel-body .mail-recipient {
  text-decoration: none;
}
@media (hover: hover) {
.application-body.application-mail .mail-message-panel-body .mail-recipient:hover {
  text-decoration: underline;
}
}
.application-body.application-mail .mail-message-panel-body .mail-recipient:focus {
  text-decoration: underline;
}
@container screen style(--screen-large: false) {
.application-body.application-mail .mail-panel #mail-compose-toolbar .pat-button.save-draft {
  position: relative;
  box-sizing: border-box;
  width: var(--pat-toolbar-button-height);
  min-width: var(--pat-toolbar-button-height);
  height: var(--pat-toolbar-button-height);
  padding: 0;
  overflow: hidden;
  text-indent: -1000em;
  text-align: left;
}
}
@container screen style(--screen-large: false) {
body[dir=rtl] .application-body.application-mail .mail-panel #mail-compose-toolbar .pat-button.save-draft {
  text-align: right;
}
}
@container screen style(--screen-large: false) {
.application-body.application-mail .mail-panel #mail-compose-toolbar .pat-button.save-draft > svg.kik-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--kik-toolbar-icon-size);
  height: var(--kik-toolbar-icon-size);
  text-indent: 0;
}
}
.application-body.application-mail #mail-compose-toolbar .toolbar-section.micro-navigation:has(> .editor-toolbar.tiptap) > .toolbar-title {
  display: none;
}
.application-body.application-mail #mail-body.quaive-page-module-edit {
  --pat-well-padding: 0;
  --pat-well-padding-top: 0;
  --pat-well-padding-right: 0;
  --pat-well-padding-bottom: 0;
  --pat-well-padding-left: 0;
  --pat-well-box-shadow: none;
  --pat-well-background-colour: transparent;
  --pat-surface-backdrop-filter: none;
  backdrop-filter: none;
}
.application-body.application-mail:not(:has(.mail-bcc-state:checked)) .mail-bcc-row {
  display: none;
}
.application-body.application-mail #mail-compose .attachments-value input[type="file"][hidden] {
  display: none;
}
.application-body.application-mail #mail-compose > .attachments-value:not(:has(.pat-table)) {
  display: contents;
}
.application-body.application-mail .mail-thread-well {
  --pat-well-header-text-colour: color-mix(in srgb,
            var(--body-font-colour) 50%, transparent);
  --pat-well-well-header-font-size: 20px;
}
.application-body.application-mail .mail-thread-well .well-header .mail-byline-date {
  opacity: 0.5;
  font-weight: normal;
}
.application-body.application-mail [data-flag="red"] {
  --mail-flag-colour: var(--mail-flag-red);
}
.application-body.application-mail [data-flag="orange"] {
  --mail-flag-colour: var(--mail-flag-orange);
}
.application-body.application-mail [data-flag="yellow"] {
  --mail-flag-colour: var(--mail-flag-yellow);
}
.application-body.application-mail [data-flag="green"] {
  --mail-flag-colour: var(--mail-flag-green);
}
.application-body.application-mail [data-flag="blue"] {
  --mail-flag-colour: var(--mail-flag-blue);
}
.application-body.application-mail [data-flag="purple"] {
  --mail-flag-colour: var(--mail-flag-purple);
}
.application-body.application-mail .mail-flags-well li[data-flag] > a > svg.kik-icon,
.application-body.application-mail .mail-flags-well li[data-flag] > a > svg.kik-icon *,
.application-body.application-mail .mail-flag-mark[data-flag] svg.kik-icon,
.application-body.application-mail .mail-flag-mark[data-flag] svg.kik-icon *,
.application-body.application-mail .mail-flag-row .mail-flag-pick[data-flag] svg.kik-icon,
.application-body.application-mail .mail-flag-row .mail-flag-pick[data-flag] svg.kik-icon * {
  color: var(--mail-flag-colour);
  stroke: var(--mail-flag-colour);
  fill: var(--mail-flag-colour);
}
.application-body.application-mail .mail-flags-well li[data-flag] > a.current > svg.kik-icon,
.application-body.application-mail .mail-flags-well li[data-flag] > a.current > svg.kik-icon * {
  stroke: #fff;
}
.application-body.application-mail .mail-flag-mark {
  display: inline-block;
  vertical-align: -0.15em;
}
.application-body.application-mail .mail-flag-mark .kik-icon {
  width: 1em;
  height: 1em;
}
.application-body.application-mail .mail-flag-row .mail-flag-picks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}
.application-body.application-mail .mail-flag-row .mail-flag-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid transparent;
  color: var(--mail-flag-colour, inherit);
}
.application-body.application-mail .mail-flag-row .mail-flag-pick svg.kik-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.application-body.application-mail .mail-flag-row .mail-flag-pick.current {
  border-color: currentColor;
}
@media (hover: hover) {
.application-body.application-mail .mail-flag-row .mail-flag-pick:hover {
  background: var(--pat-toolbar-hover-background, var(--pat-surface-background-colour-hover));
}
}
.application-body.application-mail .mail-flag-row .mail-flag-pick.mail-flag-none svg.kik-icon {
  color: inherit;
  stroke: currentColor;
  fill: none;
}