main {
  min-height: 80vh;
  background: linear-gradient(to bottom, #d4efd6 0%, #fff 100%);
  background-repeat: no-repeat;
  background-size: 100% 70vh;
  margin: 0;
}
.side-menu.bg-light {
  background-color: #fff !important;
  background-image: linear-gradient(to bottom, #d4efd6 0%, #fff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 70vh !important;
  background-position: top center !important;
  border: 0 !important;
}
nav.navbar.bg-white {
  background-color: #d4efd6 !important;
  background-image: linear-gradient(#fff, #fff) !important;
  background-repeat: no-repeat !important;
  background-size: 100% calc(100% - 4px) !important;
  background-position: top center !important;
}
header .bg-margenta {
  background-color: #d4efd6;
}
.navbar-brand > span > img[alt="Invest"],
.navbar-brand > span > img[alt="Invest-Teoset"] {
  width: 40px;
  height: calc(40px * 221 / 232);
  object-fit: cover;
  object-position: top center;
}
/* Широка таблиця заходить під меню приблизно до середини іконок і там зникає:
   фон меню прозорий (під ним той самий градієнт сторінки), таблиця продовжена вправо, меню — поверх неї. */
body main > .d-flex > .side-menu.bg-light {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
/* лише коли таблиця справді не вміщається (клас under-menu ставить table-fade.js: на телефоні — завжди, на ПК — лише широкій таблиці) */
body main > .d-flex > .flex-grow-1 .table-responsive.under-menu {
  margin-right: -2.25rem;
  padding-right: 2.25rem; /* у кінці прокрутки — прозорий відступ: таблиця повністю виходить з-під значків меню */
}
/* останній стовпчик — з відступом справа, щоб не ховався під меню (і його кнопки можна було натиснути) */
body main > .d-flex > .flex-grow-1 .table-responsive.under-menu > table > * > tr > :last-child {
  padding-right: 0.5rem;
}
body main > .d-flex > .flex-grow-1 .table-responsive.under-menu.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.25rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3.25rem), transparent);
}
/* Таблиця всередині картки (сторінка компанії тощо) лишається в межах картки — під меню не заходить */
body main > .d-flex > .flex-grow-1 .border .table-responsive {
  margin-right: 0;
}
body main > .d-flex > .flex-grow-1 .border .table-responsive > table > * > tr > :last-child,
body main > .d-flex > .flex-grow-1 .form-container .table-responsive > table > * > tr > :last-child {
  padding-right: 0.25rem;
}
body main > .d-flex > .flex-grow-1 .border .table-responsive.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
}
/* те саме для карток-блоків (account-grid: .form-container) */
body main > .d-flex > .flex-grow-1 .form-container .table-responsive {
  margin-right: 0;
}
body main > .d-flex > .flex-grow-1 .form-container .table-responsive.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
}

/* Темна тема (invest: <html data-bs-theme="dark">): той самий градієнт, але від темно-зеленого до фону сторінки */
[data-bs-theme="dark"] main {
  background: linear-gradient(to bottom, #173323 0%, var(--bs-body-bg) 100%);
  background-repeat: no-repeat;
  background-size: 100% 70vh;
}
[data-bs-theme="dark"] .side-menu.bg-light {
  background-color: var(--bs-body-bg) !important;
  background-image: linear-gradient(to bottom, #173323 0%, var(--bs-body-bg) 100%) !important;
}
[data-bs-theme="dark"] nav.navbar.bg-white {
  background-color: #173323 !important;
  background-image: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) !important;
}
[data-bs-theme="dark"] header .bg-margenta {
  background-color: #173323;
}