/* ___________________FORM____________________ */

:root {
  --prime-color-black: #0e0b21;
  --prime-color-blue: #6659f6;
  --second-color-black: #5d5d5d;
  --color-ukraine: #f28c2f;
  --color-history: #f8b525;
  --color-english: #ad1932;
  --color-physics: #ef437d;
  --color-geo: #51bebd;
  --color-bio: #8dc52c;
  --color-chem: #952dd6;
  --color-math: #6280e9;
  --color-main: #2fa1ff;
  --color-secondary: #55b2ff;
}

header{
	display: none !important;
}

.body {
  font-family: Manrope;
}
.p {
  font-family: Manrope;
}

.hidden {
  display: none;
}

.form-logo {
  display: block;
  margin: 0 auto;
  height: 50px;
  margin-bottom: 10px;
  margin-top: 60px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.icon-back {
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 25px;
  height: 25px;
}
.icon-subj {
  display: block;
  height: 20px;
  width: 20px;
}
.wrapper-progress {
  margin: 0 auto;
  position: relative;
  max-width: fit-content;
}
.line-custom {
  z-index: -1;
  position: relative;
  top: 34px;
  padding: 0;
  margin: 0;
  border-bottom: var(--color-main) 1px solid;
}

.block-progress {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
}

.num_progress {
  background-color: #d9d9d9;
  width: 35px;
  height: 35px;
  text-align: center;
  padding: 5px;
  color: white;
  border-radius: 20px;
}

.question-text {
  text-align: center;
  margin-top: 0;
  font-weight: 700;
  font-size: larger;
  padding: 0 10px;
}
.question-2 .question-text {
  margin-bottom: 0;
}
.question-text-description {
  font-size: small;
  color: var(--second-color-black);
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}

.wrap-list-class {
  display: flex;
  justify-content: center;
}
.list-lvl-class {
  list-style: none;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px;
  justify-content: center;
  width: 320px;
  padding-bottom: 40px;
}

.item-lvl {
  cursor: pointer;
  padding: 5px 25px;
  border: var(--color-main) 1px solid;
  border-radius: 20px;
  color: var(--color-main);
  transition-duration: 200ms;
  transition-property: color, background;
}

.btn-next {
  cursor: pointer;
  font-weight: 600px;
  display: block;
  margin: 0 auto;
  background-color: var(--color-main);
  color: white;
  border-radius: 12px;
  padding: 10px 60px;
}

.list-subj {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  gap: 10px;
  padding: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.item-subj {
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  padding: 2px 20px;
  border: #c5dae2 1px solid;
  border-radius: 30px;
  width: fit-content;
}
.item-subj-text {
  padding: 10px;
  margin: 0;
}

.question-4{
	margin-bottom: 25px;
}

.question-input-form {
  margin: 0 auto;
  margin-bottom: 35px;
  padding: 10px 110px 10px 13px !important;
  border: #d8d8d8 1px solid !important;
  border-radius: 13px !important;
}
#form_phone_1{
	padding: 10px 13px 10px 101px !important;
}
.iti__selected-flag{
	border-radius: 12px 0px 0px 12px;
}

.question-input-wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
}

[data-selected="true"] {
  background-color: var(--color-main);
  color: white;
}

[active="true"] {
  background-color: var(--color-main);
}

.done-progress {
  background-color: white;
  border: var(--color-main) 1px solid;
}