.create_your_own_design_modal{
    --modal-width: 940px;
    --modal-height: 600px;

    --modal-title-size: 24px;
    --modal-title-align: left;

    .modal_body{
        height: calc(100% - 112px);
        margin-top: 40px;
        @media(max-width: 930px){
            height: calc(100% - 70px);
        } @media (max-width: 632px){
            height: calc(100% - 88px);
        }
    }

    .submit_create_your_own_design_form{
        width: fit-content;
        float: right;
        margin-top: 10px;
        @media(max-width: 930px){
            width: 100%;
        } @media(max-width: 400px){
            font-size: 13px;
        }
    }

    .field_container{margin-bottom: 10px;}

    form{
        height: 100%;
        display: flex;
        gap: 40px;

        @media(max-width: 930px){
            flex-direction: column-reverse;
            overflow-y: auto;
            height: calc(100% - 40px);
        } @media(max-width: 360px){
            flex-direction: column-reverse;
            overflow-y: auto;
            height: calc(100% - 81px);
        }
    }

    .modal_header{
        margin-bottom: 0;
    }

    .fields_part{
        flex-grow: 1;
        overflow-y: auto;

        @media (max-width: 930px){overflow-y: hidden; min-height: max-content;}
        canvas[data-name="isomtric_view_of_CYOD_canvas"]{
            border: 2px solid #000;
        }

        svg{width: 250px;}
    }

    .canvas_part{
        position: relative;
        aspect-ratio: 1/1;
        height: 100%;

        @media(max-width: 930px){
            height: unset;
            max-height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .pen_color_picker{
            position: absolute;
            left: 0;
            top: calc(50% - 120px);
        }

        .canvas_actions{
            position: absolute;
            left: calc(50% - 118.18px);
            top: -10px;

            display: flex;
            gap: 20px;
            align-items: center;

            background: #fff;
            border-radius: 14px;

            padding: 2px 8px 2px 4px;
            border: 1px solid #f2f2f2;

            .canvas_action_image{
                display: block;
                width: 20px;
                height: 20px;
                cursor: pointer;


                transition: 0.3s ease all;
                &:active{
                    scale: 1.11;
                }
            }
        }

        .canvas_delete_content{
            position: absolute;
            bottom: 10px;
            right: 0;
            width: fit-content;
        }

        canvas{
            border-radius: 50%;
            max-width: 100%;
            border: 5px solid #000;
        }
    }

    @media(max-width: 1024px){
        --modal-width: 100svw;
        --modal-height: 100svh;
        .modal_container_content{border-radius: 0;}
    }
}