body, html,
#app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: sans-serif;
}

.loading-logo {
    width: 120px;
    margin-bottom: 20px;
    /* Optional: Add a pulse effect */
    animation: pulse 2s infinite ease-in-out;
}


.w-100 {
    width: 100%;
}

.w-min-15r {
    min-width: 15rem;
}

.w-min-20r {
    min-width: 20rem;
}

.w-max-33p {
    max-width: 33%;
}

.h-100 {
    height: 100%;
}
.h-2ri {
    height: 2rem !important;
}

.h-min-100 {
    min-height: 100%;
}

.bg-default {
    background-color: var( --mud-palette-background ) !important;
}

.overflow-hidden-important {
    overflow: hidden !important;
}

.canvas-screen,
.canvas-screen .canvas-backdrop {
    width: var(--canvas-screen-width);
    max-width: 100vw;
    height: var(--canvas-screen-height);
    max-height: 60vh;
}

.canvas-screen {
    --canvas-width: 257px;
    --canvas-height: 204px;
    --canvas-screen-width: calc(var(--canvas-width) * 1.5);
    --canvas-screen-height: calc(var(--canvas-height) * 1.25);
    overflow: hidden;
    position: relative;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

    .canvas-screen .canvas-backdrop {
        background: rgba(0, 0, 0, 0.75);
        position: fixed;
        pointer-events: none;
        z-index: 2;
        -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black);
        -webkit-mask-composite: exclude; /* The magic: "Subtracts" the two gradients */
        mask-composite: exclude;
        /* Position the second "hole" gradient */
        -webkit-mask-size: 100% 100%, var(--canvas-width) var(--canvas-height);
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
    }

    .canvas-screen .canvas-editor {
        width: var(--canvas-width);
        height: var(--canvas-height);
        position: relative;
    }

        .canvas-screen .canvas-editor .canvas-edit,
        .canvas-screen .canvas-editor .canvas-frame {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            cursor: move;
        }

        .canvas-screen .canvas-editor .canvas-size {
            position: relative;
            z-index: 3;
            pointer-events: none;
            border: 5px dashed red;
            margin-left: -5px;
            margin-top: -5px;
            width: calc(var(--canvas-width) + 10px);
            height: calc(var(--canvas-height) + 10px);
        }

        .canvas-screen .canvas-editor .canvas-frame {
            z-index: 4;
            pointer-events: none;
        }

.canvas-align-tools {
    position: relative;
    display: flex;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .canvas-align-tools [id^="c-align-"] {
        padding: 0 !important;
        position: absolute;
    }

    .canvas-align-tools [id^="c-align-t"] {
        top: 0;
    }

    .canvas-align-tools [id^="c-align-b"] {
        bottom: 0;
    }

    .canvas-align-tools #c-align-tl {
        left: 0;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .canvas-align-tools #c-align-tr {
        right: 0;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .canvas-align-tools #c-align-bl {
        left: 0;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .canvas-align-tools #c-align-br {
        right: 0;
        -moz-transform: rotate(+45deg);
        -ms-transform: rotate(+45deg);
        -o-transform: rotate(+45deg);
        -webkit-transform: rotate(+45deg);
        transform: rotate(+45deg);
    }


/*PHONE BREAKPOINT*/
@media (min-width: 480px) {
    .w-max-33p {
        max-width: 90%;
    }
}

/*TABLET BREAKPOINT*/
@media (min-width: 768px) {
    .w-max-33p {
        max-width: 66%;
    }
}