body {
 font-family: sans-serif;
}
h1 {
 color: rgb(255, 255, 255);
 font-size: 48px;
 font-weight: 700;
 line-height: 57px;
 text-align: center;
 margin: 20px 0 35px;
}
.bg-color {
 flex-grow: 1;
 background: #9244ff url("../images/png/quiz.png") no-repeat center;
 background-size: cover;
}
.wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}
.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
 opacity: 1;
}
.form-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 100px;
}
.form {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.form-display {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 width: 100%;
}
.form .form-check {
 width: calc((100% - 20px) / 2);
 height: 110px;
 display: flex;
 align-items: center;
 margin-bottom: 20px;
 padding: 20px;
 border-radius: 30px;
 box-shadow: 0px 8px 32px 0px rgb(111, 0, 208);
 background: rgb(255, 255, 255);
}
.form .form-check.warning {
 background: #f43290;
}
.form .form-check.warning .form-check-input[type="radio"] {
 background: #ffffff;
}
.form .form-check.warning .form-check-input:after {
 color: #f43290;
}
.form .form-check.correct {
 background: #c4ff00;
}
.form .form-check.correct .form-check-input[type="radio"] {
 background: #ffffff;
 color: rgb(0, 0, 0);
}
.form .form-check.warning .form-check-label {
 color: #ffffff;
}
.form-check-input[type="radio"]:hover {
 cursor: pointer;
}
.form-check-input[type="radio"]:checked {
 background: #ffffff;
 outline: none;
 border: #ffffff;
}
.form .form-check .form-check-input:after {
 color: rgb(255, 255, 255);
 font-size: 24px;
 font-weight: 700;
 line-height: 29px;
 text-align: center;
}
.form .form-check:nth-child(1) .form-check-input:after {
 content: "A";
}
.form .form-check:nth-child(2) .form-check-input:after {
 content: "Б";
}
.form .form-check:nth-child(3) .form-check-input:after {
 content: "В";
}
.form .form-check:nth-child(4) .form-check-input:after {
 content: "Г";
}

.form-check-input[type="radio"] {
 width: 70px;
 min-width: 70px;
 height: 70px;
 border-radius: 15px;
 background: rgb(146, 68, 255);
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 margin-right: 20px;
}
.form-check-input:checked[type="radio"],
.form-check-input:focus[type="radio"] {
 outline: none;
}
.form .form-check.active {
 background: #c4ff00;
}
.form .form-check.active .form-check-label {
 color: rgb(0, 0, 0);
}
.form .form-check.active .form-check-input[type="radio"] {
 background: #ffffff;
}
.form .form-check.active .form-check-input:after {
 color: #000;
}
.form .form-check.disabled .form-check-label {
 color: rgb(212, 198, 232);
}
.form .form-check.disabled .form-check-input[type="radio"] {
 background: rgb(212, 198, 232);
}
.form .form-check.disabled .form .form-check .form-check-input:after {
 color: rgb(255, 255, 255);
}
.form-check-label {
 height: 100%;
 width: 100%;
 display: flex;
 align-items: center;
 color: rgb(65, 45, 113);
 font-size: 24px;
 font-weight: 600;
 line-height: 29px;
 text-align: left;
}
.form-check-label:hover {
 cursor: pointer;
}
.progress {
 width: 100%;
 border-radius: 30px;
 box-shadow: 0px 8px 32px 0px rgb(111, 0, 208);
 background: rgba(255, 255, 255, 0.5);
}
.progress-container {
 display: flex;
 align-items: center;
 width: 100%;
}
.progress-container#question-4 {
 width: max-content;
}
.progress-container .progress-quiz {
 width: 100%;
 height: 4px;
 margin: 0 6px;
 border-radius: 30px;
 box-shadow: 0px 8px 32px 0px rgb(111, 0, 208);
 background: rgb(255, 255, 255);
 opacity: 0.5;
}
.progress-container.active .progress-quiz {
 background: #c3ff00;
 box-shadow: 0px 8px 32px 0px rgb(111, 0, 208);
}
.circle {
 border-radius: 50%;
 width: 42px;
 height: 42px;
 background: rgba(255, 255, 255, 0.5);
 padding: 5px;
}

.progress-container.current .circle {
 background: rgba(255, 234, 0, 0.5);
}
.progress-container.current .inner-cirlce {
 background: #ffea00;
}
.progress-container.active .circle,
.progress-container.active .inner-cirlce {
 background: #c3ff00;
}
.inner-cirlce {
 border-radius: 50%;
 width: 32px;
 height: 32px;
 background: #ffffff;
}
.progress-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
}
.correct-question {
 margin-bottom: 24px;
}
.btn-primary:disabled {
 background: rgba(175, 118, 255, 0.5) url(../images/png/arrow_disabled.png)
  no-repeat center right;
 background-position-x: 360px;
 border: none;
 color: rgb(129, 74, 207);
}
.btn-primary {
 border-radius: 30px;
 background: rgb(255, 234, 0) url(../images/png/arrow.png) no-repeat center
  right;
 background-origin: content-box;
 background-position-x: 120%;
 border: none;
 padding: 30px 87px 37px 37px;
 color: rgb(0, 0, 0);
 font-size: 32px;
 font-weight: 600;
 line-height: 38px;
 text-align: left;
 margin: 110px auto 37px;
}
.btn-primary:hover {
 opacity: 0.8;
}
.btn-primary:hover,
.btn-primary:focus {
 background-color: rgb(255, 234, 0);
 color: rgb(0, 0, 0);
}
.correct-answer-title {
 color: rgb(255, 255, 255);
 font-size: 36px;
 font-weight: 700;
 line-height: 43px;
 text-align: center;
 margin: 0 auto;
}
.correct-answer {
 color: rgb(255, 255, 255);
 font-size: 30px;
 font-weight: 600;
 line-height: 36px;
 text-align: center;
}
@media (max-width: 991px) {
 .form-display {
  flex-direction: column;
 }
 .form .form-check {
  width: 100%;
 }
}
@media (max-width: 767px) {
 h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  margin: 14px 0 20px;
 }
 .form-container > img {
  width: 80px;
  height: 51px;
 }
 .form .form-check {
  height: 75px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 15px;
 }
 .form-check-input[type="radio"] {
  width: 50px;
  min-width: 50px;
  height: 50px;
  margin-right: 12px;
 }
 .form .form-check .form-check-input:after {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
 }
 .form-check-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
 }
 .btn-primary {
  width: 350px;
  margin: 130px 0 30px;
  padding: 20px 80px 20px 20px;
  font-size: 26px;
  font-weight: 600;
  line-height: 31px;
  border-radius: 15px;
  background-position-x: 270px;
 }
 .btn-primary:disabled {
  background-position-x: 290px;
 }
 .circle {
  width: 24px;
  height: 24px;
  padding: 3px;
 }
 .inner-cirlce {
  width: 18px;
  height: 18px;
 }
 .correct-answer-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
 }
 .correct-answer {
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
 }
}
@media (max-width: 400px) {
 .btn-primary {
  width: 300px;
  font-size: 20px;
  line-height: normal;
  background-position-x: 220px;
 }
 .btn-primary:disabled {
  background-position-x: 240px;
 }
}