.colorButtons {
    display: block;
}

canvas {
    cursor: crosshair;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 3%;
    z-index: 8;
    border: 2px solid;
    outline: 1px solid;
    touch-action: pinch-zoom;
}

.sidebar {
    background-color: rgb(24, 24, 24);
    border: 1px solid black;
    border-radius: 10px;
}


.pickr > button{
    border: 3px solid rgb(219, 219, 219);
    border-radius: 100px !important;
    overflow: hidden;
}


.colorpicker-container {
    position: relative;
    display: inline-block;
}

.colorpicker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    opacity: 0; /* Hide the default color input */
    cursor: pointer;
}

.colorpicker-display {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #000; /* Default color */
    border: 2px solid #fff;
    cursor: pointer;
}