.accordion-button-noarrow::after {
	background-image: none !important;
}

.card-image-container {
	position: relative;
}

.card-image-title {
	background-color: var(--bs-border-color-translucent);
	border-radius: 8px;
	position: absolute;
	left: 15px;
	bottom: 10px;
	text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
	padding: 0 5px 0 5px;
}

.card-body-border {
	/* adds the missing border line between image and border */
	border-top: 1px solid;
	border-color: var(--bs-border-color-translucent);
}

.carousel-image-title {
	background-color: var(--bs-border-color-translucent);
	border-radius: 8px;
	text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
	padding: 0 5px 0 5px;
}

.janome-editable {
	/* use inverted text/background color combination */
	color: var(--bs-body-bg);
	background-color: var(--bs-link-color);
	border-radius: 8px;
	line-height: 1;
	font-size: 12pt;
	opacity: 0.5 !important;
	position: absolute;
	cursor: pointer;
	margin: 0;
	padding: 2px;
	width: auto;
	transform: translateY(-0.8em); /* rotate(-10deg); */
}

.janome-editable:after {
	content: "";
	position: absolute;
	z-index: -1;  /* to be below the parent element */
	top: -webkit-calc(100% - 6px); /* may require prefix for old browser support */
	top: calc(100% - 6px); /* i.e. half the height */
	left: 10px;
	height: 10px;
	width: 10px;
	background-color: var(--bs-link-color);
	transform: rotate(45deg);
}

.janome-editable-inject {
	color: var(--bs-success-bg-subtle);
}

.janome-editable-marked {
	color: red !important;
	text-shadow: -1px -1px white;
}

.janome-editable-close {
	/* the editable-frontend panel's close button */
	border-radius: 8px;
	position: absolute;
	top: -10px;
	right: -10px;
	cursor: pointer;
	background-color: var(--bs-link-color);
}

.toggleSpan {
	cursor: pointer;
}

.toggleSpan.hide {
	display: none;
}

/* Style the caret/arrow */
.treeview-caret {
	cursor: pointer;
	user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.treeview-caret::before {
	content: "\27A4";
	color: black;
	display: inline-block;
	margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.treeview-caret-down::before {
	transform: rotate(90deg);
}

/* Hide the nested list */
.treeview-nested {
	display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.treeview-active {
	display: block;
}

/* Kudos go to https://iamkate.com/code/tree-views/ */

.tree {
	--spacing: 1.5rem;
	--radius: 10px;
	padding: 0;
}

.tree li {
	display: block;
	position: relative;
	padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
	cursor: pointer;
}

.tree ul {
	margin-left: calc(var(--radius) - var(--spacing));
	padding-left: 0;
}

.tree ul li {
	border-left: 2px solid #ddd;
}

.tree ul li:last-child {
	border-color: transparent;
}

.tree ul li::before {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--spacing) / -2);
	left: -2px;
	width: calc(var(--spacing) + 2px);
	height: calc(var(--spacing) + 1px);
	border: solid #ddd;
	border-width: 0 0 2px 2px;
}

.tree summary {
	display: block;
	cursor: pointer;
}

.tree summary::marker, .tree summary::-webkit-details-marker {
	display: none;
}

.tree summary:focus {
	outline: none;
}

.tree summary:focus-visible {
	outline: 1px dotted #000;
}

.tree li::after, .tree summary::before {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--spacing) / 2 - var(--radius));
	left: calc(var(--spacing) - var(--radius) - 1px);
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: 50%;
	background: #ddd;
}

.tree summary::before {
	z-index: 1;
	background: #aaa url('/classes/bootstrap/images/expand-collapse.svg') 0 0;
}

.tree details[open] > summary::before {
	background-position: calc(-2 * var(--radius)) 0;
}

.offcanvas-header {
	color: var(--bs-tertiary-color);
	background-color: var(--bs-primary-bg-subtle);
}