/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
label.components-form-token-field__label {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: calc(8px);
	padding: 0px;
}

.wp-block-artcloud-blocks-artcloud-peoples {
	background: #fff;

	h1,
	h3,
	h6,
	p {
		margin: 0;
		padding: 0
	}

	hr {
		border: 1px solid #E6E6E6;
		margin-bottom: 30px;
	}

	.artcloud-peoples-item {
		position: relative;
		min-height: 240px;
		margin-bottom: 30px;

		@media only screen and (max-width: 620px) {
			min-height: auto;
		}

		.artcloud-peoples-image {
			position: absolute;
			left: 0;

			@media only screen and (max-width: 620px) {
				position: relative;
			}
		}

		.artcloud-peoples-content {
			padding-left: 190px;
			padding-right: 30px;
			position: relative;

			@media only screen and (max-width: 620px) {
				padding-left: 0;
				padding-top: 10px;
				width: 100% !important;
			}

			h5 {
				margin: 0;

				a {
					font-size: 18px;
					color: #000;
					font-weight: 600;
					text-decoration: none;
				}
			}

			p {
				font-size: 16px;
				color: #000;
				font-weight: 500;
			}

			.social-link {
				padding-top: 10px;
				display: flex;
				gap: 8px;

				h6 {
					font-size: 21px;
					color: var(--wp--preset--color--white);
					font-weight: bold;
					position: absolute;
					height: 64px;
					width: 64px;
					background: var(--wp--preset--color--primary);
					border-radius: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
					top: 0;
					right: 30px;
				}
			}

			.artcloud-peoples-name {
				padding-top: 12px;
				margin-top: 10px;
				border-top: 1px solid #ededed;

				h6 {
					font-size: 18px;
					color: #000;
					font-weight: 600;
					text-decoration: none;
				}

				p {
					font-size: 16px;
					color: #000;
					font-weight: 500;
				}
			}
		}
	}

	.artcloud-row {
		display: flex;
		flex-wrap: wrap;

		.col-12 {
			width: 100%;

			.artcloud-peoples-item {
				.artcloud-peoples-content {
					width: 40%;

					@media only screen and (max-width: 620px) {
						width: 100%;
					}
				}
			}
		}

		.col-12 {
			width: 100%;
		}

		.col-6 {
			width: 50%;

			@media only screen and (max-width: 620px) {
				width: 100%;
			}
		}

		.col-4 {
			width: 33.33%;

			@media only screen and (max-width: 620px) {
				width: 100%;
			}
		}

		.col-3 {
			width: 25%;

			@media only screen and (max-width: 620px) {
				width: 100%;
			}
		}

		.vertical {
			.artcloud-peoples-item {
				.artcloud-peoples-image {
					position: relative;
					margin-bottom: 20px;
				}

				.artcloud-peoples-content {
					padding-left: 0;
				}
			}
		}

		@media only screen and (max-width: 620px) {
			display: inline-block;
			width: 100%;
		}
	}

	.artcloud-peoples-select-group {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			height: 70%;
			width: 1px;
			background-color: #585757;
			right: 50px;
			bottom: 0;
			top: 0;
			margin: auto;
		}

		&::before {
			content: "";
			width: 50px;
			height: 100%;
			position: absolute;
			right: 0;
			background-image: url(https://www.iconpacks.net/icons/2/free-arrow-down-icon-3101-thumb.png);
			background-size: 20px;
			background-repeat: no-repeat;
			background-position: center;
			pointer-events: none;
			/* Add this line to make it ignore pointer events */
		}

		.components-select-control__input {
			padding: 0 50px 0 10px;
			height: 43px;
			border-color: transparent;
			width: 100%;
			font-size: 16px;
			color: #000;
			font-weight: 500;
			border: 1px solid #585757;
			border-radius: 3px;
			appearance: none;
			cursor: pointer;
		}

		.components-input-control__suffix {
			&::after {
				content: "";
				position: absolute;
				right: 40px;
				height: 60%;
				width: 1px;
				background-color: #707070;
			}

			svg {
				height: 34px;
				width: 34px;
			}
		}

		.components-input-control__backdrop {
			border-color: #585757;
		}
	}


	.artcloud-people-wrappers {
		.artcloud-search-row {
			display: flex;
			gap: 30px;
			flex-wrap: wrap;
			margin-bottom: 30px;

			@media only screen and (max-width: 767px) {
				flex-direction: column;
			}

			.col-12 {
				width: 100%;
			}

			.col-6 {
				width: 48%;

				@media only screen and (max-width: 767px) {
					width: 100%;
				}
			}
		}

		.artcloud-search-wrapper {
			position: relative;
			display: inline-block;
			width: 100%;

			ul.artcloud-tabView {
				list-style: none;
				display: flex;
				gap: 10px;

				li {
					cursor: pointer;
				}

				li a {
					cursor: pointer;
					padding: 10px 25px;
					font-size: 16px;
					background-color: var(--wp--preset--color--white);
					color: var(--wp--preset--color--primary);
					font-weight: 500;
					border: 1px solid #585757;
					border-radius: 50px;
				}

				li a.active {
					background-color: var(--wp--preset--color--primary);
					color:var(--wp--preset--color--white);
				}
			}

			.artcloud-search {
				position: relative;
				display: inline-block;
				width: 100%;

				input {
					padding: 0 20px;
					height: 40px;
					box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1607843137);
					border-radius: 48px;
					border-color: transparent;
					font-size: 14px;
					color: #000;
					font-weight: 500;
					display: block;
					width: calc(100% - 45px);
				}

				span {
					position: absolute;
					background-color: var(--wp--preset--color--primary);
					right: 0;
					bottom: 0;
					top: 0;
					margin: auto;
					line-height: 47px;
					color: var(--wp--preset--color--white);
					padding: 0 20px;
					border-radius: 50px;
					font-size: 14px;
					font-weight: 500;
					cursor: pointer;
				}
			}
		}

		select#artcloud-select {
			font-family: 'Poppins';
		}
	}

	.people-block-title {
		margin-bottom: 25px;
		padding-top: 20px;
		font-size: 35px;
		color: var(--wp--preset--color--primary);
		font-weight: 500;
	}

	.people-block-desc {
		padding: 20px 0;
	}
}

.artcloud-peoples-row {
	display: flex;
	align-items: center;
	padding-bottom: 5px;
}

.artcloud-peoples-row a {
	text-decoration: none;
}

.artcloud-people-addMember {
	margin-right: 10px;
}

.artcloud-people-member {
	padding-right: 5px;
}