component[type='EntityList'] > .content {
	min-width: 220px;
	width: 70vw;
	max-width: 700px;
	min-height: 200px;
	max-height: calc(100vh - 230px);
	overflow: auto;
	margin-top: 10px;
	transition: height 0.5s ease-in-out;
}
component[type='EntityList'].loading > .content {
	display: flex;
	justify-content: center;
	align-items: center;
}

component[type='EntityList'] .list > .object {
	width: 100%;
}
component[type='EntityList'] .list > .object > div {
	white-space: nowrap;
}
/* Spaces Used */
component[type='EntityList'] .list > .object .index {
	min-width: 4%;
	max-width: 4%;
	text-align: center;
}
component[type='EntityList'] .list > .object .type {
	min-width: 5%;
	max-width: 5%;
	text-align: center;
}
component[type='EntityList'] .list > .object .type.none {
	color: #999;
	font-size: 20px;
}

component[type='EntityList'] .list > .object .placement {
	border-left: 1px solid #aaa;
}
component[type='EntityList'] .list > .object .actions {
	display: flex;
	justify-content: flex-end;
	min-width: 12%;
}

component[type='EntityList'] .list > .object.normal .name {
	padding-left: 2%;
	overflow: hidden;
	transition: min-width 0.4s ease-in-out;
}
component[type='EntityList'] .list > .object.normal .placement {
	transition: min-width 0.4s ease-in-out;
}
component[type='EntityList'] .list > .object .name {
	min-width: 59%;
	max-width: 59%;
}
component[type='EntityList'] .list > .object .placement {
	min-width: 20%;
	max-width: 20%;
}
component[type='EntityList'] .list > .object.view-placement:hover .name {
	min-width: 20%;
	max-width: 20%;
}
component[type='EntityList'] .list > .object.view-placement:hover .placement {
	min-width: 59%;
	max-width: 59%;
}

component[type='EntityList'] .list > .object.with-error .title {
	min-width: 12%;
	max-width: 12%;
}
component[type='EntityList'] .list > .object.with-error .name {
	min-width: 78%;
	max-width: 78%;
	text-align: center;
}
component[type='EntityList'] .list > .object .notice-icon {
	min-width: 3%;
	max-width: 3%;
}


@media screen and (max-width: 570px) {
	.property .list {
		max-width: 100%;
	}
	component[type='EntityList'] > .content {
		width: 90vw;
	}
	component[type='EntityList'] .list > .object .index {
		min-width: 5%;
		max-width: 5%;
	}
	component[type='EntityList'] .list > .object .type {
		min-width: 7%;
		max-width: 7%;
	}
	component[type='EntityList'] .list > .object .name {
		min-width: 53%;
		max-width: 53%;
	}
	component[type='EntityList'] .list > .object .placement {
		min-width: 20%;
		max-width: 20%;
	}
	component[type='EntityList'] .list > .object.view-placement:hover .placement {
		min-width: 53%;
		max-width: 53%;
	}
	component[type='EntityList'] .list > .object.view-placement:hover .name {
		min-width: 20%;
		max-width: 20%;
	}
	component[type='EntityList'] .list > .object .actions {
		flex-basis: 15%;
	}
}