<div class="dker">
  <div class="tab-content tab-alt">
    <div class="tab-pane in active" id="world">
      <div class="padding">
        <div class="row-col">
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x inline m-r-sm">5,600</h1>
            <span class="inline l-h-1x">
              Markets <br>
              <small class="text-muted">From africa to asia</small>
            </span>
          </div>
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x inline m-r-sm text-{{app.setting.theme.primary}}">31,000</h1>
            <span class="inline l-h-1x">
              Employees  <br>
              <small class="text-muted">From 16 countries</small>
            </span>
          </div>
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x text-white text-shadow inline m-r-sm">4,300</h1>
            <span class="inline l-h-1x">
              Suppliers  <br>
              <small class="text-muted">From Nike to PE</small>
            </span>
          </div>
        </div>
      </div>
      <div style="height: 62vh" ui-jp="vectorMap" ui-options="{
        map: 'world_mill_en',
        markers: {{world_markers}},
        normalizeFunction: 'polynomial',
        backgroundColor: 'transparent',
        regionsSelectable: true,
        markersSelectable: true,
        regionStyle: {
          initial: {
            fill: 'rgba(120,130,140,0.2)'
          },
          hover: {
            fill: '{{app.setting.color.accent}}',
            stroke: '#fff'
          },
        },
        markerStyle: {
          initial: {
            fill: 'rgba(0,0,0,0.1)',
            stroke: '#fff'
          },
          hover: {
            fill: '{{app.color.primary}}',
            stroke: '#fff'
          }
        },
        series: {
          markers: [{
            attribute: 'fill',
            scale: ['{{app.setting.color.primary}}','{{app.setting.color.accent}}', '{{app.setting.color.warn}}'],
            values: {{cityAreaData}}
          },{
            attribute: 'r',
            scale: [5, 20],
            values: {{cityAreaData}}
          }]
        }
      }" >
      </div>
    </div>
    <div class="tab-pane" id="usa">
      <div class="padding">
        <div class="row-col">
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x inline m-r-sm text-{{app.setting.theme.primary}}">580</h1>
            <span class="inline l-h-1x">
              Markets <br>
              <small class="text-muted">From africa to asia</small>
            </span>
          </div>
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x inline m-r-sm">12,500</h1>
            <span class="inline l-h-1x">
              Employees  <br>
              <small class="text-muted">From 16 countries</small>
            </span>
          </div>
          <div class="col-xs-4 v-m">
            <h1 class="_800 l-s-n-4x text-white text-shadow inline m-r-sm">1,000</h1>
            <span class="inline l-h-1x">
              Suppliers  <br>
              <small class="text-muted">From Nike to PE</small>
            </span>
          </div>
        </div>
      </div>
      <div style="height: 62vh" ui-jp="vectorMap" ui-options="{
        map: 'us_aea_en',
        markers: {{usa_markers}},
        backgroundColor: 'transparent',
        regionsSelectable: true,
        markersSelectable: true,
        regionStyle: {
          initial: {
            fill: '{{app.color.white}}'
          },
          selected: {
            fill: '{{app.color.danger}}'
          }
        },
        series: {
          markers: [{
            attribute: 'fill',
            scale: ['{{app.color.primary}}','{{app.color.warning}}', '{{app.color.success}}'],
            values: {{cityAreaData}}
          },{
            attribute: 'r',
            scale: [5, 20],
            values: {{cityAreaData}}
          }]
        }
      }" >
      </div>
    </div>
  </div>
  <div class="row-col">
    <div class="col-xs-3 v-m nav-active-{{app.setting.theme.primary}}">
      <div class="p-a">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link p-x-sm active white" href data-toggle="tab" data-target="#world">
              <span class="h5 _700 l-s-n-2x">world</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link p-x-sm white" href data-toggle="tab" data-target="#usa">
              <span class="h5 _700 l-s-n-2x">usa</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-6 v-m text-center text-sm text-muted p-a">Worldwide map data from 1990 - 2010</div>
    <div class="col-xs-3 v-m text-right">
      <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[70,30], {type:'pie', height:22, sliceColors:['{{app.setting.color.primary}}','transparent']}" class="sparkline inline m-r"></span>
      <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[30,70], {type:'pie', height:22, sliceColors:['{{app.setting.color.primary}}','transparent']}" class="sparkline inline m-r"></span>
    </div>
  </div>
