﻿.tsum-tabs > main {
  padding-bottom: 7.5px;
}

  .tsum-tabs > main > label {
    position: relative;
    padding: 5px 15px;
    cursor: pointer;
  }

.tsum-tabs.no > main > label.active {
  background: #5bc0de;
  color: #fff;
  box-shadow: 0 0 10px rgb(91 192 222 / 63%);
}

.tsum-tabs > main > label:not(:last-child):before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0;
    height: 12px;
    border-left: 1px dotted #ccc;
}

.tsum-tabs > section {
  padding: 10px 0;
}

.tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
}

  .tab-wrap .tab {
    display: none !important;
  }

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3),
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4),
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5),
.tab:checked:nth-of-type(6) ~ .tab__content:nth-of-type(6),
.tab:checked:nth-of-type(7) ~ .tab__content:nth-of-type(7),
.tab:checked:nth-of-type(8) ~ .tab__content:nth-of-type(8),
.tab:checked:nth-of-type(9) ~ .tab__content:nth-of-type(9),
.tab:checked:nth-of-type(10) ~ .tab__content:nth-of-type(10),
.tab:checked:nth-of-type(11) ~ .tab__content:nth-of-type(11),
.tab:checked:nth-of-type(12) ~ .tab__content:nth-of-type(12) {
    overflow: unset;
    height: auto;
    position: relative;
    top: 0;
    text-shadow: 0 0 0;
    opacity: 1;
    transition: 300ms opacity ease-in, 300ms transform ease;
}

.tab:checked + label {
    background-color: #fff;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    border-top: 1px solid var(--clrorange);
}

  .tab:checked + label:hover {
    box-shadow: 0 -1px 0 #fff inset;
    background-color: #fff;
  }

.tab + label {
  position: inherit;
  top: 1px;
  color: #333;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  padding: 7px 35px;
  border-top: 1px solid rgba(34,36,38,.10);
  box-shadow: 0 -1px 0 #eee inset;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  cursor: pointer;
  z-index: 101;
}

.tab:first-child + label {
/*  border-top-right-radius: 6px;*/
  border-right: 1px solid rgba(34,36,38,.10);
}

.tab + label {
/*  border-top-left-radius: 6px;*/
  border-left: 1px solid rgba(34,36,38,.10);
}

.tab + label:hover {
  background-color: #f9f9f9;
  box-shadow: 0 1px 0 #f4f4f4 inset;
}

.tab__content {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  padding: 10px;
  opacity: 0;
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(34,36,38,.15);
}
