:root {
  --primary: #007bff;
  --primary-light: #80bdff;
  --field-hover: #b3d7ff;
  --field: #e5f2ff;
  --secondary: #6c757d;
  --border-color: #dee2e6;
  --even-field: #dbe8f5;
  --even-line: #f5f5f5;
  --field-modified: #ffe5e5;
  --field-saved: #d6ffd6;
  --even-field-modified: #f5dbdb;
  --even-field-saved: #d1fad1;
}

body {
  overflow-y: scroll;
}

span.money span.cents {
  font-size: 75%;
  opacity: .75;
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 10em;
  left: 0;
  top: calc(-.25em - 2px);
  text-align: left;
  background: var(--secondary);
  color: white;
  padding: .25em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: 1s;
}
[data-tooltip]:hover::after {
  opacity: 1;
  left: calc(100% + .25em);
}

.SearchListWidget div.list div.item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.SearchListWidget div.item.selected,
.SearchListWidget div.item:hover {
  background-color: var(--border-color);
}
.SearchListWidget div.clear,
.SearchListWidget div.more {
  font-style: italic;
  color: var(--secondary);
}

.TableWidget td.editable:not(.colFixed) {
  position: relative;
}
.TableWidget td.editing,
.ui-autocomplete {
  z-index: 1111!important;
}

.FieldWidget.editable,
.TableWidget td.editable {
  background-image: linear-gradient(0deg, var(--field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--field) 0, rgba(255,255,255,0) .5em);
  cursor: pointer;
}
.FieldWidget.saved,
.TableWidget td.saved {
  background-image: linear-gradient(0deg, var(--field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--field-saved) 0, rgba(255,255,255,0) .5em);
}
.FieldWidget.modified,
.TableWidget td.modified {
  background-image: linear-gradient(0deg, var(--field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--field-modified) 0, rgba(255,255,255,0) .5em);
}
.FieldWidget.editable:hover,
.TableWidget td.editable:hover {
  background-image: linear-gradient(0deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--field-hover) 0, rgba(255,255,255,0) .5em)!important;
}

.ToggleWidget:not(.editable) button {
  display: none;
}

