/* перепись article__wrap стилей */
.article__wrap .h1, .article__wrap h2, .article__wrap .h2, .article__wrap h3, .article__wrap .h3, .article__wrap h4, .article__wrap .h4 {
	margin: auto;
}

.article__wrap p+p {
	margin: 0;
}

.article__wrap .x-small {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
}

.article__wrap .article-section__calendar-day {
	font-size: 30px;
	text-align: center;
	line-height: 17px;
}

.article__wrap h1 {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 40px;
	line-height: 124%;
}

.article__wrap h2 {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 36px;
	line-height: 124%;
	margin: 0;
}

.article__wrap h3 {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 120%;
	margin: 0;
}

.article__wrap h4 {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 120%;
	margin: 0;
}

.article__wrap p {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 145%;
}

.article__wrap .small {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 145%;
}

.article__wrap .bold {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.article__wrap .thin {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.article__wrap .italic {
	font-style: italic;
}

.article__wrap .text-centered {
	text-align: center;
}

.article__wrap .green-text {
	color: #33CB66;
}

.article__wrap .red-text {
	color: #F3705F;
}

.article__wrap .white-text {
	color: #FFFFFF;
}

.article__wrap .black-text {
	color: #444444;
}

.article__wrap .blue-text {
	color: #183B8F;
}

.article__wrap .gray-text {
	color: #7A878C;
}

.article__wrap .article-section__disclaimer {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	line-height: 130%;
	text-align: center;
	color: #7A878C;
}

.article__wrap .article-section__quiz-error {
	font-size: 14px;
	color: #F3705F;
	margin-left: 4px;
}


@media (max-width: 767px) {
	.article__wrap h1 {
		font-family: 'RotonBol', Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 30px;
		line-height: 124%;
	}

	.article__wrap h2 {
		font-family: 'RotonBol', Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 26px;
		line-height: 124%;
	}

	.article__wrap h3 {
		font-family: 'RotonBol', Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 24px;
		line-height: 120%;
	}

	.article__wrap h4 {
		font-family: 'RotonBol', Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 20px;
		line-height: 120%;
	}
}

/* перепись article__wrap стилей конец */

.bold {
	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.thin {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.italic {
	font-style: italic;
}

.green-text {
	color: #33CB66;
}

.red-text {
	color: #F3705F;
}

.white-text {
	color: #FFFFFF;
}

.black-text {
	color: #444444;
}

.blue-text {
	color: #183B8F;
}

.gray-text {
	color: #7A878C;
}

.text-centered {
	text-align: center;
}

.small {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 145%;
}

.x-small {
	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
}

.article-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.article-section {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.article-section__quiz-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 14px;
}

.article-section__quiz-block {
	position: relative;
	width: 100%;
	height: fit-content;

	display: none;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.article-section__quiz-block--question {
	gap: 14px;
	align-items: flex-start;
}

.article-section__quiz-block--active {
	display: flex;
}

.article-section__accent-block {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
	background: #ECF6F5;
	border-radius: 16px;
}

.article-section__accent-block--horizontal {
	flex-direction: row;
}

.article-section__accent-block--centered {
	align-items: center;
}

.article-section__accent-block--hidden {
	display: none;
}

.article-section__accent-block--number {
	padding-left: 34px;
	border-radius: 8px;
}

.article-section__accent-block--number::before {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0px;
	left: 0px;

	border-radius: 8px 0px 100px 100px;
	background: #33CB66;

	font-family: 'RotonBol', Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 130%;
	text-align: center;
	color: #FFFFFF;
}

.article-section__accent-block--number:nth-of-type(1)::before {
	content: "1";
}

.article-section__accent-block--number:nth-of-type(2)::before {
	content: "2";
}

.article-section__accent-block--number:nth-of-type(3)::before {
	content: "3";
}

.article-section__accent-icon {
	position: relative;
	width: 24px;
	height: auto;
	flex-shrink: 0;
}

.article-section__quiz-info {
	position: relative;
	width: fit-content;
	height: fit-content;

	display: flex;
    flex-direction: row;
	justify-content: center;
    gap: 8px;
	align-self: center;
}

.article-section__note {
	position: relative;
	width: fit-content;
	min-width: 131px;
	height: fit-content;

	display: flex;
	flex-direction: row;
	gap: 4px;
	padding: 14px;
	border-radius: 8px;
	background: #FFFFFF;
}

.article-section__note-icon {
	position: relative;
	width: 24px;
	height: auto;
	flex-shrink: 0;
}

.article-section__note-icon--time {
	width: 18px;
}

.article-section__prize-label {
	position: relative;
	width: fit-content;
	height: fit-content;

	display: flex;
	flex-direction: row;
	align-self: center;
}

.article-section__prize-wrapper {
	position: relative;
	width: fit-content;
	height: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 12px 9px;
	border-radius: 8px 0px 0px 8px;
	background: #001689;
}

.article-section__prize-icon {
	position: relative;
	width: 20px;
	height: auto;
	flex-shrink: 0;
}

.article-section__prize-text {
	position: relative;
	width: fit-content;
	height: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 12px 10px 12px 5px;
	border-radius: 0px 8px 8px 0px;
	background: #33CB66;
}

.article-section__quiz-button {
	position: relative;
	width: 100%;
	max-width: 318px;
	height: 52px;

	display: none;
	align-items: center;
	justify-content: center;

	background: #33CB66;
	border-radius: 30px;
	border: none;
	outline: none;
	user-select: none;
	cursor: pointer;
	padding: 8px 14px;

	font-family: 'RotonBol', Arial, sans-serif;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 130%;
	transition: background 0.15s ease-in-out;
}

.article-section__quiz-button:hover {
	background: #001689;
}

.article-section__quiz-button--active {
	display: flex;
}

.article-section__quiz-button--back {
	background: transparent;
	border: 3px solid #33CB66;
	color: #33CB66;
	transition: background 0.15s ease-in-out, border 0.15s ease-in-out, color 0.15s ease-in-out;
}

@media (max-width: 559px) {
	.article-section__quiz-button--back {
		order: 1;
	}
}

.article-section__quiz-button--back:hover {
	background: transparent;
	border: 3px solid #001689;
	color: #001689;
}

.article-section__disclaimer {
	position: relative;
	width: fit-content;
	height: fit-content;

	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 12px;
	line-height: 130%;
	text-align: center;
	color: #7A878C;
}

.article-section__disclaimer a {
	text-decoration: none;
}

.article-section__progress {
	position: relative;
	width: 100%;
	height: 12px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background: #EEEEEE;
	border-radius: 16px;
	overflow: hidden;
}

.article-section__progress-indicator {
	position: relative;
	width: 0%;
	height: 100%;
	background: #33CB66;
	border-radius: 16px;
	transition: width 0.15s ease-in-out;
}

.article-section__quiz-indicators {
	position: relative;
	width: 100%;
	height: fit-content;

	display: none;
	flex-direction: column;
	gap: 14px;
}

.article-section__quiz-indicators--active {
	display: flex;
}

.article-section__quiz-questions {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-section__quiz-clue {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	
	padding: 8px 14px;
	border-radius: 8px;
	background: #33CB66;
}

.article-section__quiz-clue-icon {
	position: relative;
	width: 18px;
	height: auto;
	flex-shrink: 0;
}

.article-section__quiz-questions {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-section__quiz-option {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	padding: 14px;
	border-radius: 8px;
	background: #FFFFFF;
	transition: background 0.15s ease-in-out, border 0.15s ease-in-out;
	user-select: none;
	cursor: pointer;
	border: 1px solid transparent;
}

.article-section__quiz-option--active {
	background: #EEFFF0;
	border: 1px solid #33CB66;
}

.article-section__quiz-input {
	display: none;
}

.article-section__checkbox-icon {
	position: relative;
	width: 24px;
	height: auto;
	flex-shrink: 0;
	color: #7A878C;
	transition: color 0.15s ease-in-out;
}

.article-section__quiz-input:checked + .article-section__checkbox-icon {
	color: #33CB66;
}

.article-section__checkbox-checkmark {
	position: relative;
	opacity: 0;
    transform: scale(0);
	transform-origin: center;
	color: #33CB66;
	transition: all 0.15s ease-in-out;
}

.article-section__quiz-input:checked + .article-section__checkbox-icon .article-section__checkbox-checkmark {
	opacity: 1;
    transform: scale(1);
}

.article-section__quiz-buttons {
	position: relative;
	width: 100%;
	height: fit-content;

	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 14px;
}

@media (max-width: 559px) {
	.article-section__quiz-buttons {
		flex-wrap: wrap;
	}
}

.article-section__quiz-buttons--active {
	display: flex;
}

.article-section__quiz-answer {
	position: relative;
	width: 100%;
	height: fit-content;

	display: none;
	flex-direction: column;
	background: #ECF6F5;
	border-radius: 16px;
}

.article-section__quiz-answer--active {
	display: flex;
}

.article-section__quiz-answer--special {
	gap: 14px;
	background: none;
}

.article-section__quiz-answer-title {
	position: relative;
	width: 100%;
	height: fit-content;

	font-family: 'RotonBol', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 100%;

	display: none;
	justify-content: center;
	align-items: center;

	padding: 14px;
	color: #FFFFFF;
	background: #33CB66;
	border-radius: 16px 16px 0px 0px;
}

.article-section__quiz-answer-title--rounded {
	border-radius: 16px;
}

.article-section__quiz-answer-title--wrong {
	background: #F3705F;
}

[data-infection-answer="right"] .article-section__quiz-answer-title--right {
	display: flex;
}

[data-infection-answer="wrong"] .article-section__quiz-answer-title--wrong {
	display: flex;
}

.article-section__quiz-answer-text {
	position: relative;
	width: 100%;
	height: fit-content;

	padding: 24px 14px;
	border-radius: 0px 0px 16px 16px;
}

.article-section__quiz-answer-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-section__list {
	position: relative;
	margin: 0;
	padding-left: 24px;

	font-family: 'RotonReg', Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 145%;
}

.article-section__result-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.article-section__result-label {
	position: relative;
	width: 100%;
	max-width: 294px;
	height: fit-content;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: #001689;
	border-radius: 8px;
}

.article-section__prize-image {
	position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    flex-shrink: 0;
    align-self: center;
}

.article-section__quiz-error {
	position: relative;
	font-size: 14px;
	color: #F3705F;
	margin-left: 4px;
	display: none;
}

.article-section__quiz-error--active {
	display: inline-block;
}

/* modal styles start */
.infection-quiz__modal {
	position: relative;
	max-width: 268px;
	background-color: #fff;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 24px;
	transition: transform 0.375s;
}

.infection-quiz__modal--reminder {
	max-width: 450px;
}

.infection-quiz__modal-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 24px;
}

.infection-quiz__modal-text-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.infection-quiz__modal-text-wrapper p, h4 {
	margin: 0;
}

.infection-quiz__modal-text-wrapper br {
	display: block;
}

.infection-quiz__modal-buttons-wrapper {
	position: relative;
	width: 100%;
	height: fit-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
}

.infection-quiz__modal-button {
	position: relative;
	width: 100%;
	height: 48px;
	max-width: 114px;
	padding: 11px 0px;
    border-radius: 30px;
    font-family: "RotonBol";
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
	background: #33CB66;
	color: #FFF;
	user-select: none;
}

.infection-quiz__modal-button--fit {
	width: fit-content;
	max-width: unset;
	padding: 11px 24px;
}

.infection-quiz__modal-button--blue {
	border: 3px solid #001689;
    color: #001689;
    text-decoration: none;
	background: transparent;
    transition: background, color 0.3s;
}

.infection-quiz__modal-button--blue:hover {
	background: #001689;
    color: #fff;
}

.infection-quiz__modal-title {
	position: relative;
	font-family:  "RotonBol", Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 120%;
	margin: 0;
}

.infection-quiz__modal-title--black {
	color: #444444;
}

.modal[data-modal="infection-modal"] {
	backdrop-filter: blur(47px);
	opacity: 1;
}

.infection-quiz__modal-label {
	position: relative;
	width: fit-content;
	height: fit-content;

	display: flex;
	padding: 12px;
	margin-left: auto;
	margin-right: auto;

	background: #ECF6F5;
	border-radius: 16px;
}

.infection-quiz__modal .modal-auth__leadtext a[href]:not([class]) {
	display: inline-block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-decoration: underline;
    background: none;
    color: #001689;
    transition: none;
}

/* modal styles end */