.entity {
	position: absolute;
	margin: 3px;
}

.scribble {
	font-family: "Redacted Script", cursive;
	font-weight: 700;
	font-style: normal;
	overflow: hidden;
}

/* ==================================================== */
/* Entities requiring a border share these rules */

ul.dropdown,
.entity-vs,
.entity-hs,
.entity-cmb,
.entity-tbl,
.entity-rec {
	border-style: solid;
	border-width: 8px;
	border-radius: 2px;
	border-image-outset: 3px;
	border-image-repeat: round;
	border-image-slice: 12 12 12 12;
	border-image-width: 10px;
}

.entity-cmb {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
	.entity-cmb .caret {
		background-image: url('../assets/dropdown-arrow-svgrepo-com.svg');
		background-size: contain;
		background-repeat: no-repeat;
		min-width: 1.5rem;
		min-height: 1.5rem;
		max-width: 1.5rem;
		max-height: 1.5rem;
		margin-top: 2px;
	}
	.entity-cmb ul.dropdown {
		position: absolute; 
		top: calc( 100% + 15px );
		left: -8px;
		right: -8px;
		margin: 0;
		background-color: #fff;
		padding-inline-start: 0;
		list-style-type: none;
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

.entity-rec {
	display: flex;
	flex-direction: column;
}

/* ==================================================== */
/* Scrollbars */

.entity-hs,
.entity-vs {
	background-color: #fff;
}
	.entity-hs div,
	.entity-vs div {
		position: absolute;
		width: 1rem;
		height: 1rem;
		left: -8px;
	}
	.entity-hs div.left {
		background-image: url('../assets/dropdown-arrow-svgrepo-com.svg');
		background-size: contain;
		top: -8px;
		rotate: 90deg
	}
	.entity-hs div.right {
		background-image: url('../assets/dropdown-arrow-svgrepo-com.svg');
		background-size: contain;
		top: -8px;
		right: -8px;
		left: unset;
		rotate: 270deg
	}
	.entity-vs div.up {
		background-image: url('../assets/dropdown-arrow-svgrepo-com.svg');
		background-size: contain;
		top: -8px;
		rotate: 180deg
	}
	.entity-vs div.down {
		background-image: url('../assets/dropdown-arrow-svgrepo-com.svg');
		background-size: contain;
		bottom: -8px;
	}
	.entity-hs div.bar {
		width: 50%;
		height: 0.5rem;
		top: -0.25rem;
		left: 0.5rem;
		background-color: #999;
		border-radius: 1rem;
	}
	.entity-vs div.bar {
		top: 0.5rem;
		width: 0.5rem;
		height: 50%;
		left: -0.25rem;
		background-color: #999;
		border-radius: 1rem;
	}

/* ==================================================== */
/* Tab bar, slider, and horizontal rule all have lines! */

.entity-tab,
.entity-tab ul li.selected,
.entity-sld,
.entity-hr {
	border-style: solid;
	border-width: 0px 0px 5px 0px;
	border-image-repeat: round;
	border-image-slice: 0 6 6 6;
	border-image-width: 0 0 5px 0;
	border-image-outset: 0 20px 0 20px;
}

.entity-vr {
	border-style: solid;
	border-width: 0px 5px 0px 0px;
	border-image-repeat: round;
	border-image-slice: 6 6 6 0;
	border-image-width: 0 5px 0 0;
	border-image-outset: 0;
}

/* ==================================================== */
/* Horizontal slider */
.entity-sld .slider {
	background-image: url('../assets/solid-circle.svg');
	background-size: contain;
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: -0.35rem;
}

/* ==================================================== */
/* Tabs bar */

.entity-tab ul {
	list-style-type: none;
	padding-inline-start: 0;
	margin: 0;
	margin-left: 20px;
	display: flex;
	flex-direction: row;
	text-transform: uppercase;
	gap: 2rem;
}
	.entity-tab ul li {
		color: #36c;
		padding: 0.5rem 0.25rem;
	}
	.entity-tab ul li.selected {
		outline: none;
		color: #999;
		border-image-outset: 0 20px 3px 20px;
	}

/* ==================================================== */
/* Breadcrumbs bar */

.entity-bcb {
	text-transform: uppercase;
	font-size: 0.75rem;
	display: flex;
	gap: 0.5rem;
}
	.entity-bcb span {
		color: #36c;
		width: max-content;
	}
	.entity-bcb span:last-child,
	.entity-bcb span.divider {
		color: #999;
	}

/* ==================================================== */
/* Radio buttons and checkboxes */

.entity-rad,
.entity-chb {
	margin: -3px;
}
.entity-rad.selected,
.entity-chb.selected {
	outline-offset: 2px;
}
	.entity-rad div.entity-ic,
	.entity-chb div.entity-ic {
		width: 1.5rem;
		height: 1.5rem;
		background-size: contain;
	}
	.entity-chb div.icon-chbx {
		background-color: #333;
	}
	.entity-chb div.icon-ckbx {
		background-color: #36c;
	}
	.entity-rad div.icon-rado {
		background-color: #333;
	}
	.entity-rad div.icon-crad {
		background-color: #36c;
	}
	.entity-rad ul,
	.entity-chb ul {
		list-style-type: none;
		padding-inline-start: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
	}
	.entity-rad ul li,
	.entity-chb ul li {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		width: max-content;
	}

/* ==================================================== */
/* Icons */

#-canvas .entity-ic {
	mask-size: contain;
	mask-repeat: no-repeat;
	aspect-ratio: 1;
}

/* ==================================================== */
/* Labels and text paragraphs */

.entity-rec, .entity-lbl {
	& p {
		margin-block-start: 0;
		margin: 0 0 0.03rem 0;

		&.gap {
			margin: 1rem 0 0 0;
		}
	}
}

.entity-lbl {
	width: max-content;
}

/* ==================================================== */
/* Tables */

.entity-tbl {
	border-width: 0;
}

.entity-tbl table {
	width: 100%;
	border-spacing: 0;
}
	.entity-tbl table tr {
		height: 1.5rem;
	}
	.entity-tbl table tr:first-child {
		background-color: #eee;
	}
	.entity-tbl table tr:first-child td {
		font-size: 9pt;
		text-transform: uppercase;
		color: #888;
	}
	.entity-tbl table td {
		padding: 0.5rem 0.75rem
	}
	.entity-tbl table td.centred {
		text-align: center;
	}
	.entity-tbl table td.hyperlink {
		color: #36c;
		text-decoration: underline;
	}
	.entity-tbl table td.tbl-icon {
		mask-size: 1.5rem;
		mask-repeat: no-repeat;
		mask-position: center;
	}
	.entity-tbl table tr:first-child td.sorting {
		background-image: url('../assets/arrow-down-up-svgrepo-com.svg');
		background-position: 0.5rem;
		background-size: 1rem;
		background-repeat: no-repeat;
		padding-left: 1.6rem;
		color: #000;
		opacity: 0.5;
	}
	.entity-tbl table td.unticked {
		background-color: #333;
		mask-image: url('../assets/checkbox-svgrepo-com.svg');
	}
	.entity-tbl table td.ticked {
		background-color: #36c;
		mask-image: url('../assets/checked-checkbox-svgrepo-com.svg');
	}
	.entity-tbl table td.ellipsis {
		mask-size: 15px;
		background-color: #36c;
		mask-image: url('../assets/more-svgrepo-com.svg');
	}
	.entity-tbl table td.active {
		mask-size: 11px;
		background-color: #93C572;
		mask-image: url('../assets/solid-circle.svg');
	}
	.entity-tbl table td.inactive {
		mask-size: 11px;
		background-color: #666;
		mask-image: url('../assets/circle.svg');
	}

/* ==================================================== */
/* Street map */

.entity-map {
	background-color: #fff;
	background-image: url('../assets/street-map.svg');
	background-size: cover;
}