/** Bubble style Breadcrumbs **/
.breadcrumbs { margin:0.5em 0 0 0; align-content:center; }
.breadcrumbs li { overflow:hidden; display:flex; align-items:center; margin-left:-0.5em; }

.breadcrumbs li:first-of-type {
	margin-left:0;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

.breadcrumbs li:last-of-type {
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

.breadcrumbs li:last-of-type>* {
	background:#dcdcdc;
	color:var(--text-color);
}

.breadcrumbs li::before {
	display:inline-block;
	content:''; padding:0;
	width:0; height:0;
	border-top:0.75em solid var(--default-primary-color);
	border-bottom:0.75em solid var(--default-primary-color);
	border-left:1em solid transparent;
}

.breadcrumbs li:first-of-type::before {
	display:none;
	border:none transparent 0px;
}

.breadcrumbs li:last-of-type::before { border-top-color:#dcdcdc; border-bottom-color:#dcdcdc; }

.breadcrumbs li::after {
	display:inline-block;
	content:''; padding:0;
	width:0; height:0;
	border-top:0.75em solid transparent;
	border-bottom:0.75em solid transparent;
	border-left:1em solid var(--default-primary-color);
}

.breadcrumbs li:last-of-type::after {
	display:none;
	border:none transparent 0px;
}

.breadcrumbs li > * {
	line-height:1em;
	padding:0.25em 0.4em;
	background:var(--default-primary-color);
	color:var(--text-invert-color);
}
.breadcrumbs li:last-of-type a:link, .breadcrumbs li:last-of-type a:hover, .breadcrumbs li:last-of-type a:visited { background:#dcdcdc; }


/** help pop up/pop over ballooon **/
.help-popup { position:relative; margin:0 1em; }
.help-popup .balloon { 
	display:none;
	position:absolute;
	top:100%; left:-10.25em;
	margin-top:1em;
	width:20em; padding:0.5em 0.5em;
	border-radius:0.5em;
	z-index:2;
	background:white;
}
.help-popup .balloon::before {
	content:""; width:0; height:0;
	position:absolute; top:-1em; left:10em;
	border-bottom:solid white 1em;
	border-left:solid transparent 1em;
	border-right:solid transparent 1em;
}

.help-popup input[type=checkbox]:checked + .scrim { z-index:1; display:block; opacity:0.5; }
.help-popup input[type=checkbox]:checked + .scrim + .balloon {
	display:block;
}

.help-popup .balloon .button-group { margin:0 0.25em 0.5em 0; }

.help-toggle { color:var(--dark-primary-color); }

.dialog header { display:flex; flex-direction:row; align-items:center; }
.dialog header h1 { margin-top:0; }

/* Site customizations */
.form-field p { grid-column:2/3; text-align-left; font-size:smaller; }
.button-group.full-width { margin:1em; padding:1em; border-top:solid thin var(--divider-color); }

/** Embedded PDF attachments **/
object { max-width:100%; width:75vw; height:75vh; }

/** embeded map */
.map { width:100%; }
#map { width:100%; height:calc(100vh - 7.77083125em); }	/* footer := 1.77083125em + article margin := 1em * 2 + header padding := 1em * 2 + header text := 2em */
#map-preview { width:100%; min-width:50vw; height:50vh; }

/** attachment list */
.attachment-list {
	display:flex; flex-wrap:wrap;
	border:solid thin black; list-style-type:none;
	padding:0;
}
.attachment-list li { width:5em; height:5em; margin:0.25em 0.5em; }
.attachment-list li img, .attachment-list li form { width:100%; height:100%; object-fit:contain; }
.attachment-list li form { display:flex; flex-direction:column; justify-content:center; }

/** Wait spinner **/
.spinner {
	display:inline-block;
	position:relative;
	width:64px;
	height:64px;
}
.spinner div {
	transform-origin:32px 32px;
	animation:spinner 1.2s linear infinite;
}
.spinner div:after {
	content:" ";
	display:block;
	position:absolute;
	top:3px;
	left:29px;
	width:5px;
	height:14px;
	border-radius:20%;
	background:black;
}
.spinner div:nth-child(1) {
	transform:rotate(0deg);
	animation-delay: -1.1s;
}
.spinner div:nth-child(2) {
	transform:rotate(30deg);
	animation-delay: -1s;
}
.spinner div:nth-child(3) {
	transform:rotate(60deg);
	animation-delay:-0.9s;
}
.spinner div:nth-child(4) {
	transform:rotate(90deg);
	animation-delay:-0.8s;
}
.spinner div:nth-child(5) {
	transform:rotate(120deg);
	animation-delay:-0.7s;
}
.spinner div:nth-child(6) {
	transform:rotate(150deg);
	animation-delay:-0.6s;
}
.spinner div:nth-child(7) {
	transform:rotate(180deg);
	animation-delay:-0.5s;
}
.spinner div:nth-child(8) {
	transform:rotate(210deg);
	animation-delay:-0.4s;
}
.spinner div:nth-child(9) {
	transform:rotate(240deg);
	animation-delay:-0.3s;
}
.spinner div:nth-child(10) {
	transform:rotate(270deg);
	animation-delay:-0.2s;
}
.spinner div:nth-child(11) {
	transform:rotate(300deg);
	animation-delay:-0.1s;
}
.spinner div:nth-child(12) {
	transform:rotate(330deg);
	animation-delay:0s;
}
@keyframes spinner {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

/** make Cemetery site a bit more attractive */
body>header { padding:0.5em 1em; z-index:1; text-shadow:0 0 2px var(--shadow-color); }

@media(min-width:1600px) {	/* 1600 is an arbitrary value picked by Material Design */
	body>div>aside>nav header {
		background:initial;
		color:initial;
	}
}

article header { margin-bottom:0.4em; }
article header h2, article header h3 { margin:0; }

td ul { margin-bottom:0; }
td ul li { padding:0.1em; }

.bubble-list { display:flex; flex-wrap:wrap; }
.bubble-list > * { background:#CCC; border-radius:0.2em; margin:0.2em; padding:0.2em; }

.responsive-row {
	display:flex; flex-direction:column;
	justify-content:center;
}

.responsive-row > * {
	margin:1em;
}

@media(min-width:640px) {
	.responsive-row {
		flex-direction:row;
		justify-content:space-around;
		align-content:start;
	}
	
	.equal-cols > * {
		max-width:50%;
	}
}

/** make Cemetery site a bit less attractive */
.uppercase { text-transform:uppercase; }
article header .button-group { flex-grow:0; }