.bread_crumbs {
    display: flex;
    justify-content: start;
    align-items: baseline;
	width: 100%;
	overflow: clip;
    font-size: .9rem;
    margin-bottom: 3.5vh;
}
.bread_crumbs > div {
	position: relative;
	padding: 2px 1.75rem 1px 5px;
    flex: 0 1 auto;
	overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	min-width: calc(2ch + 1.75rem + 5px);
	max-width: 100%;
	transition: flex-shrink .3s;
}
.bread_crumbs > div:after {
	content: '';
	position: absolute;
	inset: 0 .5rem 0 auto;
	width: .75rem; 
	background: url('/pic/xicons.svg#arrow-r') 50% no-repeat;
	transition: rotate .5s;
}

.bread_crumbs:has(:nth-child(3)) > div {
	max-width: calc(100% - 2ch - 1.75rem - 5px);
}
.bread_crumbs:has(:nth-child(4)) > div {
	max-width: calc(100% - 4ch - 3.5rem - 10px);
}
.bread_crumbs:has(:nth-child(n+5)) > div {
	max-width: calc(100% - 6ch - 5.25rem - 15px);
}
.bread_crumbs > div:nth-last-of-type(n+2) {
	flex-shrink: 100;
}
.bread_crumbs > div:hover {
	flex: 0 0 auto;
}
.bread_crumbs > div:hover > a {
	color: var(--color-dark-blue);
	text-decoration: underline;
}
.bread_crumbs > label {
	display: none;
	font-weight: 400;
}
@media (max-width: 450px) {
	.bread_crumbs {
		/* margin-bottom: 4vh; */
		font-size: 1rem;
	}
	.bread_crumbs > div {
		max-width: 100% !important;
	}
	.bread_crumbs:has(:nth-child(3)) > div {
		padding: 0 0 0 1.75rem;
	}
	.bread_crumbs:has(:nth-child(3)) > div:after {
		inset: 0 auto 0 .5rem;
		rotate: 180deg;
	}
	.bread_crumbs > div:nth-last-of-type(n+2) {
		display: none;
	}
	.bread_crumbs:has(:nth-child(3)) > label {
		display: block;
	}
	.bread_crumbs a {
		font-weight: 400;
		color: #555;
	}
	#show_crumbs:checked {		/* place holder */
		display: block;
		height: calc(1.15rem + 4vh);
		width: 0;
		appearance: none;
	}	
	#show_crumbs:checked + .bread_crumbs {
	    display: block;
		max-height: calc(96vh - var(--hh));
		overflow-y: auto;
		position: absolute;
		top: 2vh;
		z-index: 1;
		max-width: calc(100% - 40px);
		padding: 10px 15px;
		margin-bottom: 0;
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0 0 0.5px 0.5px rgba(24,39,75,.08), 0 6px 12px 0 rgba(24,39,75,.08);
	}
	#show_crumbs:checked + .bread_crumbs > div {
		padding: 5px 0 5px 1.25rem;
		display: block !important;
		white-space: wrap;
	}
	#show_crumbs:checked + .bread_crumbs > div:after {
		content: '';
		inset: .52rem auto auto 0;
		height: 1rem;
		rotate: 0deg;
	}
	#show_crumbs:checked + .bread_crumbs > label {
		position: fixed;
		inset: 0;
		color: #fff;
	}	
	#show_crumbs:checked + .bread_crumbs a {
		font-weight: 300;
		color: #000;
	}
}