:root {
  --copyfoto-red: #ef1018;
  --copyfoto-red-dark: #c90c13;
  --copyfoto-ink: #20242a;
  --copyfoto-muted: #68707b;
  --copyfoto-line: #e7e9ed;
  --copyfoto-bg: #f5f6f8;
}

html, body,
#layout, #layout-content, #layout-sidebar,
.listing, .listing tbody, .listing li,
.popover, .menu, .popupmenu, .ui-dialog,
.iframe-wrapper, .message-part, .message-htmlpart {
  background-color: #fff !important;
  color: var(--copyfoto-ink) !important;
}

body.task-login {
  background: linear-gradient(145deg, #ffffff 0%, #f4f5f7 55%, #fff0f1 100%) !important;
}

.task-login #layout-content {
  border: 1px solid var(--copyfoto-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(31, 35, 41, .13) !important;
}

#logo,
.task-login #logo {
  background-color: transparent !important;
}

#logo img,
.task-login #logo img {
  max-height: 92px !important;
  width: auto !important;
  object-fit: contain !important;
}

#layout-menu,
#layout-menu .popover-header,
#layout-menu .special-buttons {
  background: #fff !important;
  border-color: var(--copyfoto-line) !important;
}

#layout-menu a,
#layout-menu .button,
.toolbar a,
.toolbar .button {
  color: var(--copyfoto-ink) !important;
}

#layout-menu a.selected,
#layout-menu a:hover,
.listing li.selected,
.listing tr.selected td,
.menu a:hover,
.menu a.selected {
  background: #fff0f1 !important;
  color: var(--copyfoto-red-dark) !important;
}

.btn-primary,
button.btn-primary,
input.btn-primary,
.floating-action-buttons a.button,
.compose-button,
#layout-menu .compose {
  background-color: var(--copyfoto-red) !important;
  border-color: var(--copyfoto-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.floating-action-buttons a.button:hover,
.compose-button:hover,
#layout-menu .compose:hover {
  background-color: var(--copyfoto-red-dark) !important;
  border-color: var(--copyfoto-red-dark) !important;
}

a, .button.icon:before, .listing .unread > td,
.listing .unread > a, .folderlist li.unread > a {
  color: var(--copyfoto-red-dark);
}

.header, .footer, .toolbar,
#layout-list .searchbar,
#layout-content .header,
#layout-sidebar .header {
  background-color: #fff !important;
  border-color: var(--copyfoto-line) !important;
  color: var(--copyfoto-ink) !important;
}

input, textarea, select, .form-control {
  background-color: #fff !important;
  border-color: #d7dbe1 !important;
  color: var(--copyfoto-ink) !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--copyfoto-red) !important;
  box-shadow: 0 0 0 .18rem rgba(239, 16, 24, .12) !important;
}

.listing td, .listing th,
.folderlist li,
.messagelist td {
  border-color: var(--copyfoto-line) !important;
}

.quota-widget .bar span,
.progress-bar {
  background-color: var(--copyfoto-red) !important;
}

@media (max-width: 768px) {
  .task-login #layout-content {
    border-radius: 18px !important;
    margin: 12px !important;
  }

  #logo img,
  .task-login #logo img {
    max-height: 72px !important;
  }
}

/* CopyFoto friendly mail layout */
html {
  font-size: 15px !important;
}

body,
#layout {
  color: #1d2939 !important;
  background: #f8fafc !important;
}

#layout > div > .header {
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  background: #ffffff !important;
  border-color: #e4e7ec !important;
}

#layout-menu {
  background: #ffffff !important;
  border-right: 1px solid #e4e7ec !important;
  box-shadow: 2px 0 12px rgba(16, 24, 40, .04) !important;
}

#layout-menu .popover-header,
#layout-menu .special-buttons,
#layout-menu .special-buttons a {
  background: #ffffff !important;
  color: #344054 !important;
}

#layout-menu .task-menu-button,
#layout-menu a.button {
  color: #344054 !important;
}

