/* ============================================================
   Roundcube "Outlook" Theme
   Overrides elastic skin with Outlook-inspired look & feel
   ============================================================ */

:root {
  --outlook-blue: #0078d4;
  --outlook-blue-dark: #005a9e;
  --outlook-blue-light: #deecf9;
  --outlook-blue-hover: #106ebe;
  --outlook-bg: #f3f2f1;
  --outlook-sidebar-bg: #faf9f8;
  --outlook-white: #ffffff;
  --outlook-border: #edebe9;
  --outlook-text: #323130;
  --outlook-text-secondary: #605e5c;
  --outlook-selected: #e1dfdd;
  --outlook-danger: #d13438;
}

/* ------ Global color overrides ------ */
/* Kill all elastic teal/dark-green colors globally */

/* #2c363a (dark teal text) → black */
/* #45555c (selected/hover bg) → outlook selected gray */
/* #2f3a3f (dark backgrounds) → outlook blue (for task menu) or white */
/* #374549 (dark mode bg) → white */
/* #21292c (darkest bg) → white */
/* #37beff (elastic accent blue) → outlook blue */

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
  color: #000000 !important;
  background-color: var(--outlook-bg) !important;
}

/* Global: any element using elastic's teal text color */
* {
  --color-main: #0078d4;
}

/* Override elastic accent color everywhere */
a, .link, a:visited {
  color: var(--outlook-blue) !important;
}

/* All icons, pseudo-elements — force black unless inside task menu */
*::before, *::after {
  color: inherit;
}

/* Active/selected states for toolbar icons, wysiwyg buttons, etc. */
a.button.selected,
a.button.active,
a.button:active,
.toolbar a.selected,
.toolbar a.active,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn:active,
.tox .tox-tbtn:focus,
.tox .tox-tbtn--select,
.tox .tox-split-button:focus,
.googie_list li:hover,
.menu a.active,
.menu a.selected,
.listing li.active a,
.popupmenu a.active,
.popupmenu a:hover {
  background-color: var(--outlook-selected) !important;
  color: #000000 !important;
}

.tox .tox-tbtn--enabled::before,
.tox .tox-tbtn:active::before {
  color: #000000 !important;
}

/* Links inside content areas */
#layout-content a,
#layout-list a,
#layout-sidebar a:not(#layout-menu a) {
  color: var(--outlook-blue) !important;
}

/* Ensure folder list links stay themed */
.folderlist li a,
.treelist li a {
  color: #000000 !important;
}

/* ------ Left Task Menu (vertical icon bar) ------ */
#layout-menu {
  background-color: var(--outlook-blue) !important;
}

#layout-menu .inner {
  background-color: var(--outlook-blue) !important;
}

/* Task menu buttons */
#layout-menu a.button,
#layout-menu a.button .inner,
#layout-menu a.button span {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#layout-menu a.button:hover,
#layout-menu a.button:hover .inner,
#layout-menu a.button:hover span {
  color: #ffffff !important;
  background-color: transparent !important;
  background: none !important;
}

#layout-menu a.button.selected,
#layout-menu a.button.selected .inner,
#layout-menu a.button.selected span {
  color: #ffffff !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
}

#layout-menu a.button.selected {
  border-left: 3px solid #ffffff !important;
}

/* Remove any focus/active highlight boxes */
#layout-menu a.button:focus,
#layout-menu a.button:active,
#layout-menu a.button:focus .inner,
#layout-menu a.button:active .inner {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Roundcube logo header must stay Outlook blue in both modes */
body #layout-menu .popover-header,
html body #layout-menu .popover-header,
html.dark-mode body #layout-menu .popover-header,
html.layout-large body #layout-menu .popover-header,
html.layout-normal body #layout-menu .popover-header,
html.layout-small body #layout-menu .popover-header,
html.layout-phone body #layout-menu .popover-header,
#layout-menu .popover-header {
  background: #0078d4 !important;
  background-color: #0078d4 !important;
  border: none !important;
}

