@media (max-width: 1280px) {
  .payments-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  }

  .payments-toolbar__actions {
    justify-content: flex-start;
  }

  .payments-onec-export-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payments-onec-export-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1120px) {
  body.payments-shell-compact,
  body.payments-shell-compact .bx-layout-table,
  body.payments-shell-compact .bx-layout-header,
  body.payments-shell-compact .bx-layout-cont,
  body.payments-shell-compact #panel,
  body.payments-shell-compact #bx-panel,
  body.payments-shell-compact #bx-panel-top,
  body.payments-shell-compact #bx-panel-userinfo,
  body.payments-shell-compact #header,
  body.payments-shell-compact #header-inner,
  body.payments-shell-compact .page-header,
  body.payments-shell-compact .page-navigation,
  body.payments-shell-compact .page-toolbar {
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.payments-shell-compact .bx-layout-table,
  body.payments-shell-compact .bx-layout-header,
  body.payments-shell-compact .bx-layout-cont,
  body.payments-shell-compact #panel,
  body.payments-shell-compact #bx-panel,
  body.payments-shell-compact #bx-panel-top,
  body.payments-shell-compact #bx-panel-userinfo,
  body.payments-shell-compact #header,
  body.payments-shell-compact #header-inner {
    width: 100vw !important;
  }

  body.payments-shell-compact .page-header,
  body.payments-shell-compact .page-navigation,
  body.payments-shell-compact .page-toolbar {
    width: auto !important;
  }

  .bx-layout-inner-center,
  #content-table,
  .bx-layout-inner-inner-table,
  .bx-layout-inner-inner-cont,
  .workarea,
  #workarea-content,
  .workarea-content-paddings,
  #footer {
    min-width: 0 !important;
    width: calc(100vw - 142px) !important;
    max-width: calc(100vw - 142px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .payments-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .payments-header,
  .payments-card-columns,
  .payments-toolbar {
    grid-template-columns: 1fr;
  }

  .payments-pagination {
    display: grid;
    align-items: stretch;
  }

  .payments-pagination__controls {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) {
  .payments-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .payments-table,
  .payments-table thead,
  .payments-table tbody,
  .payments-table tr,
  .payments-table th,
  .payments-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .payments-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .payments-table tbody {
    display: grid;
    gap: 10px;
  }

  .payments-table tr {
    padding: 10px;
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: var(--pay-surface);
  }

  .payments-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--pay-border);
  }

  .payments-table td:last-child {
    border-bottom: 0;
  }

  .payments-table td::before {
    content: attr(data-label);
    color: var(--pay-subtle);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .payments-table .payments-status,
  .payments-table .payments-sync {
    justify-self: start;
    max-width: min(100%, 240px);
  }

  .payments-view--calendar.is-active .payments-planner,
  .payments-calendar {
    height: auto;
    min-height: 0;
  }

  .payments-calendar {
    grid-template-rows: auto auto auto;
  }

  .payments-calendar__header,
  .payments-calendar-budget {
    grid-template-columns: 1fr;
  }

  .payments-calendar__controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .payments-calendar-budget__grid {
    display: grid;
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding: 8px;
  }

  .payments-budget-card {
    flex-basis: auto;
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) repeat(3, minmax(80px, 0.62fr));
  }

  .payments-calendar-item {
    padding: 6px;
  }

  .payments-calendar-item__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .payments-calendar__grid {
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 8px;
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    min-height: 0;
  }

  .payments-calendar-day {
    min-height: 0;
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: var(--pay-surface);
  }

  .payments-calendar-day__items {
    gap: 7px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  #bx-im-bar {
    display: none !important;
  }

  .bx-layout-inner-table,
  .bx-layout-inner-top-row {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  #layout-left-column.bx-layout-inner-left {
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    overflow: hidden !important;
  }

  #content-table.bx-layout-inner-center {
    width: calc(100vw - 65px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 65px) !important;
  }

  #content-table .bx-layout-inner-inner-table,
  #content-table .bx-layout-inner-inner-cont,
  #content-table .workarea,
  #content-table #workarea-content,
  #content-table .workarea-content-paddings {
    width: calc(100vw - 81px) !important;
    max-width: calc(100vw - 81px) !important;
  }

  .payments-page {
    padding: 0 8px 24px;
  }

  .payments-header {
    padding: 14px;
  }

  .payments-title {
    font-size: 23px;
  }

  .payments-summary,
  .payments-card-summary,
  .payments-form-grid,
  .payments-request-card dl {
    grid-template-columns: 1fr;
  }

  .payments-table-wrap {
    display: none;
  }

  .payments-mobile-list {
    display: grid;
    gap: 10px;
  }

  .payments-modal {
    padding: 10px;
  }

  .payments-modal__dialog {
    max-height: calc(100vh - 20px);
  }

  .payments-upload {
    grid-template-columns: 1fr;
  }

  .payments-pagination,
  .payments-onec-export-form {
    grid-template-columns: 1fr;
  }

  .payments-pagination__controls {
    flex-wrap: wrap;
  }

  .payments-role-form {
    grid-template-columns: 1fr;
  }

  .payments-tabs {
    gap: 10px;
  }

  .payments-calendar__title {
    display: grid;
    gap: 4px;
  }

  .payments-calendar__title strong {
    display: grid;
    gap: 2px;
    white-space: normal;
  }

  .payments-calendar__title strong span {
    display: none;
  }

  .payments-calendar__title {
    display: none;
  }

  .payments-calendar__header {
    gap: 6px;
    min-height: 0;
    padding: 6px;
  }

  .payments-calendar__controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    width: 100%;
  }

  .payments-calendar__controls .payments-btn {
    min-width: 0;
    padding: 0 8px;
  }

  .payments-calendar__mode,
  .payments-calendar__group,
  .payments-calendar__view {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  .payments-calendar--day .payments-calendar__group {
    display: none;
  }

  .payments-calendar-date,
  .payments-calendar-org-filter {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    min-width: 0;
    width: 100%;
  }

  .payments-calendar-date span,
  .payments-calendar-org-filter span {
    display: none;
  }

  .payments-calendar__mode button,
  .payments-calendar__group button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 6px;
  }

  .payments-calendar-budget {
    padding: 0;
  }

  .payments-calendar-budget__head {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--pay-border);
  }

  .payments-calendar-budget__head strong {
    display: none;
    text-align: left;
    white-space: normal;
  }

  .payments-budget-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: var(--pay-surface);
  }

  .payments-budget-card + .payments-budget-card {
    margin-top: 8px;
  }

  .payments-budget-card__org,
  .payments-budget-card__account,
  .payments-budget-card__metrics > div {
    width: 100%;
    padding: 6px 8px;
    border-left: 0;
    border-top: 1px solid var(--pay-border);
  }

  .payments-budget-card__org {
    border-top: 0;
  }

  .payments-budget-card dl.payments-budget-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }

  .payments-budget-card__metrics > div {
    display: grid;
    gap: 2px;
    align-items: start;
    min-width: 0;
    border-top: 1px solid var(--pay-border);
    border-left: 1px solid var(--pay-border);
  }

  .payments-budget-card__metrics > div:first-child {
    border-left: 0;
  }

  .payments-budget-card dt {
    flex: 0 0 auto;
    font-size: 9px;
  }

  .payments-budget-card dd {
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
    text-align: left;
  }

  .payments-budget-meter {
    display: block;
    height: 3px;
    margin-top: 0;
  }

  .payments-budget-card > * {
    min-width: 0;
    max-width: 100%;
  }

  .payments-calendar-object-group__head {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .payments-calendar-item__top,
  .payments-calendar-item__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .payments-calendar-paid {
    white-space: normal;
  }

  .payments-calendar-popover {
    width: min(240px, 100%);
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  .payments-calendar__grid--swimlanes {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .payments-calendar-board-head {
    display: none;
  }

  .payments-calendar-swimlane {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px;
  }

  .payments-calendar-swimlane__meta {
    grid-template-rows: auto;
  }

  .payments-calendar-accounts {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .payments-calendar-swimlane__days {
    grid-template-columns: 1fr;
  }

  .payments-calendar-day--cell {
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .payments-calendar-day--cell > .payments-calendar-cell__head {
    display: grid;
    gap: 4px;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(107, 168, 204, 0.16);
    background: rgba(4, 20, 29, 0.34);
  }

  .payments-calendar-cell__head time {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
  }

  .payments-calendar-cell__head time span {
    color: var(--pay-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .payments-calendar-cell__head time strong {
    color: var(--pay-text);
    font-size: 17px;
    line-height: 1;
  }

  .payments-calendar-cell__head time em,
  .payments-calendar-cell__head small {
    min-width: 0;
    color: var(--pay-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .payments-calendar-budget--formula {
    display: none;
  }

  .payments-calendar-account-row dl {
    grid-template-columns: 1fr;
  }

  .payments-calendar-account-row dd {
    font-size: 12px;
  }
}