#layout-menu .task-menu-button.selected,
#layout-menu .task-menu-button:hover {
  color: var(--copyfoto-red-dark) !important;
  background: #fff1f2 !important;
}

#layout-menu .compose,
#layout-menu .compose:hover {
  color: #ffffff !important;
  background: var(--copyfoto-red) !important;
}

#layout-menu .compose .inner {
  font-size: 0 !important;
}

#layout-menu .compose .inner::after {
  content: "Написать";
  font-size: .78rem;
  font-weight: 700;
}

#layout-menu .logout,
#layout-menu .logout::before {
  color: var(--copyfoto-red-dark) !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  background: #ffffff !important;
  border-color: #e4e7ec !important;
}

@media screen and (min-width: 1201px) {
  #layout-sidebar {
    flex: 0 0 17rem !important;
    width: 17rem !important;
    min-width: 17rem !important;
    max-width: 17rem !important;
  }

  #layout-list {
    flex: 0 0 29rem !important;
    width: 29rem !important;
    min-width: 26rem !important;
    max-width: 29rem !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  #layout-sidebar,
  #layout-list {
    min-width: 250px !important;
    max-width: 30% !important;
  }
}

.folderlist,
.messagelist,
.listing {
  background: #ffffff !important;
  color: #344054 !important;
}

.folderlist li {
  background: #ffffff !important;
  border-color: #eef0f3 !important;
}

.folderlist li > a {
  color: #344054 !important;
  font-weight: 500 !important;
}

.folderlist li > a::before,
.folderlist li > div.treetoggle::before {
  color: #667085 !important;
}

.folderlist li.mailbox.unread > a {
  color: #101828 !important;
  font-weight: 700 !important;
}

.folderlist li.selected > a {
  color: #b51219 !important;
  background: #fff1f2 !important;
  border-left: 3px solid var(--copyfoto-red) !important;
  font-weight: 700 !important;
}

.folderlist li.selected > a::before {
  color: var(--copyfoto-red) !important;
}

.folderlist li.mailbox .unreadcount {
  color: #344054 !important;
  background: #eef2f6 !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  min-width: 2.2em !important;
}

.folderlist li.selected .unreadcount {
  color: #ffffff !important;
  background: var(--copyfoto-red) !important;
}

.messagelist tr td {
  color: #344054 !important;
  background: #ffffff !important;
  border-color: #eef0f3 !important;
}

.messagelist tr:hover td {
  background: #f8fafc !important;
}

.messagelist tr.selected td,
.messagelist tr.selected:hover td {
  color: #101828 !important;
  background: #fff1f2 !important;
}

.messagelist td.subject span.fromto,
.messagelist td.subject span.date,
.messagelist td.subject span.size {
  color: #667085 !important;
}

.messagelist td.subject span.fromto {
  font-weight: 600 !important;
}

.messagelist td.subject span.subject,
.messagelist td.subject span.subject a {
  color: #344054 !important;
}

.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.subject span.subject a {
  color: #101828 !important;
  font-weight: 700 !important;
}

.messagelist td.subject span.msgicon.status::before {
  color: #98a2b3 !important;
}

.messagelist td.subject span.msgicon.status.unread::before,
.messagelist span.flagged::before {
  color: var(--copyfoto-red) !important;
}

.messagelist span.attachment span,
.messagelist tr.flaggedroot:not(:hover) span.unflagged::before {
  color: #667085 !important;
}

.searchbar {
  background: #ffffff !important;
  border-color: #e4e7ec !important;
}

.searchbar input {
  color: #1d2939 !important;
  background: #f8fafc !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 10px !important;
}

.searchbar input::placeholder,
.listing-info,
.listing span.secondary {
  color: #667085 !important;
}

.toolbar a,
.toolbar a.button,
.toolbar a.button::before,
#layout-content > .header a.button,
#layout-content > .header a.button::before {
  color: #344054 !important;
}

.toolbar a:hover,
.toolbar a.button:hover,
#layout-content > .header a.button:hover {
  color: var(--copyfoto-red-dark) !important;
  background: #fff1f2 !important;
}

