<?php 
$id  = '';

if ( isset($_GET['id']) ) {
    $id = $_GET['id'];
  
    if ( preg_match('/[<>\"\']/', $id) ) {
        wp_die('Invalid input detected.');
      }
  
    $id = sanitize_text_field( $id );
    $id = esc_html( $id );
  }
  ?>

<div id="rightPanel" class="leftPanel rightPanel">
    <aside class="css-1p8tmgy">
        <div class="css-3b2dhj">
            <div class="css-1wnahdw">
                <div class="css-dfk3n7">
                    <div class="css-nohrvr">
                        <div class="css-gpu8so-Text perticularvfmids" data-id="" data-zds="true"></div>
                        <div data-testid="step-title-display" class="css-3emyiw">
                            <div class="css-18zfrb6 showmyclickpropty"></div>
                        </div>
                    </div>


                    <div class="css-btnduprem">
                        <button type="button" class="sc-Duplicate"><i class="fa fa-clone" aria-hidden="true"></i><span></span></button>
                        <button type="button" class="sc-Remove"><i class="fa fa-trash" aria-hidden="true"></i><span></span></button>
                    </div>

                    <div class="css-1j5vobt"><button id="settings-close-btn" data-variant="ghost" data-size="medium" data-zds="true"
                            type="button" aria-label="Close step details" class="css-1h5pl4w" data-rac=""><span
                                aria-hidden="true" data-testid="iconContainer" data-zds="true"
                                class="css-1bdcql8-Icon--formX--animate--24x24"><svg xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 24 24" height="24" width="24" size="24" name="formX">
                                    <path fill="#2D2E2E"
                                        d="M16.29 6.29 12 10.59l-4.29-4.3-1.42 1.42 4.3 4.29-4.3 4.29 1.42 1.42 4.29-4.3 4.29 4.3 1.42-1.42-4.3-4.29 4.3-4.29-1.42-1.42Z">
                                    </path>
                                </svg></span></button>
                    </div>
                </div>
                <!-- css-dfk3n7 -->
                
                <div aria-labelledby="tab-fields" id="panel-fields" role="tabpanel" class="css-1pnnl0v">
                    <div class="css-o7q2vg">
                        <div data-testid="open-sub-step-container" class="css-3aqgeg">
                            <div class="css-1xurxiv">

                                <div class="css-1tsxnf2">


                                    <!-- fields -->
                                    <div class="fieldSection">
                                        <div class="fieldSection-scroller tethers">

                                            <div class="vform-fieldoptions">

                                                <div class="mainfieldspanel">
                                                    <div class="standardoptionfield">
                                                       



                                                        <input type="hidden" name="fieldoptionid" data-batchid="" />

                                                        <div class="vform-mainsetopt">

                                                            <div class="vform-boxfontsze-main">

                                                                <div class="dropdown-toggle-right " data-id="28">
                                                                    <span class="css-bnio2e-Text" data-zds="true">Font Family Settings</span>
                                                                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </div>
                                                                <div class="dropdown-menu-right show" data-id="28">
                                                                    <label>Font Family</label>
                                                                    <select name="fontfamilmain">
                                                                        <option value="Arial, sans-serif">Arial</option>
                                                                        <option value="Verdana, sans-serif">Verdana</option>
                                                                        <option value="Times New Roman, serif">Times New
                                                                            Roman</option>
                                                                        <option value="Georgia, serif">Georgia</option>
                                                                        <option value="Courier New, monospace">Courier New
                                                                        </option>
                                                                        <option value="Tahoma, sans-serif">Tahoma</option>
                                                                        <option value="Trebuchet MS, sans-serif">Trebuchet
                                                                            MS</option>
                                                                        <option value="Lucida Console, monospace">Lucida
                                                                            Console</option>
                                                                        <option value="Comic Sans MS, cursive">Comic Sans MS
                                                                        </option>
                                                                        <option value="Impact, sans-serif">Impact</option>
                                                                    </select>
                                                                </div>

                                                            </div>

                                                            <div class="vform-wdth-main">

                                                                <div class="dropdown-toggle-right " data-id="29">
                                                                    <span class="css-bnio2e-Text" data-zds="true">Width Settings</span>
                                                                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </div>
                                                                <div class="dropdown-menu-right show" data-id="29">
                                                                    <label>Width</label>
                                                                    <input type="text" name="optionwidth" placeholder="Ex: 100%, 80%, 700px">
                                                                </div>
                                                            </div>

                                                            <div class="vform-wdth-main">

                                                                <div class="dropdown-toggle-right " data-id="30">
                                                                    <span class="css-bnio2e-Text" data-zds="true">Box Shadow Settings</span>
                                                                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </div>
                                                                <div class="dropdown-menu-right show shadow-builder" data-id="30">
                                                                    <label>Box Shadow</label>
                                                                    <!-- <input type="text" name="optionshadow" id="optionshadow" -->
                                                                        placeholder="Ex: none, 0 4px 4px #000">

                                                                        <div class="inline-inputs">
                                                                            <div>
                                                                            <label>X Offset (px)</label>
                                                                            <input type="number" id="shadow-x" value="0">
                                                                            </div>
                                                                            <div>
                                                                            <label>Y Offset (px)</label>
                                                                            <input type="number" id="shadow-y" value="0">
                                                                            </div>
                                                                        </div>

                                                                        <div class="inline-inputs">
                                                                            <div>
                                                                            <label>Blur (px)</label>
                                                                            <input type="number" id="shadow-blur" value="0">
                                                                            </div>
                                                                            <div>
                                                                            <label>Color</label>
                                                                            <input type="color" id="shadow-color" value="#000000">
                                                                            </div>
                                                                        </div>

                                                                        <label class="checkbox-label">
                                                                            <input type="checkbox" id="shadow-inset"> Inset
                                                                        </label>

                                                                </div>

                                                            </div>

                                                            <div class="vform-wdth-main">
                                                                <div class="dropdown-toggle-right " data-id="31">
                                                                    <span class="css-bnio2e-Text" data-zds="true">Background Settings</span>
                                                                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </div>
                                                                <div class="dropdown-menu-right show" data-id="31">
                                                                    <label>Background</label>
                                                                    <!-- <input type="color" name="optionback"> -->
                                                                     <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_9">
                                                                        <input type="color" name="optionback" class="customColorInput__select-input">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="vform-wdth-main">
                                                                <div class="dropdown-toggle-right " data-id="32">
                                                                    <span class="css-bnio2e-Text" data-zds="true">Padding Settings</span>
                                                                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </div>
                                                                <div class="dropdown-menu-right show" data-id="32">

                                                                    <!-- <label class="vform-lbfont">Padding</label> -->

                                                                    <div class="vf-mar-sf vf-onlymar">

                                                                        <div class="margin-box ">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0" name="optionpadtop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0" name="optionpadleft">
                                                                                </div>
                                                                            <div class="center">PADDING</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0" name="optionpadht">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0" name="optionpadbottom">
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="vform-bkclr">

                                                            <div class="dropdown-toggle-right " data-id="7">
                                                                <span class="css-bnio2e-Text" data-zds="true">Background Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="7">

                                                                <div class="vform-bkclr-main">
                                                                    <label>Background</label>
    
                                                                    <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue">
                                                                        <input type="color" name="divbkclr" class="customColorInput__select-input">
                                                                    </div>
    
                                                                </div>

                                                            </div>



                                                        </div>

                                                        <div class="vform-fileupload-sf">


                                                            <div class="dropdown-toggle-right " data-id="18">
                                                                <span class="css-bnio2e-Text" data-zds="true">File Upload Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="18">
                                                                <div>
                                                                    <label for="">File Type</label>
                                                                    <select id="filetypes" name="filetypes" multiple>
                                                                        <option value="jpg">JPG</option>
                                                                        <option value="jpeg">JPEG</option>
                                                                        <option value="png">PNG</option>
                                                                        <option value="gif">GIF</option>
                                                                        <option value="svg">SVG</option>
                                                                        <option value="bmp">BMP</option>
                                                                        <option value="webp">WEBP</option>
                                                                        <option value="mp4">MP4</option>
                                                                        <option value="mov">MOV</option>
                                                                        <option value="avi">AVI</option>
                                                                        <option value="mkv">MKV</option>
                                                                        <option value="wmv">WMV</option>
                                                                        <option value="flv">FLV</option>
                                                                        <option value="mp3">MP3</option>
                                                                        <option value="pdf">PDF</option>
                                                                        <option value="doc">DOC</option>
                                                                        <option value="docx">DOCX</option>
                                                                        <option value="xls">XLS</option>
                                                                        <option value="xlsx">XLSX</option>
                                                                        <option value="csv">CSV</option>
                                                                        <option value="ppt">PPT</option>
                                                                        <option value="pptx">PPTX</option>
                                                                    </select>
                                                                    <small>Note: Hold the Ctrl key (or Command key on Mac) or Shift key to select multiple options.</small>
                                                                </div>
                                                                <br>
                                                                <div>
                                                                    <label for="">File Size</label>
                                                                    <input type="text" name="filszeupload" placeholder="Ex: 5MB, 100KB, 1GB">
                                                                </div>
                                                                <div>
                                                                    <label for="">File Selection (Single/Multiple)</label>
                                                                    <select name="fileselection">
                                                                        <option value="single">Single</option>
                                                                        <option value="multiple">Multiple</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="vform-image-sf">


                                                            <div class="dropdown-toggle-right " data-id="24">
                                                                <span class="css-bnio2e-Text" data-zds="true">Image Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="24">

                                                                <label for="">Image Src</label>
                                                                <?php
                                                                    // Enqueue media uploader and custom script
                                                                        wp_enqueue_media(); // Enqueues WordPress media uploader scripts
                                                                        ?>
                                                                        <div class="vf-image-selection">
                                                                            <button type="button" id="vf-select-image" class="button">Select Image From Gallery</button>
                                                                        </div>
                                                                        <small style="color:#000;">Add jpg, png, webp, gif</small>
                                                            

                                                                <input type="text" id="vfinsideimage"
                                                                    placeholder="Ex: https://dumy.com/dumy.jpg"
                                                                    name="vfinsideimage">

                                                                <label for="">Width</label>
                                                                <!-- <small>Ex: 100px, 10%</small> -->
                                                                <input type="text" placeholder="Ex:100px, 10%"
                                                                    name="vfinsidewidth">

                                                                <label>Align</label>

                                                                <!-- <select name="imagealignment">
                                                                    <option value="left">Left</option>
                                                                    <option value="center">Center</option>
                                                                    <option value="right" selected="">Right</option>
                                                                </select> -->


                                                                 <div class="align-boxes-4 active" data-target="fieldoptionid">
                                                                    <div class="align-box-4" data-align="left" title="Align Left">
                                                                    <!-- Left Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="3" y="4" width="18" height="2"/>
                                                                        <rect x="3" y="9" width="12" height="2"/>
                                                                        <rect x="3" y="14" width="18" height="2"/>
                                                                        <rect x="3" y="19" width="12" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                    <div class="align-box-4" data-align="center" title="Align Center">
                                                                    <!-- Center Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="6" y="4" width="12" height="2"/>
                                                                        <rect x="3" y="9" width="18" height="2"/>
                                                                        <rect x="6" y="14" width="12" height="2"/>
                                                                        <rect x="3" y="19" width="18" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                    <div class="align-box-4" data-align="right" title="Align Right">
                                                                    <!-- Right Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="3" y="4" width="18" height="2"/>
                                                                        <rect x="9" y="9" width="12" height="2"/>
                                                                        <rect x="3" y="14" width="18" height="2"/>
                                                                        <rect x="9" y="19" width="12" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                </div>



                                                            </div>

                                                        </div>

                                                        <div class="vform-video-sf">

                                                            <div class="dropdown-toggle-right " data-id="23">
                                                                <span class="css-bnio2e-Text" data-zds="true">Video Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="23">
                                                                <label for="">Video Src</label>
                                                        
                                                                <div class="vf-image-selection">
                                                                    <button type="button" id="vf-select-video" class="button">Select Video From Gallery</button>
                                                                </div>

                                                                <input type="text" id="vfinsidevideo"
                                                                    placeholder="Ex: https://dumy.com/dumy.mp4"
                                                                    name="vfinsidevideo">

                                                                <label for="">Width</label>
                                                                <input type="text" placeholder="Ex:100px, 10%" name="vfinsidewidthvideo">
                                                                <label>Align</label>
                                                                
                                                                <!-- <select name="videoalignment">
                                                                    <option value="left">Left</option>
                                                                    <option value="center">Center</option>
                                                                    <option value="right" selected="">Right</option>
                                                                </select> -->

                                                                 <div class="align-boxes-5 active" data-target="fieldoptionid">
                                                                    <div class="align-box-5" data-align="left" title="Align Left">
                                                                    <!-- Left Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="3" y="4" width="18" height="2"/>
                                                                        <rect x="3" y="9" width="12" height="2"/>
                                                                        <rect x="3" y="14" width="18" height="2"/>
                                                                        <rect x="3" y="19" width="12" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                    <div class="align-box-5" data-align="center" title="Align Center">
                                                                    <!-- Center Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="6" y="4" width="12" height="2"/>
                                                                        <rect x="3" y="9" width="18" height="2"/>
                                                                        <rect x="6" y="14" width="12" height="2"/>
                                                                        <rect x="3" y="19" width="18" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                    <div class="align-box-5" data-align="right" title="Align Right">
                                                                    <!-- Right Align Icon -->
                                                                    <svg viewBox="0 0 24 24">
                                                                        <rect x="3" y="4" width="18" height="2"/>
                                                                        <rect x="9" y="9" width="12" height="2"/>
                                                                        <rect x="3" y="14" width="18" height="2"/>
                                                                        <rect x="9" y="19" width="12" height="2"/>
                                                                    </svg>
                                                                    </div>
                                                                </div>


                                                            </div>

                                                        </div>

                                                        <div class="vform-button-sf">

                                                            <div class="dropdown-toggle-right " data-id="6">
                                                                <span class="css-bnio2e-Text" data-zds="true">Button Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="6">
                                                                <input type="checkbox" name="vfbtnlinktarget"><span>Target Blank</span><br>

                                                                <div>

                                                                
                                                                    <label for="">Button Text</label>
                                                                    <input type="text" name="vfbtntext"><br>

                                                                    <label>Text Align</label>
                                                                    <select name="buttontextalignment">
                                                                        <option value="left">Left</option>
                                                                        <option value="center">Center</option>
                                                                        <option value="right" >Right</option>
                                                                    </select>
                                                                    <br>

                                                                    <label>Text Vertical Align</label>
                                                                    <select name="buttonverticalalignment">
                                                                        <option value="flex-start">Start</option>
                                                                        <option value="center">Center</option>
                                                                        <option value="flex-end">End</option>
                                                                    </select>
                                                                    <br>

                                                                     <label>Button Horizontal Align</label>
                                                                    <select name="buttonalignment">
                                                                        <option value="left">Start</option>
                                                                        <option value="center">Center</option>
                                                                        <option value="end">End</option>
                                                                    </select>
                                                                    <br>

                                                                    <label for="">Border Radius</label>
                                                                    <input type="text" name="vfbtnradius">


                                                                </div>

                                                                <div>
                                                                    <label for="">Text Transform</label>
                                                                    <select name="vfbtnlinktransform">
                                                                        <option value="initial">initial</option>
                                                                        <option value="capitalize">Capitalize</option>
                                                                        <option value="uppercase">UPPERCASE</option>
                                                                        <option value="lowercase">lowercase</option>
                                                                    </select>
                                                                </div>

                                                                <div>
                                                                    <label for="">Font Size</label>
                                                                    <!-- <small>Ex: 12px, 1rem</small> -->
                                                                    <input type="text" value="14px"
                                                                        placeholder="Ex: 12px, 1rem" name="vfbtnfontsize">
                                                                </div>

                                                                <div>
                                                                
                                                                    <label for="">Background color</label>

                                                                        <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_2">
                                                                        <input type="color" name="vfbtnbkcolor" class="customColorInput__select-input">
                                                                    </div>

                                                                    <label>Transparency</label>
                                                                    <input type="range" name="vfbtnalpha" min="0" max="1" step="0.01" value="1">

                                                                </div>

                                                                <div>
                                                                    <label for="">Color</label>
                                                                    <!-- <small>Ex: #000000, red, rgb(0,0,0)</small> -->
                                                                    <!-- <input type="text" name="vfbtnlinkcolor" placeholder="#fff"> -->
                                                                    <!-- <input type="color" name="vfbtnlinkcolor"> -->

                                                                    <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_3">
                                                                        <input type="color" name="vfbtnlinkcolor" class="customColorInput__select-input">
                                                                    </div>

                                                                </div>

                                                                <div>
                                                                    <label for="">Link</label>
                                                                    <!-- <small>Ex: https://google.com/</small> -->
                                                                    <input type="text" name="vfbtnlinklink"
                                                                        placeholder="Ex: https://google.com/">
                                                                </div>

                                                                <div>
                                                                    <!-- <label for="" class="vform-lbfont">Padding</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">
                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0px" name="vfbtnpaddingtop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0px" name="vfbtnpaddingleft">
                                                                                </div>
                                                                            <div class="center">PADDING</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0px" name="vfbtnpaddinght">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0px" name="vfbtnpaddingbottom">
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="vform-link-sf">

                                                            <div class="dropdown-toggle-right " data-id="20">
                                                                <span class="css-bnio2e-Text" data-zds="true">Link Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="20">
                                                                <input type="checkbox" name="linktarget"><span>Target Blank</span><br>

                                                                <div>
                                                                    <label for="">Link Text</label>
                                                                    <input type="text" name="vfanchortext"><br>
                                                                </div>

                                                                <input type="checkbox" name="linkunderline"><span>No underline</span>

                                                                <div>
                                                                    <label for="">Text Transform</label>
                                                                    <select name="linktransform">
                                                                        <option value="initial">initial</option>
                                                                        <option value="capitalize">capitalize</option>
                                                                        <option value="uppercase">uppercase</option>
                                                                        <option value="lowercase">lowercase</option>
                                                                    </select>
                                                                </div>

                                                                <div>
                                                                    <label for="">Font Size</label>
                                                                    <input type="text" value="" placeholder="Ex: 12px, 1rem"
                                                                        name="linksize">
                                                                </div>

                                                                <div>
                                                                    <label for="">color</label>
                                                                    <!-- <input type="color" name="linkcolor"> -->

                                                                     <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_10">
                                                                        <input type="color" name="linkcolor" class="customColorInput__select-input">
                                                                    </div>

                                                                </div>

                                                                <div>
                                                                    <label for="">Link</label>
                                                                    <!-- <small>Ex: https://google.com/</small> -->
                                                                    <input type="text" name="linklink"
                                                                        placeholder="Ex: https://google.com/">
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="vform-termscondition-sf">

                                                            <div class="dropdown-toggle-right " data-id="22">
                                                                <span class="css-bnio2e-Text" data-zds="true">Terms & Conditions Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="22">

                                                                <input type="checkbox" name="termsconditionalreadycheck"><span>Already Checked</span>
                                                                <div >
                                                                    <label>Content</label>
                                                                    <input type="text" value="" name="termsconditiontext">


                                                                    <label>Which part do you want the hyperlink?</label>
                                                                    <input type="text" value="" placeholder="ex: agree" name="termsconditionanchor">
                                                                    <label>Your hyperlink Url here</label>
                                                                    <input type="text" value="" placeholder="ex: https://test.com/" name="termsconditionanchorurl">



                                                                    <div class="vf-mar-sf">

                                                                        <span>
                                                                            <label for="">Font Size</label>
                                                                            <input type="text" value=""
                                                                                placeholder="Ex: 12px, 1rem"
                                                                                name="termsconditionsize">
                                                                        </span>
                                                                        <span>
                                                                            <label>Line Height</label>
                                                                            <input type="text"
                                                                                name="termsconditionlineheight"
                                                                                placeholder="Ex: 12px, 1rem" id="">
                                                                        </span>

                                                                    </div>

                                                                    <label for="">color</label>
                                                                    <!-- <input type="color" name="termsconditioncolor"> -->

                                                                     <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_11">
                                                                        <input type="color" name="termsconditioncolor" class="customColorInput__select-input">
                                                                    </div>
                                                                    <br>

                                                                    <div class="vf-mar-sf">

                                                                        <span>
                                                                            <label for="">Text Transform</label>
                                                                            <select name="termsconditiontransform">
                                                                                <option value="initial">initial</option>
                                                                                <option value="capitalize">capitalize
                                                                                </option>
                                                                                <option value="uppercase">uppercase</option>
                                                                                <option value="lowercase">lowercase</option>
                                                                            </select>
                                                                        </span>
                                                                        <span>
                                                                            <label>Align</label>
                                                                            <select name="termsconditionalignment">
                                                                                <option value="left">Left</option>
                                                                                <option value="center">Center</option>
                                                                                <option value="end" selected="">Right
                                                                                </option>
                                                                            </select>
                                                                        </span>

                                                                    </div>



                                                                    <!-- <label class="vform-lbfont">Margin</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">
                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0" name="termsconditionmartop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0" name="termsconditionmarleft">
                                                                                </div>
                                                                            <div class="center">MARGIN</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0" name="termsconditionmarrht">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0" name="termsconditionmarbottom">
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <!-- <label for="" class="vform-lbfont">Padding</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">

                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0" name="termsconditionpaddingtop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0" name="termsconditionpaddingleft">
                                                                                </div>
                                                                            <div class="center">PADDING</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0" name="termsconditionpaddinght">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0" name="termsconditionpaddingbottom">
                                                                            </div>
                                                                        </div>
                                                                        
                                                                    </div>


                                                                </div>

                                                            </div>
                                                            <!-- <div class="vform-fieldsz-sf">
                                                                <label>Field Size</label>
                                                                <input type="text" name="adfieldsize" value="">
                                                            </div> -->

                                                        </div>

                                                        <div class="vform-divider-inf">

                                                            <div class="dropdown-toggle-right " data-id="13">
                                                                <span class="css-bnio2e-Text" data-zds="true">Divider Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="13">
                                                                <div>
                                                                    <label>Width</label>
                                                                    <!-- <small>Ex: 10px, 50%</small> -->
                                                                    <input type="text" name="dividerwidth"
                                                                        placeholder="Ex: 10px, 50%">
                                                                </div>

                                                                <div>
                                                                    <label>Background</label>
                                                                    <!-- <small>Ex: #000000, red, rgba(255,255,255)</small> -->
                                                                    <!-- <input type="text" name="dividercolor" placeholder="Divider background Ex: #000000, red, rgba(255,255,255)"> -->
                                                                    <input type="color" name="dividercolor">
                                                                </div>

                                                                <div>
                                                                    <label>Height</label>
                                                                    <!-- <small>Ex: 10px</small> -->
                                                                    <input type="text" name="dividerheight"
                                                                        placeholder="Ex: 10px">
                                                                </div>

                                                                <div>
                                                                    <label>Radius</label>
                                                                    <!-- <small>Ex: 25px</small> -->
                                                                    <input type="text" name="dividerradius"
                                                                        placeholder="Ex: 25px">
                                                                </div>
                                                            </div>

                                                        </div>

                                                       

                                                        <div class="vform-label-sf" >

                                                            <div class="dropdown-toggle-right " data-id="1">
                                                                <span class="css-bnio2e-Text" data-zds="true">Label Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="1">
                                                                    <label>Label</label>
                                                                    <input type="text" name="optionname" />

                                                                    <div class="vf-mar-sf">
                                                                        <span>
                                                                            <label>Font Size</label>
                                                                            <input type="text" name="labelfontsize"
                                                                                placeholder="Ex: 12px, 1rem" id="">
                                                                        </span>


                                                                        <span>
                                                                            <label>Line Height</label>
                                                                            <input type="text" name="labellineheight"
                                                                                placeholder="Ex: 12px, 1rem" id="">
                                                                        </span>
                                                                    </div>
                                                                
                                                                    <div>
                                                                        <!-- <label>Align</label>
                                                                        <select name="labelalignment">
                                                                            <option value="left">Left</option>
                                                                            <option value="center">Center</option>
                                                                            <option value="right" selected="">Right</option>
                                                                        </select> -->
                                                                        <span>
                                                                        <label>Align</label>
                                                                        <div class="align-boxes active" data-target="fieldoptionid">
                                                                            <div class="align-box" data-align="left" title="Align Left">
                                                                            <!-- Left Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="3" y="4" width="18" height="2"/>
                                                                                <rect x="3" y="9" width="12" height="2"/>
                                                                                <rect x="3" y="14" width="18" height="2"/>
                                                                                <rect x="3" y="19" width="12" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                            <div class="align-box" data-align="center" title="Align Center">
                                                                            <!-- Center Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="6" y="4" width="12" height="2"/>
                                                                                <rect x="3" y="9" width="18" height="2"/>
                                                                                <rect x="6" y="14" width="12" height="2"/>
                                                                                <rect x="3" y="19" width="18" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                            <div class="align-box" data-align="right" title="Align Right">
                                                                            <!-- Right Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="3" y="4" width="18" height="2"/>
                                                                                <rect x="9" y="9" width="12" height="2"/>
                                                                                <rect x="3" y="14" width="18" height="2"/>
                                                                                <rect x="9" y="19" width="12" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                        </div>
                                                                        </span>
                                                                    </div>

                                                                    <!-- <label style="margin-top: 15px;">Margin</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">
                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                            <input type="text" placeholder="0px" name="labelmartop">
                                                                            </div>
                                                                            <div class="middle">
                                                                            <div class="left">
                                                                                <input type="text" placeholder="0px" name="labelmarleft">
                                                                            </div>
                                                                            <div class="center">MARGIN</div>
                                                                            <div class="right">
                                                                                <input type="text" placeholder="0px" name="labelmarrht">
                                                                            </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                            <input type="text" placeholder="0px" name="labelmarbottom">
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <label for="">color</label>
                                                                    <!-- <input type="color" name="vflabelcolor"> -->

                                                                    <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_7">
                                                                        <input type="color" name="vflabelcolor" class="customColorInput__select-input">
                                                                    </div>

                                                                    <label><input type="checkbox" name="optionhidelabel"> Hide
                                                                        Label </label>

                                                            </div>

                                                        </div>

                                                        <div class="vform-dateformat-sf">

                                                            <div class="dropdown-toggle-right " data-id="15">
                                                                <span class="css-bnio2e-Text" data-zds="true">Date Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="15">

                                                                <label>Date Format</label>
                                                                <select name="vformdateformat">
                                                                    <option value="mm/dd/yy">Default - mm/dd/yy</option>
                                                                    <option value="dd/mm/yy">dd/mm/yy</option>
                                                                    <option value="dd-mm-yy">dd-mm-yy</option>
                                                                    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
                                                                    <option value="d M, y">Short - d M, y</option>
                                                                    <option value="d MM, y">Medium - d MM, y</option>
                                                                    <option value="DD, d MM, yy">Full - DD, d MM, yy
                                                                    </option>
                                                                    <option value="'day' d 'of' MM 'in the year' yy">With
                                                                        text - 'day' d 'of' MM 'in the year' yy</option>
                                                                    <option value="dd/mm/yy">dd/mm/yy</option>

                                                                    <option value="dd/yy/mm">dd/yy/mm</option>
                                                                    <option value="mm/yy/dd">mm/yy/dd</option>
                                                                    <option value="yy/dd/mm">yy/dd/mm</option>
                                                                    <option value="yy/mm/dd">yy/mm/dd</option>
                                                                    <option value="dd-yy-mm">dd-yy-mm</option>
                                                                    <option value="mm-dd-yy">mm-dd-yy</option>
                                                                    <option value="mm-yy-dd">mm-yy-dd</option>
                                                                    <option value="yy-dd-mm">yy-dd-mm</option>
                                                                    <option value="yy-mm-dd">yy-mm-dd</option>
                                                                </select>

                                                                <label>Date Formater Color</label>
                                                                <input type="text" placeholder="Ex: #000000" name="vformdateformat-color">

                                                            </div>

                                                        </div>

                                                        <div class="vform-dropdown-sf">

                                                            <div class="dropdown-toggle-right " data-id="27">
                                                                <span class="css-bnio2e-Text" data-zds="true">Choices Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="27">

                                                                <label>Choices</label>
                                                                <div class="vform-choice-dropdown">
                                                                    <input type="text">
                                                                    <span class="dropidown"><i class="fa fa-plus"
                                                                            aria-hidden="true"></i></span>
                                                                </div>
                                                                <div class="vform-dropdown-value">
                                                                    <div>First Choice<i class="fa fa-times thisparemove"
                                                                            aria-hidden="true"></i></div>
                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="vform-multichoice-sf">

                                                            <div class="dropdown-toggle-right " data-id="25">
                                                                <span class="css-bnio2e-Text" data-zds="true">Multiple Choice Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="25">
                                                                <label>Choices</label>
                                                                <div class="vform-choice-multi">
                                                                    <input type="text">
                                                                    <span class="multiichoice">
                                                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                                                    </span>
                                                                </div>
                                                                <div>
                                                                    <label>Image Option (optional)</label>
                                                                    <input class="vform-placeholder-image" type="text" placeholder="https://dummyimage.com/16:9x1080/">
                                                                </div>

                                                                <div class="vform-multichoice-value">
                                                                    <div>First Choice<i class="fa fa-times thismultimove"
                                                                            aria-hidden="true"></i></div>
                                                                    <div>Second Choice<i class="fa fa-times thismultimove"
                                                                            aria-hidden="true"></i></div>
                                                                    <div>Third Choice<i class="fa fa-times thismultimove"
                                                                            aria-hidden="true"></i></div>
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="vform-checkbox-sf">
                                                            <label>Choices</label>
                                                            <div class="vform-checkbox-multi">
                                                                <input type="text">
                                                                <span class="multicheckbox"><i class="fa fa-plus"
                                                                        aria-hidden="true"></i></span>
                                                            </div>
                                                            <div>
                                                                <label>Image Option (optional)</label>
                                                                <input class="vform-checkboxplaceholder-image" type="text" placeholder="https://dummyimage.com/16:9x1080/">
                                                            </div>
                                                            <div class="vform-multicheckbox-value">
                                                                <div>First Choice<i class="fa fa-times thischeckbox"
                                                                        aria-hidden="true"></i></div>
                                                                <div>Second Choice<i class="fa fa-times thischeckbox"
                                                                        aria-hidden="true"></i></div>
                                                                <div>Third Choice<i class="fa fa-times thischeckbox"
                                                                        aria-hidden="true"></i></div>
                                                            </div>
                                                        </div>

                                                        <div class="vform-format-sf">
                                                            <label>Format</label>
                                                            <select name="adfieldformat">
                                                                <option value="simple">Simple</option>
                                                                <option value="firstlast">First Last</option>
                                                                <option value="firstmiddlelast" selected>First Middle
                                                                    Last</option>
                                                                <option value="combomiddlelast">First + Middle Last</option>
                                                            </select>
                                                        </div>

                                                        <div class="vform-standard-required">
                                                            <div class="dropdown-toggle-right " data-id="10">
                                                                <span class="css-bnio2e-Text" data-zds="true">Required Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="10">
                                                                <label class="inline">Required</label>
                                                                <div class="vf-requir">
                                                                <label>
                                                                    <input type="radio" name="optionrequired" value="yes"> Yes
                                                                </label>
                                                                <label>
                                                                    <input type="radio" name="optionrequired" value="no" checked> No
                                                                </label>
                                                                </div>
                                                            </div>


                                                        </div>

                                                        <div class="vform-standard-bottom">

                                                            <div class="dropdown-toggle-right " data-id="2">
                                                                <span class="css-bnio2e-Text" data-zds="true">Description Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="2">
                                                                <label>Description</label>
                                                                <textarea row="3" name="optiondescription"></textarea>

                                                                <div class="vf-mar-sf">

                                                                    <span>
                                                                        <label>Font Size</label>
                                                                        <input type="text" name="descrfontsize"
                                                                            placeholder="Ex: 12px, 1rem" id="">
                                                                    </span>
                                                                    <!-- <span>
                                                                        <label>Align</label>
                                                                        <select name="descralignment">
                                                                            <option value="left">Left</option>
                                                                            <option value="center">Center</option>
                                                                            <option value="right" selected="">Right</option>
                                                                        </select>
                                                                    </span> -->
                                                                    <span>
                                                                        <label>Line Height</label>
                                                                        <input type="text" name="descrlineheight"
                                                                            placeholder="Ex: 12px, 1rem" id="">
                                                                    </span>

                                                                </div>

                                                                <div>
                                                                    <span>
                                                                        <label>Align</label>
                                                                        <div class="align-boxes-2 active" data-target="fieldoptionid">
                                                                            <div class="align-box-2" data-align="left" title="Align Left">
                                                                            <!-- Left Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="3" y="4" width="18" height="2"/>
                                                                                <rect x="3" y="9" width="12" height="2"/>
                                                                                <rect x="3" y="14" width="18" height="2"/>
                                                                                <rect x="3" y="19" width="12" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                            <div class="align-box-2" data-align="center" title="Align Center">
                                                                            <!-- Center Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="6" y="4" width="12" height="2"/>
                                                                                <rect x="3" y="9" width="18" height="2"/>
                                                                                <rect x="6" y="14" width="12" height="2"/>
                                                                                <rect x="3" y="19" width="18" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                            <div class="align-box-2" data-align="right" title="Align Right">
                                                                            <!-- Right Align Icon -->
                                                                            <svg viewBox="0 0 24 24">
                                                                                <rect x="3" y="4" width="18" height="2"/>
                                                                                <rect x="9" y="9" width="12" height="2"/>
                                                                                <rect x="3" y="14" width="18" height="2"/>
                                                                                <rect x="9" y="19" width="12" height="2"/>
                                                                            </svg>
                                                                            </div>
                                                                        </div>
                                                                        </span>
                                                                    </div>

                                                                <!-- <label style="margin-top:15px;">Margin</label> -->
                                                                <div class="vf-descr-sf vf-onlymar">

                                                                    <div class="margin-box">
                                                                        <div class="top">
                                                                            <input type="text" placeholder="0" name="descrmartop">
                                                                        </div>
                                                                        <div class="middle">
                                                                            <div class="left">
                                                                                <input type="text" placeholder="0" name="descrmarleft">
                                                                            </div>
                                                                        <div class="center">MARGIN</div>
                                                                            <div class="right">
                                                                                <input type="text" placeholder="0" name="descrmarrht">
                                                                            </div>
                                                                        </div>
                                                                        <div class="bottom">
                                                                            <input type="text" placeholder="0" name="descrmarbottom">
                                                                        </div>
                                                                    </div>

                                                                    <!-- <span>
                                                                        <label>Top</label>
                                                                        <input type="text" name="descrmartop">
                                                                    </span>
                                                                    <span>
                                                                        <label>Bottom</label>
                                                                        <input type="text" name="descrmarbottom">
                                                                    </span>
                                                                    <span>
                                                                        <label>Left</label>
                                                                        <input type="text" name="descrmarleft">
                                                                    </span>
                                                                    <span>
                                                                        <label>Right</label>
                                                                        <input type="text" name="descrmarrht">
                                                                    </span> -->

                                                                </div>

                                                                <label for="">color</label>
                                                                <!-- <input type="color" name="vfdescrcolor"> -->
                                                                <div class="customColorInput">
                                                                    <input type="text" class="customColorInput__text-input jsColorValue_8">
                                                                    <input type="color" name="vfdescrcolor" class="customColorInput__select-input">
                                                                </div>
                                                            </div>
                                                        </div>



                                                        <div class="vform-submit-sf">

                                                            <div class="dropdown-toggle-right " data-id="19">
                                                                <span class="css-bnio2e-Text" data-zds="true">Submit Button Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="19">

                                                                <div>
                                                                    <label for="">Text Transform</label>
                                                                    <select name="vfsubmitbtnlinktransform">
                                                                        <option value="initial">initial</option>
                                                                        <option value="capitalize">Capitalize</option>
                                                                        <option value="uppercase">UPPERCASE</option>
                                                                        <option value="lowercase">lowercase</option>
                                                                    </select>
                                                                </div>

                                                                <div>
                                                                    <label for="">Font Size</label>
                                                                    <input type="text" value="14px"
                                                                        placeholder="Ex: 12px, 1rem"
                                                                        name="vfsubmitbtnfontsize">
                                                                </div>

                                                                <div>
                                                                    <label for="">Background color</label>
                                                                    <!-- <input type="color" name="vfsubmitbtnbkcolor"> -->

                                                                    <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_4">
                                                                        <input type="color" name="vfsubmitbtnbkcolor" class="customColorInput__select-input">
                                                                    </div>
                                                                    
                                                                    <label class="translabel">Transparency</label>
                                                                    <input type="range" name="vfsubmitbtnalpha" min="0" max="1" step="0.01" value="1">
                                                                </div>

                                                                <div>
                                                                    <label for="">color</label>
                                                                    <!-- <input type="color" name="vfsubmitbtnlinkcolor"> -->

                                                                    <div class="customColorInput">
                                                                        <input type="text" class="customColorInput__text-input jsColorValue_5">
                                                                        <input type="color" name="vfsubmitbtnlinkcolor" class="customColorInput__select-input">
                                                                    </div>

                                                                </div>

                                                                <div>
                                                                    <br>
                                                                    <label for="">Align</label>
                                                                    <!-- <select name="submitbtnalignment">
                                                                        <option value="left">Left</option>
                                                                        <option value="center">Center</option>
                                                                        <option value="right" selected="">Right</option>
                                                                    </select> -->

                                                                     <div class="align-boxes-6 active" data-target="fieldoptionid">
                                                                        <div class="align-box-6" data-align="left" title="Align Left">
                                                                        <!-- Left Align Icon -->
                                                                        <svg viewBox="0 0 24 24">
                                                                            <rect x="3" y="4" width="18" height="2"/>
                                                                            <rect x="3" y="9" width="12" height="2"/>
                                                                            <rect x="3" y="14" width="18" height="2"/>
                                                                            <rect x="3" y="19" width="12" height="2"/>
                                                                        </svg>
                                                                        </div>
                                                                        <div class="align-box-6" data-align="center" title="Align Center">
                                                                        <!-- Center Align Icon -->
                                                                        <svg viewBox="0 0 24 24">
                                                                            <rect x="6" y="4" width="12" height="2"/>
                                                                            <rect x="3" y="9" width="18" height="2"/>
                                                                            <rect x="6" y="14" width="12" height="2"/>
                                                                            <rect x="3" y="19" width="18" height="2"/>
                                                                        </svg>
                                                                        </div>
                                                                        <div class="align-box-6" data-align="right" title="Align Right">
                                                                        <!-- Right Align Icon -->
                                                                        <svg viewBox="0 0 24 24">
                                                                            <rect x="3" y="4" width="18" height="2"/>
                                                                            <rect x="9" y="9" width="12" height="2"/>
                                                                            <rect x="3" y="14" width="18" height="2"/>
                                                                            <rect x="9" y="19" width="12" height="2"/>
                                                                        </svg>
                                                                        </div>
                                                                    </div>
                                                                    <br>
                                                                </div>

                                                                <div>
                                                                    <label for="">Width</label>
                                                                    <input type="text" name="vfsubmitbtnlinkwidth"
                                                                        placeholder="Ex: auto, 40px">
                                                                </div>

                                                                <div>
                                                                    <label for="">Height</label>
                                                                    <!-- <small>Ex: auto, 40px</small> -->
                                                                    <input type="text" name="vfsubmitbtnlinkheight"
                                                                        placeholder="Ex: auto, 40px">
                                                                </div>

                                                                <div>
                                                                    <!-- <label for="" class="vform-lbfont">Margin</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">
                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0" name="vfsubmitbtnmargintop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0" name="vfsubmitbtnmarginleft">
                                                                                </div>
                                                                            <div class="center">MARGIN</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0" name="vfsubmitbtnmarginht">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0" name="vfsubmitbtnmarginbottom">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                   
                                                                </div>

                                                                <div>
                                                                    <!-- <label class="vform-lbfont" for="">Padding</label> -->
                                                                    <div class="vf-mar-sf vf-onlymar">

                                                                        <div class="margin-box">
                                                                            <div class="top">
                                                                                <input type="text" placeholder="0" name="vfsubmitbtnpaddingtop">
                                                                            </div>
                                                                            <div class="middle">
                                                                                <div class="left">
                                                                                    <input type="text" placeholder="0" name="vfsubmitbtnpaddingleft">
                                                                                </div>
                                                                            <div class="center">PADDING</div>
                                                                                <div class="right">
                                                                                    <input type="text" placeholder="0" name="vfsubmitbtnpaddinght">
                                                                                </div>
                                                                            </div>
                                                                            <div class="bottom">
                                                                                <input type="text" placeholder="0" name="vfsubmitbtnpaddingbottom">
                                                                            </div>
                                                                        </div>
                                                                       
                                                                    </div>
                                                                </div>

                                                            </div>


                                                        </div>
                                                    </div>

                                                    <div class="vform-repeater-field">

                                                        <div class="dropdown-toggle-right " data-id="17">
                                                            <span class="css-bnio2e-Text" data-zds="true">Repeater Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>

                                                        <div class="dropdown-menu-right show" data-id="17">
                                                            <label>Repeater Button text</label>
                                                            <input type="text" name="vferpeaterfield">
                                                        </div>

                                                    </div>

                                                    <div class="vform-changecolumnsize-ao">

                                                        <div class="dropdown-toggle-right " data-id="26">
                                                            <span class="css-bnio2e-Text" data-zds="true">Column Size Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="26">
                                                            <label>Column Size</label>
                                                            <select name="changecolumnsizesel">
                                                                <option value="1column">1 Column</option>
                                                                <option value="2column">2 Column</option>
                                                                <option value="3column">3 Column</option>
                                                                <option value="4column">4 Column</option>
                                                                <option value="6column">6 Column</option>
                                                            </select>
                                                        </div>

                                                    </div>

                                                    <div class="vform-fieldsize-ao">
                                                        <div class="dropdown-toggle-right " data-id="8">
                                                            <span class="css-bnio2e-Text" data-zds="true">Field Size (Width) Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="8">
                                                            <label>Field Size (Width)</label>
                                                            <input type="text" name="adfieldsize" value="">
                                                        </div>
                                                    </div>

                                                    <div class="vform-inputwidthheight-sf">

                                                        <div class="dropdown-toggle-right " data-id="9">
                                                            <span class="css-bnio2e-Text" data-zds="true">Width & Height Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="9">
                                                            <label for="">Input Width</label>
                                                            <input type="text" name="vfinputwidth">
                                                            <label for="">Input Height</label>
                                                            <input type="text" name="vfinputheight">
                                                        </div>

                                                    </div>

                                                    <div class="vform-bordrraidusinponlyforhr-ao">

                                                        <div class="dropdown-toggle-right " data-id="14">
                                                            <span class="css-bnio2e-Text" data-zds="true">Border Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="14">
                                                            <div class="vf-mar-sf">
                                                                <span>
                                                                    <label>Border width</label>
                                                                    <input type="text" name="bordrwdthinp" />
                                                                </span>
                                                                <span>
                                                                    <label>Border Style</label>
                                                                    <select name="bordrstyle">
                                                                        <option value="none">None</option>
                                                                        <option value="solid">Solid</option>
                                                                        <option value="dashed">Dashed</option>
                                                                        <option value="dotted">Dotted</option>
                                                                        <option value="double">Double</option>
                                                                    </select>
                                                                </span>
                                                            </div>
                                                            <label>Border color</label>
                                                            <input type="color" name="bordrcolor" />
                                                        </div>

                                                    </div>

                                                    <div class="advancedoptionfield">
                                                        


                                                        <div class="vform-allname-ao">

                                                            <div class="vform-ao-first">
                                                                <label>First Name</label>
                                                                <div class="labelfullname">
                                                                    <input type="text" name="userfrstnamedfvallabel"
                                                                        value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Label</label>
                                                                </div>
                                                                <div class="placeholder">
                                                                    <input type="text" class="placeholder"
                                                                        name="userfrstname" value="">
                                                                    <label for="vform-field-option-8-first_placeholder"
                                                                        class="sub-label">Placeholder</label>
                                                                </div>
                                                                <div class="default">
                                                                    <input type="text" class="default"
                                                                        name="userfrstnamedfval" value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Default Value</label>
                                                                </div>
                                                            </div>

                                                            <div class="vform-ao-middle">
                                                                <label>Middle Name</label>
                                                                <div class="labelfullname">
                                                                    <input type="text" name="usermidddlenamedfvallabel"
                                                                        value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Label</label>
                                                                </div>
                                                                <div class="placeholder">
                                                                    <input type="text" class="placeholder"
                                                                        name="usermiddlename" value="">
                                                                    <label for="vform-field-option-8-first_placeholder"
                                                                        class="sub-label">Placeholder</label>
                                                                </div>
                                                                <div class="default">
                                                                    <input type="text" class="default"
                                                                        name="usermiddlenamedfval" value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Default Value</label>
                                                                </div>
                                                            </div>

                                                            <div class="vform-ao-last">
                                                                <label>Last Name</label>
                                                                <div class="labelfullname">
                                                                    <input type="text" name="userlastnamedfvallabel"
                                                                        value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Label</label>
                                                                </div>
                                                                <div class="placeholder">
                                                                    <input type="text" class="placeholder"
                                                                        name="userlastnam" value="">
                                                                    <label for="vform-field-option-8-first_placeholder"
                                                                        class="sub-label">Placeholder</label>
                                                                </div>
                                                                <div class="default">
                                                                    <input type="text" class="default"
                                                                        name="userlastnamdfval" value="">
                                                                    <label for="vform-field-option-8-first_default"
                                                                        class="sub-label">Default Value</label>
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="vform-placeholder-ao">

                                                            <div class="dropdown-toggle-right " data-id="11">
                                                                <span class="css-bnio2e-Text" data-zds="true">Placeholder Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            
                                                            <div class="dropdown-menu-right show" data-id="11">
                                                                <label>Placeholder Text</label>
                                                                <input type="text" name="optionplaceholder" />
                                                            </div>
                                                            
                                                        </div>

                                                        <div class="vform-bordrraidusinp-ao">

                                                            <div class="dropdown-toggle-right " data-id="4">
                                                                <span class="css-bnio2e-Text" data-zds="true">Border Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="4">

                                                                <label>Input Border Radius</label>
                                                                <input type="text" name="bordrraidusinp" />

                                                                <div class="vf-mar-sf">
                                                                    <span>
                                                                        <label>Input Border width</label>
                                                                        <input type="text" name="bordrwdthinp" />
                                                                    </span>
                                                                    <span>
                                                                        <label>Input Border Style</label>
                                                                        <select name="bordrstyle">
                                                                            <option value="none">None</option>
                                                                            <option value="solid">Solid</option>
                                                                            <option value="dashed">Dashed</option>
                                                                            <option value="dotted">Dotted</option>
                                                                            <option value="double">Double</option>
                                                                        </select>
                                                                    </span>
                                                                </div>
                                                                <label>Input Border color</label>
                                                                <!-- <input type="color" name="bordrcolor" /> -->

                                                                <div class="customColorInput">
                                                                    <input type="text" class="customColorInput__text-input jsColorValue_6">
                                                                    <input type="color" name="bordrcolor" class="customColorInput__select-input">
                                                                </div>

                                                            </div>

                                                        </div>


                                                        <!-- for address -->
                                                        <div class="vform-address-ao">

                                                            <div class="dropdown-toggle-right " data-id="16">
                                                                <span class="css-bnio2e-Text" data-zds="true">Address Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>

                                                            <div class="dropdown-menu-right show" data-id="16">
                                                                <div>
                                                                    <label>Full Address</label>
                                                                    <div class="placeholder">
                                                                        <label for="vform-field-option-8-first_placeholder"
                                                                            class="sub-label">Placeholder</label>
                                                                        <input type="text" class="placeholder"
                                                                            name="userfulladdress" value="">
                                                                    </div>
                                                                    <div class="default">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="sub-label">Default Value</label>
                                                                        <input type="text" class="default"
                                                                            name="userfulladdressval" value="">
                                                                    </div>
                                                                    <div class="hideadd">
                                                                        <input type="checkbox" class="inline"
                                                                            name="userfulladdressvalhide" value="">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="inline">Hide Full address</label>
                                                                    </div>
                                                                </div>

                                                                <div>
                                                                    <label>City</label>
                                                                    <div class="placeholder">
                                                                        <label for="vform-field-option-8-first_placeholder"
                                                                            class="sub-label">Placeholder</label>
                                                                        <input type="text" class="placeholder"
                                                                            name="usercity" value="">
                                                                    </div>
                                                                    <div class="default">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="sub-label">Default Value</label>
                                                                        <input type="text" class="default"
                                                                            name="usercityval" value="">
                                                                    </div>
                                                                    <div class="hideadd">
                                                                        <input type="checkbox" class="inline"
                                                                            name="usercityvalhide" value="">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="inline">Hide City</label>
                                                                    </div>
                                                                </div>

                                                                <div>
                                                                    <label>State</label>
                                                                    <div class="placeholder">
                                                                        <label for="vform-field-option-8-first_placeholder"
                                                                            class="sub-label">Placeholder</label>
                                                                        <input type="text" class="placeholder"
                                                                            name="userstate" value="">
                                                                    </div>
                                                                    <div class="default">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="sub-label">Default Value</label>
                                                                        <input type="text" class="default"
                                                                            name="userstateval" value="">
                                                                    </div>
                                                                    <div class="hideadd">
                                                                        <input type="checkbox" class="inline"
                                                                            name="userstatevalhide" value="">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="inline">Hide State</label>
                                                                    </div>
                                                                </div>

                                                                <div>
                                                                    <label>Zip</label>
                                                                    <div class="placeholder">
                                                                        <label for="vform-field-option-8-first_placeholder"
                                                                            class="sub-label">Placeholder</label>
                                                                        <input type="text" class="placeholder"
                                                                            name="userzip" value="">
                                                                    </div>
                                                                    <div class="default">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="sub-label">Default Value</label>
                                                                        <input type="text" class="default" name="userzipval"
                                                                            value="">
                                                                    </div>
                                                                    <div class="hideadd">
                                                                        <input type="checkbox" class="inline"
                                                                            name="userzipvalhide" value="">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="inline">Hide Zip</label>
                                                                    </div>
                                                                    <div class="hideadd">
                                                                        <input type="checkbox" class="inline"
                                                                            name="usercountryhide" value="">
                                                                        <label for="vform-field-option-8-first_default"
                                                                            class="inline">Hide Country</label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <!-- for address -->

                                                        <div class="vform-defaultvalue-ao">

                                                            <div class="dropdown-toggle-right " data-id="12">
                                                                <span class="css-bnio2e-Text" data-zds="true">Default Value Settings</span>
                                                                <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                                </svg>
                                                            </div>
                                                            <div class="dropdown-menu-right show" data-id="12">
                                                                <label>Default Value</label>
                                                                <input type="text" name="optiondefaultvalue">
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="vform-numberminmax-sf">

                                                        <div class="dropdown-toggle-right " data-id="21">
                                                            <span class="css-bnio2e-Text" data-zds="true">Slider Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="21">
                                                            <div class="vf-mar-sf">
                                                                <span>
                                                                    <label>Min</label>
                                                                    <input type="text" name="vfnumbermin">
                                                                </span>
                                                                <span>
                                                                    <label>Max</label>
                                                                    <input type="text" name="vfnumbermax">
                                                                </span>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="vform-icons-ao">

                                                        <div class="dropdown-toggle-right " data-id="3">
                                                            <span class="css-bnio2e-Text" data-zds="true">Icon Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="3">

                                                            <div class="icon-selector">
                                                                <label for="icon-select">Select Icon:</label>
                                                                <input type="text" id="icon-search"
                                                                    placeholder="Search Icons..." onkeyup="filterIcons()">
                                                                <div class="custom-select">
                                                                    <div class="select-box" data-icon="noicon">
                                                                        Remove icon
                                                                    </div>
                                                                    <?php
                                                                
                                                                        
                                                                include VFORM_PLUGIN_PATH."inc/admin/builder/icon-list.php";

                                                                
                                                                

                                                                foreach ($icons as $icon) {
                                                                    echo '<div class="select-box" data-icon="' . esc_attr($icon) . '">
                                                                                <i class="fa ' . esc_attr($icon) . '"></i>
                                                                            </div>';
                                                                }
                                                                    ?>
                                                                </div>
                                                            </div>
                                                            <script>
                                                                function filterIcons() {
                                                                    const searchQuery = document.getElementById(
                                                                        "icon-search").value.toLowerCase();
                                                                    const iconBoxes = document.querySelectorAll(
                                                                        ".select-box");

                                                                    iconBoxes.forEach((box) => {
                                                                        const iconName = box.getAttribute(
                                                                            "data-icon").toLowerCase();
                                                                        if (iconName.indexOf(searchQuery) !== -1) {
                                                                            box.style.display =
                                                                                "flex"; // Show the icon box if it matches the search query
                                                                        } else {
                                                                            box.style.display =
                                                                                "none"; // Hide the icon box if it doesn't match
                                                                        }
                                                                    });
                                                                }
                                                            </script>

                                                            <div class="vform-iconpadd-sf">
                                                                <!-- <label for="" class="vform-lbfont">Icon Padding</label> -->
                                                                <div class="vf-mar-sf vf-onlymar">
                                                                    <div class="margin-box">
                                                                        <div class="top">
                                                                            <input type="text" placeholder="0px" name="vficonpaddingtop">
                                                                        </div>
                                                                        <div class="middle">
                                                                            <div class="left">
                                                                                <input type="text" placeholder="0px" name="vficonpaddingleft">
                                                                            </div>
                                                                        <div class="center">PADDING</div>
                                                                            <div class="right">
                                                                                <input type="text" placeholder="0px" name="vficonpaddingright">
                                                                            </div>
                                                                        </div>
                                                                        <div class="bottom">
                                                                            <input type="text" placeholder="0px" name="vficonpaddingbottom">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="vform-iconalign-ao">
                                                                <label>Icon Alignment</label>
                                                                <input type="hidden" name="vficonalign">
                                                                <!-- <select name="vficonalign">
                                                                    <option value="right">Right</option>
                                                                    <option value="left">Left</option>
                                                                </select> -->

                                                                    <div class="align-boxes-3 active" data-target="fieldoptionid">
                                                                        <div class="align-box-3" data-align="left" title="Align Left">
                                                                        <!-- Left Align Icon -->
                                                                        <svg viewBox="0 0 24 24">
                                                                            <rect x="3" y="4" width="18" height="2"/>
                                                                            <rect x="3" y="9" width="12" height="2"/>
                                                                            <rect x="3" y="14" width="18" height="2"/>
                                                                            <rect x="3" y="19" width="12" height="2"/>
                                                                        </svg>
                                                                        </div>
                                                                       
                                                                       
                                                                        <div class="align-box-3" data-align="right" title="Align Right">
                                                                        <!-- Right Align Icon -->
                                                                        <svg viewBox="0 0 24 24">
                                                                            <rect x="3" y="4" width="18" height="2"/>
                                                                            <rect x="9" y="9" width="12" height="2"/>
                                                                            <rect x="3" y="14" width="18" height="2"/>
                                                                            <rect x="9" y="19" width="12" height="2"/>
                                                                        </svg>
                                                                        </div>
                                                                    </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="vform-nameformat-ao">

                                                        <div class="dropdown-toggle-right " data-id="33">
                                                            <span class="css-bnio2e-Text" data-zds="true">Name Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="33">
                                                            <label>Name</label>
                                                            <input type="text" name="optionnamesetting">
                                                        </div>

                                                    </div>

                                                    <div class="vform-cssclasses-ao">

                                                        <div class="dropdown-toggle-right " data-id="5">
                                                            <span class="css-bnio2e-Text" data-zds="true">Class Settings</span>
                                                            <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                        <div class="dropdown-menu-right show" data-id="5">
                                                            <label>Css Classes</label>
                                                            <input type="text" name="optionclasses" placeholder="">
                                                            <small style="color: #000;margin-top: -11px;display: block;">Space for multiple classes: class1 class2 class3</small>
                                                        </div>

                                                    </div>




                                                </div>

                                            </div>
                                        </div>
                                     <!-- fields -->

                                

                                </div>
                                <!-- css-1tsxnf2 -->
                                
                            </div>
                            <!-- css-1xurxiv-->
                        </div>
                    </div>
                </div>
                <!-- panel-fields -->

            </div>
        </div>
    </aside>
