/* * { */
/* 	border: 1px solid red; */
/* } */

.hellios-help-section h2 {
	font-size: 33px;
	color: var(--hellios-pink) !important;
}

@media(min-width: 992px) {
	.hellios-help-section .toc li {
		font-size: 12pt
	}

	.hellios-help-section h2 {
		font-size: 30pt;
		color: var(--hellios-pink) !important;
	}

	.hellios-help-section h3 {
		font-size: 32px;
	}

	.hellios-help-section h4 {
		font-size: 28pt;
	}
}

.hellios-help-section img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.hellios-help-section .toc {
	position: sticky;
  top: 0;
  right: 0;
	margin-bottom: 1rem;
	max-height: 100vh;
	overflow-y: auto;
	scroll-behavior: smooth;
}

.hellios-help-section .toc a {
	color: #444;
}

.hellios-help-section .toc ul {
	list-style: none;
}

.hellios-help-section .toc ul.outer-ul {
	padding-left: 0px;
}

.hellios-help-section .toc ul {
	padding-left: 16px;
}

.hellios-help-section .toc ul svg {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

.hellios-help-section .toc ul .toc-visible + svg {
	fill: var(--hellios-pink);
}

.hellios-help-section .toc .toc-visible {
	color: var(--hellios-pink);
}

main.body-container-wrapper:has(.hellios-help-section .toc) {
	overflow: visible !important;
}

/* .hellios-help-section p > img:not(:only-of-type) { */
/* 	margin-right: 16px; */
/* } */

/* p:only-child > img { */
/*   /* Your styles for <img /> inside <p> with only <img> tags */ */
/* } */
/**/
/* /* Select <p> elements containing <img> tags along with other content */ */
/* p:not(:empty) > img { */
/*   /* Your styles for <img /> inside <p> with additional content */ */
/* } */