:host {
  display: block;
  position: relative;
  color: var(--fc-gray-800);

  --fc-table-row-height: 40px;
  --fc-table-header-height: 50px;
  --fc-card-shadow-color: transparent;

  border: 0.5px solid var(--fc-table-border-color, var(--fc-color-border-primary));
  border-radius: var(--fc-radius-rounded);
  overflow: hidden;
  box-shadow: var(--fc-table-box-shadow, var(--fc-shadow-card));
  background: var(--fc-color-surface-primary);
}

.header-controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.actions-cell {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  opacity: 0;
  padding: 0 20px;
  transition: opacity 0.1s ease;
}

.actions-cell > * {
  cursor: pointer;

  --fc-button-background-color: none;
  --fc-button-active-background-color: var(--fc-gray-800);
}

table:not(.compact_cells) * {
  white-space: nowrap;
}

table {
  padding: var(--fc-table-padding, 0);
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  position: relative;
}

/* actions  */

.actions {
  margin: 0 10px;

  --fc-icon-fill: var(--fc-gray-800);
}

.actions-cell:focus-within,
.actions-cell:focus,
.actions-cell:hover,
tr:hover .actions-cell {
  opacity: 1;
}

/* header */

th {
  text-align: left;
  color: var(--fc-gray-800);
  padding: 0;
  padding-top: 0;
  padding-bottom: 0;
  height: var(--fc-table-header-height);
  position: relative;
  font: var(--fc-poppins-font-12px-400);
}

#shadow {
  display: none;
}

th > div > div {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s background-color ease-in-out;
}

td {
  color: var(--fc-color-text-primary);
  font: var(--fc-poppins-font-14px-400);
  padding-right: 35px;
}

thead th > div > div,
tbody td {
  padding: 0 5px;
}

thead {
  border-bottom: 0.5px solid var(--fc-color-border-primary);
}

#column-button-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: var(--fc-table-header-height);
  background-color: var(--fc-color-surface-primary);
  display: flex;
  justify-content: center;
  border-top-right-radius: 8px;
  flex-direction: column;
  padding: 0 5px;
}

th.selected-column > div > div {
  background-color: var(--fc-gray-100);
  opacity: 0.5;
}

th[wrap] > div > div {
  flex-direction: column;
}

th:first-of-type > div > div {
  padding-left: var(--fc-table-first-column-padding-left, 20px);
}

table:not(.dragging) th > div > div {
  transition: background-color 0.1s ease-in-out;
}

.column-filter-popover > div[slot='content'] > fc-button > div {
  display: flex;
  flex-direction: row;
  width: 210px;
  box-sizing: border-box;
  align-items: center;
  height: var(--fc-table-row-height);
}

table:not(.dragging) th:hover > div > div,
table:not(.dragging) th:focus-within > div > div {
  background-color: var(--fc-gray-100);
}

.table-header-shadow {
  -webkit-box-sizing: inset 0 4px 6px -8px var(--fc-gray-900);
}

.no-data {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--fc-table-header-height);
  box-sizing: border-box;
  padding: 16px 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
  pointer-events: none;
}

:host([fetching]) .no-data {
  opacity: 0;
}

.no-data span {
  font: var(--fc-poppins-font-16px-500);
  color: var(--fc-gray-900);
  margin-top: 24px;
}

.column-filter-popover > div[slot='content'] span:not(.popover-action-button) {
  font: var(--fc-font-14px-300);
  color: var(--fc-gray-800);
  margin-bottom: 12px;
}

/* columns */

col:not(.min):not(.select) {
  min-width: 100px;
}

col.min {
  width: var(--fc-table-min-col-width, 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

col.select {
  width: 24px;
  padding: 0;
}

th.select {
  padding: 0;
}

.select forter-checkbox {
  margin-left: 8px;
  width: 36px;

  --fc-checkbox-focus-box-shadow: none;
  --fc-checkbox-hover-color: none;
}

#selected {
  min-width: 24px;
  max-width: 24px;
}

.min {
  text-align: center;
}

td.select.min {
  padding: 0;
  vertical-align: middle;
  max-width: var(--fc-table-row-height);
}

/* rows */
table,
tr {
  background-color: var(--fc-table-background, var(--fc-color-surface-primary));
}

tr {
  transition: background-color 0.1s ease-in-out;
  cursor: var(--fc-table-tr-hover-cursor);
}

tbody > tr:last-child {
  height: 100%;
}

th[pinned] {
  z-index: 2;
}

td[pinned]:first-of-type,
th[pinned]:first-of-type {
  position: sticky;
  left: 0;
  background: inherit;
  min-width: var(--fc-table-row-height);
}

th[pinned]:nth-of-type(2),
td[pinned]:nth-of-type(2) {
  position: sticky;
  left: var(--fc-table-row-height);
  background: inherit;
}

[hide-content] > [data-row-index="-1"],
td.row-action-list-cell.hide-content > div.row-actions-button {
  visibility: hidden;
}

#scrollable.scroll-left td[pinned] {
  z-index: 1;
}

