/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

* {
  margin: 0;
  box-sizing: border-box;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

:root {
  --main-color: #56BA06;
  --second-color: #E4FFCE;
  --additional-color: #D3FFB0;
  --main-text: #0A0A0A;
  --second-text: #717182;
  --white: #ffffff;
  --prev-text: #767676;
  --prev-color: #F3F3F3;
  --field-border: #E5E7EB;
  --main-bg: linear-gradient(135deg, #effff0 0%, #e4ffce 100%), #ffffff;
}

@font-face {
  font-family: "Arial";
  src: url("../arial/ArialBold.ttf") format("woff"), url("../arial/ArialBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arial";
  src: url("../arial/ArialRegular.ttf") format("woff"), url("../arial/ArialRegular.ttf") format("truetype");
  font-weight: 44;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-body: "Arial", sans-serif;
  font-family: var(--font-body);
  --color-text: #000;
  color: var(--color-text);
  color-scheme: normal;
  --min-font-size: 0.75rem;
  --max-font-size: 1.05rem;
  --base-font-size: clamp(
    var(--min-font-size),
    0.4rem + 0.5vw,
    var(--max-font-size)
  );
}

html {
  font-size: var(--base-font-size);
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--main-bg);
  min-height: 100vh;
}

._container {
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 clamp(16px, 13.0285714286px + 0.7619047619vw, 24px);
  width: 100%;
  position: relative;
}

.main-button {
  outline: none;
  border: none;
  background: transparent;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: clamp(11.2px, 9.12px + 0.5333333333vw, 16.8px) clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
  background: var(--main-color);
  border-radius: clamp(6.4px, 5.2114285714px + 0.3047619048vw, 9.6px);
}
.main-button span {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
}
@media (max-width: 390px) {
  .main-button span {
    font-size: 18px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .main-button span {
    font-size: calc(0.003327787 * 100vw + 16.7021630616px);
  }
}
@media (min-width: 1441px) {
  .main-button span {
    font-size: 21.4941763727px;
  }
}
.main-button:hover {
  opacity: 0.7;
}

#next {
  outline: none;
  border: none;
  background: transparent;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: clamp(6.4px, 5.2114285714px + 0.3047619048vw, 9.6px) clamp(12.8px, 10.4228571429px + 0.6095238095vw, 19.2px);
  background: var(--main-color);
  border-radius: clamp(6.4px, 5.2114285714px + 0.3047619048vw, 9.6px);
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
}
@media (max-width: 390px) {
  #next {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  #next {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  #next {
    font-size: 16.9961175818px;
  }
}
#next:hover {
  opacity: 0.7;
}

#prev {
  outline: none;
  border: none;
  background: transparent;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: clamp(6.4px, 5.2114285714px + 0.3047619048vw, 9.6px) clamp(12.8px, 10.4228571429px + 0.6095238095vw, 19.2px);
  background: var(--prev-color);
  border-radius: clamp(6.4px, 5.2114285714px + 0.3047619048vw, 9.6px);
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: var(--prev-text);
}
@media (max-width: 390px) {
  #prev {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  #prev {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  #prev {
    font-size: 16.9961175818px;
  }
}
#prev:hover {
  opacity: 0.7;
}

