:root {
  --arx-bg: #f6f8fc;
  --arx-bg-2: #ffffff;
  --arx-panel: rgba(255, 255, 255, .84);
  --arx-panel-solid: #ffffff;
  --arx-panel-soft: #f1f4fb;
  --arx-text: #0f172a;
  --arx-muted: #556079;
  --arx-blue: #2563eb;
  --arx-green: #22c55e;
  --arx-line: rgba(15, 23, 42, .10);
  --arx-shadow: 0 18px 55px rgba(15, 23, 42, .14);
  --arx-shadow-soft: 0 12px 35px rgba(15, 23, 42, .08);
  --arx-radius: 18px;
}

html {
  background: var(--arx-bg);
}

body {
  color: var(--arx-text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(900px 700px at 80% 10%, rgba(34, 197, 94, .12), transparent 55%),
    linear-gradient(180deg, var(--arx-bg), var(--arx-bg-2));
}

.arx-grid,
.arx-glow,
.arx-ribbon {
  pointer-events: none;
}

.arx-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, .55), transparent 70%);
  opacity: .18;
}

.arx-glow {
  position: fixed;
  inset: -220px;
  z-index: 0;
  background:
    radial-gradient(540px 540px at var(--arx-mx, 50%) var(--arx-my, 18%), rgba(34, 197, 94, .13), transparent 60%),
    radial-gradient(720px 720px at var(--arx-mx, 50%) var(--arx-my, 18%), rgba(37, 99, 235, .12), transparent 65%);
  opacity: .9;
}

body:not(.task-login) .arx-grid {
  opacity: .08;
}

body:not(.task-login) .arx-glow {
  opacity: .22;
}

#layout,
#print-layout {
  position: relative;
  z-index: 1;
}

.arx-ribbon {
  position: fixed;
  left: -10vw;
  right: -10vw;
  top: 88px;
  z-index: 0;
  transform: rotate(-2deg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  white-space: nowrap;
  color: rgba(37, 99, 235, .12);
  animation: arx-drift 32s linear infinite;
}

@keyframes arx-drift {
  from { translate: 0 0; }
  to { translate: -420px 0; }
}

.arx-intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f6f8fc, #ffffff);
  transition: opacity .55s ease, visibility .55s ease;
}

.arx-intro.done {
  opacity: 0;
  visibility: hidden;
}

.arx-intro-card {
  max-width: min(420px, calc(100vw - 36px));
  padding: 28px;
  text-align: center;
}

.arx-rune-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--arx-line);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(34, 197, 94, .16));
  box-shadow: var(--arx-shadow);
  color: var(--arx-blue);
  font-size: 2.1rem;
  font-weight: 950;
}

.arx-intro h2 {
  margin: 0 0 8px;
  color: var(--arx-text);
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
}

.arx-intro p {
  margin: 0;
  color: var(--arx-muted);
  font-weight: 750;
}

.arx-loader {
  width: min(340px, 74vw);
  height: 8px;
  margin: 22px auto 16px;
  overflow: hidden;
  border: 1px solid var(--arx-line);
  border-radius: 999px;
  background: var(--arx-panel-soft);
}

.arx-loader span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green));
  animation: arx-load 1.25s ease-in-out infinite;
}

@keyframes arx-load {
  0% { translate: -110% 0; }
  100% { translate: 250% 0; }
}

.arx-skip {
  border: 0;
  background: transparent;
  color: var(--arx-blue);
  font-weight: 800;
  cursor: pointer;
  padding: 10px;
}

.task-login #layout {
  min-height: 100vh;
  display: grid;
}

.task-login #layout-content {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 72px 22px;
  text-align: left;
}

.arx-login-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .78fr);
  gap: 34px;
  align-items: center;
}

.arx-login-copy {
  padding: 18px 0;
}

.arx-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(34, 197, 94, .20);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(37, 99, 235, .10));
  color: #166534;
  font-size: .9rem;
  font-weight: 900;
}

.arx-login-copy h2 {
  margin: 0 0 18px;
  max-width: 760px;
  color: var(--arx-text);
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.arx-login-copy p {
  max-width: 720px;
  margin: 0 0 24px;
  color: var(--arx-muted);
  font-size: clamp(1.04rem, 2vw, 1.25rem);
  line-height: 1.7;
}

.arx-login-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.arx-login-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--arx-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .70);
  color: var(--arx-muted);
  font-weight: 750;
}

.arx-status-panel,
.arx-login-panel {
  border: 1px solid var(--arx-line);
  border-radius: var(--arx-radius);
  background: var(--arx-panel);
  box-shadow: var(--arx-shadow);
  backdrop-filter: blur(12px);
}

.arx-status-panel {
  max-width: 520px;
  overflow: hidden;
}

.arx-status-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--arx-line);
  background: rgba(15, 23, 42, .04);
}

.arx-status-top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

.arx-status-top span:nth-child(2) {
  background: #f59e0b;
}

.arx-status-top span:nth-child(3) {
  background: var(--arx-green);
}

.arx-status-top strong {
  margin-left: auto;
  color: var(--arx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .85rem;
}

.arx-status-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  color: var(--arx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92rem;
}

.arx-status-row:last-child {
  border-bottom: 0;
}

.arx-status-row b {
  color: #15803d;
}

.arx-login-panel {
  padding: 26px;
  overflow: hidden;
}

.task-login #logo {
  position: static;
  display: block;
  max-width: 220px;
  max-height: 82px;
  margin: 0 auto 20px;
}

.task-login #login-form {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0;
}

.task-login .form-control,
.task-login input[type="text"],
.task-login input[type="password"] {
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.task-login .form-control:focus,
.task-login input[type="text"]:focus,
.task-login input[type="password"]:focus {
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

#rcmloginsubmit,
.button.mainaction,
.btn-primary,
button.btn-primary {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green)) !important;
  color: #fff !important;
  font-weight: 950;
  box-shadow: 0 14px 35px rgba(37, 99, 235, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

#rcmloginsubmit:hover,
.button.mainaction:hover,
.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(37, 99, 235, .28);
}

#login-footer {
  color: var(--arx-muted);
}

#login-footer > div {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: var(--arx-panel-soft);
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content .header,
#layout-content,
#layout > .header,
.listbox,
.popupmenu,
.ui-dialog,
.records-table,
.messagelist,
.listing {
  border-color: var(--arx-line);
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
  background-color: rgba(255, 255, 255, .82);
}

#layout-menu {
  box-shadow: 12px 0 35px rgba(15, 23, 42, .06);
}

#layout-content .header,
#layout > .header,
.header {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, .76);
}

.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td,
.treelist li.selected > a,
.folderlist li.selected > a {
  background: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(34, 197, 94, .10)) !important;
  color: var(--arx-text) !important;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tr:hover td,
.treelist li:hover > a,
.folderlist li:hover > a {
  background-color: rgba(37, 99, 235, .06);
}

a,
.link,
.btn-link {
  color: var(--arx-blue);
}

.toolbar a.button:hover,
.toolbar button:hover,
.menu a:hover {
  color: var(--arx-blue);
}

