<?php defined('ABSPATH') || die('Cheatin\' uh?');?>

<script>
    (function ($){
        $(".change-theme").click((event) => { 
            $("body").css("min-height", "100%");
            $("body").css("overflow-y", "scroll");
            $(".all-themes-pannel").css("display","none");
           
        });
        $(".quit-edit-theme").click((event) => {
            $(".edit-theme-options").css("display", "none");
            $("body").css("min-height", "100%");
            $("body").css("overflow-y", "scroll");
         });
    }(jQuery));
</script>
<style>
     @media (max-width: 1876px) {
        .preview-theme-edi{
            scale:0.8;
            margin-top:-1vw;
           width:200%;
        }
    }
    @media (max-width: 1802px) {
        .preview-theme-edi{
            scale:0.75;   
        }
    }
    @media (max-width: 1712px) {
        .preview-theme-edi{
            scale:0.7;
        }
    }
    @media (max-width: 1614px) {
        .preview-theme-edi{
            scale:0.65;
        }
    }
    @media (max-width: 1478px) {
        .preview-theme-edi{
            scale:0.60;
        }
    }
    @media (max-width: 1353px) {
        .preview-theme-edi{
            scale:0.55;
        }
    }
    @media (max-width: 1236px) {
        .preview-theme-edi{
            scale:0.50;
        }
    }
    @media (max-width: 1140px) {
        .preview-theme-edi{
            scale:0.45;
        }
    }
    @media (max-width: 1050px) {
        .preview-theme-edi{
            scale:0.4;
        }
    }
    @media (max-width: 1050px) {
        .preview-theme-edi{
            scale:0.4;
        }
    }
    @media (max-width: 942px) {
        .preview-theme-edi{
            scale:0.4;
        }
    }
    @media (max-width: 920px) {
        .preview-theme-edi{
            scale:0.35;
        }
    }

</style>

