#product-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.canvas-wrapper-container {
    width: 40%;
    margin: auto;
}

.product-canvas-wrapper {
    width: 100%;
    
}

    

.product-canvas-wrapper {
    //contain: layout;
    @include media-breakpoint-up(lg) {
        padding: 16px 0px 0;
    }
}

.product-canvas-img {
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: -1;
    //opacity: 0;
}

.canvas-holder {
    width: 200px;
    height: 205px;
    position: relative;

    // @include media-breakpoint-down(lg) {
    //     padding-top: min(100%, 200px);
    // }
}

.colorpicker {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 10px;
}

.colorpickerwrapper {
    display: flex;
    @include media-breakpoint-down(sm) {
        flex-wrap: wrap;
    }

    &__left {
        border-radius: 10px 0px 0px 10px;
        padding-left: 8px;
        padding-top: 8px;
        background-color: #E8E7F0;
    }
    &__right {
        padding-left: 8px;
        background-color: #E8E7F0;

        &__inner {
            background-color: $white;
        }
    }


    .form-control{
        background-color: $body-bg;
        padding-left: 0;
        padding-right: 0;
    }
    .form-group {
        label {
            opacity: 0.6;
        }
        input:focus ~ div label {
            opacity: 1;
        }
    }
}

   
.colorpicker-input-section {
    background-color: #E8E7F0;
    padding: 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.colorpicker-radius-section {
    padding: 0px 0px 0px 4px;
    background-color: #E8E7F0;
    &__inner {
        height: 20px;
        background-color: $white;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
}


.colorpicker-circle {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 100%;
    cursor: pointer;
    border-radius: 100%;
    border: 2px solid white;
    transform: translate(-50%, -50%);
}
    
.block-radius__left__inverted {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 100%;
    bottom: 0px;
    border-bottom-right-radius: 80px;
    background-color: #EAE9F2;
    box-shadow: 5px 0px 0 0 #fff;
}

.block-radius__right__inverted  {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 100%;
    bottom: 0px;
    border-bottom-left-radius: 80px;
    background-color: #EAE9F2;
    box-shadow: -5px 0px 0 0 #fff;
}