/* decoratedTable */
.decoratedTable.SimpleTableWidget tbody.header td,
.decoratedTable.FixedTableWidget table.header td {
  font-size: 80%;
  font-style: italic;
  color: var(--secondary);
  text-align: center;
  vertical-align: bottom;
  padding: .1em;
}
.decoratedTable.SimpleTableWidget tbody.header tr:last-child td,
.decoratedTable.SimpleTableWidget:not(.sorting) tbody.header tr:nth-child(2) td,
.decoratedTable.SimpleTableWidget:not(.sorting) tbody.header tr:nth-child(1) td[rowspan="2"],
.decoratedTable.FixedTableWidget table.header tr:last-child td,
.decoratedTable.FixedTableWidget:not(.sorting) table.header tr:nth-child(2) td,
.decoratedTable.FixedTableWidget:not(.sorting) table.header tr:nth-child(1) td[rowspan="2"] {
  border-bottom: 1px solid var(--secondary);
}
.decoratedTable.SimpleTableWidget tbody.header td[colspan],
.decoratedTable.FixedTableWidget table.header td[colspan] {
  padding: .1em .1em 0 .1em;
}
.decoratedTable.SimpleTableWidget tbody.header hr,
.decoratedTable.FixedTableWidget table.header hr {
  border: 0;
  border-bottom: 1px solid var(--secondary);
  margin: 0 .25em;
  padding-top: .25em;
}
.decoratedTable.SimpleTableWidget.sorting tbody.header tr:nth-child(2) td,
.decoratedTable.SimpleTableWidget.sorting tbody.header tr:nth-child(1) td[rowspan="2"],
.decoratedTable.FixedTableWidget.sorting table.header tr:nth-child(2) td,
.decoratedTable.FixedTableWidget.sorting table.header tr:nth-child(1) td[rowspan="2"] {
  padding-bottom: 0;
}
.decoratedTable.SimpleTableWidget tbody.header tr.sorting td,
.decoratedTable.FixedTableWidget table.header tr.sorting td {
  padding: 0;
}
.decoratedTable.SimpleTableWidget tbody.header tr.sorting td:not(.sysCell),
.decoratedTable.FixedTableWidget table.header tr.sorting td:not(.sysCell) {
  color: var(--border-color);
  cursor: pointer;
}
.decoratedTable.SimpleTableWidget tbody.header tr.sorting td.selected,
.decoratedTable.SimpleTableWidget tbody.header tr.sorting td:not(.sysCell):hover,
.decoratedTable.FixedTableWidget table.header tr.sorting td.selected,
.decoratedTable.FixedTableWidget table.header tr.sorting td:not(.sysCell):hover {
  color: var(--secondary);
}
.decoratedTable.SimpleTableWidget tbody.data td,
.decoratedTable.FixedTableWidget table.data td {
  padding: .25em;
}
.decoratedTable.SimpleTableWidget tbody.data tr:not(.blank) td:not(.noRightBorder):not(.rightBorder),
.decoratedTable.FixedTableWidget table.data tr:not(.blank) td:not(.noRightBorder):not(.rightBorder) {
  border-right: 1px solid var(--border-color);
}
.decoratedTable.SimpleTableWidget tbody.data tr:not(.blank) td.rightBorder,
.decoratedTable.FixedTableWidget table.data tr:not(.blank) td.rightBorder {
  border-right: 1px solid var(--secondary);
}
.decoratedTable.SimpleTableWidget tbody.data tr:not(.blank) td:first-child,
.decoratedTable.FixedTableWidget table.data tr:not(.blank) td:first-child {
  border-left: 1px solid var(--border-color);
}
.decoratedTable.SimpleTableWidget tbody.data tr:not(:last-child):not(.noBottomBorder) td,
.decoratedTable.FixedTableWidget table.data tr:not(:last-child):not(.noBottomBorder) td {
  border-bottom: 1px solid var(--border-color);
}
.decoratedTable.SimpleTableWidget tbody.footer td,
.decoratedTable.FixedTableWidget table.footer td {
  font-weight: 600;
  padding: .25em;
}
.decoratedTable.SimpleTableWidget tbody.data tr:last-child td {
  border-bottom: 1px solid var(--secondary);
}
.decoratedTable.FixedTableWidget table.footer tr:first-child td {
  border-top: 1px solid var(--secondary);
}
.decoratedTable.SimpleTableWidget tbody.data tr.hoverable:hover td,
.decoratedTable.FixedTableWidget table.data tr.hoverable:hover td {
  filter: brightness(80%);
  cursor: pointer;
}
.decoratedTable.SimpleTableWidget tbody.data tbody.hoverable:hover td,
.decoratedTable.FixedTableWidget table.data tbody.hoverable:hover td {
  filter: brightness(80%);
  cursor: pointer;
}

