.loading-state[hidden],
.empty-state[hidden],
.table-wrap[hidden],
form[hidden],
[hidden] {
  display: none !important;
}

.form-message {
  margin: 0;
  color: var(--green);
  font-size: .86rem;
  line-height: 1.45;
}

.auth-copy {
  margin: 0 0 .25rem;
}

.auth-copy h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.auth-copy > p:last-child {
  margin: .7rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.text-button {
  justify-self: center;
  border: 0;
  padding: .25rem;
  background: transparent;
  color: var(--green);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button:hover {
  color: #0f6d50;
}

.copy-value {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  max-width: 100%;
  border: 0;
  border-radius: 6px;
  padding: .18rem .28rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.copy-value > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-value:hover,
.copy-value:focus-visible {
  background: #dff4eb;
  color: #0f6d50;
  outline: none;
}

.copy-value:focus-visible {
  box-shadow: 0 0 0 2px rgba(20, 129, 95, .28);
}

.copy-mark {
  color: var(--green);
  font-size: .78rem;
  opacity: .55;
}

.copy-value:hover .copy-mark,
.copy-value:focus-visible .copy-mark,
.copy-value.copied .copy-mark {
  opacity: 1;
}

.copy-value.copied {
  background: #dff4eb;
}

.inline-select,
.inline-date {
  width: 100%;
  min-width: 118px;
  max-width: 155px;
  border: 1px solid #cbd8d3;
  border-radius: 7px;
  padding: .38rem 1.65rem .38rem .5rem;
  background-color: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.inline-select.sim-type-select {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

.inline-date {
  min-width: 132px;
  padding-right: .45rem;
}

.tracking-app-select.app-Protrack {
  border-color: #a90000;
  background-color: #c00000;
  color: #fff;
}

.tracking-app-select.app-Mytrack {
  border-color: #d86517;
  background-color: #ed7d31;
  color: #171717;
}

.tracking-app-select option {
  background: #fff;
  color: var(--ink);
}

.inline-select.sim-type-xox,
.inline-select option.sim-type-xox,
.inline-select.gps-status-ok,
.inline-select option.gps-status-ok {
  border-color: #92d050;
  background-color: #92d050;
  color: #102208;
}

.inline-select.sim-type-roaming,
.inline-select option.sim-type-roaming {
  border-color: #ff99cc;
  background-color: #ff99cc;
  color: #351025;
}

.inline-select.sim-type-do1,
.inline-select option.sim-type-do1 {
  border-color: #ffff66;
  background-color: #ffff66;
  color: #262600;
}

.inline-select.sim-type-do2099,
.inline-select option.sim-type-do2099,
.inline-select.gps-status-reset,
.inline-select option.gps-status-reset {
  border-color: #87f175;
  background-color: #87f175;
  color: #102c0b;
}

.inline-select.sim-type-new-xox,
.inline-select option.sim-type-new-xox {
  border-color: #00b0f0;
  background-color: #00b0f0;
  color: #002733;
}

.inline-select.sim-type-new-roam,
.inline-select option.sim-type-new-roam {
  border-color: #e237ff;
  background-color: #e237ff;
  color: #300038;
}

.inline-select.gps-status-return,
.inline-select option.gps-status-return {
  border-color: #ffff00;
  background-color: #ffff00;
  color: #252500;
}

.inline-select.gps-status-lost,
.inline-select option.gps-status-lost {
  border-color: #66bab2;
  background-color: #66bab2;
  color: #0d2926;
}

.inline-select.gps-status-mistake,
.inline-select option.gps-status-mistake {
  border-color: #ff2121;
  background-color: #ff2121;
  color: #210000;
}

.inline-select.gps-status-recycle,
.inline-select option.gps-status-recycle {
  border-color: #5ec27f;
  background-color: #5ec27f;
  color: #0b2c16;
}

.inline-select.gps-status-dead,
.inline-select option.gps-status-dead {
  border-color: #979797;
  background-color: #979797;
  color: #171717;
}

.inline-select.gps-status-demo,
.inline-select option.gps-status-demo {
  border-color: #6a4ee0;
  background-color: #6a4ee0;
  color: #fff;
}

.inline-date-editor {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 132px;
}

.inline-date-save {
  border: 1px solid var(--green);
  border-radius: 7px;
  padding: .39rem .55rem;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
}

.inline-date-editor.dirty .inline-date {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(20, 129, 95, .12);
}

.inline-select:hover,
.inline-select:focus,
.inline-date:hover,
.inline-date:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(20, 129, 95, .12);
  outline: none;
}

.inline-select.saving,
.inline-date.saving {
  cursor: wait;
  opacity: .55;
}

.inline-select.saved,
.inline-date.saved {
  border-color: var(--green);
  background-color: #dff4eb;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}

.sort-button span {
  color: #71817b;
  font-size: .78rem;
}

.sort-button:hover,
.sort-button:focus-visible,
.sort-button.active {
  color: var(--green);
  outline: none;
}

.pagination {
  justify-content: space-between;
  flex-wrap: wrap;
}

.page-size-control,
.page-navigation,
.page-buttons {
  display: flex;
  align-items: center;
}

.page-size-control {
  gap: .5rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.page-size-control select {
  border: 1px solid #cbd8d3;
  border-radius: 8px;
  padding: .58rem .7rem;
  background: #fff;
  color: var(--ink);
}

.page-navigation {
  gap: .55rem;
}

.page-buttons {
  gap: .2rem;
}

.page-number {
  min-width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--green);
  font-weight: 750;
}

.page-number:hover,
.page-number:focus-visible {
  border-color: #b9d2c8;
  outline: none;
}

.page-number.active {
  background: var(--green);
  color: #fff;
}

.pagination .page-ellipsis {
  min-width: auto;
  padding: 0 .28rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px) {
  .pagination,
  .page-navigation {
    justify-content: center;
    width: 100%;
  }

  .page-size-control {
    justify-content: center;
    width: 100%;
  }

  .page-buttons .page-number:nth-of-type(n+6) {
    display: none;
  }
}