[data-tabs] {
  /* --tab-background-color: #fff; */
  --tab-border-color: #F3F4F6;
  --tab-panel-background: #fff;
  /* --tab-panel-border-color: var(--tab-border-color);*/
  /* --tab-radius: 2px; */
  --tab-border-bottom-color: #9CA3AF;
  --tab-border-bottom-width: 2px;
  --tab-spacing: 1rem .5rem;
  /* --tab-active-shadow: inset 1px 0 0 var(--tab-border-color), inset -1px 1px 0 var(--tab-border-color), 0 1px 0 white; */
}

[data-tab] {
  display: none;
}

[data-tab-panel] {
  position: relative;
  z-index: 1;
  visibility: hidden;
  height: 0;
  opacity: 0;
  background-color: var(--tab-panel-background);
  transition: opacity .3s ease-in-out;
}

[data-tabs] nav {
  display: flex;
  border-bottom: 1px solid #D1D5DB;
}

[data-tab-label] {
  position: relative;
  bottom: -1px;
  padding: var(--tab-spacing, 0);
  border-bottom-width: var(--tab-border-bottom-width, 0);
  border-bottom-style: solid;
  border-top-left-radius: var(--tab-radius, 0);
  border-top-right-radius: var(--tab-radius, 0);
  border-bottom-color: transparent;
  background-color: var(--tab-background-color, none);
  cursor: pointer;
  transition: 0.3s;
}

[data-tab-label]:hover {
  border-bottom-color: var(--tab-border-bottom-color);
}

/* Tab Label Active State */

[data-tab="tab1"]:checked ~ nav [data-tab-label="tab1"],
[data-tab="tab2"]:checked ~ nav [data-tab-label="tab2"],
[data-tab="tab3"]:checked ~ nav [data-tab-label="tab3"],
[data-tab="tab4"]:checked ~ nav [data-tab-label="tab4"],
[data-tab="tab5"]:checked ~ nav [data-tab-label="tab5"],
[data-tab="tab6"]:checked ~ nav [data-tab-label="tab6"],
[data-tab="tab7"]:checked ~ nav [data-tab-label="tab7"],
[data-tab="tab8"]:checked ~ nav [data-tab-label="tab8"],
[data-tab="tab9"]:checked ~ nav [data-tab-label="tab9"],
[data-tab="tab10"]:checked ~ nav [data-tab-label="tab10"] {
  --tab-background-color: #fff;
  z-index: 3;
  border-bottom-color: var(--main-c);
  box-shadow: var(--tab-active-shadow, 0);
}

/* Tab Panel Active State */

[data-tab="tab1"]:checked ~ nav ~ [data-tab-panel="tab1"],
[data-tab="tab2"]:checked ~ nav ~ [data-tab-panel="tab2"],
[data-tab="tab3"]:checked ~ nav ~ [data-tab-panel="tab3"],
[data-tab="tab4"]:checked ~ nav ~ [data-tab-panel="tab4"],
[data-tab="tab5"]:checked ~ nav ~ [data-tab-panel="tab5"],
[data-tab="tab6"]:checked ~ nav ~ [data-tab-panel="tab6"],
[data-tab="tab7"]:checked ~ nav ~ [data-tab-panel="tab7"],
[data-tab="tab8"]:checked ~ nav ~ [data-tab-panel="tab8"],
[data-tab="tab9"]:checked ~ nav ~ [data-tab-panel="tab9"],
[data-tab="tab10"]:checked ~ nav ~ [data-tab-panel="tab10"] {
  visibility: visible;
  width: 100%;
  height: auto;
  padding: var(--tab-spacing);
  border: 1px solid var(--tab-panel-border-color);
  opacity: 1;
}