:root {
	/*--ux-content-layout-pad: 18px;*/
	--ux-content-item-width: 400px;
	--ux-content-image-height: 280px;
	--ux-content-item-pad: 18px;
	--ux-content-item-lineHeight: 27px;
	--ux-content-color-theme: #27b737;
}

.ui-display-flex {
	display: flex;
}

	.ui-display-flex.ui-flex-fd-row {
		flex-direction: row;
	}

	.ui-display-flex.ui-flex-fd-column {
		flex-direction: column;
	}

	.ui-display-flex.ui-fw-wrap {
		flex-wrap: wrap;
	}

	.ui-display-flex.ui-fw-nowrap {
		flex-wrap: nowrap;
	}


	.ui-display-flex.ui-flex-ac-center {
		align-content: center;
	}

	.ui-display-flex.ui-flex-ac-flex-start {
		align-content: flex-start;
	}

	.ui-display-flex.ui-flex-ac-flex-end {
		align-content: flex-end;
	}

	.ui-display-flex.ui-flex-ac-space-around {
		align-content: space-around;
	}

	.ui-display-flex.ui-flex-ac-space-between {
		align-content: space-between;
	}

	.ui-display-flex.ui-flex-ac-stretch {
		align-content: stretch;
	}


	.ui-display-flex.ui-flex-jc-center {
		justify-content: center;
	}

	.ui-display-flex.ui-flex-jc-flex-start {
		justify-content: flex-start;
	}

	.ui-display-flex.ui-flex-jc-flex-end {
		justify-content: flex-end;
	}

	.ui-display-flex.ui-flex-jc-space-between {
		justify-content: space-between;
	}

	.ui-display-flex.ui-flex-jc-space-around {
		justify-content: space-around;
	}

	.ui-display-flex.ui-flex-jc-space-evenly {
		justify-content: space-evenly;
	}

	.ui-display-flex.ui-flex-ai-center {
		align-items: center;
	}

	.ui-display-flex.ui-flex-ai-flex-start {
		align-items: flex-start;
	}

	.ui-display-flex.ui-flex-ai-flex-end {
		align-items: flex-end;
	}

	.ui-display-flex.ui-flex-ai-stretch {
		align-items: stretch;
	}

	.ui-display-flex.ui-flex-ai-baseline {
		align-items: baseline;
	}


.ux-content-placeholder {
	margin: 0 auto;
	/*	border: 1px solid #e7e7e7;
	background-color: #f0f0f0;*/
	overflow: hidden;
	position: relative;
}


	.ux-content-placeholder > .ux-content-container {
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		/*padding: var(--ux-content-layout-pad);*/
	}


		.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;
		}

			.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;
		}

			.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block {
				position: relative;
				display: inline-flex;
			}

				.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item {
					background-color: #fff;
					/*removed 2023-02-02 */
					/*padding: var(--ux-content-item-pad);*/
					border-radius: 7px;
					overflow: hidden;
					box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
					/*	box-shadow: 0 0 20px 0 rgb(62 28 131 / 10%);*/
					/* added */
					width: var(--ux-content-item-width);
					margin: var(--ux-content-item-pad);
					/* added */
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-content: center;
					align-items: stretch;
				}


					.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-display {
						position: relative;
					}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-display > .ux-display-anchor {
							display: block;
							position:relative;
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-display > .ux-display-anchor > .ux-anchor-image {
								max-width: 100%;
								height: var(--ux-content-image-height);
								object-fit: cover;
								display: block;
							}

					.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data {
						line-height: var(--ux-content-item-lineHeight);
						padding: calc(var(--ux-content-item-pad) / 2);
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						align-content: flex-start;
						justify-content: space-between;
						align-items: stretch;
						font-size: 14px;
						/*margin: 0 calc(0px - var(--ux-content-item-pad));*/
					}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-transaction,
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-header,
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info,
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-personal,
						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-footer {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							align-content: center;
							justify-content: space-between;
							align-items: center;
							padding: calc(var(--ux-content-item-pad) / 2);
						}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit a > i {
							background: #edf1f9;
							border-radius: 50%;
							padding: 7px;
						}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit a > img {
							background: #edf1f9;
							border-radius: 50%;
							padding: 7px;
							width: 14px;
							height: 14px;
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit a > i ~ span,
							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit a > img ~ span {
								padding-left: calc(var(--ux-content-item-pad) / 2);
							}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > hr {
							border: none;
							border-top: 1px solid #919fb3 /*#e4e8f3*/;
							margin: calc(var(--ux-content-item-pad) / 2) calc(0px - calc(var(--ux-content-item-pad) / 2));
						}

						/*.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-transaction {
						}*/

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-transactiontype {
							border-radius: 15px;
							font-size: 11px;
							padding: 4px 7px;
							line-height: 11px;
							background-color: #edf1f933;
							border: 1px solid #edf1f9;
							margin-bottom: calc(var(--ux-content-item-pad) / 2);
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-transactiontype.fx-sale {
								background-color: #27b7371a;
								border-color: #27b73766;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-transactiontype.fx-rent {
								background-color: #ff98001a;
								border-color: #ff980066;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-transactiontype.fx-lease {
								background-color: #0dcaf01a;
								border-color: #0dcaf066;
							}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-price {
							margin-bottom: calc(var(--ux-content-item-pad) / 2);
							font-weight: 800;
							font-size: 120%;
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-price.fx-sale {
								color: #27b737;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-price.fx-rent {
								color: #ff9800;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-price.fx-lease {
								color: #0dcaf0;
							}

						/*.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-header {
						}*/

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-title {
							font-weight: 700;
							margin-bottom: calc(var(--ux-content-item-pad) * 1);
						}


						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info {
							justify-content: flex-start;
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info > a {
								font-size: 13px;
								color: #616e96;
								padding: calc(var(--ux-content-item-pad) / 4) 0;
							}

								.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info > a:not(:last-of-type) {
									padding-right: var(--ux-content-item-pad);
								}


						/*.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-personal {			
						}*/

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-owner {
							margin-top: calc(var(--ux-content-item-pad) / 2);
							color: #616e96;
						}


						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-footer {
							flex-wrap: nowrap;
							align-items:baseline;
						}

						.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-view {
							border-radius: 20px;
							padding: 10px 18px;
							background-color: #4e5c79;
							color: #fff;
							line-height: 100%;
						}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-view.fx-sale {
								background-color: #27b737;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-view.fx-rent {
								background-color: #ff9800;
							}

							.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-view.fx-lease {
								background-color: #0dcaf0;
							}







/* ---- common ----*/

.fx-transition-linear {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}




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

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

	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-transaction,
	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-header,
	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info,
	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-personal,
	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-footer {
		flex-direction: column;
	}

	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit.ux-data-info {
		align-items: stretch;
	}

	.ux-content-placeholder > .ux-content-container > .ux-content-group > .ux-content-block > .ux-content-item > .ux-item-data > .ux-data-unit .ux-data-view {
		margin-top: calc(var(--ux-content-item-pad) / 1);
	}
}

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