.badge,
.floating-action-buttons a.button {
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green));
}

/* Arx Secure Mail Workspace */

body:not(.task-login) {
  background:
    radial-gradient(960px 640px at 18% -12%, rgba(37, 99, 235, .11), transparent 62%),
    radial-gradient(720px 520px at 88% 0%, rgba(34, 197, 94, .10), transparent 58%),
    linear-gradient(180deg, #f6f8fc, #ffffff 48%, #f8fafc);
}

body:not(.task-login) #layout {
  background: transparent;
}

body:not(.task-login) #layout::after {
  content: "TLS aktiv  ·  IMAP tilkoblet  ·  Sikker økt  ·  Arx Digitalis Webmail";
  position: fixed;
  right: 18px;
  bottom: 10px;
  z-index: 8;
  max-width: calc(100vw - 36px);
  padding: 7px 11px;
  border: 1px solid rgba(37, 99, 235, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--arx-muted);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  backdrop-filter: blur(12px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  pointer-events: none;
}

body:not(.task-login) #layout-menu {
  width: 82px;
  border-right: 1px solid rgba(15, 23, 42, .08);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(31, 41, 55, .88)),
    radial-gradient(320px 240px at 50% 0%, rgba(37, 99, 235, .08), transparent 64%);
  box-shadow: 16px 0 42px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px);
}

body:not(.task-login) #layout-menu .popover-header {
  min-height: 72px;
  border-bottom: 1px solid var(--arx-line);
  background: transparent;
}

body:not(.task-login) #layout-menu #logo {
  max-width: 58px;
  max-height: 42px;
  opacity: .96;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, .20));
}

body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu .button {
  min-height: 56px;
  margin: 4px 6px;
  border-radius: 16px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 850;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu .button:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  transform: translateY(-1px);
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu .selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, .94), rgba(34, 197, 94, .88));
  color: #fff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .24);
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .80);
  box-shadow: var(--arx-shadow-soft);
  backdrop-filter: blur(12px);
}

body:not(.task-login) #layout-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(246, 248, 252, .78)),
    radial-gradient(420px 340px at 12% 0%, rgba(34, 197, 94, .06), transparent 70%);
}

body:not(.task-login) .header,
body:not(.task-login) #messagelist-header {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
  backdrop-filter: blur(16px);
}

body:not(.task-login) .header-title,
body:not(.task-login) .username {
  color: var(--arx-text);
  font-weight: 850;
  letter-spacing: 0;
}

#mailboxlist li a,
.folderlist li a,
.treelist li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  margin: 2px 8px;
  padding: 7px 11px;
  border-radius: 12px;
  color: var(--arx-muted);
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

#mailboxlist li,
.folderlist li,
.treelist li {
  min-height: 0 !important;
  line-height: 1.2 !important;
}

#mailboxlist li a,
.folderlist li a,
.treelist li a {
  min-height: 28px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.2 !important;
}

#mailboxlist li a:hover,
.folderlist li a:hover,
.treelist li a:hover {
  background: rgba(37, 99, 235, .07) !important;
  color: var(--arx-text) !important;
  transform: translateX(2px);
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
.treelist li.selected > a {
  background: linear-gradient(90deg, rgba(37, 99, 235, .14), rgba(34, 197, 94, .11)) !important;
  color: var(--arx-text) !important;
  box-shadow: inset 4px 0 0 var(--arx-blue), 0 8px 22px rgba(37, 99, 235, .10);
  font-weight: 850;
}

#mailboxlist ul a,
.folderlist ul a,
.treelist ul a {
  min-height: 26px !important;
  font-size: 12px;
}

#mailboxlist ul ul a,
.folderlist ul ul a,
.treelist ul ul a {
  color: rgba(85, 96, 121, .88);
  font-size: 11.5px;
}

#mailboxlist .unreadcount,
.folderlist .unreadcount,
.treelist .unreadcount,
.listing .count {
  min-width: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green));
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
  font-weight: 900;
}

.quota-widget,
#quotadisplay {
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
  color: var(--arx-muted);
}

#mailsearchform,
.searchbar {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(12px);
}

body:not(.task-login) input,
body:not(.task-login) textarea,
body:not(.task-login) select,
body:not(.task-login) .form-control,
body:not(.task-login) .custom-select {
  border-color: rgba(15, 23, 42, .12);
  border-radius: 13px;
  background-color: rgba(255, 255, 255, .86);
  color: var(--arx-text);
  box-shadow: none;
}

body:not(.task-login) input:focus,
body:not(.task-login) textarea:focus,
body:not(.task-login) select:focus,
body:not(.task-login) .form-control:focus,
body:not(.task-login) .custom-select:focus {
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .11);
}

.messagelist,
.records-table {
  background: rgba(255, 255, 255, .72);
}

.messagelist thead th,
.records-table thead th,
.listing thead th {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(246, 248, 252, .86);
  color: var(--arx-muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.messagelist tr,
.records-table tr,
.listing li {
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.messagelist tr td,
.records-table tr td {
  border-color: rgba(15, 23, 42, .06);
}

.messagelist tr:hover td,
.records-table tr:hover td {
  background: rgba(37, 99, 235, .055) !important;
}

.messagelist tr.selected td,
.records-table tr.selected td,
.listing li.selected {
  background: linear-gradient(90deg, rgba(37, 99, 235, .13), rgba(34, 197, 94, .10)) !important;
  box-shadow: inset 4px 0 0 var(--arx-blue);
}

.messagelist tr.unread td,
.records-table tr.unread td {
  color: var(--arx-text);
  font-weight: 850;
}

.messagelist tr.unread td:first-child,
.records-table tr.unread td:first-child {
  box-shadow: inset 4px 0 0 var(--arx-green);
}

.messagelist tr.flagged td,
.messagelist tr.flagged td.subject {
  color: #166534;
}

.toolbar a,
.toolbar .button,
.toolbar button,
a.button,
.button,
.btn {
  border-radius: 13px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.toolbar a:hover,
.toolbar .button:hover,
.toolbar button:hover,
a.button:hover,
.button:hover,
.btn:hover {
  transform: translateY(-1px);
}

.toolbar .compose,
.floating-action-buttons a.compose,
.formbuttons .send,
.btn-primary,
.button.mainaction,
button.mainaction {
  border: 0 !important;
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green)) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .22);
  font-weight: 900;
}

body:not(.task-login) .floating-action-buttons a.compose {
  width: 70px;
  min-height: 58px;
  margin: 8px 6px;
  border-radius: 17px;
  box-shadow: 0 18px 38px rgba(37, 99, 235, .26);
}

body:not(.task-login) .floating-action-buttons a.compose .inner {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
}

#messagelist tbody:empty {
  display: block;
}

#messagelist tbody:empty::after {
  content: "Mailbox is empty";
  display: grid;
  place-items: center;
  height: 120px;
  margin: 18px;
  border: 1px dashed rgba(37, 99, 235, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(34, 197, 94, .06));
  color: var(--arx-muted);
  font-weight: 850;
}

