.xt-tab-panel {
  --tab-bg: linear-gradient(to bottom, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
  --tab-fg: black;
  --tab-sel-bg: linear-gradient(to bottom, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
  --tab-sel-fg: white;
  box-sizing: border-box;
}
.xt-tab-panel > .xt-tab-header {
  margin-bottom: 2cqw;
  border-radius: 4cqw;
  display: flex;
  /*justify-content: space-evenly;*/
  font-weight: bold;
  font-size: 3cqw;
  overflow: hidden;
  border: 0.5cqw solid black;
}
.xt-tab-panel > .xt-tab-header > .xt-tab {
  border-left: 0.2cqw solid gray;
  box-sizing: border-box;
  background: var(--tab-bg);
  color: var(--tab-fg);
  width: 100%;
  text-align: center;
  padding: 2cqw;
  cursor: pointer;
  transition: transform 0.2s linear;
}
.xt-tab-panel > .xt-tab-header > .xt-tab:before {
  content: var(--tab-icon);
  font-family: Fontawesome;
  margin-right: inherit;
}
.xt-tab-panel > .xt-tab-header > .xt-tab:first-child {
  border-left: none;
}
.xt-tab-panel > .xt-tab-header > .xt-tab.xt-selected {
  background: var(--tab-sel-bg);
  color: var(--tab-sel-fg);
  transform: scale(1.2);
}
.xt-tab-panel > .xt-tab-body {
  overflow: auto;
}
.xt-tab-panel > .xt-tab-body > .xt-tab-cont {
  display: none;
}
.xt-tab-panel > .xt-tab-body > .xt-tab-cont.xt-selected {
  display: block;
}
.xt-button {
  border: 0.5cqw solid #659fe4;
  padding: 1cqw 2cqw;
  background: linear-gradient(to bottom, #6da4e9 0%, #4f8ed6 50%, #3d7fc9 51%, #9dc4f2 100%);
  font-weight: bold;
  display: inline-block;
  border-radius: 1.5cqw;
  color: white;
  display: inline-flex;
  align-items: center;
  font-size: 2.5cqw;
  cursor: pointer;
  user-select: none;
}
.xt-button:before {
  content: var(--but-icon);
  font-family: Fontawesome;
  margin-right: 1cqw;
  font-size: 3.3cqw;
}
.xt-button:after {
  content: var(--but-text);
}