html #layout-menu .popover-header img,
html.dark-mode #layout-menu .popover-header img,
img#logo,
#logo {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Special buttons at bottom (Light mode, About, Logout) */
#layout-menu .special-buttons,
#layout-menu .special-buttons a.button,
#layout-menu .special-buttons a.button .inner {
  background-color: transparent !important;
  background: none !important;
}

/* Override elastic #taskmenu styles */
#taskmenu a {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

#taskmenu span.inner {
  color: rgba(255, 255, 255, 0.85) !important;
}

#taskmenu a:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

#taskmenu a.selected {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-left: 3px solid #ffffff !important;
}

#taskmenu a.selected:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

#taskmenu .special-buttons {
  background: transparent !important;
  background-color: transparent !important;
}

#taskmenu .action-buttons a {
  background: transparent !important;
  color: #37beff !important;
}

#taskmenu .action-buttons a:hover {
  background: transparent !important;
}

#taskmenu a.logout {
  color: #ff5552 !important;
}

#taskmenu a.logout:hover {
  background: transparent !important;
}

/* ------ Headers / Toolbars ------ */
#layout > div > .header {
  background-color: var(--outlook-white) !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  box-shadow: none !important;
}

.header-title {
  color: var(--outlook-text) !important;
  font-weight: 600 !important;
}

/* Toolbar icon buttons (Select, Threads, Options, Refresh, Reply, Forward, etc.) */
#layout > div > .header a.button,
.toolbar a.button,
#layout-content > .header a.button,
#layout-list > .header a.button {
  background-color: transparent !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 4px !important;
}

#layout > div > .header a.button:hover,
.toolbar a.button:hover,
#layout-content > .header a.button:hover,
#layout-list > .header a.button:hover {
  background-color: var(--outlook-selected) !important;
  color: #000000 !important;
}

/* Make toolbar button labels visible */
#layout > div > .header a.button::after,
.toolbar a.button::after {
  color: #000000 !important;
}

/* The "before" pseudo icons */
#layout > div > .header a.button::before,
.toolbar a.button::before,
#layout-content > .header a.button::before,
#layout-list > .header a.button::before {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Disabled toolbar buttons */
#layout > div > .header a.button.disabled,
.toolbar a.button.disabled {
  color: #c8c6c4 !important;
  opacity: 0.5 !important;
}

#layout > div > .header a.button.disabled::before,
.toolbar a.button.disabled::before {
  color: #c8c6c4 !important;
}

/* ------ Sidebar / Folder List ------ */
#layout-sidebar {
  background-color: var(--outlook-sidebar-bg) !important;
  border-right: 1px solid var(--outlook-border) !important;
}

#layout-sidebar .header {
  background-color: var(--outlook-sidebar-bg) !important;
  border-bottom: 1px solid var(--outlook-border) !important;
}

/* Folder items */
.folderlist li a,
.treelist li a {
  color: var(--outlook-text) !important;
  border-radius: 4px !important;
}

.folderlist li a:hover,
.treelist li a:hover {
  background-color: var(--outlook-selected) !important;
}

.folderlist li.selected > a,
.treelist li.selected > a {
  background-color: var(--outlook-blue-light) !important;
  color: var(--outlook-blue-dark) !important;
  font-weight: 600 !important;
}

/* Folder icons */
.folderlist li a::before,
.treelist li a::before {
  color: var(--outlook-text-secondary) !important;
}

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

/* Unread badge */
.folderlist .unreadcount {
  background-color: var(--outlook-blue) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  min-width: 18px !important;
}

/* ------ Message List ------ */
#layout-list {
  background-color: var(--outlook-white) !important;
}

#layout-list .header {
  background-color: var(--outlook-white) !important;
}

.messagelist {
  background-color: var(--outlook-white) !important;
}

.messagelist tr {
  border-bottom: 1px solid var(--outlook-border) !important;
}

/* Force list/grid separators to black for readability across views */
.messagelist tr,
.listing tr,
.listing td,
.folderlist li,
.treelist li {
  border-color: #000000 !important;
}