::slotted([slot='footer']) {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 var(--fc-spacing-sm);
}

*[pinned]:not(.select)::after {
  content: '';
  position: absolute;
  top: 0;
  width: 30px;
  pointer-events: none;
  box-shadow: inset 10px 0 12px -17px rgb(var(--fc-gray-900-rgb));
  border-left: 0.5px solid var(--fc-color-border-primary);
  height: inherit;
  z-index: 5;
  right: -30px;
  opacity: 0;
}

#scrollable.scroll-left *[pinned]:not(.select)::after {
  opacity: 1;
}

tbody tr:not(.no-data-row):hover {
  background-color:
    var(
      --fc-table-row-hover-background-color,
      var(--fc-gray-100)
    );
}

:host([zebra]) tbody tr:nth-child(odd) {
  background-color: var(--fc-gray-100);
}

#scrollable {
  overflow: hidden;
  overflow-x: auto;
}

:host([zebra]) tbody tr:hover {
  background-color:
    var(
      --fc-table-row-hover-background-color,
      var(--fc-gray-200)
    );
}

tr td {
  height: var(--fc-table-row-height, var(--fc-table-row-height));
}

.editing > td {
  vertical-align: middle;
}

/* cells */

td:first-of-type {
  padding-left: var(--fc-table-first-column-padding-left, 20px);
}

td:first-of-type.no-padding {
  padding: 0;
}

td.row-action-list-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 6px;
  white-space: nowrap;
}

.row-actions-button {
  -webkit-mask-image: var(--fc-icon-page-settings);
  mask-image: var(--fc-icon-page-settings);
}

tr td .row-actions-button {
  transition: opacity 0.2s ease-in-out;
}

tr:not(:hover) td .row-actions-button {
  opacity: 0;
  pointer-events: none;
}

tr:hover td .row-actions-button,
tr td fc-popover[open] .row-actions-button {
  opacity: 1;
  pointer-events: all;
}

.settings-button.row-actions-button.disabled {
  margin: 0 calc((26px - 16px) / 2);
  cursor: not-allowed;
  background-color: var(--fc-gray-300);
}

th fc-sort-control {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

th[wrap] fc-sort-control {
  margin-left: -1px;
}

th:not(.min) {
  width: var(--fc-table-th-width, initial);
}

th:not([sort]) fc-sort-control {
  opacity: 0;
}

:host([fetching]) fc-sort-control {
  pointer-events: none;
}

table:not(.dragging) th:not([sort]):hover fc-sort-control {
  opacity: 1;
}

table.dragging thead * {
  cursor: move;
  user-select: none;
}

table.dragging tbody *,
table.dragging fc-popover * {
  pointer-events: none;
}

table.dragging thead th[pinned] {
  cursor: not-allowed;
}

table.dragging thead th * {
  pointer-events: none;
}

:host([wrap]) table * {
  white-space: unset;
}

table.dragging thead th[long-press]:not([pinned]):not(.selected-column)::before,
table.dragging thead th[long-press]:not([pinned]):not(.selected-column)::after {
  content: '';
  position: absolute;
  width: 9px;
  height: var(--fc-table-header-height);
  top: 7px;
  opacity: 0;
  z-index: 1;
  background-image: var(--fc-icon-insert);
}

table.dragging thead th[long-press]:not([pinned]):not(.selected-column).left::before,
table.dragging thead th[long-press]:not([pinned]):not(.selected-column).right::after {
  opacity: 1;
}

table.dragging thead th[long-press]:not([pinned]):not(.selected-column)::before {
  left: -4px;
}

table.dragging thead th[long-press]:not([pinned]):not(.selected-column)::after {
  right: -5px;
}

:host([columns-removable]) table.dragging thead th[long-press]:not([pinned]):not(.selected-column):nth-last-of-type(2)::after {
  right: -4px;
}

:host(:not([columns-removable])) table.dragging thead th[long-press]:not([pinned]):not(.selected-column):last-of-type::after {
  right: 0;
}

table.dragging thead th[long-press]:not([pinned]):not(.selected-column):first-of-type::before {
  left: 0;
}

.no-columns {
  text-align: center;
}

.column-filter-popover {
  --fc-popover-arrow-size: 0;
  --fc-popover-padding: var(--fc-spacing-xs);
}

.column-button {
  width: 100%;
}

.column-filter-popover > div[slot='content'] {
  text-transform: none;
  display: flex;
  flex-direction: column;
  width: 210px;

  --fc-popover-padding: 12px;
}

.column-filter-popover > div[slot='content'] form {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--fc-spacing-sm);
}

