 <main id="js-page-content" role="main" class="page-content">
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">IC Portal</a></li>
                            
                            <li class="breadcrumb-item active">Infection Dashboard</li>
                            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                        </ol>

                        <div class="subheader">
                            <h1 class="subheader-title">
                                <i class='subheader-icon fal fa-chart-area'></i> Infection <span class='fw-300'>Dashboard</span>
                            </h1>
                            <div class="subheader-block d-lg-flex align-items-center">
                                <!-- <div class="d-inline-flex flex-column justify-content-center mr-3">
                                    <span class="fw-300 fs-xs d-block opacity-50">
                                        <small>EXPENSES</small>
                                    </span>
                                    <span class="fw-500 fs-xl d-block color-primary-500">
                                        $47,000
                                    </span>
                                </div> -->
                                <span class="sparklines hidden-lg-down" sparkType="bar" sparkBarColor="#886ab5" sparkHeight="32px" sparkBarWidth="5px" values="3,4,3,6,7,3,3,6,2,6,4"></span>
                            </div>
                            <div class="subheader-block d-lg-flex align-items-center border-faded border-right-0 border-top-0 border-bottom-0 ml-3 pl-3">
                                <!-- <div class="d-inline-flex flex-column justify-content-center mr-3">
                                    <span class="fw-300 fs-xs d-block opacity-50">
                                        <small>MY PROFITS</small>
                                    </span>
                                    <span class="fw-500 fs-xl d-block color-danger-500">
                                        $38,500
                                    </span>
                                </div> -->
                                <span class="sparklines hidden-lg-down" sparkType="bar" sparkBarColor="#fe6bb0" sparkHeight="32px" sparkBarWidth="5px" values="1,4,3,6,5,3,9,6,5,9,7"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-xl-3">
                                <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
                                    <div class="">
                                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                            21.5k
                                            <small class="m-0 l-h-n">Number of patients requiring TBP </small>
                                        </h3>
                                    </div>
                                    <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                                    <div class="">
                                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                            10k
                                            <small class="m-0 l-h-n">Number of MDR unit wise </small>
                                        </h3>
                                    </div>
                                    <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                                    <div class="">
                                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                            103.72k
                                            <small class="m-0 l-h-n">Number of HAI </small>
                                        </h3>
                                    </div>
                                    <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xl-3">
                                <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                                    <div class="">
                                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                            240
                                            <small class="m-0 l-h-n">Needle stick injury incident </small>
                                        </h3>
                                    </div>
                                    <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                </div>
                            </div>
                        </div>

                        <!-- News -->
                        <div class="row">
                            <div class="col-md-12">
                             <div id="panel-4" class="panel">
                                <div class="panel-hdr">
                                    <h2>
                                        News 
                                    </h2>
                                </div>
                                <div class="panel-container show">
                                    <div class="panel-content">
                                        <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
                                            <div class="carousel-inner">
                                                <div class="carousel-item active" data-interval="10000">
                                                    <img class="d-block w-100" src="about:blank" data-src="holder.js/1700x400?auto=yes&bg=ffd274&fg=333333&text=News " alt="First slide">
                                                </div>
                                                <div class="carousel-item" data-interval="2000">
                                                    <img class="d-block w-100" src="about:blank" data-src="holder.js/1700x400?auto=yes&bg=ffca5b&fg=000000&text=News" alt="Second slide">
                                                </div>
                                                <div class="carousel-item">
                                                    <img class="d-block w-100" src="about:blank" data-src="holder.js/1700x400?auto=yes&bg=ffc241&fg=000000&text=News" alt="Third slide">
                                                </div>
                                            </div>
                                            <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>

                        <!-- Hostpital acquired -->
                        <div class="row">
                            <div class="col-lg-12">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Hospital Acquired Infections
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content bg-subtlelight-fade">
                                            <div id="js-checkbox-toggles" class="d-flex mb-3">
                                                <div class="custom-control custom-switch mr-2">
                                                    <input type="checkbox" class="custom-control-input" name="gra-0" id="gra-0" checked="checked">
                                                    <label class="custom-control-label" for="gra-0">MDRO Rate</label>
                                                </div>
                                                <div class="custom-control custom-switch mr-2">
                                                    <input type="checkbox" class="custom-control-input" name="gra-1" id="gra-1" checked="checked">
                                                    <label class="custom-control-label" for="gra-1">Acquired Infections</label>
                                                </div>
                                               <!--  <div class="custom-control custom-switch mr-2">
                                                    <input type="checkbox" class="custom-control-input" name="gra-2" id="gra-2" checked="checked">
                                                    <label class="custom-control-label" for="gra-2">User Signups</label>
                                                </div> -->
                                            </div>
                                            <div id="flot-toggles" class="w-100 mt-4" style="height: 300px"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-lg-6">
                                <div id="panel-2" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
                                    <div class="panel-hdr">
                                        <h2>
                                            Returning <span class="fw-300"><i>Target</i></span>
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content poisition-relative">
                                            <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
                                                <div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
                                                    <div class="text-right fw-500 l-h-n d-flex flex-column">
                                                        <div class="h3 m-0 d-flex align-items-center justify-content-end">
                                                            <div class='icon-stack mr-2'>
                                                                <i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
                                                                <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
                                                                <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
                                                            </div>
                                                            $44.34 / GE
                                                        </div>
                                                        <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
                                                    </div>
                                                </div>
                                                <div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
                                                    <div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
                                                        <div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="flot-area" style="width:100%; height:300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                           <!--  <div class="col-lg-6">
                                <div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
                                    <div class="panel-hdr">
                                        <h2>
                                            Effective <span class="fw-300"><i>Marketing</i></span>
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content poisition-relative">
                                            <div class="pb-5 pt-3">
                                                <div class="row">
                                                    <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                        <div class="p-2 mr-3 bg-info-200 rounded">
                                                            <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
                                                        </div>
                                                        <div>
                                                            <label class="fs-sm mb-0">Bounce Rate</label>
                                                            <h4 class="font-weight-bold mb-0">37.56%</h4>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                        <div class="p-2 mr-3 bg-info-300 rounded">
                                                            <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
                                                        </div>
                                                        <div>
                                                            <label class="fs-sm mb-0">Sessions</label>
                                                            <h4 class="font-weight-bold mb-0">759</h4>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                        <div class="p-2 mr-3 bg-success-300 rounded">
                                                            <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
                                                        </div>
                                                        <div>
                                                            <label class="fs-sm mb-0">New Sessions</label>
                                                            <h4 class="font-weight-bold mb-0">12.17%</h4>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                        <div class="p-2 mr-3 bg-success-500 rounded">
                                                            <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
                                                        </div>
                                                        <div>
                                                            <label class="fs-sm mb-0">Clickthrough</label>
                                                            <h4 class="font-weight-bold mb-0">19.77%</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="flotVisit" style="width:100%; height:208px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>

                        <!-- map location -->
                        <div class="row">
                            <!-- <div class="col-lg-12">
                                <div id="panel-1" class="panel panel-locked" data-panel-lock="false" data-panel-close="false" data-panel-fullscreen="false" data-panel-collapsed="false" data-panel-color="false" data-panel-locked="false" data-panel-refresh="false" data-panel-reset="false">
                                    <div class="panel-hdr">
                                        <h2>
                                            Live Feeds
                                        </h2>
                                        <div class="panel-toolbar pr-3 align-self-end">
                                            <ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0 nav-tabs-clean" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#tab_default-1" role="tab">Live Stats</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#tab_default-2" role="tab">Revenue</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content border-faded border-left-0 border-right-0 border-top-0">
                                            <div class="row no-gutters">
                                                <div class="col-lg-7 col-xl-8">
                                                    <div class="position-relative">
                                                        <div class="custom-control custom-switch position-absolute pos-top pos-left ml-5 mt-3 z-index-cloud">
                                                            <input type="checkbox" class="custom-control-input" id="start_interval">
                                                            <label class="custom-control-label" for="start_interval">Live Update</label>
                                                        </div>
                                                        <div id="updating-chart" style="height:242px"></div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-5 col-xl-4 pl-lg-3">
                                                    <div class="d-flex mt-2">
                                                        My Tasks
                                                        <span class="d-inline-block ml-auto">130 / 500</span>
                                                    </div>
                                                    <div class="progress progress-sm mb-3">
                                                        <div class="progress-bar bg-fusion-400" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex">
                                                        Transfered
                                                        <span class="d-inline-block ml-auto">440 TB</span>
                                                    </div>
                                                    <div class="progress progress-sm mb-3">
                                                        <div class="progress-bar bg-success-500" role="progressbar" style="width: 34%;" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex">
                                                        Bugs Squashed
                                                        <span class="d-inline-block ml-auto">77%</span>
                                                    </div>
                                                    <div class="progress progress-sm mb-3">
                                                        <div class="progress-bar bg-info-400" role="progressbar" style="width: 77%;" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex">
                                                        User Testing
                                                        <span class="d-inline-block ml-auto">7 days</span>
                                                    </div>
                                                    <div class="progress progress-sm mb-g">
                                                        <div class="progress-bar bg-primary-300" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="row no-gutters">
                                                        <div class="col-6 pr-1">
                                                            <a href="#" class="btn btn-default btn-block">Generate PDF</a>
                                                        </div>
                                                        <div class="col-6 pl-1">
                                                            <a href="#" class="btn btn-default btn-block">Report a Bug</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel-content p-0">
                                            <div class="row row-grid no-gutters">
                                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                                    <div class="px-3 py-2 d-flex align-items-center">
                                                        <div class="js-easy-pie-chart color-primary-300 position-relative d-inline-flex align-items-center justify-content-center" data-percent="75" data-piesize="50" data-linewidth="5" data-linecap="butt" data-scalelength="0">
                                                            <div class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
                                                                <span class="js-percent d-block text-dark"></span>
                                                            </div>
                                                        </div>
                                                        <span class="d-inline-block ml-2 text-muted">
                                                            SERVER LOAD
                                                            <i class="fal fa-caret-up color-danger-500 ml-1"></i>
                                                        </span>
                                                        <div class="ml-auto d-inline-flex align-items-center">
                                                            <div class="sparklines d-inline-flex" sparktype="line" sparkheight="30" sparkwidth="70" sparklinecolor="#886ab5" sparkfillcolor="false" sparklinewidth="1" values="5,6,5,3,8,6,9,7,4,2"></div>
                                                            <div class="d-inline-flex flex-column small ml-2">
                                                                <span class="d-inline-block badge badge-success opacity-50 text-center p-1 width-6">97%</span>
                                                                <span class="d-inline-block badge bg-fusion-300 opacity-50 text-center p-1 width-6 mt-1">44%</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                                    <div class="px-3 py-2 d-flex align-items-center">
                                                        <div class="js-easy-pie-chart color-success-500 position-relative d-inline-flex align-items-center justify-content-center" data-percent="79" data-piesize="50" data-linewidth="5" data-linecap="butt">
                                                            <div class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
                                                                <span class="js-percent d-block text-dark"></span>
                                                            </div>
                                                        </div>
                                                        <span class="d-inline-block ml-2 text-muted">
                                                            DISK SPACE
                                                            <i class="fal fa-caret-down color-success-500 ml-1"></i>
                                                        </span>
                                                        <div class="ml-auto d-inline-flex align-items-center">
                                                            <div class="sparklines d-inline-flex" sparktype="line" sparkheight="30" sparkwidth="70" sparklinecolor="#1dc9b7" sparkfillcolor="false" sparklinewidth="1" values="5,9,7,3,5,2,5,3,9,6"></div>
                                                            <div class="d-inline-flex flex-column small ml-2">
                                                                <span class="d-inline-block badge badge-info opacity-50 text-center p-1 width-6">76%</span>
                                                                <span class="d-inline-block badge bg-warning-300 opacity-50 text-center p-1 width-6 mt-1">3%</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                                    <div class="px-3 py-2 d-flex align-items-center">
                                                        <div class="js-easy-pie-chart color-info-500 position-relative d-inline-flex align-items-center justify-content-center" data-percent="23" data-piesize="50" data-linewidth="5" data-linecap="butt">
                                                            <div class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
                                                                <span class="js-percent d-block text-dark"></span>
                                                            </div>
                                                        </div>
                                                        <span class="d-inline-block ml-2 text-muted">
                                                            DATA TTF
                                                            <i class="fal fa-caret-up color-success-500 ml-1"></i>
                                                        </span>
                                                        <div class="ml-auto d-inline-flex align-items-center">
                                                            <div class="sparklines d-inline-flex" sparktype="line" sparkheight="30" sparkwidth="70" sparklinecolor="#51adf6" sparkfillcolor="false" sparklinewidth="1" values="3,5,2,5,3,9,6,5,9,7"></div>
                                                            <div class="d-inline-flex flex-column small ml-2">
                                                                <span class="d-inline-block badge bg-fusion-500 opacity-50 text-center p-1 width-6">10GB</span>
                                                                <span class="d-inline-block badge bg-fusion-300 opacity-50 text-center p-1 width-6 mt-1">10%</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                                    <div class="px-3 py-2 d-flex align-items-center">
                                                        <div class="js-easy-pie-chart color-fusion-500 position-relative d-inline-flex align-items-center justify-content-center" data-percent="36" data-piesize="50" data-linewidth="5" data-linecap="butt">
                                                            <div class="d-flex flex-column align-items-center justify-content-center position-absolute pos-left pos-right pos-top pos-bottom fw-300 fs-lg">
                                                                <span class="js-percent d-block text-dark"></span>
                                                            </div>
                                                        </div>
                                                        <span class="d-inline-block ml-2 text-muted">
                                                            TEMP.
                                                            <i class="fal fa-caret-down color-success-500 ml-1"></i>
                                                        </span>
                                                        <div class="ml-auto d-inline-flex align-items-center">
                                                            <div class="sparklines d-inline-flex" sparktype="line" sparkheight="30" sparkwidth="70" sparklinecolor="#fd3995" sparkfillcolor="false" sparklinewidth="1" values="5,3,9,6,5,9,7,3,5,2"></div>
                                                            <div class="d-inline-flex flex-column small ml-2">
                                                                <span class="d-inline-block badge badge-danger opacity-50 text-center p-1 width-6">124</span>
                                                                <span class="d-inline-block badge bg-info-300 opacity-50 text-center p-1 width-6 mt-1">40F</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            
                            <div class="col-lg-6">
                                <div id="panel-4" class="panel">
                                    <div class="panel-hdr">
                                        <h2>Bird's Eyes</h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content jqvmap-bg-ocean p-0" style="height: 330px;">
                                            <div id="vector-map" class="w-100 h-100 p-4"></div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                               <div class="col-lg-6">
                                <div id="panel-6" class="panel">
                                    <div class="panel-hdr">
                                        <h2 >Total No Of Patients </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content p-0 mb-g">
                                           <!--  <div class="alert alert-success alert-dismissible fade show border-faded border-left-0 border-right-0 border-top-0 rounded-0 m-0" role="alert">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                                </button>
                                                <strong>Last update was on <span class="js-get-date"></span></strong> - Your logs are all up to date.
                                            </div> -->
                                        </div>
                                        <div class="panel-content">
                                            <div class="row  mb-g">
                                                <div class="col-md-6 d-flex align-items-center">
                                                   <div id="pieChart" class="ct-chart" style="width:100%; height:250px;"></div>
                                                </div>
                                                <div class="col-md-6 col-lg-5 mr-lg-auto">
                                                    <div class="d-flex mt-2 mb-1 fs-xs text-primary">
                                                        Total 
                                                    </div>
                                                    <div class="progress progress-xs mb-3">
                                                        <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="d-flex mt-2 mb-1 fs-xs text-danger">
                                                        Transmission Based Precautions
                                                    </div>
                                                    <div class="progress progress-xs mb-3">
                                                        <div class="progress-bar bg-danger-500" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-g border shadow-0">
                                    <div class="card-header bg-white">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <span class="h6 font-weight-bold text-uppercase">Staff Disease Status</span>
                                            </div>
                                            <div class="col d-flex">
                                                <!-- <a href="javascript:void(0);" class="btn btn-outline-success btn-sm ml-auto mr-2 flex-shrink-0">Add</a>
                                                <a href="javascript:void(0);" class="btn btn-outline-danger btn-sm flex-shrink-0">Edit</a> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-header bg-white p-0">
                                        <div class="row no-gutters row-grid align-items-stretch">
                                            <div class="col-12 col-md">
                                                <div class="text-uppercase text-muted py-2 px-3">Title</div>
                                            </div>
                                            <div class="col-sm-12 col-md-5 col-xl-1 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Status</div>
                                            </div>
                                           <!--  <div class="col-sm-6 col-md-3 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Last posts</div>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="row no-gutters row-grid">
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-2 icon-stack-3x opacity-100 color-info-800"></i>
                                                                    <i class="base base-3 icon-stack-2x opacity-100 color-info-500"></i>
                                                                    <i class="fal fa-user-md icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Vaccinated
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">72 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Nam at justo magna. Aenean facilisis ultricies turpis
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 08:13 <a href="javascript:void(0)" class="text-info">erakalambert</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-medkit icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Unvaccinated
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">99 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-f.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Integer felis justo, condimentum vitae pharetra vel, hendrerit eget orci.
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 06:01 <a href="javascript:void(0)" class="text-info">elisamury</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-15 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-10 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-dollar-sign icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Unknown.
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">88 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Duis placerat in sapien et placerat. Duis quis feugiat leo. Curabitur laoreet ex nec odio interdum
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 12:25 <a href="javascript:void(0)" class="text-info">josekras_alma</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                        </div>
                                    </div>
                                </div> 
                            </div>
                             <div class="col-md-6">
                                <div class="card mb-g border shadow-0">
                                    <div class="card-header bg-white">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <span class="h6 font-weight-bold text-uppercase">For HCW </span>
                                            </div>
                                            <div class="col d-flex">
                                                <!-- <a href="javascript:void(0);" class="btn btn-outline-success btn-sm ml-auto mr-2 flex-shrink-0">Add</a>
                                                <a href="javascript:void(0);" class="btn btn-outline-danger btn-sm flex-shrink-0">Edit</a> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-header bg-white p-0">
                                        <div class="row no-gutters row-grid align-items-stretch">
                                            <div class="col-12 col-md">
                                                <div class="text-uppercase text-muted py-2 px-3">Title</div>
                                            </div>
                                            <div class="col-sm-12 col-md-5 col-xl-1 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Status</div>
                                            </div>
                                           <!--  <div class="col-sm-6 col-md-3 hidden-md-down">
                                                <div class="text-uppercase text-muted py-2 px-3">Last posts</div>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="row no-gutters row-grid">
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-2 icon-stack-3x opacity-100 color-info-800"></i>
                                                                    <i class="base base-3 icon-stack-2x opacity-100 color-info-500"></i>
                                                                    <i class="fal fa-crutches icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        COVID vaccine
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">72 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Nam at justo magna. Aenean facilisis ultricies turpis
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 08:13 <a href="javascript:void(0)" class="text-info">erakalambert</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                    <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-medkit icon-stack-1x opacity-100 color-white"></i>
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Hep B vaccine
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">99 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-f.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Integer felis justo, condimentum vitae pharetra vel, hendrerit eget orci.
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 06:01 <a href="javascript:void(0)" class="text-info">elisamury</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row no-gutters row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex">
                                                                <span class="icon-stack display-4 mr-3 flex-shrink-0">
                                                                     <i class="base base-7 icon-stack-3x opacity-100 color-success-800"></i>
                                                                    <i class="base base-4 icon-stack-2x opacity-100 color-success-600"></i>
                                                                    <i class="fal fa-syringe icon-stack-1x opacity-100 color-white"></i>

                                                                    
                                                                </span>
                                                                <div class="d-inline-flex flex-column">
                                                                    <a href="javascript:void(0)" class="fs-lg fw-500 d-block">
                                                                        Measle/ chicken pox vaccine
                                                                    </a>
                                                                    <div class="d-block text-muted fs-sm">
                                                                       
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-5 col-xl-1 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <span class="d-block text-muted">88 <i>Cases</i></span>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-8 col-md-3 hidden-md-down">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="d-inline-block align-middle status status-success status-sm mr-2">
                                                                    <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                                                </div>
                                                                <div class="flex-1 min-width-0">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Duis placerat in sapien et placerat. Duis quis feugiat leo. Curabitur laoreet ex nec odio interdum
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 12:25 <a href="javascript:void(0)" class="text-info">josekras_alma</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>

                        <div class="row">
                           
                        </div>
                        
                        <!-- Policie And Learning Materials -->
                        <div class="row">
                            <div class="col-xl-6">
                         <div id="panel-5" class="panel">
                                <div class="panel-hdr">
                                    <h2>
                                        Policie And Learning Materials
                                    </h2>
                                </div>
                                <div class="panel-container show">
                                    <div class="panel-content">
                                        <div class="accordion accordion-hover" id="js_demo_accordion-5">
                                            <div class="card">
                                                <div class="card-header">
                                                    <a href="javascript:void(0);" class="card-title" data-toggle="collapse" data-target="#js_demo_accordion-5a" aria-expanded="true">
                                                        <i class="fal fa-cog width-2 fs-xl"></i>
                                                        IC Policies
                                                        <span class="ml-auto">
                                                            <span class="collapsed-reveal">
                                                                <i class="fal fa-chevron-up fs-xl"></i>
                                                            </span>
                                                            <span class="collapsed-hidden">
                                                                <i class="fal fa-chevron-down fs-xl"></i>
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                                <div id="js_demo_accordion-5a" class="collapse show" data-parent="#js_demo_accordion-5">
                                                    <div class="card-body">
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header">
                                                    <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_demo_accordion-5b" aria-expanded="false">
                                                        <i class="fal fa-code-merge width-2 fs-xl"></i>
                                                        Learning Resources 
                                                        <span class="ml-auto">
                                                            <span class="collapsed-reveal">
                                                                <i class="fal fa-chevron-up fs-xl"></i>
                                                            </span>
                                                            <span class="collapsed-hidden">
                                                                <i class="fal fa-chevron-down fs-xl"></i>
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                                <div id="js_demo_accordion-5b" class="collapse" data-parent="#js_demo_accordion-5">
                                                    <div class="card-body">
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    
                    </main>

    <script>
            var pieChart = function()
            {
                var data = {
                    series: [5, 3]
                };

                var sum = function(a, b)
                {
                    return a + b
                };

                new Chartist.Pie('#pieChart', data,
                {
                    labelInterpolationFnc: function(value)
                    {
                        return Math.round(value / data.series.reduce(sum) * 100) + '%';
                    }
                });
            }

          



            $(document).ready(function()
            {
                //$('#js-page-content').smartPanel(); 

                //

                  /* defined datas */
                   pieChart();

            var dataTargetProfit = [
                [1354586000000, 153],
                [1364587000000, 658],
                [1374588000000, 198],
                [1384589000000, 663],
                [1394590000000, 801],
                [1404591000000, 1080],
                [1414592000000, 353],
                [1424593000000, 749],
                [1434594000000, 523],
                [1444595000000, 258],
                [1454596000000, 688],
                [1464597000000, 364]
            ]
            var dataProfit = [
                [1354586000000, 53],
                [1364587000000, 65],
                [1374588000000, 98],
                [1384589000000, 83],
                [1394590000000, 980],
                [1404591000000, 808],
                [1414592000000, 720],
                [1424593000000, 674],
                [1434594000000, 23],
                [1444595000000, 79],
                [1454596000000, 88],
                [1464597000000, 36]
            ]
            var dataSignups = [
                [1354586000000, 647],
                [1364587000000, 435],
                [1374588000000, 784],
                [1384589000000, 346],
                [1394590000000, 487],
                [1404591000000, 463],
                [1414592000000, 479],
                [1424593000000, 236],
                [1434594000000, 843],
                [1444595000000, 657],
                [1454596000000, 241],
                [1464597000000, 341]
            ]
            var dataSet1 = [
                [0, 10],
                [100, 8],
                [200, 7],
                [300, 5],
                [400, 4],
                [500, 6],
                [600, 3],
                [700, 2]
            ];
            var dataSet2 = [
                [0, 9],
                [100, 6],
                [200, 5],
                [300, 3],
                [400, 3],
                [500, 5],
                [600, 2],
                [700, 1]
            ];
                //
                var dataSetPie = [
                {
                    label: "Asia",
                    data: 4119630000,
                    color: color.primary._500
                },
                {
                    label: "Latin America",
                    data: 590950000,
                    color: color.info._500
                },
                {
                    label: "Africa",
                    data: 1012960000,
                    color: color.warning._500
                },
                {
                    label: "Oceania",
                    data: 95100000,
                    color: color.danger._500
                },
                {
                    label: "Europe",
                    data: 727080000,
                    color: color.success._500
                },
                {
                    label: "North America",
                    data: 344120000,
                    color: color.fusion._400
                }];


                $.plot($("#flotPie"), dataSetPie,
                {
                    series:
                    {
                        pie:
                        {
                            innerRadius: 0.5,
                            show: true,
                            radius: 1,
                            label:
                            {
                                show: true,
                                radius: 2 / 3,
                                threshold: 0.1
                            }
                        }
                    },
                    legend:
                    {
                        show: false
                    }
                });


               


                /*
                 * VECTOR MAP
                 */

                var data_array = {
                    "af": "16.63",
                    "al": "0",
                    "dz": "158.97",
                    "ao": "85.81",
                    "ag": "1.1",
                    "ar": "351.02",
                    "am": "8.83",
                    "au": "1219.72",
                    "at": "366.26",
                    "az": "52.17",
                    "bs": "7.54",
                    "bh": "21.73",
                    "bd": "105.4",
                    "bb": "3.96",
                    "by": "52.89",
                    "be": "461.33",
                    "bz": "1.43",
                    "bj": "6.49",
                    "bt": "1.4",
                    "bo": "19.18",
                    "ba": "16.2",
                    "bw": "12.5",
                    "br": "2023.53",
                    "bn": "11.96",
                    "bg": "44.84",
                    "bf": "8.67",
                    "bi": "1.47",
                    "kh": "11.36",
                    "cm": "21.88",
                    "ca": "1563.66",
                    "cv": "1.57",
                    "cf": "2.11",
                    "td": "7.59",
                    "cl": "199.18",
                    "cn": "5745.13",
                    "co": "283.11",
                    "km": "0.56",
                    "cd": "12.6",
                    "cg": "11.88",
                    "cr": "35.02",
                    "ci": "22.38",
                    "hr": "59.92",
                    "cy": "22.75",
                    "cz": "195.23",
                    "dk": "304.56",
                    "dj": "1.14",
                    "dm": "0.38",
                    "do": "50.87",
                    "ec": "61.49",
                    "eg": "216.83",
                    "sv": "21.8",
                    "gq": "14.55",
                    "er": "2.25",
                    "ee": "19.22",
                    "et": "30.94",
                    "fj": "3.15",
                    "fi": "231.98",
                    "fr": "2555.44",
                    "ga": "12.56",
                    "gm": "1.04",
                    "ge": "11.23",
                    "de": "3305.9",
                    "gh": "18.06",
                    "gr": "305.01",
                    "gd": "0.65",
                    "gt": "40.77",
                    "gn": "4.34",
                    "gw": "0.83",
                    "gy": "2.2",
                    "ht": "6.5",
                    "hn": "15.34",
                    "hk": "226.49",
                    "hu": "132.28",
                    "is": "0",
                    "in": "1430.02",
                    "id": "695.06",
                    "ir": "337.9",
                    "iq": "84.14",
                    "ie": "204.14",
                    "il": "201.25",
                    "it": "2036.69",
                    "jm": "13.74",
                    "jp": "5390.9",
                    "jo": "27.13",
                    "kz": "129.76",
                    "ke": "32.42",
                    "ki": "0.15",
                    "kw": "117.32",
                    "kg": "4.44",
                    "la": "6.34",
                    "lv": "23.39",
                    "lb": "39.15",
                    "ls": "1.8",
                    "lr": "0.98",
                    "lt": "35.73",
                    "lu": "52.43",
                    "mk": "9.58",
                    "mg": "8.33",
                    "mw": "5.04",
                    "my": "218.95",
                    "mv": "1.43",
                    "ml": "9.08",
                    "mt": "7.8",
                    "mr": "3.49",
                    "mu": "9.43",
                    "mx": "1004.04",
                    "md": "5.36",
                    "rw": "5.69",
                    "ws": "0.55",
                    "st": "0.19",
                    "sa": "434.44",
                    "sn": "12.66",
                    "rs": "38.92",
                    "sc": "0.92",
                    "sl": "1.9",
                    "sg": "217.38",
                    "sk": "86.26",
                    "si": "46.44",
                    "sb": "0.67",
                    "za": "354.41",
                    "es": "1374.78",
                    "lk": "48.24",
                    "kn": "0.56",
                    "lc": "1",
                    "vc": "0.58",
                    "sd": "65.93",
                    "sr": "3.3",
                    "sz": "3.17",
                    "se": "444.59",
                    "ch": "522.44",
                    "sy": "59.63",
                    "tw": "426.98",
                    "tj": "5.58",
                    "tz": "22.43",
                    "th": "312.61",
                    "tl": "0.62",
                    "tg": "3.07",
                    "to": "0.3",
                    "tt": "21.2",
                    "tn": "43.86",
                    "tr": "729.05",
                    "tm": "0",
                    "ug": "17.12",
                    "ua": "136.56",
                    "ae": "239.65",
                    "gb": "2258.57",
                    "us": "14624.18",
                    "uy": "40.71",
                    "uz": "37.72",
                    "vu": "0.72",
                    "ve": "285.21",
                    "vn": "101.99",
                    "ye": "30.02",
                    "zm": "15.69",
                    "zw": "0"
                };

                $('#vector-map').vectorMap(
                {
                    map: 'world_en',
                    backgroundColor: 'transparent',
                    color: color.warning._50,
                    borderOpacity: 0.5,
                    borderWidth: 1,
                    hoverColor: color.success._300,
                    hoverOpacity: null,
                    selectedColor: color.success._500,
                    selectedRegions: ['US'],
                    enableZoom: true,
                    showTooltip: true,
                    scaleColors: [color.primary._400, color.primary._50],
                    values: data_array,
                    normalizeFunction: 'polynomial',
                    onRegionClick: function(element, code, region)
                    {
                        /*var message = 'You clicked "'
                        + region
                        + '" which has the code: '
                        + code.toLowerCase();
             
                    console.log(message);*/

                        var randomNumber = Math.floor(Math.random() * 10000000);
                        var arrow;

                        if (Math.random() >= 0.5 == true)
                        {
                            arrow = '<div class="ml-2 d-inline-flex"><i class="fal fa-caret-up text-success fs-xs"></i></div>'
                        }
                        else
                        {
                            arrow = '<div class="ml-2 d-inline-flex"><i class="fal fa-caret-down text-danger fs-xs"></i></div>'
                        }

                        $('.js-jqvmap-flag').attr('src', 'https://lipis.github.io/flag-icon-css/flags/4x3/' + code.toLowerCase() + '.svg');
                        $('.js-jqvmap-country').html(region + ' - ' + '$' + randomNumber.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + arrow);
                    }
                });


                /* TAB 1: UPDATING CHART */
                var data = [],
                    totalPoints = 200;
                var getRandomData = function()
                {
                    if (data.length > 0)
                        data = data.slice(1);

                    // do a random walk
                    while (data.length < totalPoints)
                    {
                        var prev = data.length > 0 ? data[data.length - 1] : 50;
                        var y = prev + Math.random() * 10 - 5;
                        if (y < 0)
                            y = 0;
                        if (y > 100)
                            y = 100;
                        data.push(y);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < data.length; ++i)
                        res.push([i, data[i]])
                    return res;
                }
                // setup control widget
                // var updateInterval = 1500;
                // $("#updating-chart").val(updateInterval).change(function()
                // {

                //     var v = $(this).val();
                //     if (v && !isNaN(+v))
                //     {
                //         updateInterval = +v;
                //         $(this).val("" + updateInterval);
                //     }

                // });
                // setup plot
                var options = {
                    colors: [color.primary._700],
                    series:
                    {
                        lines:
                        {
                            show: true,
                            lineWidth: 0.5,
                            fill: 0.9,
                            fillColor:
                            {
                                colors: [
                                {
                                    opacity: 0.6
                                },
                                {
                                    opacity: 0
                                }]
                            },
                        },

                        shadowSize: 0 // Drawing is faster without shadows
                    },
                    grid:
                    {
                        borderColor: '#F0F0F0',
                        borderWidth: 1,
                        labelMargin: 5
                    },
                    xaxis:
                    {
                        color: '#F0F0F0',
                        font:
                        {
                            size: 10,
                            color: '#999'
                        }
                    },
                    yaxis:
                    {
                        min: 0,
                        max: 100,
                        color: '#F0F0F0',
                        font:
                        {
                            size: 10,
                            color: '#999'
                        }
                    }
                };
                // var plot = $.plot($("#updating-chart"), [getRandomData()], options);
                /* live switch */
                // $('input[type="checkbox"]#start_interval').click(function()
                // {
                //     if ($(this).prop('checked'))
                //     {
                //         $on = true;
                //         updateInterval = 1500;
                //         update();
                //     }
                //     else
                //     {
                //         clearInterval(updateInterval);
                //         $on = false;
                //     }
                // });
                var update = function()
                {
                    if ($on == true)
                    {
                        plot.setData([getRandomData()]);
                        plot.draw();
                        setTimeout(update, updateInterval);

                    }
                    else
                    {
                        clearInterval(updateInterval)
                    }

                }



                // /*calendar */
                // var todayDate = moment().startOf('day');
                // var YM = todayDate.format('YYYY-MM');
                // var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
                // var TODAY = todayDate.format('YYYY-MM-DD');
                // var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');


                // var calendarEl = document.getElementById('calendar');

                // var calendar = new FullCalendar.Calendar(calendarEl,
                // {
                //     plugins: ['dayGrid', 'list', 'timeGrid', 'interaction', 'bootstrap'],
                //     themeSystem: 'bootstrap',
                //     timeZone: 'UTC',
                //     dateAlignment: "month", //week, month
                //     buttonText:
                //     {
                //         today: 'today',
                //         month: 'month',
                //         week: 'week',
                //         day: 'day',
                //         list: 'list'
                //     },
                //     eventTimeFormat:
                //     {
                //         hour: 'numeric',
                //         minute: '2-digit',
                //         meridiem: 'short'
                //     },
                //     navLinks: true,
                //     header:
                //     {
                //         left: 'title',
                //         center: '',
                //         right: 'today prev,next'
                //     },
                //     footer:
                //     {
                //         left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
                //         center: '',
                //         right: ''
                //     },
                //     editable: true,
                //     eventLimit: true, // allow "more" link when too many events
                //     events: [
                //     {
                //         title: 'All Day Event',
                //         start: YM + '-01',
                //         description: 'This is a test description', //this is currently bugged: https://github.com/fullcalendar/fullcalendar/issues/1795
                //         className: "border-warning bg-warning text-dark"
                //     },
                //     {
                //         title: 'Reporting',
                //         start: YM + '-14T13:30:00',
                //         end: YM + '-14',
                //         className: "bg-white border-primary text-primary"
                //     },
                //     {
                //         title: 'Surgery oncall',
                //         start: YM + '-02',
                //         end: YM + '-03',
                //         className: "bg-primary border-primary text-white"
                //     },
                //     {
                //         title: 'NextGen Expo 2019 - Product Release',
                //         start: YM + '-03',
                //         end: YM + '-05',
                //         className: "bg-info border-info text-white"
                //     },
                //     {
                //         title: 'Dinner',
                //         start: YM + '-12',
                //         end: YM + '-10'
                //     },
                //     {
                //         id: 999,
                //         title: 'Repeating Event',
                //         start: YM + '-09T16:00:00',
                //         className: "bg-danger border-danger text-white"
                //     },
                //     {
                //         id: 1000,
                //         title: 'Repeating Event',
                //         start: YM + '-16T16:00:00'
                //     },
                //     {
                //         title: 'Conference',
                //         start: YESTERDAY,
                //         end: TOMORROW,
                //         className: "bg-success border-success text-white"
                //     },
                //     {
                //         title: 'Meeting',
                //         start: TODAY + 'T10:30:00',
                //         end: TODAY + 'T12:30:00',
                //         className: "bg-primary text-white border-primary"
                //     },
                //     {
                //         title: 'Lunch',
                //         start: TODAY + 'T12:00:00',
                //         className: "bg-info border-info"
                //     },
                //     {
                //         title: 'Meeting',
                //         start: TODAY + 'T14:30:00',
                //         className: "bg-warning text-dark border-warning"
                //     },
                //     {
                //         title: 'Happy Hour',
                //         start: TODAY + 'T17:30:00',
                //         className: "bg-success border-success text-white"
                //     },
                //     {
                //         title: 'Dinner',
                //         start: TODAY + 'T20:00:00',
                //         className: "bg-danger border-danger text-white"
                //     },
                //     {
                //         title: 'Birthday Party',
                //         start: TOMORROW + 'T07:00:00',
                //         className: "bg-primary text-white border-primary text-white"
                //     },
                //     {
                //         title: 'Gotbootstrap Meeting',
                //         url: 'http://gotbootstrap.com/',
                //         start: YM + '-28',
                //         className: "bg-info border-info text-white"
                //     }],
                //     viewSkeletonRender: function()
                //     {
                //         $('.fc-toolbar .btn-default').addClass('btn-sm');
                //         $('.fc-header-toolbar h2').addClass('fs-md');
                //         $('#calendar').addClass('fc-reset-order')
                //     },

                // });

                // calendar.render();


                 /* flot toggle example */
                var flot_toggle = function()
                {

                    var data = [
                    {
                        label: "MDRO Rate",
                        data: dataTargetProfit,
                        color: color.info._400,
                        bars:
                        {
                            show: true,
                            align: "center",
                            barWidth: 30 * 30 * 60 * 1000 * 80,
                            lineWidth: 0,
                            /*fillColor: {
                                colors: [color.primary._500, color.primary._900]
                            },*/
                            fillColor:
                            {
                                colors: [
                                {
                                    opacity: 0.9
                                },
                                {
                                    opacity: 0.1
                                }]
                            }
                        },
                        highlightColor: 'rgba(255,255,255,0.3)',
                        shadowSize: 0
                    },
                    {
                        label: "Acquired Infections",
                        data: dataProfit,
                        color: color.warning._500,
                        lines:
                        {
                            show: true,
                            lineWidth: 2
                        },
                        shadowSize: 0,
                        points:
                        {
                            show: true
                        }
                    },
                    {
                        label: "User Signups",
                        data: dataSignups,
                        color: color.success._500,
                        lines:
                        {
                            show: true,
                            lineWidth: 2
                        },
                        shadowSize: 0,
                        points:
                        {
                            show: true
                        }
                    }]

                    var options = {
                        grid:
                        {
                            hoverable: true,
                            clickable: true,
                            tickColor: '#f2f2f2',
                            borderWidth: 1,
                            borderColor: '#f2f2f2'
                        },
                        tooltip: true,
                        tooltipOpts:
                        {
                            cssClass: 'tooltip-inner',
                            defaultTheme: false
                        },
                        xaxis:
                        {
                            mode: "time"
                        },
                        yaxes:
                        {
                            tickFormatter: function(val, axis)
                            {
                                return "$" + val;
                            },
                            max: 1200
                        }

                    };

                    var plot2 = null;

                    function plotNow()
                    {
                        var d = [];
                        $("#js-checkbox-toggles").find(':checkbox').each(function()
                        {
                            if ($(this).is(':checked'))
                            {
                                d.push(data[$(this).attr("name").substr(4, 1)]);
                            }
                        });
                        if (d.length > 0)
                        {
                            if (plot2)
                            {
                                plot2.setData(d);
                                plot2.draw();
                            }
                            else
                            {
                                plot2 = $.plot($("#flot-toggles"), d, options);
                            }
                        }

                    };

                    $("#js-checkbox-toggles").find(':checkbox').on('change', function()
                    {
                        plotNow();
                    });
                    plotNow()
                }
                flot_toggle();
                /* flot toggle example -- end*/

                /* flot area */
                // var flotArea = $.plot($('#flot-area'), [
                // {
                //     data: dataSet1,
                //     label: 'New Customer',
                //     color: color.success._200
                // },
                // {
                //     data: dataSet2,
                //     label: 'Returning Customer',
                //     color: color.info._200
                // }],
                // {
                //     series:
                //     {
                //         lines:
                //         {
                //             show: true,
                //             lineWidth: 2,
                //             fill: true,
                //             fillColor:
                //             {
                //                 colors: [
                //                 {
                //                     opacity: 0
                //                 },
                //                 {
                //                     opacity: 0.5
                //                 }]
                //             }
                //         },
                //         shadowSize: 0
                //     },
                //     points:
                //     {
                //         show: true,
                //     },
                //     legend:
                //     {
                //         noColumns: 1,
                //         position: 'nw'
                //     },
                //     grid:
                //     {
                //         hoverable: true,
                //         clickable: true,
                //         borderColor: '#ddd',
                //         tickColor: '#ddd',
                //         aboveData: true,
                //         borderWidth: 0,
                //         labelMargin: 5,
                //         backgroundColor: 'transparent'
                //     },
                //     yaxis:
                //     {
                //         tickLength: 1,
                //         min: 0,
                //         max: 15,
                //         color: '#eee',
                //         font:
                //         {
                //             size: 0,
                //             color: '#999'
                //         }
                //     },
                //     xaxis:
                //     {
                //         tickLength: 1,
                //         color: '#eee',
                //         font:
                //         {
                //             size: 10,
                //             color: '#999'
                //         }
                //     }

                // });
                /* flot area -- end */

                var flotVisit = $.plot('#flotVisit', [
                {
                    data: [
                        [3, 0],
                        [4, 1],
                        [5, 3],
                        [6, 3],
                        [7, 10],
                        [8, 11],
                        [9, 12],
                        [10, 9],
                        [11, 12],
                        [12, 8],
                        [13, 5]
                    ],
                    color: color.success._200
                },
                {
                    data: [
                        [1, 0],
                        [2, 0],
                        [3, 1],
                        [4, 2],
                        [5, 2],
                        [6, 5],
                        [7, 8],
                        [8, 12],
                        [9, 9],
                        [10, 11],
                        [11, 5]
                    ],
                    color: color.info._200
                }],
                {
                    series:
                    {
                        shadowSize: 0,
                        lines:
                        {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor:
                            {
                                colors: [
                                {
                                    opacity: 0
                                },
                                {
                                    opacity: 0.12
                                }]
                            }
                        }
                    },
                    grid:
                    {
                        borderWidth: 0
                    },
                    yaxis:
                    {
                        min: 0,
                        max: 15,
                        tickColor: '#ddd',
                        ticks: [
                            [0, ''],
                            [5, '100K'],
                            [10, '200K'],
                            [15, '300K']
                        ],
                        font:
                        {
                            color: '#444',
                            size: 10
                        }
                    },
                    xaxis:
                    {

                        tickColor: '#eee',
                        ticks: [
                            [2, '2am'],
                            [3, '3am'],
                            [4, '4am'],
                            [5, '5am'],
                            [6, '6am'],
                            [7, '7am'],
                            [8, '8am'],
                            [9, '9am'],
                            [10, '1pm'],
                            [11, '2pm'],
                            [12, '3pm'],
                            [13, '4pm']
                        ],
                        font:
                        {
                            color: '#999',
                            size: 9
                        }
                    }
                });
            });

        </script>