.tab-content input[type="radio"] {
  display: none;
}

.tab-content label {
  display: inline-block;
  padding: 10px;
  width: 197px;
  height: 50px;
  font-weight: bold;
  color: #7B55A9;
  background-color: #E4DDED;
  cursor: pointer;
  box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-sizing: border-box;
}
.tab-content label:hover,
.tab-content input[type="radio"]:checked + label {
  color: #FFF;
  background-color: #7B55A9;
}

.tab-content .tab-box {
  width: 600px;
  padding: 10px;
  border: 2px solid #AF99CB;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
}

.tab-content > .tab-box > div {
  display: none;
}

#tab1:checked ~ .tab-box > #tabView1 {
  display: block;
}

#tab2:checked ~ .tab-box > #tabView2 {
  display: block;
}

#tab3:checked ~ .tab-box > #tabView3 {
  display: block;
}

#tab4:checked ~ .tab-box > #tabView4 {
  display: block;
}

#tab5:checked ~ .tab-box > #tabView5 {
  display: block;
}

#tab6:checked ~ .tab-box > #tabView6 {
  display: block;
}

#tab7:checked ~ .tab-box > #tabView7 {
  display: block;
}

#tab8:checked ~ .tab-box > #tabView8 {
  display: block;
}

#tab9:checked ~ .tab-box > #tabView9 {
  display: block;
}