<div class="" style="z-index:200;background-color:rgba(255,255,255,0.6);backdrop-filter: blur(13.5px);box-shadow: 0 80px 100px rgba(255,255,255,0.1);-webkit-backdrop-filter: blur(18px);width:70%;height:37vw;margin-left:13vw;margin-top:2vw;border-radius:1vw;">
    <div style="display:flex;position:relative;width:100%;min-height:3vw;padding-left:2vw;padding-top:1vw;">
        <button class="change-theme change-theme-setup action-btn-edit-theme" style="box-shadow: 0 4px 30px rgba(0,0,0,0.2);color:black;border:none;background-color:#fbcc34;font-weight:700;border-radius:3vw;font-size:1vw;width:10vw;height:2vw;display:flex;align-items: center;justify-content:center;cursor:pointer;">Change Theme</button>
    
        <div class="select-menu" style="position:absolute;right:7vw;z-index:999;">
            <div class="switch-edit-options" style="background-color:#F3F6F8;height:2.5vw;padding-left:1vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);cursor:pointer;width:14vw;">
                <div class="btn-text-edit" id="clr-text-edit" style="color:black;font-size:1vw;cursor:pointer;">Edit theme options</div>
                <i class="bx bx-chevron-down" style="color:white;color:black;font-size:1.2vw;position:absolute;right:1vw;"></i>
            </div>
            
            <ul class="edit-option" id="options-list-edit" style="background-color:rgba(243,246,248,0.9);width:100%;box-shadow: 0 4px 30px rgba(0,0,0,0.2);font-color:black;z-index:999;padding:1vw;">
                <li  class="edit-option-option image-editor-button" style="background-color:rgba(243,246,248,0.9);height:3vw;cursor:pointer;" >
                    <div class="option-text" style="color:black;font-size:1vw;">Background image</div>  
                </li>
                <li  class="edit-option-option border-editor-button" style="background-color:rgba(243,246,248,0.9);height:3vw;cursor:pointer;" >
                    <span class="option-text" style="color:black;font-size:1vw;">Border</span>
                </li>
                <li class="edit-option-option pannel-editor-button" style="background-color:rgba(243,246,248,0.9);height:3vw;cursor:pointer;">
                    <span class="option-text" style="color:black;font-size:1vw;">Panel</span>
                </li>
                <li class="edit-option-option text-editor-button" style="background-color:rgba(243,246,248,0.9);height:3vw;cursor:pointer;">
                    <span class="option-text" style="color:black;font-size:1vw;">Text</span>
                    <div style="font-size:0.8vw;margin-left:0.5vw;font-weight:500;color:#f7aa2e;">(New!)</div>
                </li>
            </ul>
        </div>

        <div class="quit-edit-theme" style="position:absolute;right:1.5vw;top:1.2vw;width:2.2vw;color:white;font-weight:500;border-radius:50%;height:2.2vw;background-color:black;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1vw;">X</div>
    </div>
   
    <div style="display:flex;margin-top:1vw;margin-bottom:2vw;">
        <div  class="panel-editor image-editor-select" style="position:relative;"> 
            <div class="filter-editor" style="color:white;font-size:1.4vw;font-weight:500;height:10pvw;">
                <div>Filters</div>
                <div class="option-editor" style="margin-top:0.4vw;gap:1vw;">
                    <button id="brightness" class="active" style="margin-bottom:0px;width:9vw;height:2vw;font-size:1vw;font-weight:500;">Brightness</button>
                    <button id="opacity" style="margin-bottom:0px;width:9vw;height:2vw;font-size:1vw;font-weight:500;">Opacity</button>
                    <button id="grayscale" style="margin-bottom:0px;width:9vw;height:2vw;font-size:1vw;font-weight:500;">Grayscale</button>
                    <button id="saturation" style="margin-bottom:0px;width:9vw;height:2vw;font-size:1vw;font-weight:500;">Saturation</button>
                </div>
                <div class="slider-editor" style="height:3vw;">
                    <div class="filter-info-editor" style="color:white;height:1vw;">
                        <p class="name" style="font-size:1vw;">Brightness</p> 
                        <p class="value" style="font-size:1vw;">99%</p> 
                    </div>
                    <input class="slider-input" type="range" value="99" min="0" max="99">
                </div>
            </div>

            <div class="rotate" style="height:10vw;font-size:1.4vw;font-weight:500;color:white;margin-top:1vw;"> 
                <div>Theme Position</div>
                <div style="font-size:0.9vw;">Position your theme box as you like.</div>
                <div class="option-editor" style="margin-top:1vw;">
                    <button class="left" style="height:2vw;width:4.5vw;"><i class="bx bx-chevron-left" style="font-size:1.4vw;"></i></button>
                    <button class="right" style="height:2vw;width:4.5vw;"><i class="bx bx-chevron-right" style="font-size:1.4vw;"></i></button>
                    <button class="up" style="height:2vw;width:4.5vw;display:flex;justify-content:center;align-items:center;"><i class="bx bx-chevron-up" style="font-size:1.4vw;"></i></button>
                    <button class="down" style="height:2vw;width:4.5vw;display:flex;justify-content:center;align-items:center;"><i class="bx bx-chevron-down" style="font-size:1.4vw;"></i></button>
                </div>
            </div>
        </div>
        
        <div  class="panel-editor border-editor-select" style="display:none;">
            <div class="filter-editor" >
                <div style="color:white;font-weight:500;font-size:1.4vw;">Edit border</div>
                <div class="option-editor">
                </div>

                <div style=""></div>
                    <div id="border-colors" class="slider-editor" style="width:23vw;margin-top:1vw;">
            
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#d32f2f;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#d32f2f;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#b71c1c;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#c2185b;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#ad1457;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#7b1fa2;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#6a1b9a;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#4a148c;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#512da8;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#4527a0;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#303f9f;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#283593;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#1a237e;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#1976d2;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#1565c0;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#0288d1;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#0277bd;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#01579b;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#0097a7;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#00838f;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#00796b;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#00695c;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#004d40;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#388e3c;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#2e7d32;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#689f38;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#558b2f;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#afb42b;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#fbc02d;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#f57f17;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#f57c00;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#e64a19;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#bf360c;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#5d4037;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#3e2723;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#5d4037;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#4e342e;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#3e2723;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#616161;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#424242;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#fffafa;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#EEEEFF;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:grey;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#263238;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                        <div style="background-color:#000000;height:1.2vw;width:1.2vw;" class="select-clr pnl-brd"></div>
                    </div>
                </div>
            </div>
        </div>
  
        <div class="panel-editor pannel-editor-select" style="display:none;">
            <div class="filter-editor">
                <div style="color:white;font-weight:500;font-size:1.4vw;">Edit Pannel</div>
                
                <div class="option-editor">
                   
                    <button  class="pannel-style" style="display:none;">Style</button>
                </div>
              
                <div class="pannel-colors">
                    <div  style="color:white;height:4vw;display:none;">
                        <p class="name" style="font-size:0.8vw;">Custom Color (hex)</p> 
                        <input class="color-pannel-custom" type="text" style="border-radius:5px;height:2vw;width:10vw;">
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#d32f2f;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#d32f2f;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#b71c1c;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#c2185b;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#ad1457;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#7b1fa2;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#6a1b9a;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#4a148c;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#512da8;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#4527a0;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#303f9f;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#283593;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#1a237e;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#1976d2;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#1565c0;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#0288d1;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#0277bd;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#01579b;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#0097a7;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#00838f;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#00796b;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#00695cheight:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#004d40;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#388e3c;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#2e7d32;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#689f38;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#558b2f;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#afb42b;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#fbc02d;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#f57f17;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#f57c00;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#e64a19;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#bf360c;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#5d4037;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#3e2723;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#4e453c;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#4e342e;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#3e2723;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#616161;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#424242;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                    <div class="select-color" style="margin:0px;width:20vw;height:2vw;">
                        <div style="background-color:#fffafa;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#EEEEFF;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:grey;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#263238;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                        <div style="background-color:#000000;height:1vw;width:1vw;" class="select-clr pnl-clr"></div>
                    </div>
                  
                </div>
                <div  class="slider-editor pannel-styles" style="display:none;">
                <div id="filter-info-editor" class="slider-editor">
                    <div  style="color:white;">
                        <p class="name">Opacity</p> 
                        <p class="pannel-opacity-value"></p> 
                    </div>
                
                    <input class="pannel-opacity" type="range"  min="0" max="9">
                </div>
            </div>    
            </div>
        </div> 

        <div  class="panel-editor text-editor-select" style="display:none;">
            <?php $font_sizes=[0.4,0.6,0.8,1,1.2,1.4,1.6,1.8,2]; ?>
            
            <div style="padding:1vw;border-radius:1vw;background-color:#C9C9C9;width:100%;">
                <div style="color:black;font-size:1vw;font-weight:500;">Edit name</div>
                <div style="display:flex;">
                    <div>
                        <div style="color:black;font-size:0.8vw;font-weight:500;">color</div>
                        <input class="name-color-option" style="width:5vw;border:none;height:2vw;border-radius:2vw; border-color: transparent; outline: none;" type="color"/>
                    </div>

                    <div style="margin-left:1vw;">
                        <div style="color:black;font-size:0.8vw;font-weight:500;">font size</div>
                        <select class="name-size-option" style="width:8vw;height:1vw;border-radius:2vw;border:none;font-size:1vw;appearance: none;">
                           <?php foreach($font_sizes as $size){
                                    echo "<option value=".$size.">$size</opiton>";
                           } ?>
                        </select>
                    </div>
                </div>
            </div>

            <div style="padding:1vw;border-radius:1vw;background-color:#C9C9C9;width:100%;margin-top:1vw;">
                <div style="color:black;font-size:1vw;font-weight:500;">Edit subtitle</div>
                <div style="display:flex;">
                    <div>
                        <div style="color:black;font-size:0.8vw;font-weight:500;">color</div>
                        <input class="subtitle-color-option" style="width:5vw;border:none;height:2vw;border-radius:2vw; border-color: transparent; outline: none;" type="color"/>
                    </div>

                    <div style="margin-left:1vw;">
                        <div style="color:black;font-size:0.8vw;font-weight:500;">font size</div>
                        <select class="subtitle-size-option" style="width:8vw;height:1vw;border-radius:2vw;border:none;font-size:1vw;appearance: none;">
                            <?php foreach($font_sizes as $size){
                                    echo "<option value=".$size.">$size</opiton>";
                           }?>
                        </select>
                    </div>
                </div>
            </div>

            <div style="padding:1vw;border-radius:1vw;background-color:#C9C9C9;width:100%;margin-top:1vw;">
                <div style="color:black;font-size:1vw;font-weight:500;">Edit bio</div>
                <div style="display:flex;">
                    <div>
                        <div style="color:black;font-size:0.8vw;font-weight:500;">color</div>
                        <input class="bio-color-option" style="width:5vw;border:none;height:2vw;border-radius:2vw; border-color: transparent; outline: none;" type="color"/>
                    </div>
                </div>
            </div>
        </div>

        <!--Preview Theme-->
        <div style="width:29vw;height:26vw;margin-left:4vw;margin-top:1vw;overflow-y:scroll;">
            <div class="preview-theme-edit" style="height:100%;width:100%;display:flex;justify-content:center;">
            </div>
        </div>
    </div>
   
    <button class="reset-options action-btn-edit-theme" style="position:absolute;bottom:0.5vw;left:2vw;font-weight:700;border-radius:3vw;font-size:1vw;width:10vw;height:2.3vw;display:flex;align-items: center;justify-content:center;border:none;margin-top:1vw;cursor:pointer;display:none;">Reset Options</button>

    <div>
        <div style="display:none;">
            <form method="POST" enctype="multipart/form-data">
            <input class="" type="hidden" name="action" value="strb_settings_save_theme"/> 
        
            <?php STRB_Classes_Helpers_Tools::setNonce('strb_settings_save_theme', 'strb_nonce');?> 
      
            <input class="new-theme-check" name="new-theme" type="text" value="0">
            
            <input class="strb_theme" type="hidden" name="strb_theme"/>
            <input type="text" value="" class="background-img" name="background-img">

            <input type="hidden" value="99" class="input-brightness" name="brightness">
            <input type="hidden" value="1"  class="check-brightness-change" name="brightness-change">

            <input type="hidden" value="99" class="input-opacity" name="opacity">
            <input type="hidden" value="1"  class="check-opacity-change" name="opacity-change">

            <input type="hidden" value="1" class="input-grayscale" name="grayscale">
            <input type="hidden" value="1"  class="check-grayscale-change" name="grayscale-change">

            <input type="hidden" value="1" class="input-saturation" name="saturation">
            <input type="hidden" value="1"  class="check-saturation-change" name="saturation-change">
            
            <!--Text options-->
            <input type="text" class="name-color-input" name="name-color">
            <input type="text" class="name-size-input" name="name-size">

            <input type="text" class="subtitle-color-input" name="subtitle-color">
            <input type="text" class="subtitle-size-input" name="subtitle-size">

            <input type="text" class="bio-color-input" name="bio-color">
            <input type="text" class="bio-size-input" name="bio-size">
            
            <input type="hidden" valheight:1vw;width:1vw;ue=""  class="input-pnl-clr" name="pannel-color">
            <input type="text" valueheight:1vw;width:1vw;="99"  class="input-pnl-opacity" name="pannel-opacity">
            <input type="hheight:1.2vw;width:1.2vw;idden" class="input-pnl-brd" name="border-color">

            <input type=""  value="0"  class="margin-up-pannel" name="pnl_up">
            <input type=""  class="margin-left-pannel" name="pnl_left">

            <input type="" value="1"  class="reset-up" name="reset-upp">
            <input type="" value="1"  class="reset-left" name="reset-leftt">
        </div> 
        
        <div style="display:flex;justify-content:flex-end;padding-right:7vw;gap:1vw;padding-top:0.5vw;">
            <button class="choose-img action-btn-edit-theme" style="background-color:#fbcc34;border:none;font-weight:700;border-radius:3vw;font-size:1vw;width:10vw;height:2.3vw;display:flex;align-items: center;justify-content:center;cursor:pointer;">Choose Image</button>
            <button class="save-changes action-btn-edit-theme" style="background-color:#033;color:white;font-weight:700;border-radius:3vw;font-size:1vw;width:10vw;height:2.3vw;display:flex;align-items: center;justify-content:center;cursor:pointer;">
                <span>Save Changes</span>
                <i class="bx bx-chevron-right" style="position:relative;font-size:1vw;font-weight:500;"></i> 
            </button>    
        </div>
        </form>
    
    </div>