/* dataTable */
.dataTable table.data td.sys,
.dataTable table.data td.sysCell,
.dataTable table.footer td.sys,
.dataTable table.footer td.sysCell {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.dataTable table.data tr.line td.sys,
.dataTable table.data tr.officeBottom td.name {
  color: var(--primary-light);
  cursor: pointer;
}
.dataTable table.data tr.line td.sys:hover,
.dataTable table.data tr.officeBottom td.name:hover {
  color: var(--primary);
}
.dataTable table.data td.quantity,
.dataTable table.data td.price,
.dataTable table.data td.other,
.dataTable table.data td.total,
.dataTable table.data td.debt,
.dataTable table.data td.debtBegin,
.dataTable table.data td.debtEnd,
.dataTable table.data td.amount,
.dataTable table.data td.pay,
.dataTable table.footer td.quantity,
.dataTable table.footer td.price,
.dataTable table.footer td.other,
.dataTable table.footer td.total,
.dataTable table.footer td.debt,
.dataTable table.footer td.debtBegin,
.dataTable table.footer td.debtEnd,
.dataTable table.footer td.amount,
.dataTable table.footer td.pay {
  text-align: right;
}
.dataTable table.data td.sysCell,
.dataTable table.footer td.sysCell {
  color: silver;
}
.dataTable table.data td.price,
.dataTable table.footer td.price {
  color: var(--secondary);
}
.dataTable table.header td.tableTitle {
  text-align: left;
  vertical-align: top;
  color: black;
  font-size: 100%;
  font-weight: 600;
  font-style: normal;
  padding-top: 0;
  padding-bottom: 0;
}
.dataTable table.footer td.name {
  font-style: italic;
  color: var(--secondary);
}
.dataTable table.data tr.sectionTop td:not(.editable),
.dataTable table.data tr.officeTop td {
  background: linear-gradient(to bottom, var(--border-color) 0, white 1.5em);
}
.dataTable table.data tr.officeBottom td {
  background: linear-gradient(to top, var(--border-color) 0, white 1.5em);
}
.dataTable table.data tr.blank td {
  border-left: none;
  border-right: none;
  height: 5px;
}
.dataTable table.data tr.officeTop:not(.blank) td:not(:last-child),
.dataTable table.data tr.officeBottom:not(.blank) td:not(:last-child) {
  border-right: none!important;
}
.dataTable table.data tr.officeTop td.name {
  font-style: italic;
  font-weight: 600;
}
.dataTable table.data tr.line td.rightBorder,
.dataTable table.data tr.details td.rightBorder {
  border-right: 1px solid var(--secondary);
}
.dataTable table.data tr.details td {
  font-size: 80%;
  padding-top: .1em;
  padding-bottom: .1em;
}
.dataTable table.data tr.details td.name,
.dataTable table.data tr.details td.month {
  padding-left: 1em;
}
.dataTable table.data tr td.open {
  color: var(--border-color);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.dataTable table.data tr.line:not(.sectionTop):nth-child(even) td,
.dataTable table.data tr.details:nth-child(even) td {
  background-color: var(--even-line);
}
.dataTable table.data tr.line:not(.sectionTop):nth-child(even) td.editable {
  background-image: linear-gradient(0deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field) 0, rgba(255,255,255,0) .5em);
  cursor: pointer;
}
.dataTable table.data tr.line:not(.sectionTop):nth-child(even) td.saved {
  background-image: linear-gradient(0deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em);
}
.dataTable table.data tr.line:not(.sectionTop):nth-child(even) td.modified {
  background-image: linear-gradient(0deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em);
}
.dataTable table.data tr.line:not(.sectionTop):nth-child(even) td.editable:hover {
  background-image: linear-gradient(0deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--field-hover) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--field-hover) 0, rgba(255,255,255,0) .5em);
}

/* ClearableInputWidget */
.ClearableInputWidget .LabelWidget {
  color: var(--secondary);
}
.ClearableInputWidget .LabelWidget:hover {
  color: black;
}
.ClearableInputWidget .InputWidget {
  padding-right: 1.5em!important;
}

/* DateWidget */
.DateWidget .clear {
  color: var(--secondary);
}
.DateWidget .clear:hover {
  color: black;
}

/* DocWidget */
.DocWidget .FieldWidget.short,
.DocWidget .FieldWidget.number {
  width: 100px;
}
.DocWidget .FieldWidget.money {
  width: 150px;
}

.dataTable.firmReport table.data tr.line td {
  font-weight: 600;
}
.dataTable.firmReport table.data tr.line td,
.dataTable.firmReport table.footer tr td {
  font-size: 90%;
}
.dataTable.firmReport table.data tr.line td.month,
.dataTable.firmReport table.data tr.line td.name,
.dataTable.firmReport table.footer tr td.name {
  font-size: 100%;
}
.dataTable.firmReport table.header tr:first-child td.name {
  font-size: 100%;
  font-style: normal;
  color: black;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}
.dataTable.firmReport table.data td.sysCell,
.dataTable.firmReport table.footer td.sysCell {
  text-align: right;
}

.dataTable.cashDebt table.header tr:first-child td.name {
  font-size: 100%;
  font-style: normal;
  color: black;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}

