.mpl-main
{
	display: flex;
	gap: 16px;
	min-height: 290px;
	max-width: 100%;
	padding: 16px 0;
	overflow-x: auto;
	cursor: grab;
	font-size: 15px;
}

.mpl-main .item
{
	width: 300px;
	min-width: 300px;
	padding: 8px;
	background-color: var(--v-mainbk-base);
	border: 2px solid #00000020;
	border-radius: 7px;
	transition: all 0.1s;
	user-select: none;
}

.mpl-main .scroll
{
	max-height: 212px;
	margin: 8px 0;
	overflow-y: auto;
}

.mpl-main .content
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mpl-main .item:hover
{
	border-color: #00000040;
	box-shadow: 0 0 2px 2px #00000010;
}

.mpl-main .type
{
	display: flex;
	justify-content: center;
	gap: 20px;
	min-height: 34px;
	padding-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
	border-bottom: 1px solid gray;
}

.mpl-main .type .name
{
	padding: 4px 0 4px 32px;
	background: url(../assets/ico/typo.svg) no-repeat left center;
	background-size: 24px;
}

.mpl-main .type .rooms
{
	padding: 4px 0 4px 32px;
	background: url(../assets/ico/rooms.svg) no-repeat 4px 0;
	background-size: 24px;
}
.mpl-main .type .rooms:empty { display: none }

.mpl-main .item .activity
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
}

.mpl-main .item .activity .pict
{
	width: 30px;
	min-width: 30px;
	height: 30px;
	background: url(../assets/ico/build.png) no-repeat center center;
	background-size: contain;
}
.mpl-main .item.fix .activity .pict { background-image: url(../assets/ico/fix.png) }

.mpl-main .item .activity .name
{
	max-width: calc(100% - 82px);
	padding: 3px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid black;
}

.mpl-main .item.estimate .activity .estimate
{
	width: 30px;
	min-width: 30px;
	height: 30px;
	background: url(../assets/ico/estimate.png) no-repeat center center;
	background-size: contain;
}

.mpl-main .item .desc
{
	position: relative;
	min-height: 90px;
	max-height: 90px;
	overflow: hidden;
	padding-left: 40px;
	background: url(../assets/ico/desc.svg) no-repeat left top;
	background-size: 30px;
}

.mpl-main .item .three-p
{
	position: absolute;
	top: -20px;
	opacity: 0;
}

.mpl-main .item .content.expand .three-p
{
	top: unset;
	opacity: 1;
	transition: opacity 2s;
	bottom: 0;
	right: 0;
	width: 25px;
	height: 18px;
	background: url(../assets/ico/three-p.png) no-repeat center center;
	cursor: pointer;
}

.mpl-main .item .town
{
	line-height: 30px;
	padding-left: 40px;
	background: url(../assets/ico/map-marker-b.svg) no-repeat 5px top;
	background-size: 22px;
}

.mpl-main .item .date
{
	line-height: 30px;
	padding-left: 40px;
	background: url(../assets/ico/date.svg) no-repeat left top;
	background-size: 30px;
}

.mpl-main .item .status
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	padding-top: 8px;
	font-size: smaller;
	font-style: italic;
	color: var(--v-warning-base);
	border-top: 1px solid gray;
}

.mpl-main .item .status .pict
{
	width: 24px;
	height: 24px;
	background: url(../assets/public/solutions/immo/yellow-time.svg) no-repeat center center;
	background-size: contain;
}
.mpl-main .item.quotes .status .pict { background-image: url(../assets/public/solutions/immo/yellow-user-check.svg) }

.mpl-main .item .eco
{
	padding: 6px 6px 0;
	text-align: center;
	font-size: smaller;
	font-style: italic;
	color: var(--v-success-base);
}

.mpl-main .item.no-status .status,
.mpl-main .item.no-status .eco
{
	display: none;
}

.mpl-main .item .content.expanded .desc
{
	overflow: unset;
	max-height: unset;
}

.mpl-main .item .content.expanded .three-p
{
	display: none;
}

.mpl-main .item.want-more
{
	display: flex;
	align-items: center;
	min-width: 270px;
	width: 270px;
	font-size: 10pt;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

.mpl-main .item.want-more .scroll
{
	max-height: 270px;
}

.mpl-main .item.want-more .content
{
	gap: 14px;
}

.mpl-main .want-more .ttl
{
	text-align: center;
	font-weight: 500;
}

.mpl-main .want-more .tip
{
	padding-left: 30px;
	font-size: 9pt;
	background: url(../assets/public/commons/arrow-right-circle-yellow.svg) no-repeat 5px 0;
	background-size: 16px;
}

.mpl-main .want-more .tel
{
	width: fit-content;
	margin: auto;
	padding: 4px 10px;
	color: var(--v-smky2fg-base);
	background-color: var(--v-smky2-base);
	border-radius: 20px;
}

.mpl-main .want-more .tel A
{
	color: var(--v-smky2fg-base);
	text-decoration: none;
}