action-table {
  display: block;
  --highlight: #01C1C1;
  --focus: dodgerblue;
  --star-checked: orange;
  --star-unchecked: gray;
  --switch-checked: #9bcb6c;
  --switch-unchecked: lightgray;
  --th-bg: #00a6a6;
  --th-sorted: #01C1C1;
  --col-sorted: #E5F7F7;
  --td-options-bg: whitesmoke;
  --page-btn: whitesmoke;
  --page-btn-active: rgb(244, 220, 188);
  --responsive-scroll-gradient: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%
}

action-table :where(table) {
  border-collapse: collapse;
  margin: 1em 0;
  max-width: 100%;
  overflow: auto;
  /*display: block;*/
  background: var(--responsive-scroll-gradient);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll
}

action-table :where(th) {
  border: var(--border);
  padding: 0;
  text-align: left;
  background: var(--th-bg)
}

action-table :where(th[no-sort]) {
  padding: .2em .5em
}

action-table :where(th button) {
  cursor: pointer;
  font-weight: 700;
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: .2em 1.5em .2em .5em;
  background-color: transparent;
  position: relative;
  text-align: left;
  font-size: inherit;
  line-height: inherit
}

action-table :where(th button:hover, th:has(button):hover, th button:focus, th:has(button):focus) {
  background-color: var(--highlight)
}

action-table :where(th button):after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M9 16.172l-6.071-6.071-1.414 1.414 8.485 8.485 8.485-8.485-1.414-1.414-6.071 6.071v-16.172h-2z'%3E%3C/path%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: .7em;
  height: .7em;
  width: .7em;
  display: block;
  opacity: .3;
  position: absolute;
  right: .6em;
  top: 50%;
  transform: translateY(-50%);
  float: right;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out
}

action-table :where(th[aria-sort$=ing] button, th[aria-sort$=ing]:has(button)) {
  background-color: var(--th-sorted)
}

action-table :where(th[aria-sort$=ing] button):after {
  opacity: 1
}

action-table :where(th[aria-sort=descending] button):after {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg)
}

action-table :where(td) {
  padding: .2em .4em
}

action-table .sorted {
  background-color: var(--col-sorted)
}

action-table :where(td span) {
  background-color: var(--td-options-bg);
  padding: 0 .4em .1em;
  margin: 0 .2em
}

action-table:not(:defined),
action-table-filters:not(:defined) {
  visibility: hidden
}

action-table :where(select, input, button) {
  font-size: inherit
}

action-table :where(input[type=search], select) {
  border: var(--border);
  border-radius: var(--border-radius)
}

action-table .selected {
  background-color: var(--highlight);
  transition: color .2s ease
}

action-table .no-results :where(td) {
  padding: 1em;
  text-align: center
}

action-table :where(button) {
  cursor: pointer
}

action-table-filter-menu,
action-table-filter-switch label,
action-table-filter-menu .filter-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center
}

action-table-filter-menu label,
action-table-filter-menu .filter-label {
  margin-inline-end: .3em
}

action-table .switch label {
  display: inline-flex;
  align-items: center;
  margin: 0
}

action-table .switch input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  background: var(--switch-unchecked);
  cursor: pointer;
  height: 1.4em;
  width: 2.75em;
  vertical-align: middle;
  border-radius: 2em;
  box-shadow: 0 1px 3px #0003 inset;
  transition: .25s linear background
}

action-table .switch input:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: #fff;
  border-radius: 1em;
  position: absolute;
  top: .2em;
  left: .2em;
  box-shadow: 0 1px 3px #0003;
  transition: .25s linear transform;
  transform: translate(0)
}

action-table .switch :checked {
  background: var(--switch-checked)
}

action-table .switch :checked:before {
  transform: translate(1.3em)
}

action-table .switch input:focus,
action-table .star input:focus {
  outline: transparent
}

action-table .switch input:focus-visible,
action-table .star input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px
}

