.hidden-search {
  display: none !important;
}
.vsb-main {
  --font-size: 16rem;
  --font-weight: 600;
  --text-transform: uppercase;
  --line-height: 1.1;
  --color: var(--color-red-250);
  --color-active: var(--color-gold-500);
  --height: 56rem;
  --border-radius: 6rem;
  --border: 3rem solid var(--color-gold-300);
  --background: var(--color-white);
  --background-active: transparent;
  --padding-inline: 20rem;
  --padding-block: 16rem;
  --arrow-width: 27rem;
  --arrow-height: 16rem;
  --arrow-right: 16rem;
  --arrow-gap: 16rem;
  --li-padding-block: 6rem;
  --li-padding-inline: 0;
  --li-font-size: 16rem;
  --li-font-weight: 500;
  --li-text-transform: none;
  --li-line-height: 1.1;
  display: inline-block;
  width: 100%;
  position: relative;
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  color: var(--color);
}
.vsb-main button {
  max-width: 100%!important;
  background: var(--background);
  position: relative;
  border-radius: var(--border-radius);
  border: var(--border);
  padding: 0 calc(var(--padding-inline) + var(--arrow-width) + var(--arrow-gap)) 0 var(--padding-inline);
  display: flex;
  align-items: center;
  height: var(--height);
  width: 100%;
  z-index: 1;
}
.vsb-main button:after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--arrow-right);
  background: url(arrow-down.svg) no-repeat center / contain;
  width: var(--arrow-width);
  height: var(--arrow-height);
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.vsb-main .title {
  user-select: none;
  letter-spacing: 0;
  margin-bottom: 0!important;
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.vsb-main.open button:after {
  transform: translateY(-50%) scaleY(-1);
}
.vsb-menu {
  background: var(--background);
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: var(--padding-block) var(--padding-inline);
  border: var(--border);
  cursor: pointer;
  display: block;
  position: absolute;
  visibility: hidden;
  z-index: 1000;
  min-width: 100%;
  max-width: none;
  width: 100%;
  text-align: left;
  box-shadow: none;
  left: 0;
  top: calc(100% + 8rem);
}
.vsb-menu ul {
  cursor: pointer;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  user-select: none;
  max-width: 100%!important;
}
.vsb-menu li {
  padding: var(--li-padding-block) var(--li-padding-inline);
  font-size: var(--li-font-size, var(--font-size));
  font-weight: var(--li-font-weight, var(--font-weight));
  text-transform: var(--li-text-transform, var(--text-transform));
  line-height: var(--li-line-height, var(--line-height));
}
.vsb-menu li:hover,
.vsb-menu li.active {
  color: var(--color-active);
  background: var(--background-active);
}
.form-elem:has(.select-vanilla--lg) .vsb-main {
  --font-size: 22rem;
  --height: 76rem;
  --border-radius: 8rem;
  --border: 4rem solid var(--color-gold-300);
  --padding-inline: 28rem;
  --padding-block: 16rem;
}
.quiz-elem:has(.select-vanilla--2) .vsb-main {
  --color: var(--color-white);
  --color-active: var(--color-white-500);
  --background: var(--color-red-200);
  --background-active: var(--color-red-700);
  --height: 50rem;
  --border-radius: 10rem;
  --border: none;
  --padding-inline: 3rem;
  --padding-block: 6rem;
  --arrow-width: 18rem;
  --arrow-height: 11rem;
  --arrow-right: 9rem;
  --arrow-gap: 12rem;
  --li-padding-block: 6rem;
  --li-padding-inline: 8rem;
  width: 70rem;
}
.quiz-elem:has(.select-vanilla--2) .vsb-main button {
  padding-inline: 12rem;
}
.quiz-elem:has(.select-vanilla--2) .vsb-main button:after {
  background-image: url(arrow-down2.svg);
}
.quiz-elem:has(.select-vanilla--2) .vsb-menu {
  box-shadow: 0 0 14rem 0 #00000033;
}
.quiz-elem:has(.select-vanilla--2) .vsb-menu ul {
  min-width: 0!important;
}
.quiz-elem:has(.select-vanilla--2) .vsb-menu li {
  border-radius: 5rem;
}
@media (width < 1024px) {
  .vsb-main {
    --font-size: 30rem;
    --height: 109rem;
    --border-radius: 11rem;
    --padding-inline: 40rem;
    --li-font-size: 24rem;
    --arrow-width: 40rem;
    --arrow-height: 24rem;
    --arrow-right: 24rem;
    --arrow-gap: 24rem;
  }
  .form-elem:has(.select-vanilla--lg) .vsb-main {
    --font-size: 30rem;
    --height: 109rem;
    --border-radius: 11rem;
    --li-font-size: 20rem;
  }
}