.toolbar .delete:not(.disabled),
.button.delete:not(.disabled),
.popupmenu .delete.active {
  color: #dc2626 !important;
}

.popupmenu,
.ui-dialog,
.ui-widget-content,
.menu.toolbar .popupmenu {
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .17) !important;
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.popupmenu .listing li > a,
.popupmenu .menu li > a,
.popupmenu a {
  border-radius: 10px;
}

.popupmenu .listing li > a:hover,
.popupmenu .menu li > a:hover,
.popupmenu a:hover {
  background: rgba(37, 99, 235, .08) !important;
  color: var(--arx-blue) !important;
}

.ui-dialog .ui-dialog-titlebar {
  border-color: rgba(15, 23, 42, .08);
  background: linear-gradient(90deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .08));
  color: var(--arx-text);
  font-weight: 900;
}

body.task-mail.action-show #layout-content,
body.task-mail.action-preview #layout-content,
body.task-mail.action-none #layout-content,
body.task-mail.action-none #messagecontframe {
  background: rgba(255, 255, 255, .78);
}

.frame-content {
  padding: 20px;
  background:
    radial-gradient(620px 380px at 100% 0%, rgba(37, 99, 235, .06), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 250, 252, .86));
}

#message-header {
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--arx-shadow-soft);
}

#message-header::before {
  content: "Secure document";
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .13), rgba(37, 99, 235, .08));
  color: #166534;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

#message-header > .subject,
#message-header .subject {
  color: var(--arx-text);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.2;
}

#message-header .header {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 15px;
  background: rgba(246, 248, 252, .72);
  box-shadow: none;
}

#message-content {
  gap: 16px;
}

#message-content .leftcol,
#message-content .rightcol,
#messagebody,
#message-objects,
.headers-table {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
}

#messagebody {
  padding: 18px;
  color: var(--arx-text);
  line-height: 1.65;
}

.attachmentslist li,
.attachmentslist .attachment,
#attachment-list li {
  margin: 6px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 13px;
  background: rgba(246, 248, 252, .76);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

body.task-mail.action-compose #layout-content,
body.task-mail.action-compose #layout-sidebar {
  background: rgba(255, 255, 255, .82);
}

#compose-content {
  background:
    radial-gradient(620px 360px at 100% 0%, rgba(34, 197, 94, .07), transparent 62%),
    rgba(255, 255, 255, .80);
}

#compose-headers,
#composebodycontainer,
#compose-options,
#compose-attachments {
  margin: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--arx-shadow-soft);
}

#compose-headers label,
#compose-options label {
  color: var(--arx-muted);
  font-weight: 850;
}

#compose-subject,
#composebody,
#compose-headers input,
#compose-headers textarea,
#compose-headers .form-control {
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
}

#composebody {
  min-height: 360px;
  padding: 16px;
  line-height: 1.6;
}

#compose-attachments.file-upload {
  border-style: dashed;
  border-color: rgba(37, 99, 235, .22);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(34, 197, 94, .06)),
    rgba(255, 255, 255, .82);
}

#compose-attachments .upload-form::before {
  content: "Sikker opplasting";
  display: inline-flex;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  color: var(--arx-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

body:not(.task-login) .iframe-wrapper {
  background:
    radial-gradient(720px 420px at 50% 8%, rgba(37, 99, 235, .045), transparent 62%),
    rgba(255, 255, 255, .58);
}

.arx-empty-note {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  color: rgba(37, 99, 235, .18);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 950;
  pointer-events: none;
}

.arx-empty-note::after {
  content: "Velg en melding";
  position: absolute;
  top: calc(50% + 64px);
  color: rgba(85, 96, 121, .62);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 1rem;
  font-weight: 850;
}

/* Arx Personalization Layer */

body:not(.task-login) #taskmenu .arx-home-link {
  min-height: 52px;
  margin: 4px 6px;
  border: 1px solid rgba(34, 197, 94, .26);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

body:not(.task-login) #taskmenu .arx-home-link::before {
  content: "\f0ac";
  color: #86efac;
}

body:not(.task-login) #taskmenu .arx-home-link:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, .78), rgba(34, 197, 94, .74));
  color: #fff;
  box-shadow: 0 14px 32px rgba(34, 197, 94, .18);
}

body:not(.task-login) #taskmenu .compose::before {
  content: "\f303";
}

body:not(.task-login) #taskmenu .mail::before {
  content: "\f0e0";
}

body:not(.task-login) #taskmenu .contacts::before {
  content: "\f2bb";
}

body:not(.task-login) #taskmenu .settings::before {
  content: "\f013";
}

body:not(.task-login) #taskmenu .theme::before {
  content: "\f186";
}

body:not(.task-login) #taskmenu .about::before {
  content: "\f05a";
}

body:not(.task-login) #taskmenu .logout::before {
  content: "\f2f5";
}

#mailtoolbar {
  gap: 7px;
  padding-inline: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(246, 248, 252, .70)),
    radial-gradient(540px 180px at 12% 0%, rgba(37, 99, 235, .06), transparent 68%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

#mailtoolbar a,
#mailtoolbar .dropbutton > a {
  min-height: 36px;
  margin: 10px 0;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--arx-muted);
  font-size: 12px;
  font-weight: 850;
}

#mailtoolbar a::before {
  width: 15px;
  margin: 0;
  color: var(--arx-blue);
  font-size: 13px;
}

#mailtoolbar a:not(.disabled):hover {
  border-color: rgba(37, 99, 235, .16);
  background: rgba(37, 99, 235, .07);
  color: var(--arx-text);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .09);
}

#mailtoolbar a.disabled {
  opacity: .42;
}

#mailtoolbar .reply::before {
  content: "\f3e5";
}

#mailtoolbar .reply-all::before {
  content: "\f122";
}

#mailtoolbar .forward::before {
  content: "\f064";
}

#mailtoolbar .delete::before {
  content: "\f2ed";
}

#mailtoolbar .print::before {
  content: "\f02f";
}

#mailtoolbar .markmessage::before {
  content: "\f02b";
}

#mailtoolbar .more::before {
  content: "\f141";
}

#mailtoolbar .compose::before {
  content: "\f303";
}

#mailtoolbar .prev::before {
  content: "\f060";
}

#mailtoolbar .next::before {
  content: "\f061";
}

#mailtoolbar .dropbutton {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 13px;
}

#mailtoolbar .dropbutton > a.dropdown {
  min-width: 28px;
  padding-inline: 6px;
}

#mailtoolbar .dropbutton > a.dropdown::before {
  content: "\f107";
}

