@font-face {
    font-family: 'sanspro';
    src: url('sanspro.ttf');
}

body {
  background-color: #252525;
  margin: 0;
  font-family: 'sanspro', Arial, sans-serif;
}

div.tab-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

div.tab-button-wrapper ul {
  padding: 0;
  list-style: none;
  margin: 0;
  display: flex; /* Use flex display for the list */
}

div.tab-button-wrapper li {
  flex: 1; /* Each tab should take equal width */
}

a.tab-button-first {
  border-radius: 3px 0 0 0;
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
}

a.tab-button-last {
  border-radius: 0 3px 0 0;
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-right: none;
}

div.tab-button-wrapper a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  text-decoration: none;
  color: #252525;
  background-color: #FFFFFF;
  border-right: 1px solid black;
  box-sizing: border-box;
  font-family: 'sanspro', Arial, sans-serif; /* Apply sanspro font to buttons */
}

div.tab-button-wrapper li {
  text-align: center;
}

a.tab-button-hidden {
  opacity: 0.5;
}

div.tab-body {
  padding: 1em;
  clear: both;
  background-color: #FFFFFF;
  min-height: 85%;
  border-radius: 0 3px 3px 3px;
  -webkit-border-radius: 0 3px 3px 3px;
  -moz-border-radius: 0 3px 3px 3px;
}

div.tab-body-hidden {
  display: none;
}