/* Global */


.TabClass {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.TabClass .title1, .TabClass .body1 {
  border: 2px solid rgba(50, 50, 130, 0.9);
  background: rgba(50, 50, 130, 0.1);
}
.TabClass .title2, .TabClass .body2 {
  border: 2px solid rgba(50, 50, 130, 0.9);
  background: rgba(50, 50, 130, 0.1);
}
.TabClass .title3, .TabClass .body3 {
  border: 2px solid rgba(50, 50, 130, 0.9);
  background: rgba(50, 50, 130, 0.1);
}
.TabClass .title4, .TabClass .body4 {
  border: 2px solid rgba(50, 50, 130, 0.9);
  background: rgba(50, 50, 130, 0.1);
}
.TabClass .title5, .TabClass .body5 {
  border: 2px solid rgba(50, 50, 130, 0.9);
  background: rgba(50, 50, 130, 0.1);
}
.TabClass .tab-title {
  border-bottom: none;
  padding: 0.3em 0.5em;
  border-radius: 0.3em 0.3em 0 0;
  text-align: center;
  display: table;
  position: relative;
  border-bottom: 2px solid transparent;
  top: 2px;
  left: 2px;
}
.TabClass .tab-title:hover {
  cursor: pointer;
}
.TabClass .tab-body {
  order: 1;
}
.TabClass .tab-body > div {
  border-radius: 0 0.3em 0.3em 0.3em;
  padding: 1em;
  display: none;
}
.TabClass::after {
  content: "";
  width: 100%;
}
.TabClass .radio {
  display: none;
}
.TabClass .radio:checked + .tab-title {
  color: #fff;
  border-bottom-color: rgba(130, 130, 130, 0.1);
}
.TabClass #tab1:checked ~ .title1 {
  background: rgba(50, 50, 130, 0.9);
}
.TabClass #tab1:checked ~ .tab-body > .body1 {
  display: block;
}
.TabClass #tab2:checked ~ .title2 {
  background: rgba(50, 50, 130, 0.9);
}
.TabClass #tab2:checked ~ .tab-body > .body2 {
  display: block;
}
.TabClass #tab3:checked ~ .title3 {
  background: rgba(50, 50, 130, 0.9);
}
.TabClass #tab3:checked ~ .tab-body > .body3 {
  display: block;
}
.TabClass #tab4:checked ~ .title4 {
  background: rgba(50, 50, 130, 0.9);
}
.TabClass #tab4:checked ~ .tab-body > .body4 {
  display: block;
}
.TabClass #tab5:checked ~ .title5 {
  background: rgba(50, 50, 130, 0.9);
}
.TabClass #tab5:checked ~ .tab-body > .body5 {
  display: block;
}