.etw-tooltip-wrapper {
position: relative;
display: inline-block; vertical-align: middle; --etw-icon-size: 20px;
--etw-tooltip-max: 240px;
--etw-tooltip-bg: #333333;
--etw-tooltip-color: #ffffff;
--etw-tooltip-radius: 6px;
--etw-title-color: #ffffff;
--etw-title-size: 14px;
--etw-trigger-bg: #00b48f;
--etw-trigger-bg-hover: #009a7a;
--etw-trigger-radius: 999px;
--etw-trigger-padding: 6px;
} .etw-trigger {
border: 0;
background: var(--etw-trigger-bg);
padding: var(--etw-trigger-padding);
margin: 0;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--etw-trigger-radius);
transition: background .18s ease;
}
.etw-trigger:hover,
.etw-trigger:focus-visible {
background: var(--etw-trigger-bg-hover);
outline: none;
} .etw-icon,
.etw-fallback-icon {
width: var(--etw-icon-size);
height: var(--etw-icon-size);
} .etw-icon { display: block; } .etw-fallback-icon {
color: #ffffff;
font-weight: 700;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
} .screen-reader-text {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
} .etw-tooltip {
position: absolute;
display: inline-block; box-sizing: border-box; max-width: var(--etw-tooltip-max);
background: var(--etw-tooltip-bg);
color: var(--etw-tooltip-color);
border-radius: var(--etw-tooltip-radius);
padding: 10px 12px;
font-size: 13px;
line-height: 1.35;
white-space: normal; overflow-wrap: anywhere; word-break: break-word; z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translate3d(0,0,0);
transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
pointer-events: none;
} .etw-tooltip-title {
margin: 0 0 6px 0;
padding: 0;
display: block;
font-size: var(--etw-title-size);
line-height: 1.2;
font-weight: 600;
color: var(--etw-title-color);
} .etw-tooltip::after {
content: "";
position: absolute;
border: 6px solid transparent;
}  .etw-pos-top .etw-tooltip {
bottom: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
}
.etw-pos-top .etw-tooltip::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--etw-tooltip-bg);
} .etw-pos-bottom .etw-tooltip {
top: calc(100% + 8px);
left: 50%;
transform: translate(-50%, -4px);
}
.etw-pos-bottom .etw-tooltip::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--etw-tooltip-bg);
} .etw-pos-left .etw-tooltip {
right: calc(100% + 8px);
top: 50%;
transform: translate(4px, -50%);
}
.etw-pos-left .etw-tooltip::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: var(--etw-tooltip-bg);
} .etw-pos-right .etw-tooltip {
left: calc(100% + 8px);
top: 50%;
transform: translate(-4px, -50%);
}
.etw-pos-right .etw-tooltip::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: var(--etw-tooltip-bg);
} .etw-tooltip-wrapper.etw-pos-top:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-top:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-top.is-open .etw-tooltip {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
}
.etw-tooltip-wrapper.etw-pos-bottom:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-bottom:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-bottom.is-open .etw-tooltip {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
}
.etw-tooltip-wrapper.etw-pos-left:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-left:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-left.is-open .etw-tooltip {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(0, -50%);
}
.etw-tooltip-wrapper.etw-pos-right:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-right:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-right.is-open .etw-tooltip {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(0, -50%);
} @media (prefers-reduced-motion: reduce) {
.etw-tooltip,
.etw-trigger {
transition: none !important;
}
}
@media (max-width: 767px) { .etw-pos-top .etw-tooltip {
left: -400px!important; transform: translate(0, 4px); }
.etw-pos-top .etw-tooltip::after {
left: 20px; transform: none;
} .etw-pos-bottom .etw-tooltip {
left: -400px;
transform: translate(0, -4px);
}
.etw-pos-bottom .etw-tooltip::after {
left: 20px;
transform: none;
}
.etw-tooltip {
max-width: min(var(--etw-tooltip-max), calc(100vw - 24px));
min-width:250px;
}
}