:root {
  color-scheme: light;
  --eb-bg: #f4eadb;
  --eb-panel: rgba(255, 252, 247, 0.94);
  --eb-panel-strong: rgba(255, 255, 255, 0.98);
  --eb-pane: rgba(255, 248, 239, 0.92);
  --eb-pane-strong: rgba(255, 253, 248, 0.98);
  --eb-border: rgba(130, 98, 53, 0.18);
  --eb-border-strong: rgba(130, 98, 53, 0.28);
  --eb-text: #201711;
  --eb-muted: #6c6052;
  --eb-accent: #8f6a24;
  --eb-accent-strong: #c9953b;
  --eb-selection: rgba(201, 149, 59, 0.14);
  --eb-selection-strong: rgba(201, 149, 59, 0.22);
  --eb-line: rgba(130, 98, 53, 0.12);
  --eb-shadow: 0 22px 54px rgba(84, 52, 18, 0.14);
  --eb-bg-gradient:
    radial-gradient(circle at top left, rgba(209, 174, 103, 0.28), transparent 24%),
    radial-gradient(circle at top right, rgba(158, 107, 39, 0.16), transparent 28%),
    linear-gradient(180deg, #fbf7f0 0%, #ecdfca 100%);
}

html,
body {
  background: var(--eb-bg-gradient);
  color: var(--eb-text);
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

html {
  color-scheme: light;
}

body:not(.task-login) {
  background-attachment: fixed;
}

body:not(.task-login) #layout,
body:not(.task-login) #layout-content,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-sidebar {
  background: transparent;
  color: var(--eb-text);
}

body:not(.task-login) #layout-menu {
  background: var(--eb-pane) !important;
  border-right: 1px solid var(--eb-border) !important;
  box-shadow: inset -1px 0 0 var(--eb-line);
}

body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #taskmenu .special-buttons {
  background: var(--eb-pane) !important;
  border-color: var(--eb-border) !important;
}

body:not(.task-login) #layout-menu .popover-header {
  position: relative;
}

body:not(.task-login) #layout-menu .popover-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat url('../../eurobrands-icon.svg');
  pointer-events: none;
}

body:not(.task-login) #layout-menu .popover-header #logo {
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
}

body:not(.task-login) #taskmenu .special-buttons a {
  background: transparent !important;
}

body:not(.task-login) #taskmenu a {
  color: var(--eb-text) !important;
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu a:focus,
body:not(.task-login) .menu.toolbar a.selected,
body:not(.task-login) .header a.button.icon:not(.disabled):hover,
body:not(.task-login) .header a.button.icon:not(.disabled):focus,
body:not(.task-login) .menu a:not(.disabled):hover,
body:not(.task-login) .menu a:not(.disabled):focus,
body:not(.task-login) .menu.toolbar .dropbutton:not(.disabled):hover,
body:not(.task-login) .popupmenu .listing li > a:not(.disabled):hover {
  background: var(--eb-selection) !important;
  color: var(--eb-text) !important;
}

body:not(.task-login) #taskmenu .action-buttons a {
  color: var(--eb-accent) !important;
}

body:not(.task-login) #taskmenu a.logout {
  color: #b54a43 !important;
}

body:not(.task-login) #taskmenu a.logout:hover,
body:not(.task-login) #taskmenu a.logout:focus {
  color: #b54a43 !important;
  background: rgba(181, 74, 67, 0.12) !important;
}

body:not(.task-login) #layout > div > .header,
body:not(.task-login) #layout > div > .footer,
body:not(.task-login) .searchbar,
body:not(.task-login) .menu.pagenav.pagenav-list,
body:not(.task-login) .menu.pagenav.pagenav-list + .navlist,
body:not(.task-login) .menu.pagenav.pagenav-list.expanded + .navlist,
body:not(.task-login) .popup .listbox .footer,
body:not(.task-login) .popover,
body:not(.task-login) .attachmentslist,
body:not(.task-login) .ui-widget-content,
body:not(.task-login) .ui-widget-header {
  background: var(--eb-panel) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}

