.cs-b {
  --active-background-color: var(--color-w2);
}
.cs-ob {
  --active-background-color: var(--color-w2);
}
form.searchbar {
  font-family: var(--bodytext-font-family), serif;
  color: var(--primary-color);
  background-color: transparent;
  font-size: var(--font-size);
  width: 90vw;
  margin: 0 auto 0 auto;
  letter-spacing: 0.5px;
}
.sb-title {
  width: 100%;
}
.outer-wrapper {
  position: relative;
  background-color: var(--background-color);
}
.sb-input-area {
  width: 100%;
  display: flex;
  align-items: center;
}
.sb-input-wrapper {
  background-color: transparent;
  border-radius: 8px;
  padding: 8px 6px 8px 12px;
  box-sizing: border-box;
  display:flex;
  align-items: center;
  margin: 2px;
  border: 1px solid var(--primary-color);
  gap: 8px;
  min-height: 55px;
}
.sb-input-wrapper:focus,
.sb-input-wrapper:focus-within,
.sb-input-wrapper:hover,
.sb-input-wrapper:active {
  border-width: 3px !important;
  padding: 7px 5px 7px 11px;
  margin: 1px;
}
.outer-wrapper.error .sb-input-wrapper {
  border: 1px solid var(--color-error);
}
.sb-error {
  display: none;
  color: var(--color-error);
  font-size: calc(1em - 4px)
}
.sb-glass {
  border: none;
  margin-top:  6px;
}
.sb-microphone {
  border: none;
  cursor: pointer;
  margin-top: 6px;
}
.sb-microphone:hover,
.sb-microphone:hover:not(:disabled),
.sb-microphone:active{
  background-color: rgba(24, 113, 189, 0.5);
}
.sb-input {
  color: var(--primary-color);
  background-color: transparent;
  border: none;
  width: 100%;
  outline: none;
  padding: 0;
  resize: none;
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  padding-right: 8px;
  height: 22px;
}
.searchbar.submitting .sb-input,
.sb-input::placeholder {
  color: var(--primary-color);
  opacity: 50%;
  font-style: normal;
}
.searchbar.submitting .sb-input-wrapper {}
.searchbar.submitting .sb-submit {
}
.sb-description {
  text-align: center;
  color: var(--primary-color);
  margin: 3px auto 0 auto;
  font-size: calc(1em - 4px);
  line-height: 14px;
}
.sb-description p,
.sb-description div {
  margin: 0;
  padding: 4px 0;
}
/**
 * DESKTOP adjustments
 * This component considers mobile upto window width of 480px
 */

@media screen and (min-width: 480px) {
  form.searchbar {
    width: 100% !important;
    margin-left: 0 !important;
  }
}