.quiz {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.quiz__container {
  display: flex;
  justify-content: center;
}
.quiz__wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 680px;
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
  border-radius: clamp(11.2px, 9.12px + 0.5333333333vw, 16.8px);
  min-height: clamp(240px, 195.4285714286px + 11.4285714286vw, 360px);
}
.quiz__start {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.quiz__start.hide-up {
  position: absolute;
  opacity: 0.3;
  transform: translateY(-1000%);
}
.quiz__start.hide-down {
  position: absolute;
  opacity: 0.3;
  transform: translateY(1000%);
}
.quiz__thank {
  position: absolute;
  transition: all 0.3s ease-in-out;
  transform: translateY(1000%);
}
.quiz__thank.show {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.quiz__form {
  position: absolute;
  transition: all 0.3s ease-in-out;
  transform: translateY(1000%);
}
.quiz__form.show {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.quiz__form.hide-up {
  position: absolute;
  opacity: 0.3;
  transform: translateY(-1000%);
}
.quiz__form.hide-down {
  position: absolute;
  opacity: 0.3;
  transform: translateY(1000%);
}

.start {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(27.2px, 22.1485714286px + 1.2952380952vw, 40.8px);
}
.start__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
}
.start__text {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.start__text p {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 18px;
  color: var(--second-text);
  font-weight: 400;
  text-align: center;
}
@media (max-width: 390px) {
  .start__text p {
    font-size: 16.3333333333px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .start__text p {
    font-size: calc(0.0027731559 * 100vw + 15.2518025513px);
  }
}
@media (min-width: 1441px) {
  .start__text p {
    font-size: 19.2451469773px;
  }
}
.start__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(11.2px, 9.12px + 0.5333333333vw, 16.8px);
  width: 100%;
}
.start__info h1 {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 32px;
  font-weight: 400;
  color: var(--main-text);
  text-align: center;
}
@media (max-width: 390px) {
  .start__info h1 {
    font-size: 28px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .start__info h1 {
    font-size: calc(0.006655574 * 100vw + 25.4043261231px);
  }
}
@media (min-width: 1441px) {
  .start__info h1 {
    font-size: 34.9883527454px;
  }
}
.start__alert {
  display: flex;
  align-items: center;
  max-width: clamp(392px, 319.2px + 18.6666666667vw, 588px);
  gap: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
  background: var(--second-color);
  border: 1px solid var(--main-color);
  padding: clamp(8px, 6.5142857143px + 0.380952381vw, 12px) clamp(14.4px, 11.7257142857px + 0.6857142857vw, 21.6px);
  border-radius: clamp(38.4px, 31.2685714286px + 1.8285714286vw, 57.6px);
}
@media (max-width: 767px) {
  .start__alert {
    flex-direction: column;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
    align-items: flex-start;
    max-width: none;
    width: 100%;
  }
}
.start__alert p {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--main-text);
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 390px) {
  .start__alert p {
    font-size: 13px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .start__alert p {
    font-size: calc(0.0016638935 * 100vw + 12.3510815308px);
  }
}
@media (min-width: 1441px) {
  .start__alert p {
    font-size: 14.7470881864px;
  }
}
@media (max-width: 767px) {
  .start__alert p {
    background: var(--second-color);
    border: 1px solid var(--main-color);
    padding: clamp(8px, 6.5142857143px + 0.380952381vw, 12px) clamp(14.4px, 11.7257142857px + 0.6857142857vw, 21.6px);
    border-radius: clamp(38.4px, 31.2685714286px + 1.8285714286vw, 57.6px);
  }
}

.thank {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(27.2px, 22.1485714286px + 1.2952380952vw, 40.8px);
}
.thank__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
}
.thank__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14.4px, 11.7257142857px + 0.6857142857vw, 21.6px);
  width: 100%;
}
.thank__info h1 {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 32px;
  font-weight: 400;
  color: var(--main-text);
  text-align: center;
}
@media (max-width: 390px) {
  .thank__info h1 {
    font-size: 28px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .thank__info h1 {
    font-size: calc(0.006655574 * 100vw + 25.4043261231px);
  }
}
@media (min-width: 1441px) {
  .thank__info h1 {
    font-size: 34.9883527454px;
  }
}
.thank__info p {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
  color: var(--main-text);
  text-align: center;
}
@media (max-width: 390px) {
  .thank__info p {
    font-size: 18px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .thank__info p {
    font-size: calc(0.003327787 * 100vw + 16.7021630616px);
  }
}
@media (min-width: 1441px) {
  .thank__info p {
    font-size: 21.4941763727px;
  }
}
.thank__alert {
  box-sizing: border-box;
  padding: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
  border-radius: clamp(16px, 13.0285714286px + 0.7619047619vw, 24px);
  gap: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: clamp(432px, 351.7714285714px + 20.5714285714vw, 648px);
  background: var(--additional-color);
  width: 100%;
}
.thank__alert h6 {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  color: var(--main-text);
  text-align: center;
}
@media (max-width: 390px) {
  .thank__alert h6 {
    font-size: 16.3333333333px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .thank__alert h6 {
    font-size: calc(0.0027731559 * 100vw + 15.2518025513px);
  }
}
@media (min-width: 1441px) {
  .thank__alert h6 {
    font-size: 19.2451469773px;
  }
}
.thank__alert p {
  max-width: clamp(360px, 293.1428571429px + 17.1428571429vw, 540px);
  background: var(--second-color);
  padding: clamp(8px, 6.5142857143px + 0.380952381vw, 12px) clamp(14.4px, 11.7257142857px + 0.6857142857vw, 21.6px);
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-text);
  text-align: center;
}
@media (max-width: 390px) {
  .thank__alert p {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .thank__alert p {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  .thank__alert p {
    font-size: 16.9961175818px;
  }
}

.form {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(27.2px, 22.1485714286px + 1.2952380952vw, 40.8px);
  flex: 1;
}
.form__utils {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.form__progress {
  display: flex;
  flex-direction: column;
  gap: clamp(9.6px, 7.8171428571px + 0.4571428571vw, 14.4px);
  width: 100%;
}
.form__progress-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form__progress-info h6 {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-text);
}
@media (max-width: 390px) {
  .form__progress-info h6 {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .form__progress-info h6 {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  .form__progress-info h6 {
    font-size: 16.9961175818px;
  }
}
.form__progress-info p {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--main-text);
}
@media (max-width: 390px) {
  .form__progress-info p {
    font-size: 11.3333333333px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .form__progress-info p {
    font-size: calc(0.0011092623 * 100vw + 10.9007210205px);
  }
}
@media (min-width: 1441px) {
  .form__progress-info p {
    font-size: 12.4980587909px;
  }
}
.form__progress-bar {
  width: 100%;
  border-radius: clamp(12px, 9.7714285714px + 0.5714285714vw, 18px);
  background: var(--second-color);
  height: 5px;
  overflow: hidden;
}
.form__progress-fill {
  height: 100%;
  background: var(--main-color);
  border-radius: clamp(12px, 9.7714285714px + 0.5714285714vw, 18px);
  width: 0;
}
.form__fields {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(27.2px, 22.1485714286px + 1.2952380952vw, 40.8px);
}

.field {
  position: absolute;
  transition: all 0.3s ease-in-out;
  transform: translateY(1000%);
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(19.2px, 15.6342857143px + 0.9142857143vw, 28.8px);
}
.field.show {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.field.hide-up {
  position: absolute;
  opacity: 0.3;
  transform: translateY(-1000%);
}
.field.hide-down {
  position: absolute;
  opacity: 0.3;
  transform: translateY(1000%);
}
.field__title {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(4.8px, 3.9085714286px + 0.2285714286vw, 7.2px);
}
.field__title h3 {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
  color: var(--main-text);
  width: 100%;
}
@media (max-width: 390px) {
  .field__title h3 {
    font-size: 18px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .field__title h3 {
    font-size: calc(0.003327787 * 100vw + 16.7021630616px);
  }
}
@media (min-width: 1441px) {
  .field__title h3 {
    font-size: 21.4941763727px;
  }
}
.field__title p {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--second-text);
  width: 100%;
  font-style: italic;
}
@media (max-width: 390px) {
  .field__title p {
    font-size: 13px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .field__title p {
    font-size: calc(0.0016638935 * 100vw + 12.3510815308px);
  }
}
@media (min-width: 1441px) {
  .field__title p {
    font-size: 14.7470881864px;
  }
}
.field__list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(9.6px, 7.8171428571px + 0.4571428571vw, 14.4px);
}

.radio {
  width: 100%;
  display: flex;
  align-items: center;
  border: 2px solid var(--field-border);
  border-radius: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  padding: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  cursor: pointer;
}
.radio:hover {
  border: 2px solid var(--main-color);
  background: var(--second-color);
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.radio:has(input[type=radio]:checked) {
  border: 2px solid var(--main-color);
  background: var(--second-color);
}
.radio__box {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--field-border);
  flex-shrink: 0;
  position: relative;
}
.radio__box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--main-color);
  display: none;
}
.radio__text {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-text);
}
@media (max-width: 390px) {
  .radio__text {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .radio__text {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  .radio__text {
    font-size: 16.9961175818px;
  }
}
.radio input[type=radio]:checked + .radio__box {
  background: var(--white);
  border: 1px solid var(--main-color);
}
.radio input[type=radio]:checked + .radio__box::before {
  display: block;
}

.checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  border: 2px solid var(--field-border);
  border-radius: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  padding: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  cursor: pointer;
}
.checkbox:hover {
  border: 2px solid var(--main-color);
  background: var(--second-color);
}
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.checkbox:has(input[type=checkbox]:checked) {
  border: 2px solid var(--main-color);
  background: var(--second-color);
}
.checkbox__box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--field-border);
  flex-shrink: 0;
  position: relative;
}
.checkbox__box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--main-color);
  display: none;
}
.checkbox__text {
  font-family: "Montserrat", "Ubuntu", sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-text);
}
@media (max-width: 390px) {
  .checkbox__text {
    font-size: 14.6666666667px;
  }
}
@media (min-width: 391px) and (max-width: 1440px) {
  .checkbox__text {
    font-size: calc(0.0022185247 * 100vw + 13.801442041px);
  }
}
@media (min-width: 1441px) {
  .checkbox__text {
    font-size: 16.9961175818px;
  }
}
.checkbox input[type=checkbox]:checked + .checkbox__box {
  background: var(--white);
  border: 1px solid var(--main-color);
}
.checkbox input[type=checkbox]:checked + .checkbox__box::before {
  display: block;
}/*# sourceMappingURL=styles.css.map */