body:not(.task-login) .header,
body:not(.task-login) .header a,
body:not(.task-login) .footer,
body:not(.task-login) .footer a,
body:not(.task-login) .messagelist,
body:not(.task-login) .menu a,
body:not(.task-login) .menu.toolbar a,
body:not(.task-login) .searchbar a,
body:not(.task-login) .searchbar input,
body:not(.task-login) .searchbar form:before,
body:not(.task-login) .listing li a,
body:not(.task-login) .listing tbody td,
body:not(.task-login) .listing tbody td a,
body:not(.task-login) .proplist li.with-sublist > a.dropdown,
body:not(.task-login) .message-partheaders table.headers-table,
body:not(.task-login) #message-header .header-links a,
body:not(.task-login) #message-header .header-headers .header-title,
body:not(.task-login) .attachment-name,
body:not(.task-login) .formcontent,
body:not(.task-login) .formcontent label,
body:not(.task-login) .form-control-plaintext {
  color: var(--eb-text) !important;
}

body:not(.task-login) .listing span.secondary,
body:not(.task-login) .messagelist td.subject span.date,
body:not(.task-login) .messagelist td.subject span.fromto,
body:not(.task-login) .messagelist td.subject span.size,
body:not(.task-login) .contactlist span.email,
body:not(.task-login) #login-footer,
body:not(.task-login) .formcontent .hint,
body:not(.task-login) .listing-info,
body:not(.task-login) ::placeholder {
  color: var(--eb-muted) !important;
}

body:not(.task-login) .listing li,
body:not(.task-login) .listing li ul,
body:not(.task-login) .listing tbody td,
body:not(.task-login) .searchbar,
body:not(.task-login) .table td,
body:not(.task-login) .table th,
body:not(.task-login) .table thead th,
body:not(.task-login) .message-part,
body:not(.task-login) .message-htmlpart:not(:first-child),
body:not(.task-login) .message-part:not(:first-child),
body:not(.task-login) .message-partheaders,
body:not(.task-login) .nav-tabs,
body:not(.task-login) .ui-dialog .ui-dialog-titlebar,
body:not(.task-login) .ui-dialog .ui-dialog-buttonpane,
body:not(.task-login) .popover .menu ul + li.separator {
  border-color: var(--eb-line) !important;
}

body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing li.selected > a,
body:not(.task-login) .listing li.selected > div > a,
body:not(.task-login) .listing tr.selected td,
body:not(.task-login) ul.treelist li.selected > a,
body:not(.task-login) ul.treelist li.selected > div > a,
body:not(.task-login) .table-widget table.options-table tr.selected td,
body:not(.task-login) .image-selector .attachmentslist li:focus,
body:not(.task-login) .image-selector .attachmentslist li:hover {
  background: var(--eb-selection) !important;
  color: var(--eb-text) !important;
}

body:not(.task-login) .folderlist li.mailbox .unreadcount,
body:not(.task-login) .folderlist li.mailbox.recent > a > .unreadcount {
  background: var(--eb-accent) !important;
  color: #fff !important;
}

body:not(.task-login) .folderlist li.mailbox.recent > a {
  color: var(--eb-accent) !important;
}

body:not(.task-login) .ui.alert {
  background: rgba(201, 149, 59, 0.08) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}

body:not(.task-login) #messagestack div {
  background: var(--eb-panel-strong) !important;
  color: var(--eb-text) !important;
  border: 1px solid var(--eb-border) !important;
  box-shadow: var(--eb-shadow);
}

body:not(.task-login) #messagestack div > i.icon:before {
  color: var(--eb-accent) !important;
}

body:not(.task-login) .message-htmlpart,
body:not(.task-login) .message-part,
body:not(.task-login) #messagepartframe,
body:not(.task-login) iframe,
body:not(.task-login) .contentframe {
  background: rgba(255, 255, 255, 0.78);
}

body:not(.task-login) .message-htmlpart blockquote,
body:not(.task-login) .message-part blockquote {
  background: rgba(143, 106, 36, 0.06) !important;
  border-left-color: var(--eb-accent) !important;
  border-right-color: var(--eb-accent) !important;
  color: #6f511a !important;
}

body:not(.task-login) .form-control,
body:not(.task-login) .custom-file-label,
body:not(.task-login) .input-group-text,
body:not(.task-login) .multi-input > .content,
body:not(.task-login) .recipient-input .recipient,
body:not(.task-login) .tagedit-list li.tagedit-listelement-old,
body:not(.task-login) .file-upload,
body:not(.task-login) .image-upload,
body:not(.task-login) .skinthumbnail {
  background: var(--eb-pane-strong) !important;
  border-color: var(--eb-border-strong) !important;
  color: var(--eb-text) !important;
  box-shadow: none;
}

