.components {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-size-8);
  margin: 0 auto;
  background-color: var(--ds-color-neutral-background-default);
  border-radius: var(--ds-border-radius-md);
}

.card {
  background-color: var(--ds-color-neutral-background-tinted);
  border-radius: var(--ds-border-radius-md);
  padding: var(--ds-size-6);
}

.cardTitle {
  margin-bottom: var(--ds-size-4);
}

.checkbox {
  grid-column: span 2;
  padding-bottom: var(--ds-size-4);
}

.user {
  grid-column: span 2;
}

.tableContainer {
  grid-column: span 4;
}

.help {
  grid-column: span 4;
}

.radio {
  grid-column: span 2;
}

.tag {
  grid-column: span 2;
}

.switches {
  grid-column: span 2;
}

.combobox {
  grid-column: span 2;
}

.tabs {
  grid-column: span 4;
  display: flex;
  gap: var(--ds-size-4);
  flex-direction: column;
}

.faq {
  grid-column: span 4;
}

.userLink {
  margin-top: var(--ds-size-5);
}

.userTitle {
  text-align: center;
}

.userField {
  margin-top: var(--ds-size-6);
}

.userBtn {
  margin-top: var(--ds-size-8);
}

.tabs button {
  min-height: var(--ds-size-10);
}

.table {
  width: 100%;
  margin-bottom: var(--ds-size-6);
  margin-top: var(--ds-size-4);
}

.table thead button {
  padding-top: var(--ds-size-2);
  padding-bottom: var(--ds-size-2);
}

.tableCell {
  display: flex;
  align-items: center;
  gap: var(--ds-size-3);
  padding: calc(var(--ds-size-3) + 1px) var(--ds-size-3);
}

.tableImg {
  height: var(--ds-size-9);
  width: var(--ds-size-9);
  border-radius: 50%;
  box-shadow: 0 0 var(--ds-size-1) #353535;
}

.tableAction {
  display: flex;
  align-items: center;
}

.tableSelect {
  width: calc(var(--ds-size-30) + var(--ds-size-10));
}

.tableHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-size-4);
}

.tableSearch {
  width: calc(var(--ds-size-30) * 2 + var(--ds-size-5));
}

.tableBtn {
  margin-inline-start: var(--ds-size-5);
}

.helpCards {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-size-5);
}

.helpHeading {
  margin-bottom: var(--ds-size-5);
}

.tagList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-size-4);
  margin-top: var(--ds-size-4);
}

.switchGroup {
  display: flex;
  gap: var(--ds-size-6); /* originally 26px*/
  flex-direction: column;
}

.toggleCombo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-2);
}
