.speakup__container {
  --speakup-blue-main: #000064;
  --speakup-blue: #11357b;
  --speakup-white: #fff;
  --speakup-dark-gray: #181f27;
  --speakup-border: #d8dde6;
  --speakup-font-family: "Effra", Arial, sans-serif;

  box-sizing: border-box;
  color: var(--speakup-dark-gray);
  font-family: var(--speakup-font-family);
  max-width: 360px;
  width: 100%;
}

.speakup__container *,
.speakup__container *::before,
.speakup__container *::after {
  box-sizing: border-box;
}

.speakup__input-group {
  width: 100%;
}

.speakup__label {
  color: currentColor;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 8px;
}

.speakup__select__wrapper {
  align-items: center;
  display: grid;
  grid-template-areas: "select";
  margin-bottom: 18px;
  width: 100%;
}

.speakup__select {
  appearance: none;
  background: var(--speakup-white);
  border: 1px solid var(--speakup-border);
  border-radius: 4px;
  color: var(--speakup-dark-gray);
  font-family: var(--speakup-font-family);
  font-size: 16px;
  grid-area: select;
  line-height: 24px;
  min-height: 48px;
  padding: 11px 42px 11px 14px;
  width: 100%;
}

.speakup__select:focus {
  border-color: var(--speakup-blue);
  box-shadow: 0 0 0 2px rgba(17, 53, 123, 0.14);
  outline: none;
}

.speakup__select__wrapper::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='14' viewBox='0 0 448 512'%3E%3Cpath fill='%2370787e' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  grid-area: select;
  height: 16px;
  justify-self: end;
  margin-right: 16px;
  pointer-events: none;
  width: 14px;
}

.speakup__button {
  align-items: center;
  background: var(--speakup-blue-main);
  border: 1px solid var(--speakup-blue-main);
  border-radius: 999px;
  color: var(--speakup-white);
  display: none;
  font-family: var(--speakup-font-family);
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  line-height: 20px;
  min-height: 46px;
  padding: 12px 24px;
  text-decoration: none;
  width: fit-content;
}

.speakup__button:hover,
.speakup__button:focus {
  background: var(--speakup-blue);
  border-color: var(--speakup-blue);
  color: var(--speakup-white);
  text-decoration: none;
}

.speakup__button--active {
  display: inline-flex;
}