.tabs ul {
  margin: 2em 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.tabs ul li {
  margin-right: 1em;
  padding-right: .6em;
  padding-left: .6em;
  border-radius: .125rem;
  color: #000;
  background-color: #e0e0e0;
  outline: 0;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  transition: box-shadow .2s;
}

.tabs ul li:last-child {
  margin-right: 0;
}

.tabs ul li:hover {
  box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}

.tabs ul li a {
  color: #000;
  text-decoration: none;
}

.unigebook-tabs {
    width: 100%;
}

.unigebook-tabs > input,
.unigebook-tabs .unigebook-tabs-content > div {
    display: none;
}

#unigebook-tab-option_1:checked ~ .unigebook-tabs-content .unigebook-tab-1,
#unigebook-tab-option_2:checked ~ .unigebook-tabs-content .unigebook-tab-2 {
    display: block;
}

.unigebook-tabs {
    margin: 1em auto;
    width: 100%;
}

.unigebook-tabs .unigebook-tabs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.unigebook-tabs .unigebook-tabs-list li label {
    margin: 0;
    background-color: #eeeeee;
    border: 1px solid var(--colorGray);
    border-bottom: 0;
    color: #333333;
    float: left;
    padding: 8px 10px;
    font-size: var(--fontSizeXSmall);
}

.unigebook-tabs .unigebook-tabs-list li label:hover {
    background-color: #dddddd;
    cursor: pointer;
}

.unigebook-tabs .unigebook-tabs-list li label:active {
    background-color: #ffffff;
}

.unigebook-tabs .unigebook-tabs-list li:not(:last-child) label {
    border-right-width: 0;
}
.unigebook-tabs .unigebook-tabs-content {
    clear: both;
}
.unigebook-tabs .unigebook-tabs-content > div {
    background-color: #fff;
    border: 1px solid var(--colorGray);
    color: var(--colorGrayXDark);
    line-height: 1.3em;
    padding: 15px;
    width: 100%;
}

#unigebook-tab-option_1:checked ~ nav .unigebook-tab-1 label,
#unigebook-tab-option_2:checked ~ nav .unigebook-tab-2 label {
    background-color: #ffffff;
    color: #333333;
    position: relative;
}

#unigebook-tab-option_1:checked ~ nav .unigebook-tab-1 label::after,
#unigebook-tab-option_2:checked ~ nav .unigebook-tab-2 label::after {
    background-color: #ffffff;
    bottom: -1px;
    content: '';
    display: block;
    left: 0;
    height: 2px;
    position: absolute;
    width: 100%;
}

@media screen and (min-width: 600px) {
  .unigebook-tabs {
    width: 600px;
    margin: 0 auto;
  }
  
  .unigebook-tabs .unigebook-tabs-list li label {
      padding: 10px 20px;
      font-size: var(--fontSizeBase);
  }
}