.dd-solstudie {
    position: relative;
    display: block;
    color: var(--dd-ui-color);

    /* --dd-margin-narrow: 20px; */
    --dd-solstudie-ui-gap: 10px;

    --dd-lottie-offset-x: 0px;
    --dd-lottie-offset-y: 0px;
    --dd-lottie-bg-offset-x: 50%;
    --dd-lottie-bg-offset-y: 50%;
}


/* ANIMATION */
.dd-solstudie-animation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    overflow: hidden;
}

.dd-solstudie-image {
    position: relative;
    display: block;
    opacity: 0; /* It's just for getting the right aspect */
}

.dd-solstudie-image-source {
    width: 100%;
    height: auto;
}

.dd-solstudie .dd-lottie-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* RESPONSIVE - COVER MODE */
.dd-solstudie.dd-cover .dd-solstudie-animation,
.dd-solstudie.dd-cover .dd-solstudie-image,
.dd-solstudie.dd-cover .dd-solstudie-image-source {
    object-fit: cover;
    width: 100%;
    height: -webkit-fill-available;
    height: 100%; 
}

.dd-solstudie.dd-cover .dd-solstudie-animation,
.dd-solstudie.dd-cover .dd-solstudie-image {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* UI */
.dd-solstudie-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dd-solstudie-ui-anchor {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:var(--dd-solstudie-ui-gap);
    pointer-events: auto;
}

.dd-solstudie-ui-anchor-top-right {
    top:var(--dd-margin-narrow);
    right:var(--dd-margin-narrow);
}

.dd-solstudie-ui-anchor-top-left {
    top:var(--dd-margin-narrow);
    left:var(--dd-margin-narrow);
}

.dd-solstudie-ui-anchor-bottom-right {
    bottom:var(--dd-margin-narrow);
    right:var(--dd-margin-narrow);

    flex-direction: column;
}

.dd-solstudie-ui-anchor-bottom-left {
    bottom:var(--dd-margin-narrow);
    left:var(--dd-margin-narrow);

    width: 75%;
    max-width: 750px;
}


.dd-solstudie-ui-button,
.dd-solstudie-ui-element {
    border-radius: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    
    
    height: var(--dd-button-height-small);
    width: var(--dd-button-height-small);
    
    background-color: var(--dd-ui-color, white);
    color: var(--dd-ui-color);
    font-size: 0.8em;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
    border: none;
}


.dd-solstudie-ui-button.dd-active svg path {
    fill: var(--dd-ui-color, black);
}




.dd-solstudie-ui-button:hover,
.dd-solstudie-ui-button:active,
.dd-solstudie-ui-button:focus,
.dd-solstudie-ui-button:target {
    outline:none;
    background-color: var(--dd-ui-color);
}

.dd-solstudie-ui-button:focus-visible {
    outline: 2px solid black;
    outline-offset: 3px;
}

.dd-solstudie-ui-label {

}

.dd-play-icon,
.dd-pause-icon {
    display: none;
}

.dd-solstudie-ui-button.dd-active {
    background: var(--dd-color-accent);
}

.dd-solstudie-ui-button.dd-active svg{
    z-index: 1;
}
.dd-solstudie-ui-button.dd-active .dd-solstudie-ui-button-label{
    text-decoration: underline;
    background: var(--dd-color-accent, black);
    color: var(--dd-color-accent-contrast, white);
    border-radius: 99px;
    padding-left: 18px;
    padding-right: calc(var(--dd-button-height-small) + 10px);
    transform: translate(var(--dd-button-height-small), 0px);
}

.dd-solstudie-ui-button.dd-active svg path {
    fill: var(--dd-color-accent-contrast, black);
}

.dd-solstudie-ui-button .dd-active {
    display: flex;
}


.dd-solstudie-ui-button-label{
    position: absolute;
    height: var(--dd-button-height-small);
    line-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen AND (max-width:767px){
    .dd-solstudie-ui-button-label {
        display: none;
    }
}

.dd-solstudie-ui-anchor-top-right .dd-solstudie-ui-button-label {
    top: 100%;
    left: 0;
    right: 0;
    padding: 5px 0;
}

.dd-solstudie-ui-anchor-bottom-right .dd-solstudie-ui-button-label {
    right: 100%;
    padding: 10px;
}

.dd-solstudie-ui-anchor-bottom-left .dd-solstudie-ui-button-label {
    bottom: 100%;
    left: 0;
    right: 0;
    padding: 5px 0;
}


/* UI - SLIDER */
.dd-solstudie-ui-slider-container {
    pointer-events: all;
    width: 100%;
    line-height: 0;
}

.dd-solstudie-ui-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;  
    background: rgba(255, 255, 255, 0.5);
    outline: none;
}

.dd-solstudie-ui-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--dd-button-height-small);
    height: var(--dd-button-height-small);
    border-radius: var(--dd-button-height-small);
    background: white;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="M440-800v-120h80v120h-80Zm0 760v-120h80v120h-80Zm360-400v-80h120v80H800Zm-760 0v-80h120v80H40Zm708-252-56-56 70-72 58 58-72 70ZM198-140l-58-58 72-70 56 56-70 72Zm564 0-70-72 56-56 72 70-58 58ZM212-692l-72-70 58-58 70 72-56 56Zm268 452q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q67 0 113.5-46.5T640-480q0-67-46.5-113.5T480-640q-67 0-113.5 46.5T320-480q0 67 46.5 113.5T480-320Zm0-160Z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.dd-solstudie-ui-slider::-moz-range-thumb {
    width: var(--dd-button-height-small);
    height: var(--dd-button-height-small);
    border-radius: var(--dd-button-height-small);
    background: white;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="M440-800v-120h80v120h-80Zm0 760v-120h80v120h-80Zm360-400v-80h120v80H800Zm-760 0v-80h120v80H40Zm708-252-56-56 70-72 58 58-72 70ZM198-140l-58-58 72-70 56 56-70 72Zm564 0-70-72 56-56 72 70-58 58ZM212-692l-72-70 58-58 70 72-56 56Zm268 452q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q67 0 113.5-46.5T640-480q0-67-46.5-113.5T480-640q-67 0-113.5 46.5T320-480q0 67 46.5 113.5T480-320Zm0-160Z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.dd-solstudie-ui-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid black;
    outline-offset: 3px;
}

.dd-solstudie-ui-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid black;
    outline-offset: 3px;
}



/* COVERAGE IN STATEMACHINE */
.dd-statemachine .dd-solstudie {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


/* OFFSETS ON STATEMACHINES */
.dd-statemachine .dd-lottie-player > svg g image {
    transform: translate( var(--dd-lottie-offset-x) , var(--dd-lottie-offset-y));
}
.dd-statemachine .dd-lottie-player {
    background-position: right 50% bottom 50%;
    background-position: right var(--dd-lottie-bg-offset-x) bottom var(--dd-lottie-bg-offset-y);
}


/* TEST */
.dd-cover {
    width: 100%;
    height: 100%;
}