</div>


<style>
   #rightPanel .visually-hidden {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    position: absolute !important;
    }

   #rightPanel .customColorInput__select-input::-webkit-color-swatch {
    border: 0;
    }
    #rightPanel .customColorInput__select-input::-webkit-color-swatch-wrapper {
    padding: 0;
    }

    #rightPanel .customColorInput {
    display: flex;
    align-items: center;
    gap: 4px;
    /* flex-wrap: wrap; */
    padding: 0px 8px;
    border: 2px solid rgb(0 0 0 / 35%);
    border-radius: 12px;
    overflow: hidden;
    }
    #rightPanel .customColorInput.isReadOnly {
    cursor: not-allowed;
    }
    #rightPanel .customColorInput.isReadOnly > input[type=text] {
    cursor: inherit;
    filter: contrast(0);
    }
    #rightPanel .customColorInput.isReadOnly > input[type=color] {
    pointer-events: none;
    cursor: inherit;
    }
   #rightPanel  .customColorInput__text-input {
    max-width: calc(100% - 24px);
    flex-grow: 1;
    order: 1;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 12px;
    line-height: 1;
    color: rgb(0, 0, 0);
    margin:0;
    }
   #rightPanel  .customColorInput__text-input:focus {
    outline: none;
    }
    #rightPanel .customColorInput .invalid-feedback {
    order: 3;
    }
   #rightPanel .customColorInput__select-input {
    flex-shrink: 0;
    order: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0!important;
    border-radius: 100%;
    cursor: pointer;
    margin:0;
    border: 1px solid #000!important;
    }
   #rightPanel .customColorInput::-webkit-color-swatch-wrapper {
    padding: 0;
    }

</style>
<script>
    
   document.querySelectorAll(".customColorInput").forEach(function(wrapper) {
    const textInput = wrapper.querySelector(".customColorInput__text-input");
    const colorInput = wrapper.querySelector(".customColorInput__select-input");

    function syncColor(e) {
      const value = e?.target?.value || textInput.value || colorInput.value;
      textInput.value = value;
      colorInput.value = value;
    }

    textInput.addEventListener("input", syncColor);
    colorInput.addEventListener("input", syncColor);

  });

</script>