*,
::after,
::before {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	margin: 0;
}

p {
	margin: 0;
}

button {
	font-family: 'Rubik', sans-serif;
}

body {
	font-family: 'Rubik', sans-serif;
	padding: 0px;
	margin: 0px;
	display: flex;
	flex-direction: column;
	background: #F0F0F0;
}

/* Стили по умолчанию (могут быть не нужны, если все покрывается медиа-запросами,
   но полезны как fallback или для других элементов внутри) */
.placementMainPageTop {
    width: 100%; /* Ширина всегда 100% */
    overflow: hidden; /* Предотвращает выход контента за пределы блока, если он больше высоты */
    /* Можно добавить display: flex; align-items: center; justify-content: center;
       если вы хотите центрировать содержимое внутри блока, но это зависит от HTML рекламы */
}

/* Стили для HTML-контента внутри рекламного блока */
.placementMainPageTop > * { /* Прямой дочерний элемент (обычно один контейнер от рекламной системы) */
    width: 100% !important;  /* Гарантируем, что вложенный HTML растянется по ширине */
    height: 100% !important; /* Гарантируем, что вложенный HTML растянется по высоте блока */
    display: block; /* Или flex, в зависимости от того, что приходит от рекламной системы */
    /* Важно: рекламные системы часто вставляют свои стили.
       !important здесь используется для переопределения, но будьте осторожны.
       Иногда лучше стилизовать через ID или более специфичные селекторы, если это возможно. */
}

/* Мобильные устройства: экраны до 576px включительно */
@media screen and (max-width: 576px) {
    .placementMainPageTop {
        height: 75px;
    }
}

/* Планшеты и небольшие десктопы: экраны от 577px до 1199px включительно */
@media screen and (min-width: 577px) and (max-width: 1199px) {
    .placementMainPageTop {
        height: 150px;
    }
}

/* Большие десктопы: экраны от 1200px и выше */
@media screen and (min-width: 1200px) {
    .placementMainPageTop {
        height: 200px;
    }
}

