/* Style the tab */
.settings-container {
  width: 80%;
  margin: 0 auto;
}

.tab-vertical {
  /*float: left;*/
/*  border: 1px solid #ccc;*/
 border: 1px solid var(--color-border);
  background-color: #f1f1f1;
  width: 30%;
  min-width: 215px;
}

.tabcontent-vertical-container {
  width: 60%;
}

.tab-vertical,
.tabcontent-vertical {
  height: 392px;
}


/* Style the buttons inside the tab */
.tab-vertical button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab-vertical button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab-vertical button.active {
  /*background-color: #ccc;*/
  background-color: var(--color-ki);
  color: white !important;
}

/* Style the tab content */
.tabcontent-vertical {
  /* float: left; */
  padding: 24px 32px;
  border: 1px solid var(--color-border);
  /*width: 80%;*/
  border-left: none;
}

@media screen and (max-width: 900px) {

  .tab-vertical,
  .tabcontent-vertical-container {
    width: 100%;
  }

  .tabcontent-vertical {
    border-left: 1px solid var(--color-border);
    height: auto;
  }

}