/*
    CSS for the main interaction
    */
  .tabset>input[type="radio"] {
      position: absolute;
      left: -200vw;
  }

  .tabset .tab-panel {
      display: none;
  }

  .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
  .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
  .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
  .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
  .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
  .tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6) {
      display: block;
  }

  .tabset>label {
      font-size: 12px;
      position: relative;
      display: inline-block;
      /* padding: 15px 15px 25px; */
      padding-left: 5px;
      padding-right: 5px;
      border: 1px solid transparent;
      border-bottom: 0;
      cursor: pointer;
      font-weight: 600;
  }

  /* .tabset>label::after {
        content: "";
        position: absolute;
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    } */

  .tabset>label:hover,
  .tabset>input:focus+label {
      color: #06c;
  }

  .tabset>label:hover::after,
  .tabset>input:focus+label::after,
  .tabset>input:checked+label::after {
      background: #06c;
  }

  .tabset>input:checked+label {
      border-color: #ccc;
      border-bottom: 1px solid #fff;
      margin-bottom: -1px;
  }

  .tab-panel {
      /* padding: 10px 0; */
      border-top: 1px solid #ccc;
  }

  /*
    Demo purposes only
    */
  *,
  *:before,
  *:after {
      box-sizing: border-box;
  }

  .tabset {
      max-width: 65em;
  }