
                  <!-- area chart -->
                  <div class="card card-default" >
                    <div class="card-header d-block d-md-flex justify-content-between">
                      <h2>World Wide Customer </h2>
                      <div class="dropdown show d-inline-block widget-dropdown ml-auto">
                        <a class="dropdown-toggle" href="#" role="button" id="world-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                          World Wide
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="world-dropdown">
                          <li class="dropdown-item"><a href="#">Continetal chart</a></li>
                          <li class="dropdown-item"><a href="#">Sub-continental</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="card-body vector-map-world">
                      <div id="world" style="height: 100%; width: 100%;"></div>
                    </div>
                    <div class="card-footer d-flex flex-wrap bg-white p-0">
                      <div class="col-6">
                        <div class="p-4">
                          <ul class="d-flex flex-column justify-content-between">
                            <li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #29cc97"></i>America <span class="float-right">5k</span></li>
                            <li><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #4c84ff "></i>Australia <span class="float-right">3k</span></li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="p-4 border-left">
                          <ul class="d-flex flex-column justify-content-between">
                            <li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #ffa128"></i>Europe <span class="float-right">4k</span></li>
                            <li><i class="mdi mdi-checkbox-blank-circle-outline mr-2" style="color: #fe5461"></i>Africa <span class="float-right">2k</span></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
