:root {
  --zws-bg: #f7f5f0;
  --zws-panel: rgba(255, 253, 248, .78);
  --zws-panel-solid: #fffdf8;
  --zws-ink: #14100c;
  --zws-ink-soft: #3b3630;
  --zws-muted: #8a827a;
  --zws-line: rgba(20, 16, 12, .1);
  --zws-line-strong: rgba(20, 16, 12, .18);
  --zws-chip: rgba(20, 16, 12, .055);
  --zws-blue: #4285f4;
  --zws-red: #ea4335;
  --zws-yellow: #fbbc04;
  --zws-green: #34a853;
  --zws-radius: 22px;
  --zws-radius-sm: 14px;
  --zws-serif: Georgia, "Times New Roman", serif;
  --zws-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --zws-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zws-rainbow: conic-gradient(from 210deg at 50% 50%, #4285f4 0deg, #34a853 90deg, #fbbc04 190deg, #ea4335 280deg, #4285f4 360deg);
}

html,
body {
  min-width: 0 !important;
  color: var(--zws-ink) !important;
  font-family: var(--zws-sans) !important;
  background:
    radial-gradient(900px 520px at -8% 18%, rgba(66, 133, 244, .22), transparent 62%),
    radial-gradient(760px 500px at 108% 82%, rgba(251, 188, 4, .3), transparent 64%),
    radial-gradient(660px 420px at 52% 82%, rgba(52, 168, 83, .16), transparent 60%),
    var(--zws-bg) !important;
}

body {
  overflow-x: hidden !important;
  letter-spacing: 0 !important;
}

a {
  color: inherit;
}

#layout {
  gap: 24px !important;
  padding: 24px !important;
  background: transparent !important;
  min-width: 0 !important;
}

#layout > div {
  min-width: 0 !important;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
  border: 1px solid var(--zws-line) !important;
  border-radius: var(--zws-radius) !important;
  background: var(--zws-panel) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: none !important;
  overflow: hidden !important;
}

#layout-menu {
  flex: 0 0 250px !important;
  max-width: 250px !important;
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

#layout-sidebar {
  flex: 0 1 280px !important;
  max-width: 300px !important;
  min-width: 220px !important;
}

#layout-list {
  flex: 0 1 380px !important;
  max-width: 430px !important;
  min-width: 280px !important;
}

#layout-content {
  flex: 1 1 520px !important;
  min-width: 0 !important;
}

#layout-menu .popover-header {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 8px 22px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--zws-ink) !important;
  font-family: var(--zws-serif);
  font-size: 24px;
  font-weight: 400;
}

#layout-menu .popover-header:after {
  content: "ZWS Webmail";
  display: inline-block;
  overflow-wrap: anywhere;
}

#layout-menu #logo,
#login-form + #login-footer,
#logo {
  max-width: none !important;
}

#layout-menu #logo,
#layout-content #logo,
body.task-login #logo {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50%;
  object-fit: contain;
}

#taskmenu {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

#taskmenu a,
#taskmenu .button {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--zws-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu .button:hover,
#taskmenu .button.selected {
  background: var(--zws-chip) !important;
  color: var(--zws-ink) !important;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 14.5px !important;
  line-height: 1.25 !important;
  font-family: var(--zws-sans);
}

#layout > div > .header,
#layout > div > .footer {
  min-height: 58px !important;
  height: auto !important;
  line-height: 1.25 !important;
  padding: 12px 16px !important;
  border-color: var(--zws-line) !important;
  color: var(--zws-ink) !important;
  background: rgba(255, 253, 248, .46) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  white-space: normal !important;
}

.header-title,
#layout > div > .header .header-title {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--zws-ink) !important;
  font-family: var(--zws-serif);
  font-size: 24px !important;
  font-weight: 400 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.toolbar,
.menu.toolbar,
.header .toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

a.button,
.button,
button,
.btn,
.formbuttons input,
.formbuttons button {
  border-radius: 999px !important;
  border-color: var(--zws-line-strong) !important;
  background-color: var(--zws-panel-solid) !important;
  color: var(--zws-ink) !important;
  box-shadow: none !important;
}

a.button:hover,
.button:hover,
button:hover,
.btn:hover {
  border-color: var(--zws-ink) !important;
  background-color: #fffaf0 !important;
}

.btn-primary,
button.btn-primary,
input.btn-primary,
#rcmloginsubmit {
  background: var(--zws-ink) !important;
  color: #fffdf8 !important;
  border-color: var(--zws-ink) !important;
}