.messagelist tr:hover {
  background-color: #f5f5f5 !important;
}

.messagelist tr.selected {
  background-color: var(--outlook-blue-light) !important;
}

.messagelist tr.selected td {
  color: #000000 !important;
}

/* All message list text - black */
.messagelist td,
.messagelist td a,
.messagelist td span,
.messagelist td.subject,
.messagelist td.subject a,
.messagelist td.subject span,
.messagelist td.fromto,
.messagelist td.date,
.messagelist td.size {
  color: #000000 !important;
}

/* Unread messages - bold like Outlook */
.messagelist tr.unread td,
.messagelist tr.unread td a,
.messagelist tr.unread td span,
.messagelist tr.unread td.subject,
.messagelist tr.unread td.subject a,
.messagelist tr.unread td.subject span {
  font-weight: 600 !important;
  color: #000000 !important;
}

.messagelist tr.unread td.subject span.msgicon.status {
  border-left: 3px solid var(--outlook-blue) !important;
}

/* Flagged messages */
.messagelist tr.flagged td.subject span.flagged {
  color: var(--outlook-danger) !important;
}

/* ------ Reading Pane / Content ------ */
#layout-content {
  background-color: #ffffff !important;
  border-left: 1px solid var(--outlook-border) !important;
}

#layout-content > .header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
}

#layout-content .content,
#layout-content .formcontent,
#layout-content .iframe-wrapper,
#layout-content iframe,
.message-htmlpart,
.message-part,
#message-content,
#messagebody {
  background-color: #ffffff !important;
}

/* ------ Primary Action Buttons (Send, Save, etc.) ------ */
.btn-primary,
.formbuttons .btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--outlook-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
}

.btn-primary:hover {
  background-color: var(--outlook-blue-hover) !important;
}

.btn-primary:active {
  background-color: var(--outlook-blue-dark) !important;
}

.btn-secondary {
  background-color: var(--outlook-white) !important;
  color: var(--outlook-text) !important;
  border: 1px solid #8a8886 !important;
  border-radius: 4px !important;
}

.btn-secondary:hover {
  background-color: #f3f2f1 !important;
}

.btn-danger {
  background-color: var(--outlook-danger) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
}

/* Compose floating action button */
.floating-action-buttons a.button.compose {
  background-color: var(--outlook-blue) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.floating-action-buttons a.button.compose:hover {
  background-color: var(--outlook-blue-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ------ Compose Window ------ */
#compose-subject {
  border: 1px solid var(--outlook-border) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

#compose-subject:focus {
  border-color: var(--outlook-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2) !important;
}

.recipient-input {
  border: 1px solid var(--outlook-border) !important;
  border-radius: 4px !important;
}

.recipient-input:focus-within {
  border-color: var(--outlook-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2) !important;
}

.recipient-input li.recipient {
  background-color: var(--outlook-blue-light) !important;
  color: var(--outlook-blue-dark) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
}

/* ------ Search Bar ------ */
.searchbar input {
  border: 1px solid var(--outlook-border) !important;
  border-radius: 4px !important;
  background-color: #f3f2f1 !important;
}

.searchbar input:focus {
  border-color: var(--outlook-blue) !important;
  background-color: var(--outlook-white) !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2) !important;
}

/* ------ Dialogs / Popups ------ */
.popupmenu,
.ui-dialog {
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--outlook-border) !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.ui-dialog .ui-dialog-titlebar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  color: #000000 !important;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  color: #000000 !important;
}

.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-content p,
.ui-dialog .ui-dialog-content span,
.ui-dialog .ui-dialog-content label {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background-color: #ffffff !important;
  border-top: 1px solid var(--outlook-border) !important;
}

.ui-dialog .ui-dialog-buttonpane .btn-primary,
.ui-dialog .ui-dialog-buttonpane button.btn-primary {
  background-color: var(--outlook-blue) !important;
  color: #ffffff !important;
  border: none !important;
}