body:not(.task-login) .form-control:focus,
body:not(.task-login) .custom-file-input:focus ~ .custom-file-label,
body:not(.task-login) .multi-input > .content.focused,
body:not(.task-login) .recipient-input.focus {
  border-color: var(--eb-accent-strong) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 149, 59, 0.14) !important;
}

body:not(.task-login) .btn-primary,
body:not(.task-login) .floating-action-buttons a.button,
body:not(.task-login) .tox .tox-dialog__footer .tox-button {
  background: linear-gradient(135deg, #c9953b, #e3c78e) !important;
  border-color: #c9953b !important;
  color: #1d1409 !important;
}

body:not(.task-login) .btn-primary:hover,
body:not(.task-login) .btn-primary:focus,
body:not(.task-login) .floating-action-buttons a.button:hover,
body:not(.task-login) .floating-action-buttons a.button:focus,
body:not(.task-login) .tox .tox-dialog__footer .tox-button:hover,
body:not(.task-login) .tox .tox-dialog__footer .tox-button:focus {
  background: linear-gradient(135deg, #bb8430, #d9b56d) !important;
  border-color: #bb8430 !important;
}

body:not(.task-login) .btn-secondary,
body:not(.task-login) .tox .tox-dialog__footer .tox-button.tox-button--secondary {
  background: #8f7a5a !important;
  border-color: #8f7a5a !important;
  color: #fff8ef !important;
}

body:not(.task-login) .btn-danger {
  background: #b54a43 !important;
  border-color: #b54a43 !important;
  color: #fff5f4 !important;
}

body:not(.task-login) a {
  color: var(--eb-accent);
}

body:not(.task-login) a:hover,
body:not(.task-login) a:focus {
  color: #6f511a;
}

body:not(.task-login) a.theme,
body:not(.task-login) #taskmenu a.theme,
body:not(.task-login) #layout-menu .special-buttons a.theme {
  display: none !important;
}

#logo {
  width: min(16rem, 100%);
  max-height: 3.1rem;
  height: auto;
  object-fit: contain;
}

body.task-login #layout {
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.task-login #layout-content {
  width: min(32rem, 100%);
  max-width: 32rem;
  padding: 5rem 2rem 2rem;
  border: 1px solid var(--eb-border);
  border-radius: 1.4rem;
  background: var(--eb-panel);
  background-image: url('../../eurobrands-icon.svg');
  background-repeat: no-repeat;
  background-position: center 1.05rem;
  background-size: 3.25rem;
  box-shadow: var(--eb-shadow);
  backdrop-filter: blur(10px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
}

body.task-login #logo {
  display: none !important;
}

body.task-login #login-form {
  width: min(22rem, 100%);
  max-width: 22rem;
  margin: 0 auto;
  position: static !important;
  top: auto !important;
  display: grid;
  gap: 0.8rem;
}

body.task-login #login-form::before {
  content: 'Roundcube';
  display: block;
  margin: 0 0 0.2rem;
  text-align: center;
  color: #1f1711;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

body.task-login #login-form table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
}

body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block;
  width: 100%;
  padding: 0;
}

body.task-login #login-form td.input.input-group {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
}

body.task-login #login-form .input-group-prepend {
  display: flex;
  flex: 0 0 auto;
}

body.task-login #login-form .formbuttons {
  margin: 0.2rem 0 0;
}

body.task-login #login-form .input-group-text,
body.task-login #login-form .form-control {
  background: var(--eb-panel-strong);
  color: var(--eb-text);
  box-shadow: none;
}

body.task-login #login-form .input-group-text {
  color: var(--eb-accent);
}

body.task-login #login-form .form-control {
  min-height: 3rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 1%;
}

body.task-login #login-form .form-control:focus {
  border-color: var(--eb-accent-strong);
  box-shadow: 0 0 0 0.2rem rgba(201, 149, 59, 0.14);
}

body.task-login #login-form .btn,
body.task-login #login-form button[type='submit'] {
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9953b, #e3c78e);
  color: #1d1409;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none;
}

body.task-login #login-form .btn:hover,
body.task-login #login-form .btn:focus,
body.task-login #login-form button[type='submit']:hover,
body.task-login #login-form button[type='submit']:focus {
  background: linear-gradient(135deg, #bb8430, #d9b56d);
}

body.task-login #layout-footer,
body.task-login #login-footer {
  color: var(--eb-muted);
  display: none;
}

body.task-login a {
  color: var(--eb-accent);
}