.popupmenu::before,
.ui-dialog::before {
  content: "Arx Digitalis";
  display: block;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  background: linear-gradient(90deg, rgba(37, 99, 235, .07), rgba(34, 197, 94, .07));
  color: var(--arx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

.popupmenu .listing li > a::before,
.popupmenu .menu li > a::before {
  color: var(--arx-blue);
}

.popupmenu .reply a::before,
.popupmenu a.reply::before {
  content: "\f3e5";
}

.popupmenu .forward a::before,
.popupmenu a.forward::before {
  content: "\f064";
}

.popupmenu .print a::before,
.popupmenu a.print::before {
  content: "\f02f";
}

.popupmenu .source a::before,
.popupmenu a.source::before {
  content: "\f121";
}

.popupmenu .move a::before,
.popupmenu a.move::before,
.popupmenu .copy a::before,
.popupmenu a.copy::before {
  content: "\f07b";
}

.popupmenu .read a::before,
.popupmenu a.read::before {
  content: "\f06e";
}

.popupmenu .unread a::before,
.popupmenu a.unread::before {
  content: "\f0e0";
}

.popupmenu .flag a::before,
.popupmenu a.flag::before {
  content: "\f024";
}

body.task-settings #layout-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(246, 248, 252, .78)),
    radial-gradient(460px 300px at 0% 0%, rgba(37, 99, 235, .075), transparent 70%);
}

body.task-settings #settings-menu {
  padding: 10px 8px;
}

body.task-settings #settings-menu li,
body.task-settings #settings-menu li a {
  border: 0;
}

body.task-settings #settings-menu li a,
body.task-settings #settings-menu .listitem {
  min-height: 46px;
  margin: 5px 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 15px;
  background: rgba(255, 255, 255, .58);
  color: var(--arx-muted);
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

body.task-settings #settings-menu li a::before,
body.task-settings #settings-menu .listitem::before {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(34, 197, 94, .12));
  color: var(--arx-blue);
  font-family: Icons;
  font-weight: 900;
}

body.task-settings #settings-menu li.selected > a,
body.task-settings #settings-menu li.selected {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(90deg, rgba(37, 99, 235, .14), rgba(34, 197, 94, .11));
  color: var(--arx-text);
  box-shadow: inset 4px 0 0 var(--arx-green), 0 14px 32px rgba(37, 99, 235, .11);
}

body.task-settings #settings-menu .preferences a::before,
body.task-settings #settings-menu a.preferences::before {
  content: "\f108";
}

body.task-settings #settings-menu .folders a::before,
body.task-settings #settings-menu a.folders::before {
  content: "\f07c";
}

body.task-settings #settings-menu .identities a::before,
body.task-settings #settings-menu a.identities::before {
  content: "\f2bb";
}

body.task-settings #settings-menu .responses a::before,
body.task-settings #settings-menu a.responses::before {
  content: "\f3e5";
}

body.task-settings #settings-menu .password a::before,
body.task-settings #settings-menu a.password::before {
  content: "\f023";
}

body.task-settings #settings-menu .filters a::before,
body.task-settings #settings-menu a.filters::before,
body.task-settings #settings-menu .filter a::before,
body.task-settings #settings-menu a.filter::before {
  content: "\f0b0";
}

body.task-settings #layout-content .header,
body.task-settings .formcontent,
body.task-settings .frame-content {
  background:
    radial-gradient(620px 340px at 100% 0%, rgba(34, 197, 94, .065), transparent 64%),
    rgba(255, 255, 255, .82);
}

body.task-settings fieldset,
body.task-settings .propform,
body.task-settings .boxcontent,
body.task-settings .table-widget,
body.task-settings .skinselection .skinthumbnail,
#identities-table,
#responses-table,
#sections-table,
#folders-table {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  box-shadow: var(--arx-shadow-soft);
}

body.task-settings fieldset legend {
  width: auto;
  padding: 0 10px;
  color: var(--arx-text);
  font-size: 1rem;
  font-weight: 900;
}

body.task-settings .formbuttons,
.formbuttons {
  padding: 14px;
  border-top: 1px solid rgba(15, 23, 42, .07);
  background: rgba(246, 248, 252, .70);
}

body.task-settings .formbuttons .button,
body.task-settings .formbuttons button,
.formbuttons .button.mainaction,
.formbuttons button.mainaction {
  min-height: 38px;
  border-radius: 13px;
  font-weight: 900;
}

#identities-table tbody tr,
#responses-table tbody tr,
#folders-table tbody tr,
#sections-table tbody tr {
  transition: background-color .18s ease, box-shadow .18s ease;
}

#identities-table tbody tr:hover td,
#responses-table tbody tr:hover td,
#folders-table tbody tr:hover td,
#sections-table tbody tr:hover td {
  background: rgba(37, 99, 235, .055);
}

#mailboxlist li.inbox > a::before,
.folderlist li.inbox > a::before {
  content: "\f01c";
}

#mailboxlist li.drafts > a::before,
.folderlist li.drafts > a::before {
  content: "\f303";
}

#mailboxlist li.sent > a::before,
.folderlist li.sent > a::before {
  content: "\f1d8";
}

#mailboxlist li.junk > a::before,
.folderlist li.junk > a::before {
  content: "\f071";
  color: #c2410c;
}

#mailboxlist li.trash > a::before,
.folderlist li.trash > a::before {
  content: "\f2ed";
  color: #dc2626;
}

#mailboxlist li a::before,
.folderlist li a::before,
.treelist li a::before {
  width: 18px;
  flex: 0 0 18px;
  color: rgba(37, 99, 235, .70);
}

#messagelist tbody:empty::after {
  content: "Mappen er tom";
}

.ui.alert,
#messagestack div,
.notices div {
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .12);
  color: var(--arx-text);
  backdrop-filter: blur(14px);
}

.ui.alert.success,
#messagestack div.confirmation {
  border-color: rgba(34, 197, 94, .22);
  background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(255, 255, 255, .92));
}

.ui.alert.error,
#messagestack div.error {
  border-color: rgba(220, 38, 38, .22);
  background: linear-gradient(135deg, rgba(220, 38, 38, .10), rgba(255, 255, 255, .92));
}

/* Arx Full System Cohesion */

#messagelist-header .toolbar.menu,
#layout-content > .header .toolbar.menu,
#mailtoolbar,
#messagetoolbar,
#folderstoolbar,
#identitiestoolbar,
#responsestoolbar,
#addressbooktoolbar {
  gap: 7px;
  align-items: center;
}

#messagelist-header .toolbar.menu a,
#messagelist-header > a.refresh,
#layout-content > .header .toolbar.menu a,
#layout-content > .header .toolbar.menu button,
#mailtoolbar a,
#messagetoolbar a,
#folderstoolbar a,
#identitiestoolbar a,
#responsestoolbar a,
#addressbooktoolbar a,
.arx-command-button {
  min-height: 36px;
  margin: 8px 1px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .58);
  color: var(--arx-muted);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

#messagelist-header .toolbar.menu a::before,
#messagelist-header > a.refresh::before,
#layout-content > .header .toolbar.menu a::before,
#mailtoolbar a::before,
#messagetoolbar a::before,
#folderstoolbar a::before,
#identitiestoolbar a::before,
#responsestoolbar a::before,
#addressbooktoolbar a::before {
  width: 15px;
  margin: 0;
  color: var(--arx-blue);
  font-family: Icons;
  font-size: 13px;
  font-weight: 900;
}

