.mytoc {
	border: 1px solid #EDEDED;
	border-radius: 8px;
	padding: 24px;
	margin: 16px 0 48px 0;
}

.mytoc .mytoc__header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.mytoc .mytoc__title {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.45em;
	color: #447B3A;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.mytoc .mytoc__icon{
	display:inline-flex;
	align-items:center;
}

.mytoc .mytoc__icon svg{
	display:block;
}

.mytoc .mytoc__list {
	margin: 0;
	padding-left: 18px;
	color: #121111;
	font-weight: 600;
}

.mytoc__list .mytoc__item:hover {
	color: #447B3A;
}

.mytoc__list .mytoc__item:hover:has(.mytoc__item:hover){
	color: #121111;
}

.mytoc .mytoc__body > .mytoc__list {
	list-style-type: decimal-leading-zero;
	padding-left: 30px;
}

.mytoc .mytoc__item {
	margin: 6px 0;
}

.mytoc .mytoc__link {
	color: #121111;
	text-decoration: none;
}

.mytoc__link:hover {
	text-decoration: underline;
}

.mytoc__editorHint{
	opacity: .7;
	font-size: 12px;
	margin-bottom: 8px;
}

/* a11y helper */
.mytoc .screen-reader-text{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.mytoc .mytoc__body {
	margin-top: 10px;
}

/* Icon-only toggle (mobile only) */
.mytoc .mytoc__toggle{
	display:none; /* desktop hidden */	
	color: #396431;
    background: #F5FAF3;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px #0A0D120D;
	line-height: 0;
	border: none;
}

.mytoc .mytoc__toggle:focus{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mytoc .mytoc__toggleIcon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.mytoc .mytoc__toggleIcon svg{
	display:block;
}

/* collapsed: show down (expand), hide up (collapse) */
.mytoc--collapsible.is-collapsed .mytoc__toggleIcon--expand{ display:inline-flex; }
.mytoc--collapsible.is-collapsed .mytoc__toggleIcon--collapse{ display:none; }

/* expanded: show up (collapse), hide down (expand) */
.mytoc--collapsible:not(.is-collapsed) .mytoc__toggleIcon--expand{ display:none; }
.mytoc--collapsible:not(.is-collapsed) .mytoc__toggleIcon--collapse{ display:inline-flex; }

@media (max-width: 767px){
	.mytoc--collapsible .mytoc__toggle{
		display:inline-flex;
		align-items:center;
	}
	.mytoc--collapsible.is-collapsed .mytoc__body{
		display:none;
	}
}