.component-tabs-container {
  display: flex;
  justify-content: center;
}
.component-tab {
  transition:
    color 0.3s,
    border-color 0.3s;
  cursor: pointer;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid transparent;
}
.component-tab.active {
  color: var(--k-color-primary);
  border-bottom-color: var(--k-color-primary);
}
.component-content {
  display: none;
}
.component-content.active {
  display: block;
  animation: 0.5s ease-in-out fadeInContent;
}
@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.comparison-table {
  border-collapse: collapse;
}
.comparison-table td,
.comparison-table th {
  vertical-align: middle;
}
.comparison-table thead.util-primary-bg th {
  color: var(--k-color-text-light);
}
.comparison-table th.util-accent-bg {
  background-color: var(--k-color-accent);
  color: var(--k-color-text-light);
}