label.panel-label {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      display: block;
      width: 100%;
      color: #bdc3c7;
      cursor: pointer;
      background-color: #ecf0f1;
      -webkit-transition-property: background-color, color;
      transition-property: background-color, color;
      -webkit-transition-duration: 200ms;
      transition-duration: 200ms;
    }
    
    label.panel-label:hover {
      color: #51a823;
    }
    
    #panels {
      background-color: white;
    }
    
    #panels section header label.panel-label {
      padding: 12px 24px;
      box-sizing: border-box;
    }
    
    #panels section main {
      box-sizing: border-box;
      max-height: 0;
      opacity: 0;
      -webkit-transition: opacity 600ms;
      transition: opacity 600ms;
      overflow-y: hidden;
    }
    
    #panel-1-ctrl:checked~#panels #panel-1 main {
      max-height: initial;
      opacity: 1;
      padding: 14px 10px;
    }
    
    #panel-2-ctrl:checked~#panels #panel-2 main {
      max-height: initial;
      opacity: 1;
      padding: 14px 10px;
    }
    
    #panel-3-ctrl:checked~#panels #panel-3 main {
      max-height: initial;
      opacity: 1;
      padding: 14px 10px;
    }
    
    #panel-4-ctrl:checked~#panels #panel-4 main {
      max-height: initial;
      opacity: 1;
      padding: 14px 10px;
    }
    
    #panel-1-ctrl:checked~#tabs-list #li-for-panel-1 {
      pointer-events: none;
      cursor: default;
      -webkit-transform: translate3d(0, 1px, 0);
      transform: translate3d(0, 1px, 0);
      box-shadow: none;
      border-right: none;
    }
    
    #panel-1-ctrl:checked~#tabs-list #li-for-panel-1.last {
      border-right: 1px solid transparent;
    }
    
    #panel-1-ctrl:checked~#tabs-list #li-for-panel-1+li {
      border-left: 1px solid #dfdfdf;
    }
    
    #panel-1-ctrl:checked~#tabs-list #li-for-panel-1 label.panel-label {
      background-color: white;
      color: #51a823;
      padding-top: 24px;
    }
    
    #panel-1-ctrl:checked~#tabs-list #li-for-panel-1 label.panel-label::after {
      height: 6px;
    }
    
    #panel-2-ctrl:checked~#tabs-list #li-for-panel-2 {
      pointer-events: none;
      cursor: default;
      -webkit-transform: translate3d(0, 1px, 0);
      transform: translate3d(0, 1px, 0);
      box-shadow: none;
      border-right: none;
    }
    
    #panel-2-ctrl:checked~#tabs-list #li-for-panel-2.last {
      border-right: 1px solid transparent;
    }
    
    #panel-2-ctrl:checked~#tabs-list #li-for-panel-2+li {
      border-left: 1px solid #dfdfdf;
    }
    
    #panel-2-ctrl:checked~#tabs-list #li-for-panel-2 label.panel-label {
      background-color: white;
      color: #ff8233;
      padding-top: 24px;
    }
    
    #panel-2-ctrl:checked~#tabs-list #li-for-panel-2 label.panel-label::after {
      height: 6px;
    }
    
    #panel-3-ctrl:checked~#tabs-list #li-for-panel-3 {
      pointer-events: none;
      cursor: default;
      -webkit-transform: translate3d(0, 1px, 0);
      transform: translate3d(0, 1px, 0);
      box-shadow: none;
      border-right: none;
    }
    
    #panel-3-ctrl:checked~#tabs-list #li-for-panel-3.last {
      border-right: 1px solid transparent;
    }
    
    #panel-3-ctrl:checked~#tabs-list #li-for-panel-3+li {
      border-left: 1px solid #dfdfdf;
    }
    
    #panel-3-ctrl:checked~#tabs-list #li-for-panel-3 label.panel-label {
      background-color: white;
      color: #157bff;
      padding-top: 24px;
    }
    
    #panel-3-ctrl:checked~#tabs-list #li-for-panel-3 label.panel-label::after {
      height: 6px;
    }
    
    #panel-4-ctrl:checked~#tabs-list #li-for-panel-4 {
      pointer-events: none;
      cursor: default;
      -webkit-transform: translate3d(0, 1px, 0);
      transform: translate3d(0, 1px, 0);
      box-shadow: none;
      border-right: none;
    }
    
    #panel-4-ctrl:checked~#tabs-list #li-for-panel-4.last {
      border-right: 1px solid transparent;
    }
    
    #panel-4-ctrl:checked~#tabs-list #li-for-panel-4+li {
      border-left: 1px solid #dfdfdf;
    }
    
    #panel-4-ctrl:checked~#tabs-list #li-for-panel-4 label.panel-label {
      background-color: white;
      color: #ff44b6;
      padding-top: 24px;
    }
    
    #panel-4-ctrl:checked~#tabs-list #li-for-panel-4 label.panel-label::after {
      height: 6px;
    }
    
    ul#tabs-list {
      display: flex;
      list-style: none;
      text-align: center;
      border-bottom: 1px solid #dfdfdf;
      margin: 0;
      padding: 0;
    }
    
    ul#tabs-list li {
      text-align: center;
      font-size: 0.875em;
      width: 25%;
      box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
      border-right: 1px solid #dfdfdf;
      position: relative;
    }
    
    ul#tabs-list li:hover {
      -webkit-transition: none;
      transition: none;
      border-right: none;
    }
    
    ul#tabs-list li:hover.last {
      border-right: 1px solid transparent;
    }
    
    ul#tabs-list li:hover+li {
      border-left: 1px solid #dfdfdf;
    }
    
    ul#tabs-list li label.panel-label {
      position: relative;
      padding: 24px 0;
      /*  tabfont*/
      font-size: 1.25em;
    }
    
    ul#tabs-list li label.panel-label::after {
      content: "";
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 100%;
      /*border top*/
      background-color: #51a823;
      height: 0;
      -webkit-transition-property: height;
      transition-property: height;
      -webkit-transition-duration: 200ms;
      transition-duration: 200ms;
    }
    /*tab color*/
    
    ul#tabs-list #li-for-panel-1 label.panel-label::after {
      background-color: #51a823;
    }
    
    ul#tabs-list #li-for-panel-2 label.panel-label::after {
      background-color: #ff8233;
    }
    
    ul#tabs-list #li-for-panel-3 label.panel-label::after {
      background-color: #157bff;
    }
    
    ul#tabs-list #li-for-panel-4 label.panel-label::after {
      background-color: #ff44b6;
    }
    /*tab hover color*/
    
    #li-for-panel-1 .panel-label:hover {
      color: #51a823;
    }
    
    #li-for-panel-2 .panel-label:hover {
      color: #ff8233;
    }
    
    #li-for-panel-3 .panel-label:hover {
      color: #157bff;
    }
    
    #li-for-panel-4 .panel-label:hover {
      color: #ff44b6;
    }
    
    ul#tabs-list li label.panel-label:hover {
      padding-top: 24px;
    }
    
    ul#tabs-list li label.panel-label:hover::after {
      height: 6px;
    }
    
    .panel-radios {
      display: none;
    }
    
    body {
      color: #444444;
    }
    
    main p {
      line-height: 1.8;
    }
    
    section#panel-1,
    section#panel-2,
    section#panel-3,
    section#panel-4 {
      margin: 0;
      padding: 0;
    }
    /**/
    
    @media screen and (max-width: 767px) {
      ul#tabs-list li {
        text-align: center;
        font-size: 0.8em;
        font-size: 12px;
        width: 25%;
        box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
        border-right: 1px solid #dfdfdf;
        position: relative;
      }
    }