</div>
<div class="row no-gutter">
  <div class="col-md-5 col-lg-4">
    <div class="padding">
      <div class="box">
        <div class="box-header b-b">
          <h3 class="text-u-c text-muted">Top 5 Areas</h3>
        </div>
        <ul class="list inset">
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle {{app.setting.theme.primary}}">
                <strong class="text-lg">1</strong>
              </span>
            </a>
            <div class="list-body">
              <div><a href class="_600">East Asia &amp; Pacific</a></div>
              <small class="text-muted">GDP (current US$) $12.57 trillion</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle light lt">
                <strong class="text-lg text-muted">2</strong>
              </span>
            </a>
            <div class="list-body">
              <div><a href class="_600">Europe &amp; Central Asia</a></div>
              <small class="text-muted">GDP (current US$) $1.811 trillion</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle light lt">
                <strong class="text-lg text-muted">3</strong>
              </span>
            </a>
            <div class="list-body">
              <div><a href class="_600">Latin America &amp; Caribbean</a></div>
              <small class="text-muted">GDP (current US$) $4.764 trillion</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle light lt">
                <strong class="text-lg text-muted">4</strong>
              </span>
            </a>
            <div class="list-body">
              <div><a href class="_600">Middle East &amp; North Africa</a></div>
              <small class="text-muted">GDP (current US$) $1.523 trillion</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle light lt">
                <strong class="text-lg text-muted">5</strong>
              </span>
            </a>
            <div class="list-body">
              <div><a href class="_600">South Asia</a></div>
              <small class="text-muted">GDP (current US$) $2.608 trillion </small>
            </div>
          </li>
        </ul>
      </div>
      <div class="box row-col">
        <div class="row-cell p-a black lt">
          <a href>View the Europe economic</a>
        </div>
        <div class="row-cell p-a">
          <a href>View the South Asia economic</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-7 col-lg-8 v-b">
    <div class="padding">
      <div class="text-center m-b">
        <h6 class="text-u-c">The Global Economy in Transition</h6>
        <p class="text-muted">Focuses on financial flows, trends in external debt, and other major financial indicators</p>
      </div>
      <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
        [
          { 
            data: {{p_l_6}}, 
            points: { show: true, radius: 5}, 
            splines: { show: true, tension: 0.45, lineWidth: 4, fill: 0.1} 
          },
          { data: {{p_l_6}}, 
            bars: { show: true, barWidth: 0.05, align: 'center', lineWidth: 0, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } } 
          }
        ], 
        {
          colors: ['{{app.setting.color.primary}}','{{app.setting.color.primary}}'],
          series: { shadowSize: 3 },
          xaxis: { show: true, font: { color: '{{app.setting.color.primary}}' }, position: 'bottom' },
          yaxis:{ show: false, font: { color: '#ccc' }},
          grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'transparent' },
          tooltip: true,
          tooltipOpts: { content: '%x.0 is %y.4',  defaultTheme: false, shifts: { x: 0, y: -40 } }
        }
      " style="height:360px" >
      </div>
      <div class="text-muted text-xs m-t"><span class="pull-right">2015</span>International Debt Statistics (IDS)</div>
    </div>
  </div>
</div>
<div class="row no-gutter">
  <div class="col-md-7 col-lg-8 light lt v-b">
    <div class="text-center p-a m-b-lg">
      <h6 class="text-u-c">Global Goals for a Better World</h6>
      <p class="text-muted"><em>2010 - 2015</em></p>
    </div>
    <div style="overflow: hidden">
      <div style="margin: 0 -2px">
        <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
          [
            { data: {{p_l_5}}, 
              points: { show: true, radius: 0}, 
              splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.8} 
            },
            { data: {{p_l_4}}, 
              points: { show: true, radius: 0}, 
              splines: { show: true, tension: 0.45, lineWidth: 0, fill: 1} 
            }
          ], 
          {
            colors: ['{{app.setting.color.primary}}','{{app.setting.color.primary}}'],
            series: { shadowSize: 3 },
            xaxis: { show: false, font: { color: '#ccc' }, position: 'bottom' },
            yaxis:{ show: false, font: { color: '#ccc' }},
            grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
            tooltip: true,
            tooltipOpts: { content: '%x.0 is %y.4',  defaultTheme: false, shifts: { x: 0, y: -40 } }
          }
        " style="height:140px" >
        </div>
      </div>
    </div>
    <div class="p-a-md {{app.setting.theme.primary}}">
      <div class="row">
        <div class="col-sm-4">
          <h3 class="m-0 _600">98%</h3>
          <span class="text-muted">School enrollment</span>
        </div>
        <div class="col-sm-4">
          <h3 class="m-0 _600">75%</h3>
          <span class="text-muted">Financial Sector</span>
        </div>
        <div class="col-sm-4">
          <h3 class="m-0 _600">78%</h3>
          <span class="text-muted">PMI</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-5 col-lg-4 white">
    <ul class="list inset m-0">
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[70,30], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.primary}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Agriculture &amp; Rural Development</a></div>
          <small class="text-muted">Rural population (4% of total population)</small>
        </div>
      </li>
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[90,10], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.accent}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Climate Change</a></div>
          <small class="text-muted">CO2 emissions (21kt)</small>
        </div>
      </li>
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[80,20], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.accent}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Economy &amp; Growth</a></div>
          <small class="text-muted">Services, etc., value added (75% of GDP)</small>
        </div>
      </li>
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[75,25], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.accent}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Education</a></div>
          <small class="text-muted">School enrollment, primary (120% gross)</small>
        </div>
      </li>
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[85,15], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.accent}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Financial Sector</a></div>
          <small class="text-muted">Market capitalization of listed companies (45% of GDP)</small>
        </div>
      </li>
      <li class="list-item">
        <div class="list-left">
          <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[85,15], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','{{app.setting.color.accent}}']}" class="sparkline inline"></span>
        </div>
        <div class="list-body">
          <div><a href class="_600">Science &amp; Technology</a></div>
          <small class="text-muted">Research and development expenditure (2.12% of GDP)</small>
        </div>
      </li>
    </ul>
  </div>
</div>
