#loader_object_scan .cube {
    /* master scale for the cube*/
    --cubeScale: 0.6;

    /* size should be set in the loader_container.css file, but can be overwritten here */
    /* --size: 33vmin; */

    position: relative;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    /* transfrom the whole cube, adjust: rotateX=up/down rotateZ=left/right */
    transform: translate(-50%, -50%) scale(var(--cubeScale)) rotateX(70deg) rotateZ(45deg);
    box-sizing: border-box;
}

#loader_object_scan .face {
    position: absolute;
    display: block;
    /* box sizing to prevent spaces between the faces */
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;

    /* blur smoothens edges and fixes a severe bug on firefox */
    filter: blur(calc(var(--size) * 0.0025));
    -webkit-filter: blur(calc(var(--size) * 0.0025));

    /* inital border of the faces (wireframe of cube), gets partially overwritten */
    border: calc(var(--size) * 0.03125 * 0.75) solid #413e3f;

    /* the scan lines are animated to leave the bounds of the face, this hides them */
    overflow: hidden;
}

#loader_object_scan .scan {
    /* .scan = class for all scan lines (floor and walls of cube) */

    position: absolute;
    width: 100%;
    height: 100%;
    /* scan gradient with alpha */
    background: linear-gradient(-90deg, #00c1f200 80%, #00c1f2ff 100%);
}

#loader_object_scan .face#bot {
    /* bottom face of the cube */
    transform: translate(-50%, -50%) translateZ(calc((var(--size)) * -0.3725));
    border: calc(var(--size) * 0.03125*1) solid #413e3f;
    /* smaller border where it meets the walls' border */
    border-top: calc(var(--size) * 0.03125*0.5) solid #413e3f;
    border-left: calc(var(--size) * 0.03125*0.5) solid #413e3f;
}

#loader_object_scan .face#right {
    /* right face of the cube */
    width: 75%;
    transform: translate(-50%, -50%) rotateY(90deg) rotateX(90deg) translateZ(calc((var(--size)) * 0.5));
    /* smaller border where it meets the floors and other walls border */
    border-top: calc(var(--size) * 0.03125*0.5) solid #413e3f;
    border-right: calc(var(--size) * 0.03125*0.5) solid #413e3f;
}

#loader_object_scan .face#left {
    /* left face of the cube */
    width: 75%;
    transform: translate(-50%, -50%) rotateY(90deg) rotateX(0deg) translateZ(calc((var(--size)) * -0.5));
    /* smaller border where it meets the floors and other walls border */
    border-top: calc(var(--size) * 0.03125*0.5) solid #413e3f;
    border-right: calc(var(--size) * 0.03125*0.5) solid #413e3f;
}

#loader_object_scan #bot #ani_scale {
    /* the floors scan elements are parented to ani_scale to easier animate them */

    width: 100%;
    height: 100%;
    /* animate by simply scaling them; they will be scaled to overflow the face; 
    ease-out for slow start and better transition to the walls  */
    animation: cube2b_scan_bot 4s ease-out infinite;
}

/* the floor scan consists of 4 .scan elements, each rotated by i*90deg */
#loader_object_scan .face#bot .scan:nth-child(1) {
    transform: rotate(90deg);
}

#loader_object_scan .face#bot .scan:nth-child(2) {
    transform: rotate(180deg);
}

#loader_object_scan .face#bot .scan:nth-child(3) {
    transform: rotate(270deg);
}

#loader_object_scan .face.side .scan {
    animation: cube2b_scan_sides 4s linear infinite;
}

#loader_object_scan .face#left .door {
    position: absolute;
    width: 60%;
    height: 30%;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0%);
}

#loader_object_scan .face#right .window {
    position: absolute;
    width: 40%;
    height: 40%;
    left: 45%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loader_object_scan .face.side .object.window {
    animation: cube2b_outline_window 4s linear infinite;
}

#loader_object_scan .face.side .object.door {
    animation: cube2b_outline_door 4s linear infinite;
}

#loader_object_scan .face.side .object.door {
    border-right: none;
}

#loader_object_scan .face.side .object .fill {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-color: #009fe6ff;

    /* right (local space) => bottom (global space) origin, to scale it upwards */
    transform-origin: right;
}

#loader_object_scan .face.side .object.door .fill {
    animation: cube2b_fill_door 4s linear infinite;
}

#loader_object_scan .face.side .object.window .fill {
    animation: cube2b_fill_window 4s linear infinite;
}

@keyframes cube2b_outline_door {
    0% {

        border: calc(var(--size) * 0.015) solid #00537900;
        border-right: none;
        opacity: 1;
    }

    50% {

        border: calc(var(--size) * 0.015) solid #00537900;
        border-right: none;
        opacity: 1;
    }

    65% {

        border: calc(var(--size) * .015) solid #005379ff;
        border-right: none;
        opacity: 1;
    }

    80% {
        border: calc(var(--size) * .015) solid #005379ff;
        border-right: none;
        opacity: 1;
    }

    90% {
        border: calc(var(--size) * .015) solid #005379ff;
        border-right: none;
        opacity: 1;
    }

    100% {
        border: calc(var(--size) * .015) solid #00537900;
        border-right: none;
        opacity: 0;
    }
}

@keyframes cube2b_outline_window {
    0% {

        border: calc(var(--size) * 0.015) solid #00537900;
        opacity: 1;
    }

    50% {

        border: calc(var(--size) * 0.015) solid #00537900;
        opacity: 1;
    }

    65% {

        border: calc(var(--size) * .015) solid #005379ff;
        opacity: 1;
    }

    80% {
        border: calc(var(--size) * .015) solid #005379ff;
        opacity: 1;
    }

    90% {
        border: calc(var(--size) * .015) solid #005379ff;
        opacity: 1;
    }

    100% {
        border: calc(var(--size) * .015) solid #00537900;
        opacity: 0;
    }
}

@keyframes cube2b_fill_door {
    0% {
        transform: translate(-50%, -50%) scaleX(0);
        opacity: 1;
    }

    19% {
        transform: translate(-50%, -50%) scaleX(0);
        opacity: 1;
    }

    34% {
        transform: translate(-50%, -50%) scaleX(1);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scaleX(1);
        opacity: 0;
    }
}

@keyframes cube2b_fill_window {
    0% {
        transform: translate(-50%, -50%) scaleX(0);
        opacity: 1;
    }

    27% {
        transform: translate(-50%, -50%) scaleX(0);
        opacity: 1;
    }

    38% {
        transform: translate(-50%, -50%) scaleX(1);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scaleX(1);
        opacity: 0;
    }
}


@keyframes cube2b_scan_bot {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1.25);
    }

    33.334% {
        transform: scale(2);
    }

    50% {
        transform: scale(2);
    }

    100% {
        transform: scale(2);
    }

}

@keyframes cube2b_scan_sides {
    0% {
        transform: translateX(110%);
    }

    20% {
        transform: translateX(95%);
    }

    45% {

        transform: translateX(-5%);
    }

    /* 50% {
        transform: translate(-110%);
    } */

    100% {
        transform: translate(-110%);

    }

}