</div>    
</div>    

<style>
    
    .action-btn-edit-theme:hover{
        opacity:0.8;
    }
    .panel-editor{
        background-color:rgba(0,0,0,0.9);
        box-shadow: 0 4px 30px rgba(0,0,0,0.2);
        border-radius:1vw;
        height:26vw;
        width:23vw;
        padding:1vw;
        margin-left:2vw;
        margin-top:0.5vw;
    }

    .option-editor button{
        font-size:1.2vw;
        height:2.5vw;
        width:8vw;
    }

   .slider-input {
        -webkit-appearance: none;
        width: 100%;
        height: 1vw;
        background: white;
        outline: none;
        border-radius:1vw;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1vw;
        height: 1vw;
        border-radius:50%;
        background: #fbcc34;
        cursor: pointer;
    }

    .slider-input::-moz-range-thumb {
        width: 2vw;
        height: 1vw;
        background: #04AA6D;
        cursor: pointer;
    }

    .select-clr{
        width:1vw;
        height:1vw;
    }

    .preview-theme-edit{
        width:100%;
    }
    
    .edit-option-option:hover{
        opacity:0.8;
    }

    @media (max-width: 1860px) {
        .preview-theme-edit {
        scale:0.95;
        }
    }

    @media (max-width: 1680px) {
        .preview-theme-edit {
        scale:0.9;
        }
    }
   
    @media (max-width: 1590px) {
        .preview-theme-edit {
        scale:0.85;
        }
    }
     
    @media (max-width: 1520px) {
        .preview-theme-edit {
        scale:0.8;
        }
    }
    
    @media (max-width: 1430px) {
        .preview-theme-edit {
        scale:0.75;
        }
    }
   
    @media (max-width: 1338px) {
        .preview-theme-edit {
        scale:0.7;
        }
    }

    @media (max-width: 1260px) {
        .preview-theme-edit {
        scale:0.65;
        }
    }
    
    @media (max-width: 1160px) {
        .preview-theme-edit {
        scale:0.6;
        }
    }
   
    @media (max-width: 1100px) {
        .preview-theme-edit {
        scale:0.55;
        }
    }
     
    @media (max-width: 1000px) {
        .preview-theme-edit {
        scale:0.5;
        }
    } 

    @media (max-width: 960px) {
        .preview-theme-edit {
        scale:0.45;
        margin-left:4vw;
        }
    }

    @media (max-width: 770px) {
        .preview-theme-edit {
        scale:0.35;
        }
    }
    input[type="color"]::-webkit-color-swatch {
  border: none;
}
</style>

