/* 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; }
}