#messagelist-header .toolbar.menu a:not(.disabled):hover,
#messagelist-header > a.refresh:not(.disabled):hover,
#layout-content > .header .toolbar.menu a:not(.disabled):hover,
#mailtoolbar a:not(.disabled):hover,
#messagetoolbar a:not(.disabled):hover,
#folderstoolbar a:not(.disabled):hover,
#identitiestoolbar a:not(.disabled):hover,
#responsestoolbar a:not(.disabled):hover,
#addressbooktoolbar a:not(.disabled):hover,
.arx-command-button:not(.disabled):hover {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .06));
  color: var(--arx-text);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .10);
}

#messagelist-header .toolbar.menu a.disabled,
#messagelist-header > a.refresh.disabled,
#layout-content > .header .toolbar.menu a.disabled,
#mailtoolbar a.disabled,
#messagetoolbar a.disabled,
#folderstoolbar a.disabled,
#identitiestoolbar a.disabled,
#responsestoolbar a.disabled,
#addressbooktoolbar a.disabled {
  opacity: .46;
  box-shadow: none;
}

#messagelist-header .select::before,
#addressbooktoolbar .select::before {
  content: "\f14a";
}

#messagelist-header .threads::before {
  content: "\f086";
}

#messagelist-header .options::before,
#messagelist-header .sidebar-menu::before {
  content: "\f1de";
}

#messagelist-header > a.refresh::before,
#messagelist-header .refresh::before {
  content: "\f021";
}

#mailtoolbar .junk::before,
#mailtoolbar .spam::before {
  content: "\f071";
  color: #c2410c;
}

#mailtoolbar .notjunk::before {
  content: "\f058";
  color: #15803d;
}

#messagetoolbar .options::before {
  content: "\f1de";
}

#messagetoolbar .save::before {
  content: "\f0c7";
}

#messagetoolbar .attach::before {
  content: "\f0c6";
}

#messagetoolbar .signature::before {
  content: "\f5b7";
}

#messagetoolbar .responses::before {
  content: "\f3e5";
}

#messagetoolbar .spellcheck::before {
  content: "\f891";
}

#messagetoolbar .encrypt::before {
  content: "\f023";
}

#folderstoolbar .create::before,
#identitiestoolbar .create::before,
#responsestoolbar .create::before,
#addressbooktoolbar .create::before {
  content: "\f067";
}

#folderstoolbar .delete::before,
#identitiestoolbar .delete::before,
#responsestoolbar .delete::before,
#addressbooktoolbar .delete::before {
  content: "\f2ed";
  color: #dc2626;
}

#folderstoolbar .purge::before {
  content: "\f12d";
  color: #c2410c;
}

#addressbooktoolbar .print::before {
  content: "\f02f";
}

#addressbooktoolbar .search::before {
  content: "\f002";
}

#addressbooktoolbar .import::before {
  content: "\f093";
}

#addressbooktoolbar .export::before {
  content: "\f019";
}

#addressbooktoolbar .more::before {
  content: "\f141";
}

body.task-settings #sections-table {
  margin: 10px;
  overflow: hidden;
}

body.task-settings #sections-table tr,
body.task-settings #sections-table td {
  min-height: 46px;
}

body.task-settings #sections-table tr td.section {
  position: relative;
  padding: 13px 14px 13px 54px;
  color: var(--arx-muted);
  font-weight: 850;
}

body.task-settings #sections-table tr td.section::before {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(34, 197, 94, .12));
  color: var(--arx-blue);
  font-family: Icons;
  font-size: 13px;
  font-weight: 900;
  transform: translateY(-50%);
}

body.task-settings #sections-table tr.general td.section::before,
body.task-settings #sections-table tr.arx-section-general td.section::before {
  content: "\f108";
}

body.task-settings #sections-table tr.mailbox td.section::before,
body.task-settings #sections-table tr.arx-section-mailbox td.section::before {
  content: "\f0e0";
}

body.task-settings #sections-table tr.mailview td.section::before,
body.task-settings #sections-table tr.arx-section-mailview td.section::before {
  content: "\f06e";
}

body.task-settings #sections-table tr.compose td.section::before,
body.task-settings #sections-table tr.arx-section-compose td.section::before {
  content: "\f303";
}

body.task-settings #sections-table tr.addressbook td.section::before,
body.task-settings #sections-table tr.arx-section-addressbook td.section::before {
  content: "\f2bb";
}

body.task-settings #sections-table tr.folders td.section::before,
body.task-settings #sections-table tr.arx-section-folders td.section::before {
  content: "\f07c";
}

body.task-settings #sections-table tr.server td.section::before,
body.task-settings #sections-table tr.arx-section-server td.section::before {
  content: "\f233";
}

body.task-settings #sections-table tr.encryption td.section::before,
body.task-settings #sections-table tr.arx-section-encryption td.section::before {
  content: "\f023";
}

body.task-settings #sections-table tr.selected td,
body.task-settings #sections-table tr:hover td {
  background: linear-gradient(90deg, rgba(37, 99, 235, .11), rgba(34, 197, 94, .08)) !important;
  color: var(--arx-text);
  box-shadow: inset 4px 0 0 var(--arx-blue);
}

body.task-settings.action-preferences .formcontent,
body.task-settings.action-edit-folder .formcontent,
body.task-settings.action-edit-identity .formcontent,
body.task-settings.action-edit-response .formcontent,
body.task-settings.action-plugin-password .formcontent,
body.task-settings.action-plugin-managesieve .formcontent,
body.task-settings .arx-control-panel {
  margin: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(37, 99, 235, .055), transparent 64%),
    rgba(255, 255, 255, .82);
  box-shadow: var(--arx-shadow-soft);
}

body.task-settings.action-preferences .formcontent::before,
body.task-settings.action-edit-folder .formcontent::before,
body.task-settings.action-edit-identity .formcontent::before,
body.task-settings.action-edit-response .formcontent::before,
body.task-settings.action-plugin-password .formcontent::before,
body.task-settings.action-plugin-managesieve .formcontent::before {
  content: attr(data-arx-title);
  display: inline-flex;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(37, 99, 235, .08));
  color: #166534;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

body.arx-pref-section-general .formcontent::before {
  content: "Brukergrensesnitt";
}

body.arx-pref-section-mailbox .formcontent::before {
  content: "E-postvisning";
}

body.arx-pref-section-mailview .formcontent::before {
  content: "Visning av meldinger";
}

body.arx-pref-section-compose .formcontent::before {
  content: "Skriving av meldinger";
}

body.arx-pref-section-addressbook .formcontent::before {
  content: "Kontakter";
}

body.arx-pref-section-folders .formcontent::before {
  content: "Spesielle mapper";
}

body.arx-pref-section-server .formcontent::before {
  content: "Serverinnstillinger";
}

body.arx-pref-section-encryption .formcontent::before {
  content: "Kryptering";
}

body.task-settings .propform td.title,
body.task-settings .propform label,
body.task-settings .formcontent label,
body.task-addressbook .propform td.title,
body.task-addressbook .propform label {
  color: var(--arx-muted);
  font-weight: 850;
}