<script>
     (function ($){ 

        $(".edit-option-option").click(()=>{
            $(".panel-editor").css("display","none"); 
        })

        $(".text-editor-button").click(()=>{
           $(".text-editor-select").css("display","block"); 
           $(".btn-text-edit").text("Text");
           // text-editor-select
        })        

        $(".pannel-editor-button").click(()=>{
            $(".btn-text-edit").text("Panel");
        })

        //Name
        $(".name-color-option").change((e)=>{
            let color=$(e.currentTarget).val();
            $(".name-options").css("color",color);
            $(".name-color-input").val(color);
        })
        $(".name-size-option").change((e)=>{
            let size=$(e.currentTarget).val();
            $(".name-options").css("font-size",size*20);
            $(".name-size-input").val(size*20);
        })  

        //Subt
        $(".subtitle-color-option").change((e)=>{
            let color=$(e.currentTarget).val();
            $(".subtitle-options").css("color",color);
            $(".subtitle-color-input").val(color);
        })
        $(".subtitle-size-option").change((e)=>{
            let size=$(e.currentTarget).val();
            $(".subtitle-options").css("font-size",size*20);
            $(".subtitle-size-input").val(size*20);
        })  

        //Bio
        $(".bio-color-option").change((e)=>{
            let color=$(e.currentTarget).val();
            $(".bio-options").css("color",color);
            $(".bio-color-input").val(color);
        })
        
     }(jQuery));
</script>