.dataTable.clientReport table.data tr.line td,
.dataTable.clientReport table.footer tr td,
.dataTable.officeReport table.data tr.line td,
.dataTable.officeReport table.footer tr td {
  font-size: 90%;
}
.dataTable.dayData table.data tr td.total,
.dataTable.clientReport table.data tr td.total,
.dataTable.officeReport table.data tr td.total {
  font-weight: 600;
}
.dataTable.clientReport table.data tr.line td.name,
.dataTable.clientReport table.data tr.line td.open,
.dataTable.officeReport table.data tr.line td.name,
.dataTable.officeReport table.data tr.line td.open {
  cursor: pointer;
}

.dayPage > :not(:last-child) {
  margin-bottom: 3rem;
}

.dataTable.dayData table.data tr.line td.markCash:hover span.money::before,
.dataTable.dayData table.data tr.line td.markCard:hover span.money::before,
.dataTable.dayData table.data tr.line td.markBank:hover span.money::before,
.dataTable.dayData table.data tr.line td.markCash span.money:not(:empty)::before,
.dataTable.dayData table.data tr.line td.markCard span.money:not(:empty)::before,
.dataTable.dayData table.data tr.line td.markBank span.money:not(:empty)::before {
  position: absolute;
  top: -.2em;
  left: .2em;
  font-size: 80%;
  font-style: italic;
}
.dataTable.dayData table.data tr.line td.markCash:hover span.money::before,
.dataTable.dayData table.data tr.line td.markCard:hover span.money::before,
.dataTable.dayData table.data tr.line td.markBank:hover span.money::before {
  font-weight: 600;
}
.dataTable.dayData table.data tr.line td.markCash:hover span.money::before,
.dataTable.dayData table.data tr.line td.markCash span.money:not(:empty)::before {
  content: "Нал.";
  color: var(--green);
}
.dataTable.dayData table.data tr.line td.markCard:hover span.money::before,
.dataTable.dayData table.data tr.line td.markCard span.money:not(:empty)::before {
  content: "Карта";
  color: var(--yellow);
}
.dataTable.dayData table.data tr.line td.markBank:hover span.money::before,
.dataTable.dayData table.data tr.line td.markBank span.money:not(:empty)::before {
  content: "Банк";
  color: var(--red);
}