body.task-settings .propform tr,
body.task-settings .form-group,
body.task-addressbook .propform tr,
body.task-addressbook .form-group {
  border-bottom: 1px solid rgba(15, 23, 42, .055);
}

body.task-settings .propform tr:last-child,
body.task-addressbook .propform tr:last-child {
  border-bottom: 0;
}

.arx-toggle-row,
body.task-settings .custom-control,
body.task-settings .form-check {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(246, 248, 252, .64);
}

body.task-settings input[type="checkbox"],
body.task-settings input[type="radio"],
body.task-addressbook input[type="checkbox"],
body.task-addressbook input[type="radio"] {
  accent-color: var(--arx-blue);
}

body.task-settings .arx-select,
body.task-settings select,
body.task-settings input[type="text"],
body.task-settings input[type="password"],
body.task-settings input[type="email"],
body.task-settings .form-control,
body.task-settings .custom-select,
body.task-addressbook input[type="text"],
body.task-addressbook input[type="email"],
body.task-addressbook .form-control,
body.task-addressbook .custom-select {
  min-height: 38px;
  border-radius: 13px;
}

body.task-settings textarea,
body.task-settings .arx-textarea,
body.task-addressbook textarea {
  min-height: 120px;
  border-radius: 15px;
  line-height: 1.55;
}

body.task-settings .formbuttons .submit,
body.task-settings .formbuttons .btn-primary,
body.task-addressbook .formbuttons .submit,
body.task-addressbook .formbuttons .btn-primary {
  border: 0;
  background: linear-gradient(90deg, var(--arx-blue), var(--arx-green)) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .20);
}

#subscription-table,
#identities-table,
#responses-table,
#contacts-table,
#sections-table {
  overflow: hidden;
}

#subscription-table tbody td,
#identities-table tbody td,
#responses-table tbody td,
#contacts-table tbody td {
  padding: 10px 12px;
}

#subscription-table tbody tr.selected td,
#identities-table tbody tr.selected td,
#responses-table tbody tr.selected td,
#contacts-table tbody tr.selected td {
  background: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(34, 197, 94, .09)) !important;
  box-shadow: inset 4px 0 0 var(--arx-blue);
}

body.task-addressbook #directorylist li a,
body.task-addressbook #savedsearchlist li a,
body.task-addressbook #contacts-table tr td {
  border-color: rgba(15, 23, 42, .06);
}

body.task-addressbook #contact-details,
body.task-addressbook .contact-header,
body.task-addressbook #contacttabs,
body.task-addressbook .contact-head,
body.task-addressbook .propform.grouped,
body.task-addressbook #contactphoto {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  box-shadow: var(--arx-shadow-soft);
}

body.task-addressbook .contact-header {
  padding: 16px;
}

body.task-addressbook .image-upload,
body.task-addressbook #contactpic {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(34, 197, 94, .07));
}

body.task-mail.action-compose #messagetoolbar {
  padding-inline: 10px;
}

body.task-mail.action-compose #messagetoolbar .save,
body.task-mail.action-compose #messagetoolbar .attach,
body.task-mail.action-compose #messagetoolbar .signature,
body.task-mail.action-compose #messagetoolbar .responses,
body.task-mail.action-compose #messagetoolbar .spellcheck,
body.task-mail.action-compose #messagetoolbar .encrypt {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .62);
}

body.task-mail.action-compose #compose-headers::before,
body.task-mail.action-compose #composebodycontainer::before,
body.task-mail.action-compose #compose-options::before {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  color: var(--arx-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

body.task-mail.action-compose #compose-headers::before {
  content: "Mottakere";
}

body.task-mail.action-compose #composebodycontainer::before {
  content: "Melding";
}

body.task-mail.action-compose #compose-options::before {
  content: "Valg";
}

@media screen and (max-width: 900px) {
  #messagelist-header .toolbar.menu a,
  #messagelist-header > a.refresh,
  #layout-content > .header .toolbar.menu a,
  #mailtoolbar a,
  #messagetoolbar a,
  #folderstoolbar a,
  #identitiestoolbar a,
  #responsestoolbar a,
  #addressbooktoolbar a {
    min-width: 38px;
    padding-inline: 9px;
  }
}

.dark-mode {
  --arx-bg: #0b1220;
  --arx-bg-2: #111827;
  --arx-panel: rgba(17, 24, 39, .84);
  --arx-panel-solid: #111827;
  --arx-panel-soft: #182235;
  --arx-text: #e5e7eb;
  --arx-muted: #a8b3c7;
  --arx-line: rgba(226, 232, 240, .12);
}

.dark-mode body {
  background:
    radial-gradient(1000px 700px at 20% -10%, rgba(37, 99, 235, .18), transparent 60%),
    radial-gradient(800px 620px at 80% 10%, rgba(34, 197, 94, .16), transparent 55%),
    linear-gradient(180deg, var(--arx-bg), var(--arx-bg-2));
}

.dark-mode #layout-menu,
.dark-mode #layout-sidebar,
.dark-mode #layout-list,
.dark-mode #layout-content,
.dark-mode .arx-login-panel,
.dark-mode .arx-status-panel {
  background-color: rgba(17, 24, 39, .84);
}

.dark-mode body:not(.task-login) #layout::after,
.dark-mode body:not(.task-login) .header,
.dark-mode #messagelist-header,
.dark-mode .popupmenu,
.dark-mode .ui-dialog,
.dark-mode #message-header,
.dark-mode #compose-headers,
.dark-mode #composebodycontainer,
.dark-mode #compose-options,
.dark-mode #compose-attachments,
.dark-mode #messagebody,
.dark-mode #message-content .leftcol,
.dark-mode #message-content .rightcol {
  border-color: rgba(226, 232, 240, .12) !important;
  background-color: rgba(17, 24, 39, .82) !important;
  color: var(--arx-text);
}

.dark-mode .messagelist,
.dark-mode .records-table,
.dark-mode .messagelist thead th,
.dark-mode .records-table thead th,
.dark-mode .listing thead th,
.dark-mode #compose-content,
.dark-mode .frame-content,
.dark-mode #compose-attachments.file-upload,
.dark-mode body.task-settings #layout-sidebar,
.dark-mode body.task-settings #layout-content .header,
.dark-mode body.task-settings .formcontent,
.dark-mode body.task-settings .frame-content {
  background-color: rgba(15, 23, 42, .80);
  color: var(--arx-text);
}

.dark-mode #mailtoolbar,
.dark-mode #messagelist-header .toolbar.menu,
.dark-mode #messagetoolbar,
.dark-mode #folderstoolbar,
.dark-mode #identitiestoolbar,
.dark-mode #responsestoolbar,
.dark-mode #addressbooktoolbar {
  border-color: rgba(226, 232, 240, .12);
  background:
    linear-gradient(90deg, rgba(17, 24, 39, .88), rgba(15, 23, 42, .76)),
    radial-gradient(540px 180px at 12% 0%, rgba(37, 99, 235, .12), transparent 68%);
}

