.tkv-tabs-block {
  display: flex;
  flex-direction: row;
  gap: 50px;
  position: relative;
  /* fallback variables */
  --tab-bg: #232323;
  --tab-border: #353535;
  --tab-radius: 10px;
  --tab-active-bg: #2C2C2C;
  --tab-active-border: #D62721;
  --tab-active-color: #D62721;
  --tab-active-radius: 10px;
}

.tkv-tabs-block > .tkv-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  flex: 0 0 260px;
  cursor: pointer;
}

.tkv-tabs-block > .tkv-tabs-nav .tkv-tab-title {
  appearance: none;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  border-radius: var(--tab-radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tkv-tabs-block > .tkv-tabs-nav .tkv-tab-title:hover {
  border-color: #3f3b3b;
  color: #000;
}

.tkv-tabs-block > .tkv-tabs-nav .tkv-tab-title.active {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
  color: var(--tab-active-color);
  border-radius: var(--tab-active-radius);
  border-left-width: 4px;
}

.tkv-tabs-block > .tkv-tabs-nav .tkv-tab-title.active p {
  color: var(--tab-active-color) !important;
} 

.tkv-tabs-block > .tkv-tabs-content {
  position: relative;
  flex: 1 2 auto;
  overflow: hidden;
}

.tkv-tabs-block > .tkv-tabs-content > .tkv-tab-block {
  display: none;
}

.tkv-tabs-block > .tkv-tabs-content > .tkv-tab-block > .tkv-tab-content {
  margin: 0;
}

.tkv-tabs-block > .tkv-tabs-content > .tkv-tab-block.active {
  display: block;
}

.tkv-tabs-block:not(.tkv-tabs-initialized) > .tkv-tabs-content
> .tkv-tab-block:first-child {
  display: block;
}

@media only screen and (max-width: 780px) {
  .tkv-tabs-block > .tkv-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tkv-tabs-block > .tkv-tabs-nav .tkv-tab-title {
    flex: 0 0 auto;
  }

  .tkv-tabs-block {
    flex-direction: column;
  }

  .tkv-tabs-block > .tkv-tabs-nav {
    flex-direction: row;
    flex: 1 1;
    flex-wrap: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) {
  .tkv-tabs-block > .tkv-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tkv-tabs-block > .tkv-tabs-nav::-webkit-scrollbar {
    display: none;
}

}