action-table .star input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  height: 1.6em;
  width: 1.6em;
  vertical-align: middle;
  border-radius: .3em
}

action-table .star input:before {
  content: "";
  background: var(--star-unchecked);
  cursor: pointer;
  position: absolute;
  height: 1.6em;
  width: 1.6em;
  vertical-align: middle;
  transition: .25s linear background;
  clip-path: polygon(50% 0%, 62% 29%, 98% 35%, 74% 58%, 79% 91%, 50% 76%, 21% 91%, 26% 58%, 2% 35%, 34% 29%)
}

action-table .star input:checked:before {
  background: var(--star-checked)
}

action-table-pagination {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em;
  max-width: 100%;
  overflow: auto
}

action-table-pagination .pagination-buttons {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: .3em
}

action-table-pagination button {
  cursor: pointer;
  font-size: inherit;
  background-color: var(--page-btn);
  border: 0;
  border-radius: .3em;
  padding: .2em .5em
}

action-table-pagination button:hover {
  background-color: var(--highlight)
}

action-table-pagination .active {
  font-weight: 700;
  background-color: var(--page-btn-active)
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
}

@keyframes fade-out {
  to {
    opacity: 0
  }
}

@keyframes slide-from-bottom {
  0% {
    transform: translateY(50px)
  }
}

@keyframes slide-to-top {
  to {
    transform: translateY(-50px)
  }
}

::view-transition-old(row) {
  animation: 90ms cubic-bezier(.4, 0, 1, 1) both fade-out, .3s cubic-bezier(.4, 0, .2, 1) both slide-to-top
}

::view-transition-new(row) {
  animation: 1.21s cubic-bezier(0, 0, .2, 1) 90ms both fade-in, .3s cubic-bezier(.4, 0, .2, 1) both slide-from-bottom
}

action-table-filter-range {
  --thumb-size: 1.3em;
  --thumb-bg: #fff;
  --thumb-border: solid 2px #9e9e9e;
  --thumb-shadow: 0 1px 4px .5px rgba(0, 0, 0, .25);
  --thumb-highlight: var(--highlight);
  --track-bg: lightgray;
  --track-shadow: inset 0 0 2px #00000099;
  --track-highlight: var(--highlight);
  --ticks-color: #b2b2b2;
  --ticks-width: 1
}

action-table-filter-range,
action-table-filter-range>div,
action-table-filter-range label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em
}

action-table-filter-range .range-slider-group {
  display: grid
}

action-table-filter-range .range-slider-group>* {
  grid-column: 1;
  grid-row: 1;
  position: relative
}

action-table-filter-range .range-slider-group:after {
  content: "";
  width: 100%;
  height: .5em;
  background-color: var(--track-bg);
  border-radius: 50px;
  background-size: 100% 2px;
  box-shadow: var(--track-shadow);
  grid-column: 1;
  grid-row: 1;
  justify-self: center
}

action-table-filter-range .range-slider-highlight {
  background-color: var(--track-highlight);
  width: 100%;
  height: .35em
}

action-table-filter-range input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  width: 100%;
  background: transparent;
  padding: .2em 0;
  pointer-events: none;
  cursor: -webkit-grab;
  cursor: grab
}

action-table-filter-range input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent
}

action-table-filter-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-bg);
  border: var(--thumb-border);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto
}

action-table-filter-range input::-moz-range-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  background: var(--thumb-bg);
  border-radius: 50%;
  border: var(--thumb-border);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto
}

action-table-filter-range input::-ms-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  background: var(--thumb-bg);
  border-radius: 50%;
  border: var(--thumb-border);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto
}

action-table-filter-range input::-webkit-slider-thumb:hover {
  background: var(--thumb-highlight)
}

action-table-filter-range svg {
  color: var(--ticks-color);
  position: relative;
  top: -.6em;
  width: calc(100% - var(--thumb-size));
  justify-self: center;
  border-left: 1px solid var(--ticks-color);
  border-right: 1px solid var(--ticks-color);
  box-sizing: border-box
}