.messages {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 20px;
	&__body {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		@media (min-width: $tablet) {
			gap: 20px;
		}
	}
	&__item {
		display: none;
		align-items: center;
		border-radius: 8px;
		border: 1px solid #e7e7e7;
		background: $gradient;
		padding: 10px;
		font-size: 12px;
		@media (min-width: $tablet) {
			padding: 20px;
			font-size: 16px;
		}
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3),
		&:nth-of-type(4),
		&:nth-of-type(5),
		&:nth-of-type(6) {
			display: flex;
		}
		&-info {
			display: flex;
			align-items: center;
			width: calc(100% - 90px);
			@media (min-width: $tablet) {
				width: calc(100% - 150px);
			}
		}
		&-photo {
			position: relative;
			aspect-ratio: 1/1;
			overflow: hidden;
			background: $silver;
			color: $white;
			width: 36px;
			border-radius: 6px;
			display: flex;
			justify-content: center;
			align-items: center;
			@media (min-width: $tablet) {
				width: 52px;
			}
			svg {
				width: 50%;
				position: relative;
				z-index: 1;
			}
			img {
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&-text {
			width: calc(100% - 36px);
			padding-left: 6px;
			color: $black;
			display: flex;
			flex-direction: column;
			gap: 4px;
			@media (min-width: $tablet) {
				padding-left: 20px;
				width: calc(100% - 52px);
				gap: 8px;
			}
			span {
				color: $black;
			}
		}
		&-date {
			color: $black;
			width: 90px;
			text-align: right;
			@media (min-width: $tablet) {
				width: 150px;
			}
		}
	}
	&.active &__item {
		display: flex;
	}
}

.responses {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 20px;
	&__body {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	&__item {
		display: none;
		flex-direction: column;
		gap: 20px;
		border-radius: 8px;
		border: 1px solid #e7e7e7;
		background: $gradient;
		padding: 20px 10px;
		font-size: 12px;
		position: relative;
		@media (min-width: $tablet) {
			padding: 20px;
			font-size: 16px;
		}
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3),
		&:nth-of-type(4),
		&:nth-of-type(5),
		&:nth-of-type(6) {
			display: flex;
		}
		&-date {
			color: $black;
			@media (min-width: $laptop) {
				position: absolute;
				top: 20px;
				right: 20px;
			}
		}
		&-wrapper {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
		&-inner {
			display: flex;
			flex-direction: column;
			gap: 10px;
			@media (min-width: $tablet) {
				gap: 20px;
			}
			@media (min-width: $desktop) {
				width: calc(100% - 150px);
			}
		}
		&-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			color: $black;
			text-align: right;
			@media (min-width: $laptop) {
				display: flex;
				flex-direction: column;
				gap: 6px;
				text-align: left;
			}
			span {
				color: $black;
				text-align: left;
			}
		}
		&-buttons {
			display: flex;
			flex-direction: column;
			gap: 10px;
			@media (min-width: $tablet) {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}
			@media (min-width: $desktop) {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			.button {
				&.active {
					background: $green;
					color: $white;
				}
			}
		}
	}
	&.active &__item {
		display: flex;
	}
}

.chatbox {
	display: flex;
	flex-direction: column;
	gap: 20px;
	@media (min-width: $tablet) {
		gap: 30px;
	}
	@media (min-width: $desktop) {
		gap: 40px;
	}
	&__toper {
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: $gradient;
		border: 1px solid #e7e7e7;
		border-radius: 8px;
		padding: 10px;
		@media (min-width: $tablet) {
			padding: 20px;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		&-info {
			font-size: 12px;
			@media (min-width: $tablet) {
				font-size: 16px;
				width: calc(100% - 230px);
			}
		}
		&-button {
			@media (min-width: $tablet) {
				width: 210px;
				padding: 0;
			}
		}
	}
	&__list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		@media (min-width: $tablet) {
			gap: 20px;
		}
		@media (min-width: $desktop) {
			gap: 40px;
		}
	}
	&__item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		color: $black;
		font-size: 12px;
		@media (min-width: $tablet) {
			font-size: 16px;
		}
		&_reverse {
			flex-direction: row-reverse;
		}
		&-photo {
			position: relative;
			aspect-ratio: 1/1;
			overflow: hidden;
			background: $silver;
			color: $white;
			width: 44px;
			border-radius: 6px;
			display: flex;
			justify-content: center;
			align-items: center;
			svg {
				width: 50%;
				position: relative;
				z-index: 1;
			}
			img {
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&-body {
			width: calc(100% - 54px);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			@media (min-width: $tablet) {
				width: calc(100% - 60px);
			}
		}
		&_reverse &-body {
			align-items: flex-end;
		}
		&-text {
			border-radius: 8px;
			background: $white;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
			padding: 10px;
			line-height: 1.6;
		}
		&-time {
			width: 100%;
			padding-left: 54px;
			margin-top: 10px;
			color: $silver;
		}
		&_reverse &-time {
			text-align: right;
		}
	}
	&__bottom {
		background: $blue;
		padding: 10px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		@media (min-width: $tablet) {
			padding: 16px 20px;
		}
		&-file {
			width: 20px;
			aspect-ratio: 1/1;
			display: flex;
			justify-content: center;
			align-items: center;
			background: $white;
			color: $blue;
			border-radius: 8px;
			@media (min-width: $tablet) {
				width: 48px;
			}
			&:hover {
				color: $green;
			}
			input {
				display: none;
			}
			svg {
				width: 50%;
				aspect-ratio: 1/1;
				@media (min-width: $tablet) {
					width: 40%;
				}
			}
		}
		&-text {
			width: calc(100% - 60px);
			height: 20px;
			border-color: $white;
			@media (min-width: $tablet) {
				width: calc(100% - 128px);
				height: 48px;
			}
			&:focus {
				border-color: $white;
			}
		}
		&-send {
			width: 20px;
			aspect-ratio: 1/1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			background: $white;
			border: none;
			color: $blue;
			border-radius: 999px;
			@media (min-width: $tablet) {
				width: 48px;
			}
			&:hover {
				color: $green;
			}
			svg {
				width: 50%;
				aspect-ratio: 1/1;
				position: relative;
				left: 1px;
				@media (min-width: $tablet) {
					width: 40%;
					left: 2px;
				}
			}
		}
	}
}

.cvs {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 20px;
	&__body {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		@media (min-width: $tablet) {
			gap: 30px;
		}
	}
	&__item {
		display: none;
		flex-direction: column;
		gap: 10px;
		border-radius: 8px;
		border: 1px solid #e7e7e7;
		background: $gradient;
		padding: 10px;
		font-size: 12px;
		position: relative;
		@media (min-width: $tablet) {
			gap: 0;
			padding: 20px;
			font-size: 16px;
			flex-direction: row;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3),
		&:nth-of-type(4),
		&:nth-of-type(5),
		&:nth-of-type(6) {
			display: flex;
		}
		&-like {
			position: absolute;
			top: 10px;
			right: 10px;
			@media (min-width: $tablet) {
				top: 20px;
				right: 20px;
			}
		}
		&-photo {
			position: relative;
			aspect-ratio: 1/1;
			overflow: hidden;
			background: $silver;
			color: $white;
			width: 36px;
			border-radius: 6px;
			display: flex;
			justify-content: center;
			align-items: center;
			@media (min-width: $tablet) {
				width: 68px;
			}
			svg {
				width: 50%;
				position: relative;
				z-index: 1;
			}
			img {
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&-text {
			display: flex;
			flex-direction: column;
			gap: 10px;
			@media (min-width: $tablet) {
				gap: 20px;
				width: calc(100% - 68px);
				padding-left: 20px;
				padding-right: 60px;
			}
			div {
				display: flex;
				align-items: center;
				justify-content: space-between;
				@media (min-width: $tablet) {
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
				}
			}
			span,
			a {
				color: $black;
			}
		}
		&-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			@media (min-width: $tablet) {
				align-items: flex-end;
				width: 100%;
				padding-top: 20px;
			}
		}
	}
	&.active &__item {
		display: flex;
	}
}

.faqs {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 20px;
	&__body {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}
	&__item {
		display: none;
		flex-direction: column;
		border-radius: 8px;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
		background: $white;
		padding: 10px;
		font-size: 12px;
		@media (min-width: $tablet) {
			padding: 20px;
			font-size: 16px;
			box-shadow: $shadow;
		}
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3),
		&:nth-of-type(4),
		&:nth-of-type(5),
		&:nth-of-type(6) {
			display: flex;
		}
		&-button {
			background: none;
			padding: 0;
			border: none;
			display: flex;
			align-items: center;
			color: $black;
			text-align: left;
			font-size: 14px;
			font-weight: 700;
			@media (min-width: $tablet) {
				font-size: 20px;
			}
			span {
				width: calc(100% - 16px);
				padding-right: 16px;
			}
			i {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 16px;
				aspect-ratio: 1/1;
				color: $green;
				transition: $transition;
				svg {
					width: 16px;
					aspect-ratio: 1/1;
					transform: rotate(90deg);
				}
			}
			&.active i {
				transform: $rotate180;
			}
		}
		&-body {
			display: flex;
			flex-direction: column;
			gap: 10px;
			opacity: 0;
			height: 0;
			overflow: hidden;
			font-size: 12px;
			line-height: 1.4;
			@media (min-width: $tablet) {
				font-size: 16px;
				gap: 20px;
			}
			p {
				margin: 0;
			}
		}
		.active + &-body {
			opacity: 1;
			height: auto;
			transition: $transition;
			padding-top: 10px;
			@media (min-width: $tablet) {
				padding-top: 20px;
			}
		}
	}
	&.active &__item {
		display: flex;
	}
}

.cabinet {
	padding: 20px 0;
	padding-bottom: 40px;
	background: $gradient;
	@media (min-width: $laptop) {
		padding: 30px 0;
		padding-bottom: 60px;
	}
	&__breadcrumbs {
		margin-bottom: 50px;
	}
	&__wrapper {
		display: flex;
		flex-direction: column;
		@media (min-width: $laptop) {
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
		}
	}
	&__side {
		border-radius: 8px;
		background: $white;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		gap: 30px;
		box-shadow: $shadow;
		@media (min-width: $tablet) {
			padding: 30px 20px;
			margin-bottom: 50px;
		}
		@media (min-width: $laptop) {
			width: 340px;
			margin: 0;
			position: sticky;
			top: 6px;
		}
		@media (min-width: $desktop) {
			width: 400px;
		}
		&-item {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
		&-toper {
			display: flex;
			align-items: center;
			&-pic {
				width: 70px;
				aspect-ratio: 1/1;
				overflow: hidden;
				border-radius: 8px;
				color: $white;
				background: $silver;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;
					aspect-ratio: 1/1;
					object-fit: contain;
				}
				svg {
					width: 50%;
					aspect-ratio: 1/1;
				}
			}
			b {
				width: calc(100% - 70px);
				font-size: 14px;
				font-weight: 700;
				padding-left: 16px;
				@media (min-width: $tablet) {
					font-size: 20px;
				}
			}
		}
	}
	&__menu {
		display: flex;
		flex-direction: column;
		&-toper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px;
			padding-right: 12px;
			border: none;
			border-radius: 8px;
			background: $green;
			color: $white;
			@media (min-width: $tablet) {
				padding: 0 20px;
			}
			@media (min-width: $laptop) {
				display: none;
			}
			&-text {
				width: calc(100% - 16px);
				display: flex;
				align-items: center;
				@media (min-width: $tablet) {
					width: calc(100% - 20px);
				}
				i {
					width: 16px;
					height: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					@media (min-width: $tablet) {
						width: 22px;
						height: 22px;
					}
				}
				svg {
					width: 16px;
					height: 16px;
					@media (min-width: $tablet) {
						width: 22px;
						height: 22px;
					}
				}
				span {
					display: flex;
					align-items: center;
					padding: 0 10px;
					min-height: 30px;
					font-size: 12px;
					width: calc(100% - 16px);
					@media (min-width: $tablet) {
						width: calc(100% - 22px);
						font-size: 20px;
						min-height: 52px;
						padding: 0 16px;
					}
				}
			}
			&-arrow {
				width: 16px;
				height: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: $transition;
				@media (min-width: $tablet) {
					width: 20px;
					height: 20px;
				}
				svg {
					width: 12px;
					height: 12px;
					transform: rotate(90deg);
					@media (min-width: $tablet) {
						width: 20px;
						height: 20px;
					}
				}
			}
			&.active &-arrow {
				transform: $rotate180;
			}
		}
		&-body {
			opacity: 0;
			height: 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			@media (min-width: $laptop) {
				opacity: 1;
				height: auto;
			}
		}
		.active + &-body {
			opacity: 1;
			height: auto;
			transition: $transition;
		}
		&-items {
			display: flex;
			flex-direction: column;
		}
		&-item {
			padding: 8px 16px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			@media (min-width: $tablet) {
				padding: 14px 20px;
			}
			&:hover {
				color: $green;
			}
			&.active {
				@media (min-width: $laptop) {
					background: $green;
					color: $white;
				}
				svg {
					@media (min-width: $laptop) {
						color: $white;
					}
				}
				&.red {
					@media (min-width: $laptop) {
						background: $red;
					}
				}
			}
			i {
				width: 16px;
				height: 16px;
				color: $green;
				@media (min-width: $tablet) {
					width: 22px;
					height: 22px;
				}
			}
			svg {
				width: 16px;
				height: 16px;
				@media (min-width: $tablet) {
					width: 22px;
					height: 22px;
				}
			}
			span {
				width: calc(100% - 16px);
				font-size: 12px;
				padding-left: 10px;
				@media (min-width: $tablet) {
					font-size: 20px;
					width: calc(100% - 22px);
					padding-left: 16px;
				}
			}
		}
		&-bottom {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 10px;
			@media (min-width: $tablet) {
				gap: 20px;
				margin-top: 20px;
			}
		}
		&-copy {
			color: $silver;
			text-align: center;
			font-size: 12px;
			@media (min-width: $tablet) {
				font-size: 16px;
			}
		}
	}
	&__body {
		margin: 0 -10px;
		margin-top: 50px;
		background: $white;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		gap: 30px;
		color: $black;
		@media (min-width: $tablet) {
			padding: 30px 20px;
			margin: 0;
			border-radius: 8px;
			box-shadow: $shadow;
		}
		@media (min-width: $laptop) {
			width: calc(100% - 360px);
		}
		@media (min-width: $desktop) {
			width: calc(100% - 420px);
		}
		&-item {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
	}
	&__title {
		font-size: 24px;
		@media (min-width: $tablet) {
			font-size: 32px;
		}
		@media (min-width: $laptop) {
			font-size: 40px;
		}
		@media (min-width: $desktop) {
			font-size: 48px;
		}
	}
	&__subtitle {
		font-size: 22px;
		margin: 0;
		font-weight: 700;
		color: $black;
		@media (min-width: $tablet) {
			font-size: 24px;
		}
	}
	&__h4 {
		font-size: 20px;
		margin: 0;
		font-weight: 700;
		color: $black;
		@media (min-width: $tablet) {
			font-size: 22px;
		}
	}
	&__text {
		margin: 0;
		font-size: 14px;
		@media (min-width: $tablet) {
			font-size: 16px;
		}
		b {
			color: $black;
			font-size: 18px;
			@media (min-width: $tablet) {
				font-size: 24px;
			}
		}
	}
	&__descr {
		display: flex;
		flex-direction: column;
		gap: 6px;
		@media (min-width: $tablet) {
			gap: 12px;
		}
	}
	&__avatar {
		display: flex;
		align-items: flex-start;
		@media (min-width: $tablet) {
			align-items: center;
		}
		&-pic {
			width: 100px;
			aspect-ratio: 1/1;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border-radius: 8px;
			color: $white;
			background: $silver;
			svg {
				width: 50%;
				aspect-ratio: 1/1;
				z-index: 1;
				position: relative;
			}
		}
		&-form {
			width: calc(100% - 100px);
			padding-left: 15px;
			display: flex;
			flex-direction: column;
			gap: 6px;
			@media (min-width: $tablet) {
				align-items: flex-start;
				padding-left: 30px;
				gap: 12px;
			}
			.file {
				@media (min-width: $tablet) {
					min-width: 215px;
				}
			}
		}
	}
	&__inputs {
		display: flex;
		flex-direction: column;
		gap: 20px;
		@media (min-width: $desktop) {
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		&-item {
			@media (min-width: $desktop) {
				width: calc(50% - 10px);
			}
			&_fullwidth {
				@media (min-width: $desktop) {
					width: 100%;
				}
			}
			&_min {
				@media (min-width: $desktop) {
					width: calc(15% - 10px);
				}
			}
			&_max {
				@media (min-width: $desktop) {
					width: calc(85% - 10px);
				}
			}
			.button {
				@media (min-width: $tablet) {
					width: 100%;
					max-width: 215px;
					padding: 0;
				}
			}
			.buttons {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
				@media (min-width: $tablet) {
					gap: 20px;
					max-width: 470px;
				}
				@media (min-width: $laptop) {
					max-width: none;
				}
				@media (min-width: $desktop) {
					max-width: 470px;
				}
				.button {
					max-width: none;
				}
			}
		}
		> .button {
			padding: 0;
			width: 100%;
			max-width: 140px;
			@media (min-width: $tablet) {
				max-width: 190px;
			}
		}
	}
	&__add {
		display: flex;
		flex-direction: column;
		gap: 10px;
		@media (min-width: $tablet) {
			gap: 0;
			flex-direction: row;
			align-items: flex-end;
		}
		&-pic {
			border-radius: 4px;
			position: relative;
			overflow: hidden;
			background: $silver;
			color: $white;
			width: 100px;
			aspect-ratio: 1/1;
			transition: $transition;
			@media (min-width: $tablet) {
				width: 220px;
				border-radius: 8px;
			}
			&:hover {
				background: $black;
			}
			input {
				display: none;
			}
			> svg {
				width: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				@media (min-width: $tablet) {
					width: 50px;
				}
			}
			span {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				gap: 4px;
				font-weight: 700;
				font-size: 8px;
				line-height: 1;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-top: 25px;
				@media (min-width: $tablet) {
					font-size: 16px;
					margin-top: 60px;
				}
				svg {
					width: 7px;
					aspect-ratio: 1/1;
					@media (min-width: $tablet) {
						width: 16px;
					}
				}
			}
		}
		&-body {
			display: flex;
			flex-direction: column;
			gap: 10px;
			@media (min-width: $tablet) {
				gap: 20px;
				width: calc(100% - 220px);
				padding-left: 20px;
			}
			.button {
				@media (min-width: $tablet) {
					width: 215px;
					padding: 0;
				}
			}
		}
	}
	&__fleet {
		display: flex;
		flex-direction: column;
		gap: 20px;
		@media (min-width: $tablet) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: $desktop) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	&__submit {
		@media (min-width: $tablet) {
			width: 215px;
			padding: 0;
			margin: 0 auto;
		}
	}
	&__filters {
		display: flex;
		flex-direction: column;
		gap: 10px;
		@media (min-width: $tablet) {
			gap: 20px;
		}
		@media (min-width: $desktop) {
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
		}
		&-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			@media (min-width: $tablet) {
				gap: 20px;
			}
			@media (min-width: $desktop) {
				width: calc(50% - 10px);
				max-width: 410px;
			}
			.button, .select {
				width: 100%;
				@media (min-width: $desktop) {
					width: auto;
				}
			}
		}
		&-item + &-item {
			align-items: flex-end;
			@media (min-width: $desktop) {
				max-width: 280px;
			}
		}
		.search {
			input {
				padding-right: 135px;
			}
			button {
				width: 115px;
			}
		}
		&-buttons {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			width: 100%;
			@media (min-width: $tablet) {
				gap: 20px;
			}
			.button {
				padding: 0;
				gap: 5px;
				&.active {
					background: $green;
					color: $white;
					&:before {
						content: "";
						width: 6px;
						height: 6px;
						background: $white;
						border-radius: 999px;
					}
				}
			}
		}
	}
	&__table-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		margin-bottom: -10px;
		div {
			font-size: 18px;
			@media (min-width: $tablet) {
				font-size: 24px;
			}
		}
		span {
			color: $black;
			font-size: 14px;
			@media (min-width: $tablet) {
				font-size: 18px;
			}
			b {
				color: $green;
			}
		}
	}
	&__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		@media (min-width: $tablet) {
			max-width: 420px;
		}
		.button {
			&.active {
				background: $green;
				color: $white;
			}
		}
	}
	&__bodies {
		display: none;
		&.showed {
			display: block;
		}
	}
	&__nots {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		@media (min-width: $tablet) {
			gap: 20px;
		}
		.input {
			width: 100%;
		}
	}
	&__anketa {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
		@media (min-width: $tablet) {
			flex-direction: row;
			align-items: center;
		}
		@media (min-width: $laptop) {
			flex-direction: column;
			align-items: stretch;
		}
		@media (min-width: $desktop) {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		&-buttons {
			display: flex;
			flex-direction: column;
			gap: 10px;
			@media (min-width: $tablet) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20px;
			}
		}
	}
	&__stats {
		display: flex;
		flex-direction: column;
		gap: 6px;
		@media (min-width: $tablet) {
			gap: 12px;
		}
		&-title {
			font-size: 14px;
			font-weight: 700;
			color: $black;
			@media (min-width: $tablet) {
				font-size: 24px;
			}
		}
		&-body {
			background: $gradient;
			border-radius: 8px;
			padding: 10px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			margin-bottom: 10px;
			@media (min-width: $tablet) {
				padding: 10px 20px;
			}
		}
		&-item {
			font-size: 12px;
			display: flex;
			align-items: center;
			line-height: 1;
			gap: 6px;
			@media (min-width: $tablet) {
				font-size: 20px;
				gap: 10px;
			}
			svg {
				width: 20px;
				aspect-ratio: 1/1;
				color: $green;
				@media (min-width: $tablet) {
					width: 40px;
					margin-right: 10px;
				}
			}
			span {
				font-weight: 700;
				color: $black;
			}
			b {
				color: $green;
				font-size: 14px;
				@media (min-width: $tablet) {
					font-size: 24px;
				}
			}
		}
		&-subtitle {
			font-size: 14px;
			font-weight: 700;
			color: $green;
			@media (min-width: $tablet) {
				font-size: 18px;
			}
		}
		&-line {
			width: 100%;
			position: relative;
			overflow: hidden;
			height: 8px;
			border-radius: 999px;
			background: #CECECE;
			span {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: $green;
				border-radius: 999px;
			}
		}
		&-bottom {
			color: $black;
			font-size: 12px;
			@media (min-width: $tablet) {
				font-size: 16px;
			}
		}
	}
	&__works {
		display: flex;
		flex-direction: column;
		gap: 20px;
		@media (min-width: $tablet) {
			gap: 30px;
		}
		&-item {
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
			padding: 10px;
			border-radius: 4px;
			@media (min-width: $tablet) {
				padding: 20px;
				border-radius: 8px;
			}
		}
		&-spoiler {
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-left {
				display: flex;
				align-items: center;
				width: calc(100% - 22px);
			}
			&-right {
				width: 22px;
				height: 22px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $green;
				padding: 0;
				background: none;
				border: none;
				svg {
					width: 60%;
					aspect-ratio: 1/1;
					transform: rotate(90deg);
					transition: $transition;
				}
			}
			&.active &-right svg {
				transform: rotate(-90deg);
			}
			&-buttons {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 60px;
				@media (min-width: $tablet) {
					width: 74px;
				}
				.button {
					width: 22px;
					height: 22px;
					padding: 0;
					@media (min-width: $tablet) {
						width: 30px;
						height: 30px;
					}
				}
			}
			&-text {
				width: calc(100% - 60px);
				padding-left: 20px;
				font-size: 17px;
				font-weight: 700;
				color: $black;
				@media (min-width: $tablet) {
					width: calc(100% - 74px);
					font-size: 20px;
				}
			}
		}
		&-body {
			opacity: 0;
			height: 0;
			overflow: hidden;
		}
		.active + &-body {
			transition: $transition;
			opacity: 1;
			height: auto;
			padding-top: 20px;
		}
		&-add {
			padding: 0;
			width: 100%;
			max-width: 160px;
			@media (min-width: $tablet) {
				max-width: 220px;
			}
		}
	}
	&__buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		@media (min-width: $tablet) {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}
		.button, .file {
			padding: 0;
			width: 100%;
			max-width: 140px;
			@media (min-width: $tablet) {
				max-width: none;
			}
		}
		@media (min-width: $tablet) {
			gap: 20px;
		}
		@media (min-width: $desktop) {
			max-width: 400px;
		}
	}
	&__vacs {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		gap: 20px;
		&-body {
			display: flex;
			flex-direction: column;
			gap: 20px;
			width: 100%;
			@media (min-width: $tablet) {
				gap: 30px;
			}
		}
		&-item {
			display: none;
			background: $white;
			box-shadow: $shadow;
			&:nth-of-type(1),
			&:nth-of-type(2) {
				display: flex;
			}
			
		}
		&.active &-item {
			display: flex;
		}
	}
}