.wdt-hotspotline-wrapper { position: relative; display: inline-block; width: 100%; height: 100%; }
.wdt-hotspotline-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wdt-hotspotline-wrapper::before { position: absolute; content: ""; width: 100%; height: 100%; 
	top: 0; left: 0; z-index: 0; background-color: rgba(var(--wdtSecondaryColorRgb), .5); pointer-events: none; }


.wdt-hotspotline {position: absolute;display: grid;align-items: center;}
.wdt-hotspotline .wdt-line-hotspot-wrapper { position: relative; }
.wdt-hotspotline .wdt-line-hotspot-wrapper .wdt-line-hotspot-tippy-line { position: relative; display: grid; }
.wdt-hotspotline .wdt-line-hotspot-wrapper .wdt-line-hotspot-tippy-line > span { position: relative; grid-area: 1/-1; }

.wdt-dot { width: 15px; height: 15px; border-radius: var(--wdtRadius_Full); background-color: currentColor; color: var(--wdtAccentTxtColor); 
    display:inline-block; position:relative; z-index:2; cursor: pointer; }
.wdt-dot::before, .wdt-dot::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
    border-radius: inherit; transform: scale(2); transition: var(--wdtAltTransition); opacity: .3; background-color: currentColor; }
.wdt-dot::after { animation: wdt-expand 2s infinite; }
.wdt-hotspotline.wdt-click-active .wdt-dot::after { animation: paused; }



.wdt-line { position:relative; transform: translate(50%, 50%); pointer-events: none; }

.wdt-hotspotline[data-orientation="up-right"] .wdt-line { transform: translate(-50%, 50%); }

.wdt-line::before, .wdt-line::after { content:""; position:absolute; background: var(--wdtAccentTxtColor); transition: var(--wdtAltTransition); z-index: 0; }


.wdt-line::before { height: 1px; width: 1px; transform: translate(-50%);}
.wdt-line::after { width: 1px; height: 1px; }

@keyframes wdt-expand {
        0% { -webkit-transform: scale(1); transform: scale(1); opacity: .7; }
        to { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; }
    }

/* Orientations */
.wdt-hotspotline[data-orientation="right-up"] .wdt-line::before { width: var(--straight-width); top: 0; left: 0; transform: translateY(-50%); }
.wdt-hotspotline[data-orientation="right-up"] .wdt-line::after { height: var(--return-width); top: calc(var(--return-width) * -1); left: calc(var(--straight-width) - 2px); }

.wdt-hotspotline[data-orientation="right-down"] .wdt-line::before { width: var(--straight-width); top: 0; left: 0; transform: translateY(-50%); }
.wdt-hotspotline[data-orientation="right-down"] .wdt-line::after { height: var(--return-width); top: 0; left: calc(var(--straight-width) - 2px); }

.wdt-hotspotline[data-orientation="left-up"] .wdt-line::before { 
    height: var(--straight-width); top: calc(-1 * var(--straight-width)); right: calc(var(--return-width)); left: calc(-1 * var(--return-width)); }
.wdt-hotspotline[data-orientation="left-up"] .wdt-line::after { width: var(--return-width); top: 0; left: calc(var(--return-width) * -1); transform: translateY(-50%); }

.wdt-hotspotline[data-orientation="left-down"] .wdt-line::before { height: var(--straight-width); top: 0; right: calc(-1 * var(--return-width)); left: calc(-1 * var(--return-width)); }
.wdt-hotspotline[data-orientation="left-down"] .wdt-line::after { width: var(--return-width); top: 0; left: calc(var(--return-width) * -1); transform: translateY(-50%); }

.wdt-hotspotline[data-orientation="down-left"] .wdt-line::before { height: var(--straight-width); top: 0; left: 0; }
.wdt-hotspotline[data-orientation="down-left"] .wdt-line::after { width: var(--return-width); top: calc(var(--straight-width) - 1px); left: calc(var(--return-width) * -1); }

.wdt-hotspotline[data-orientation="down-right"] .wdt-line::before { height: var(--straight-width); top: 0; left: 0; }
.wdt-hotspotline[data-orientation="down-right"] .wdt-line::after { width: var(--return-width); top: calc(var(--straight-width) - 1px); left: 0; }

.wdt-hotspotline[data-orientation="up-right"] .wdt-line::before { 
    height: var(--straight-width); top: calc(var(--straight-width) * -1); right: 0; transform: translate(50%); }
.wdt-hotspotline[data-orientation="up-right"] .wdt-line::after { 
    width: var(--return-width); bottom: calc(var(--straight-width) + 14px); right: calc(var(--return-width) * -1); transform: translateY(-50%); }

.wdt-hotspotline[data-orientation="up-left"] .wdt-line::before { height: var(--straight-width); top: calc(var(--straight-width) * -1); left: 0; }
.wdt-hotspotline[data-orientation="up-left"] .wdt-line::after { 
    width: var(--return-width); top: calc(var(--straight-width) * -1); left: calc(var(--return-width) * -1); }