.row-actions-popover {
  position: relative;
}

.column-show-hide-button div[slot='toggle'] {
  mask-image: var(--fc-icon-page-settings);
  -webkit-mask-image: var(--fc-icon-page-settings);
  background-color: var(--fc-gray-800);
  opacity: 0.9;
}

#column-button-container::after {
  content: '';
  width: 10px;
  position: absolute;
  top: 0;
  left: -10px;
  height: var(--fc-table-row-height);
  background-color: transparent;
  box-shadow: inset -10px 0 12px -17px var(--fc-gray-900);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.settings-button {
  width: 16px;
  height: 16px;
  position: relative;
  cursor: pointer;
  background-color: var(--fc-gray-600);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: background-color 0.2s ease-in-out;
}

.column-filter-popover > div[slot='content'] > fc-button {
  --fc-button-item-color: var(--fc-gray-800);
  --fc-button-min-height: var(--fc-table-row-height);
  --fc-button-height: var(--fc-table-row-height);
  --fc-button-min-width: 100%;
  --fc-button-border-radius: 0;
  --fc-button-box-shadow: none;

  min-height: var(--fc-table-row-height);
}

.popover-action-button {
  mask-size: 16px;
  background-color: var(--fc-gray-800);
  width: 16px;
  height: 16px;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  margin: 0;
  margin-right: 10px;
}

fc-button:hover .popover-action-button {
  background-color: var(--fc-blue-500);
}

.reset-icon {
  -webkit-mask-image: var(--fc-icon-reset);
  mask-image: var(--fc-icon-reset);
  margin-bottom: 2px;
  margin-right: 9px;
  margin-left: 1px;
}

.remove-icon {
  -webkit-mask-image: var(--fc-icon-delete);
  mask-image: var(--fc-icon-delete);
  margin-bottom: 3px;
  margin-right: 9px;
  margin-left: 1px;
}

.save-icon {
  -webkit-mask-image: var(--fc-icon-save);
  mask-image: var(--fc-icon-save);
  margin-bottom: 3px;
}

.delete {
  margin-left: 8px;
}

.cancel {
  margin-left: 8px;
}

.column-filter-popover > div[slot='content'] > fc-button:last-of-type {
  --fc-button-border-radius: 0 0 5px 5px;
}

.column-filter-popover.row-actions-popover {
  --fc-popover-padding: 0;
}

.row-actions-popover > div[slot='content'] > fc-button:first-of-type {
  --fc-button-border-radius: var(--fc-radius-rounded) var(--fc-radius-rounded) 0 0;
}

.row-actions-popover > div[slot='content'] > fc-button:last-of-type {
  --fc-button-border-radius: 0 0 var(--fc-radius-rounded) var(--fc-radius-rounded);
}

.hidden-column {
  display: none !important;
}

.hidden {
  display: none;
}

.filter-container {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  margin-bottom: 16px;
  background-color: var(--fc-gray-100);
  border-radius: 10px;
}

.text-filter-container.filter-container {
  padding: var(--fc-spacing-lg) 8px;
  max-height: 300px;
}

.text-filter-container forter-input {
  width: 100% !important;
}

.options-filter-container {
  padding: 8px;
  overflow-y: auto;
  max-height: 170px;
}

#filter-button {
  position: relative;
  width: 22px;
  height: 22px;
}

#filter-button::after,
#filter-button::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--fc-gray-400);
  -webkit-mask-image: var(--fc-icon-column-settings);
  mask-image: var(--fc-icon-column-settings);
  -webkit-mask-size: cover;
  mask-size: cover;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