#message-header > .subject,
#message-header > .subject a {
  color: #101828 !important;
}

#message-header > .subject {
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
}

#message-header .header-headers,
#message-header .header-headers .header-title,
#message-header .header-headers a {
  color: #475467 !important;
}

#message-header .header-links a {
  color: var(--copyfoto-red-dark) !important;
}

.message-part,
.message-htmlpart,
#messagepartframe {
  color: #1d2939 !important;
  background: #ffffff !important;
}

.column-resizer {
  opacity: .35;
}

html:not(.touch) ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html:not(.touch) ::-webkit-scrollbar-thumb {
  background: #cfd4dc !important;
  border-radius: 999px !important;
}

html:not(.touch) ::-webkit-scrollbar-track {
  background: #f8fafc !important;
}

/* Force the compose screen to stay readable even when macOS prefers dark mode. */
html.dark-mode .form-control,
html.dark-mode .custom-file-label,
html.dark-mode .custom-select,
html.dark-mode .recipient-input,
html.dark-mode .recipient-input.focus,
html.dark-mode .recipient-input input {
  color: #1d2939 !important;
  background-color: #ffffff !important;
  border-color: #d0d5dd !important;
}

html.dark-mode .recipient-input .recipient {
  color: #1d2939 !important;
  background: #eef2f6 !important;
  border-color: #d0d5dd !important;
}

html.dark-mode .recipient-input .recipient a,
html.dark-mode .recipient-input .recipient span {
  color: #1d2939 !important;
}

html.dark-mode .input-group-text,
html.dark-mode .btn-secondary {
  color: #344054 !important;
  background: #f2f4f7 !important;
  border-color: #d0d5dd !important;
}

html.dark-mode .file-upload,
html.dark-mode .attachmentslist,
html.dark-mode .attachmentslist li,
html.dark-mode .attachmentslist a,
html.dark-mode .attachmentslist li .attachment-name,
html.dark-mode .attachmentslist li .attachment-size {
  color: #475467 !important;
  background: #ffffff !important;
  border-color: #98a2b3 !important;
}

html.dark-mode .tox.tox-tinymce,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-toolbar-overlord,
html.dark-mode .tox .tox-toolbar-overlord > div,
html.dark-mode .tox .tox-editor-header,
html.dark-mode .html-editor .editor-toolbar {
  color: #344054 !important;
  background: #ffffff !important;
  border-color: #d0d5dd !important;
}

html.dark-mode .tox .tox-tbtn,
html.dark-mode .tox .tox-split-button,
html.dark-mode .tox .tox-swatches__picker-btn,
html.dark-mode .tox .tox-tbtn--enabled {
  color: #344054 !important;
  background: #ffffff !important;
}

html.dark-mode .tox .tox-tbtn:hover,
html.dark-mode .tox .tox-split-button:hover,
html.dark-mode .tox .tox-swatches__picker-btn:hover,
html.dark-mode .tox .tox-tbtn--enabled {
  color: var(--copyfoto-red-dark) !important;
  background: #fff1f2 !important;
}

html.dark-mode .tox .tox-tbtn svg,
html.dark-mode .tox .tox-split-button svg,
html.dark-mode .tox .tox-swatches__picker-btn svg {
  fill: #344054 !important;
}

html.dark-mode .tox .tox-edit-area,
html.dark-mode .tox .tox-edit-area__iframe {
  color: #1d2939 !important;
  background: #ffffff !important;
}

html.dark-mode .custom-switch .custom-control-label::before {
  background-color: #d0d5dd !important;
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--copyfoto-red) !important;
}

/* COPYFOTO_COMPOSE_CONTRAST_V1 */
/*
 * CopyFoto Roundcube compose contrast hotfix.
 *
 * Scope this to the mail compose screen.  Roundcube Elastic's dark-mode
 * selector (`html.dark-mode .form-control:focus:not(.is-invalid)`) is more
 * specific than the existing CopyFoto light-surface rule.  On focus it can
 * therefore put light text back onto CopyFoto's white compose fields.
 */