.dark-mode #mailtoolbar a,
.dark-mode #messagelist-header .toolbar.menu a,
.dark-mode #messagelist-header > a.refresh,
.dark-mode #layout-content > .header .toolbar.menu a,
.dark-mode #messagetoolbar a,
.dark-mode #folderstoolbar a,
.dark-mode #identitiestoolbar a,
.dark-mode #responsestoolbar a,
.dark-mode #addressbooktoolbar a,
.dark-mode .arx-command-button,
.dark-mode body.task-settings #settings-menu li a,
.dark-mode body.task-settings #settings-menu .listitem,
.dark-mode body.task-settings fieldset,
.dark-mode body.task-settings .propform,
.dark-mode body.task-settings .boxcontent,
.dark-mode body.task-settings .table-widget,
.dark-mode body.task-settings .skinselection .skinthumbnail,
.dark-mode body.task-settings.action-preferences .formcontent,
.dark-mode body.task-settings.action-edit-folder .formcontent,
.dark-mode body.task-settings.action-edit-identity .formcontent,
.dark-mode body.task-settings.action-edit-response .formcontent,
.dark-mode body.task-settings.action-plugin-password .formcontent,
.dark-mode body.task-settings.action-plugin-managesieve .formcontent,
.dark-mode body.task-settings .arx-control-panel,
.dark-mode body.task-addressbook #contact-details,
.dark-mode body.task-addressbook .contact-header,
.dark-mode body.task-addressbook #contacttabs,
.dark-mode body.task-addressbook .contact-head,
.dark-mode body.task-addressbook .propform.grouped,
.dark-mode body.task-addressbook #contactphoto,
.dark-mode #identities-table,
.dark-mode #responses-table,
.dark-mode #sections-table,
.dark-mode #folders-table,
.dark-mode #subscription-table,
.dark-mode #contacts-table,
.dark-mode .ui.alert,
.dark-mode #messagestack div,
.dark-mode .notices div {
  border-color: rgba(226, 232, 240, .12);
  background-color: rgba(17, 24, 39, .76);
  color: var(--arx-text);
}

.dark-mode #mailtoolbar a:not(.disabled):hover,
.dark-mode #messagelist-header .toolbar.menu a:not(.disabled):hover,
.dark-mode #messagelist-header > a.refresh:not(.disabled):hover,
.dark-mode #layout-content > .header .toolbar.menu a:not(.disabled):hover,
.dark-mode #messagetoolbar a:not(.disabled):hover,
.dark-mode #folderstoolbar a:not(.disabled):hover,
.dark-mode #identitiestoolbar a:not(.disabled):hover,
.dark-mode #responsestoolbar a:not(.disabled):hover,
.dark-mode #addressbooktoolbar a:not(.disabled):hover,
.dark-mode body.task-settings #settings-menu li a:hover {
  background: rgba(37, 99, 235, .17);
  color: var(--arx-text);
}

.dark-mode body.task-settings #settings-menu li.selected > a,
.dark-mode body.task-settings #settings-menu li.selected {
  background: linear-gradient(90deg, rgba(37, 99, 235, .25), rgba(34, 197, 94, .18));
}

.dark-mode body.task-settings .formbuttons,
.dark-mode .formbuttons {
  border-color: rgba(226, 232, 240, .12);
  background: rgba(15, 23, 42, .72);
}

.dark-mode .arx-toggle-row,
.dark-mode body.task-settings .custom-control,
.dark-mode body.task-settings .form-check {
  background: rgba(15, 23, 42, .56);
}

.dark-mode body.task-settings #sections-table tr.selected td,
.dark-mode body.task-settings #sections-table tr:hover td,
.dark-mode #subscription-table tbody tr.selected td,
.dark-mode #identities-table tbody tr.selected td,
.dark-mode #responses-table tbody tr.selected td,
.dark-mode #contacts-table tbody tr.selected td {
  background: linear-gradient(90deg, rgba(37, 99, 235, .24), rgba(34, 197, 94, .14)) !important;
}

.dark-mode .messagelist tr:hover td,
.dark-mode .records-table tr:hover td {
  background: rgba(37, 99, 235, .16) !important;
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .custom-select {
  border-color: rgba(226, 232, 240, .14);
  background-color: rgba(15, 23, 42, .82);
  color: var(--arx-text);
}

.dark-mode .arx-login-badge {
  color: #bbf7d0;
}

.dark-mode .arx-login-trust span,
.dark-mode .task-login .form-control,
.dark-mode .task-login input[type="text"],
.dark-mode .task-login input[type="password"] {
  background: rgba(17, 24, 39, .76);
  color: var(--arx-text);
}

@media screen and (max-width: 900px) {
  .arx-login-shell {
    grid-template-columns: 1fr;
  }

  .arx-login-copy {
    text-align: center;
  }

  .arx-login-trust {
    justify-content: center;
  }

  .arx-status-panel {
    margin: 0 auto;
  }
}

@media screen and (max-width: 620px) {
  .task-login #layout-content {
    padding: 42px 16px;
  }

  .arx-login-panel {
    padding: 20px;
  }

  .arx-status-top strong {
    display: none;
  }
}

/* Arx Product Layer */

html:not(.iframe) body:not(.task-login):not(.action-print) #layout {
  height: calc(100% - 74px);
  margin-top: 74px;
}

.arx-product-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 248, 252, .84)),
    radial-gradient(560px 220px at 20% 0%, rgba(37, 99, 235, .10), transparent 70%),
    radial-gradient(460px 220px at 80% 0%, rgba(34, 197, 94, .10), transparent 70%);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

.arx-product-brand,
.arx-product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arx-product-brand {
  min-width: 0;
  color: var(--arx-text);
  text-decoration: none;
}

.arx-product-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(34, 197, 94, .14));
  color: var(--arx-blue);
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}

.arx-product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.arx-product-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.arx-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .70);
  color: var(--arx-muted);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.arx-status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--arx-green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.arx-about-webmail,
.arx-support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--arx-text);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.arx-support-link {
  border-color: rgba(37, 99, 235, .22);
  background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(34, 197, 94, .86));
  color: #fff;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}

.arx-about-webmail {
  cursor: pointer;
}

.arx-about-modal[hidden] {
  display: none;
}

.arx-about-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(10px);
}

.arx-about-dialog {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  background:
    radial-gradient(420px 240px at 10% 0%, rgba(37, 99, 235, .10), transparent 70%),
    radial-gradient(360px 220px at 90% 0%, rgba(34, 197, 94, .12), transparent 70%),
    #fff;
  box-shadow: 0 34px 100px rgba(15, 23, 42, .24);
}

.arx-about-dialog h2 {
  margin: 16px 0 8px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.arx-about-dialog p,
.arx-about-dialog li {
  color: var(--arx-muted);
  font-size: 14px;
  line-height: 1.55;
}

.arx-about-dialog ul {
  margin: 18px 0;
  padding-left: 18px;
}

.arx-about-dialog a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--arx-blue), var(--arx-green));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.arx-about-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--arx-text);
  cursor: pointer;
}

.arx-mail-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .62);
}