.ui-dialog .ui-dialog-buttonpane .btn-secondary,
.ui-dialog .ui-dialog-buttonpane button.btn-secondary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #8a8886 !important;
}

/* Alert/confirmation message icons */
.ui-dialog .ui.alert,
.ui-dialog .ui.alert > i.icon,
.ui-dialog .ui.alert > i.icon::before {
  color: #000000 !important;
}

.ui-dialog .ui.alert.warning > i.icon::before {
  color: #ffd452 !important;
}

.ui-dialog .ui.alert.error > i.icon::before {
  color: var(--outlook-danger) !important;
}

/* Popupmenu items */
.popupmenu ul.menu li a,
.popupmenu ul.menu li a::before {
  color: #000000 !important;
}

.popupmenu ul.menu li a:hover {
  background-color: var(--outlook-selected) !important;
}

/* ------ Form Inputs (Settings, etc.) ------ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  border: 1px solid #8a8886 !important;
  border-radius: 4px !important;
  color: var(--outlook-text) !important;
  background-color: var(--outlook-white) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--outlook-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2) !important;
}

/* ------ Scrollbars (Webkit) ------ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #c8c6c4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a19f9d;
}

/* ------ Listing Rows (Contacts, Settings, Sent, etc.) ------ */
.listing tr:hover,
.listing li:hover {
  background-color: #f5f5f5 !important;
}

.listing tr.selected td,
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a,
.popupmenu .listing li.selected {
  background-color: var(--outlook-blue-light) !important;
  color: #000000 !important;
}

.listing.selection-large-only li.selected {
  background-color: var(--outlook-blue-light) !important;
  color: #000000 !important;
}

/* Selected message in message list */
.messagelist tr.selected td,
.messagelist tr.selected td a,
.messagelist tr.selected td span,
.messagelist tr.selected td.subject a,
.messagelist tr.selected td.subject span,
.messagelist tr.selected td.subject span.msgicon.status {
  color: #000000 !important;
  background-color: var(--outlook-blue-light) !important;
}

/* Focused states — replace elastic teal with outlook blue */
.form-control:focus,
.custom-file-input:focus ~ .custom-file-label,
div.tox.focused,
.recipient-input.focus,
.multi-input > .content.focused {
  border-color: var(--outlook-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(0, 120, 212, 0.2) !important;
}

/* UI menu active state */
.ui-menu .ui-state-active {
  background-color: var(--outlook-blue) !important;
  color: #ffffff !important;
}

/* Datepicker */
.ui-datepicker .ui-state-highlight {
  background: var(--outlook-blue-light) !important;
  color: var(--outlook-blue) !important;
}

.ui-datepicker a.ui-state-active {
  background: var(--outlook-blue) !important;
  color: #ffffff !important;
}

/* Dark mode selected overrides */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td {
  color: #000000 !important;
  background-color: var(--outlook-blue-light) !important;
}

html.dark-mode .messagelist tr.selected td,
html.dark-mode .messagelist tr.selected td a,
html.dark-mode .messagelist tr.selected td span,
html.dark-mode .messagelist tr.selected td.subject a,
html.dark-mode .messagelist tr.selected td.subject span.msgicon.status {
  color: #000000 !important;
  background-color: var(--outlook-blue-light) !important;
}

/* ------ Footer ------ */
#layout > div > .footer {
  background-color: var(--outlook-white) !important;
  border-top: 1px solid var(--outlook-border) !important;
}

/* ------ Force light mode (override dark-mode detection) ------ */
html.dark-mode body,
html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout > div > .header {
  background-color: var(--outlook-white) !important;
  color: var(--outlook-text) !important;
  border-color: var(--outlook-border) !important;
}

html.dark-mode .messagelist,
html.dark-mode .folderlist li a,
html.dark-mode .treelist li a,
html.dark-mode .listing td,
html.dark-mode .listing li a {
  color: var(--outlook-text) !important;
}

html.dark-mode #layout-menu {
  background-color: var(--outlook-blue) !important;
}

