* {
  box-sizing: border-box;
}
html, body {
  min-height: 100%;
}
body {
  margin: 0; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.5; color: #172033; background: #f1f3f6;
}
a {
  color: inherit; text-decoration: none;
}
.topbar {
  position: sticky; z-index: 100; top: 0; display: flex; width: 100%; height: 72px; color: #fff; background: #172033;
}
.topbar_inner {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 24px;
}
.topbar_left {
  display: flex; align-items: center; height: 100%;
}
.topbar_logo {
  display: flex; align-items: center; height: 100%; padding: 0 28px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: #fff;
}
.topbar_page {
  display: flex; align-items: center; gap: 22px; height: 100%; padding: 0 0 0 28px; border-left: 1px solid #394154;
}
.topbar_page h1 {
  margin: 0; font-size: 18px; line-height: 1.2; font-weight: 600; color: #fff;
}
.topbar_count {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; font-size: 13px; color: #c8cfda; background: #273146;
}
.topbar_count strong {
  font-size: 16px; color: #fff;
}
.topbar_menu {
  display: flex; align-items: center; gap: 24px; height: 100%; font-size: 13px; color: #b8c0ce;
}
.topbar_menu strong {
  font-weight: 600; color: #fff;
}
.topbar_logout {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; font-size: 13px; font-weight: 600; color: #fff; background: #354057;
}
.topbar_logout:hover {
  color: #fff; background: #46536c;
}
.content-main {
  width: 100%; padding: 24px;
}
.table-box {
  width: 100%; border: 1px solid #dce1e8; background: #fff;
}
.data-table {
  width: 100%; border-spacing: 0; border-collapse: collapse;
}
.data-table thead {
  position: sticky; z-index: 50; top: 72px;
}
.data-table th {
  height: 52px; padding: 0 22px; text-align: left; font-size: 12px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #657084; background: #e9edf2; border-bottom: 1px solid #d5dbe4;
}
.data-table td {
  height: 78px; padding: 14px 22px; vertical-align: middle; font-size: 15px; color: #414a5b; background: #fff; border-bottom: 1px solid #e2e6ec;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr:hover td {
  background: #f5f8fc;
}
.data-table td strong {
  font-weight: 700; color: #172033;
}
.data-table_action {
  width: 170px; text-align: right;
}
.data-table_shipping {
  width: 30%; min-width: 260px; max-width: 420px;
}
.data-table_empty {
  height: 120px !important; text-align: center; font-size: 15px; color: #7a8494;
}
.data-table_price {
  text-align: right; font-size: 15px; font-weight: 600; color: #172033;
}
.data-table_source {
  min-width: 130px; white-space: nowrap;
}
.data-table tbody tr.row-changed td {
  background: #fff6d8;
}
.data-table tbody tr.row-changed:hover td {
  background: #ffefb8;
}
.data-table tbody tr.row-completed {
  opacity: .5;
}
.data-table tbody tr.row-completed.row-changed {
  opacity: 1;
}
.order-number {
  display: flex; align-items: center; gap: 10px;
}
.table-main-text {
  font-size: 14px; line-height: 1.4; font-weight: 600; color: #273044;
}
.table-sub-text {
  margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: #8791a1;
}
.table-empty {
  color: #9da5b2;
}
.status {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; font-size: 13px; line-height: 1.2; font-weight: 600;
}
.status-waiting {
  color: #805d00; background: #fff0bd;
}
.status-active {
  color: #174f96; background: #deebff;
}
.status-done {
  color: #14673d; background: #dff3e8;
}
.status-changed {
  color: #8a3b00; background: #ffd9bd;
}
.working-user {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: #174f96; background: #deebff;
}
.button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 128px; height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; color: #fff; background: #246bfe; transition: background .2s;
}
.button:hover {
  color: #fff; background: #1558da;
}
.button-light {
  color: #243044; background: #e4e8ee;
}
.button-light:hover {
  color: #172033; background: #d3d9e2;
}