.dd-bse-map .dd-bse-content {
    display: flex;
    flex-direction: column;
}

.dd-statemachine {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity var(--dd-animation-time) var(--dd-animation-easing);
    width: -webkit-fill-available;
    width: 100%;
}

.dd-bolig-shop .dd-statemachine {
    margin-bottom: var(--dd-bottom-controlbar-height);
}

/* CONTEXT VISIBILITY (classpicker: only-statemachine / only-in-shop) */
.dd-context-standalone .only-in-shop {
    display: none;
}

.dd-context-shop .only-statemachine {
    display: none;
}

/* STANDALONE MODE */
.dd-statemachine-standalone {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--dd-max-width);
    margin: auto;
    overflow: hidden;
    aspect-ratio: var(--dd-aspect);
    font-family: var(--dd-font-default, inherit);
}

@media screen and (max-width: 767.98px) {
    .dd-statemachine-standalone {
        aspect-ratio: var(--dd-aspect-mobile, var(--dd-aspect));
    }
}

.dd-statemachine-standalone .dd-statemachine {
    margin-bottom: var(--dd-bottom-controlbar-height);
}

.dd-statemachine-standalone .dd-statemachine-controlbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--dd-bottom-controlbar-height);
    z-index: 1;
    justify-content: center;
    width: 100%;
}

.dd-smc-ui-bottom {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--dd-gap);
    bottom: 0px;
    left: 0;
    right: 0;
    padding: var(--dd-gap) 0;
    pointer-events: none;
    z-index: 1;
}

.dd-smc-ui-bottom > * {
    pointer-events: auto;
}

/* .dd-statemachine.dd-ready{
    opacity: 1;
} */

