@media (max-width: 639px) {
  .ids-desktop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .ids-mobile {
    display: none !important;
  }
}

/*******
* ICONS
********/
/*******
* BUTTONS
********/
/*******
* SCROLLBAR
********/
/*******
* FORM
********/
/*******
* A11Y
********/
table.ids-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
  border-radius: var(--IDS-DATA-TABLE__BORDER-RADIUS);
  overflow: visible;
}
table.ids-data-table th,
table.ids-data-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
  border-right: none;
  line-height: 1.25rem;
}
table.ids-data-table th:first-child,
table.ids-data-table td:first-child {
  padding-left: 1rem;
}
table.ids-data-table th:last-child,
table.ids-data-table td:last-child {
  padding-right: 1rem;
}
table.ids-data-table th.ids-data-table__col--wide,
table.ids-data-table td.ids-data-table__col--wide {
  width: 30em;
}
table.ids-data-table th .ids-data-table__icon,
table.ids-data-table td .ids-data-table__icon {
  margin-bottom: -0.125rem;
  color: var(--IDS-DATA-TABLE__ICON-COLOR);
}
table.ids-data-table th:hover .ids-data-table__icon,
table.ids-data-table td:hover .ids-data-table__icon {
  color: var(--IDS-DATA-TABLE__ICON-HOVER-COLOR);
}
table.ids-data-table th {
  cursor: pointer;
  white-space: nowrap;
  font-weight: bold;
  border-bottom: 0.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
  background-color: var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);
  font-family: var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);
  color: var(--IDS-DATA-TABLE__HEAD-COLOR);
}
table.ids-data-table th:not(:first-child):not(:last-child) {
  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
}
table.ids-data-table th:focus-visible {
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
  outline-offset: -0.313rem !important;
  z-index: 2;
}
table.ids-data-table thead tr {
  border-top-left-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
  border-top-right-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
}
table.ids-data-table thead tr th:first-child {
  border-top-left-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
}
table.ids-data-table thead tr th:last-child {
  border-top-right-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
}
table.ids-data-table tbody tr {
  border-bottom: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
}
table.ids-data-table tbody tr td {
  color: var(--IDS-DATA-TABLE__CELL-COLOR);
  font-size: 0.875rem;
  vertical-align: middle;
}
table.ids-data-table tbody tr td.ids-data-table__td--flex {
  display: flex;
  align-items: center;
}
table.ids-data-table tbody tr td.ids-data-table__td--align-top {
  vertical-align: top;
}
table.ids-data-table tbody tr[selected] {
  background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
}
table.ids-data-table tbody tr:last-child {
  border-bottom-left-radius: var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);
  border-bottom-right-radius: var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);
}
table.ids-data-table tbody tr:last-child td {
  border-bottom: none;
}
table.ids-data-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);
}
table.ids-data-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);
}
table.ids-data-table tbody tr td.ids-table__sub-row {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  border-left: 0.5rem solid var(--ids-color-surface-border-default);
}
table.ids-data-table.ids-data-table--interactive tbody tr:hover {
  position: relative;
  z-index: 2;
  background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
  cursor: pointer;
}
table.ids-data-table.ids-data-table--interactive tbody tr:focus-visible {
  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
  outline-offset: -0.25rem !important;
  background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
}
table.ids-data-table.ids-data-table--interactive tbody tr:focus-visible:last-child {
  border-radius: 0 0 var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS) var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);
}
table.ids-data-table.ids-data-table--empty td {
  padding: 1em;
}
@media (max-width: 1024px) {
  table.ids-data-table {
    width: 100%;
  }
}
@media (max-width: 640px) {
  table.ids-data-table .ids-data-table__col--wide {
    width: auto;
  }
}