html.dark-mode body.task-mail.action-compose #compose-content .form-control:focus,
html.dark-mode body.task-mail.action-compose #compose-content .form-control:focus:not(.is-invalid),
html.dark-mode body.task-mail.action-compose #compose-content .recipient-input.focus,
html.dark-mode body.task-mail.action-compose #compose-content .recipient-input.focus input,
html.dark-mode body.task-mail.action-compose #composebody.form-control:focus,
html.dark-mode body.task-mail.action-compose #composebody.form-control:focus:not(.is-invalid) {
  color: #1d2939 !important;
  -webkit-text-fill-color: #1d2939 !important;
  background-color: #ffffff !important;
  caret-color: #1d2939 !important;
  opacity: 1 !important;
}

/* COPYFOTO_GMAIL_LAYOUT_V1
 * Familiar Gmail-like density and hierarchy for Roundcube Elastic.
 * This is presentation-only: no mail, account, IMAP or SMTP behaviour changes.
 */
:root {
  /* Slightly darker than the logo red so white control labels pass WCAG AA. */
  --copyfoto-red: #df1018;
  --copyfoto-gmail-canvas: #f6f8fc;
  --copyfoto-gmail-surface: #ffffff;
  --copyfoto-gmail-surface-soft: #f2f6fc;
  --copyfoto-gmail-hover: #eef3f8;
  --copyfoto-gmail-selected: #fde8e9;
  --copyfoto-gmail-selected-strong: #fbd4d6;
  --copyfoto-gmail-text: #202124;
  --copyfoto-gmail-muted: #5f6368;
  --copyfoto-gmail-border: #e3e7ed;
  --copyfoto-gmail-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 1px 3px 1px rgba(60, 64, 67, .08);
}

body:not(.task-login),
body:not(.task-login) #layout {
  color: var(--copyfoto-gmail-text) !important;
  background: var(--copyfoto-gmail-canvas) !important;
}

body:not(.task-login) #layout-menu,
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  border-color: transparent !important;
  background: var(--copyfoto-gmail-surface) !important;
}

body:not(.task-login) #layout > div > .header,
body:not(.task-login) #layout > div > .footer {
  color: var(--copyfoto-gmail-text) !important;
  background: var(--copyfoto-gmail-surface) !important;
  border-color: var(--copyfoto-gmail-border) !important;
}

/* App rail and the prominent compose action. */
body:not(.task-login) #layout-menu {
  background: var(--copyfoto-gmail-canvas) !important;
  box-shadow: none !important;
}

body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #layout-menu .special-buttons,
body:not(.task-login) #layout-menu .special-buttons a {
  background: var(--copyfoto-gmail-canvas) !important;
}

body:not(.task-login) #layout-menu .task-menu-button,
body:not(.task-login) #layout-menu a.button {
  border-radius: 999px !important;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body:not(.task-login) #layout-menu .task-menu-button:hover,
body:not(.task-login) #layout-menu .task-menu-button.selected {
  color: var(--copyfoto-red-dark) !important;
  background: var(--copyfoto-gmail-selected) !important;
}

body:not(.task-login) #layout-menu .compose,
body:not(.task-login) #layout-menu .compose:hover,
body:not(.task-login) #layout-menu .compose:focus-visible {
  min-height: 3.55rem !important;
  margin: .55rem .42rem .85rem !important;
  border: 0 !important;
  border-radius: 1rem !important;
  color: #ffffff !important;
  background: var(--copyfoto-red) !important;
  box-shadow: var(--copyfoto-gmail-shadow) !important;
}

body:not(.task-login) #layout-menu .compose:hover {
  background: var(--copyfoto-red-dark) !important;
  box-shadow: 0 2px 5px rgba(60, 64, 67, .22), 0 4px 10px rgba(60, 64, 67, .14) !important;
}

body:not(.task-login) #layout-menu .compose::before {
  color: #ffffff !important;
}

body:not(.task-login) #layout-menu .compose .inner::after {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

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

/* Gmail-like folder navigation. */
body.task-mail #layout-sidebar .scroller {
  padding: .45rem .55rem .75rem !important;
}

