#page-audit-log {
  color:#182230
}

.audit-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:25px
}

.audit-header h1 {
  font-size:30px;
  letter-spacing:-.8px;
  margin:8px 0 10px
}

.audit-header p {
  font-size:13px;
  color:#667085;
  margin:0
}

.audit-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px
}

.audit-stats>div {
  border:1px solid #e4e7ec;
  border-radius:16px;
  background:#fff;
  padding:20px 22px;
  box-shadow:0 2px 4px #10182804
}

.audit-stats span {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#667085
}

.audit-stats strong {
  display:block;
  font-size:32px;
  font-weight:750;
  letter-spacing:-1px;
  margin:12px 0 8px
}

.audit-stats small {
  font-size:11px;
  color:#98a2b3
}

.audit-stats>div:nth-child(2) strong {
  color:#067647
}

.audit-stats>div:nth-child(3) strong {
  color:#b42318
}

.audit-panel {
  border:1px solid #e4e7ec;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 3px 8px #10182804
}

.audit-panel-heading {
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eaecf0;
  gap:12px
}

.audit-panel-heading h2 {
  font-size:16px;
  margin:0 0 6px;
  font-weight:700
}

.audit-panel-heading p {
  font-size:11px;
  margin:0;
  color:#667085
}

.audit-read-only {
  font-size:10px;
  color:#667085;
  white-space:nowrap;
  background:#f8fafc;
  border:1px solid #eaecf0;
  border-radius:20px;
  padding:6px 10px
}

.audit-filter {
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:20px 24px;
  background:#fcfcfd;
  border-bottom:1px solid #eaecf0
}

.audit-filter label {
  display:grid;
  gap:7px;
  font-size:11px;
  font-weight:650;
  color:#475467;
  margin:0;
  min-width:155px
}

.audit-filter input {
  height:40px;
  box-sizing:border-box;
  background:white;
  border:1px solid #d0d5dd;
  border-radius:9px;
  padding:8px 10px;
  font:inherit;
  font-size:12px;
  color:#344054
}

.audit-filter .btn,.audit-header .btn,.audit-pagination .btn {
  font-size:11px;
  padding:10px 14px;
  border-radius:9px;
  min-height:40px
}

.audit-panel [data-audit-note]:not(:empty) {
  margin:18px 24px;
  font-size:12px;
  color:#667085
}

.audit-panel .audit-error {
  padding:12px;
  border:1px solid #fecdca;
  border-radius:10px;
  color:#b42318!important;
  background:#fff5f4
}

.audit-panel [data-audit-note]:empty {
  margin:0
}

.audit-table-wrap table {
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  white-space:normal;
  font-size:12px;
  margin:0
}

.audit-table-wrap th {
  text-align:left;
  font-size:10px;
  color:#667085;
  letter-spacing:.3px;
  background:#f8fafc;
  padding:13px 20px;
  border-bottom:1px solid #eaecf0;
  font-weight:600
}

.audit-table-wrap th:nth-child(1) {
  width:13%
}

.audit-table-wrap th:nth-child(2) {
  width:27%
}

.audit-table-wrap th:nth-child(3) {
  width:32%
}

.audit-table-wrap th:nth-child(4) {
  width:16%
}

.audit-table-wrap td {
  padding:18px 20px;
  border-bottom:1px solid #f0f2f5;
  vertical-align:middle;
  overflow-wrap:anywhere;
  text-align:left!important;
  color:#344054;
  line-height:1.5
}

.audit-table-wrap td strong {
  font-size:12px;
  font-weight:650
}

.audit-table-wrap td small {
  display:block;
  font-size:10px;
  color:#667085;
  margin-top:5px
}

.audit-table-wrap tr:last-child td {
  border-bottom:0
}

.audit-table-wrap tbody tr:hover {
  background:#fcfcfd
}

.audit-person {
  display:flex;
  align-items:center;
  gap:10px
}

.audit-person>div {
  min-width:0
}

.audit-avatar {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  background:#eef2f6;
  color:#475467;
  border-radius:50%;
  border:1px solid #e4e7ec;
  font-size:11px;
  font-weight:700
}

.audit-avatar.guest {
  background:#fffaeb;
  color:#b54708
}

.audit-role {
  display:inline-block;
  font-size:9px;
  color:#667085;
  margin-top:5px
}

.audit-target {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.audit-detail {
  border:0;
  background:none;
  color:#b4232c;
  font:inherit;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
  padding:5px 0
}

.audit-pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px solid #eaecf0;
  padding:16px 24px
}

.audit-pagination>span {
  font-size:11px;
  color:#667085
}

.audit-pagination>div {
  display:flex;
  gap:8px
}

.audit-empty {
  text-align:center;
  padding:60px 20px
}

.audit-empty>span {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:auto;
  background:#f2f4f7;
  border-radius:14px;
  font-size:28px;
  color:#667085
}

.audit-empty h3 {
  font-size:16px;
  margin:20px 0 10px
}

.audit-empty p {
  font-size:12px;
  line-height:1.8;
  color:#667085;
  margin:0
}

@media(max-width:800px) {
  .audit-stats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .audit-table-wrap th,.audit-table-wrap td {
    padding:14px 10px
  }

  .audit-person {
    align-items:flex-start
  }

  .audit-avatar {
    display:none
  }

}

@media(max-width:560px) {
  .audit-header {
    align-items:flex-start
  }

  .audit-header h1 {
    font-size:26px
  }

  .audit-header .btn {
    font-size:10px
  }

  .audit-stats {
    gap:10px
  }

  .audit-stats>div {
    padding:16px
  }

  .audit-stats strong {
    font-size:27px
  }

  .audit-filter,.audit-panel-heading {
    padding:16px
  }

  .audit-filter label {
    min-width:0;
    flex:1 1 40%
  }

  .audit-filter .btn {
    flex:1
  }

  .audit-table-wrap thead {
    display:none
  }

  .audit-table-wrap table,.audit-table-wrap tbody,.audit-table-wrap tr,.audit-table-wrap td {
    display:block;
    width:auto
  }

  .audit-table-wrap tr {
    padding:14px 18px;
    border-bottom:1px solid #eaecf0
  }

  .audit-table-wrap td {
    border:0;
    padding:6px 0
  }

  .audit-table-wrap td[data-label] {
    display:grid;
    grid-template-columns:75px minmax(0,1fr);
    gap:10px
  }

  .audit-table-wrap td[data-label]::before {
    content:attr(data-label);
    color:#98a2b3;
    font-size:10px;
    padding-top:2px
  }

  .audit-table-wrap td:first-child small {
    grid-column:2;
    margin-top:-5px
  }

  .audit-table-wrap td:nth-child(3) small {
    grid-column:2;
    margin-top:-5px
  }

  .audit-table-wrap td:last-child {
    text-align:right!important
  }

  .audit-table-wrap td .ui-pill {
    justify-self:start
  }

  .audit-pagination {
    padding:14px;
    flex-wrap:wrap
  }

  .audit-pagination>div {
    margin-left:auto
  }

  .audit-pagination .btn {
    padding:9px;
    font-size:10px
  }

}
.audit-filter select {height:40px;box-sizing:border-box;background:#fff;border:1px solid #d0d5dd;border-radius:9px;padding:8px 10px;font:inherit;font-size:12px;color:#344054}
.audit-filter .audit-search {flex:1;min-width:180px}