:root {
	/*--ux-content-layout-pad: 18px;*/
	--ux-scroll-content-item-width: 300px;
	--ux-scroll-content-image-height: 300px;
	--ux-scroll-content-item-pad: 18px; /* must be same as the value of -cx-scroll-layout-pad */
	--ux-scroll-content-item-lineHeight: 27px;
	--ux-scroll-content-theme-color: #27b737;
	--ux-scroll-content-theme-borderRadius: 7px;
}




.ux-content-placeholder {
	margin: 0 auto;
	position: relative;
	border: 1px solid #e7e7e7;
	background-color: #f0f0f0;
	border-radius: var(--ux-scroll-content-theme-borderRadius);
}


	.ux-content-placeholder > .ux-content-container {
		position: relative;
		margin: 0 auto;
	}


		.ux-content-placeholder > .ux-content-container > .ux-loading-group,
		.ux-content-placeholder > .ux-content-container > .ux-error-group {
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			background-color: lightyellow;
		}


		/* additional CSS only for loading and error*/
			.ux-content-placeholder > .ux-content-container > .ux-loading-group > .ux-loading-block {
				display: block;
				padding: 32px;
			}

				.ux-content-placeholder > .ux-content-container > .ux-loading-group > .ux-loading-block > .ux-loading-item {
					display: block;
					height: 16px;
					width: 16px;
					position: absolute;
					top: calc(50% - 8px);
					left: calc(50% - 8px);
				}

			.ux-content-placeholder > .ux-content-container > .ux-error-group > .ux-error-block {
				text-align: center;
				display: block;
			}

				.ux-content-placeholder > .ux-content-container > .ux-error-group > .ux-error-block > .ux-error-item {
					display: block;
					margin: 0 auto;
					color: red;
				}




		.ux-content-placeholder > .ux-content-container > .ux-content-group {
			/*position: relative;
			display: block;*/
			/*same css in scroll widget css, hence disabled */
		}

			.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block {
				/*position: relative;
				display: inline-flex;*/
				/*same css in scroll widget css, hence disabled */
			}

				.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item {
					background-color: #fff;
					border-radius: var(--ux-scroll-content-theme-borderRadius);
					overflow: hidden;
					box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
					width: var(--ux-scroll-content-item-width);
					margin: var(--ux-scroll-content-item-pad);
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-content: center;
					align-items: stretch;
					padding: 1em;
				}


					.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-image {
						position: relative;
						max-width: 100%;
						height: var(--ux-scroll-content-image-height);
						object-fit: cover;
						display: block;
						padding-bottom:2em;
					}

					.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data {
						line-height: var(--ux-scroll-content-item-lineHeight);
						padding: calc(var(--ux-scroll-content-item-pad) / 2);
						font-size: 14px;
						margin: 0 calc(0px - var(--ux-scroll-content-item-pad));
					}
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data-spacer {
							height:100%;
						}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data.ux-item-data-overlay {
							background-color: #685A9f;
							opacity:0.8;
							color:#fff;
							cursor:pointer;
						}
							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data.ux-item-data-overlay:not(:last-of-type) {
								border-bottom: 1px solid #564a85;
							}
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data.ux-item-data-overlay:hover {
							opacity: 1;
						}
					.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data.ux-data-price {
						font-weight:500;
					}




					




				








/*----responsive-design-----*/
@media only screen and (max-width: 640px) {
	:root {
		--ux-scroll-content-item-width: 240px;
		--ux-scroll-content-image-height: 240px;
	}
}

@media only screen and (max-width: 480px) {
	:root {
		/*--ux-content-layout-pad: 12px;*/
		--ux-scroll-content-item-width: 220px;
		--ux-scroll-content-image-height: 220px;
/*		--ux-scroll-content-item-pad: 12px;*/
	}
}

@media only screen and (max-width: 360px) {
	:root {
		--ux-scroll-content-item-width: 200px;
		--ux-scroll-content-image-height: 200px;
	}
}