html.dark-mode #layout-menu a.button {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ------ Compose form icons (pencil, contacts, plus, etc.) ------ */
#compose-content a.button,
#compose-content a.button.icon,
#compose-content a.icon,
.compose-headers a.button,
.compose-headers a.icon,
.input-group a.icon,
.input-group-append a,
.input-group-append a::before,
#compose-content a.button::before,
#compose-content a.icon::before,
.compose-headers a::before {
  color: #000000 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Compose options (return receipt, delivery status, priority, etc.) */
#compose-options label,
#compose-options span,
#compose-options a,
#compose-options .custom-control-label,
.compose-options label,
.compose-options span,
.formcontent label {
  color: #000000 !important;
}

/* Toggle switch - off state (gray track, white knob) */
.custom-switch .custom-control-label::before {
  background-color: #c8c6c4 !important;
  border-color: #a19f9d !important;
}

.custom-switch .custom-control-label::after {
  background-color: #ffffff !important;
}

/* Toggle switch - on state (light blue track) */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--outlook-blue) !important;
  border-color: var(--outlook-blue) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #ffffff !important;
}

/* ------ Compose / TinyMCE Editor ------ */
.tox.tox-tinymce,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar,
.tox .tox-menubar,
.tox .tox-statusbar,
.tox .tox-edit-area,
.tox .tox-edit-area__iframe,
.html-editor,
.html-editor .editor-toolbar,
#composebody,
#compose-body,
.mce-content-body {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

.tox .tox-tbtn,
.tox .tox-tbtn svg,
.tox .tox-tbtn__icon-wrap svg {
  color: #000000 !important;
  fill: #000000 !important;
}

.tox .tox-tbtn:hover {
  background-color: var(--outlook-selected) !important;
  color: #000000 !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--enabled .tox-tbtn__icon-wrap svg,
.tox .tox-tbtn:focus,
.tox .tox-tbtn:active {
  background-color: var(--outlook-blue-light) !important;
  color: #000000 !important;
  fill: #000000 !important;
}

.tox .tox-toolbar__group {
  border-color: var(--outlook-border) !important;
}

/* TinyMCE dropdowns and menus */
.tox .tox-menu,
.tox .tox-collection__item,
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__footer,
.tox .tox-selectfield select,
.tox .tox-listbox {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.tox .tox-collection__item--active,
.tox .tox-collection__item:hover {
  background-color: var(--outlook-selected) !important;
  color: #000000 !important;
}

/* Force compose form white background */
.formcontent,
#compose-content,
#composebodycontainer {
  background-color: #ffffff !important;
}

/* To/CC/BCC input fields */
.recipient-input,
.recipient-input .input,
.recipient-input input,
.recipient-input ul,
.multi-input,
.multi-input > .content,
.multi-input > .content.focused,
.tagedit-list,
.tagedit-list li input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #8a8886 !important;
}

html.dark-mode .recipient-input,
html.dark-mode .recipient-input .input,
html.dark-mode .recipient-input input,
html.dark-mode .recipient-input ul,
html.dark-mode .multi-input,
html.dark-mode .multi-input > .content,
html.dark-mode .multi-input > .content.focused,
html.dark-mode .tagedit-list,
html.dark-mode .tagedit-list li input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #8a8886 !important;
}

/* Dark mode overrides for compose */
html.dark-mode .tox.tox-tinymce,
html.dark-mode .tox .tox-toolbar__primary,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-menubar,
html.dark-mode .tox .tox-statusbar,
html.dark-mode .tox .tox-edit-area,
html.dark-mode .tox .tox-edit-area__iframe,
html.dark-mode .html-editor,
html.dark-mode #composebody,
html.dark-mode .formcontent,
html.dark-mode #compose-content {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

html.dark-mode .tox .tox-tbtn,
html.dark-mode .tox .tox-tbtn svg {
  color: #000000 !important;
  fill: #000000 !important;
}

/* ------ Responsive tweaks ------ */
@media (max-width: 768px) {
  #layout-menu {
    height: 48px !important;
  }
}