body.task-mail .folderlist li {
  margin: 1px 0 !important;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  overflow: hidden !important;
}

body.task-mail .folderlist li > a {
  min-height: 2.25rem !important;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  color: var(--copyfoto-gmail-text) !important;
}

body.task-mail .folderlist li:hover,
body.task-mail .folderlist li:hover > a {
  background: var(--copyfoto-gmail-hover) !important;
}

body.task-mail .folderlist li.selected,
body.task-mail .folderlist li.selected > a {
  color: #861015 !important;
  background: var(--copyfoto-gmail-selected-strong) !important;
  border-left: 0 !important;
}

body.task-mail .folderlist li.selected > a,
body.task-mail .folderlist li.mailbox.unread > a {
  font-weight: 700 !important;
}

body.task-mail .folderlist li.mailbox .unreadcount {
  color: var(--copyfoto-gmail-text) !important;
  background: transparent !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
}

body.task-mail .folderlist li.selected .unreadcount {
  color: #861015 !important;
  background: transparent !important;
}

/* Search field and icon toolbars. */
body.task-mail .searchbar {
  padding: .48rem .65rem !important;
  background: var(--copyfoto-gmail-surface) !important;
}

body.task-mail .searchbar form,
body.task-mail .searchbar input {
  background: var(--copyfoto-gmail-surface-soft) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}

body.task-mail .searchbar input {
  min-height: 2.65rem !important;
  padding-left: 1rem !important;
  box-shadow: none !important;
}

body.task-mail .searchbar input:focus {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--copyfoto-gmail-shadow) !important;
}

body.task-mail .toolbar a.button,
body.task-mail #layout-content > .header a.button,
body.task-mail #layout-list > .header a.button {
  border-radius: 999px !important;
}

body.task-mail .toolbar a.button:hover,
body.task-mail #layout-content > .header a.button:hover,
body.task-mail #layout-list > .header a.button:hover {
  color: var(--copyfoto-gmail-text) !important;
  background: var(--copyfoto-gmail-hover) !important;
}

/* Compact message rows: sender first, subject second, metadata quiet. */
body.task-mail .messagelist {
  border-collapse: separate !important;
  border-spacing: 0 .32rem !important;
  padding: 0 .45rem !important;
  background: var(--copyfoto-gmail-canvas) !important;
}

body.task-mail .messagelist tr td {
  min-height: 2.75rem !important;
  color: var(--copyfoto-gmail-text) !important;
  background: #f5f6f8 !important;
  border-top: 1px solid #d6dbe2 !important;
  border-bottom: 1px solid #d6dbe2 !important;
}

body.task-mail .messagelist tr.unread td {
  background: #ffffff !important;
}

body.task-mail .messagelist tr td:first-child {
  border-left: 1px solid #d6dbe2 !important;
  border-radius: .62rem 0 0 .62rem !important;
}

body.task-mail .messagelist tr td:last-child {
  border-right: 1px solid #d6dbe2 !important;
  border-radius: 0 .62rem .62rem 0 !important;
}

body.task-mail .messagelist tr:hover td {
  background: var(--copyfoto-gmail-hover) !important;
  border-color: #c7cdd5 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18) !important;
}

body.task-mail .messagelist tr.selected td,
body.task-mail .messagelist tr.selected:hover td {
  background: var(--copyfoto-gmail-selected) !important;
  border-color: #eaa8ab !important;
}

/* A conversation root is visibly different from its replies. */
body.task-mail .messagelist tr.threadroot td,
body.task-mail .messagelist tr.thread td {
  border-top-color: #cbd2dc !important;
}

body.task-mail .messagelist tr.threadroot td:first-child,
body.task-mail .messagelist tr.thread td:first-child {
  border-left: 4px solid var(--copyfoto-red) !important;
}

body.task-mail .messagelist tr.message.child td,
body.task-mail .messagelist tr.depth-1 td,
body.task-mail .messagelist tr.depth-2 td {
  background: #fbfcfe !important;
}

