.aratio{
width: 100%;
padding: 10px;
text-align: center;

}


.label2{

display: block;
margin: 10px auto;

}

canvas {
    max-width: 100%;
    border-radius: 10px;
    margin: 0 auto;
}

#imageUpload {
    display: none;

}

.canvas-container{
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

@media (min-width: 992px) {
    .editor {
        display: grid;
        grid-template-columns: 2fr 1fr; 
        gap: 10px;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .editor {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
    }
}

.loading-indicator {
    display: none; 
    font-size: 20px;
    text-align: center;
}

.dot {
    display: inline-block;
    opacity: 0; 
    animation: blink 1.4s infinite both;
}

.dot1 { animation-delay: 0; }
.dot2 { animation-delay: 0.2s; }
.dot3 { animation-delay: 0.4s; }

@keyframes blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

input[type=range] {

  width: 100%;
}

.ont{display: none;}