.dd-statemachine-content {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
    width: 100%;
    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* TEST */
/* .dd-statemachine-content {
    border: 5px dashed red;
}
.dd-statemachine-content > * {
    opacity: 0.5;
}
.dd-movable.dd-grabbable::after {
    content: "";
    width: 100px;
    height: 100px;
    border: 5px dashed green;
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */
/* END: TEST */



.dd-smc-ui-overlay,
.dd-smc-ui-overlay-top {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* ui-top is moved before the canvas in the DOM (for tab order); z-index keeps it painting on top, but below the sunpath movable (z-index:2) */
.dd-smc-ui-overlay-top {
    z-index: 1;
}

.dd-smc-ui-overlay button,
.dd-smc-ui-overlay-top button {
    pointer-events: auto;
}


/* TEMP - DEBUGGING */
/* .dd-bse-map {
    background: red!important;
}
.dd-bse-map > .dd-bse-content {
    background: rgb(255, 217, 0)!important;
}
.dd-statemachine {
    background: rgb(0, 255, 13)!important;
}
.dd-statemachine-content {
    background: rgb(0, 162, 255)!important;
    outline: 2px solid blue;
    outline-offset: -150px;
}
.dd-movable {
    opacity: 0.5;
    background: rgb(38, 0, 255)!important;
    outline: 2px solid red;
    outline-offset: -50px;
}
.dd-smc-image-layer{ 
    opacity: 0.5;
    background: rgb(255, 0, 191)!important;
} */


/* END: TEMP - DEBUGGING */



/* COMPASS */
.dd-statemachine .dd-compass-background {
    transition: all 0.6s ease-in-out;
}



/* IMAGE LAYERS */
.dd-movable {
    /* v1 */
    /* height: 100%;
    position: absolute;
    width: max-content; */

    /* v2 */
    /* flex-shrink: 0;
    object-fit: cover;
    min-height: -webkit-fill-available;
    height: 100%; */

    /* v3 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    /* width: max-content; */
    /* height: 100%; */
}

.dd-fit-vertically {
    height: 100%;
    width: max-content;
}

.dd-fit-horizontally {
    height: max-content;
    width: 100%;
}

.dd-hide-children > * {
    /* opacity: 0.5; */
    visibility: hidden;
}

.dd-loading .dd-movable {
    opacity: 0;
}
.dd-smc-image-layer {
    height: 100%;
}
.dd-smc-image-layer img {
    pointer-events: none;
    height: 100% !important;
}

/* V2: 3-layer transition model */
.dd-smc-image-layer-v2 {
    position: relative;
}
.dd-smc-image-layer-v2 .dd-layer-old-state-wrapper {
    pointer-events: none;
}
.dd-smc-image-layer-v2 .dd-layer-old-state-wrapper .dd-loadingscreen {
    background: transparent;
    animation: dd-fade-in 1s ease;
    z-index: unset;
}
@keyframes dd-fade-in {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
.dd-smc-image-layer-v2 .dd-layer-old-state {
    width: 100%;
    height: 100%;
}
.dd-smc-image-layer-v2 .dd-layer-state {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dd-smc-image-layer-v2 .dd-layer-state.dd-visible {
    opacity: 1;
}
.dd-smc-image-layer-v2 .dd-layer-state.dd-no-transition {
    transition: none;
}
.dd-smc-image-layer-v2 .dd-layer-transition {
    display: none;
}
.dd-smc-image-layer-v2 .dd-layer-transition.dd-active {
    display: block;
}
.dd-smc-image-layer-v2 .dd-layer-transition canvas {
    width: 100%;
    height: 100%;
}

 

/*  UI - CONTROLBAR (TOP) */
.dd-smc-ui-top {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: start;
    margin: var(--dd-margin-narrow);

    margin-right: calc(var(--dd-button-height-small) + var(--dd-margin-narrow));
    flex-wrap: wrap;
    gap: 10px;
}

.dd-smc-ui-top .dd-compass { 
    position: absolute;
    right: calc(-1* var(--dd-button-height-small));
}

.dd-button-up-one-level {
    transition: all var(--dd-animation-time) var(--dd-animation-easing);
}

.dd-button-up-one-level.dd-active {
    /* margin-right: var(--dd-gap); */
    opacity: 1;
    max-height: var(--dd-button-height-small);
    /* max-width: var(--dd-button-height-small); */
    display: flex;
}

.dd-button-up-one-level .dd-icon-wrapper{
    transition: all var(--dd-animation-time) var(--dd-animation-easing);
}

.dd-button-up-one-level:not(.dd-active) {
    margin-right: -10px; /* Cancel the gap */
    opacity: 0;
    pointer-events: none;
    max-height:0!important;
    max-width:0!important;
    padding:0!important;
}

.dd-button-up-one-level:not(.dd-active) .dd-icon-wrapper {
    opacity: 0;
    scale:0;
}

/* LEVEL NAME */
.dd-smc-level-name {
    display: flex;
    align-items: center;
    font-weight: bold;
    white-space: nowrap;
    padding: 0;
    color: var(--dd-color-text);
    text-shadow: none;
}
.dd-smc-level-name.dd-smc-level-name-label-color-white {
    color: white;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.dd-smc-level-name.dd-hidden {
    display: none;
}
.dd-smc-level-popup-button.dd-hidden {
    display: none;
}

/* UI HOTSPOTS */
.dd-smc-ui-hotspots {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.dd-smc-ui-hotspots.dd-hidden {
    display: none;
}
.dd-smc-ui-hotspots .dd-hotspot {
    position: relative;
}
.dd-smc-ui-hotspots .dd-hotspot-anchor {
    position: relative;
    top: auto;
}
.dd-smc-ui-hotspots .dd-hotspot-background {
    position: relative;
    transform: none;
}
.dd-smc-ui-hotspots .dd-hotspot-stick {
    display: none;
}
.dd-smc-ui-hotspots [data-tooltip]:before {
    bottom: auto;
    top: 120%;
}
.dd-smc-ui-hotspots [data-tooltip]:after {
    bottom: auto;
    top: 120%;
    transform-origin: top;
}

/* UI LAYOUT TOGGLE
 * default: in-controlbar "up one level" (.dd-smc-button-up-one-level)
 * legacy:  floating "up one level" (.dd-button-up-one-level)
 * Selected via the dd/statemachine/ui/layout filter — return 'legacy' to opt in. */
.dd-statemachine[data-ui-layout="default"] .dd-button-up-one-level {
    display: none !important;
}
.dd-statemachine[data-ui-layout="legacy"] .dd-smc-button-up-one-level {
    display: none !important;
}


/* CONTROLBAR (BOTTOM) */
.dd-statemachine-controlbar {
    background: white;
    background-color: var(--dd-color-background);
    display: flex;
    flex-direction: row;
    font-size: var(--dd-font-small);
}
.dd-transition-playing .dd-statemachine-controlbar {
    pointer-events: none;
}
.dd-smc-button {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 20%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    margin: .5em;
    border-radius: 10px;
}
.dd-smc-button > span {
    max-width: 100%;
    text-align: center;
}

.dd-statemachine-controlbar .dd-smc-button{
    border: none;
    color: inherit;
    background: unset;
    font-size: inherit;
    padding: 0;
    color: var(--dd-color-text);
    fill: var(--dd-color-text);
    cursor: pointer;
    pointer-events: all;
}
.dd-statemachine-controlbar .dd-smc-button:active,
.dd-statemachine-controlbar .dd-smc-button:visited,
.dd-statemachine-controlbar .dd-smc-button:hover {
    border: none;
    color: inherit;
    background: unset;
    font-size: inherit;
    color: var(--dd-color-text);
    fill: var(--dd-color-text);
}
.dd-statemachine-controlbar .dd-smc-button:focus{
    border: none;
    color: inherit;
    background: unset;
    font-size: inherit;
    color: var(--dd-color-text);
    fill: var(--dd-color-text);
}
.dd-statemachine-controlbar .dd-smc-button:focus-visible{
    border: none;
    color: inherit;
    background: unset;
    font-size: inherit;
    color: var(--dd-color-text);
    fill: var(--dd-color-text);
    outline: 2px solid var(--dd-color-text);
    outline-offset: 3px;
}
.dd-statemachine-controlbar .dd-smc-button:focus-within {
    border: none;
    color: inherit;
    background: unset;
    font-size: inherit;
    color: var(--dd-color-text);
    fill: var(--dd-color-text);
}

.dd-smc-button {
    max-width: 100px;
    overflow: visible;
    transition: all var(--dd-animation-time) var(--dd-animation-easing);
    opacity: 1;
}

.dd-smc-button.dd-hidden,
.dd-smc-button:disabled {
    opacity: 0.5;
}

.dd-smc-button:disabled {
    cursor: default;
}

 @media screen AND (max-width:767.98px) AND (orientation:portrait) {
    :root {
        --dd-bottom-controlbar-height: 60px;
    }
}

 @media screen AND (max-height:500px) AND (orientation:landscape) {
    :root {
        --dd-bottom-controlbar-height: 50px;
        --dd-margin-narrow: 10px;
    }
    .dd-statemachine-controlbar svg {
        width: 20px;
        height: 20px;
    }
    .dd-statemachine-controlbar .dd-smc-button {
        max-width: 70px;
        font-size: 0.85em;
    }
    .dd-bse-list-filterbar .dd-bse-list-filterbar-buttons {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}


/* IMAGE LAYER */
.image-layer-top {

}




/* FLIPBOOK - Keep the flipbook visible as long as it is playing, or if the image is still loading */
/* .dd-statemachine.dd-image-is-loading .dd-flipbook,  */
.dd-statemachine .dd-flipbook.dd-is-playing,
.dd-statemachine .dd-flipbook.dd-keep-visible {
    display: block;
}



/* HOTSPOTS */
.dd-smc-hotspots-layer {
    pointer-events: none;
}
.dd-hotspot {
    position: absolute;
}
.dd-hotspots-container {
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--dd-bouncy-fade-time);
}
.dd-hotspots-container.dd-active {
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.dd-hotspots-container:not(.dd-active) .dd-hotspot {
    pointer-events: none;
}


/* MASKS */
.dd-masks-container {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dd-masks-fade) var(--dd-fade-easing),
                visibility 0s linear var(--dd-masks-fade);
}
.dd-masks-container.dd-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dd-masks-fade) var(--dd-fade-easing),
                visibility 0s linear 0s;
}
.dd-masks-container:not(.dd-active) .dd-mask-path {
    pointer-events: none;
}
.dd-mask {
    position: absolute;
    pointer-events: none;
}
.dd-mask-path {
    pointer-events: auto;
    cursor: pointer;
    fill: var(--dd-mask-fill);
    fill-opacity: var(--dd-mask-fill-opacity);
    stroke: var(--dd-mask-stroke);
    stroke-opacity: var(--dd-mask-stroke-opacity);
    stroke-width: var(--dd-mask-stroke-width);
}
.dd-bolig-mask.dd-inactive-residency .dd-mask-path {
    pointer-events: none;
}
.dd-is-filtering .dd-bolig-mask .dd-mask-path {
    fill-opacity: 0.4;
}
.dd-mask.dd-status-indicator-mask .dd-mask-path{
    pointer-events: none;
    stroke-opacity: 0;
}


.dd-mask.dd-filtered-out .dd-mask-path {
    fill-opacity: 0;
    stroke-opacity: 0.2;
}

.dd-is-filtering .dd-mask.dd-status-indicator-mask .dd-mask-path {
    stroke-opacity: 0.4;
}

.dd-is-filtering .dd-mask.dd-status-indicator-mask.dd-filtered-out .dd-mask-path {
    stroke-opacity: 0;
}

.dd-mask.dd-mask-selected {
    z-index: 1;
}

.dd-mask.dd-mask-selected .dd-mask-path {
    fill-opacity: 0.9;
    stroke-opacity: 1;
    /* outline: 6px solid var(--dd-status-color);
    outline-offset: 5px; */
}

@media screen AND (hover:hover){
    .dd-mask.dd-bolig-mask:not(.dd-status-indicator-mask) .dd-mask-path:hover{
        fill-opacity: 0.8;
        stroke-opacity: 1;
    }
    .dd-mask:not(.dd-bolig-mask) .dd-mask-path:hover{
        fill-opacity: 0.5;
        stroke-opacity: 1;
    }
}

/* CROSSHOVER HIGHLIGHT */
.dd-mask.dd-bolig-mask:not(.dd-status-indicator-mask).dd-crosshover-highlight .dd-mask-path {
    fill-opacity: 0.8;
    stroke-opacity: 1;
}
.dd-mask:not(.dd-bolig-mask).dd-crosshover-highlight .dd-mask-path {
    fill-opacity: 0.5;
    stroke-opacity: 1;
}

/* KEYBOARD FOCUS — the svg is a full-overlay, so light up the path shape instead of outlining the svg */
.dd-mask:focus {
    outline: none;
}
.dd-mask:not(.dd-status-indicator-mask):focus-visible .dd-mask-path {
    fill-opacity: 0.8;
    stroke-opacity: 1;
    stroke-width: calc(var(--dd-mask-stroke-width) * 2);
}

/* KEYBOARD FOCUS — hotspots are pins, so a standard outline on the bubble works */
.dd-hotspot:focus {
    outline: none;
}
.dd-statemachine .dd-hotspot[tabindex]:focus-visible {
    outline: none;
}
.dd-hotspot:focus-visible .dd-hotspot-background {
    outline: 2px solid var(--dd-color-text);
    outline-offset: 3px;
}



/* LEVELS MENU */
.dd-levels-menu .dd-popup-menu-section {
    /* flex-direction: column; */
    display: grid;
    grid-template-rows: auto;
    gap: 40px;
}
.dd-levels-card {
    position: relative;
    border-radius: var(--dd-element-radius);
    overflow: hidden;
    background: black;
}
.dd-levels-card.dd-hidden {
    display: none;
}
.dd-levels-card::after {
    content: "";
    padding-bottom: 60%;
    display: block;
}
.dd-levels-card .dd-levels-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dd-image-overlay-fade-bottom {
    background: transparent;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0.65) 88%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
.dd-levels-card-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
}


/* SUNPATH */
.dd-smc-solstudie-layer {
    pointer-events: none;
}

.dd-statemachine .dd-smc-solstudie-layer,
.dd-statemachine .dd-smc-solstudie-layer .dd-solstudie-animation {
    transition: opacity 0.3s linear;
}

.dd-statemachine .dd-smc-solstudie-layer {
    opacity: 0;
    visibility: hidden;   /* opacity:0 alone leaves the sun-study controls in the tab order; hide them, delayed so the fade-out still plays */
    transition: opacity 0.3s linear, visibility 0s linear 0.3s;
}

.dd-statemachine.dd-sunpath-mode .dd-smc-solstudie-layer{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s linear, visibility 0s linear;
}

.dd-statemachine.dd-fade-out-solstudie .dd-smc-solstudie-layer .dd-solstudie-animation {
    opacity: 0;
}

.dd-statemachine .dd-solstudie {
    display: none;
}

.dd-statemachine .dd-solstudie.dd-active {
    display: block;
}

.dd-statemachine:not(.dd-sunpath-mode) .dd-solstudie * {
    pointer-events: none;
}

.dd-statemachine.dd-sunpath-mode .dd-togglebutton {
    display: none;
}

.dd-bolig-shop.dd-sunpath-mode .dd-bse-togglebutton {
    display: none;
}

.dd-statemachine.dd-sunpath-mode .dd-smc-hotspots-layer {
    display: none;
}

/* INVERSION NOTE: in sunpath mode, .dd-movable sits ON TOP of the sunpath
   layer (z-index: 2). This is the trade-off for "selected mask outline visible
   on top of sunpath" — the masks live inside .dd-movable and must paint above
   the sunpath, so the whole movable goes on top. Cost: everything else inside
   movable (image-layer, hotspots, iframe, non-selected masks) must be opacity
   0 so the sunpath shows through. During the turn fade-out, image-layer is
   re-revealed so the SM transition is visible while the sunpath fades out. */
.dd-statemachine.dd-sunpath-mode .dd-movable {
    z-index: 2;
    pointer-events: none !important;
}

.dd-statemachine .dd-movable .dd-smc-image-layer,
.dd-statemachine .dd-movable .dd-smc-masks-layer,
.dd-statemachine .dd-movable .dd-smc-hotspots-layer,
.dd-statemachine .dd-movable .dd-smc-iframe {
    transition: opacity var(--dd-animation-time) var(--dd-fade-easing);
}

.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-image-layer,
.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-hotspots-layer,
.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-iframe {
    opacity: 0;
    pointer-events: none !important;
}

.dd-statemachine.dd-fade-out-solstudie .dd-movable .dd-smc-image-layer {
    opacity: 1;
}

.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-masks-layer .dd-mask:not(.dd-mask-selected) {
    opacity: 0;
}

.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-masks-layer .dd-mask-selected .dd-mask-path {
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke-width: 5px;
}

/* TEMP DISABLE: masks fully neutralized over the sunpath — not visible,
   not clickable, not hoverable — while we contemplate the sunpath/mask
   interaction issues. Supersedes the selected-mask rules above (display:none
   can't be re-enabled by descendants, unlike opacity/visibility/pointer-events).
   Revert when the real fix lands. */
.dd-statemachine.dd-sunpath-mode .dd-movable .dd-smc-masks-layer {
    display: none;
}
/* END: SUNPATH */



/* TIMELINE */
.dd-smc-timeline-layer {
    pointer-events: none;
}

.dd-statemachine .dd-smc-timeline-layer,
.dd-statemachine .dd-timeline-stage {
    transition: opacity var(--dd-animation-time) var(--dd-fade-easing);
}

.dd-statemachine .dd-smc-timeline-layer {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dd-animation-time) var(--dd-fade-easing),
                visibility 0s linear var(--dd-animation-time);
}

.dd-statemachine.dd-timeline-mode .dd-smc-timeline-layer {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity var(--dd-animation-time) var(--dd-fade-easing),
                visibility 0s linear 0s;
}

.dd-statemachine.dd-fade-out-timeline .dd-timeline-stage {
    opacity: 0;
}

.dd-statemachine .dd-timeline {
    display: none;
}

.dd-statemachine .dd-timeline.dd-active {
    display: block;
}

.dd-statemachine:not(.dd-timeline-mode) .dd-timeline * {
    pointer-events: none;
}

.dd-statemachine.dd-timeline-mode .dd-togglebutton {
    display: none;
}

/* Hide masks and hotspots while in timeline mode so they don't flash through
   during the fade-out / state-transition / fade-in turn sequence. The SM
   image itself stays visible underneath as a visual cue for the state swap. */
.dd-statemachine.dd-timeline-mode .dd-smc-masks-layer,
.dd-statemachine.dd-timeline-mode .dd-smc-hotspots-layer {
    display: none;
}

/* Hide the Timeline's internal turn buttons inside a statemachine — the statemachine controlbar drives view changes. */
.dd-statemachine .dd-timeline .dd-timeline-ui-button[data-action='change-view'] {
    display: none;
}

/* END: TIMELINE */





/* IFRAME */
.dd-smc-iframe {
    pointer-events: none;
}
.dd-smc-iframe > * {
    pointer-events: all;
}
.dd-displaying-iframe .dd-compass {
    display: none;
}
.dd-displaying-iframe .dd-bse-togglebutton {
    display: none;
}
.dd-statemachine .dd-smc-iframe .dd-loadingscreen {
    display: flex;
}
.dd-statemachine .dd-smc-iframe .dd-loadingscreen .dd-loader {
    z-index: 1;
}
/* END: IFRAME */






/* DISCLAIMER */
.dd-disclaimer-wrapper {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    pointer-events: none;
}
.dd-disclaimer-wrapper > .active {
    pointer-events: all;
}
/* END: DISCLAIMER */



/* Animated masks */
/* Pulse animation */
.dd-animation-pulse:not(.highlight):not(.dd-crosshover-highlight) path {
  	animation: dd-animation-pulse 2.4s ease 0.2s infinite;
}
.dd-is-filtering .dd-animation-pulse path {
    animation:none!important;
}
@media (hover:hover){
    .dd-animation-pulse:hover path{
        animation:none!important;
    }
}
@keyframes dd-animation-pulse {
  0% {
    fill-opacity: var(--dd-mask-fill-opacity);
  }
  50% {
    fill-opacity: 0.6;
  }
  100%{
    fill-opacity: var(--dd-mask-fill-opacity);
  }
}


/* INLINE MODE HINT OVERLAY */
/* SUNPATH AND TIMELINE POPUP */
.dd-sunpath-info-popup-list,
.dd-timeline-info-popup-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}