dagarcos
/
FlaskWebSample


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678
							<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.1.15
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">
  <head>
    <base href="./../">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI Free Bootstrap Admin Template</title>
    <!-- Icons-->
    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
    <!-- Global site tag (gtag.js) - Google Analytics-->
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      // Shared ID
      gtag('config', 'UA-118965717-3');
      // Bootstrap ID
      gtag('config', 'UA-118965717-5');
    </script>
  </head>
  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
    <header class="app-header navbar">
      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
      </a>
      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
        <span class="navbar-toggler-icon"></span>
      </button>
      <ul class="nav navbar-nav d-md-down-none">
        <li class="nav-item px-3">
          <a class="nav-link" href="#">Dashboard</a>
        </li>
        <li class="nav-item px-3">
          <a class="nav-link" href="#">Users</a>
        </li>
        <li class="nav-item px-3">
          <a class="nav-link" href="#">Settings</a>
        </li>
      </ul>
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item d-md-down-none">
          <a class="nav-link" href="#">
            <i class="icon-bell"></i>
            <span class="badge badge-pill badge-danger">5</span>
          </a>
        </li>
        <li class="nav-item d-md-down-none">
          <a class="nav-link" href="#">
            <i class="icon-list"></i>
          </a>
        </li>
        <li class="nav-item d-md-down-none">
          <a class="nav-link" href="#">
            <i class="icon-location-pin"></i>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-header text-center">
              <strong>Account</strong>
            </div>
            <a class="dropdown-item" href="#">
              <i class="fa fa-bell-o"></i> Updates
              <span class="badge badge-info">42</span>
            </a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-envelope-o"></i> Messages
              <span class="badge badge-success">42</span>
            </a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-tasks"></i> Tasks
              <span class="badge badge-danger">42</span>
            </a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-comments"></i> Comments
              <span class="badge badge-warning">42</span>
            </a>
            <div class="dropdown-header text-center">
              <strong>Settings</strong>
            </div>
            <a class="dropdown-item" href="#">
              <i class="fa fa-user"></i> Profile</a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-wrench"></i> Settings</a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-usd"></i> Payments
              <span class="badge badge-secondary">42</span>
            </a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-file"></i> Projects
              <span class="badge badge-primary">42</span>
            </a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
              <i class="fa fa-shield"></i> Lock Account</a>
            <a class="dropdown-item" href="#">
              <i class="fa fa-lock"></i> Logout</a>
          </div>
        </li>
      </ul>
      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
        <span class="navbar-toggler-icon"></span>
      </button>
      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
        <span class="navbar-toggler-icon"></span>
      </button>
    </header>
    <div class="app-body">
      <div class="sidebar">
        <nav class="sidebar-nav">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="index.html">
                <i class="nav-icon icon-speedometer"></i> Dashboard
                <span class="badge badge-primary">NEW</span>
              </a>
            </li>
            <li class="nav-title">Theme</li>
            <li class="nav-item">
              <a class="nav-link" href="colors.html">
                <i class="nav-icon icon-drop"></i> Colors</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="typography.html">
                <i class="nav-icon icon-pencil"></i> Typography</a>
            </li>
            <li class="nav-title">Components</li>
            <li class="nav-item nav-dropdown">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-puzzle"></i> Base</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="base/breadcrumb.html">
                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/cards.html">
                    <i class="nav-icon icon-puzzle"></i> Cards</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/carousel.html">
                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/collapse.html">
                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/forms.html">
                    <i class="nav-icon icon-puzzle"></i> Forms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/jumbotron.html">
                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/list-group.html">
                    <i class="nav-icon icon-puzzle"></i> List group</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/navs.html">
                    <i class="nav-icon icon-puzzle"></i> Navs</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/pagination.html">
                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/popovers.html">
                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/progress.html">
                    <i class="nav-icon icon-puzzle"></i> Progress</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/scrollspy.html">
                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/switches.html">
                    <i class="nav-icon icon-puzzle"></i> Switches</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/tables.html">
                    <i class="nav-icon icon-puzzle"></i> Tables</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/tabs.html">
                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="base/tooltips.html">
                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
                </li>
              </ul>
            </li>
            <li class="nav-item nav-dropdown">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-cursor"></i> Buttons</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="buttons/buttons.html">
                    <i class="nav-icon icon-cursor"></i> Buttons</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="buttons/button-group.html">
                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="buttons/dropdowns.html">
                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="buttons/brand-buttons.html">
                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="charts.html">
                <i class="nav-icon icon-pie-chart"></i> Charts</a>
            </li>
            <li class="nav-item nav-dropdown">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-star"></i> Icons</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="icons/coreui-icons.html">
                    <i class="nav-icon icon-star"></i> CoreUI Icons
                    <span class="badge badge-success">NEW</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="icons/flags.html">
                    <i class="nav-icon icon-star"></i> Flags</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="icons/font-awesome.html">
                    <i class="nav-icon icon-star"></i> Font Awesome
                    <span class="badge badge-secondary">4.7</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="icons/simple-line-icons.html">
                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
                </li>
              </ul>
            </li>
            <li class="nav-item nav-dropdown">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-bell"></i> Notifications</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="notifications/alerts.html">
                    <i class="nav-icon icon-bell"></i> Alerts</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="notifications/badge.html">
                    <i class="nav-icon icon-bell"></i> Badge</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="notifications/modals.html">
                    <i class="nav-icon icon-bell"></i> Modals</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="widgets.html">
                <i class="nav-icon icon-calculator"></i> Widgets
                <span class="badge badge-primary">NEW</span>
              </a>
            </li>
            <li class="divider"></li>
            <li class="nav-title">Extras</li>
            <li class="nav-item nav-dropdown">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-star"></i> Pages</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="login.html" target="_top">
                    <i class="nav-icon icon-star"></i> Login</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="register.html" target="_top">
                    <i class="nav-icon icon-star"></i> Register</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="404.html" target="_top">
                    <i class="nav-icon icon-star"></i> Error 404</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="500.html" target="_top">
                    <i class="nav-icon icon-star"></i> Error 500</a>
                </li>
              </ul>
            </li>
            <li class="nav-item mt-auto">
              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
                <i class="nav-icon icon-layers"></i> Try CoreUI
                <strong>PRO</strong>
              </a>
            </li>
          </ul>
        </nav>
        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
      </div>
      <main class="main">
        <!-- Breadcrumb-->
        <ol class="breadcrumb">
          <li class="breadcrumb-item">Home</li>
          <li class="breadcrumb-item">
            <a href="#">Admin</a>
          </li>
          <li class="breadcrumb-item active">Dashboard</li>
          <!-- Breadcrumb Menu-->
          <li class="breadcrumb-menu d-md-down-none">
            <div class="btn-group" role="group" aria-label="Button group">
              <a class="btn" href="#">
                <i class="icon-speech"></i>
              </a>
              <a class="btn" href="./">
                <i class="icon-graph"></i>  Dashboard</a>
              <a class="btn" href="#">
                <i class="icon-settings"></i>  Settings</a>
            </div>
          </li>
        </ol>
        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="card">
              <div class="card-header">
                <i class="fa fa-font-awesome"></i> Flags</div>
              <div class="card-body">
                <div class="row">
                  <div class="col-12 mb-5">For using the flags inline with text add the classes
                    <code>.flag-icon</code> and
                    <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.</div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ad h1" id="ad" title="ad"></i>
                    <div>flag-icon-ad</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ae h1" id="ae" title="ae"></i>
                    <div>flag-icon-ae</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-af h1" id="af" title="af"></i>
                    <div>flag-icon-af</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ag h1" id="ag" title="ag"></i>
                    <div>flag-icon-ag</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ai h1" id="ai" title="ai"></i>
                    <div>flag-icon-ai</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-al h1" id="al" title="al"></i>
                    <div>flag-icon-al</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-am h1" id="am" title="am"></i>
                    <div>flag-icon-am</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ao h1" id="ao" title="ao"></i>
                    <div>flag-icon-ao</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-aq h1" id="aq" title="aq"></i>
                    <div>flag-icon-aq</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ar h1" id="ar" title="ar"></i>
                    <div>flag-icon-ar</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-as h1" id="as" title="as"></i>
                    <div>flag-icon-as</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-at h1" id="at" title="at"></i>
                    <div>flag-icon-at</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-au h1" id="au" title="au"></i>
                    <div>flag-icon-au</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-aw h1" id="aw" title="aw"></i>
                    <div>flag-icon-aw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ax h1" id="ax" title="ax"></i>
                    <div>flag-icon-ax</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-az h1" id="az" title="az"></i>
                    <div>flag-icon-az</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ba h1" id="ba" title="ba"></i>
                    <div>flag-icon-ba</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bb h1" id="bb" title="bb"></i>
                    <div>flag-icon-bb</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bd h1" id="bd" title="bd"></i>
                    <div>flag-icon-bd</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-be h1" id="be" title="be"></i>
                    <div>flag-icon-be</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bf h1" id="bf" title="bf"></i>
                    <div>flag-icon-bf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bg h1" id="bg" title="bg"></i>
                    <div>flag-icon-bg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bh h1" id="bh" title="bh"></i>
                    <div>flag-icon-bh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bi h1" id="bi" title="bi"></i>
                    <div>flag-icon-bi</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bj h1" id="bj" title="bj"></i>
                    <div>flag-icon-bj</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bl h1" id="bl" title="bl"></i>
                    <div>flag-icon-bl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bm h1" id="bm" title="bm"></i>
                    <div>flag-icon-bm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bn h1" id="bn" title="bn"></i>
                    <div>flag-icon-bn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bo h1" id="bo" title="bo"></i>
                    <div>flag-icon-bo</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bq h1" id="bq" title="bq"></i>
                    <div>flag-icon-bq</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-br h1" id="br" title="br"></i>
                    <div>flag-icon-br</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bs h1" id="bs" title="bs"></i>
                    <div>flag-icon-bs</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bt h1" id="bt" title="bt"></i>
                    <div>flag-icon-bt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bv h1" id="bv" title="bv"></i>
                    <div>flag-icon-bv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bw h1" id="bw" title="bw"></i>
                    <div>flag-icon-bw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-by h1" id="by" title="by"></i>
                    <div>flag-icon-by</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-bz h1" id="bz" title="bz"></i>
                    <div>flag-icon-bz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ca h1" id="ca" title="ca"></i>
                    <div>flag-icon-ca</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cc h1" id="cc" title="cc"></i>
                    <div>flag-icon-cc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cd h1" id="cd" title="cd"></i>
                    <div>flag-icon-cd</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cf h1" id="cf" title="cf"></i>
                    <div>flag-icon-cf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cg h1" id="cg" title="cg"></i>
                    <div>flag-icon-cg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ch h1" id="ch" title="ch"></i>
                    <div>flag-icon-ch</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ci h1" id="ci" title="ci"></i>
                    <div>flag-icon-ci</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ck h1" id="ck" title="ck"></i>
                    <div>flag-icon-ck</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cl h1" id="cl" title="cl"></i>
                    <div>flag-icon-cl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cm h1" id="cm" title="cm"></i>
                    <div>flag-icon-cm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cn h1" id="cn" title="cn"></i>
                    <div>flag-icon-cn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-co h1" id="co" title="co"></i>
                    <div>flag-icon-co</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cr h1" id="cr" title="cr"></i>
                    <div>flag-icon-cr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cu h1" id="cu" title="cu"></i>
                    <div>flag-icon-cu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cv h1" id="cv" title="cv"></i>
                    <div>flag-icon-cv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cw h1" id="cw" title="cw"></i>
                    <div>flag-icon-cw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cx h1" id="cx" title="cx"></i>
                    <div>flag-icon-cx</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cy h1" id="cy" title="cy"></i>
                    <div>flag-icon-cy</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-cz h1" id="cz" title="cz"></i>
                    <div>flag-icon-cz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-de h1" id="de" title="de"></i>
                    <div>flag-icon-de</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-dj h1" id="dj" title="dj"></i>
                    <div>flag-icon-dj</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-dk h1" id="dk" title="dk"></i>
                    <div>flag-icon-dk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-dm h1" id="dm" title="dm"></i>
                    <div>flag-icon-dm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-do h1" id="do" title="do"></i>
                    <div>flag-icon-do</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-dz h1" id="dz" title="dz"></i>
                    <div>flag-icon-dz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ec h1" id="ec" title="ec"></i>
                    <div>flag-icon-ec</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ee h1" id="ee" title="ee"></i>
                    <div>flag-icon-ee</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-eg h1" id="eg" title="eg"></i>
                    <div>flag-icon-eg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-eh h1" id="eh" title="eh"></i>
                    <div>flag-icon-eh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-er h1" id="er" title="er"></i>
                    <div>flag-icon-er</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-es h1" id="es" title="es"></i>
                    <div>flag-icon-es</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-et h1" id="et" title="et"></i>
                    <div>flag-icon-et</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fi h1" id="fi" title="fi"></i>
                    <div>flag-icon-fi</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fj h1" id="fj" title="fj"></i>
                    <div>flag-icon-fj</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fk h1" id="fk" title="fk"></i>
                    <div>flag-icon-fk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fm h1" id="fm" title="fm"></i>
                    <div>flag-icon-fm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fo h1" id="fo" title="fo"></i>
                    <div>flag-icon-fo</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-fr h1" id="fr" title="fr"></i>
                    <div>flag-icon-fr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ga h1" id="ga" title="ga"></i>
                    <div>flag-icon-ga</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gb h1" id="gb" title="gb"></i>
                    <div>flag-icon-gb</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gd h1" id="gd" title="gd"></i>
                    <div>flag-icon-gd</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ge h1" id="ge" title="ge"></i>
                    <div>flag-icon-ge</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gf h1" id="gf" title="gf"></i>
                    <div>flag-icon-gf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gg h1" id="gg" title="gg"></i>
                    <div>flag-icon-gg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gh h1" id="gh" title="gh"></i>
                    <div>flag-icon-gh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gi h1" id="gi" title="gi"></i>
                    <div>flag-icon-gi</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gl h1" id="gl" title="gl"></i>
                    <div>flag-icon-gl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gm h1" id="gm" title="gm"></i>
                    <div>flag-icon-gm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gn h1" id="gn" title="gn"></i>
                    <div>flag-icon-gn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gp h1" id="gp" title="gp"></i>
                    <div>flag-icon-gp</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gq h1" id="gq" title="gq"></i>
                    <div>flag-icon-gq</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gr h1" id="gr" title="gr"></i>
                    <div>flag-icon-gr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gs h1" id="gs" title="gs"></i>
                    <div>flag-icon-gs</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gt h1" id="gt" title="gt"></i>
                    <div>flag-icon-gt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gu h1" id="gu" title="gu"></i>
                    <div>flag-icon-gu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gw h1" id="gw" title="gw"></i>
                    <div>flag-icon-gw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-gy h1" id="gy" title="gy"></i>
                    <div>flag-icon-gy</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-hk h1" id="hk" title="hk"></i>
                    <div>flag-icon-hk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-hm h1" id="hm" title="hm"></i>
                    <div>flag-icon-hm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-hn h1" id="hn" title="hn"></i>
                    <div>flag-icon-hn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-hr h1" id="hr" title="hr"></i>
                    <div>flag-icon-hr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ht h1" id="ht" title="ht"></i>
                    <div>flag-icon-ht</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-hu h1" id="hu" title="hu"></i>
                    <div>flag-icon-hu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-id h1" id="id" title="id"></i>
                    <div>flag-icon-id</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ie h1" id="ie" title="ie"></i>
                    <div>flag-icon-ie</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-il h1" id="il" title="il"></i>
                    <div>flag-icon-il</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-im h1" id="im" title="im"></i>
                    <div>flag-icon-im</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-in h1" id="in" title="in"></i>
                    <div>flag-icon-in</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-io h1" id="io" title="io"></i>
                    <div>flag-icon-io</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-iq h1" id="iq" title="iq"></i>
                    <div>flag-icon-iq</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ir h1" id="ir" title="ir"></i>
                    <div>flag-icon-ir</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-is h1" id="is" title="is"></i>
                    <div>flag-icon-is</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-it h1" id="it" title="it"></i>
                    <div>flag-icon-it</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-je h1" id="je" title="je"></i>
                    <div>flag-icon-je</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-jm h1" id="jm" title="jm"></i>
                    <div>flag-icon-jm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-jo h1" id="jo" title="jo"></i>
                    <div>flag-icon-jo</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-jp h1" id="jp" title="jp"></i>
                    <div>flag-icon-jp</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ke h1" id="ke" title="ke"></i>
                    <div>flag-icon-ke</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kg h1" id="kg" title="kg"></i>
                    <div>flag-icon-kg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kh h1" id="kh" title="kh"></i>
                    <div>flag-icon-kh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ki h1" id="ki" title="ki"></i>
                    <div>flag-icon-ki</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-km h1" id="km" title="km"></i>
                    <div>flag-icon-km</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kn h1" id="kn" title="kn"></i>
                    <div>flag-icon-kn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kp h1" id="kp" title="kp"></i>
                    <div>flag-icon-kp</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kr h1" id="kr" title="kr"></i>
                    <div>flag-icon-kr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kw h1" id="kw" title="kw"></i>
                    <div>flag-icon-kw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ky h1" id="ky" title="ky"></i>
                    <div>flag-icon-ky</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-kz h1" id="kz" title="kz"></i>
                    <div>flag-icon-kz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-la h1" id="la" title="la"></i>
                    <div>flag-icon-la</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lb h1" id="lb" title="lb"></i>
                    <div>flag-icon-lb</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lc h1" id="lc" title="lc"></i>
                    <div>flag-icon-lc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-li h1" id="li" title="li"></i>
                    <div>flag-icon-li</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lk h1" id="lk" title="lk"></i>
                    <div>flag-icon-lk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lr h1" id="lr" title="lr"></i>
                    <div>flag-icon-lr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ls h1" id="ls" title="ls"></i>
                    <div>flag-icon-ls</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lt h1" id="lt" title="lt"></i>
                    <div>flag-icon-lt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lu h1" id="lu" title="lu"></i>
                    <div>flag-icon-lu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-lv h1" id="lv" title="lv"></i>
                    <div>flag-icon-lv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ly h1" id="ly" title="ly"></i>
                    <div>flag-icon-ly</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ma h1" id="ma" title="ma"></i>
                    <div>flag-icon-ma</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mc h1" id="mc" title="mc"></i>
                    <div>flag-icon-mc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-md h1" id="md" title="md"></i>
                    <div>flag-icon-md</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-me h1" id="me" title="me"></i>
                    <div>flag-icon-me</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mf h1" id="mf" title="mf"></i>
                    <div>flag-icon-mf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mg h1" id="mg" title="mg"></i>
                    <div>flag-icon-mg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mh h1" id="mh" title="mh"></i>
                    <div>flag-icon-mh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mk h1" id="mk" title="mk"></i>
                    <div>flag-icon-mk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ml h1" id="ml" title="ml"></i>
                    <div>flag-icon-ml</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mm h1" id="mm" title="mm"></i>
                    <div>flag-icon-mm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mn h1" id="mn" title="mn"></i>
                    <div>flag-icon-mn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mo h1" id="mo" title="mo"></i>
                    <div>flag-icon-mo</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mp h1" id="mp" title="mp"></i>
                    <div>flag-icon-mp</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mq h1" id="mq" title="mq"></i>
                    <div>flag-icon-mq</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mr h1" id="mr" title="mr"></i>
                    <div>flag-icon-mr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ms h1" id="ms" title="ms"></i>
                    <div>flag-icon-ms</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mt h1" id="mt" title="mt"></i>
                    <div>flag-icon-mt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mu h1" id="mu" title="mu"></i>
                    <div>flag-icon-mu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mv h1" id="mv" title="mv"></i>
                    <div>flag-icon-mv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mw h1" id="mw" title="mw"></i>
                    <div>flag-icon-mw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mx h1" id="mx" title="mx"></i>
                    <div>flag-icon-mx</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-my h1" id="my" title="my"></i>
                    <div>flag-icon-my</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-mz h1" id="mz" title="mz"></i>
                    <div>flag-icon-mz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-na h1" id="na" title="na"></i>
                    <div>flag-icon-na</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nc h1" id="nc" title="nc"></i>
                    <div>flag-icon-nc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ne h1" id="ne" title="ne"></i>
                    <div>flag-icon-ne</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nf h1" id="nf" title="nf"></i>
                    <div>flag-icon-nf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ng h1" id="ng" title="ng"></i>
                    <div>flag-icon-ng</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ni h1" id="ni" title="ni"></i>
                    <div>flag-icon-ni</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nl h1" id="nl" title="nl"></i>
                    <div>flag-icon-nl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-no h1" id="no" title="no"></i>
                    <div>flag-icon-no</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-np h1" id="np" title="np"></i>
                    <div>flag-icon-np</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nr h1" id="nr" title="nr"></i>
                    <div>flag-icon-nr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nu h1" id="nu" title="nu"></i>
                    <div>flag-icon-nu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-nz h1" id="nz" title="nz"></i>
                    <div>flag-icon-nz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-om h1" id="om" title="om"></i>
                    <div>flag-icon-om</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pa h1" id="pa" title="pa"></i>
                    <div>flag-icon-pa</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pe h1" id="pe" title="pe"></i>
                    <div>flag-icon-pe</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pf h1" id="pf" title="pf"></i>
                    <div>flag-icon-pf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pg h1" id="pg" title="pg"></i>
                    <div>flag-icon-pg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ph h1" id="ph" title="ph"></i>
                    <div>flag-icon-ph</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pk h1" id="pk" title="pk"></i>
                    <div>flag-icon-pk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pl h1" id="pl" title="pl"></i>
                    <div>flag-icon-pl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pm h1" id="pm" title="pm"></i>
                    <div>flag-icon-pm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pn h1" id="pn" title="pn"></i>
                    <div>flag-icon-pn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pr h1" id="pr" title="pr"></i>
                    <div>flag-icon-pr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ps h1" id="ps" title="ps"></i>
                    <div>flag-icon-ps</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pt h1" id="pt" title="pt"></i>
                    <div>flag-icon-pt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-pw h1" id="pw" title="pw"></i>
                    <div>flag-icon-pw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-py h1" id="py" title="py"></i>
                    <div>flag-icon-py</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-qa h1" id="qa" title="qa"></i>
                    <div>flag-icon-qa</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-re h1" id="re" title="re"></i>
                    <div>flag-icon-re</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ro h1" id="ro" title="ro"></i>
                    <div>flag-icon-ro</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-rs h1" id="rs" title="rs"></i>
                    <div>flag-icon-rs</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ru h1" id="ru" title="ru"></i>
                    <div>flag-icon-ru</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-rw h1" id="rw" title="rw"></i>
                    <div>flag-icon-rw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sa h1" id="sa" title="sa"></i>
                    <div>flag-icon-sa</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sb h1" id="sb" title="sb"></i>
                    <div>flag-icon-sb</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sc h1" id="sc" title="sc"></i>
                    <div>flag-icon-sc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sd h1" id="sd" title="sd"></i>
                    <div>flag-icon-sd</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-se h1" id="se" title="se"></i>
                    <div>flag-icon-se</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sg h1" id="sg" title="sg"></i>
                    <div>flag-icon-sg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sh h1" id="sh" title="sh"></i>
                    <div>flag-icon-sh</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-si h1" id="si" title="si"></i>
                    <div>flag-icon-si</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sj h1" id="sj" title="sj"></i>
                    <div>flag-icon-sj</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sk h1" id="sk" title="sk"></i>
                    <div>flag-icon-sk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sl h1" id="sl" title="sl"></i>
                    <div>flag-icon-sl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sm h1" id="sm" title="sm"></i>
                    <div>flag-icon-sm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sn h1" id="sn" title="sn"></i>
                    <div>flag-icon-sn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-so h1" id="so" title="so"></i>
                    <div>flag-icon-so</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sr h1" id="sr" title="sr"></i>
                    <div>flag-icon-sr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ss h1" id="ss" title="ss"></i>
                    <div>flag-icon-ss</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-st h1" id="st" title="st"></i>
                    <div>flag-icon-st</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sv h1" id="sv" title="sv"></i>
                    <div>flag-icon-sv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sx h1" id="sx" title="sx"></i>
                    <div>flag-icon-sx</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sy h1" id="sy" title="sy"></i>
                    <div>flag-icon-sy</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-sz h1" id="sz" title="sz"></i>
                    <div>flag-icon-sz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tc h1" id="tc" title="tc"></i>
                    <div>flag-icon-tc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-td h1" id="td" title="td"></i>
                    <div>flag-icon-td</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tf h1" id="tf" title="tf"></i>
                    <div>flag-icon-tf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tg h1" id="tg" title="tg"></i>
                    <div>flag-icon-tg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-th h1" id="th" title="th"></i>
                    <div>flag-icon-th</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tj h1" id="tj" title="tj"></i>
                    <div>flag-icon-tj</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tk h1" id="tk" title="tk"></i>
                    <div>flag-icon-tk</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tl h1" id="tl" title="tl"></i>
                    <div>flag-icon-tl</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tm h1" id="tm" title="tm"></i>
                    <div>flag-icon-tm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tn h1" id="tn" title="tn"></i>
                    <div>flag-icon-tn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-to h1" id="to" title="to"></i>
                    <div>flag-icon-to</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tr h1" id="tr" title="tr"></i>
                    <div>flag-icon-tr</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tt h1" id="tt" title="tt"></i>
                    <div>flag-icon-tt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tv h1" id="tv" title="tv"></i>
                    <div>flag-icon-tv</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tw h1" id="tw" title="tw"></i>
                    <div>flag-icon-tw</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-tz h1" id="tz" title="tz"></i>
                    <div>flag-icon-tz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ua h1" id="ua" title="ua"></i>
                    <div>flag-icon-ua</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ug h1" id="ug" title="ug"></i>
                    <div>flag-icon-ug</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-um h1" id="um" title="um"></i>
                    <div>flag-icon-um</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-us h1" id="us" title="us"></i>
                    <div>flag-icon-us</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-uy h1" id="uy" title="uy"></i>
                    <div>flag-icon-uy</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-uz h1" id="uz" title="uz"></i>
                    <div>flag-icon-uz</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-va h1" id="va" title="va"></i>
                    <div>flag-icon-va</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-vc h1" id="vc" title="vc"></i>
                    <div>flag-icon-vc</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ve h1" id="ve" title="ve"></i>
                    <div>flag-icon-ve</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-vg h1" id="vg" title="vg"></i>
                    <div>flag-icon-vg</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-vi h1" id="vi" title="vi"></i>
                    <div>flag-icon-vi</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-vn h1" id="vn" title="vn"></i>
                    <div>flag-icon-vn</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-vu h1" id="vu" title="vu"></i>
                    <div>flag-icon-vu</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-wf h1" id="wf" title="wf"></i>
                    <div>flag-icon-wf</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ws h1" id="ws" title="ws"></i>
                    <div>flag-icon-ws</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-ye h1" id="ye" title="ye"></i>
                    <div>flag-icon-ye</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-yt h1" id="yt" title="yt"></i>
                    <div>flag-icon-yt</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-za h1" id="za" title="za"></i>
                    <div>flag-icon-za</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-zm h1" id="zm" title="zm"></i>
                    <div>flag-icon-zm</div>
                  </div>
                  <div class="col-sm-2 col-xs-3 text-center mb-5">
                    <i class="flag-icon flag-icon-zw h1" id="zw" title="zw"></i>
                    <div>flag-icon-zw</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <aside class="aside-menu">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
              <i class="icon-list"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
              <i class="icon-speech"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
              <i class="icon-settings"></i>
            </a>
          </li>
        </ul>
        <!-- Tab panes-->
        <div class="tab-content">
          <div class="tab-pane active" id="timeline" role="tabpanel">
            <div class="list-group list-group-accent">
              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
                <div class="avatar float-right">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                </div>
                <div>Meeting with
                  <strong>Lucas</strong>
                </div>
                <small class="text-muted mr-3">
                  <i class="icon-calendar"></i>  1 - 3pm</small>
                <small class="text-muted">
                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
              </div>
              <div class="list-group-item list-group-item-accent-info">
                <div class="avatar float-right">
                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
                </div>
                <div>Skype with
                  <strong>Megan</strong>
                </div>
                <small class="text-muted mr-3">
                  <i class="icon-calendar"></i>  4 - 5pm</small>
                <small class="text-muted">
                  <i class="icon-social-skype"></i>  On-line</small>
              </div>
              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
                <div>New UI Project -
                  <strong>deadline</strong>
                </div>
                <small class="text-muted mr-3">
                  <i class="icon-calendar"></i>  10 - 11pm</small>
                <small class="text-muted">
                  <i class="icon-home"></i>  creativeLabs HQ</small>
                <div class="avatars-stack mt-2">
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                </div>
              </div>
              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
                <div>
                  <strong>#10 Startups.Garden</strong> Meetup</div>
                <small class="text-muted mr-3">
                  <i class="icon-calendar"></i>  1 - 3pm</small>
                <small class="text-muted">
                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
              </div>
              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
                <div>
                  <strong>Team meeting</strong>
                </div>
                <small class="text-muted mr-3">
                  <i class="icon-calendar"></i>  4 - 6pm</small>
                <small class="text-muted">
                  <i class="icon-home"></i>  creativeLabs HQ</small>
                <div class="avatars-stack mt-2">
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                  <div class="avatar avatar-xs">
                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane p-3" id="messages" role="tabpanel">
            <div class="message">
              <div class="py-3 pb-5 mr-3 float-left">
                <div class="avatar">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  <span class="avatar-status badge-success"></span>
                </div>
              </div>
              <div>
                <small class="text-muted">Lukasz Holeczek</small>
                <small class="text-muted float-right mt-1">1:52 PM</small>
              </div>
              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
            </div>
            <hr>
            <div class="message">
              <div class="py-3 pb-5 mr-3 float-left">
                <div class="avatar">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  <span class="avatar-status badge-success"></span>
                </div>
              </div>
              <div>
                <small class="text-muted">Lukasz Holeczek</small>
                <small class="text-muted float-right mt-1">1:52 PM</small>
              </div>
              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
            </div>
            <hr>
            <div class="message">
              <div class="py-3 pb-5 mr-3 float-left">
                <div class="avatar">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  <span class="avatar-status badge-success"></span>
                </div>
              </div>
              <div>
                <small class="text-muted">Lukasz Holeczek</small>
                <small class="text-muted float-right mt-1">1:52 PM</small>
              </div>
              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
            </div>
            <hr>
            <div class="message">
              <div class="py-3 pb-5 mr-3 float-left">
                <div class="avatar">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  <span class="avatar-status badge-success"></span>
                </div>
              </div>
              <div>
                <small class="text-muted">Lukasz Holeczek</small>
                <small class="text-muted float-right mt-1">1:52 PM</small>
              </div>
              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
            </div>
            <hr>
            <div class="message">
              <div class="py-3 pb-5 mr-3 float-left">
                <div class="avatar">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                  <span class="avatar-status badge-success"></span>
                </div>
              </div>
              <div>
                <small class="text-muted">Lukasz Holeczek</small>
                <small class="text-muted float-right mt-1">1:52 PM</small>
              </div>
              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
            </div>
          </div>
          <div class="tab-pane p-3" id="settings" role="tabpanel">
            <h6>Settings</h6>
            <div class="aside-options">
              <div class="clearfix mt-4">
                <small>
                  <b>Option 1</b>
                </small>
                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                  <input class="switch-input" type="checkbox" checked="">
                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
                </label>
              </div>
              <div>
                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
              </div>
            </div>
            <div class="aside-options">
              <div class="clearfix mt-3">
                <small>
                  <b>Option 2</b>
                </small>
                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                  <input class="switch-input" type="checkbox">
                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
                </label>
              </div>
              <div>
                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
              </div>
            </div>
            <div class="aside-options">
              <div class="clearfix mt-3">
                <small>
                  <b>Option 3</b>
                </small>
                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                  <input class="switch-input" type="checkbox">
                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
                </label>
              </div>
            </div>
            <div class="aside-options">
              <div class="clearfix mt-3">
                <small>
                  <b>Option 4</b>
                </small>
                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                  <input class="switch-input" type="checkbox" checked="">
                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
                </label>
              </div>
            </div>
            <hr>
            <h6>System Utilization</h6>
            <div class="text-uppercase mb-1 mt-4">
              <small>
                <b>CPU Usage</b>
              </small>
            </div>
            <div class="progress progress-xs">
              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">348 Processes. 1/4 Cores.</small>
            <div class="text-uppercase mb-1 mt-2">
              <small>
                <b>Memory Usage</b>
              </small>
            </div>
            <div class="progress progress-xs">
              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">11444GB/16384MB</small>
            <div class="text-uppercase mb-1 mt-2">
              <small>
                <b>SSD 1 Usage</b>
              </small>
            </div>
            <div class="progress progress-xs">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">243GB/256GB</small>
            <div class="text-uppercase mb-1 mt-2">
              <small>
                <b>SSD 2 Usage</b>
              </small>
            </div>
            <div class="progress progress-xs">
              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">25GB/256GB</small>
          </div>
        </div>
      </aside>
    </div>
    <footer class="app-footer">
      <div>
        <a href="https://coreui.io">CoreUI</a>
        <span>&copy; 2018 creativeLabs.</span>
      </div>
      <div class="ml-auto">
        <span>Powered by</span>
        <a href="https://coreui.io">CoreUI</a>
      </div>
    </footer>
    <!-- CoreUI and necessary plugins-->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/pace-progress/pace.min.js"></script>
    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
  </body>
</html>