.tab {
  background-color: var(--body-bg);
  width: 20%;
  height: 100%;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: var(--body-bg);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  width: 50%;
  height: 32px;
  padding: 0px;
  border-bottom: 2px solid var(--border-divider);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--brand-bg-soft-hover);
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid var(--brand-bg);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--brand-bg-soft-hover);
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid var(--brand-bg);
}

.tab button p {
  background-color: inherit;
  color: inherit;
}
/* Style the tab content */
.tabcontent {
  display: none;
}

.active {
  display: block;
}

.disable {
  display: none;
}

/* error message */
.error-msg {
  color: #d8000c;
}