input,
textarea,
select,
.form-control,
.custom-select,
.recipient-input,
.multi-input > .content {
  min-width: 0 !important;
  border-radius: 12px !important;
  border-color: var(--zws-line-strong) !important;
  background-color: var(--zws-panel-solid) !important;
  color: var(--zws-ink) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus,
.recipient-input.focus {
  border-color: var(--zws-ink) !important;
  box-shadow: 0 0 0 4px rgba(20, 16, 12, .06) !important;
}

.scroller {
  min-width: 0 !important;
}

.listing,
.messagelist,
.folderlist,
.contactlist {
  background: transparent !important;
}

.listing li,
.messagelist tr,
.listing tbody tr,
.folderlist li,
.contactlist li {
  border-color: var(--zws-line) !important;
  color: var(--zws-ink-soft) !important;
}

.listing li:hover,
.messagelist tr:hover,
.listing tbody tr:hover,
.folderlist li:hover,
.contactlist li:hover,
.listing .selected,
.messagelist .selected {
  background: rgba(20, 16, 12, .045) !important;
}

.messagelist td,
.listing td,
.table td,
.table th {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  border-color: var(--zws-line) !important;
}

.searchbar,
#mailsearchform,
.formcontainer,
.formcontent,
.iframe-wrapper {
  min-width: 0 !important;
}

#mailsearchform {
  padding: 10px 12px !important;
}

#message-header,
.message-partheaders,
.message-part,
#compose-content,
#compose-attachments,
#compose-options,
.file-upload,
.table-widget,
.propform {
  border-color: var(--zws-line) !important;
  background: rgba(255, 253, 248, .52) !important;
  border-radius: var(--zws-radius-sm) !important;
}

#compose-content {
  padding: 18px !important;
}

.compose-headers .form-group,
.formcontent .form-group {
  min-width: 0 !important;
}

body.task-login {
  overflow: auto !important;
}

body.task-login #layout {
  min-height: 100% !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 32px 18px !important;
}

body.task-login #layout-content {
  width: min(460px, 100%) !important;
  min-height: 0 !important;
  flex: none !important;
  padding: 42px 38px !important;
  text-align: center;
}

body.task-login #layout-content:before {
  content: "ZWS Webmail";
  display: block;
  margin: 6px 0 8px;
  font-family: var(--zws-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--zws-ink);
}

body.task-login #layout-content:after {
  content: "ultraedgedetacenter.com";
  display: block;
  margin-top: 18px;
  color: var(--zws-muted);
  font-family: var(--zws-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.task-login #logo {
  display: block;
  margin: 0 auto 18px !important;
  width: 58px !important;
  height: 58px !important;
}

#login-form {
  width: 100% !important;
  max-width: none !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#login-form table,
#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100% !important;
}

#login-form td {
  padding: 0 0 12px !important;
  text-align: left !important;
}

#login-form label {
  color: var(--zws-muted) !important;
  font-family: var(--zws-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#login-footer {
  color: var(--zws-muted) !important;
  overflow-wrap: anywhere;
}

.ui-dialog,
.popover,
.menu,
.popupmenu {
  border-color: var(--zws-line) !important;
  border-radius: var(--zws-radius-sm) !important;
  background: var(--zws-panel-solid) !important;
  color: var(--zws-ink) !important;
  box-shadow: 0 24px 60px -30px rgba(20, 16, 12, .35) !important;
}

.voice {
  position: absolute !important;
}

@media screen and (max-width: 1240px) {
  #layout {
    gap: 16px !important;
    padding: 18px !important;
  }

  #layout-menu {
    flex-basis: 210px !important;
    max-width: 210px !important;
  }

  #layout-sidebar,
  #layout-list {
    min-width: 230px !important;
    max-width: 330px !important;
  }
}

@media screen and (max-width: 900px) {
  #layout {
    padding: 12px !important;
    gap: 12px !important;
  }

  #layout-menu {
    flex: 0 0 72px !important;
    max-width: 72px !important;
    padding: 12px 8px !important;
    border-radius: 18px !important;
  }

  #layout-menu .popover-header:after,
  #taskmenu a .inner,
  #taskmenu .button .inner {
    display: none !important;
  }

  #layout-menu .popover-header {
    justify-content: center !important;
    padding-bottom: 12px !important;
  }

  #taskmenu a,
  #taskmenu .button {
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px !important;
  }

  #layout-sidebar,
  #layout-list {
    min-width: 220px !important;
    max-width: 42vw !important;
  }

  .header-title,
  #layout > div > .header .header-title {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 640px) {
  body {
    overflow: hidden !important;
  }

  #layout {
    height: 100% !important;
    padding: 10px !important;
  }

  #layout-menu {
    border-radius: 0 var(--zws-radius) var(--zws-radius) 0 !important;
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    border-radius: var(--zws-radius-sm) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #layout > div > .header {
    min-height: 52px !important;
    padding: 10px 12px !important;
  }

  .toolbar,
  .menu.toolbar,
  .header .toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
  }

  body.task-login {
    overflow: auto !important;
  }

  body.task-login #layout {
    padding: 18px !important;
  }

  body.task-login #layout-content {
    padding: 34px 22px !important;
  }

  body.task-login #layout-content:before {
    font-size: 36px;
  }
}