body.task-mail .messagelist td.threads div::before {
  color: var(--copyfoto-red-dark) !important;
}

body.task-mail .messagelist td.subject span.fromto {
  color: var(--copyfoto-gmail-text) !important;
  font-weight: 600 !important;
}

body.task-mail .messagelist td.subject span.subject,
body.task-mail .messagelist td.subject span.subject a {
  color: var(--copyfoto-gmail-text) !important;
}

body.task-mail .messagelist td.subject span.date,
body.task-mail .messagelist td.subject span.size,
body.task-mail .messagelist td.subject span.secondary {
  color: var(--copyfoto-gmail-muted) !important;
}

body.task-mail .messagelist tr.unread td.subject span.fromto,
body.task-mail .messagelist tr.unread td.subject span.subject,
body.task-mail .messagelist tr.unread td.subject span.subject a {
  color: #111318 !important;
  font-weight: 700 !important;
}

/* Reading and compose surfaces stay calm and card-like. */
body.task-mail #message-header {
  padding: 1.1rem 1.35rem .9rem !important;
  border-bottom: 1px solid var(--copyfoto-gmail-border) !important;
  background: #ffffff !important;
}

body.task-mail #message-header > .subject {
  color: var(--copyfoto-gmail-text) !important;
  font-size: 1.42rem !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
}

body.task-mail #message-content,
body.task-mail .message-part,
body.task-mail .message-htmlpart,
body.task-mail #messagepartframe {
  color: var(--copyfoto-gmail-text) !important;
  background: #ffffff !important;
}

body.task-mail.action-compose #compose-content {
  background: var(--copyfoto-gmail-canvas) !important;
}

body.task-mail.action-compose #compose-content > form,
body.task-mail.action-compose .compose-headers,
body.task-mail.action-compose .formcontent {
  background: #ffffff !important;
}

body.task-mail.action-compose .form-control,
body.task-mail.action-compose .recipient-input,
body.task-mail.action-compose .custom-select,
body.task-mail.action-compose .custom-file-label {
  border-color: var(--copyfoto-gmail-border) !important;
  border-radius: .55rem !important;
}

body.task-mail.action-compose .form-control:focus,
body.task-mail.action-compose .recipient-input.focus {
  border-color: #f3a6a9 !important;
  box-shadow: 0 0 0 3px rgba(239, 16, 24, .10) !important;
}

body.task-mail .popover,
body.task-mail .menu,
body.task-mail .popupmenu,
body.task-mail .ui-dialog,
body.task-mail .modal-content {
  border: 1px solid var(--copyfoto-gmail-border) !important;
  border-radius: .9rem !important;
  box-shadow: 0 8px 28px rgba(60, 64, 67, .24) !important;
}

body.task-mail .quota-widget .bar {
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e8eaed !important;
}

/* Desktop gets separated rounded panels; tablets keep Elastic's native flow. */
@media screen and (min-width: 1201px) {
  body:not(.task-login) #layout {
    gap: .55rem !important;
    padding: .55rem !important;
  }

  body:not(.task-login) #layout-menu,
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    height: calc(100vh - 1.1rem) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
  }

  body:not(.task-login) #layout-menu {
    flex: 0 0 6.5rem !important;
    width: 6.5rem !important;
    min-width: 6.5rem !important;
    max-width: 6.5rem !important;
  }

  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    box-shadow: var(--copyfoto-gmail-shadow) !important;
  }

  body.task-mail #layout-sidebar {
    flex: 0 0 15.5rem !important;
    width: 15.5rem !important;
    min-width: 15.5rem !important;
    max-width: 15.5rem !important;
  }

  body.task-mail #layout-list {
    flex: 0 0 31rem !important;
    width: 31rem !important;
    min-width: 27rem !important;
    max-width: 31rem !important;
  }
}

@media screen and (max-width: 1200px) {
  body:not(.task-login) #layout-menu,
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.task-login) #layout-menu .task-menu-button,
  body:not(.task-login) #layout-menu a.button {
    transition: none !important;
  }
}