/* Badge positioning at end of line */
.wdt-badge { position: absolute; background: rgba(var(--wdtAccentTxtColorRgb), .3); backdrop-filter: blur(var(--wdtGlassBg_Blur_2X)); 
	color: var(--wdtAccentTxtColor); font-size: var(--wdtFontSize_Ext); font-weight: var(--wdtFontWeight_Base); font-family: var(--wdtFontTypo_Base);
    padding: 10px 20px; line-height: var(--wdtLineHeight_H1); white-space: nowrap; z-index: 1; pointer-events: none;
    overflow: hidden; backface-visibility: hidden; will-change: transform; border: none; border: 1px solid rgba(var(--wdtAccentTxtColorRgb), .7); }

.wdt-hotspotline[data-orientation="right-up"] .wdt-badge { top: calc(calc(var(--return-width) - 6px) * -1); left: calc(var(--straight-width) + 5px); transform: translateX(-50%); }

.wdt-hotspotline[data-orientation="right-down"] .wdt-badge { top: calc(var(--return-width) - 6px); left: calc(var(--straight-width) + 5px); transform: translateX(-50%); }

.wdt-hotspotline[data-orientation="left-up"] .wdt-badge { top: calc(calc(var(--straight-width) + 6px) * -1); right: calc(var(--return-width) + 5px); transform: translateX(50%); }

.wdt-hotspotline[data-orientation="left-down"] .wdt-badge { top: calc(var(--straight-width) - 6px); right: calc(var(--return-width) + 5px); transform: translateX(50%); }

.wdt-hotspotline[data-orientation="up-right"] .wdt-badge { bottom: calc(var(--straight-width) - -6px); left: calc(var(--return-width) - 5px); transform: translateY(50%); }

.wdt-hotspotline[data-orientation="up-left"] .wdt-badge { bottom: calc(var(--straight-width) + 6px); right: var(--return-width); transform: translateY(50%); }

.wdt-hotspotline[data-orientation="down-right"] .wdt-badge { top: calc(var(--straight-width) + 6px); left: calc(var(--return-width) - 5px); transform: translateY(-50%); }

.wdt-hotspotline[data-orientation="down-left"] .wdt-badge { top: calc(var(--straight-width) + 6px); right: calc(var(--return-width) - 5px); transform: translateY(-50%); }

/* Animation effect */
.wdt-hotspotline[data-orientation="right-up"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out; }
.wdt-hotspotline[data-orientation="right-up"].wdt-click-active .wdt-line::after { animation: top-to-bottom .75s ease-in-out; }

.wdt-hotspotline[data-orientation="right-down"].wdt-click-active .wdt-line::before { animation: left-to-right .75s ease-in-out; }
.wdt-hotspotline[data-orientation="right-down"].wdt-click-active .wdt-line::after { animation: top-to-bottom .75s ease-in-out .15s; }

.wdt-hotspotline[data-orientation="left-up"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out .15s reverse; }
.wdt-hotspotline[data-orientation="left-up"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out reverse; }

.wdt-hotspotline[data-orientation="left-down"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out .15s; }
.wdt-hotspotline[data-orientation="left-down"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out reverse; }

.wdt-hotspotline[data-orientation="down-left"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out; }
.wdt-hotspotline[data-orientation="down-left"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out .15s reverse; }

.wdt-hotspotline[data-orientation="down-right"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out; }
.wdt-hotspotline[data-orientation="down-right"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out .15s; }

.wdt-hotspotline[data-orientation="up-right"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out reverse; }
.wdt-hotspotline[data-orientation="up-right"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out .15s; }

.wdt-hotspotline[data-orientation="up-left"].wdt-click-active .wdt-line::before { animation: top-to-bottom .75s ease-in-out reverse; }
.wdt-hotspotline[data-orientation="up-left"].wdt-click-active .wdt-line::after { animation: left-to-right .75s ease-in-out .15s reverse; }

/* Animation keyframes */
@keyframes top-to-bottom {
    0%{ clip-path: inset(0% 0% 0% 0%); }
    10%{ opacity: 0; }
    25%{ clip-path: inset(100% 0% 0% 0%); }
    50%{ opacity: 1; }
    75% { clip-path: inset(0% 0% 100% 0%); }
    100%{ clip-path: inset(0% 0% 0% 0%); }
}
@keyframes left-to-right {
    0%{ clip-path: inset(0% 0% 0% 0%); }
    10%{ opacity: 0; }
    25%{ clip-path: inset(0% 0% 0% 100%); }
    50%{ opacity: 1; }
    75% { clip-path: inset(0% 100% 0% 0%); }
    100%{ clip-path: inset(0% 0% 0% 0%); }
}


/* Responsive */
@media (max-width: 767px) {
    .wdt-hotspotline > div.wdt-line-hotspot-wrapper .wdt-line-hotspot-tippy-line .wdt-line,
    .wdt-hotspotline > div.wdt-line-hotspot-wrapper .wdt-line-hotspot-text { opacity: 0; visibility: hidden; transition: var(--wdtAltTransition); }
    .wdt-hotspotline.wdt-click-active > div.wdt-line-hotspot-wrapper .wdt-line-hotspot-tippy-line .wdt-line,
    .wdt-hotspotline.wdt-click-active > div.wdt-line-hotspot-wrapper .wdt-line-hotspot-text { opacity: 1; visibility: visible; }
}