.users-shell {
  color: #000;
  padding: 0;
}

.users-page.left {
  box-sizing: border-box;
  float: none;
  left: 0;
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.users-shell h1 {
  color: green;
  margin: 0 0 8px;
}

.users-toolbar {
  align-items: end;
  background: #efefef;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
}

.users-toolbar-group {
  flex: 1 1 220px;
}

.users-toolbar label {
  color: #333;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.users-toolbar input,
.users-toolbar select,
.users-toolbar button {
  background: #fff;
  border: 1px solid #bcbcbc;
  color: #000;
  min-height: 40px;
  padding: 9px 12px;
  width: 100%;
}

.users-toolbar button {
  background: #D4AF37;
  font-weight: 700;
}

.users-toolbar button:hover,
.users-pagination a:hover {
  background: #D4AF37;
  color: #000;
  text-decoration: none;
}

.users-summary {
  color: #333;
  margin-bottom: 14px;
}

.users-table-wrap {
  background: #efefef;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.users-table {
  margin-bottom: 0;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.users-table > thead > tr > th,
.users-table > tbody > tr > td {
  border-color: #c7c7c7;
  color: #000;
  overflow: hidden;
  padding: 8px 6px;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.users-table > thead > tr > th {
  background: #f6f6f6;
}

.users-table > thead > tr > th:nth-child(1),
.users-table > tbody > tr > td:nth-child(1) {
  width: 64px;
}

.users-table > thead > tr > th:nth-child(2),
.users-table > tbody > tr > td:nth-child(2) {
  width: 18%;
}

.users-table > thead > tr > th:nth-child(3),
.users-table > tbody > tr > td:nth-child(3),
.users-table > thead > tr > th:nth-child(4),
.users-table > tbody > tr > td:nth-child(4),
.users-table > thead > tr > th:nth-child(5),
.users-table > tbody > tr > td:nth-child(5),
.users-table > thead > tr > th:nth-child(6),
.users-table > tbody > tr > td:nth-child(6),
.users-table > thead > tr > th:nth-child(7),
.users-table > tbody > tr > td:nth-child(7),
.users-table > thead > tr > th:nth-child(8),
.users-table > tbody > tr > td:nth-child(8),
.users-table > thead > tr > th:nth-child(9),
.users-table > tbody > tr > td:nth-child(9),
.users-table > thead > tr > th:nth-child(10),
.users-table > tbody > tr > td:nth-child(10) {
  text-align: right;
  width: 6%;
}

.users-table > thead > tr > th:nth-child(11),
.users-table > tbody > tr > td:nth-child(11) {
  width: 9%;
}

.users-table > thead > tr > th:nth-child(12),
.users-table > tbody > tr > td:nth-child(12) {
  width: 20%;
}

.users-table > tbody > tr {
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.users-table > tbody > tr:hover,
.users-table > tbody > tr:focus-within {
  background: #fffde6;
  box-shadow: inset 3px 0 0 #d7c700;
}

.users-sort-link {
  color: #000;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  vertical-align: top;
}

.users-sort-link.active,
.users-sort-link:hover {
  color: green;
  text-decoration: none;
}

.users-avatar {
  background: #fff center/cover no-repeat;
  border: 1px solid #bcbcbc;
  border-radius: 50%;
  display: inline-block;
  height: 44px;
  width: 44px;
}

.users-card-list {
  display: none;
  gap: 14px;
  margin-top: 12px;
}

.users-card {
  background: #efefef;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  padding: 14px;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.users-card:hover,
.users-card:focus-within {
  background: #fffde6;
  border-color: #d7c700;
  transform: translateY(-1px);
}

.users-card-body {
  min-width: 0;
}

.users-card-title {
  color: green;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  text-decoration: none;
  word-break: break-word;
}

.users-card-meta,
.users-card-description,
.users-empty,
.users-error {
  color: #333;
}

.users-card-description {
  margin-top: 8px;
  word-break: break-word;
}

.users-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.users-pagination-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.users-pagination-list a,
.users-pagination-list span {
  border-radius: 4px;
  min-width: 42px;
  text-decoration: none;
}

.users-pagination-list .users-page-link {
  background: #efefef;
  border: 1px solid #bcbcbc;
  color: #000;
  font-weight: 700;
  padding: 8px 12px;
  text-align: center;
}

.users-pagination-list .users-page-link:hover {
  background: #D4AF37;
  color: #000;
}

.users-pagination-list .users-page-link.active {
  background: #D4AF37;
  border-color: #a6a600;
  color: #000;
}

.users-pagination-list .users-page-link.disabled {
  color: #777;
  pointer-events: none;
}

.users-pagination-list .users-page-gap {
  color: #555;
  min-width: auto;
  padding: 8px 2px;
}

.users-pagination-summary {
  color: #333;
  font-weight: 700;
  margin-left: auto;
  text-align: center;
}

.users-pagination.is-hidden,
.users-pagination-summary.is-hidden {
  display: none;
}

.users-empty,
.users-error {
  background: #fff8c9;
  border: 1px solid #d9d08d;
  border-radius: 8px;
  display: none;
  margin-top: 16px;
  padding: 16px;
}

.users-empty.active,
.users-error.active {
  display: block;
}

.users-skeleton-row,
.users-card-skeleton {
  animation: users-skeleton 1.1s ease-in-out infinite alternate;
}

.users-skeleton-block,
.users-skeleton-line {
  background: linear-gradient(90deg, #e5e5e5 0%, #f6f6f6 50%, #e5e5e5 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  display: inline-block;
}

.users-skeleton-block {
  border: 1px solid #d6d6d6;
}

.users-skeleton-line {
  height: 12px;
  width: 100%;
}

.users-skeleton-line.short {
  width: 62%;
}

.users-skeleton-line.tiny {
  width: 44px;
}

.users-skeleton-row > td {
  vertical-align: middle;
}

.users-card-skeleton .users-card-body {
  display: grid;
  gap: 8px;
  width: 100%;
}

@keyframes users-skeleton {
  0% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .users-shell {
    padding: 14px;
  }

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

  .users-card-list {
    display: grid;
  }

  .users-pagination {
    align-items: flex-start;
  }

  .users-pagination-summary {
    margin-left: 0;
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .users-table > thead > tr > th:nth-child(10),
  .users-table > tbody > tr > td:nth-child(10) {
    display: none;
  }

  .users-table > thead > tr > th:nth-child(2),
  .users-table > tbody > tr > td:nth-child(2) {
    width: 24%;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .users-table > thead > tr > th,
  .users-table > tbody > tr > td {
    font-size: 12px;
    padding: 7px 4px;
  }

  .users-table > thead > tr > th:nth-child(1),
  .users-table > tbody > tr > td:nth-child(1) {
    width: 48px;
  }

  .users-avatar {
    height: 34px;
    width: 34px;
  }
}