/* Mailocity webmail, on top of Bootstrap 5.3 and site.css. */
html, body { height: 100%; }
.mail-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.mail-top { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.mail-top .search { max-width: 32rem; }
.mail-body { display: flex; flex: 1; min-height: 0; }
.mail-nav { width: 14rem; flex-shrink: 0; overflow-y: auto; background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); }
.mail-nav .nav-link { color: var(--bs-body-color); border-radius: .375rem; display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; }
.mail-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.mail-nav .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.mail-nav .count { margin-left: auto; font-size: .8rem; font-weight: 600; }
.mail-list { width: 24rem; flex-shrink: 0; overflow-y: auto; background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); }
.mail-row { display: block; text-decoration: none; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--bs-border-color); background: transparent; color: inherit; padding: .6rem .9rem; }
.mail-row:hover { background: var(--bs-tertiary-bg); }
.mail-row.active { background: var(--bs-primary-bg-subtle); }
.mail-row.unread .who, .mail-row.unread .subj { font-weight: 700; }
.mail-row .who, .mail-row .subj, .mail-row .prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row .prev { font-size: .85rem; color: var(--bs-secondary-color); }
.mail-row .when { font-size: .8rem; color: var(--bs-secondary-color); flex-shrink: 0; }
.mail-row .unread-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-primary); display: inline-block; flex-shrink: 0; }
.mail-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bs-body-bg); }
.mail-toolbar { border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0; }
.mail-head .addr { overflow-wrap: anywhere; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; margin: 0; }
.mail-frame { flex: 1; width: 100%; min-height: 24rem; border: 0; background: #fff; }
.mail-empty { color: var(--bs-secondary-color); }
.starred { color: #f59f00; }
.compose textarea { min-height: 16rem; font-family: inherit; flex: 1; resize: vertical; }
.signin { max-width: 24rem; }
.only-mobile { display: none !important; }
@media (max-width: 991.98px) {
  .mail-nav { display: none; }
  .mail-nav.open { display: block; position: absolute; z-index: 1030; top: 3.5rem; bottom: 0; left: 0; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); }
  .mail-body { position: relative; }
  .only-mobile { display: inline-flex !important; }
}
@media (max-width: 767.98px) {
  .mail-list { width: 100%; border-right: 0; }
  .mail-shell.reading .mail-list { display: none; }
  .mail-shell:not(.reading) .mail-pane { display: none; }
}

/* A message's raw source: text only, wrapped so long header lines fit. */
.mail-source { font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bs-tertiary-bg); border-radius: .375rem; padding: .75rem; }

/* Conversations: a count on the list row, and messages stacked in the
   reading pane, read ones folded to a line. */
.thread-count { font-size: .75rem; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 0 .4rem; flex-shrink: 0; }
.mail-card { display: flex; flex-direction: column; border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0; }
.mail-thread .mail-frame { flex: none; height: 32rem; min-height: 8rem; resize: vertical; }
.mail-fold { display: flex; align-items: baseline; gap: .75rem; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; padding: .6rem 1rem; }
.mail-fold:hover { background: var(--bs-tertiary-bg); }
.mail-fold .who { font-weight: 600; flex-shrink: 0; max-width: 40%; }
.mail-fold .prev { flex: 1; min-width: 0; color: var(--bs-secondary-color); }
.mail-fold .who, .mail-fold .prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-fold .when { flex-shrink: 0; font-size: .8rem; color: var(--bs-secondary-color); }
.fold-toggle { cursor: pointer; }
.compose .rich-area, .rich-area { min-height: 16rem; overflow-y: auto; white-space: normal; }
.sig-rich .rich-area { min-height: 5rem; }
.rich-area:focus { outline: none; }
.rich-area p, .mail-preview p { margin: 0 0 .5rem; }
.rich-area blockquote, .mail-preview blockquote { border-left: 3px solid var(--bs-border-color); padding-left: .75rem; margin: 0 0 .5rem; color: var(--bs-secondary-color); }
.rich-area [data-signature] { color: var(--bs-secondary-color); }
.rich-bar .btn { min-width: 2rem; }
.mail-preview { max-height: 20rem; overflow-y: auto; }
.brand-logo { border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.brand-sm { width: 1.25rem; height: 1.25rem; }
.brand-md { width: 2.5rem; height: 2.5rem; }