.canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 80%;
    height: 400px;
    margin: 20px auto;
    border-radius: 8px;
}

.canvas-container {
    display: inline-block;
    transition: transform 0.2s ease;
}

.modal-scroll-row {
    height: 75vh;
    overflow-y: scroll !important;
}

.hover-pointer {
    cursor: pointer;
}

.template-img {
    max-width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: contain;
}

.preview-img {
    object-fit: contain;
    max-width: 100%;
}
/* override bootstrap modal-content class */
.modal-content {
    border-radius: 1rem;
    border-color: transparent;
}

.edit-sidebar{
    max-width: 100% !important;
}

/* If bootstrap lg breakpoint is ever changed, this must also change */
@media (min-width: 992px){
    .edit-sidebar{
        max-width: 210px !important
    }
}

.red-range::-moz-range-track {
    background: #ffffff;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 100%);
}
.green-range::-moz-range-track {
    background: #ffffff;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
}
.blue-range::-moz-range-track {
    background: #ffffff;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
}

.popup {
    position: relative;
}

.popup .popup-content {
    min-width: 225px;
    position: absolute;
    z-index: 5;
}