@media screen and (min-width: 1200px) {


	.header {
		justify-content: space-between;
	}

	.header-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4vw;
		background: #333;
	}

	.header {
		display: flex;
		padding: 0 14vw;
		flex-direction: row;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.left-area,
	.right-area {
		display: flex;
		align-items: center;
		gap: 1vw;
	}

	.logo {
		width: 12vw;
		height: 100%;
	}

	.logo-white {
		width: 100%;
		height: 100%;
	}

	.socail-icon {
		width: 2vw;
	}

	#myMenu,
	.openbtn,
	.overlay {
		display: none;
	}

	.header-button {
		display: flex;
		font-size: 1.1vw;
		align-items: center;
		justify-content: center;
		padding: 0.7vw 1.4vw;
		border-radius: 0.5vw;
		color: #FFFFFF;
		text-decoration: none;
		border: none;
	}

	.header-button:hover {
		color: #177de5;
		transition: 0.3s;
	}

	.left-area {
		justify-content: flex-start;
	}

	.right-area {
		justify-content: flex-end;
	}

	.under-header {
		width: 100%;
		align-items: center;
		flex-direction: row;
		height: 7vw;
		background: #1966B0;
		display: flex;
	}

	.p-information {
		margin: 0;
		font-size: 1.75vw;
		color: #ffffff;
		font-weight: bold;
	}

	.p-info-area {
		font-size: 1.1vw;
	}

	.content-underheader {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: 0 14vw;
		justify-content: space-between;
		display: flex;
		align-items: center;
	}

	.underheader-button {
		background: #1966B0;
		border: 0.2vw solid #FFFFFF;
		box-shadow: -0.3vw 0.3vw 0px #4FA7ED;
		border-radius: 0.5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.1vw;
		color: #ffffff;
		padding: 0.7vw 1.4vw;
		text-decoration: none;
		cursor: pointer;
	}

	.main-container {
		position: relative;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		padding: 0 14vw;
	}

	.navigation-bar {
		display: flex;
		padding: 2vw 0;
		gap: 1vw;
	}

	.sort-btn, .create-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.4vw;
		border-radius: 1.4vw;
		padding: 0.7vw 1.4vw;
		font-size: 1.1vw;
		border: none;
		cursor: pointer;
		transition: 0.3s;
		font-weight: 700;
	}

	.sort-btn.active {
		background: #333;
		color: #ffffff;
		transition: 0.3s;
	}

	.create-btn.active {
		background: #333;
		color: #ffffff;
		transition: 0.3s;
	}

	.sort-btn:hover {
		background: #333;
		color: #ffffff;
		transition: 0.3s;
	}

	.create-btn:hover {
		background: #333;
		color: #ffffff;
		transition: 0.3s;
	}

	.sort-btn:hover .navigation-icon {
		transition: 0.3s;
		fill: #ffffff !important;
	}

	.create-btn:hover .create-icon {
		transition: 0.3s;
		fill: #ffffff !important;
	}

	.quiz {
		grid-column: 2 / 12;
		display: flex;
	}

	.content {
		display: flex;
		justify-content: space-between;
		flex-direction: column;

	}

	.quiz-container {
		display: flex;
		flex-direction: column;
	}

	.quiz-item {
		width: 16.8vw;
		border: 0.1vw solid #e2e2e2;
		border-radius: 0.5vw;
		background-color: white;
	}

	.quiz-item:hover {
		box-shadow: 0 6px 26px -5px rgba(17, 17, 17, 0.15);
	}

	.quiz-box {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.quiz-box-completed {
		position: relative;
		overflow: hidden;
		width: 100%;
		gap: 3vw;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.quiz-row-completed+.quiz-row-completed {
		border-top: 0.1vw solid rgba(0, 0, 0, .08);
		padding-top: 1.33vw;
	}

	.quiz-info {
		padding: 1vw 1vw 0 1vw;
		gap: 0.5vw;
		display: flex;
		flex-direction: column;
	}

	.counter-icon {
		width: 1.1vw;
		height: 1.1vw;
	}

	.quiz-title {
		margin-bottom: 1vw;
	}

	.img-container {
		width: 100%;
	}

	.quiz-counter-info {
		display: flex;
		gap: 0.4vw;
		align-items: center;
	}

	.quiz-info-completed {
		display: flex;
		flex-direction: column-reverse;
		gap: 1vw;
	}

	.quiz-img {
		width: 100%;
		border-radius: 0.5vw 0.5vw 0 0;
		height: 16.8vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-img-completed {
		width: 18vw;
		border-radius: 0.5vw;
		;
		height: 18vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-row,
	.quiz-row-completed {
		display: flex;
		padding-bottom: 1.33vw;
		gap: 1.33vw;
		flex-direction: row;
		align-items: stretch;
	}

	.quiz-title,
	.test-type-title,
	.test-description-title,
	.test-author-title,
	.profile-username,
	.your-result-title {
		font-size: 1.3vw;
		color: #333;
		font-weight: bold;
	}

	.quiz-title,
	.your-result-title,
	.profile-username {
		color: #111;
	}

	.test-author-title,
	.test-author-name {
		color: gray;
	}

	.test-author-name {
		font-size: 1.32vw;
	}

	.test-description-title {
		margin-bottom: 1vw;
	}

	.delete-question,
	.toggle-type,
	.move-up,
	.move-down {
		border-radius: 0.5vw;
		border: none;
		padding: 0.7vw;
		background: #F4DBDB;
		color: #333;
		font-weight: 400;
		font-size: 1vw;
		width: 13vw;
		cursor: pointer;
	}

	#quiz-workspace-result {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	.test-description-text {
		font-size: 1.32vw;
		width: 80%;
		text-align: center;
		color: #333;
		font-weight: 400;
		white-space: pre-wrap;
	}

	.test-author-name {
		width: 100%;
	}

	.test-type-title {
		margin-bottom: 2vw;
	}

	.quiz-counter {
		color: #969696;
		font-weight: 400;
		font-size: 1.1vw;
	}

	.quiz-counter-completed {
		position: relative;
		font-size: 1.2vw;
		font-weight: 500;
		color: #969696;
	}

	.quiz-settings {
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 0.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 2vw;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 2vw;
	}

	.quiz-introduction {
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 0.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 2vw;
		flex-direction: column;
		align-items: center;
		margin-top: 2vw;
	}

	.quiz-workspace {
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 0.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 2vw;
		flex-direction: column;
		align-items: center;
		margin-top: 2vw;
	}

	.title-normal,
	.test-name-title {
		margin: 0;
		font-size: 2vw;
		color: #111;
		font-weight: bold;
	}

	.quiz-title-completed {
		margin-top: 1vw;
		font-size: 1.7vw;
		color: #111;
		font-weight: bold;
	}

	.title-normal {
		border-bottom: 0.1vw solid rgba(0, 0, 0, .08);
		padding-bottom: 1vw;
	}

	.create-quiz-header {
		width: 100%;
	}

	.test-name-title {
		margin-bottom: 2vw;
		font-size: 2.55vw;
		text-align: center;
	}

	.quiz-workspace-question {
		font-weight: 500;
		font-size: 1.8vw;
		text-align: center;
		color: #333;
	}

	.quiz-workspace-text {
		font-style: italic;
		font-weight: 300;
		font-size: 1.2vw;
		text-align: center;
		color: #333;
	}

	#question-container {
		display: flex;
		flex-direction: column;
		width: 70%;
	}

	.quiz-workspace-answers {
		display: flex;
		gap: 1vw;
		flex-direction: column;
		align-items: center;
		margin-bottom: 3vw;
	}

	.answer-button {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0.7vw 1.4vw;
		width: 100%;
		cursor: pointer;
		border: none;
		border-radius: 0.5vw;
		background-color: #f0f0f0;
		transition: background-color 0.3s, color 0.3s;
	}

	.answer-button svg {
		margin-right: 1vw;
		transition: stroke 0.3s;
	}

	.answer-button:hover {
		background-color: #e0e0e0;
	}

	.answer-button:hover svg circle {
		stroke: #333;
	}

	.answer-button:hover svg path {
		stroke: #333;
	}

	.answer-button:active {
		background-color: #d0d0d0;
	}

	.answer-button:active svg circle {
		stroke: #333;
	}

	.answer-button:active svg path {
		stroke: #333;
	}

	.answer-button:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.answer-button:disabled svg circle {
		stroke: #a0a0a0;
	}

	.answer-button:disabled svg path {
		stroke: #a0a0a0;
	}

	.answer-button.clicked {
		background-color: #c0c0c0;
	}

	.answer-button.clicked svg circle {
		stroke: #333;
	}

	.answer-button.clicked svg path {
		stroke: #333;
	}

	.workspace-answer,
	.answer-text {
		width: 100%;
		font-weight: 400;
		font-size: 1.3vw;
		text-align: center;
		color: #333;
	}

	.answer-text {
		max-width: 17vw;
		word-break: break-word;
	}

	.quiz-workspace-counter {
		font-weight: 300;
		font-size: 1.3vw;
		text-align: center;
		color: #333;
	}

	.quiz-workspace-info {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		margin-bottom: 2vw;
	}
	.form-answer-img {
		position: absolute;
		left: -9999px; 
		/* Или используйте другие способы скрытия, например, opacity: 0; height: 0; width: 0; */ 
	}

	#available-results-overlay {
		-webkit-box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		-moz-box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		position: fixed;
		display: flex;
		width: 50vw;
		max-height: 30vw;
		justify-content: flex-start;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* Центрируем по горизонтали и вертикали */
		padding: 2vw;
		border-radius: 0.5vw;
		max-height: 50%;
		background-color: rgba(255, 255, 255);
		flex-direction: column;
		align-items: flex-end;
		z-index: 1000;
		overflow-y: auto; /* Добавляем вертикальную прокрутку */
	}

	.overlay-container {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 1vw;
		font-size: 1.1vw;
		font-weight: bold;
		color:#111;
	}

	.available-result-text-desc {
		font-size: 0.9vw;
	}

	.available-result-image {
		width: 5vw;
		height: 5vw;
	}

	.available-result {
		width: 100%;
		display: flex;
		margin-bottom: 0.5vw;
        padding: 0.5vw;
        border: 1px solid #ccc;
        border-radius: 0.5vw;
        cursor: pointer;
		gap: 0.5vw;
	}

	.available-result-text-container {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.available-result-text-title {
		font-size: 0.9vw;
		font-weight: bold;
	}
	
	#available-results-overlay .available-result.attached {
		background-color: #e0ffe0;
		pointer-events: none;
	}

	#available-results-overlay .close-overlay {
		cursor: pointer;
        border: none;
        font-size: 0.9vw;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 0.5vw;
        border-radius: 0.5vw;
        padding: 0.5vw;
		background-color: #ccc;
	}

	.bottom-status-area {
		display: flex;
		gap: 0.5vw;
    	padding: 1vw;
		background: #333;
		border-radius: 1vw;
		position: fixed;
		bottom: 2vw;
		left: 50%;
		transform: translate(-50%);
	}

	.answer-image-and-text {
		display: flex;
    	gap: 2vw;
	}

	.attached-results {
		display: flex;
		flex-wrap: wrap;
	}

	.attached-results-title {
		font-size: 1.1vw;
        color: #111;
        font-weight: 500;
		margin-bottom: 0.5vw;
	}

	.answer-text-only-area {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5vw;
		margin-bottom: 1vw;
	}

	.detach-result-image {
		width: 1.1vw;
    	height: 1vw;
	}

	.add-result-to-answer {
		cursor: pointer;
		border: none;
        font-size: 0.9vw;
        align-items: center;
        display: flex;
        flex-direction: row;
        margin-right: 1vw;
        margin-bottom: 0.5vw;
        gap: 0.5vw;
        border-radius: 0.5vw;
        padding: 0.5vw;
        background: #edc4c4;
	}

	.attached-result {
		cursor: pointer;
		border: none;
		font-size: 0.9vw;
		align-items: center;
		display: flex;
    	flex-direction: row;
    	margin-right: 1vw;
		margin-bottom: 0.5vw;
		gap: 0.5vw;
		border-radius: 0.5vw;
    	padding: 0.5vw;
    	background: #DDDDDD;
	}

	.detach-result {
		display: flex;
    	align-items: center;
	}

	.your-result-img {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.your-result-title,
	.your-result-description {
		max-width: 70%;
	}

	.your-result-title {
		text-align: center;
		font-size: 1.75vw;
	}

	.your-result-description {
		font-weight: 400;
		font-size: 1.32vw;
		text-align: center;
		white-space: pre-wrap;
		word-break: break-word;
		color: #111;
	}

	.result-area {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.your-result-area {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		width: 100%;
		align-items: center;
		margin-top: 1vw;
	}

	.copy-url-result {
		display: flex;
		flex-direction: row;
		gap: 1vw;
		align-items: center;
	}

	.quiz-info-action {
		display: flex;
		flex-direction: column;
		gap: 1.1vw;
		align-items: center;
	}

	.test-favorite-text {
		font-size: 1vw;
	}

	.test-favorite-text,
	#toggle-favorite {
		color: gray;
	}

	.favorite-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0.7vw;
		right: 0.7vw;
		background-color: #11111177;
		border: none;
		color: #ffffff;
		font-size: 0.9vw;
		font-weight: 400;
		cursor: pointer;
		padding: 0.5vw 1vw;
		border-radius: 0.5vw;
	}

	.navigation-icon, .create-icon {
		fill: #333 !important;
		transition: 0.3s;
		height: 1.2vw;
		width: 1.2vw;
	}

	.navigation-icon.active, .create-icon.active {
		fill: #ffffff !important;
	}

	.favorite-btn:hover {
		background-color: #111;
	}

	#toggle-favorite {
		font-weight: 500;
	}

	.after-result-workspace {
		min-width: 50%;
		display: flex;
		margin-top: 4vw;
		gap: 1vw;
		flex-direction: column;
	}

	.share-url-result {
		display: flex;
		background-color: #f0f0f0;
		padding: 1.5vw;
		border-radius: 0.5vw;
	}

	.save-result-title {
		font-weight: 500;
		font-size: 1.2vw;
	}

	.save-result-text {
		font-size: 1vw;
	}

	.save-to-profile {
		display: flex;
		gap: 1vw;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-right: 1.5vw;
		border-right: 0.1vw solid rgba(0, 0, 0, .08);
	}

	.saveInProfileSwitch {
		display: flex;
		cursor: pointer;
		width: 4vw;
		height: 2vw;
		background-color: #9f9f9f;
		border-radius: 2vw;
		align-items: center;
		position: relative;
		transition: background-color 0.5s ease;
	}

	.saveInProfileSwitch.active {
		background-color: #333;
	}

	.switch {
		width: 1vw;
		height: 1vw;
		background-color: rgb(255, 255, 255);
		border-radius: 50%;
		position: absolute;
		left: 0.6vw;
		transition: left 0.5s ease, background-color 0.5s ease;
	}

	.saveInProfileSwitch.active .switch {
		left: 62%;
		background-color: rgb(255, 255, 255);
	}

	.star-container {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
		margin-top: 2vw;
	}

	.star-container-title {
		text-align: center;
		font-size: 1.2vw;
		color: gray;
	}

	.star {
		cursor: pointer;
		transition: fill 0.2s;
	}

	.star-svg {
		width: 2vw;
		height: 2vw;
	}

	.stars-wrapper {
		display: flex;
		flex-direction: row;
		gap: 4vw;
		justify-content: center;
	}

	.save-reult-info {
		display: flex;
		flex-direction: column;
	}

	.star.hovered svg path,
	.star.selected svg path {
		fill: #333;
	}

	.create-quiz-bottom {
		display: flex;
		flex-direction: row;
		gap: 2vw;
		margin-top: 2vw;
	}

	.quiz-edit-area {
		width: 100%;
	}

	.create-quiz-title {
		font-size: 1.3vw;
		color: #333;
		font-weight: 500;
	}

	.create-quiz-area {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.quiz-bottom-left {
		width: 50%;
		display: flex;
		gap: 1.1vw;
		flex-direction: column;
	}

	#quizDataForm {
		display: flex;
		flex-direction: column;
		gap: 1.1vw;
	}

	.quiz-bottom-right {
		display: flex;
		width: 50%;
		gap: 1.1vw;
		flex-direction: column;
	}

	.create-quiz-types {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.7vw 1.4vw;
		background: #FFFFFF;
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		border-radius: 0.5vw;
	}

	.create-quiz-types-header-block {
		font-size: 16px;
		line-height: 19px;
		color: #8f8f8f;
		font-weight: 500;
		cursor: pointer;
	}

	.under-quiz-area-button {
		background: #1966B0;
		border: none;
		border-radius: 0.5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.1vw;
		color: #ffffff;
		width: 100%;
		font-weight: 500;
		padding: 0.7vw 1.4vw;
		text-decoration: none;
		margin-top: 2vw;
		cursor: pointer;
	}

	.load-more-button {
		background: #1966B0;
		border: none;
		border-radius: 0.5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.1vw;
		color: #ffffff;
		width: 30%;
		font-weight: 500;
		padding: 0.7vw 1.4vw;
		text-decoration: none;
		cursor: pointer;
		align-self: center;
	}

	.nextBtn:hover,
	.load-more-button:hover,
	#edit-button:hover,
	#save-button:hover,
	#edit-test-button:hover,
	#save-test-button:hover,
	#save-quiz:hover,
	.under-quiz-area-button:hover {
		background: #1967b0e3;
	}

	.button-start-quiz {
		margin-top: 2.2vw;
		background: #1966B0;
		border-radius: 0.5vw;
		display: inline-block;
		padding: 0.7vw 1.4vw;
		font-size: 1.5vw;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		transition: background-color 0.3s ease;
	}

	.button-start-quiz:hover {
		filter: brightness(120%);
		color: white;
	}

	.check-icon {
		width: 3vw;
		height: 3vw;
	}

	.nextBtn,
	.add-character,
	.add-answer,
	.add-question,
	.delete-result,
	.add-result,
	#save-characters,
	#save-quiz,
	#copyButton,
	#publish-quiz,
	#unpublish-quiz,
	#preview-quiz {
		background: #DDDDDD;
		border-radius: 0.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding: 0.7vw 1.4vw;
		border: none;
		font-size: 1.1vw;
		color: #111;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}

	.add-question, .add-result {
		background: #1966B0;
		color: #fff;
	}

	#copyButton {
		align-items: center;
		margin-left: 1.5vw;
	}

	#edit-button,
	#save-button {
		max-width: 19.6vw;
		width: 100%;
		height: 2.75vw;
		padding: 0.7vw 1.4vw;
		border: none;
		background: #1966B0;
		font-size: 1.1vw;
		border-radius: 0.5vw;
		display: inline-block;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		cursor: pointer;
	}

	.add-answer {
		width: 100%;
	}

	.form-result-img {
		display: none;
	}

	.image-preview {
		cursor: pointer;
	}

	.image-placeholder {
		display: flex;
		background: #FFFFFF;
		border: 0.1vw dashed #3334;
		border-radius: 0.5vw;
		width: 17vw;
		height: 17vw;
		cursor: pointer;
	}

	.image-placeholder:hover {
		border: 0.1vw dashed #177de5;
		border-radius: 0.5vw;
		width: 17vw;
		height: 17vw;
		cursor: pointer;
	}

    .image-placeholder:hover .upload-info {
		color: #177de5;
	}

	.result-index-content {
		display: flex;
		gap: 3vw;
	}

	.results-area {
		display: flex;
		width: 100%;
		gap: 3vw;
		flex-direction: column;
	}

	#username-input:focus,
	#test-title-input:focus,
	#description-input:focus,
	#test-desc-input:focus {
		outline: #177de5 solid 0.1vw;
		border: 0.1vw solid white;
	}

	#username-input,
	#test-title-input,
	#description-input,
	#test-desc-input {
		font-family: 'Rubik', sans-serif;
		resize: none; 
		padding: 0.5vw;
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		width: 100%;
		height: auto;
		border-radius: 0.5vw;
		font-size: 1.1vw;
		word-wrap: break-word;
	}

	#description-input {
		height: 8vw;
	}

	.profile-username {
		font-size: 2vw;
	}

	.result-edit-area {
		display: flex;
		width: 100%;
		gap: 0.5vw;
		flex-direction: column;
	}

	.img-rst-prw {
		object-fit: cover;
		object-position: center;
		width: 17vw;
		height: 17vw;
		border-radius: 0.5vw;
	}

	.create-quiz-types-header {
		font-size: 1.1vw;
		color: #333;
		font-weight: 500;
		cursor: pointer;
	}

	.create-quiz-types-content {
		max-height: 0;
		font-weight: 400;
		font-size: 1.1vw;
		color: #333;
		overflow: hidden;
	}


	.create-quiz-types-content.expanded {
		margin-top: 1vw;
		max-height: 10vw;
	}

	.quiz-cover-upload {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border: 0.1vw dashed rgba(9, 60, 93, 0.3);
		border-radius: 0.5vw;
	}

	.upload-area {
		width: 100%;
		height: 100%;
	}

	.quiz-cover-upload:hover {
		border: 0.1vw dashed #177de5;
	}

	.quiz-cover-upload:hover .upload-label {
		color: #177de5;
	}

	.upload-info {
		padding: 2vw;
		width: 100%;
		height: 100%;
		text-align: center;
		align-content: center;
		font-size: 1vw;
	}

	.upload-label {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #8f8f8f;
		font-size: 1vw;
	}

	.quiz-cover-upload :hover {
		cursor: pointer;
	}

	.footer-container {
		padding: 2vw 14vw 2vw 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer {
		width: 100%;
		border-top: 0.1vw solid rgba(0, 0, 0, .08);
		padding-top: 2vw;
	}

	.social-link-area {
		display: flex;
		flex-direction: row;
		gap: 0.7vw;
		align-items: center;
	}

	.social a {
		font-weight: 500;
		font-size: 1.8vw;
		color: #969696;
	}

	.quiz-edit-info,
	.profile-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 3vw;
	}

	.quiz-edit-info {
		width: 100%;
		margin-top: 2vw;
	}

	.online {
		display: inline-block;
		width: 0.9vw;
		height: 0.9vw;
		background-color: green;
		border-radius: 50%;
	}

	.offline {
		display: inline-block;
		width: 0.9vw;
		height: 0.9vw;
		background-color: rgb(133, 19, 19);
		border-radius: 50%;
	}

	#last-seen-info {
		font-style: italic;
		color: #969696;
		font-weight: 400;
		font-size: 1.05vw;
		margin-bottom: 1.5vw;
	}

	.profile-info {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		gap: 3vw;
	}

	.quiz-edit-img,
	.profile-img {
		width: 13vw;
		object-fit: cover;
		object-position: center;
		height: 13vw;
		border-radius: 0.5vw;
	}

	.quiz-edit-left {
		display: flex;
		gap: 3vw;
		width: 100%;
	}

	.edit-quiz {
		width: 100%;
	}

	.quiz-edit-text,
	.profile-text {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
		max-width: 49.3vw;
		width: 100%;
	}

	.quiz-edit-desc,
	.profile-description {
		color: #969696;
		white-space: pre-wrap;
		font-weight: 400;
		font-size: 1.1vw;
		word-break: break-word;
		font-family: 'Rubik', sans-serif;
	}

	.quiz-text-completed {
		color: #000000;
		font-weight: normal;
		font-size: 1vw;
		max-width: 80%;
	}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	#test-status {
		width: 100%;
		margin-top: 0.5vw;
		font-weight: 400;
		font-size: 1.1vw;
		color: #111;
		padding: 0.7vw 1.4vw;
		background: #DDDDDD;
		border-radius: 0.5vw;
		max-width: 19.6vw;
		display: inline-block;
		text-align: center;
	}

	.edit-question {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 2vw;
		margin-bottom: 2vw;
		justify-content: space-between;
	}

	.serial-question {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 0.5vw;
	}

	.serial-answer {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 0.5vw;
	}

	.form-control,
	.question-form {
		font-family: 'Rubik', sans-serif;
        resize: none;
        padding: 0.75vw;
        border: 0.1vw solid rgba(9, 60, 93, 0.3);
        width: 100%;
        height: auto;
        border-radius: 0.5vw;
        font-size: 1.1vw;
        word-wrap: break-word;
	}

	.form-control:focus,
	.question-form:focus,
	.form-select:focus {
		outline: #177de5 solid 0.1vw;
		border: 0.1vw solid white;
	}

	.form-select {
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		padding: 0.5vw;
		border-radius: 0.5vw;
		font-family: 'Rubik', sans-serif;
		font-size: 1vw;
		cursor: pointer;
	}

	.info-area {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.7vw 1.4vw;
		background: #FFFFFF;
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		border-radius: 0.5vw;
		margin-bottom: 2vw;
		color: gray;
	}

	.character-checkboxes {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5vw;
	}

	.form-check-label {
		font-size: 1.1vw;
	}

	.form-check-input {
		width: 1vw;
		height: 1vw;
		cursor: pointer;
	}

	.form-check {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.answer-input {
		display: flex;
		margin-bottom: 1vw;
		gap: 0.5vw;
		align-items: center;
	}

	.answer-area {
		margin-left: 3vw;
		margin-top: 1vw;
		display: flex;
		flex-direction: column;
		gap: 1vw;
	}

	.characters-edit-area {
		display: flex;
		flex-wrap: wrap;
		gap: 1vw;
		margin-bottom: 2vw;
		justify-content: center;
	}

	.serial-character {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.characters-area {
		margin-top: 2vw;
		border-bottom: 0.1vw solid rgba(9, 60, 93, 0.3);
	}

	.character-form {
		border-radius: 5px;
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		padding: 0.5vw;
		font-weight: 500;
		font-size: 1.1vw;
		color: #333;
	}

	.character-form:focus {
		outline: #177de5 solid 0.1vw;
		border: 0.1vw solid white;
	}

	.character-title,
	.edit-question-settings-title,
	.question-count,
	.answer-count,
	.result-count {
		font-size: 1.1vw;
		color: #111;
		font-weight: 500;
	}

	.edit-question-area {
		width: 100%;
	}

	.edit-question-settings {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
		align-items: center;
	}

	.edit-quiz-buttons {
		display: flex;
		flex-direction: row;
		gap: 1vw;
		margin-top: 2vw;
		justify-content: center;
	}

	.edit-quiz-title {
		font-size: 1.3vw;
		color: #111;
		font-weight: 500;
		margin-bottom: 1vw;
		margin-top: 2vw;
	}

	.stars-wrapper {
		display: flex;
		flex-direction: row;
		gap: 0.5vw;
		justify-content: center;
	}

	#preview-quiz {
		color: white;
		background: black;
	}

	.move-button-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 0.5vw;
	}

	.move-up,
	.move-down {
		background: #DDDDDD;
		text-decoration: none;
		border: none;
		width: 50%;
	}

	.under-character-buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 2vw;
		padding-bottom: 2vw;
	}

	.author-quiz {
		margin-top: 2.2vw;
		text-align: center;
	}

	.delete-button-png,
	.delete-answer {
		cursor: pointer;
	}

	.profile-workspace,
	.profile-area {
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 0.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 2vw;
		flex-direction: row;
		margin-top: 2vw;
		justify-content: space-between;
		gap: 3vw;
	}

	.faded-out-title {
		display: block;
		overflow: hidden;
		position: relative;
		max-width: 100%;
	}

	.faded-out-title::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100px;
		height: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255 255 255));
	}

	.username-area {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.7vw;
	}

	.character-input {
		display: flex;
		align-items: center;
		gap: 0.25vw;
	}

	.delete-button-png,
	.delete-answer {
		width: 1.15vw;
		height: 1.15vw;
	}

	#edit-test-button,
	#save-test-button,
	.toggle-type {
		max-width: 19.6vw;
		width: 100%;
		height: 2.75vw;
		padding: 0.7vw 1.4vw;
		border: none;
		background: #1966B0;
		font-size: 1.1vw;
		border-radius: 0.5vw;
		display: inline-block;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		cursor: pointer;
	}

	.toggle-type {
		height: 3.75vw;
	}

	.test-status-bold {
		font-weight: bold;
	}

	.edit-result {
		margin-bottom: 1vw;
	}

	#save-quiz {
		background: #1966B0;
		color: white;
	}

	.nextBtn {
		width: 33%;
		align-self: center;
		background: #1966B0;
		color: white;
	}

	.your-result {
		font-size: 1.2vw;
		color: #333;
		font-weight: bold;
	}

	#notification-container {
		position: fixed;
		top: 2.5vw;
		right: 0;
		padding: 2vw;
	}

	.notification {
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 1vw;
		background-color: #4CAF50;
		width: 100%;
		height: 3vw;
		color: white;
		padding: 1.5vw;
		border-radius: 0.5vw;
		box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.2);
		cursor: pointer;
		animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
	}

	#test-img-input {
		cursor: pointer;
	}

	.restart-test {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: none;
		cursor: pointer;
		font-size: 1.2vw;
		padding: 1vw 1.5vw;
		gap: 0.7vw;
		border: none;
		color: gray;
		margin-top: 2vw;
	}

	.restart-test:hover {
		background-color: #f0f0f0;
		border-radius: 0.5vw;
	}

	.restart-icon {
		fill: #333;
		width: 1.5vw;
	}

	.after-result-title {
		color: #333;
		font-weight: bold;
		font-size: 1.45vw;
		align-self: center;
	}

	.social-share {
		display: flex;
		flex-direction: row;
		gap: 1.5vw;
	}

	.social-share-svg {
		width: 1.5vw;
		height: auto;
	}

	.social-share-button {
		width: 100%;
		background: #DDDDDD;
		border-radius: 0.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0.7vw 1.4vw;
		border: none;
		color: #333;
		cursor: pointer;
	}

	#shareButtonVK {
		background: #0077FF;
	}

	#shareButtonTG {
		background: #24A1DE;
	}

	#shareButtonPNTRST {
		background: #E60023;
	}

	[id^="answer-img-"] {
		width: 17vw;
		height: 17vw;
	}

	.image-answer-input {
		display: flex;
		flex-direction: row;
		gap: 2vw;
	}

	.answer-image-placeholder {
		background: #FFFFFF;
		border: 0.1vw dashed rgba(9, 60, 93, 0.3);
		border-radius: 0.5vw;
		cursor: pointer;
		width: 17vw;
		height: 17vw;
	}

	.answer-image-placeholder:hover {
		border: 0.1vw dashed #177de5;
		border-radius: 0.5vw;
		width: 17vw;
		height: 17vw;
		cursor: pointer;
	}

	.answer-image-placeholder:hover .upload-info {
		color: #177de5;
	}

	.answer-text-and-characters {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.image-answer-row {
		display: flex;
		flex-direction: row;
		gap: 3vw;
		margin-bottom: 3vw;
	}

	.image-answer {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
		align-items: center;
		border-radius: 0.5vw;
	}

	.answer-image {
		width: 17vw;
		height: 17vw;
		border-radius: 0.5vw;
		object-fit: cover;
		object-position: center;
		cursor: pointer;
	}

	.answer-image:hover {
		box-shadow: 0px 0px 15px 5px rgba(34, 60, 80, 0.2);
	}

	.checkbox {
		position: absolute;
		left: 1vw;
		top: 1vw;
	}

	.checkbox:hover {
		cursor: pointer;
	}

	.image-answer:hover svg circle {
		stroke: #333;
	}

	.image-answer:hover svg path {
		stroke: #333;
	}

	.answer-button:active svg circle {
		stroke: #333;
	}

	.answer-button:active svg path {
		stroke: #333;
	}

	.quiz-edit-img-label.active {
		position: relative;
		height: 13vw;
	}

	.quiz-edit-img-label.active::before {
		content: 'Нажмите, чтобы выбрать фото';
		word-wrap: break-word;
		border-radius: 0.5vw;
		width: 100%;
		height: 100%;
		color: #ffffff95;
		font-size: 0.7vw;
		display: flex;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.answer-button.correct {
		background-color: lightgreen;
		/* Or any green shade you prefer */
		border-color: green;
	}

	.answer-button.correct .check-icon circle {
		stroke: green;
	}

	.answer-button.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct:hover .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct {
		pointer-events: none;
	}

	.image-answer.incorrect {
		pointer-events: none;
	}

	.answer-button.incorrect .check-icon circle {
		stroke: red;
	}

	.answer-button.incorrect .check-icon path {
		stroke: red;
	}

	.image-answer.incorrect:hover .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon path {
		stroke: red;
	}

	.answer-button.incorrect {
		background-color: lightcoral;
		border-color: red;
	}

	.questions-answers {
		margin-top: 2vw;
		max-width: 70%;
	}

	.question-spoiler {
		padding: 1vw;
		cursor: pointer;
		border-radius: 0.5vw 0.5vw 0 0;
		color: #333;
		overflow: hidden;
	}

	.answer-result.correct {
		padding: 1vw;
		border: 0.1vw solid lightgreen;
		border-radius: 0 0 0.5vw 0.5vw;
		overflow: hidden;
		margin-bottom: 1vw;
	}

	.answer-result.incorrect {
		padding: 1vw;
		border: 0.1vw solid lightcoral;
		border-radius: 0 0 0.5vw 0.5vw;
		overflow: hidden;
		margin-bottom: 1vw;
	}

    .correct-answer-checkbox {
        display: flex;
        gap: 0.3vw;
        align-items: center;
    }

    input[name="correct-answer"] {
        width: 1vw;
        height: 1vw;
    }

    label[for^="correct-answer"] {
        font-size: 1.1vw;
    }

    #yandex_rtb_R-A-11013167-1 {
        padding-top: 2vw;
    }

    #yandex_rtb_R-A-11013167-2 {
        width: 100%;
        max-height: 6.5vw;
    }

    #yandex_rtb_R-A-11013167-2.download{
        margin-top: 2vw;
    }

	.create-result-button-overlay {
		align-self: center;
		background: #1966B0;
        color: #fff;
        border-radius: 0.5vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0.7vw 1.4vw;
        border: none;
        font-size: 1.1vw;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
	}

	.create-result-text-overlay {
		align-self: center;
		font-size: 1.3vw;
		margin-bottom: 1vw;
		font-weight: 500;
	}

	.loginPage {
		display: flex;
		flex-direction: row;
		margin-top: 2vw;
		gap: 8vw;
	}

	.loginPageTelegramInfo {
		width: 100%;
        display: flex;
        flex-direction: column;
	}

	.loginPageAuthorizationArea {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		width: 25vw;
		min-width: 25vw;
	}

	.loginPageLoginArea {
		background-color: white;
		padding: 2vw;
		border-radius: 0.5vw;
		box-shadow: 0px 0.1vw 0.2vw rgba(0, 0, 0, 0.1);
	}

	.loginPageHeader {
		margin: 0.5vw 0;
		align-self: center;
		font-weight: 500;
		font-size: 1.5vw;
		text-align: center;
	}

	.login-form {
		display: flex;
		flex-direction: column;
		gap: 0.75vw;
	}

	.remaindme-login-label {
		font-size: 1.1vw;
		opacity: 60%;
		cursor: pointer;
	}

	.remaindme-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5vw;
	}

	.form-remaindme-input {
		width: 1vw;
		height: 1vw;
		margin: 0;
		cursor: pointer;
	}


	.toggle-password {
		position: absolute;
		right: 16vw;
		background: none;
		border: none;
		font-size: 1.1vw;
		padding: 0.7vw;
		cursor: pointer;
	}

	.login-button {
		width: 100%;
		height: 2.75vw;
		padding: 0.7vw 1.4vw;
		border: none;
		background: #1966B0;
		font-size: 1.1vw;
		border-radius: 0.5vw;
		display: inline-block;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		cursor: pointer;
		margin-top: 0.5vw;
	}
	
	.login-button:hover {
		background: #1967b0e3;
	}

	.loginPageNonRegisterArea {
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 2vw;
        gap: 0.5vw;
		box-shadow: 0px 0.1vw 0.2vw rgba(0, 0, 0, 0.1);
        border-radius: 0.5vw;		
	}

	.nonregister-button {
		width: 100%;
		height: 2.75vw;
		padding: 0.7vw 1.4vw;
		border: none;
		background: #333;
		font-size: 1.1vw;
		border-radius: 0.5vw;
		display: inline-block;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		cursor: pointer;
	}

	.nonregister-button:hover {
		background: #333333de;
	}

	.nonregister-button-text:visited {
		color: white;
	}

	.loginPageNonRegisterBottomText {
		text-align: center;
		margin-top: 0.5vw;
		word-break: break-word;
		font-size: 1.1vw;
		opacity: 40%;
	}

	.loginPageTelegramInfoHeader {
		font-size: 1.5vw;
		font-weight: 700;
		text-align: center;
		padding-top: 1vw;
		margin-bottom: 0.5vw;
	}

	.loginPageTelegramInfoDescription {
		font-size: 1.1vw;
		opacity: 70%;
		text-align: center;
	}

	.loginPageTelegramChannel {
        background-color: #ffffff;
		align-self: center;
        margin-top: 1.5vw;
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
		padding: 2vw;
		border-radius: 0.5vw;
		box-shadow: 0px 0.1vw 0.2vw rgba(0, 0, 0, 0.1);
	}

	.loginPageTelegramChannelInfo {
		display: flex;
		flex-direction: row;
		gap: 1.5vw;
	}

	.loginPageTelegramChannelImage {
		width: 6vw;
		height: 6vw;
		border-radius: 10vw;
	}

	.loginPageTelegramChannelText {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loginPageTelegramChannelTitle {
		font-size: 1.3vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelUsernameLink {
		font-size: 1.1vw;
	}

	.loginPageTelegramChannelSubs,
	.loginPageTelegramChannelTests,
	.loginPageTelegramChannelGiveaways {
		display: flex;
		gap: 0.25vw;
		flex-direction: column;
		align-items: flex-start;
	}

	.loginPageTelegramChannelStats {
		display: flex;
		flex-direction: row;
		gap: 3vw;
	}

	.loginPageTelegramChannelSubsCounter,
	.loginPageTelegramChannelTestsCounter,
	.loginPageTelegramChannelGiveawaysCounter {
		font-size: 1.3vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelSubsCounterText,
	.loginPageTelegramChannelTestsCounterText,
	.loginPageTelegramChannelGiveawaysCounterText {
		font-size: 0.85vw;
		opacity: 40%;	
	}
	.loginPageTelegramChannelDescription {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.loginPageTelegramChannelDescriptionTitle {
		font-size: 1.1vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelDescriptionText {
		font-size: 1.1vw;
		word-break: break-word;
	}

	.loginPageTelegramChannelInviteButton{
		width: 100%;
        padding: 0.7vw 1.4vw;
        border: none;
        background: #1966B0;
        font-size: 1.1vw;
        border-radius: 0.5vw;
        display: flex;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        flex-direction: row;
        justify-content: center;
        gap: 0.5vw;
        align-items: center;
	}

	.loginPageTelegramChannelInviteButton:hover {
		background: #1967b0e3;
	}

	.loginPageTelegramChannelInviteLink {
		text-decoration: none;
		color: white;
	}

	.loginPageTelegramChannelInviteButtonIcon {
		width: 1.5vw;
		height: auto;
	}
	
	.loginPageErrorInfo {
		background-color: #FFF6F5;
		border: 0.1vw solid #d45151;
		border-radius: 0.5vw;
		padding: 0.75vw;
		word-wrap: break-word;
		margin-top: 1.25vw;
	}

	.loginPageErrorInfoMessage {
		color: #d45151;
		font-size: 1.1vw;
	}

	.loginPageRegisterPopupFullScreen {
		display: none;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000ba;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	  
	.loginPageRegisterPopupFullScreen.visible {
		display: flex;
		opacity: 1;
	}
	
	.close-button {
		position: fixed;
		top: 7.9vw;
		right: 38.1vw;
		background: none;
		width: 2.5vw;
		height: 2.5vw;
		border-radius: 50vw;
		border: none;
		color: #000000;
		font-size: 2vw;
		text-align: center;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	.loginPageRegisterPopupForm {
		display: flex;
		width: 25vw;
		height: 30vw;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		padding: 2vw;
		border-radius: 0.5vw;
	}

	.registration-form {
		display: flex;
		flex-direction: column;
		gap: 0.5vw;
	}

	.loginPageRegisterPopupHeader {
		margin: 0.5vw 0 2.5vw 0;
        font-weight: 500;
        font-size: 1.5vw;
        text-align: center;
	}

	.loginPageRegisterPopupRegButton {
		width: 100%;
		height: 2.75vw;
		padding: 0.7vw 1.4vw;
		border: none;
		background: #333;
		font-size: 1.1vw;
		border-radius: 0.5vw;
		display: inline-block;
		font-weight: 400;
		border-color: #667F8F;
		text-align: center;
		text-decoration: none;
		color: white;
		cursor: pointer;
		margin-top: 0.5vw;
	}

	.loginPageRegisterPopupRegButton:hover {
		background: #333333de;
	}

	.loginPageRegisterPopupRegButton:visited {
		color: white;
	}

	.toggle-password-register {
		right: 39.6vw;
	}
}

@media screen and (max-width: 576px) {

	.header-container {
		width: 100vw;
		height: 11vw;
		background: #333;
	}

	.header {
		width: 100%;
		height: 100%;
		justify-content: center;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left-area {
		width: 100%;
		height: auto;
		justify-content: space-between;
		display: flex;
		align-items: center;
	}

	.left-area .openbtn {
		margin-right: auto;
		display: flex;
		align-items: center;
	}

	.left-area .logo {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		justify-content: center;
	}

	.logo-white {
		display: flex;
		z-index: 1;
		align-items: center;
		width: 30vw;
		height: auto;
	}

	.logo-black {
		display: flex;
		z-index: 1;
		align-items: center;
		width: 30vw;
		height: auto;
	}

	.right-area {
		display: none !important;
	}

	.under-header {
		display: flex;
		flex-direction: column;
		height: auto;
		padding: 10vw 6vw;
		background: #1966B0;
	}

	.content-underheader {
		display: flex;
		flex-direction: column;
		gap: 9.5vw;
	}

	.p-information {
		font-size: 8.5vw;
		font-weight: 600;
		line-height: 12vw;
		color: #ffffff;
	}

	.underheader-button {
		width: auto;
		font-size: 4.8vw;
		font-weight: 600;
		background: #1966B0;
		border: 0.7vw solid #FFFFFF;
		box-shadow: -1vw 1vw 0px #4FA7ED;
		border-radius: 2.5vw;
		color: #ffffff;
		padding: 2.5vw 3.5vw;
	}

	.main-container {
		width: 100vw;
		padding: 6vw;
	}

	.content {
		width: 100%;
		gap: 5vw;
	}

	.navigation-bar {
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		display: flex;
	}

	.navigation-bar::-webkit-scrollbar {
		display: none;
	}

	.sort-btn, .create-btn{
		border-radius: 4.5vw;
		cursor: pointer;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.2vw;
		padding: 2.3vw 3.4vw;
		margin-right: 3.2vw;
		font-size: 3vw;
		border: none;
		font-weight: 700;
		color: #333;
	}

	.sort-btn.active {
		background: #333;
		color: #ffffff;
	}

	.create-btn.active {
		background: #333;
		color: #ffffff;
	}

	.navigation-icon {
		fill: #333 !important;
		height: auto;
		width: 4.3vw;
	}

	.navigation-icon.active {
		fill: #ffffff !important;
	}

	#available-results-overlay {
		-webkit-box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		-moz-box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		box-shadow: 0px 0px 34px -3px rgba(25,103,176,0.75);
		position: fixed;
		display: flex;
		width: 80vw;
		max-height: 50vw;
		justify-content: flex-start;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* Центрируем по горизонтали и вертикали */
		padding: 6vw;
		border-radius: 1.5vw;
		max-height: 50%;
		background-color: rgba(255, 255, 255);
		flex-direction: column;
		align-items: flex-end;
		z-index: 1000;
		overflow-y: auto; /* Добавляем вертикальную прокрутку */
	}

	.overlay-container {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 2.5vw;
		font-size: 3.5vw;
		font-weight: bold;
		color:#111;
		gap: 1.5vw;
	}

	.available-result-text-desc {
		font-size: 3.25vw;
	}

	.available-result-image-container {
		width: 20vw;
    	height: 20vw;
	}

	.available-result-image {
		width: 20vw;
		height: 20vw;
	}

	.available-result {
		width: 100%;
        display: flex;
        margin-bottom: 2.5vw;
        padding: 2vw;
        border: 0.3vw solid #ccc;
        border-radius: 1.5vw;
        cursor: pointer;
        gap: 2vw;
	}

	.available-result-text-container {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.available-result-text-title {
		font-size: 3.25vw;
		font-weight: bold;
	}
	
	#available-results-overlay .available-result.attached {
		background-color: #e0ffe0;
		pointer-events: none;
	}

	#available-results-overlay .close-overlay {
		cursor: pointer;
        border: none;
		height: fit-content;
        font-size: 2.5vw;
        align-items: center;
        display: flex;
        flex-direction: row;
        border-radius: 1.5vw;
        padding: 2vw;
		background-color: #ccc;
	}

	.create-result-text-overlay {
		font-size: 3.5vw;
		font-weight: bold;
		align-self: center;
	}

	.create-result-button-overlay {
        align-self: center;
        background: #1966B0;
        color: #fff;
        border-radius: 1.5vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 2vw;
        border: none;
        font-size: 3.25vw;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        margin-top: 2vw;
	}

	.attached-results {
		display: flex;
		flex-wrap: wrap;
		gap: 2vw;
	}

	.detach-result {
		display: flex;
    	align-items: center;
	}

	.answer-image-and-text .attached-results {
		margin-top: 2.5vw;
	}

	.answer-image-and-text .answer-input {
		margin-bottom: 2.5vw;
	}

	.attached-result {
		border: none;
        height: fit-content;
        cursor: pointer;
        font-size: 3vw;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 1vw;
        border-radius: 1.5vw;
        padding-inline: 0;
        padding: 2vw;
        background: #DDDDDD;
	}

	.attached-results-title {
		font-size: 3.25vw;
        color: #111;
        font-weight: 500;
		margin-bottom: 1.25vw;
	}

	.bottom-status-area {
		display: flex;
		gap: 2.5vw;
    	padding: 2.5vw;
		background: #F0F0F0;
		box-shadow: 0 18px 30px 0 rgba(0,0,0,.84);
		border-radius: 2.5vw 2.5vw 0 0;
    	width: 100vw;
		bottom: 0;
		right: 0;
		position: fixed;
		transform: translateY(0);
	}

	.quiz-container {
		width: 100%;
	}

	.quiz-row {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.quiz-row+.quiz-row {
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
	}

	.quiz-item {
		padding: 4.2vw 0;
	}

	.quiz-item+.quiz-item {
		border-top: 0.3vw solid #e2e2e2;
		width: 100%;
	}

	.quiz-row:first-of-type .quiz-item:first-of-type {
		padding: 0 0 4.2vw 0;
	}

	.quiz-box {
		display: flex;
		flex-direction: row;
		position: relative;
		overflow: hidden;
		width: 100%;
		height: auto;
		gap: 3.5vw;
		align-items: flex-start;
	}

	.favorite-btn {
		position: absolute;
		font-size: 3.2vw;
		padding: 1.3vw 2vw;
		top: 13vw;
		background-color: #11111177;
		border: none;
		color: #ffffff;
		font-weight: 400;
		cursor: pointer;
	}

	.quiz-img {
		border-radius: 2.5vw;
		width: 35vw;
		height: 22vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-info {
		display: flex;
		flex-direction: column-reverse;
		gap: 1.5vw;
		width: 100%;
	}

	.quiz-counter-info {
		display: flex;
		gap: 1.7vw;
		align-items: center;
	}

	.quiz-title {
		text-align: left;
		font-size: 4.3vw;
		color: #000;
		font-weight: 600;
	}

	.counter-icon {
		width: 2.7vw;
		height: auto;
	}

	.quiz-counter {
		color: #969696;
		font-weight: 400;
		font-size: 3.2vw;
	}

	.footer-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 6vw 0 6vw;
	}

	.footer {
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
		width: 100%;
		padding: 6vw 0;
	}

	.social-link-area {
		display: flex;
		flex-direction: row;
		gap: 2.3vw;
		align-items: center;
	}

	.socail-icon {
		width: 4.3vw;
		height: auto;
	}

	.social a {
		font-size: 4vw;
		font-weight: 600;
		color: #969696;
	}

	.quiz-introduction,
	.quiz-workspace {
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 2.5vw;
		padding: 6vw;
		align-items: center;
	}

	.quiz-workspace {
		gap: 10vw;
	}

	.test-type-title {
		text-align: center;
		font-size: 4vw;
		color: #333;
		font-weight: 600;
	}

	.test-name-title {
		text-align: center;
		padding: 15vw 0;
		font-size: 7vw;
		color: #111;
		font-weight: 700;
	}

	.test-description-title {
		text-align: center;
		font-size: 4vw;
		color: #333;
		font-weight: 600;
	}

	.test-description-text {
		text-align: center;
		white-space: pre-wrap;
		font-size: 4vw;
		padding: 3vw 0 0;
		font-weight: 400;
		color: #111;
	}

	.quiz-info-action {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3.2vw;
		padding: 15vw 0 4.8vw;
	}

	.button-start-quiz {
		background: #1966B0;
		text-wrap: nowrap;
		font-size: 4.5vw;
		border-radius: 2.5vw;
		padding: 3.2vw;
		font-weight: 400;
		text-align: center;
		color: white;
		transition: background-color 0.3s ease;
	}

	.button-start-quiz:hover {
		filter: brightness(120%);
	}

	.author-quiz {
		text-align: center;
	}

	.test-author-title {
		font-size: 4vw;
		color: gray;
		font-weight: 600;
	}

	.test-favorite-text,
	#toggle-favorite {
		color: gray;
		font-size: 3.3vw;
		text-align: center;
	}

	.test-author-name {
		font-size: 4vw;
		text-align: center;
		color: gray;
		font-weight: 400;
	}

	.quiz-workspace-info {
		display: flex;
		flex-direction: column;
		gap: 5.5vw;
	}

	.quiz-workspace-counter {
		text-align: center;
		font-weight: 400;
		font-size: 4vw;
		color: #333;
	}

	.quiz-workspace-question {
		text-align: center;
		font-weight: 500;
		font-size: 5.5vw;
		color: #111;
	}

	.quiz-workspace-text {
		font-style: italic;
		font-weight: 300;
		font-size: 4vw;
		text-align: center;
		color: #333;
	}

	#question-container {
		width: 100%;
	}

	.quiz-workspace-answers {
		display: flex;
		gap: 3vw;
		flex-direction: column;
		align-items: center;
		margin-bottom: 6vw;
	}

	.workspace-answer,
	.answer-text {
		width: 100%;
		font-size: 4vw;
		font-weight: 500;
		text-align: center;
		color: #333;
	}

	.answer-text {
		max-width: 35vw;
		word-break: break-word;
	}

	.answer-button {
		display: flex;
		align-items: center;
		padding: 2vw;
		width: 100%;
		cursor: pointer;
		border: none;
		border-radius: 2.5vw;
		background-color: #f0f0f0;
		transition: background-color 0.3s, color 0.3s;
	}

	.check-icon {
		width: 9vw;
		height: auto;
	}

	.answer-button svg {
		margin-right: 3vw;
		transition: stroke 0.3s;
	}

	.answer-button:hover {
		background-color: #e0e0e0;
	}

	.answer-button:hover svg circle {
		stroke: #333;
	}

	.answer-button:hover svg path {
		stroke: #333;
	}

	.answer-button:active {
		background-color: #d0d0d0;
	}

	.answer-button:active svg circle {
		stroke: #333;
	}

	.answer-button:active svg path {
		stroke: #333;
	}

	.answer-button:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.answer-button:disabled svg circle {
		stroke: #a0a0a0;
	}

	.answer-button:disabled svg path {
		stroke: #a0a0a0;
	}

	.answer-button.clicked {
		background-color: #c0c0c0;
	}

	.answer-button.clicked svg circle {
		stroke: #333;
	}

	.answer-button.clicked svg path {
		stroke: #333;
	}

	#quiz-workspace-result {
		display: flex;
		gap: 9.5vw;
		flex-direction: column;
		align-items: center;
	}

	.your-result-area {
		display: flex;
		flex-direction: column;
		gap: 4vw;
		width: 100%;
		align-items: center;
	}

	.your-result-img {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.your-result {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}

	.your-result-title {
		font-size: 5.5vw;
		text-align: center;
		width: 100%;
		color: #111;
		font-weight: 600;
	}

	.your-result-description {
		white-space: pre-wrap;
		word-break: break-word;
		font-weight: 400;
		font-size: 4vw;
		text-align: center;
		color: #000000;
	}

	.after-result-workspace {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 3.7vw;
		margin-top: 10vw;
	}

	.share-url-result {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f0f0f0;
		padding: 4vw;
		border-radius: 2.5vw;
	}

	.save-to-profile {
		display: flex;
		gap: 4vw;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		padding-bottom: 4vw;
	}

	.save-reult-info {
		display: flex;
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
	}

	.save-result-title {
		font-weight: 600;
		font-size: 4vw;
	}

	.save-result-text {
		font-size: 4vw;
	}

	.share-url-button {
		background: #DDDDDD;
		border-radius: 2.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding: 4vw 2vw;
		border: none;
		font-size: 4vw;
		color: #333;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		margin-top: 4vw;
	}

	.share-url-button:hover {
		background-color: #e0e0e0;
	}

	.share-url-button:active {
		background-color: #d0d0d0;
	}

	.share-url-button.clicked {
		background-color: #c0c0c0;
	}

	.saveInProfileSwitch {
		display: flex;
		padding: 2vw;
		width: 17vw;
		height: 8vw;
		background-color: #9f9f9f;
		border-radius: 4vw;
		align-items: center;
		position: relative;
		transition: background-color 0.5s ease;
	}

	.saveInProfileSwitch.active {
		background-color: #333;
	}

	.switch {
		width: 3vw;
		height: 3vw;
		background-color: rgb(255, 255, 255);
		border-radius: 50%;
		position: absolute;
		left: 2vw;
		transition: left 0.5s ease, background-color 0.5s ease;
	}

	.saveInProfileSwitch.active .switch {
		left: 70%;
		background-color: rgb(255, 255, 255);
	}

	.star-container {
		display: flex;
		flex-direction: column;
		gap: 4vw;
	}

	.star-container-title {
		text-align: center;
		font-size: 3.5vw;
	}

	.star {
		cursor: pointer;
		transition: fill 0.2s;
	}

	.star-svg {
		width: 8.2vw;
		height: 8.2vw;
	}

	.star svg path {
		fill: none;
	}

	.star.hovered svg path,
	.star.selected svg path {
		fill: #333;
	}

	.star svg path {
		stroke: #333;
		stroke-width: 2;
	}

	.stars-wrapper {
		display: flex;
		flex-direction: row;
		gap: 2vw;
		justify-content: center;
	}

	#notification-container {
		position: fixed;
		width: 100%;
		height: auto;
		top: 10vw;
		right: 0;
		padding: 5vw;
	}

	.notification {
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 3vw;
		background-color: #4CAF50;
		width: 100%;
		height: 13vw;
		color: white;
		padding: 3vw;
		border-radius: 2.5vw;
		box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.2);
		cursor: pointer;
		animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
	}

	.profile-workspace,
	.profile-area,
	.login-area,
	.register-area {
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 2.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 4vw;
		flex-direction: column;
	}

	.profile-info,
	.quiz-edit-left {
		display: flex;
		justify-content: flex-start;
		gap: 5vw;
	}

	.profile-img,
	.quiz-edit-img {
		min-width: 25vw;
		max-width: 25vw;
		height: 25vw;
		object-fit: cover;
		object-position: center;
		border-radius: 2.5vw;
	}

	.profile-img-label.active {
		position: relative;
		height: 25vw;
	}


	.profile-img-label.active::before {
		content: 'Нажмите, чтобы выбрать фото';
		word-wrap: break-word;
		border-radius: 2.5vw;
		width: 100%;
		height: 100%;
		color: #ffffff95;
		font-size: 10px;
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		flex-direction: row;
		text-align: center;
	}

	.quiz-edit-img-label.active {
		position: relative;
		height: 25vw;
	}

	.quiz-edit-img-label.active::before {
		content: 'Нажмите, чтобы выбрать фото';
		word-wrap: break-word;
		border-radius: 2.5vw;
		width: 100%;
		height: 100%;
		color: #ffffff95;
		font-size: 10px;
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		flex-direction: row;
		text-align: center;
	}

	.profile-username,
	.quiz-title {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}

	.profile-description,
	.quiz-edit-desc {
		font-family: 'Rubik', sans-serif;
		color: #969696;
		word-wrap: break-word;
		white-space: pre-wrap;
		font-weight: 400;
		font-size: 3vw;
	}

	.profile-text,
	.quiz-edit-text {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		width: 100%;
		word-break: break-word;
	}

	#edit-button,
	#save-button,
	#edit-test-button,
	#save-test-button,
	.under-quiz-area-button,
	.register-button {
		width: 100%;
		height: 9vw;
		margin-top: 6vw;
		padding: 2vw 2vw;
		border: none;
		background: #1966B0;
		font-size: 3.5vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.load-more-button {
		width: 100%;
		height: 9vw;
		padding: 2vw 2vw;
		border: none;
		background: #1966B0;
		font-size: 3.5vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		align-self: center;
	}

	.nextBtn:hover,
	.load-more-button:hover,
	#edit-button:hover,
	#save-button:hover,
	#edit-test-button:hover,
	#save-test-button:hover,
	#save-quiz:hover,
	.under-quiz-area-button:hover {
		background: #1967b0e3;
	}

	#edit-test-button,
	#save-test-button {
		margin-top: 0;
		margin-bottom: 2.5vw;
	}

	#username-input,
	#test-title-input,
	#description-input,
	#test-desc-input {
		font-family: 'Rubik', sans-serif;
		padding: 2vw;
		width: 100%;
		height: auto;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 1.5vw;
		font-size: 3.4vw;
		word-wrap: break-word;
	}

	#description-input,
	#test-desc-input {
		height: 25vw;
	}

	.username-area {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#last-seen-info {
		font-style: italic;
		color: #969696;
		font-weight: 400;
		font-size: 3vw;
		margin-bottom: 3vw;
	}

	.online {
		display: inline-block;
		width: 3vw;
		height: 3vw;
		background-color: green;
		border-radius: 50%;
		margin-left: 5px;
	}

	.offline {
		display: inline-block;
		width: 3vw;
		height: 3vw;
		background-color: rgb(133, 19, 19);
		border-radius: 50%;
		margin-left: 5px;
	}

	.info-area {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 2.7vw 3vw;
		background: #FFFFFF;
		border: 0.3vw solid rgba(9, 60, 93, 0.3);
		border-radius: 1.5vw;
		color: gray;
	}

	.p-info-area {
		font-size: 3vw;
	}

	.quiz-box-completed {
		width: 100%;
		padding: 4.2vw 0;
	}

	.quiz-row:first-of-type .quiz-box-completed:first-of-type {
		padding: 0 0 4.2vw 0;
	}

	.quiz-box-completed {
		position: relative;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.quiz-box-completed> :nth-child(2) {
		margin-bottom: 5.5vw;
		width: 100%;
	}

	.quiz-img-completed {
		position: relative;
		border-radius: 2.5vw 2.5vw 0 0;
		width: 100%;
		height: 50vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-info-completed {
		position: relative;
		width: 100%;
		gap: 3vw;
		display: flex;
		flex-direction: column;
	}

	.quiz-counter-completed,
	.quiz-text-completed {
		color: #969696;
		font-weight: 400;
		font-size: 3.2vw;
	}

	.quiz-counter-completed {
		position: relative;
		border-radius: 0 0 2.5vw 2.5vw;
		background: #333;
		font-size: 3.2vw;
		font-weight: 400;
		color: white;
		padding: 3vw 4vw;
		width: 100%;
	}

	.quiz-title-completed {
		text-align: left;
		font-size: 4.3vw;
		color: #333;
		font-weight: 600;
	}

	.quiz-item-completed {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.menu {
		height: 100vh;
		width: 0;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background-color: #ffffff;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 17vw;
	}

	.menu ul {
		display: flex;
		width: 100%;
		list-style-type: none;
		padding: 0;
		flex-direction: column;
		align-items: center;
	}

	.menu li {
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		width: 90%;
		transition: 0.3s;
	}

	.menu li a {
		text-decoration: none;
		font-size: 4vw;
		padding: 2vw 2vw;
		color: #969696;
		;
		display: block;
	}

	.menu li:hover {
		color: #f1f1f1;
	}

	.closebtn {
		position: absolute;
		color: #1966B0;
		top: 5vw;
		height: 10vw;
		right: 7vw;
		font-size: 9vw;
	}

	.openbtn {
		padding: 0 0 0 6vw;
		cursor: pointer;
		background: none;
		border: none;
		z-index: 1;
	}

	.overlay {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: none;
	}

	.overlay.active {
		display: block;
	}

	.burger-menu {
		width: 8vw;
	}

	.logo-menu {
		display: flex;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		justify-content: center;
	}

	.create-quiz-header {
		width: 100%;
	}

	.quiz-settings {
		background: #F7F8FA;
		border-radius: 2.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 4vw;
		flex-direction: column;
		align-items: flex-start;
	}

	.title-normal {
		margin: 0;
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		padding-bottom: 3vw;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
	}

	.create-quiz-area {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.create-quiz-title {
		margin: 0;
		font-size: 4.4vw;
		margin-bottom: 5vw;
		margin-top: 3vw;
		color: #333;
		font-weight: 500;
	}

	.edit-quiz-title {
		font-size: 4.5vw;
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
		padding-top: 5vw;
	}

	.create-quiz-bottom {
		display: flex;
		flex-direction: column;
		gap: 6.5vw;
		width: 100%;
	}

	.quiz-bottom-left {
		width: 100%;
	}

	.form-control,
	.form-select,
	.question-form {
        font-family: 'Rubik', sans-serif;
		padding: 2vw;
		width: 100%;
		height: auto;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 1.5vw;
		font-size: 3.4vw;
		word-wrap: break-word;
	}

	.form-control:focus,
	.question-form:focus,
	.form-select:focus,
	.character-form:focus {
		outline: #177de5 solid 0.3vw;
		border: 0.3vw solid white;
	}

	.quiz-cover-upload {
		width: 100%;
		height: 25vw;
		background: #FFFFFF;
		border: 0.3vw dashed rgba(9, 60, 93, 0.3);
		border-radius: 1.5vw;
	}

	.quiz-cover-upload,
	.form-select {
		margin-bottom: 2.5vw;
	}

	.quiz-cover-upload :hover {
		cursor: pointer;
	}

	.upload-area {
		width: 100%;
		height: 100%;
	}

	.quiz-bottom-right {
		display: flex;
		margin-top: 3vw;
		width: 100%;
		flex-direction: column;
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
	}

	.upload-label {
		width: 100%;
		height: 100%;
	}

	.create-quiz-types {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 4%;
		background: #FFFFFF;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 1.5vw;
	}

	.create-quiz-types {
		margin-bottom: 3vw;
	}

	.create-quiz-types-header {
		font-size: 4vw;
		color: #333;
		font-weight: 500;
		cursor: pointer;
	}

	.create-quiz-types-content {
		max-height: 0;
		font-weight: 400;
		font-size: 4vw;
		color: #333;
		overflow: hidden;
	}

	.create-quiz-types-content.expanded {
		margin-top: 2vw;
		max-height: 100vw;
	}

	.quiz-edit-info {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 5vw;
		margin-top: 5vw;
	}

	#test-status {
		text-align: center;
		font-weight: 400;
		font-size: 3vw;
		color: #111;
		padding: 3vw 2vw;
		background: #DDDDDD;
		border-radius: 1.5vw;
		width: 100%;
		margin-bottom: 5vw;
	}

	.test-status-bold {
		font-weight: bold;
	}

	.edit-quiz {
		width: 100%;
	}

	.characters-area {
		width: 100%;
	}

	.nextBtn,
	.add-character,
	#save-characters,
	.add-question,
	.add-result,
	#save-quiz,
	#publish-quiz,
	#preview-quiz,
	#unpublish-quiz,
	.add-answer {
		width: 100%;
		height: 9vw;
		padding: 2vw 2vw;
		border: none;
		background: #DDDDDD;
		font-size: 3.5vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	#preview-quiz {
		background: #1966B0;
		color: white;
	}
	#testInformation {
		display: none;
	}

	.create-container {
		margin-top: 5vw;
	}

	.answer-text-only-area {
		display: flex;
    	gap: 2.5vw;
		margin-bottom: 2.5vw;
	}

	.add-result-to-answer {
		cursor: pointer;
		border: none;
        font-size: 3vw;
        align-items: center;
        display: flex;
        flex-direction: row;
        border-radius: 1.5vw;
        padding: 2vw;
        background: #edc4c4;	
	}

	.answer-image-and-text {
		flex-direction: column;
	}
	.add-question,
	.add-result,
	#save-quiz,
	#publish-quiz,
	#preview-quiz,
	#unpublish-quiz {
		color: #ffffff;
		background-color: #333;
		margin-bottom: 0;
	}

	.nextBtn {
		align-self: center;
		background: #1966B0;
		color: white;
	}

	.add-character,
	#save-characters {
		margin-top: 6vw;
	}

	.character-title,
	.question-count,
	.answer-count,
	.result-count,
	.form-check-label,
	.remaindme-login-label,
	.edit-question-settings-title {
		font-size: 4vw;
		color: #111;
		font-weight: 500;
		margin-bottom: 2.5vw;
	}

	.edit-question-settings-title {
		margin-bottom: 0;
	}

	.answer-count {
		font-size: 3.5vw;
		margin-bottom: 1.25vw;
	}

	.form-check-label,
	.remaindme-login-label {
		font-size: 3vw;
		margin-bottom: 0;
	}

	.form-check {
		display: flex;
		align-items: center;
		gap: 1vw;
	}

	.form-check-input,
	.form-remaindme-input {
		width: 5vw;
		height: 5vw;
	}

	.character-form {
		padding: 2vw;
		width: 100%;
		height: auto;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 1.5vw;
		font-size: 3.4vw;
		word-wrap: break-word;
	}

	.character-input {
		display: flex;
		flex-direction: row;
		gap: 2vw;
	}

	.delete-button-png {
		width: 5vw;
	}

	.characters-edit-area {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5vw;
		margin-top: 5vw;
		width: 100%;
	}

	.edit-character {
		width: 100%;
	}

	.serial-character {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.under-character-buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 2.5vw;
		margin-bottom: 5vw;
	}

	.edit-question {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0px;
		gap: 5vw;
		width: 100%;
		border-radius: 5px;
		justify-content: space-between;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		margin-bottom: 5vw;
	}

	.character-checkboxes {
		display: flex;
		flex-wrap: wrap;
		gap: 2.5vw;
		margin-top: 2.5vw;
		margin-bottom: 2.5vw;
	}

	.answer-area {
		margin-left: 5vw;
	}

	.answer-input {
		display: flex;
		gap: 2.5vw;
	}

	.serial-answer {
		margin-top: 2.5vw;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.add-answer {
		margin-top: 2.5vw;
	}

	.edit-question-settings {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
		padding-left: 5vw;
		width: 100%;
		margin-bottom: 5vw;
	}

	.edit-quiz-title {
		margin-bottom: 5vw;
		margin-top: 3vw;
		color: #111;
		font-weight: 500;
	}

	body>div.main-container>div>div.quiz-settings>div:nth-child(7)>p.edit-quiz-title {
		margin-top: 0;
	}

	.delete-question,
	.toggle-type,
	.delete-result,
	.move-up,
	.move-down {
		border: none;
		padding: 2vw 2vw;
		background: #F4DBDB;
		font-weight: 400;
		font-size: 3.5vw;
		border-radius: 1.5vw;
		width: 100%;
		height: 10vw;
	}

	.move-up,
	.move-down {
		background: #DDDDDD;
		text-decoration: none;
		border: none;
	}

	.move-button-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 2.5vw;
	}

	.serial-question {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.serial-result {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.result-index-content {
		display: flex;
		flex-direction: column;
	}

	.results-area {
		width: 100%;
		margin-top: 5vw;
	}

	.edit-result+.edit-result {
		margin-top: 5vw;
	}

	.edit-result {
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		margin-bottom: 5vw;
	}

	.img-rst-prw {
		object-fit: cover;
		object-position: center;
		width: 100%;
		height: 50vw;
		border-radius: 5px;
		border: 2px solid rgba(9, 60, 93, 0.3);
	}

	.image-placeholder,
	.answer-image-placeholder {
		background: #FFFFFF;
		border: 0.3vw dashed rgba(9, 60, 93, 0.3);
		border-radius: 5px;
		width: 100%;
		height: 50vw;
		cursor: pointer;
	}

	.image-placeholder:hover {
		background: #3334;
		box-shadow: 0 0 10px #3334;
		border: 2px dashed #3334;
		border-radius: 5px;
		width: 100%;
		height: 50vw;
		cursor: pointer;
	}

	.image-selection {
		width: 100%;
		height: 50vw;
		margin-bottom: 2.5vw;
	}

	.upload-info {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #8f8f8f;
		font-size: 3.5vw;
		width: 100%;
		height: 100%;
		padding: 15vw;
	}

	.result-edit-area {
		display: flex;
		width: 100%;
		gap: 2.5vw;
		flex-direction: column;
	}

	.delete-result {
		margin-bottom: 5vw;
	}

	.form-result-img {
		display: none;
	}

	.image-preview {
		cursor: pointer;
	}

	.image-preview:hover {
		width: 100%;
		height: 100%;
		display: flex;
		box-shadow: 0 0 2vw #3334;
	}

	.input-login {
		margin-top: 3vw;
	}

	.input-login,
	.input-password {
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
	}

	.remaindme-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1vw;
	}

	.nonregister-button {
		background-color: #000000;
	}

	.nonregister-button-text {
		text-decoration: none;
		color: white;
	}

	.password-container {
		position: relative;
	}

	.password-container .toggle-password {
		position: absolute;
        right: 0vw;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 3vw;
        padding: 2.2vw;
	}

	.error-visible {
		display: block;
		color: red;
	}

	#error-info-area {
		display: none;
		margin-top: 3vw;
	}

	.faded-out-title {
		display: block;
		overflow: hidden;
		position: relative;
		max-width: 100%;
	}

	.faded-out-title::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100px;
		height: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(240 240 240));
	}

	.content {
		grid-column: 2 / 12;
		display: flex;
		justify-content: space-between;
		flex-direction: column;

	}

	.edit-quiz-buttons {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
		justify-content: center;
	}

	.favorite-btn:hover {
		background-color: #111;
	}

	.quiz-text-completed {
		color: black;
	}

	.quiz-edit-area,
	.edit-question-area {
		width: 100%;
	}

	.restart-test {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: none;
		cursor: pointer;
		font-size: 5vw;
		padding: 4vw;
		gap: 3vw;
		border: none;
		color: gray;
	}

	.restart-test:hover {
		background-color: #f0f0f0;
		border-radius: 2.5vw;
	}

	.restart-icon {
		fill: #333;
		width: 5.5vw;
	}

	.after-result-title {
		color: #333;
		font-weight: bold;
		font-size: 5.5vw;
		align-self: center;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(-20px);
		}
	}

	.social-share {
		display: flex;
		flex-direction: row;
		gap: 2vw;
	}

	.social-share-svg {
		width: 5vw;
		height: auto;
	}

	.social-share-button {
		background: #DDDDDD;
		border-radius: 2.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 2vw 2vw;
		border: none;
		cursor: pointer;
		width: 100%;
	}

	#shareButtonVK {
		background: #0077FF;
	}

	#shareButtonTG {
		background: #24A1DE;
	}

	#shareButtonPNTRST {
		background: #E60023;
	}

	.image-answer-row {
		display: flex;
		flex-direction: row;
		gap: 5vw;
		margin-bottom: 5vw;
	}

	.image-answer {
		display: flex;
		position: relative;
		width: 100%;
		flex-direction: column;
		gap: 1.5vw;
	}

	.image-answer:hover svg circle {
		stroke: #333;
	}

	.image-answer:hover svg path {
		stroke: #333;
	}

	.answer-button:active svg circle {
		stroke: #333;
	}

	.answer-image {
		width: 35vw;
		height: 35vw;
		object-fit: cover;
		object-position: center;
		border-radius: 2.5vw;
	}

	.checkbox {
		position: absolute;
		top: 2vw;
		left: 2vw;
	}

	.toggle-type {
		background-color: #1966B0;
		color: white;
	}

	.image-answer.clicked img {
		box-shadow: 0px 0px 15px 5px rgba(34, 60, 80, 0.2);
	}

	.quiz-row-completed+.quiz-row-completed {
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
		padding-top: 1.33vw;
	}

	.answer-button.correct {
		background-color: lightgreen;
		border-color: green;
	}

	.answer-button.correct .check-icon circle {
		stroke: green;
	}

	.answer-button.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct:hover .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct {
		pointer-events: none;
	}

	.image-answer.incorrect {
		pointer-events: none;
	}

	.answer-button.incorrect .check-icon circle {
		stroke: red;
	}

	.answer-button.incorrect .check-icon path {
		stroke: red;
	}

	.image-answer.incorrect:hover .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon path {
		stroke: red;
	}

	.answer-button.incorrect {
		background-color: lightcoral;
		border-color: red;
	}

	.questions-answers {
		margin-top: 2vw;
		max-width: 100%;
	}

	.question-spoiler {
		padding: 3vw;
        font-size: 4vw;
		cursor: pointer;
		border-radius: 2.5vw 2.5vw 0 0;
		color: #333;
		overflow: hidden;
	}

	.answer-result.correct {
		padding: 3vw;
        font-size: 4vw;
		border: 0.1vw solid lightgreen;
		border-radius: 0 0 2.5vw 2.5vw;
		overflow: hidden;
		margin-bottom: 3vw;
	}

	.answer-result.incorrect {
		padding: 3vw;
        font-size: 4vw;
		border: 0.1vw solid lightcoral;
		border-radius: 0 0 2.5vw 2.5vw;
		overflow: hidden;
		margin-bottom: 3vw;
	}

    .correct-answer-checkbox {
        display: flex;
        gap: 1vw;
        margin-top: 1vw;
        align-items: center;
    }

    input[name="correct-answer"] {
        width: 3.5vw;
        height: 3.5vw;
    }

    label[for^="correct-answer"] {
        font-size: 3.5vw;
    }

    #yandex_rtb_R-A-11013167-2 {
        width: 100%;
        max-height: 12vw;
    }

    #yandex_rtb_R-A-11013167-2.download{
        margin: 0 0 6vw 0;
    }

	.loginPage {
		display: flex;
		flex-direction: column-reverse;
		margin-top: 2vw;
	}

	.loginPageTelegramInfo {
		width: 100%;
        display: flex;
        flex-direction: column;
	}

	.loginPageAuthorizationArea {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		width: 100%;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		padding-bottom: 6vw;
	}

	.loginPageLoginArea {
		background-color: white;
		padding: 6vw;
		border-radius: 2.5vw;
		border: 0.1vw solid #e2e2e2;;
	}

	.loginPageHeader {
		margin: 0.5vw 0;
		align-self: center;
		font-weight: 500;
		font-size: 5vw;
		text-align: center;
	}

	.login-form {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
	}

	.remaindme-login-label {
		font-size: 4vw;
		opacity: 60%;
		cursor: pointer;
	}

	.remaindme-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.5vw;
	}

	.form-remaindme-input {
		width: 5vw;
		height: 5vw;
		margin: 0;
		cursor: pointer;
	}

	.login-button {
		width: 100%;
		height: 9vw;
		margin-top: 1.5vw;
		padding: 2vw 2vw;
		border: none;
		background: #1966B0;
		font-size: 3.5vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	
	.login-button:hover {
		background: #1967b0e3;
	}

	.loginPageNonRegisterArea {
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 6vw;
        gap: 0.5vw;
		border: 0.1vw solid #e2e2e2;
        border-radius: 2.5vw;		
	}

	.nonregister-button {
		width: 100%;
        height: 9vw;
        margin-top: 1.5vw;
        padding: 2vw 2vw;
        border: none;
        background: #333;
        font-size: 3.5vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
	}

	.nonregister-button:hover {
		background: #333333de;
	}

	.nonregister-button-text:visited {
		color: white;
	}

	.loginPageNonRegisterBottomText {
		text-align: center;
        margin-top: 2.5vw;
        word-break: break-word;
        font-size: 4vw;
        opacity: 40%;
	}

	.loginPageTelegramInfoHeader {
		font-size: 5vw;
		font-weight: 500;
		text-align: center;
		padding-top: 6vw;
		margin-bottom: 2.5vw;
	}

	.loginPageTelegramInfoDescription {
		font-size: 4vw;
		opacity: 70%;
		text-align: center;
	}

	.loginPageTelegramChannel {
        background-color: #ffffff;
		align-self: center;
        margin-top: 2.5vw;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4vw;
		padding: 6vw;
		border-radius: 2.5vw;
		border: 0.1vw solid #e2e2e2;
	}

	.loginPageTelegramChannelInfo {
		display: flex;
		flex-direction: row;
		gap: 4vw;
	}

	.loginPageTelegramChannelImage {
		width: 15vw;
		height: 15vw;
		border-radius: 10vw;
	}

	.loginPageTelegramChannelText {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loginPageTelegramChannelTitle {
		font-size: 4vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelUsernameLink {
		font-size: 4vw;
	}

	.loginPageTelegramChannelSubs,
	.loginPageTelegramChannelTests,
	.loginPageTelegramChannelGiveaways {
		display: flex;
		gap: 0.25vw;
		flex-direction: column;
		align-items: flex-start;
	}

	.loginPageTelegramChannelStats {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.loginPageTelegramChannelSubsCounter,
	.loginPageTelegramChannelTestsCounter,
	.loginPageTelegramChannelGiveawaysCounter {
		font-size: 4vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelSubsCounterText,
	.loginPageTelegramChannelTestsCounterText,
	.loginPageTelegramChannelGiveawaysCounterText {
		font-size: 3.5vw;
		opacity: 40%;	
	}

	.loginPageTelegramChannelDescription {
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
	}

	.loginPageTelegramChannelDescriptionTitle {
		font-size: 4vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelDescriptionText {
		font-size: 3.5vw;
		word-break: break-word;
	}

	.loginPageTelegramChannelInviteButton{
		width: 100%;
        height: 9vw;
        margin-top: 1.5vw;
        padding: 2vw 2vw;
        border: none;
        background: #1966B0;
        font-size: 3.5vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
		gap: 1vw;
	}

	.loginPageTelegramChannelInviteButton:hover {
		background: #1967b0e3;
	}

	.loginPageTelegramChannelInviteLink {
		text-decoration: none;
		color: white;
	}

	.loginPageTelegramChannelInviteButtonIcon {
		width: 3.5vw;
		height: auto;
	}
	
	.loginPageErrorInfo {
		background-color: #FFF6F5;
        border: 0.1vw solid #d45151;
        border-radius: 1.5vw;
        padding: 2vw;
        word-wrap: break-word;
        margin-top: 4vw;
	}

	.loginPageErrorInfoMessage {
		color: #d45151;
		font-size: 3.5vw;
	}

	.loginPageRegisterPopupFullScreen {
		display: none;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000ba;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	  
	.loginPageRegisterPopupFullScreen.visible {
		display: flex;
		opacity: 1;
	}
	
	.close-button {
		position: absolute;
        top: 2vw;
        right: 6vw;
        background: none;
        border: none;
        color: #000000;
        font-size: 9vw;
        text-align: center;
        padding: 0;
        margin: 0;
        cursor: pointer;
	}

	.loginPageRegisterPopupForm {
		display: flex;
		width: 80%;
		height: 50%;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		flex-direction: column;
		justify-content: center;
		background-color: white;
		padding: 6vw;
		border-radius: 2.5vw;
	}

	.registration-form {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
	}

	.loginPageRegisterPopupHeader {
		margin: 0.5vw 0 2.5vw 0;
        font-weight: 500;
        font-size: 5vw;
        text-align: center;
	}

	.loginPageRegisterPopupRegButton {
		width: 100%;
        height: 9vw;
        margin-top: 1.5vw;
        padding: 2vw 2vw;
        border: none;
        background: #333;
        font-size: 3.5vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
		gap: 1vw;
	}

	.loginPageRegisterPopupRegButton:hover {
		background: #333333de;
	}

	.loginPageRegisterPopupRegButton:visited {
		color: white;
	}

	.toggle-password-register {
		right: 39.6vw;
	}
}

@media screen and (min-width: 577px) and (max-width: 1199px) {

	.header-container {
		width: 100vw;
		height: 7.5vw;
		background: #333;
	}

	.header {
		width: 100%;
		height: 100%;
		justify-content: center;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left-area {
		width: 100%;
		height: auto;
		justify-content: space-between;
		display: flex;
		align-items: center;
	}

	.left-area .openbtn {
		margin-right: auto;
	}

	.left-area .logo {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		justify-content: center;
	}

	.logo-white {
		display: flex;
		z-index: 1;
		align-items: center;
		width: 15vw;
		height: auto;
	}

	.logo-black {
		display: flex;
		z-index: 1;
		align-items: center;
		width: 15vw;
		height: auto;
	}

	.right-area {
		display: none !important;
	}

	.under-header {
		display: flex;
		flex-direction: column;
		height: auto;
		padding: 5vw 4vw;
		background: #1966B0;
	}

	.content-underheader {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
	}

	.p-information {
		font-size: 4.5vw;
		font-weight: 600;
		line-height: 7vw;
		color: #ffffff;
	}

	.underheader-button {
		width: 50%;
		font-size: 2.8vw;
		font-weight: 600;
		background: #1966B0;
		border: 0.5vw solid #FFFFFF;
		box-shadow: -0.5vw 0.5vw 0px #4FA7ED;
		border-radius: 1.5vw;
		color: #ffffff;
		padding: 1.5vw 1.5vw;
	}

	.main-container {
		width: 100vw;
		padding: 3vw;
	}

	.content {
		width: 100%;
		gap: 2.5vw;
	}

	.navigation-bar {
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		display: flex;
	}

	.navigation-bar::-webkit-scrollbar {
		display: none;
	}

	.sort-btn, .create-btn {
		border-radius: 5.5vw;
		cursor: pointer;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.7vw;
		padding: 1.3vw 2.4vw;
		margin-right: 2vw;
		font-weight: 400;
		font-size: 2.3vw;
		border: none;
		color: #333;
	}

	.sort-btn.active {
		background: #333;
		color: #ffffff;
	}

	.create-btn.active {
		background: #333;
		color: #ffffff;
	}

	.navigation-icon {
		fill: #333 !important;
		height: 2.6vw;
		width: 2.6vw;
	}

	.navigation-icon.active {
		fill: #ffffff !important;
	}

	.quiz-container {
		width: 100%;
	}

	.quiz-row {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.quiz-row+.quiz-row {
		border-top: 0.2vw solid rgba(0, 0, 0, .08);
	}

	.quiz-item {
		padding: 2.2vw 0;
	}

	.quiz-item+.quiz-item {
		border-top: 0.2vw solid #e2e2e2;
		width: 100%;
	}

	.quiz-row:first-of-type .quiz-item:first-of-type {
		padding: 0 0 2.2vw 0;
	}

	.quiz-box {
		display: flex;
		flex-direction: row;
		position: relative;
		overflow: hidden;
		width: 100%;
		height: auto;
		gap: 3.5vw;
		align-items: flex-start;
	}

	.favorite-btn {
		position: absolute;
		font-size: 2.2vw;
		padding: 1vw 1.5vw;
		top: 11.5vw;
		background-color: #11111177;
		border: none;
		color: #ffffff;
		font-weight: 400;
		cursor: pointer;
	}

	.quiz-img {
		border-radius: 1.5vw;
		width: 30vw;
		height: 18vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-info {
		display: flex;
		flex-direction: column-reverse;
		gap: 1.5vw;
		width: 100%;
	}

	.quiz-counter-info {
		display: flex;
		gap: 0.7vw;
		align-items: center;
	}

	.quiz-title {
		text-align: left;
		font-size: 4.3vw;
		color: #000;
		font-weight: 600;
	}

	.counter-icon {
		width: 2.5vw;
		height: auto;
	}

	.quiz-counter {
		color: #969696;
		font-weight: 400;
		font-size: 2.2vw;
	}

	.footer-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 3vw 0 3vw;
	}

	.footer {
		border-top: 0.2vw solid rgba(0, 0, 0, .08);
		width: 100%;
		padding: 3vw 0;
	}

	.social-link-area {
		display: flex;
		flex-direction: row;
		gap: 1.7vw;
		align-items: center;
	}

	.socail-icon {
		width: 3.3vw;
		height: auto;
	}

	.social a {
		font-size: 3vw;
		font-weight: 600;
		color: #969696;
	}

	.quiz-introduction,
	.quiz-workspace {
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 0.1vw solid #e2e2e2;
		border-radius: 1.5vw;
		padding: 10vw 3vw 10vw 3vw;
		align-items: center;
	}

	.quiz-workspace {
		gap: 5vw;
	}

	.test-type-title {
		text-align: center;
		font-size: 2.2vw;
		color: #333;
		font-weight: 700;
	}

	.test-name-title {
		text-align: center;
		padding: 7vw 0 3.5vw 0;
		font-size: 5.3vw;
		color: #333;
		font-weight: 700;
	}

	.test-description-title {
		text-align: center;
		font-size: 2.5vw;
		color: #333;
		font-weight: 600;
	}

	.test-description-text {
		text-align: center;
		white-space: pre-wrap;
		font-size: 2.7vw;
		padding: 1.5vw 0 0;
		font-weight: 400;
		color: #333;
	}

	.quiz-info-action {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.2vw;
		padding: 7vw 0 7vw;
	}

	.button-start-quiz {
		background: #1966B0;
		text-wrap: nowrap;
		font-size: 2.8vw;
		border-radius: 1.5vw;
		padding: 2.2vw;
		font-weight: 400;
		text-align: center;
		color: white;
		transition: background-color 0.3s ease;
	}

	.button-start-quiz:hover {
		filter: brightness(120%);
	}

	.author-quiz {
		text-align: center;
	}

	.test-author-title {
		font-size: 2.2vw;
		color: gray;
		font-weight: 600;
	}

	.test-favorite-text,
	#toggle-favorite {
		color: gray;
		font-size: 2.1vw;
		text-align: center;
	}

	#toggle-favorite {
		font-weight: 600;
	}

	.test-author-name {
		font-size: 3vw;
		text-align: center;
		color: gray;
		font-weight: 400;
	}

	.quiz-workspace-info {
		display: flex;
		flex-direction: column;
		gap: 2.3vw;
	}

	.quiz-workspace-counter {
		text-align: center;
		font-weight: 400;
		font-size: 2.9vw;
		color: #333;
	}

	.quiz-workspace-question {
		text-align: center;
		font-weight: 500;
		font-size: 3.7vw;
		color: #333;
	}

	.quiz-workspace-text {
		font-style: italic;
		font-weight: 300;
		font-size: 2.3vw;
		text-align: center;
		color: #333;
	}

	#question-container {
		width: 100%;
	}

	.quiz-workspace-answers {
		display: flex;
		gap: 2vw;
		flex-direction: column;
		align-items: center;
	}

	.workspace-answer,
	.answer-text {
		width: 100%;
		font-size: 2.8vw;
		font-weight: 500;
		text-align: center;
		color: #333;
		word-break: break-word;
	}

	.answer-text {
		max-width: 35vw;
		word-break: break-word;
	}

	.answer-button {
		display: flex;
		align-items: center;
		padding: 1.5vw;
		width: 100%;
		cursor: pointer;
		border: none;
		border-radius: 1.5vw;
		background-color: #f0f0f0;
		transition: background-color 0.3s, color 0.3s;
	}

	.check-icon {
		width: 6vw;
		height: 6vw;
	}

	.answer-button svg {
		margin-right: 3vw;
		transition: stroke 0.3s;
	}

	.answer-button:hover {
		background-color: #e0e0e0;
	}

	.answer-button:hover svg circle {
		stroke: #333;
	}

	.answer-button:hover svg path {
		stroke: #333;
	}

	.answer-button:active {
		background-color: #d0d0d0;
	}

	.answer-button:active svg circle {
		stroke: #333;
	}

	.answer-button:active svg path {
		stroke: #333;
	}

	.answer-button:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.answer-button:disabled svg circle {
		stroke: #a0a0a0;
	}

	.answer-button:disabled svg path {
		stroke: #a0a0a0;
	}

	.answer-button.clicked {
		background-color: #c0c0c0;
	}

	.answer-button.clicked svg circle {
		stroke: #333;
	}

	.answer-button.clicked svg path {
		stroke: #333;
	}

	#quiz-workspace-result {
		display: flex;
		gap: 5.5vw;
		flex-direction: column;
		align-items: center;
	}

	.your-result-area {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		width: 100%;
		align-items: center;
	}

	.your-result-img {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.your-result {
		font-size: 2.2vw;
		color: #000000;
		font-weight: bold;
	}

	.your-result-title {
		font-size: 3.9vw;
		text-align: center;
		width: 100%;
		color: #333;
		font-weight: 600;
	}

	.your-result-description {
		white-space: pre-wrap;
		word-break: break-word;
		font-weight: 400;
		font-size: 3.3vw;
		text-align: center;
		color: #000000;
	}

	.after-result-workspace {
		display: flex;
		flex-direction: column;
		width: 80%;
		gap: 1.5vw;
		margin-top: 5vw;
	}

	.share-url-result {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f0f0f0;
		padding: 2vw;
		border-radius: 1.5vw;
	}

	.save-to-profile {
		display: flex;
		gap: 4vw;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 0.2vw solid rgba(0, 0, 0, .08);
		padding-bottom: 2vw;
	}

	.save-reult-info {
		display: flex;
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
	}

	.save-result-title {
		font-weight: 600;
		font-size: 2.85vw;
	}

	.save-result-text {
		font-size: 2.5vw;
	}

	.share-url-button {
		background: #DDDDDD;
		border-radius: 1.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding: 2vw 2vw;
		border: none;
		font-size: 2.5vw;
		color: #333;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		margin-top: 2vw;
	}

	.share-url-button:hover {
		background-color: #e0e0e0;
	}

	.share-url-button:active {
		background-color: #d0d0d0;
	}

	.share-url-button.clicked {
		background-color: #c0c0c0;
	}

	.saveInProfileSwitch {
		display: flex;
		padding: 2vw;
		width: 14vw;
		height: 6vw;
		background-color: #9f9f9f;
		border-radius: 4vw;
		align-items: center;
		position: relative;
		transition: background-color 0.5s ease;
	}

	.saveInProfileSwitch.active {
		background-color: #333;
	}

	.switch {
		width: 3vw;
		height: 3vw;
		background-color: rgb(255, 255, 255);
		border-radius: 50%;
		position: absolute;
		left: 2vw;
		transition: left 0.5s ease, background-color 0.5s ease;
	}

	.saveInProfileSwitch.active .switch {
		left: 70%;
		background-color: rgb(255, 255, 255);
	}

	.star-container {
		display: flex;
		flex-direction: column;
		gap: 1.6vw;
	}

	.star-container-title {
		text-align: center;
		font-size: 2.6vw;
	}

	.star {
		cursor: pointer;
		transition: fill 0.2s;
	}

	.star-svg {
		width: 3.7vw;
		height: 3.7vw;
	}

	.star svg path {
		fill: none;
	}

	.star.hovered svg path,
	.star.selected svg path {
		fill: #333;
	}

	.star svg path {
		stroke: #333;
		stroke-width: 2;
	}

	.stars-wrapper {
		display: flex;
		flex-direction: row;
		gap: 2vw;
		justify-content: center;
	}

	#notification-container {
		position: fixed;
		width: 100%;
		height: auto;
		top: 2.5vw;
		right: 0;
		padding: 2vw;
	}

	.notification {
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 2vw;
		background-color: #4CAF50;
		width: 100%;
		height: 8vw;
		color: white;
		padding: 1.5vw;
		border-radius: 1.5vw;
		box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.2);
		cursor: pointer;
		animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
	}

	.profile-workspace,
	.profile-area,
	.login-area,
	.register-area {
		background: #F7F8FA;
		border-radius: 2.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 4vw;
		flex-direction: column;
	}

	.profile-info,
	.quiz-edit-left {
		display: flex;
		justify-content: flex-start;
		gap: 3vw;
	}

	.profile-img,
	.quiz-edit-img {
		min-width: 20vw;
		max-width: 20vw;
		height: 20vw;
		object-fit: cover;
		object-position: center;
		border-radius: 2.5vw;
	}

	.profile-img-label.active {
		position: relative;
		height: 20vw;
	}


	.profile-img-label.active::before {
		content: 'Нажмите, чтобы выбрать фото';
		word-wrap: break-word;
		border-radius: 2.5vw;
		width: 100%;
		height: 100%;
		color: #ffffff95;
		font-size: 10px;
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		flex-direction: row;
		text-align: center;
	}

	.quiz-edit-img-label.active {
		position: relative;
		height: 20vw;
		/* Установите нужную высоту, если необходимо */
	}

	.quiz-edit-img-label.active::before {
		content: 'Нажмите, чтобы выбрать фото';
		word-wrap: break-word;
		border-radius: 2.5vw;
		width: 100%;
		height: 100%;
		color: #ffffff95;
		font-size: 10px;
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		flex-direction: row;
		text-align: center;
	}

	.profile-username,
	.quiz-title {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}

	.profile-description,
	.quiz-edit-desc {
		font-family: 'Rubik', sans-serif;
		color: #969696;
		word-wrap: break-word;
		font-weight: 400;
		font-size: 2.5vw;
		white-space: pre-wrap;
	}

	.profile-text,
	.quiz-edit-text {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		width: 100%;
		word-break: break-word;
	}

	#edit-button,
	#save-button,
	.toggle-type,
	#edit-test-button,
	#save-test-button,
	.under-quiz-area-button,
	.register-button {
		width: 100%;
		height: 7vw;
		margin-top: 6vw;
		padding: 2vw 2vw;
		border: none;
		background: #1966B0;
		font-size: 2vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.load-more-button {
		width: 100%;
		height: 7vw;
		padding: 2vw 2vw;
		border: none;
		background: #1966B0;
		font-size: 2vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.load-more-button:hover,
	#edit-button:hover,
	#save-button:hover,
	#edit-test-button:hover,
	#save-test-button:hover,
	#save-quiz:hover,
	.under-quiz-area-button:hover {
		background: #1967b0e3;
	}

	.toggle-type {
		margin-top: 0;
	}

	#edit-test-button,
	#save-test-button {
		margin-top: 0;
		margin-bottom: 2.5vw;
	}

	#username-input,
	#test-title-input,
	#description-input,
	#test-desc-input {
		font-family: 'Rubik', sans-serif;
		padding: 0.8vw;
		width: 100%;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 0.5vw;
		font-size: 2.4vw;
		word-wrap: break-word;
		word-spacing: 0px;
	}

	.username-area {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#last-seen-info {
		font-style: italic;
		color: #969696;
		font-weight: 400;
		font-size: 3vw;
		margin-bottom: 3vw;
	}

	.online {
		display: inline-block;
		width: 3vw;
		height: 3vw;
		background-color: green;
		border-radius: 50%;
		margin-left: 5px;
	}

	.offline {
		display: inline-block;
		width: 3vw;
		height: 3vw;
		background-color: rgb(133, 19, 19);
		border-radius: 50%;
		margin-left: 5px;
	}

	.info-area {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 2vw;
		background: #FFFFFF;
		border: 0.1vw solid rgba(9, 60, 93, 0.3);
		border-radius: 1.5vw;
		color: gray;
	}

	.p-info-area {
		font-size: 2.5vw;
	}

	.quiz-box-completed {
		width: 100%;
		padding: 4.2vw 0;
	}

	.quiz-row:first-of-type .quiz-box-completed:first-of-type {
		padding: 0 0 4.2vw 0;
	}

	.quiz-box-completed {
		position: relative;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.quiz-box-completed> :nth-child(2) {
		margin-bottom: 5.5vw;
		width: 100%;
	}

	.quiz-img-completed {
		position: relative;
		border-radius: 2.5vw 2.5vw 0 0;
		width: 100%;
		height: 50vw;
		object-fit: cover;
		object-position: center;
	}

	.quiz-info-completed {
		position: relative;
		width: 100%;
		gap: 3vw;
		display: flex;
		flex-direction: column;
	}

	.quiz-counter-completed,
	.quiz-text-completed {
		color: #969696;
		font-weight: 400;
		font-size: 3.2vw;
	}

	.quiz-counter-completed {
		position: relative;
		border-radius: 0 0 2.5vw 2.5vw;
		background: #333;
		font-size: 3.2vw;
		font-weight: 400;
		color: white;
		padding: 3vw 4vw;
		width: 100%;
	}

	.quiz-title-completed {
		text-align: left;
		font-size: 4.3vw;
		color: #333;
		font-weight: 600;
	}

	.quiz-item-completed {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.menu {
		height: 100vh;
		width: 0;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background-color: #ffffff;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 17vw;
	}

	.menu ul {
		display: flex;
		width: 100%;
		list-style-type: none;
		padding: 0;
		flex-direction: column;
		align-items: center;
	}

	.menu li {
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		width: 90%;
		transition: 0.3s;
	}

	.menu li a {
		text-decoration: none;
		font-size: 3vw;
		padding: 1.5vw 2vw;
		color: #969696;
		;
		display: block;
	}

	.menu li:hover {
		color: #f1f1f1;
	}

	.closebtn {
		position: absolute;
		color: #1966B0;
		top: 5vw;
		height: 10vw;
		right: 7vw;
		font-size: 7vw;
	}

	.openbtn {
		padding: 0 0 0 4vw;
		cursor: pointer;
		background: none;
		border: none;
		z-index: 1;
	}

	.overlay {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: none;
	}

	.overlay.active {
		display: block;
	}

	.burger-menu {
		width: 6vw;
	}

	.logo-menu {
		display: flex;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		justify-content: center;
	}

	.create-quiz-header {
		width: 100%;
	}

	.quiz-settings {
		background: #F7F8FA;
		border-radius: 2.5vw;
		width: 100%;
		height: auto;
		display: flex;
		padding: 4vw;
		flex-direction: column;
		align-items: flex-start;
	}

	.title-normal {
		margin: 0;
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
		padding-bottom: 3vw;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
	}

	.create-quiz-area {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.create-quiz-title {
		margin: 0;
		font-size: 2.7vw;
		margin-bottom: 3.2vw;
		margin-top: 3vw;
		color: #333;
		font-weight: 500;
	}

	.edit-quiz-title {
		font-size: 2.7vw;
		border-top: 0.2vw solid rgba(0, 0, 0, .08);
		padding-top: 5vw;
	}

	.create-quiz-bottom {
		display: flex;
		flex-direction: column;
		gap: 6.5vw;
		width: 100%;
	}

	.quiz-bottom-left {
		width: 100%;
	}

	.form-control,
	.form-select,
	.question-form {
		font-family: 'Rubik', sans-serif;
        padding: 1.5vw;
        width: 100%;
        border: 0.2vw solid rgba(0, 0, 0, 0.5);
        border-radius: 1.5vw;
        font-size: 2vw;
        word-wrap: break-word;
        word-spacing: 0px;
	}

	.quiz-cover-upload {
		width: 100%;
		height: 15vw;
		background: #FFFFFF;
		border: 0.2vw dashed rgba(9, 60, 93, 0.3);
		border-radius: 1.5vw;
	}

	/*     .quiz-cover-upload, .form-select {
            margin-bottom: 2.5vw;
        } */

	.quiz-cover-upload :hover {
		cursor: pointer;
	}

	.upload-area {
		width: 100%;
		height: 100%;
	}

	.quiz-bottom-right {
		display: flex;
		margin-top: 3vw;
		width: 100%;
		flex-direction: column;
		border-top: 0.3vw solid rgba(0, 0, 0, .08);
	}

	.upload-label {
		width: 100%;
		height: 100%;
	}

	.create-quiz-types {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 2%;
		background: #FFFFFF;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 1.5vw;
	}

	.create-quiz-types {
		margin-bottom: 3vw;
	}

	.create-quiz-types-header {
		font-size: 2.5vw;
		color: #333;
		font-weight: 500;
		cursor: pointer;
	}

	.create-quiz-types-content {
		max-height: 0;
		font-weight: 400;
		font-size: 2.5vw;
		color: #333;
		overflow: hidden;
	}

	.create-quiz-types-content.expanded {
		margin-top: 2vw;
		max-height: 100vw;
	}

	.quiz-edit-info {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 3vw;
		margin-top: 3vw;
	}

	#test-status {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		text-align: center;
		font-weight: 400;
		font-size: 2vw;
		color: #111;
		padding: 3vw 2vw;
		background: #DDDDDD;
		border-radius: 1.5vw;
		width: 100%;
		height: 7vw;
		margin-bottom: 3vw;
	}

	.test-status-bold {
		font-weight: bold;
	}

	.edit-quiz {
		width: 100%;
	}

	.characters-area {
		width: 100%;
	}

	.add-character,
	#save-characters,
	.add-question,
	.add-result,
	#save-quiz,
	#publish-quiz,
	#unpublish-quiz,
	#preview-quiz,
	.add-answer {
		width: 100%;
		height: 7vw;
		padding: 2vw 2vw;
		border: none;
		background: #DDDDDD;
		font-size: 2vw;
		border-radius: 1.5vw;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		color: #333;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	#preview-quiz {
		background: #000000;
		color: #ffffff;
	}

	.add-question {
		width: 100%;
		margin-bottom: 5vw;
	}

	.add-character,
	#save-characters {
		margin-top: 3vw;
	}

	.character-title,
	.question-count,
	.answer-count,
	.result-count,
	.form-check-label,
	.remaindme-login-label,
	.edit-question-settings-title {
		font-size: 2.2vw;
		color: #111;
		font-weight: 500;
		margin-bottom: 1.5vw;
	}

	.edit-question-settings-title {
		margin-bottom: 0;
	}

	.form-check-label,
	.remaindme-login-label {
		font-size: 2.2vw;
		margin-bottom: 0;
	}

	.form-check {
		display: flex;
		align-items: center;
		gap: 1vw;
	}

	.form-check-input {
		width: 3vw;
		height: 3vw;
	}

	.character-form {
		padding: 0.8vw;
		width: 100%;
		border: 0.3vw solid rgba(0, 0, 0, 0.5);
		border-radius: 0.5vw;
		font-size: 2.4vw;
		word-wrap: break-word;
		word-spacing: 0px;
	}

	.character-input {
		display: flex;
		flex-direction: row;
		gap: 2vw;
	}

	.delete-button-png {
		width: 3vw;
		height: 3vw;
	}

	.characters-edit-area {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 3vw;
		margin-top: 3vw;
		width: 100%;
	}

	.edit-character {
		width: 100%;
	}

	.serial-character {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.under-character-buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 1.5vw;
	}

	.edit-question {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0px;
		gap: 5vw;
		width: 100%;
		border-radius: 5px;
		justify-content: space-between;
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		margin-bottom: 5vw;
	}

	.character-checkboxes {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5vw;
		margin-top: 1.5vw;
		margin-bottom: 1.5vw;
	}

	.answer-area {
		margin-left: 5vw;
	}

	.answer-input {
		display: flex;
		gap: 2.5vw;
	}

	.serial-answer {
		margin-top: 1.5vw;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.add-answer {
		margin-top: 2.5vw;
	}

	.edit-question-settings {
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
		padding-left: 5vw;
		width: 100%;
		margin-bottom: 5vw;
	}

	.edit-quiz-title {
		margin-bottom: 3vw;
		margin-top: 3vw;
		color: #333;
		font-weight: 500;
	}

	body>div.main-container>div>div.quiz-settings>div:nth-child(7)>p.edit-quiz-title {
		margin-top: 0;
	}

	.delete-question,
	.delete-result,
	.move-up,
	.move-down {
		border: none;
		padding: 2vw 2vw;
		background: #F4DBDB;
		color: #333;
		font-weight: 400;
		font-size: 2vw;
		border-radius: 1.5vw;
		width: 100%;
		height: 7vw;
	}

	.move-up,
	.move-down {
		background: #DDDDDD;
		text-decoration: none;
		border: none;
	}

	.move-button-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 1.5vw;
	}

	.serial-question {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.serial-result {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.result-index-content {
		display: flex;
		flex-direction: row;
		gap: 5vw;
	}

	.results-area {
		width: 100%;
		margin-top: 3vw;
	}

	.edit-result+.edit-result {
		margin-top: 5vw;
	}

	.edit-result {
		border-bottom: 0.3vw solid rgba(0, 0, 0, .08);
		margin-bottom: 5vw;
	}

	.img-rst-prw {
		object-fit: cover;
		object-position: center;
		height: 30vw;
		width: 30vw;
		border-radius: 5px;
		border: 2px solid rgba(9, 60, 93, 0.3);
	}

	.image-placeholder {
		background: #FFFFFF;
		border: 2px dashed rgba(9, 60, 93, 0.3);
		border-radius: 5px;
		width: 30vw;
		height: 30vw;
		cursor: pointer;
	}

	.image-placeholder:hover {
		background: #3334;
		box-shadow: 0 0 10px #3334;
		border: 2px dashed #3334;
		border-radius: 5px;
		width: 30vw;
		height: 30vw;
		cursor: pointer;
	}

	.image-selection {
		height: 30vw;
		margin-bottom: 2.5vw;
	}

	.upload-info {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #8f8f8f;
		font-size: 2vw;
		width: 100%;
		height: 100%;
	}

	.result-edit-area {
		display: flex;
		width: 100%;
		gap: 2.5vw;
		flex-direction: column;
	}

	.delete-result {
		margin-bottom: 5vw;
	}

	.form-result-img {
		display: none;
	}

	.image-preview {
		cursor: pointer;
	}

	.image-preview:hover {
		width: 100%;
		height: 100%;
		display: flex;
		box-shadow: 0 0 2vw #3334;
	}

	.remaindme-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1vw;
	}


	.nonregister-button-text {
		text-decoration: none;
		color: white;
	}

	.password-container {
		position: relative;
	}

	.password-container .toggle-password {
		display: flex;
		position: absolute;
		text-align: center;
		right: 1vw;
		top: 50%;
		width: 6vw;
		height: 4vw;
		transform: translateY(-50%);
		border: none;
		background: none;
		cursor: pointer;
		font-size: 2.5vw;
		justify-content: center;
	}

	.error-visible {
		display: block;
		color: red;
	}

	#error-info-area {
		display: none;
		margin-top: 3vw;
	}

	.faded-out-title {
		display: block;
		overflow: hidden;
		position: relative;
		max-width: 100%;
	}

	.faded-out-title::after {
		content: '';
		position: absolute;
		right: 20vw;
		bottom: 0;
		width: 100px;
		height: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(240 240 240));
	}

	.content {
		grid-column: 2 / 12;
		display: flex;
		justify-content: space-between;
		flex-direction: column;

	}

	.edit-quiz-buttons {
		display: flex;
		flex-direction: row;
		gap: 1.5vw;
		justify-content: center;
	}

	.favorite-btn:hover {
		opacity: 90%;
	}

	.quiz-text-completed {
		color: black;
	}

	.quiz-edit-area,
	.edit-question-area {
		width: 100%;
	}

	.quiz-edit-right {
		display: flex;
		gap: 3vw;
	}

	.restart-test {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: none;
		cursor: pointer;
		font-size: 3vw;
		padding: 3vw;
		gap: 2vw;
		border: none;
		color: gray;
	}

	.restart-test:hover {
		background-color: #f0f0f0;
		border-radius: 1.5vw;
	}

	.restart-icon {
		fill: #333;
		width: 4.5vw;
	}

	.after-result-title {
		font-weight: bold;
		font-size: 3.9vw;
		align-self: center;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(-20px);
		}
	}

	.social-share {
		display: flex;
		flex-direction: row;
		gap: 1.5vw;
	}

	.social-share-svg {
		width: 2.5vw;
		height: auto;
	}

	.social-share-button {
		width: 100%;
		background: #DDDDDD;
		border-radius: 1.5vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding: 2vw 2vw;
		border: none;
		font-size: 2.5vw;
		color: #333;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}

	#shareButtonVK {
		background: #0077FF;
	}

	#shareButtonTG {
		background: #24A1DE;
	}

	#shareButtonPNTRST {
		background: #E60023;
	}

	.image-answer-row {
		display: flex;
		flex-direction: row;
		gap: 5vw;
		margin-bottom: 5vw;
	}

	.answer-image {
		width: 35vw;
		height: 35vw;
		object-fit: cover;
		object-position: center;
	}

	.image-answer {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.checkbox {
		position: absolute;
		top: 2vw;
		left: 2vw;
	}

	.image-answer.clicked svg circle {
		stroke: #333;
	}

	.image-answer.clicked svg path {
		stroke: #333;
	}

	.image-answer.clicked img {
		box-shadow: 0px 0px 15px 5px rgba(34, 60, 80, 0.2);
	}

	.image-answer-input {
		display: flex;
		flex-direction: row;
		gap: 5vw;
	}

	.answer-text-and-characters {
		width: 100%;
	}

	.answer-image-placeholder {
		background: #FFFFFF;
		border: 2px dashed rgba(9, 60, 93, 0.3);
		border-radius: 5px;
		width: 30vw;
		height: 30vw;
		cursor: pointer;
	}

	.quiz-row-completed+.quiz-row-completed {
		border-top: 0.1vw solid rgba(0, 0, 0, .08);
		padding-top: 1.33vw;
	}

	.answer-button.correct {
		background-color: lightgreen;
		border-color: green;
	}

	.answer-button.correct .check-icon circle {
		stroke: green;
	}

	.answer-button.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct:hover .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon circle {
		stroke: green;
	}

	.image-answer.correct .check-icon path {
		stroke: green;
	}

	.image-answer.correct {
		pointer-events: none;
	}

	.image-answer.incorrect {
		pointer-events: none;
	}

	.answer-button.incorrect .check-icon circle {
		stroke: red;
	}

	.answer-button.incorrect .check-icon path {
		stroke: red;
	}

	.image-answer.incorrect:hover .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon circle {
		stroke: red;
	}

	.image-answer.incorrect .check-icon path {
		stroke: red;
	}

	.answer-button.incorrect {
		background-color: lightcoral;
		border-color: red;
	}

	.questions-answers {
		margin-top: 2vw;
		max-width: 70%;
	}

	.question-spoiler {
		padding: 1.5vw;
        font-size: 3vw;
		cursor: pointer;
		border-radius: 1.5vw 1.5vw 0 0;
		color: #333;
		overflow: hidden;
	}

	.answer-result.correct {
		padding: 1.5vw;
        font-size: 3vw;
		border: 0.1vw solid lightgreen;
		border-radius: 0 0 1.5vw 1.5vw;
		overflow: hidden;
		margin-bottom: 1.5vw;
	}

	.answer-result.incorrect {
		padding: 1.5vw;
        font-size: 3vw;
		border: 0.1vw solid lightcoral;
		border-radius: 0 0 1.5vw 1.5vw;
		overflow: hidden;
		margin-bottom: 1.5vw;
	}

    .correct-answer-checkbox {
        display: flex;
        gap: 1vw;
        margin-top: 1vw;
        align-items: center;
    }

    input[name="correct-answer"] {
        width: 2vw;
        height: 2vw;
    }

    label[for^="correct-answer"] {
        font-size: 2.2vw;
    }

    #yandex_rtb_R-A-11013167-2 {
        width: 100%;
        max-height: 9.5vw;
    }

    #yandex_rtb_R-A-11013167-2.download{
        margin-bottom: 3vw;
    }

	.loginPage {
		display: flex;
		flex-direction: row;
		gap: 3vw;
	}

	.loginPageTelegramInfo {
		width: 100%;
        display: flex;
        flex-direction: column;
	}

	.loginPageAuthorizationArea {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		width: 90%;
	}

	.loginPageLoginArea {
		background-color: white;
		padding: 4vw;
		border-radius: 2.5vw;
		border: 0.1vw solid #e2e2e2;;
	}

	.loginPageHeader {
		margin: 3vw 0;
		align-self: center;
		font-weight: 500;
		font-size: 3.7vw;
		text-align: center;
	}

	.login-form {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.remaindme-login-label {
		font-size: 2.5vw;
		opacity: 60%;
		cursor: pointer;
	}

	.remaindme-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.5vw;
	}

	.form-remaindme-input {
		width: 3vw;
		height: 3vw;
		margin: 0;
		cursor: pointer;
	}

	.login-button {
		width: 100%;
        height: 7vw;
        padding: 2vw 2vw;
        border: none;
        background: #1966B0;
        font-size: 2vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
	}
	
	.login-button:hover {
		background: #1967b0e3;
	}

	.loginPageNonRegisterArea {
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 4vw;
        gap: 0.5vw;
		border: 0.1vw solid #e2e2e2;
        border-radius: 2.5vw;		
	}

	.nonregister-button {
		width: 100%;
        height: 5.5vw;
        padding: 2vw 2vw;
        border: none;
        background: #333;
        font-size: 2vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
	}

	.nonregister-button:hover {
		background: #333333de;
	}

	.nonregister-button-text:visited {
		color: white;
	}

	.loginPageNonRegisterBottomText {
		text-align: center;
        margin-top: 2.5vw;
        word-break: break-word;
        font-size: 2.5vw;
        opacity: 40%;
	}

	.loginPageTelegramInfoHeader {
		font-size: 3vw;
		font-weight: 500;
		text-align: center;
		padding-top: 3vw;
		margin-bottom: 2.5vw;
	}

	.loginPageTelegramInfoDescription {
		font-size: 2.5vw;
		opacity: 70%;
		text-align: center;
	}

	.loginPageTelegramChannel {
        background-color: #ffffff;
		align-self: center;
        margin-top: 2.5vw;
        width: 100%;
		height: 100%;
        display: flex;
        flex-direction: column;
        gap: 2vw;
		padding: 4vw;
		border-radius: 2.5vw;
		border: 0.1vw solid #e2e2e2;
		justify-content: space-between;
	}

	.loginPageTelegramChannelInfo {
		display: flex;
		flex-direction: row;
		gap: 4vw;
	}

	.loginPageTelegramChannelImage {
		width: 12vw;
		height: 12vw;
		border-radius: 10vw;
	}

	.loginPageTelegramChannelText {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loginPageTelegramChannelTitle {
		font-size: 2.5vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelUsernameLink {
		font-size: 2.5vw;
	}

	.loginPageTelegramChannelSubs,
	.loginPageTelegramChannelTests,
	.loginPageTelegramChannelGiveaways {
		display: flex;
		gap: 0.25vw;
		flex-direction: column;
		align-items: flex-start;
	}

	.loginPageTelegramChannelStats {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.loginPageTelegramChannelSubsCounter,
	.loginPageTelegramChannelTestsCounter,
	.loginPageTelegramChannelGiveawaysCounter {
		font-size: 2.5vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelSubsCounterText,
	.loginPageTelegramChannelTestsCounterText,
	.loginPageTelegramChannelGiveawaysCounterText {
		font-size: 2vw;
		opacity: 40%;	
	}

	.loginPageTelegramChannelDescription {
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
	}

	.loginPageTelegramChannelDescriptionTitle {
		font-size: 2.5vw;
		font-weight: 500;
	}

	.loginPageTelegramChannelDescriptionText {
		font-size: 2vw;
		word-break: break-word;
	}

	.loginPageTelegramChannelInviteButton{
		width: 100%;
        height: 5.5vw;
        padding: 2vw 2vw;
        border: none;
        background: #1966B0;
        font-size: 2vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
		gap: 1vw;
	}

	.loginPageTelegramChannelInviteButton:hover {
		background: #1967b0e3;
	}

	.loginPageTelegramChannelInviteLink {
		text-decoration: none;
		color: white;
	}

	.loginPageTelegramChannelInviteButtonIcon {
		width: 2.5vw;
		height: auto;
	}
	
	.loginPageErrorInfo {
		background-color: #FFF6F5;
        border: 0.1vw solid #d45151;
        border-radius: 1.5vw;
        padding: 2vw;
        word-wrap: break-word;
        margin-top: 4vw;
	}

	.loginPageErrorInfoMessage {
		color: #d45151;
		font-size: 3.5vw;
	}

	.loginPageRegisterPopupFullScreen {
		display: none;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000ba;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	  
	.loginPageRegisterPopupFullScreen.visible {
		display: flex;
		opacity: 1;
	}
	
	.close-button {
		position: absolute;
        top: 2vw;
        right: 6vw;
        background: none;
        border: none;
        color: #000000;
        font-size: 9vw;
        text-align: center;
        padding: 0;
        margin: 0;
        cursor: pointer;
	}

	.loginPageRegisterPopupForm {
		display: flex;
		width: 80%;
		height: 50%;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		flex-direction: column;
		justify-content: center;
		background-color: white;
		padding: 6vw;
		border-radius: 2.5vw;
	}

	.registration-form {
		display: flex;
		flex-direction: column;
		gap: 2.5vw;
	}

	.loginPageRegisterPopupHeader {
		margin: 0.5vw 0 2.5vw 0;
        font-weight: 500;
        font-size: 5vw;
        text-align: center;
	}

	.loginPageRegisterPopupRegButton {
		width: 100%;
        height: 7vw;
        margin-top: 6vw;
        padding: 2vw 2vw;
        border: none;
        background: #333;
        font-size: 2vw;
        border-radius: 1.5vw;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
	}

	.loginPageRegisterPopupRegButton:hover {
		background: #333333de;
	}

	.loginPageRegisterPopupRegButton:visited {
		color: white;
	}

	.toggle-password-register {
		right: 39.6vw;
	}
}