/* Created by Content Blocks - empty? */
canvas.webgl {
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Fade-In-Transition */
    max-width: 100%;
    height: auto;
}

.loading-bar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 7px;
    background-color: transparent;
    z-index: 999; /* Ensure it is above other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out; /* 1s Fade-In Effekt */
}

.loading-bar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%); /* Zentriert den Ladebalken */
    height: 100%;
    background-color: var(--thumbnailmenu-bg); /* Farbe des Ladebalkens */
    width: 128px; /* Start mit 0% Breite */
    //border-radius: 50%;
    transition: width 0.2s ease-in-out;
}

.loading-percentage {
    position: absolute;
    top: -14px; /* Adjust as needed */
    left: 50%;
    min-width: 128px;
    min-height: 36px;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    font-size: 12px; /* Adjust font size as needed */
    font-weight: 400;
    padding: 7px 12px;
    /*border: solid 4px var(--thumbnailmenu-bg);*/
    border: solid 1px white;
    /*border-radius: 50%;*/
    background-color: var(--bs-body-bg)
}

.loading-bar-container.visible {
    opacity: 1;
    visibility: visible;
}

.loading-bar-container.fade-out {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}