.arx-mail-status-strip span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--arx-muted);
  font-size: 12px;
  line-height: 1.35;
}

.arx-mail-status-strip strong {
  display: block;
  color: var(--arx-text);
  font-size: 12px;
  font-weight: 950;
}

body.arx-mail-workspace #layout-sidebar .footer.small {
  height: auto;
  min-height: 35px;
  display: block;
  padding: 8px;
  line-height: 1.3;
}

.arx-sidebar-security {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .08)),
    rgba(255, 255, 255, .78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.arx-sidebar-security-title {
  margin-bottom: 8px;
  color: var(--arx-text);
  font-size: 12px;
  font-weight: 950;
}

.arx-sidebar-security ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arx-sidebar-security li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0;
  color: var(--arx-muted);
  font-size: 11px;
  font-weight: 780;
}

.arx-sidebar-security li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--arx-green);
}

.arx-sidebar-security a {
  display: inline-flex;
  margin-top: 9px;
  color: var(--arx-blue);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.arx-empty-mailbox {
  display: none;
}

.arx-mailbox-is-empty .arx-empty-mailbox {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
}

.arx-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(34, 197, 94, .14));
  color: var(--arx-green);
  font-size: 22px;
  font-weight: 950;
}

.arx-empty-mailbox strong {
  font-size: 16px;
  font-weight: 950;
}

.arx-empty-mailbox span {
  max-width: 320px;
  color: var(--arx-muted);
  font-size: 13px;
  line-height: 1.55;
}

.messagelist tr td {
  transition: background-color .16s ease, box-shadow .16s ease;
}

.messagelist tr.unread td.subject a,
.messagelist tr.unread td.subject span.subject {
  font-weight: 950;
}

.messagelist tr.selected td {
  box-shadow: inset 3px 0 0 var(--arx-blue);
}

.messagelist tr td.subject span.fromto {
  font-weight: 850;
}

.messagelist tr td.subject span.date,
.messagelist tr td.subject span.size {
  font-size: 11px;
}

.popupmenu {
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .18) !important;
  overflow: hidden;
}

.popupmenu .listing li > a,
.popupmenu .menu li > a {
  min-height: 36px;
  padding: 9px 12px !important;
  color: var(--arx-text) !important;
  font-size: 13px;
  font-weight: 780;
}

.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .menu li > a:not(.disabled):hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .06)) !important;
}

.arx-message-trust,
.arx-link-warning,
.arx-compose-banner,
.arx-compose-safety,
.arx-settings-security,
.arx-error-panel {
  border: 1px solid rgba(37, 99, 235, .13);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(34, 197, 94, .08)),
    rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

.arx-message-trust,
.arx-compose-banner,
.arx-error-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 16px;
}

.arx-message-trust strong,
.arx-compose-banner strong,
.arx-compose-safety strong,
.arx-settings-security strong,
.arx-error-copy strong {
  display: block;
  color: var(--arx-text);
  font-size: 14px;
  font-weight: 950;
}

.arx-message-trust span,
.arx-compose-banner span,
.arx-compose-safety span,
.arx-settings-security span,
.arx-error-copy span {
  display: block;
  margin-top: 4px;
  color: var(--arx-muted);
  font-size: 12px;
  line-height: 1.5;
}

.arx-message-trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.arx-message-trust-chips span {
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--arx-blue);
  font-size: 11px;
  font-weight: 900;
}

.arx-link-warning {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-color: rgba(245, 158, 11, .28);
  background: linear-gradient(135deg, rgba(245, 158, 11, .10), rgba(37, 99, 235, .05));
}

.arx-link-warning strong {
  display: block;
  color: #92400e;
  font-size: 13px;
  font-weight: 950;
}

.arx-link-warning span {
  display: block;
  margin-top: 4px;
  color: #7c2d12;
  font-size: 12px;
  line-height: 1.5;
}

a.arx-external-link {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.arx-attachment-note {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .70);
  color: var(--arx-muted);
  font-size: 12px;
  line-height: 1.45;
}

.arx-compose-banner {
  margin: 16px;
}

.arx-compose-banner a {
  flex: 0 0 auto;
  color: var(--arx-blue);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.arx-compose-safety {
  margin: 12px;
  padding: 12px;
}

.arx-settings-security {
  margin: 12px;
  padding: 14px;
}

.arx-settings-security ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--arx-muted);
  font-size: 12px;
  line-height: 1.6;
}

.arx-error-shell {
  padding: 24px !important;
}

.arx-error-panel {
  max-width: 880px;
  margin: 0 auto 16px;
}

.arx-error-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(245, 158, 11, .14);
  color: #b45309;
  font-size: 20px;
  font-weight: 950;
}

.arx-error-panel a {
  flex: 0 0 auto;
  color: var(--arx-blue);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.arx-error-detail {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.dark-mode .arx-product-header {
  border-color: rgba(226, 232, 240, .10);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(15, 23, 42, .84)),
    radial-gradient(520px 220px at 20% 0%, rgba(37, 99, 235, .20), transparent 70%);
}

.dark-mode .arx-status-chip,
.dark-mode .arx-about-webmail,
.dark-mode .arx-about-dialog,
.dark-mode .arx-mail-status-strip span,
.dark-mode .arx-sidebar-security,
.dark-mode .arx-attachment-note,
.dark-mode .arx-error-detail,
.dark-mode .popupmenu {
  border-color: rgba(226, 232, 240, .12) !important;
  background: rgba(15, 23, 42, .88) !important;
  color: var(--arx-text) !important;
}

.dark-mode .arx-mail-status-strip,
.dark-mode .arx-message-trust,
.dark-mode .arx-link-warning,
.dark-mode .arx-compose-banner,
.dark-mode .arx-compose-safety,
.dark-mode .arx-settings-security,
.dark-mode .arx-error-panel {
  border-color: rgba(226, 232, 240, .12);
  background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(34, 197, 94, .10));
}

.dark-mode .arx-link-warning strong,
.dark-mode .arx-link-warning span {
  color: #fde68a;
}

@media screen and (max-width: 1180px) {
  .arx-product-header {
    grid-template-columns: 1fr auto;
  }

  .arx-product-security {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  html:not(.iframe) body:not(.task-login):not(.action-print) #layout {
    height: calc(100% - 112px);
    margin-top: 112px;
  }
}

@media screen and (max-width: 760px) {
  .arx-product-header {
    min-height: 124px;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .arx-product-actions {
    justify-content: stretch;
  }

  .arx-about-webmail,
  .arx-support-link {
    flex: 1;
  }

  html:not(.iframe) body:not(.task-login):not(.action-print) #layout {
    height: calc(100% - 124px);
    margin-top: 124px;
  }

  .arx-mail-status-strip {
    grid-template-columns: 1fr;
  }

  .arx-message-trust,
  .arx-compose-banner,
  .arx-error-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arx-ribbon,
  .arx-loader span {
    animation: none !important;
  }

  .arx-intro {
    display: none;
  }

  #rcmloginsubmit,
  .button.mainaction,
  .btn-primary,
  button.btn-primary {
    transition: none;
  }
}