<div class="page page-widgets">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">UI Kit</a>
        </li>
        <li>
          <a ui-sref="app.ui.widgets">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">





    <!-- cards row -->
    <div class="row">

      <!-- col -->
      <div class="card-container col-lg-3 col-sm-6 col-sm-12">
        <div class="card">
          <div class="front bg-greensea">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <i class="fa fa-users fa-4x"></i>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-8">
                <p class="text-elg text-strong mb-0">3 659</p>
                <span>New Users</span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <div class="back bg-greensea">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-cog fa-2x"></i> Settings</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-chain-broken fa-2x"></i> Content</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-ellipsis-h fa-2x"></i> More</a>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
        </div>
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="card-container col-lg-3 col-sm-6 col-sm-12">
        <div class="card">
          <div class="front bg-lightred">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <i class="fa fa-shopping-cart fa-4x"></i>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-8">
                <p class="text-elg text-strong mb-0">19 364</p>
                <span>New Orders</span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <div class="back bg-lightred">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-cog fa-2x"></i> Settings</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-chain-broken fa-2x"></i> Content</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-ellipsis-h fa-2x"></i> More</a>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
        </div>
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="card-container col-lg-3 col-sm-6 col-sm-12">
        <div class="card">
          <div class="front bg-blue">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <i class="fa fa-usd fa-4x"></i>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-8">
                <p class="text-elg text-strong mb-0">165 984</p>
                <span>Sales</span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <div class="back bg-blue">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-cog fa-2x"></i> Settings</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-chain-broken fa-2x"></i> Content</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-ellipsis-h fa-2x"></i> More</a>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
        </div>
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="card-container col-lg-3 col-sm-6 col-sm-12">
        <div class="card">
          <div class="front bg-slategray">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <i class="fa fa-eye fa-4x"></i>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-8">
                <p class="text-elg text-strong mb-0">29 651</p>
                <span>Visits</span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <div class="back bg-slategray">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-cog fa-2x"></i> Settings</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-chain-broken fa-2x"></i> Content</a>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-xs-4">
                <a href=javascript:;><i class="fa fa-ellipsis-h fa-2x"></i> More</a>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
        </div>
      </div>
      <!-- /col -->

    </div>
    <!-- /row -->




    <!-- row -->
    <div class="row">


      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple bg-lightred" style="height: 190px; overflow: hidden;">

          <!-- tile header -->
          <div class="tile-header">
            <h1 class="custom-font">Todos's</h1>
            <ul class="controls">
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <wrap-owlcarousel class="owl-carousel" data-options="{
            autoPlay: 5000,
            stopOnHover: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem : true}">

              <div>
                <div class="progress-list">
                  <div class="details">
                    <div class="title"><i class="fa fa-caret-right mr-5"></i> <span class="text-md">Release update</span></div>
                    <div class="description text-transparent-white text-lowercase">high priority, started at: 12.08.2014</div>
                  </div>
                  <div class="clearfix" style="height: 45px"></div>
                  <uib-progressbar class="transparent-black not-rounded mb-10" value="50">50%</uib-progressbar>
                </div>
                <div class="pull-right">
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-thumbs-o-up"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-caret-down"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs" style="width:22px;"><i class="fa fa-ellipsis-h"></i></button>
                </div>
                <p class="text-thin">Deadline: <strong>12h 15m</strong></p>
              </div>

              <div>
                <div class="progress-list">
                  <div class="details">
                    <div class="title"><i class="fa fa-caret-right mr-5"></i> <span class="text-md">Fix navigation</span></div>
                    <div class="description text-transparent-white text-lowercase">normal priority, started at: 20.09.2014</div>
                  </div>
                  <div class="clearfix" style="height: 45px"></div>
                  <uib-progressbar class="transparent-black not-rounded mb-10" value="26">26%</uib-progressbar>
                </div>
                <div class="pull-right">
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-thumbs-o-up"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-caret-down"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs" style="width:22px;"><i class="fa fa-ellipsis-h"></i></button>
                </div>
                <p class="text-thin">Deadline: <strong>2d 9h 45m</strong></p>
              </div>

              <div>
                <div class="progress-list">
                  <div class="details">
                    <div class="title"><i class="fa fa-caret-right mr-5"></i> <span class="text-md">Remove dependencies</span></div>
                    <div class="description text-transparent-white text-lowercase">high priority, started at: 26.10.2014</div>
                  </div>
                  <div class="clearfix" style="height: 45px"></div>
                  <uib-progressbar class="transparent-black not-rounded mb-10" value="78">78%</uib-progressbar>
                </div>
                <div class="pull-right">
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-thumbs-o-up"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs mr-5" style="width:22px;"><i class="fa fa-caret-down"></i></button>
                  <button type="button" class="btn btn-border btn-rounded-20 btn-white btn-xs" style="width:22px;"><i class="fa fa-ellipsis-h"></i></button>
                </div>
                <p class="text-thin">Deadline: <strong>1h 5m</strong></p>
              </div>

            </wrap-owlcarousel>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen07">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Users </strong>Feed</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen07 = !isFullscreen07">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile widget -->
          <div class="tile-widget">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-6">
                <div class="media mb-20">
                  <div class="pull-left thumb">
                    <img class="media-object img-circle" src="images/ici-avatar.c6a5ded8.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading mb-0">Ing. Imrich <strong>Kamarel</strong></h4>
                    <small class="text-lightred">UI/UX Designer</small>
                  </div>
                </div>
                <!-- row -->
                <div class="row">
                  <!-- col -->
                  <div class="col-md-4 text-center b-r b-solid">
                    <span class="text-lightred"><i class="fa fa-heart-o"></i> 125</span>
                  </div>
                  <!-- /col -->
                  <!-- col -->
                  <div class="col-md-4 text-center b-r b-solid">
                    <span class="text-greensea"><i class="fa fa-star-o"></i> 67</span>
                  </div>
                  <!-- /col -->
                  <!-- col -->
                  <div class="col-md-4 text-center">
                    <span class="text-blue"><i class="fa fa-comment-o"></i> 26</span>
                  </div>
                  <!-- /col -->
                </div>
                <!-- /row -->
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-6">
                <dl class="dl-horizontal text-sm">
                  <dt style="width: 60px;">About: </dt>
                  <dd style="margin-left: 70px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
                  <dt style="width: 60px;">Hobbies: </dt>
                  <dd style="margin-left: 70px;">Sleep,  games,  animals, nature</dd>
                  <dt style="width: 60px;">Skills: </dt>
                  <dd style="margin-left: 70px;">jquery, html, css, angularjs</dd>
                  <dt style="width: 60px;">Rating: </dt>
                  <dd  style="margin-left: 70px;" class="text-lightred"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></dd>
                </dl>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <!-- /tile widget -->


          <!-- tile body -->
          <div class="tile-body p-0">
            <uib-tabset class="tabs-dark">

              <uib-tab heading="All">
                <div class="wrap-reset" style="max-height: 135px;overflow:auto;">
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar8.aa2e7ab8.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Anna <strong>Opichia</strong></p>
                      <small class="text-lightred">lead designer</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar7.878bc2ec.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Bobby <strong>Socks</strong></p>
                      <small class="text-lightred">CEO</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar6.eaec5a03.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Nico <strong>Vulture</strong></p>
                      <small class="text-lightred">Referent</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar5.fa128f71.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Roger <strong>Flopple</strong></p>
                      <small class="text-lightred">Manager</small>
                    </div>
                  </div>
                  <div class="media">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Deel <strong>McApple</strong></p>
                      <small class="text-lightred">Print master</small>
                    </div>
                  </div>
                </div>
              </uib-tab>

              <uib-tab heading="Superheroes">
                <div class="wrap-reset" style="max-height: 135px;overflow:auto;">
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar7.878bc2ec.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Bobby <strong>Socks</strong></p>
                      <small class="text-lightred">CEO</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar6.eaec5a03.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Nico <strong>Vulture</strong></p>
                      <small class="text-lightred">Referent</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar8.aa2e7ab8.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Anna <strong>Opichia</strong></p>
                      <small class="text-lightred">lead designer</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar5.fa128f71.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Roger <strong>Flopple</strong></p>
                      <small class="text-lightred">Manager</small>
                    </div>
                  </div>
                  <div class="media">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Deel <strong>McApple</strong></p>
                      <small class="text-lightred">Print master</small>
                    </div>
                  </div>
                </div>
              </uib-tab>

              <uib-tab heading="Friends">
                <div class="wrap-reset" style="max-height: 135px;overflow:auto;">
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar5.fa128f71.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Roger <strong>Flopple</strong></p>
                      <small class="text-lightred">Manager</small>
                    </div>
                  </div>
                  <div class="media">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Deel <strong>McApple</strong></p>
                      <small class="text-lightred">Print master</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar8.aa2e7ab8.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Anna <strong>Opichia</strong></p>
                      <small class="text-lightred">lead designer</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar7.878bc2ec.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Bobby <strong>Socks</strong></p>
                      <small class="text-lightred">CEO</small>
                    </div>
                  </div>
                  <div class="media ">
                    <div class="pull-left thumb">
                      <img class="media-object img-circle" src="images/random-avatar6.eaec5a03.jpg" alt="">
                    </div>
                    <div class="pull-right mt-10">
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                      <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
                    </div>
                    <div class="media-body">
                      <p class="media-heading mb-0 mt-10">Nico <strong>Vulture</strong></p>
                      <small class="text-lightred">Referent</small>
                    </div>
                  </div>
                </div>
              </uib-tab>

            </uib-tabset>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->



      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple bg-blue" style="height: 190px; overflow: hidden;">

          <!-- tile header -->
          <div class="tile-header">
            <h1 class="custom-font"><strong>Social</strong> Feed</h1>
            <ul class="controls">
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <wrap-owlcarousel class="owl-carousel" data-options="{
            autoPlay: 5000,
            stopOnHover: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem : true}">

              <div class="media social-feed">
                <span class="pull-left">
                  <i class="fa fa-facebook fa-2x icon-border wh45 text-center" style="line-height: 45px"></i>
                </span>

                <div class="media-body">
                  <p class="media-heading"><strong>Imrich Kamarel</strong> <small class="text-light text-transparent-white">18 minutes ago</small></p>
                  <p class="text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...</p>
                </div>
              </div>

              <div class="media social-feed">
                <span class="pull-left">
                  <i class="fa fa-twitter fa-2x icon-border wh45 text-center" style="line-height: 45px"></i>
                </span>

                <div class="media-body">
                  <p class="media-heading"><strong>George Schwarz</strong> <small class="text-light text-transparent-white">1 hour ago</small></p>
                  <p class="text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...</p>
                </div>
              </div>

              <div class="media social-feed">
                <span class="pull-left">
                  <i class="fa fa-google-plus fa-2x icon-border wh45 text-center" style="line-height: 45px"></i>
                </span>

                <div class="media-body">
                  <p class="media-heading"><strong>Milan Klement</strong> <small class="text-light text-transparent-white">56 minutes ago</small></p>
                  <p class="text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...</p>
                </div>
              </div>

            </wrap-owlcarousel>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile widget-todo" fullscreen="isFullscreen04" ng-controller="TodoWidgetCtrl">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Todo </strong>List</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen04 = !isFullscreen04">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body lined-paper">

            <form class="form-horizontal" role="form" ng-submit="addTodo()">
              <label for="todo" class="text-strong mb-0">Add Todo: </label>
              <div class="form-group mb-0">
                <div class="col-sm-10">
                  <input type="text" class="form-control input-unstyled" id="todo" ng-model="todo" placeholder="type todo here..." required>
                </div>
                <div class="col-sm-2">
                  <button type="submit" class="btn btn-link"><i class="fa fa-chevron-right text-lg"></i></button>
                </div>
              </div>
            </form>

            <ul class="todo-list list-unstyled">
              <li ng-repeat="todo in todos" ng-class="{completed: todo.completed, editing: todo == editedTodo}">

                <div class="view">
                  <label class="checkbox checkbox-custom m-0 text-muted inline">
                    <input type="checkbox" ng-checked="todo.completed" ng-model="todo.completed"><i></i>
                  </label>
                  <span ng-dblclick="editTodo(todo)">{{todo.text}}</span>
                  <a href="javascriph:;" class="text-danger remove-todo pull-right" ng-click="removeTodo(todo)" aria-label="Remove">
                    <i class="fa fa-times"></i>
                  </a>
                </div>

                <form ng-submit="doneEditing(todo)">
                  <input class="form-control edit input-unstyled mb-0" ng-trim="false" ng-model="todo.text" ng-blur="doneEditing(todo)" todo-escape="revertEditing(todo)" todo-focus="todo == editedTodo">
                </form>

              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->


      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple" style="height: 190px; overflow: hidden;">

          <!-- tile header -->
          <div class="tile-header p-0">
            <ul class="controls">
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body lined-paper">
            <wrap-owlcarousel class="owl-carousel" data-options="{
            autoPlay: 5000,
            stopOnHover: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem : true}">

              <div>
                <h4 class="mt-5 mb-5">This is my note #1</h4>
                <p class="text-muted mb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</p>
              </div>

              <div>
                <h4 class="mt-5 mb-5">This is my note #2</h4>
                <p class="text-muted mb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</p>
              </div>

              <div>
                <h4 class="mt-5 mb-5">This is my note #3</h4>
                <p class="text-muted mb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</p>
              </div>

            </wrap-owlcarousel>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile bg-slategray widget-calendar" fullscreen="isFullscreen05">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Mini </strong>Calendar</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen05 = !isFullscreen05">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body p-0" ng-controller="CalendarWidgetCtrl">
            <uib-datepicker ng-model="dt" show-weeks="false" class="datepicker"></uib-datepicker>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->


    </div>
    <!-- /row -->



    <!-- row -->
    <div class="row">
      <!-- col -->
      <div class="col-md-4">
        <!-- tile -->
        <section class="tile widget-message" fullscreen="isFullscreen08" ng-controller="MessageWidgetCtrl">

          <!-- tile header -->
          <div class="tile-header bg-blue dvd dvd-btm">
            <h1 class="custom-font"><strong>Quick </strong>Message</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen08 = !isFullscreen08">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile widget -->
          <div class="tile-widget bg-blue">

            <form role="form" class="ng-pristine ng-valid">
              <div class="form-group">
                <ui-select multiple ng-model="recipients.emails" ng-disabled="disabled" class="underline-input">
                  <ui-select-match placeholder="Select recipients...">{{$item}}</ui-select-match>
                  <ui-select-choices repeat="recipient in availableRecipients | filter:$select.search">
                    {{recipient}}
                  </ui-select-choices>
                </ui-select>
              </div>
              <div class="form-group">
                <input type="text" class="form-control underline-input" placeholder="Type subject...">
              </div>
            </form>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body p-0">

            <text-angular ng-model="messageContent" ta-toolbar="[['h1','h2','h3'],['bold','italics','underline'],['justifyLeft','justifyCenter','justifyRight'],['ul','ol']]"></text-angular>

          </div>
          <!-- /tile body -->

          <!-- tile footer -->
          <div class="tile-footer bg-blue text-right">

            <button class="btn btn-blue btn-ef btn-ef-7 btn-ef-7h" activate-button="success"><i class="fa fa-envelope"></i> Send message</button>

          </div>
          <!-- /tile footer -->

        </section>
        <!-- /tile -->
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-4">
        <!-- tile -->
        <section class="tile widget-chat" fullscreen="isFullscreen09">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font">Chat</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href class="dropdown-toggle">John Douey <i class="fa fa-angle-down ml-5"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href>Imrich Kamarel</a>
                  </li>
                  <li>
                    <a href>Arnold Schwarz</a>
                  </li>
                  <li>
                    <a href>Deel McApple</a>
                  </li>

                </ul>

              </li>

              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen09 = !isFullscreen09">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" style="max-height: 320px;overflow:auto;" slimscroll="{height: '100%'}">

            <ul class="chats p-0">
              <li class="in">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar2.d2558629.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">John Douey </a><span class="datetime">at 12.10.2014</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
              <li class="out">
                <div class="media">
                  <div class="pull-right thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar1.7dd877de.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">You </a><span class="datetime">2 hours ago</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
              <li class="in">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar2.d2558629.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">John Douey </a><span class="datetime">2 hours ago</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
              <li class="out">
                <div class="media">
                  <div class="pull-right thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar1.7dd877de.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">You </a><span class="datetime">1 hours ago</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
              <li class="in">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar2.d2558629.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">John Douey </a><span class="datetime">53 minutes ago</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
              <li class="out">
                <div class="media">
                  <div class="pull-right thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar1.7dd877de.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <p class="media-heading"><a href="#" class="name">You </a><span class="datetime">40 minutes ago</span></p>
                    <span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </span>
                  </div>
                </div>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

          <!-- tile footer -->
          <div class="tile-footer">
            <div class="chat-form">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Type your message here...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button"><i class="fa fa-chevron-right"></i></button>
                </span>
              </div>
            </div>
          </div>
          <!-- /tile footer -->

        </section>
        <!-- /tile -->
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-4">
        <!-- tile -->
        <section class="tile bg-greensea widget-appointments" fullscreen="isFullscreen10" ng-controller="AppointmentsWidgetCtrl">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font">Appointments</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen10 = !isFullscreen10">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">
            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-6 text-center">

                <h4 class="text-light">Bratislava</h4>
                <clock radius="60"></clock>
                <span class="text-light">30&deg;C</span>

              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-6 b-l text-center">
                <span class="day">{{date | date:'dd'}}</span><br/>
                <span class="month">{{date | date:'MMMM'}}</span>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->
          </div>
          <!-- /tile body -->

          <!-- tile footer -->
          <div class="tile-footer dvd dvd-top mt-20">

            <wrap-owlcarousel class="owl-carousel" data-options="{
            autoPlay: 5000,
            stopOnHover: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            navigation: true,
            navigationText : ['<i class=\'fa fa-chevron-left\'></i>','<i class=\'fa fa-chevron-right\'></i>'],
            singleItem : true}">

              <div>
                <p class="text-center text-strong"><i class="fa fa-clock-o"></i> 16:00, <small class="text-thin">Estimated time: 2 hours</small></p>
                <p>
                  <h5 class="mt-10 mb-0 text-strong">Release Update</h5>
                  <small class="text-thin text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</small>
                </p>
              </div>

              <div>
                <p class="text-center text-strong"><i class="fa fa-clock-o"></i> 19:00, <small class="text-thin">Estimated time: 5 hours</small></p>
                <p>
                  <h5 class="mt-10 mb-0 text-strong">Make a Backup</h5>
                  <small class="text-thin text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</small>
                </p>
              </div>

              <div>
                <p class="text-center text-strong"><i class="fa fa-clock-o"></i> 22:45, <small class="text-thin">Estimated time: 8 hours 45 minutes</small></p>
                <p>
                  <h5 class="mt-10 mb-0 text-strong">Buy Tickets</h5>
                  <small class="text-thin text-transparent-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</small>
                </p>
              </div>

            </wrap-owlcarousel>

          </div>
          <!-- /tile footer -->

        </section>
        <!-- /tile -->
      </div>
      <!-- /col -->

    </div>
    <!-- /row -->


    <!-- row -->
    <div class="row">

      <!-- col -->
      <div class="col-md-2">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget bg-cyan text-center p-30">
            <i class="fa fa-shopping-cart fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center">

            <h1 class="m-0">369</h1>
            <span class="text-muted">New Orders</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple tbox">

          <!-- tile widget -->
          <div class="tile-widget bg-warning text-center p-30 tcol">
            <i class="fa fa-support fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center tcol">

            <h1 class="m-0">12</h1>
            <span class="text-muted">Tickets</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-2">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget bg-hotpink text-center p-30">
            <i class="fa fa-users fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center">

            <h1 class="m-0">69</h1>
            <span class="text-muted">New Users</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple tbox">

          <!-- tile widget -->
          <div class="tile-widget bg-danger text-center p-30 tcol">
            <i class="fa fa-sun-o fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center tcol">

            <h1 class="m-0">36</h1>
            <span class="text-muted">&deg;C</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget bg-dutch text-center p-30">
            <i class="fa fa-comments fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center">

            <h1 class="m-0">964</h1>
            <span class="text-muted">New Comments</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple tbox">

          <!-- tile widget -->
          <div class="tile-widget bg-amethyst text-center p-30 tcol">
            <i class="fa fa-rocket fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center tcol">

            <h1 class="m-0">60%</h1>
            <span class="text-muted">Growth</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget bg-drank text-center p-30">
            <i class="fa fa-usd fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center">

            <ul class="list-inline tbox m-0">
              <li class="b-r tcol">
                <h1 class="m-0">3,954</h1>
                <span class="text-muted">Income</span>
              </li>
              <li class="tcol">
                <h1 class="m-0">1,295</h1>
                <span class="text-muted">Outcome</span>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple tbox">

          <!-- tile widget -->
          <div class="tile-widget bg-blue text-center p-30 tcol">
            <i class="fa fa-facebook fa-3x"></i>
          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center tcol">

            <h1 class="m-0">569</h1>
            <span class="text-muted">Followers</span>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->

    </div>
    <!-- /row -->


    <!-- row -->
    <div class="row">

      <!-- col -->
      <div class="col-md-6">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget bg-greensea p-30">

            <!-- row -->
            <div class="row">
              <!-- col -->
              <div class="col-md-4">
                <h4 class="m-0 text-light">Sunny</h4>
                <h2 class="m-0">30&deg;C</h2>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-4 text-center">
                <i class="wi wi-day-sunny fa-5x"></i>
              </div>
              <!-- /col -->
              <!-- col -->
              <div class="col-md-4 text-right">
                <h4 class="m-0 text-light">Bratislava</h4>
              </div>
              <!-- /col -->
            </div>
            <!-- /row -->

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center p-30">

            <ul class="list-inline tbox m-0">
              <li class="b-r tcol">
                <i class="wi wi-day-sunny fa-3x"></i>
                <p class="text-muted">Sunday</p>
              </li>
              <li class="b-r tcol">
                <i class="wi wi-day-sprinkle fa-3x"></i>
                <p class="text-muted">Monday</p>
              </li>
              <li class="b-r tcol">
                <i class="wi wi-day-hail fa-3x"></i>
                <p class="text-muted">Tuesday</p>
              </li>
              <li class="tcol">
                <i class="wi wi-day-rain fa-3x"></i>
                <p class="text-muted">Wednesday</p>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget p-30 text-center">

            <div class="thumb thumb-xl">
              <img class="img-circle" src="images/arnold-avatar.1df41c32.jpg" alt="">
            </div>
            <h4 class="mb-0"><strong>John</strong> Douey</h4>
            <span class="text-muted">Project Manager</span>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center bg-blue p-0">

            <ul class="list-inline tbox m-0">
              <li class="tcol p-10">
                <h2 class="m-0">695</h2>
                <span class="text-transparent-white">Tweets</span>
              </li>
              <li class="tcol bg-blue dker p-10">
                <h2 class="m-0">1 269</h2>
                <span class="text-transparent-white">Followers</span>
              </li>
              <li class="tcol p-10">
                <h2 class="m-0">369</h2>
                <span class="text-transparent-white">Following</span>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget dvd dvd-btm">

            <h5 class="text-strong m-0">Messages <span class="badge bg-lightred pull-right">8</span></h5>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body p-0">

            <ul class="list-unstyled">
              <li class="p-10 b-b">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar8.aa2e7ab8.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <h5 class="media-heading mb-0">Anna Opichia <i class="fa fa-circle text-success pull-right"></i></h5>
                    <small class="text-muted">But I must explain to you how all</small>
                  </div>
                </div>
              </li>
              <li class="p-10 b-b">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar7.878bc2ec.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <h5 class="media-heading mb-0">Bobby Socks <i class="fa fa-circle text-danger pull-right"></i></h5>
                    <small class="text-muted">No one rejects, dislikes, or avoids pleasure itself</small>
                  </div>
                </div>
              </li>
              <li class="p-10 b-b">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar6.eaec5a03.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <h5 class="media-heading mb-0">Nico Vulture <i class="fa fa-circle text-warning pull-right"></i></h5>
                    <small class="text-muted">Nor again is there anyone who loves or pursues or desires to obtain pain</small>
                  </div>
                </div>
              </li>
              <li class="p-10">
                <div class="media">
                  <div class="pull-left thumb thumb-sm">
                    <img class="media-object img-circle" src="images/random-avatar5.fa128f71.jpg" alt="">
                  </div>
                  <div class="media-body">
                    <h5 class="media-heading mb-0">Bobby Fropple <i class="fa fa-circle text-success pull-right"></i></h5>
                    <small class="text-muted">To take a trivial example, which of us ever undertakes</small>
                  </div>
                </div>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

          <!-- tile footer -->
          <div class="tile-footer dvd dvd-top">

            <div class="input-group">
              <input type="text" class="form-control input-sm" placeholder="Search">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
              </span>
            </div>

          </div>
          <!-- /tile footer -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile body -->
          <div class="tile-body p-0">

            <div class="list-group no-radius no-border">
              <a href="" class="list-group-item">
                <span class="badge">654</span>
                <i class="fa fa-envelope text-muted mr-5"></i> Inbox
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-info">364</span>
                <i class="fa fa-eye text-muted mr-5"></i> Profile visits
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-success">12</span>
                <i class="fa fa-phone text-muted mr-5"></i> Call
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-cyan">54</span>
                <i class="fa fa-comments-o text-muted mr-5"></i> Messages
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-warning">19</span>
                <i class="fa fa-bookmark text-muted mr-5"></i> Bookmarks
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-info">56</span>
                <i class="fa fa-bell text-muted mr-5"></i> Notifications
              </a>
              <a href="" class="list-group-item">
                <span class="badge bg-danger">25</span>
                <i class="fa fa-clock-o text-muted mr-5"></i> Watch
              </a>
            </div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->


      <!-- col -->
      <div class="col-md-6">

        <!-- tile -->
        <section class="tile simple">

          <!-- tile widget -->
          <div class="tile-widget bg-slategray p-20">

            <div class="media">
              <div class="pull-left thumb">
                <img class="media-object img-circle" src="images/ici-avatar.c6a5ded8.jpg" alt="">
              </div>
              <div class="media-body">
                <h4 class="media-heading mb-0 mt-10">
                  Imrich <strong>Kamarel</strong>
                  <i class="fa fa-circle text-success pull-right"></i>
                </h4>
                <small class="text-transparent-white">UI/UX Designer</small>
              </div>
            </div>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body p-0">
            <div class="list-group no-radius no-border">
              <a href="#" class="list-group-item">
                <span class="badge">12</span>
                <i class="fa fa-umbrella text-muted mr-5"></i>
                Cras justo odio
              </a>
              <a href="#" class="list-group-item">
                <span class="badge badge-warning">8</span>
                <i class="fa fa-comments-o text-muted mr-5"></i>
                Dapibus ac facilisis in
              </a>
              <a href="#" class="list-group-item">
                <span class="badge badge-info">2</span>
                <i class="fa fa-heart-o text-muted mr-5"></i>
                Morbi leo risus
              </a>
              <a href="#" class="list-group-item">
                <span class="badge badge-success">1</span>
                <i class="fa fa-folder-open-o text-muted mr-5"></i>
                Vestibulum at eros
              </a>
              <a href="#" class="list-group-item">
                <span class="badge badge-danger">9</span>
                <i class="fa fa-star-o text-muted mr-5"></i>
                Porta ac consectetur ac
              </a>
            </div>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget text-center bg-drank dk">

            <div sparkline data="[5,4,6,9,8,4,5,6,7,8,5,6,9,10,5,8,6]" options="{
                type: 'line',
                width: '100%',
                spotColor:'#fff',
                lineWidth: 3,
                height: '120px',
                lineColor: '#fff',
                fillColor: '',
                highlightLineColor:'#fff',
                spotRadius: 6,
                minSpotColor:'#ff4a43',
                maxSpotColor:'#cd97eb'
              }"></div>

            <div sparkline data="[5,3,9,10,8,5,6,5,6,8,5,3,4,8,1]" options="{
                type: 'bar',
                barColor: '#780558',
                barWidth: '4px',
                barSpacing: '6px',
                height: '73px'
              }" style="margin-bottom: -15px"></div>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center">

            <ul class="list-inline tbox m-0">
              <li class="b-r tcol">
                <h1 class="m-0">694</h1>
                <p class="text-muted">Customers</p>
              </li>
              <li class="tcol">
                <h1 class="m-0">962</h1>
                <p class="text-muted">Orders</p>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple no-bg">

          <!-- tile body -->
          <div class="tile-body streamline p-0">

            <article class="streamline-post">
              <aside>
                <div class="thumb thumb-sm">
                  <img class="img-circle" src="images/ici-avatar.c6a5ded8.jpg" alt="">
                </div>
              </aside>
              <div class="post-container">

                <div class="panel panel-default">
                  <div class="panel-heading bg-white">
                    John Douey <span class="label label-primary">Admin</span>
                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> Just now</span>
                  </div>
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

                    <p class="mt-10 mb-0">
                      <a href="" active-toggle class="btn btn-default btn-xs active">
                        <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like
                      </a>
                      <a href="" class="btn btn-default btn-xs">
                        <i class="fa fa-mail-reply"></i> Reply
                      </a>
                    </p>
                  </div>
                </div>

                <ul class="list-unstyled post-replies">

                  <li>

                    <aside>
                      <div class="thumb thumb-sm">
                        <img class="img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
                      </div>
                    </aside>

                    <div class="reply-container">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <p>
                            <strong>James Bend</strong>
                            <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 6 minutes ago</span>
                          </p>

                          <p class="mb-0 text-small">Unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
                        </div>
                      </div>
                    </div>

                  </li>

                </ul>

              </div>
            </article>

            <article class="streamline-post">
              <aside>
                <div class="thumb thumb-sm">
                  <img class="img-circle" src="images/random-avatar1.7dd877de.jpg" alt="">
                </div>
              </aside>
              <div class="post-container">
                <div class="panel panel-default">
                  <div class="panel-heading bg-white">
                    Mike Herrington <span class="label label-default">User</span>
                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 39 minutes ago</span>
                  </div>
                  <div class="panel-body">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                    <p class="mt-10 mb-0">
                      <a href="" active-toggle class="btn btn-default btn-xs">
                        <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like
                      </a>
                      <a href="" class="btn btn-default btn-xs">
                        <i class="fa fa-mail-reply"></i> Reply
                      </a>
                    </p>

                  </div>
                </div>
              </div>
            </article>

            <article class="streamline-post">
              <aside>
                <div class="thumb thumb-sm">
                  <img class="img-circle" src="images/random-avatar3.85ee4bda.jpg" alt="">
                </div>
              </aside>
              <div class="post-container">
                <div class="panel panel-default">
                  <div class="panel-heading bg-white">
                    Robin Wills <span class="label label-success">Editor</span>
                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 1 hour ago</span>
                  </div>
                  <div class="panel-body">
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

                    <p class="mt-10 mb-0">
                      <a href="" active-toggle class="btn btn-default btn-xs">
                        <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like
                      </a>
                      <a href="" class="btn btn-default btn-xs">
                        <i class="fa fa-mail-reply"></i> Reply
                      </a>
                    </p>
                  </div>
                </div>
              </div>
            </article>

            <div class="streamline-form">
              <div class="thumb thumb-sm"><img class="img-circle" src="images/profile-photo.106f5df1.jpg" alt=""></div>
              <form>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Write your comment here...">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Post</button>
                  </span>
                </div>
              </form>
            </div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->


    </div>
    <!-- /row -->





  </div>
  <!-- /page content -->




</div>