fc-popover[filter] #filter-button::before {
  -webkit-mask-image: var(--fc-icon-column-filtered);
  mask-image: var(--fc-icon-column-filtered);
  background-color: var(--fc-blue-500);
}

fc-popover[filter] #filter-button::after {
  -webkit-mask-image: var(--fc-icon-column-filtered-menu-only);
  mask-image: var(--fc-icon-column-filtered-menu-only);
}

.settings-button:focus,
.settings-button:hover,
fc-popover[open] .settings-button,
fc-popover .settings-button:focus,
fc-popover .settings-button:hover,
fc-popover[open] #filter-button::after,
fc-popover #filter-button:focus::after,
fc-popover #filter-button:hover::after {
  background-color: var(--fc-color-surface-cta);
  opacity: 1;
}

fc-popover {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}

fc-popover forter-line-item {
  padding: var(--fc-spacing-xs);
  cursor: pointer;
}

.menu-divider {
  height: 1px;
  margin: 5px 8px 7px;
  background: var(--fc-color-blue-gray-150);
}

fc-popover[open] {
  background-color: var(--fc-gray-200);
}

@keyframes gradient {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

#overlay {
  background-color: var(--fc-color-surface-secondary);
  position: absolute;
  top: var(--fc-table-header-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--fc-table-header-height));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  box-shadow: inset 0 9px 9px -9px rgba(0, 0, 0, 0.08);
  z-index: 6;
  border-radius: 0;
  overflow: hidden;
}

#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#overlay::before {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 40%,
      rgba(0, 50, 77, 0.03) 50%,
      transparent 60%,
      transparent 100%
    );
  background-size: 500% 100%;
  animation: gradient 2.6s infinite;
}

:host([fetching]) #overlay {
  opacity: 70%;
  pointer-events: unset;
}

fc-loading {
  --fc-loading-color: var(--fc-blue-500);
  --fc-loading-round-size: 30px;

  position: absolute;
  top: calc((100% - 30px) / 2);
  left: calc((100% - 30px) / 2);
}

#skeleton {
  background-color: var(--fc-color-surface-primary);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--fc-table-header-height) + 10 * var(--fc-table-row-height) + 46px);
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  border-radius: 8px;
  overflow: hidden;
}

#skeleton::after {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: var(--fc-table-header-height);
  border-bottom: 1px solid var(--fc-color-border-primary);
  background-color: var(--fc-color-surface-primary);
  content: '';
  z-index: -1;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

#skeleton::before {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 46px;
  border-top: 1px solid var(--fc-color-border-primary);
  background-color: var(--fc-color-surface-primary);
  content: '';
  z-index: -1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

:host([loading]) #skeleton {
  opacity: 1;
  pointer-events: unset;
}

:host([loading]) .loading-card {
  height: calc(var(--fc-table-header-height) + 10 * var(--fc-table-row-height) + 46px);
}

fc-skeleton {
  height: calc(100% - 46px);

  --fc-skeleton-animation-duration: 3s;
  --fc-skeleton-table-header-height: var(--fc-table-header-height);
  --fc-skeleton-table-header-base-color: var(--fc-gray-200);
  --fc-skeleton-table-header-pulse-color: #dde0e5;
  --fc-skeleton-table-body-base-color: var(--fc-gray-200);
  --fc-skeleton-table-body-pulse-color: #dde0e5;
}

:host .editing {
  background-color: var(--fc-gray-100);
  border-bottom: 1px solid var(--fc-color-border-primary);
}

:host .editing fc-select,
:host .editing fc-date-picker,
:host .editing fc-input {
  --fc-input-font: 14px;
  --fc-select-height: 25px;
  --fc-date-picker-font-size: 14px;

  display: flex;
  margin-left: -20px;
  height: 25px;
  width: 100%;
}

:host .editing fc-checkbox,
:host .editing [pinned] > fc-popover {
  display: none;
}

:host #footer {
  display: flex;
  align-items: center;
  border-top: 0.5px solid var(--fc-color-border-primary);
  min-height: 45px;
  width: 100%;
  padding-inline: 0 var(--fc-spacing-sm);
}

:host([editing]) #footer {
  box-shadow: inset 0 4px 6px -8px var(--fc-gray-900);
}

:host([editing]) #overlay {
  opacity: 1;
  top: 90px;
}

:host([editing]) #overlay > fc-loading {
  display: none;
}

:host([editing][fetching]) #overlay > fc-loading {
  display: block;
}

:host([fetching]) #filter-button {
  pointer-events: none;
}