/* clientsDay */
.clientsDay table.header td.tableTitle {
  text-align: left;
  vertical-align: top;
  color: black;
  font-size: 100%;
  font-weight: 600;
  font-style: normal;
  padding-top: 0;
  padding-bottom: 0;
}
.clientsDay table.data tr.line td,
.clientsDay table.footer tr td {
  font-size: 90%;
}
.clientsDay table.data tr.line td.total {
  font-weight: 600;
}
.clientsDay table.data tr.line td {
  cursor: pointer;
}
.clientsDay table.data tr.details td {
  font-size: 80%;
  padding-top: .1em;
  padding-bottom: .1em;
}
.clientsDay table.data tr.link td {
  font-size: 70%;
  padding-top: .1em;
  padding-bottom: .1em;
  font-style: italic;
  color: silver;
}
.clientsDay table.data tr.link td.name:hover {
  cursor: pointer;
  color: black;
}
.clientsDay table.data tr.details td.name {
  padding-left: 1em;
}
.clientsDay table.data td.rightBorder {
  border-right: 1px solid var(--secondary);
}
.clientsDay table.data tr:not(:last-child) td {
  border-bottom: none!important;
}
.clientsDay table.data tbody:not(:last-child) tr:last-child td {
  border-bottom: 1px solid var(--border-color);
}
.clientsDay table.data tbody:nth-child(odd) td {
  background-color: white;
}
.clientsDay table.data tbody:nth-child(odd) tr.details:nth-child(even) td:not(.sys):not(.clientGroup):not(.debt):not(.debtBegin):not(.debtEnd) {
  background-color: var(--even-line);
}
.clientsDay table.data tbody:nth-child(odd) tr.details:nth-child(even) td.editable {
  background-image: linear-gradient(0deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field) 0, rgba(255,255,255,0) .5em);
}
.clientsDay table.data tbody:nth-child(odd) tr.details:nth-child(even) td.saved {
  background-image: linear-gradient(0deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field-saved) 0, rgba(255,255,255,0) .5em);
}
.clientsDay table.data tbody:nth-child(odd) tr.details:nth-child(even) td.modified {
  background-image: linear-gradient(0deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field-modified) 0, rgba(255,255,255,0) .5em);
}
.clientsDay table.data tbody:nth-child(even) td {
  background-color: var(--even-line);
}
.clientsDay table.data tbody:nth-child(even) td.editable {
  background-image: linear-gradient(0deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(90deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(180deg, var(--even-field) 0, rgba(255,255,255,0) .5em),
    linear-gradient(270deg, var(--even-field) 0, rgba(255,255,255,0) .5em);
}
.clientsDay table.data tbody:nth-child(even) tr.details:nth-child(even) td:not(.sys):not(.clientGroup):not(.debt):not(.debtBegin):not(.debtEnd) {
  background-color: white;
}
.clientsDay td.sys,
.clientsDay td.sysCell {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.clientsDay table.data td.sys {
  color: var(--border-color);
}
.clientsDay table.data tr.line:hover td.sys {
  color: var(--secondary);
}
.clientsDay table:not(.header) td.quantity,
.clientsDay table:not(.header) td.price,
.clientsDay table:not(.header) td.other,
.clientsDay table:not(.header) td.total,
.clientsDay table:not(.header) td.debt,
.clientsDay table:not(.header) td.debtBegin,
.clientsDay table:not(.header) td.debtEnd,
.clientsDay table:not(.header) td.amount,
.clientsDay table:not(.header) td.pay {
  text-align: right;
}
.clientsDay table:not(.header) td.sysCell {
  color: silver;
}
.clientsDay table:not(.header) td.price {
  color: var(--secondary);
}

/* mailClients */
.mailClients .LabelWidget strong {
  color: black;
}
.mailClients .SimpleTableWidget td {
  padding: 0 .25em;
}
.mailClients .SimpleTableWidget table {
  border: 1.5px solid var(--border-color);
  border-radius: .25rem;
}
.mailClients .SimpleTableWidget tr:first-child td:first-child {
  border-top-left-radius: .25rem;
}
.mailClients .SimpleTableWidget tr:first-child td:last-child {
  border-top-right-radius: .25rem;
}
.mailClients .SimpleTableWidget tr:last-child td:first-child {
  border-bottom-left-radius: .25rem;
}
.mailClients .SimpleTableWidget tr:last-child td:last-child {
  border-bottom-right-radius: .25rem;
}
.mailClients .SimpleTableWidget tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-color);
}
.mailClients .SimpleTableWidget tr:hover td {
  filter: brightness(80%);
  cursor: pointer;
}
.mailClients .SimpleTableWidget tr:not(.selected) td:not(.sys) {
  color: silver;
}

.clientsTable table.data td.favorite {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  color: var(--primary-light);
  cursor: pointer;
}
.clientsTable table.data td.favorite:hover {
  color: var(--primary);
}

/* FlexTableWidget */
.FlexTableWidget {
  display: flex;
  flex-direction: column;
  position: relative;
}
.FlexTableWidget .wSection {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.FlexTableWidget .wSection.wHeader {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}
.FlexTableWidget .wSection.wFooter {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
.FlexTableWidget .wSection > div {
  flex: 0 0 100px;
  overflow-wrap: anywhere;
  background-color: white;
  border: 1px solid silver;
  padding: 2px;
}
.FlexTableWidget .wSection > div:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
.FlexTableWidget .wButtons {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
}
.FlexTableWidget .wButton {
  position: absolute;
  top: 0;
  background-color: rgba(192, 192, 192, .75);
  border: 1px solid silver;
  padding: 2px 8px;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.FlexTableWidget .wButton.wLeft {
  left: 0;
}
.FlexTableWidget .wButton.wRight {
  right: 0;
}

.decoratedTable.FixedTableWidget table.header td.activeCell {
  cursor: pointer;
  color: var(--primary-light);
}
.decoratedTable.FixedTableWidget table.header td.activeCell:hover {
  color: var(--primary);
}