/* Стили для body, добавляют фоновое изображение */

/* Основной контейнер квиза */
.quiz {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
  margin-left: auto;
  margin-right: auto;
  user-select: none;
}

/* Стили для формы квиза */
.quiz__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  padding: 0px;
  border-radius: 5px;
  margin: auto;
}

/* Поле для шага квиза */
.quiz__fieldset {
  margin-bottom: 50px;
  margin-top: 10px;
}

/* Легенда с вопросом и аватаром */
.quiz__legend {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  padding: 0px;
  border-radius: 5px;
  margin-bottom: 20px;
  width: 100%;
}

/* Стили для аватара */
.quiz__ava {
  width: 60px;
  margin-right: 20px;
  margin-left: 12px;
}

/* Стили для вопроса */
.quiz__question p:first-child {
  text-transform: uppercase;
  font-weight: 500;
}

/* Контейнер для прогресс-бара */
.quiz__progress {
  width: 100%;
  height: 10px;
  margin-bottom: 20px;
}

/* Линия прогресса */
.quiz__progress-line {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
}

/* Заполнение прогресс-бара */
.quiz__progress-fill {
  width: 20%;
  height: 10px;
  background: linear-gradient(45deg, #1fadff 0, #2684bb 100%);
  border-radius: 5px;
  transition: width 0.3s;
}

/* Сетка для ответов */
.quiz__answer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Стили для ответа */
.wrap-step-object .quiz__answer-item {
  display: flex;
  align-items: start;
  border: 1px solid #bbb;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  
  height: 200px;
  max-width:304px;
}

/* Круг для отметки ответа */
.wrap-step-object .quiz__answer-item-circle {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid #bbb;
  margin-right: 15px;
  position: relative;
  min-width: 25px;
}

/* Иконка "проверки" ответа */
.wrap-step-object .quiz__answer-item-circle:after {
  width: 20px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTE3LjcyIDExNy43MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTE3LjcyIDExNy43MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsNCgkuc3Qwe2ZpbGw6IzAxQTYwMTt9DQpdXT48L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01OC44NiwwYzkuMTMsMCwxNy43NywyLjA4LDI1LjQ5LDUuNzljLTMuMTYsMi41LTYuMDksNC45LTguODIsNy4yMWMtNS4yLTEuODktMTAuODEtMi45Mi0xNi42Ni0yLjkyIGMtMTMuNDcsMC0yNS42Nyw1LjQ2LTM0LjQ5LDE0LjI5Yy04LjgzLDguODMtMTQuMjksMjEuMDItMTQuMjksMzQuNDljMCwxMy40Nyw1LjQ2LDI1LjY2LDE0LjI5LDM0LjQ5IGM4LjgzLDguODMsMjEuMDIsMTQuMjksMzQuNDksMTQuMjlzMjUuNjctNS40NiwzNC40OS0xNC4yOWM4LjgzLTguODMsMTQuMjktMjEuMDIsMTQuMjktMzQuNDljMC0zLjItMC4zMS02LjM0LTAuOS05LjM3IGMyLjUzLTMuMyw1LjEyLTYuNTksNy43Ny05Ljg1YzIuMDgsNi4wMiwzLjIxLDEyLjQ5LDMuMjEsMTkuMjJjMCwxNi4yNS02LjU5LDMwLjk3LTE3LjI0LDQxLjYyIGMtMTAuNjUsMTAuNjUtMjUuMzcsMTcuMjQtNDEuNjIsMTcuMjRjLTE2LjI1LDAtMzAuOTctNi41OS00MS42Mi0xNy4yNEM2LjU5LDg5LjgzLDAsNzUuMTEsMCw1OC44NiBjMC0xNi4yNSw2LjU5LTMwLjk3LDE3LjI0LTQxLjYyUzQyLjYxLDAsNTguODYsMEw1OC44NiwweiBNMzEuNDQsNDkuMTlMNDUuOCw0OWwxLjA3LDAuMjhjMi45LDEuNjcsNS42MywzLjU4LDguMTgsNS43NCBjMS44NCwxLjU2LDMuNiwzLjI2LDUuMjcsNS4xYzUuMTUtOC4yOSwxMC42NC0xNS45LDE2LjQ0LTIyLjljNi4zNS03LjY3LDEzLjA5LTE0LjYzLDIwLjE3LTIwLjk4bDEuNC0wLjU0SDExNGwtMy4xNiwzLjUxIEMxMDEuMTMsMzAsOTIuMzIsNDEuMTUsODQuMzYsNTIuNjVDNzYuNCw2NC4xNiw2OS4yOCw3Ni4wNCw2Mi45NSw4OC4yN2wtMS45NywzLjhsLTEuODEtMy44N2MtMy4zNC03LjE3LTcuMzQtMTMuNzUtMTIuMTEtMTkuNjMgYy00Ljc3LTUuODgtMTAuMzItMTEuMS0xNi43OS0xNS41NEwzMS40NCw0OS4xOUwzMS40NCw0OS4xOXoiLz48L2c+PC9zdmc+);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Текст ответа */
.wrap-step-object .quiz__answer-item-text {
  line-height: 1.5;
}

/* Скрытие радиокнопок */
.wrap-step-object .quiz__answer-item input {
  display: none;
}

/* Стили для выбранного ответа */
.wrap-step-object .quiz__answer-item input:checked + .wrap-step-object .quiz__answer-item-circle {
  border: 1px solid #2684bb;
}
/*.quiz__answer-item input:checked + .wr-text-circle .quiz__answer-item-circle:after {
    opacity: 1;
}*/

.wrap-step-object .quiz__answer-item input:checked + .quiz__answer-item-circle:after {
  opacity: 1;
}

/* Стили для кнопки перехода */
.quiz__button {
  width: 300px;
  font-weight: 700;
  color: #fff;
  padding: 10px 0;
  background: linear-gradient(45deg, #1fadff 0, #2684bb 100%);
  border-radius: 5px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 17px;
  text-align: center;
  margin-bottom:13px;
}
.quiz__button.hidd {
	opacity: 0.2;
    pointer-events: none;
}
.wrap_button{
display: flex;
    flex-direction: row;
    /*align-content: space-between;
    flex-wrap: wrap;*/
}

.quiz__input-text label, .quiz__input-text input{
	display: block;
}
.quiz__input-text input{
	width: 100%;
    height: 21px;
    margin-bottom: 17px;
}
.quiz__free-text{
	background-color: aquamarine;
    border-radius: 4px;
    padding: 5px;
}
.quiz__free-text.hidden, .wrap-one-file.hidden-file{
	display: none;
}
.wrap-step-object{
	opacity: 1;
	transition: opacity 1.5s; 
	display: block;
}
.wrap-step-object.hidden-step,.wrap-one-file.hidden-file{
	display: none;
	
}
.wrap-step-object.hidden-step2{
	opacity: 0;
}
.one-button-wrap.send, .one-button-wrap.next{
	width: 100%;
    text-align: right;
}
.wrap-files-title{
	margin-bottom: 13px;
}
.wrap-pole-files .plus{
	cursor: pointer;
    color: green;
    font-weight: bold;
}
.wrap-one-file{
	margin-bottom:12px;
}
.file-dell{
	cursor: pointer;
    color: red;
    font-weight: bold;
	margin-left: 4px;
    margin-right: 10px;
}
.main-message {
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}
@media (max-width: 600px) {
  .quiz__form .quiz__answer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: unset;
  }
  .quiz__form .wrap-step-object .quiz__answer-item {
    width: 90%;
    margin-bottom: 22px;
  }
}
