/* WPJobster Levels page SASS file */

.landing-page-image-levels {
	background-image: url("../images/landing/levels.webp");
}

.levels-wrapper {
	.new-seller-wrapper {
		margin-bottom: 50px;
	}

	.level-item {
		.item-title {
			font-size: 16px;
			font-weight: 700;
			color: $headlinesColor;
			margin: 0 0 20px;
		}

		.item-description {
			font-size: 14px;
			line-height: 26px;
			color: $mainTextColor;
			margin-bottom: 30px;
		}

		.list {
			.item {
				color: $mainTextColor;
				font-size: 14px;
				padding-top: 7px;
				padding-bottom: 7px;

				.content {
					color: $mainTextColor;
				}
			}
		}
	}
}

.level-preview {
	display: flex;
	align-items: center;
	margin-bottom: 30px;

	.level-preview-avatar {
		position: relative;

		.image {
			@include round(35px);

			width: 70px;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background: $grayBackground2;

			@include mobile {
				@include round(25px);

				width: 50px;
				height: 50px;
			}

			.user-placeholder {
				height: 34px;

				@include mobile {
					height: 26px;
				}
			}
		}

		.badge {
			position: absolute;
			left: 70%;
			bottom: -15px;
			z-index: 2;

			img {
				max-width: 30px;
			}
		}
	}

	.user-level {
		margin-left: 25px;
		font-size: 24px;
		font-weight: 600;
		color: $headlinesColor;

		@include mobile {
			font-size: 20px;
		}
	}
}