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

#hematocci { font-feature-settings: 'palt'; border: 4px solid #0070c4; border-radius: 30px; margin: 0 auto 20px; box-sizing: border-box; overflow: hidden; }
#hematocci::after { content: ''; display: block; clear: both; }
@media (min-width: 320px) and (max-width: 736px) {
	#hematocci { width: 300px; }
}
@media (min-width: 737px) {
	#hematocci { width: 360px; }
}

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

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

#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;
color: #0070c4;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
	&::-webkit-details-marker {
		display: none;
	}
}
#hematocci summary .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); }
}
#hematocci details[open] summary .icon { transform: rotate(180deg); }

#hematocci details.boxed { border-radius: 15px; }
#hematocci details .inner { overflow: hidden; }

#hematocci details .inner > *:first-child { border-top: 1px solid #0070c4; margin-top: 15px; }
#hematocci details p { font-size: 1.4rem; line-height: 1.6; font-weight: 400; padding-top: 10px; }
#hematocci details p a { font-weight: 700; }
#hematocci #hmtch-stats p { font-size: 1.3rem; line-height: 1.2; border-top: 1px solid #0070c4; margin-top: 15px; }
#hematocci #hmtch-stats p .sub { font-size: 1.2rem; font-weight: 400 !important; }
#hematocci details h5 { font-size: 1.5rem; font-weight: 700; border-top: 1px solid #0070c4; padding-top: 15px; margin-top: 15px; }
#hematocci details .strong { margin-top: 20px; }
#hematocci details .strong p { font-weight: 700; }

#hematocci .hmtch { display: flex; justify-content: center; flex-wrap: wrap; }

#hematocci img { height: auto; cursor: pointer; }
@media (min-width: 320px) and (max-width: 736px) {
	#hematocci .hmtch figure,
	#hematocci #hmtch-img { width: 200px; }
}
@media (min-width: 737px) {
	#hematocci .hmtch figure,
	#hematocci #hmtch-img { width: 250px; }
}

#hematocci details + details { margin-top: 10px; }
#hematocci .hmtch + details { margin-top: 20px; }
#hematocci .hmtch-hx { display: flex; justify-content: flex-start; flex-wrap: wrap; }
#hematocci .hmtch-hx figure { width: calc(100% / 3); }
#hematocci .hmtch-hx-img { width: 100%; height: auto; }

#hematocci .hmtch-msg {
display: inline-flex;
border: 4px solid #454544;
border-radius: 9999px;
background-color: #ffffff;
color: #454544;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
padding: 12px 20px 15px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
#hematocci .hmtch-msg::before {
content: '';
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent #454544;
position: absolute;
top: 0;
left: 50%;
translate: -50% -100%;
}
#hematocci .hmtch-msg::after {
content: '';
border-style: solid;
border-width: 0 10px 17px 10px;
border-color: transparent transparent #ffffff;
position: absolute;
top: 0;
left: 50%;
translate: -50% -100%;
}
#hematocci .hmtch-msg .inner { display: inline-block; }

#hematocci .tooltip { display: inline-block; position: relative; }
#hematocci .tooltip > figcaption {
display: flex;
justify-content: center;
color: #0070c4;
font-weight: 500;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #0070c4;
background-color: #fff;
padding: 4px;
transition: opacity .3s;
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#hematocci .tooltip:hover > figcaption { visibility: visible; opacity: 1; }
@media (min-width: 320px) and (max-width: 736px) {
	#hematocci .tooltip > figcaption { font-size: 1rem; }
}
@media (min-width: 737px) {
	#hematocci .tooltip > figcaption { font-size: 1.2rem; }
}
#hematocci .tooltip > figcaption sup { bottom: .1em; }

#hematocci.error { border-color: #cc0000; }
#hematocci.error h4 { background-color: #cc0000; }
#hematocci.error p { color: #cc0000; font-size: 1.6rem; font-weight: 400; text-align: center; line-height: 1.4; padding: 20px; }

#hematocci .animate__animated.animate__repeat-10 {
-webkit-animation-iteration-count: 10;
animation-iteration-count: 10;
-webkit-animation-iteration-count: calc(var(--animate-repeat)*10);
animation-iteration-count: calc(var(--animate-repeat)*10);
}
#hematocci .animate__animated.animate__repeat-20 {
-webkit-animation-iteration-count: 20;
animation-iteration-count: 20;
-webkit-animation-iteration-count: calc(var(--animate-repeat)*20);
animation-iteration-count: calc(var(--animate-repeat)*20);
}