<div class="app-settings" id="appSettings">
    <div class="settings-header d-flex justify-content-between">
    <div class="text-gray-900 body-font-3 font-medium ">Settings</div>
    <div class="pointer" id="closesetting">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12.5 3.5L3.5 12.5" stroke="#959FA3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M12.5 12.5L3.5 3.5" stroke="#959FA3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    
    </div>
    </div>
      <div class="cal-h-70" data-simplebar>
        <div class="inner-content">
          <div class="setting-title">Layout</div>
          <div class="settings-images row ">
            <div class="col-lg-6 rt-mb-32">
              <div class="form-check p-0">
                <label class="d-block pointer" for="vertical_lable">
                  <img src="../assets/images/all-img/d-1.png" alt="" class="w-100" />
                  <div class="bottom-content">
                    <input
                      class="form-check-input  pointer"
                      type="radio"
                      name="layoutbox"
                      id="vertical_lable"
                      value="vertical"
                      checked
                      
                    />
                    <span> Vertical</span>
                    </div>
                </label>
              
              </div>
            </div>
            <div class="col-lg-6 rt-mb-32">
              <div class="form-check p-0">
                <label
                  class="form-check-label d-block pointer"
                  for="horizental_label"
                >
                  <img src="../assets/images/all-img/d-2.png" alt="" />
                  <div class="bottom-content">
                    <input
                      class="form-check-input d-block pointer"
                      type="radio"
                      name="layoutbox"
                      id="horizental_label"
                      value="horizental"
                    />
                    <span>Horizontal</span>
                    </div>
                </label>
              
              </div>
            </div>
          </div>
          <hr/>
          <div class="setting-title rt-pt-30">Theme</div>
          <ul class="rt-mb-32">
            <li class="block rt-mb-12">
            <div class="form-check p-0 no-shadow">
            <input
                  class="form-check-input  pointer"
                  type="radio"
                  name="sidebar"
                  id="seibar_white"  
                  value="white" 
                  checked
                />
                <label
                  class="form-check-label rt-ml-8 pointer"
                  for="seibar_white"
                >
                White
                </label>
              </div>
            </li>
            <li class="block rt-mb-12">
            <div class="form-check p-0 no-shadow">
            <input
                  class="form-check-input  pointer"
                  type="radio"
                   name="sidebar"
                  id="seibar_black" 
                  value="black" 
                  
                />
                <label
                  class="form-check-label rt-ml-8 pointer"
                  for="seibar_black"
                >
                Black
                </label>
                </div>
            </li>
            <li class="block rt-mb-12">
            <div class="form-check p-0 no-shadow">
            <input
                  class="form-check-input  pointer"
                  type="radio"
                  name="sidebar"
                  id="seibar_navy"  
                  value="blue"
                />
                <label
                  class="form-check-label rt-ml-8 pointer"
                  for="seibar_navy"
                >
                Navy Blue
                </label>
                </div>
            </li>
          </ul>
          <div class="row smallgap">
            <div class="col-md-6">
            <button class="btn btn-primary2 pill block w-100 rt-mb-10">Reset to default</button>
            </div>
           <div class="col-md-6">
            <button type="button" class="btn btn-primary pill btn-icon block w-100  rt-mb-10">
                              <span class="button-content-wrapper">
                                <span class="button-text">
                                  Purchase now
                                </span>
                                <span class="button-icon align-icon-right">
                                  <i class="ph-arrow-right"></i>
                  
                                </span>
                              </span>
             </button>
           </div>
          </div>
        </div>
      </div>
    </div>
    <div class="settings-overlay"></div>
    