/* hematocci
   ========================================================================== */

#hematocci { font-feature-settings: 'palt'; border: 4px solid #0070c4; border-radius: 10px; box-sizing: border-box; }

#hematocci > .inner { padding: 15px; }

#hematocci h4 { color: #fff; font-size: 1.8rem; text-align: center; background-color: #0070c4; padding: 11px 0 15px; }

.hmtch-msg {
position: relative;
display: inline-block;
width: 100%;
margin-top: 20px;
padding: 15px;
border: 4px solid #454544;
border-radius: 9999px;
background-color: #fff;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
color: #454544;
box-sizing: border-box;
}
.hmtch-msg::before {
content: "";
position: absolute;
top: 0;
left: 50%;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #454544;
translate: -50% -100%;
}
.hmtch-msg::after {
content: "";
position: absolute;
top: 0;
left: 50%;
border-style: solid;
border-width: 0 5.5px 11.1px 5.5px;
border-color: transparent transparent #fff;
translate: -50% -100%;
}

#hematocci details {
	&::details-content {
		content-visibility: unset;
		display: block grid;
		@media (prefers-reduced-motion: no-preference) { transition-duration: 300ms; transition-property: grid-template-rows; }
	}
	&:not([open])::details-content { grid-template-rows: 0fr; }
	&[open]::details-content { grid-template-rows: 1fr; }
}

#hematocci summary {
display: grid;
grid-template-columns: 1fr 20px;
gap: 6px;
align-items: center;
font-size: 1.6rem;
font-weight: bold;
cursor: pointer;
	&::-webkit-details-marker {
		display: none;
	}
}

.icon {
display: block;
position: relative;
width: 20px;
transform-origin: center 43%;
transition: transform 0.4s;
	&::before, &::after {
		content: "";
		position: absolute;
		display: block;
		width: 13px;
		height: 3px;
		background-color: #0070c4;
	}
	&::before { left: 0; transform: rotate(45deg); }
	&::after { right: 0; transform: rotate(-45deg); }
}
details[open] .icon { transform: rotate(180deg); }

#hematocci details .inner { overflow: hidden; }

#hematocci details p { font-size: 1.3rem; line-height: 1.2; border-top: 1px solid #0070c4; padding-top: 10px; margin-top: 10px; }

#hematocci img { display: block; max-width: none; width: 300px; height: auto; margin: 0 auto; opacity: .25; }
#hematocci img.animate__animated { opacity: 1; }