<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div id="main">
<div class="wrapper">
<aside id="left-sidebar-nav hide-on-large-only">
<ul id="slide-out" class="side-nav leftside-navigation ps-container ps-active-y" style="left: -250px; height: 665px;">
<li class="user-details cyan darken-2">
<div class="row">
<div class="col col s4 m4 l4">
<img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
</div>
<div class="col col s8 m8 l8">
<a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
<ul id="profile-dropdown" class="dropdown-content">
<li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
</li>
<li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
</li>
<li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
</li>
<li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
</li>
</ul>
<p class="user-roal">Administrator</p>
</div>
</div>
</li>
<li class="bold active"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
</li>
<li class="bold"><a href="app-email.html" class="waves-effect waves-cyan"><i class="mdi-communication-email"></i> Mailbox <span class="new badge">4</span></a>
</li>
<li class="bold"><a href="app-calendar.html" class="waves-effect waves-cyan"><i class="mdi-editor-insert-invitation"></i> Calender</a>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-invert-colors"></i> CSS</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="css-typography.html">Typography</a>
</li>
<li><a href="css-icons.html">Icons</a>
</li>
<li><a href="css-shadow.html">Shadow</a>
</li>
<li><a href="css-media.html">Media</a>
</li>
<li><a href="css-sass.html">Sass</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-image-palette"></i> UI Elements</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="ui-buttons.html">Buttons</a>
</li>
<li><a href="ui-badges.html">Badges</a>
</li>
<li><a href="ui-cards.html">Cards</a>
</li>
<li><a href="ui-collections.html">Collections</a>
</li>
<li><a href="ui-accordions.html">Accordian</a>
</li>
<li><a href="ui-tabs.html">Tabs</a>
</li>
<li><a href="ui-navbar.html">Navbar</a>
</li>
<li><a href="ui-pagination.html">Pagination</a>
</li>
<li><a href="ui-preloader.html">Preloader</a>
</li>
<li><a href="ui-modals.html">Modals</a>
</li>
<li><a href="ui-media.html">Media</a>
</li>
<li><a href="ui-toasts.html">Toasts</a>
</li>
<li><a href="ui-tooltip.html">Tooltip</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a href="app-widget.html" class="waves-effect waves-cyan"><i class="mdi-device-now-widgets"></i> Widgets <span class="new badge"></span></a>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-border-all"></i> Tables</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="table-basic.html">Basic Tables</a>
</li>
<li><a href="table-data.html">Data Tables</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-comment"></i> Forms</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="form-elements.html">Form Elements</a>
</li>
<li><a href="form-layouts.html">Form Layouts</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-social-pages"></i> Pages</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="page-contact.html">Contact Page</a>
</li>
<li><a href="page-todo.html">ToDos</a>
</li>
<li><a href="page-blog-1.html">Blog Type 1</a>
</li>
<li><a href="page-blog-2.html">Blog Type 2</a>
</li>
<li><a href="page-404.html">404</a>
</li>
<li><a href="page-500.html">500</a>
</li>
<li><a href="page-blank.html">Blank</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-shopping-cart"></i> eCommers</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="eCommerce-products-page.html">Products Page</a>
</li>
<li><a href="eCommerce-pricing.html">Pricing Table</a>
</li>
<li><a href="eCommerce-invoice.html">Invoice</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-image-image"></i> Medias</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="media-gallary-page.html">Gallery Page</a>
</li>
<li><a href="media-hover-effects.html">Image Hover Effects</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-account-circle"></i> User</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="user-profile-page.html">User Profile</a>
</li>
<li><a href="user-login.html">Login</a>
</li>
<li><a href="user-register.html">Register</a>
</li>
<li><a href="user-forgot-password.html">Forgot Password</a>
</li>
<li><a href="user-lock-screen.html">Lock Screen</a>
</li>
<li><a href="user-session-time-out.html">Session Timeout</a>
</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-chart"></i> Charts</a>
<div class="collapsible-body" style="">
<ul>
<li><a href="charts-chartjs.html">Chart JS</a>
</li>
<li><a href="charts-chartist.html">Chartist</a>
</li>
<li><a href="charts-morris.html">Morris Charts</a>
</li>
<li><a href="charts-xcharts.html">xCharts</a>
</li>
<li><a href="charts-flotcharts.html">Flot Charts</a>
</li>
<li><a href="charts-sparklines.html">Sparkline Charts</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="li-hover">
<div class="divider"></div>
</li>
<li class="li-hover">
<p class="ultra-small margin more-text">MORE</p>
</li>
<li><a href="css-grid.html"><i class="mdi-image-grid-on"></i> Grid</a>
</li>
<li><a href="css-color.html"><i class="mdi-editor-format-color-fill"></i> Color</a>
</li>
<li><a href="css-helpers.html"><i class="mdi-communication-live-help"></i> Helpers</a>
</li>
<li><a href="changelogs.html"><i class="mdi-action-swap-vert-circle"></i> Changelogs</a>
</li>
<li class="li-hover">
<div class="divider"></div>
</li>
<li class="li-hover">
<p class="ultra-small margin more-text">Daily Sales</p>
</li>
<li class="li-hover">
<div class="row">
<div class="col s12 m12 l12">
<div class="sample-chart-wrapper">
<div class="ct-chart ct-golden-section" id="ct2-chart"><svg xmlns:ct="https://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-line" style="width: 100%; height: 100%;"><g class="ct-labels"><foreignObject style="overflow: visible;" x="45" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">1</span></foreignObject><foreignObject style="overflow: visible;" x="66.125" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">2</span></foreignObject><foreignObject style="overflow: visible;" x="87.25" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">3</span></foreignObject><foreignObject style="overflow: visible;" x="108.375" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">4</span></foreignObject><foreignObject style="overflow: visible;" x="129.5" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">5</span></foreignObject><foreignObject style="overflow: visible;" x="150.625" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">6</span></foreignObject><foreignObject style="overflow: visible;" x="171.75" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">7</span></foreignObject><foreignObject style="overflow: visible;" x="192.875" y="105" width="21.125" height="30"><span class="ct-label ct-horizontal" xmlns="http://www.w3.org/1999/xhtml">8</span></foreignObject><foreignObject style="overflow: visible;" y="85" x="-5" height="21.11111111111111" width="40"><span class="ct-label ct-vertical" xmlns="http://www.w3.org/1999/xhtml">0</span></foreignObject><foreignObject style="overflow: visible;" y="67.72727272727272" x="-5" height="21.11111111111111" width="40"><span class="ct-label ct-vertical" xmlns="http://www.w3.org/1999/xhtml">2</span></foreignObject><foreignObject style="overflow: visible;" y="50.45454545454545" x="-5" height="21.11111111111111" width="40"><span class="ct-label ct-vertical" xmlns="http://www.w3.org/1999/xhtml">4</span></foreignObject><foreignObject style="overflow: visible;" y="33.18181818181818" x="-5" height="21.11111111111111" width="40"><span class="ct-label ct-vertical" xmlns="http://www.w3.org/1999/xhtml">6</span></foreignObject><foreignObject style="overflow: visible;" y="15.909090909090907" x="-5" height="21.11111111111111" width="40"><span class="ct-label ct-vertical" xmlns="http://www.w3.org/1999/xhtml">8</span></foreignObject></g><g class="ct-grids"><line x1="45" x2="45" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="66.125" x2="66.125" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="87.25" x2="87.25" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="108.375" x2="108.375" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="129.5" x2="129.5" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="150.625" x2="150.625" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="171.75" x2="171.75" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line x1="192.875" x2="192.875" y1="5" y2="100" class="ct-grid ct-horizontal"></line><line y1="100" y2="100" x1="45" x2="214" class="ct-grid ct-vertical"></line><line y1="82.72727272727272" y2="82.72727272727272" x1="45" x2="214" class="ct-grid ct-vertical"></line><line y1="65.45454545454545" y2="65.45454545454545" x1="45" x2="214" class="ct-grid ct-vertical"></line><line y1="48.18181818181818" y2="48.18181818181818" x1="45" x2="214" class="ct-grid ct-vertical"></line><line y1="30.909090909090907" y2="30.909090909090907" x1="45" x2="214" class="ct-grid ct-vertical"></line></g><g class="ct-series ct-series-a"><path d="M45,100L45,56.818C48.521,51.061,59.083,25.152,66.125,22.273C73.167,19.394,80.208,38.106,87.25,39.545C94.292,40.985,101.333,28.03,108.375,30.909C115.417,33.788,122.458,49.621,129.5,56.818C136.542,64.015,143.583,74.091,150.625,74.091C157.667,74.091,164.708,58.258,171.75,56.818C178.792,55.379,189.354,64.015,192.875,65.455L192.875,100" class="ct-area" values="5,9,7,8,5,3,5,4"></path><path d="M45,56.818C48.521,51.061,59.083,25.152,66.125,22.273C73.167,19.394,80.208,38.106,87.25,39.545C94.292,40.985,101.333,28.03,108.375,30.909C115.417,33.788,122.458,49.621,129.5,56.818C136.542,64.015,143.583,74.091,150.625,74.091C157.667,74.091,164.708,58.258,171.75,56.818C178.792,55.379,189.354,64.015,192.875,65.455" class="ct-line" values="5,9,7,8,5,3,5,4"></path><line x1="45" y1="56.81818181818182" x2="45.01" y2="56.81818181818182" class="ct-point" value="5"></line><line x1="66.125" y1="22.272727272727266" x2="66.135" y2="22.272727272727266" class="ct-point" value="9"></line><line x1="87.25" y1="39.54545454545455" x2="87.26" y2="39.54545454545455" class="ct-point" value="7"></line><line x1="108.375" y1="30.909090909090907" x2="108.385" y2="30.909090909090907" class="ct-point" value="8"></line><line x1="129.5" y1="56.81818181818182" x2="129.51" y2="56.81818181818182" class="ct-point" value="5"></line><line x1="150.625" y1="74.0909090909091" x2="150.635" y2="74.0909090909091" class="ct-point" value="3"></line><line x1="171.75" y1="56.81818181818182" x2="171.76" y2="56.81818181818182" class="ct-point" value="5"></line><line x1="192.875" y1="65.45454545454545" x2="192.885" y2="65.45454545454545" class="ct-point" value="4"></line></g></svg></div>
</div>
</div>
</div>
</li>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; height: 605px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 313px;"></div>
</div>
</ul>
<a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i class="mdi-navigation-menu"></i></a>
</aside>
<section id="content">
<div class="row">
<div class="col s4">
</div>
<div class="col s4">
</div>
<div class="col s4">
</div>
</div>
<div class="container">
<div id="work-collections">
<div class="row">
<div class="col s12 m6 l4">
<div id="profile-card" class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://demo.geekslabs.com/materialize/v2.1/layout03/images/user-bg.jpg" alt="user background">
</div>
<div class="card-content">
<img src="http://demo.geekslabs.com/materialize/v2.1/layout03/images/avatar.jpg" alt="" class="circle responsive-img activator card-profile-image">
<a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
<i class="mdi-action-account-circle"></i>
</a>
<span class="card-title activator grey-text text-darken-4">Roger Waters</span>
<p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> Project Manager</p>
<p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +1 (612) 222 8989</p>
<p><i class="mdi-communication-email cyan-text text-darken-2"></i> mail@domain.com</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Roger Waters <i class="mdi-navigation-close right"></i></span>
<p>Here is some more information about this card.</p>
<p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> Project Manager</p>
<p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +1 (612) 222 8989</p>
<p><i class="mdi-communication-email cyan-text text-darken-2"></i> mail@domain.com</p>
<p><i class="mdi-social-cake cyan-text text-darken-2"></i> 18th June 1990</p>
<p><i class="mdi-device-airplanemode-on cyan-text text-darken-2"></i> BAR - AUS</p>
</div>
</div>
</div>
<div class="col s12 m12 l8">
<ul id="projects-collection" class="collection">
<li class="collection-item avatar">
<i class="mdi-file-folder circle light-blue darken-2"></i>
<span class="collection-header">Field1 (name)</span>
<p>Your Favorites</p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
<li class="collection-item">
<div class="row">
<div class="col s6">
<p class="collections-title">Web App</p>
<p class="collections-content">AEC Company</p>
</div>
<div class="col s3">
<span class="task-cat cyan">Development</span>
</div>
<div class="col s3">
<div id="project-line-1"><canvas width="135" height="30" style="display: inline-block; width: 135px; height: 30px; vertical-align: top;"></canvas></div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s6">
<p class="collections-title">Mobile App for Social</p>
<p class="collections-content">iSocial App</p>
</div>
<div class="col s3">
<span class="task-cat grey darken-3">UI/UX</span>
</div>
<div class="col s3">
<div id="project-line-2"><canvas width="135" height="30" style="display: inline-block; width: 135px; height: 30px; vertical-align: top;"></canvas></div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s6">
<p class="collections-title">Website</p>
<p class="collections-content">MediTab</p>
</div>
<div class="col s3">
<span class="task-cat teal">Marketing</span>
</div>
<div class="col s3">
<div id="project-line-3"><canvas width="135" height="30" style="display: inline-block; width: 135px; height: 30px; vertical-align: top;"></canvas></div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s6">
<p class="collections-title">AdWord campaign</p>
<p class="collections-content">True Line</p>
</div>
<div class="col s3">
<span class="task-cat green">SEO</span>
</div>
<div class="col s3">
<div id="project-line-4"><canvas width="135" height="30" style="display: inline-block; width: 135px; height: 30px; vertical-align: top;"></canvas></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large mdi-editor-mode-edit"></i>
</a>
<ul>
<li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
<li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
<li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
<li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
</ul>
</div>
<div class="col s12 m12 l4">
<ul id="issues-collection" class="collection">
<li class="collection-item avatar">
<i class="mdi-action-bug-report circle red darken-2"></i>
<span class="collection-header">Issues</span>
<p>Assigned to you</p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
<li class="collection-item">
<div class="row">
<div class="col s7">
<p class="collections-title"><strong>#102</strong> Home Page</p>
<p class="collections-content">Web Project</p>
</div>
<div class="col s2">
<span class="task-cat pink accent-2">P1</span>
</div>
<div class="col s3">
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s7">
<p class="collections-title"><strong>#108</strong> API Fix</p>
<p class="collections-content">API Project </p>
</div>
<div class="col s2">
<span class="task-cat yellow darken-4">P2</span>
</div>
<div class="col s3">
<div class="progress">
<div class="determinate" style="width: 40%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s7">
<p class="collections-title"><strong>#205</strong> Profile page css</p>
<p class="collections-content">New Project </p>
</div>
<div class="col s2">
<span class="task-cat light-green darken-3">P3</span>
</div>
<div class="col s3">
<div class="progress">
<div class="determinate" style="width: 95%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row">
<div class="col s7">
<p class="collections-title"><strong>#188</strong> SAP Changes</p>
<p class="collections-content">SAP Project</p>
</div>
<div class="col s2">
<span class="task-cat pink accent-2">P1</span>
</div>
<div class="col s3">
<div class="progress">
<div class="determinate" style="width: 10%"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="card-widgets">
<div class="row">
<div class="col s12 m12 l4">
<ul id="task-card" class="collection with-header">
<li class="collection-header cyan">
<h4 class="task-card-title">My Task</h4>
<p class="task-card-date">March 26, 2015</p>
</li>
<li class="collection-item dismissable" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<input type="checkbox" id="task1">
<label for="task1" style="text-decoration: none;">Create Mobile App UI. <a href="#" class="secondary-content"><span class="ultra-small">Today</span></a>
</label>
<span class="task-cat teal">Mobile App</span>
</li>
<li class="collection-item dismissable" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<input type="checkbox" id="task2">
<label for="task2" style="text-decoration: none;">Check the new API standerds. <a href="#" class="secondary-content"><span class="ultra-small">Monday</span></a>
</label>
<span class="task-cat purple">Web API</span>
</li>
<li class="collection-item dismissable" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<input type="checkbox" id="task3" checked="checked">
<label for="task3" style="text-decoration: line-through;">Check the new Mockup of ABC. <a href="#" class="secondary-content"><span class="ultra-small">Wednesday</span></a>
</label>
<span class="task-cat pink">Mockup</span>
</li>
<li class="collection-item dismissable" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<input type="checkbox" id="task4" checked="checked" disabled="disabled">
<label for="task4" style="text-decoration: line-through;">I did it !</label>
<span class="task-cat cyan">Mobile App</span>
</li>
</ul>
</div>
<div class="col s12 m6 l4">
<div id="flight-card" class="card">
<div class="card-header amber darken-2">
<div class="card-title">
<h4 class="flight-card-title">Flight</h4>
<p class="flight-card-date">June 18, Thu 04:50</p>
</div>
</div>
<div class="card-content-bg white-text">
<div class="card-content">
<div class="row flight-state-wrapper">
<div class="col s5 m5 l5 center-align">
<div class="flight-state">
<h4 class="margin">LDN</h4>
<p class="ultra-small">London</p>
</div>
</div>
<div class="col s2 m2 l2 center-align">
<i class="mdi-device-airplanemode-on flight-icon"></i>
</div>
<div class="col s5 m5 l5 center-align">
<div class="flight-state">
<h4 class="margin">SFO</h4>
<p class="ultra-small">San Francisco</p>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6 l6 center-align">
<div class="flight-info">
<p class="small"><span class="grey-text text-lighten-4">Depart:</span> 04.50</p>
<p class="small"><span class="grey-text text-lighten-4">Flight:</span> IB 5786</p>
<p class="small"><span class="grey-text text-lighten-4">Terminal:</span> B</p>
</div>
</div>
<div class="col s6 m6 l6 center-align flight-state-two">
<div class="flight-info">
<p class="small"><span class="grey-text text-lighten-4">Arrive:</span> 08.50</p>
<p class="small"><span class="grey-text text-lighten-4">Flight:</span> IB 5786</p>
<p class="small"><span class="grey-text text-lighten-4">Terminal:</span> C</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12 l4">
<div class="map-card">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<div id="map-canvas" data-lat="40.747688" data-lng="-74.004142" class="" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") 8 8, default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 4, 0);">
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 37px; top: -127px;"></div>
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 37px; top: 129px;"></div>
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: -219px; top: -127px;"></div>
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: -219px; top: 129px;"></div>
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 293px; top: -127px;"></div>
<div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 293px; top: 129px;"></div>
</div>
</div>
</div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 37px; top: -127px;"><canvas draggable="false" height="256" width="256" style="-webkit-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;"></canvas></div>
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 37px; top: 129px;"><canvas draggable="false" height="256" width="256" style="-webkit-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;"></canvas></div>
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: -219px; top: -127px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: -219px; top: 129px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 293px; top: -127px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 293px; top: 129px;"></div>
</div>
</div>
</div>
<div style="position: absolute; z-index: 0; transform: translateZ(0px); left: 0px; top: 0px;">
<div style="overflow: hidden;"></div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="transform: translateZ(0px); position: absolute; left: 37px; top: -127px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i301!3i384!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=43838"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 293px; top: 129px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i302!3i385!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=1250"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 293px; top: -127px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i302!3i384!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=49447"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
<div style="transform: translateZ(0px); position: absolute; left: -219px; top: 129px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i300!3i385!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=121103"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 37px; top: 129px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i301!3i385!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=126712"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
<div style="transform: translateZ(0px); position: absolute; left: -219px; top: -127px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i10!2i300!3i384!4i256!2m3!1e0!2sm!3i344012265!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjgyfHMuZTpnLmZ8cC52Om9ufHAuYzojZmZlMGVmZWYscy50OjJ8cy5lOmcuZnxwLnY6b258cC5oOiMxOTAwZmZ8cC5jOiNmZmMwZThlOCxzLnQ6M3xzLmU6Z3xwLmw6MTAwfHAudjpzaW1wbGlmaWVkLHMudDozfHMuZTpsfHAudjpvZmYscy50OjY1fHMuZTpnfHAudjpvbnxwLmw6NzAwLHMudDo2fHAuYzojZmY3ZGNkY2Q!4e0&token=38229"
draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>
</div>
</div>
</div>
<div class="gm-style-pbc" style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%; transition-duration: 0.3s; opacity: 0; display: none;">
<p class="gm-style-pbt">Use two fingers to move the map</p>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; height: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 4, 0);">
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
</div>
</div>
<div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<a target="_blank" href="https://maps.google.com/maps?ll=40.67,-73.94&z=10&t=m&hl=en-US&gl=US&mapclient=apiv3" title="Click to see this area on Google Maps" style="position: static; overflow: visible; float: none; display: inline;">
<div style="width: 66px; height: 26px; cursor: pointer;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
</div>
<div class="card-content">
<a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
<i class="mdi-maps-pin-drop"></i>
</a>
<h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Company Name LLC</a>
</h4>
<p class="blog-post-content">Some more information about this company.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside id="right-sidebar-nav">
<ul id="chat-out" class="side-nav rightside-navigation right-aligned ps-container ps-active-y" style="width: 300px; right: -310px; height: 729px;">
<li class="li-hover">
<a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
<div id="right-search" class="row">
<form class="col s12">
<div class="input-field">
<i class="mdi-action-search prefix"></i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Search</label>
</div>
</form>
</div>
</li>
<li class="li-hover">
<ul class="chat-collapsible" data-collapsible="expandable">
<li class="active">
<div class="collapsible-header teal white-text active"><i class="mdi-social-whatshot"></i>Recent Activity</div>
<div class="collapsible-body recent-activity" style="display: block;">
<div class="recent-activity-list chat-out-list row">
<div class="col s3 recent-activity-list-icon"><i class="mdi-action-add-shopping-cart"></i>
</div>
<div class="col s9 recent-activity-list-text">
<a href="#">just now</a>
<p>Jim Doe Purchased new equipments for zonal office.</p>
</div>
</div>
<div class="recent-activity-list chat-out-list row">
<div class="col s3 recent-activity-list-icon"><i class="mdi-device-airplanemode-on"></i>
</div>
<div class="col s9 recent-activity-list-text">
<a href="#">Yesterday</a>
<p>Your Next flight for USA will be on 15th August 2015.</p>
</div>
</div>
<div class="recent-activity-list chat-out-list row">
<div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
</div>
<div class="col s9 recent-activity-list-text">
<a href="#">5 Days Ago</a>
<p>Natalya Parker Send you a voice mail for next conference.</p>
</div>
</div>
<div class="recent-activity-list chat-out-list row">
<div class="col s3 recent-activity-list-icon"><i class="mdi-action-store"></i>
</div>
<div class="col s9 recent-activity-list-text">
<a href="#">Last Week</a>
<p>Jessy Jay open a new store at S.G Road.</p>
</div>
</div>
<div class="recent-activity-list chat-out-list row">
<div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
</div>
<div class="col s9 recent-activity-list-text">
<a href="#">5 Days Ago</a>
<p>Natalya Parker Send you a voice mail for next conference.</p>
</div>
</div>
</div>
</li>
<li class="active">
<div class="collapsible-header light-blue white-text active"><i class="mdi-editor-attach-money"></i>Sales Repoart</div>
<div class="collapsible-body sales-repoart" style="display: block;">
<div class="sales-repoart-list chat-out-list row">
<div class="col s8">Target Salse</div>
<div class="col s4"><span id="sales-line-1"><canvas width="33" height="30" style="display: inline-block; width: 33px; height: 30px; vertical-align: top;"></canvas></span>
</div>
</div>
<div class="sales-repoart-list chat-out-list row">
<div class="col s8">Payment Due</div>
<div class="col s4"><span id="sales-bar-1"><canvas width="32" height="25" style="display: inline-block; width: 32px; height: 25px; vertical-align: top;"></canvas></span>
</div>
</div>
<div class="sales-repoart-list chat-out-list row">
<div class="col s8">Total Delivery</div>
<div class="col s4"><span id="sales-line-2"><canvas width="33" height="30" style="display: inline-block; width: 33px; height: 30px; vertical-align: top;"></canvas></span>
</div>
</div>
<div class="sales-repoart-list chat-out-list row">
<div class="col s8">Total Progress</div>
<div class="col s4"><span id="sales-bar-2"><canvas width="32" height="25" style="display: inline-block; width: 32px; height: 25px; vertical-align: top;"></canvas></span>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header red white-text"><i class="mdi-action-stars"></i>Favorite Associates</div>
<div class="collapsible-body favorite-associates">
<div class="favorite-associate-list chat-out-list row">
<div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
</div>
<div class="col s8">
<p>Eileen Sideways</p>
<p class="place">Los Angeles, CA</p>
</div>
</div>
<div class="favorite-associate-list chat-out-list row">
<div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
</div>
<div class="col s8">
<p>Zaham Sindil</p>
<p class="place">San Francisco, CA</p>
</div>
</div>
<div class="favorite-associate-list chat-out-list row">
<div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
</div>
<div class="col s8">
<p>Renov Leongal</p>
<p class="place">Cebu City, Philippines</p>
</div>
</div>
<div class="favorite-associate-list chat-out-list row">
<div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
</div>
<div class="col s8">
<p>Weno Carasbong</p>
<p>Tokyo, Japan</p>
</div>
</div>
<div class="favorite-associate-list chat-out-list row">
<div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
</div>
<div class="col s8">
<p>Nusja Nawancali</p>
<p class="place">Bangkok, Thailand</p>
</div>
</div>
</div>
</li>
</ul>
</li>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; height: 669px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 613px;"></div>
</div>
</ul>
</aside>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script>
<script type="text/javascript" src="js/plugins/chartjs/chart.min.js"></script>
<script type="text/javascript" src="js/plugins/chartjs/chart-script.js"></script>
<script type="text/javascript" src="js/plugins/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="js/plugins/sparkline/sparkline-script.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAZnaZBXLqNBRXjd-82km_NO7GUItyKek"></script>
<script type="text/javascript" src="js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="js/plugins/jvectormap/vectormap-script.js"></script>
<div class="jvectormap-label"></div>
<div class="hiddendiv common"></div>
<div class="drag-target" style="left: 0px; touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); right: 0px;"></div>
<div class="drag-target" style="left: 0px; touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); right: 0px;"></div>
<div class="drag-target" style="right: 0px; touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
<div id="toast-container"></div>
body {
background-color: #fcfcfc;
}
#main,
footer {
padding-left: 240px;
}
#input-select .input-field label {
position: absolute;
top: -14px;
font-size: 0.8rem;
}
#sidenav-overlay {
background-color: transparent;
}
.container {
padding: 0 0.5rem;
margin: 0 auto;
max-width: 100% !important;
width: 98%;
}
#left-sidebar-nav span.badge.new {
line-height: 20px;
margin-top: 11px;
}
#content .container .row {
margin-bottom: 0;
}
@media only screen and (min-width: 601px) {
.container {
width: 98%;
}
}
@media only screen and (min-width: 993px) {
.container {
width: 98%;
}
}
@media only screen and (max-width: 993px) {
#main,
footer {
padding-left: 0px;
}
}
.ps-scrollbar-x-rail,
.ps-scrollbar-y-rail {
z-index: 9999;
}
.small {
font-size: 1.0rem;
margin: 0;
padding: 0;
}
.medium-small {
font-size: 0.9rem;
margin: 0;
padding: 0;
}
.ultra-small {
font-size: 0.8rem;
margin: 0;
padding: 0;
}
small {
font-size: 0.8rem;
}
.strong {
font-weight: 600;
}
h4.header {
font-size: 1.5rem;
line-height: 2.508rem;
margin: 1.14rem 0 0.912rem 0;
}
p.title {
font-size: 1.3rem;
}
p.header {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
}
h4.header {
font-size: 1.4rem;
font-weight: 400;
text-transform: uppercase;
}
h4.header2 {
font-size: 1.1rem;
font-weight: 400;
text-transform: uppercase;
}
li.li-hover:hover {
background: transparent !important;
}
.more-text {
padding: 5px 20px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
.valign-demo {
height: 400px;
background-color: #ddd;
}
.margin {
margin: 0 !important;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader-logo {
display: block;
position: absolute;
left: 48%;
top: 46%;
background: url(../images/user-bg-2.jpg) no-repeat center center;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #222222;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.progress {
background-color: rgba(255, 64, 129, 0.22);
}
h1.logo-wrapper {
margin: 0px 0px;
}
h1 span.logo-text {
display: none;
}
header .brand-logo {
margin: 1px 0px;
padding: 0 20px;
}
header .brand-logo img {
width: 172px;
}
.menu-sidebar-collapse {
margin: 0 10px;
}
.menu-sidebar-collapse i {
line-height: 36px !important;
}
@media only screen and (max-width: 992px) {
nav .nav-wrapper {
text-align: center;
}
nav .nav-wrapper a.page-title {
font-size: 36px;
}
}
.header-search-wrapper {
max-width: 824px;
width: 100%;
margin: 0 auto;
width: calc(100% - 45%);
height: 40px;
display: inline-block;
margin-left: 240px;
position: relative;
}
#content .header-search-wrapper {
width: 100%;
margin: 0 auto;
height: 40px;
display: inline-block;
position: relative;
}
.header-search-wrapper i {
position: absolute;
top: 0;
font-size: 24px;
top: 6px;
left: 24px;
line-height: 32px !important;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
}
input.header-search-input {
display: block;
padding: 8px 8px 8px 72px;
width: 100%;
background: rgba(255, 255, 255, 0.3);
height: 24px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
border: none;
font-size: 16px;
appearance: textfield;
font-weight: 400;
outline: none;
border-radius: 3px;
}
.header-search-input::-webkit-input-placeholder {
color: #fff;
font-size: 16px;
font-weight: 400
}
.header-search-input::-moz-placeholder {
color: #fff;
font-size: 16px;
font-weight: 400
}
.header-search-input:-ms-input-placeholder {
color: #fff;
font-size: 16px;
font-weight: 400
}
.header-search-input::placeholder {
color: #fff;
font-size: 16px;
font-weight: 400
}
input.header-search-input:hover {
background: rgba(255, 255, 255, 0.5);
}
input.header-search-input:focus {
color: #333;
background: #fff;
}
input.header-search-input:focus {
border-bottom: none !important;
box-shadow: none !important;
}
.header-search-wrapper-focus i {
color: #444;
}
.header-search-input:focus::-webkit-input-placeholder {
color: #333;
font-size: 16px;
font-weight: 400
}
.header-search-input:focus::-moz-placeholder {
color: #333;
font-size: 16px;
font-weight: 400
}
.header-search-input:focus:-ms-input-placeholder {
color: #333;
font-size: 16px;
font-weight: 400
}
.header-search-input:focus::placeholder {
color: #333;
font-size: 16px;
font-weight: 400
}
li.search-out:hover {
background: transparent;
}
.search-out {
display: none;
}
.search-out-text {
border-bottom: 1px solid #fff !important;
}
.search-out input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #fff !important;
box-shadow: none;
}
nav ul li.no-hover:hover {
background: none;
}
ul.side-nav.leftside-navigation {
top: 64px;
}
@media only screen and (max-width: 992px) {
ul.side-nav.leftside-navigation {
top: 56px;
}
}
ul.side-nav.leftside-navigation hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #e0e0e0;
margin: 1em 0;
padding: 0;
}
.side-nav a {
line-height: 42px;
height: 42px;
}
#left-sidebar-nav {
position: fixed;
width: 100px;
left: 180px;
z-index: 999;
height: auto;
}
#slide-out li a i {
line-height: inherit;
width: 2rem;
font-size: 1.6rem;
display: block;
float: left;
text-align: center;
margin-right: 1rem;
}
#slide-out ul.side-nav li {
padding: 0px !important;
}
ul.side-nav li {
padding: 0;
}
ul.side-nav .collapsible-header {
margin: 0;
}
.caption {
font-size: 1.25rem;
font-weight: 300;
margin-bottom: 30px;
}
.caption-uppercase {
font-size: 1.25rem;
font-weight: 300;
margin-bottom: 30px;
text-transform: uppercase;
}
.sidebar-collapse {
position: absolute;
left: -170px;
top: -45px;
}
ul.side-nav.leftside-navigation {
overflow: hidden;
}
ul.side-nav.leftside-navigation li {
line-height: 44px;
}
ul.side-nav.leftside-navigation li:hover,
ul.side-nav.leftside-navigation li.active {
background-color: rgba(0, 0, 0, 0.05);
}
ul.side-nav.leftside-navigation li a {
font-size: 14px;
font-weight: 400;
}
.side-nav.leftside-navigation .collapsible-body li.active,
.side-nav.fixed.leftside-navigation .collapsible-body li.active {
background-color: #FAFAFA;
}
.side-nav.leftside-navigation .collapsible-body li.active a,
.side-nav.fixed.leftside-navigation .collapsible-body li.active a {
color: #444;
}
.side-nav .collapsible-body li a {
margin: 0 1rem 0 3rem;
}
ul.side-nav.leftside-navigation ul.collapsible-accordion {
background-color: #FFF;
}
ul.side-nav.leftside-navigation:hover {
}
ul.side-nav.leftside-navigation li.user-details {
background: url('http://demo.geekslabs.com/materialize/v2.1/layout03/images/user-bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 15px;
padding: 15px 0px 0px 15px;
}
.user-details .row {
margin: 0;
}
.user-task,
.user-time {
margin: 0;
font-size: 13px;
color: #fff;
}
ul.side-nav.leftside-navigation .profile-image {
}
ul.side-nav.leftside-navigation .profile-btn {
margin: 0;
text-transform: capitalize;
padding: 0;
text-shadow: 1px 1px 1px #444;
font-size: 15px;
}
.user-roal {
color: #fff;
margin-top: -16px;
font-size: 13px;
text-shadow: 1px 1px 1px #444;
}
.bold > a {
font-weight: bold;
}
nav.top-nav {
height: 122px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
nav.top-nav a.page-title {
line-height: 122px;
font-size: 48px;
}
.rightside-navigation {
overflow: hidden;
}
.chat-close-collapse {
padding: 5px 15px 0 0;
}
#right-search .input-field {
margin-top: 0px;
}
#chat-out .collapsible-header {
background-color: transparent;
border: none;
line-height: 45px;
height: 45px;
font-weight: 400;
}
#chat-out .chat-out-list {
padding: 5px;
margin: 0;
border-bottom: 1px solid #e0e0e0;
}
#chat-out .favorite-associate-list .circle {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid #999;
padding: 3px;
display: block;
}
#chat-out .favorite-associate-list .online-user {
border: 2px solid #00e676;
}
#chat-out .recent-activity-list-icon {
margin-top: 8px;
font-size: 2rem;
}
#chat-out .recent-activity-list-text a {
font-size: 0.8rem;
padding: 0;
font-weight: 600;
}
#chat-out .recent-activity-list-text p {
font-size: 0.9rem;
padding: 0;
}
#chat-out .favorite-associate-list p {
padding: 0;
}
#chat-out .favorite-associate-list p.place {
font-size: 0.8rem;
}
.breadcrumb {
padding: 0px;
margin: 15px 0px;
list-style: none;
}
.breadcrumbs-title {
font-size: 1.5rem;
line-height: 1.804rem;
margin: 18px 0px 0px 0px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb a {
color: #00bcd4;
}
.breadcrumb .active {
font-weight: normal;
color: #999;
}
.breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
h5.breadcrumbs-header {
font-size: 1.64rem;
line-height: 1.804rem;
margin: 1.5rem 0 0 0;
}
.breadcrumbs-nav {
margin: 8px 0 9px 0;
}
#card-stats .card-content {
text-align: center;
}
#card-stats .card-stats-title,
#card-stats .card-stats-title i {
font-size: 1.2rem;
}
#card-stats .card-stats-compare {
font-size: 1.0rem;
}
#card-stats .card-stats-compare i {
position: relative;
top: 5px
}
#card-stats .card-stats-number {
font-size: 1.8rem;
line-height: 2.0rem;
margin: 0.2rem 0 0.2rem 0;
font-weight: 500;
}
#work-collections .collection-header {
font-size: 2.0rem;
font-weight: 500;
}
#work-collections .collection-item.avatar {
height: auto;
}
#work-collections p.collections-title {
font-size: 1.0rem;
padding: 0;
margin: 0;
font-weight: 500;
}
#work-collections p.collections-content {
font-size: 0.9rem;
padding: 0;
margin: 0;
font-weight: 400;
}
#flight-card .card-header .card-title {
padding: 20px;
}
#flight-card .flight-card-title {
margin: 0;
font-weight: 300;
}
#flight-card .flight-card-date {
font-size: 1.0rem;
margin: 0;
}
#flight-card .flight-state {
padding-bottom: 15px;
}
#flight-card .flight-state-two {
border-left: 1px dashed #9e9e9e;
}
#flight-card .flight-icon {
font-size: 2.2rem;
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#flight-card .card-content-bg {
background: url('http://demo.geekslabs.com/materialize/v2.1/layout03/images/sample-1.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#flight-card .card-content {
background: rgba(0, 0, 0, 0.25);
}
#flight-card .flight-state-wrapper {
margin: 0 0 100px 0 !important;
}
#task-card label {
display: block;
color: rgba(0, 0, 0, 0.87);
height: auto;
}
#task-card .task-card-title {
margin: 0;
color: #fff;
font-weight: 300;
}
#task-card .task-card-date {
font-size: 1.0rem;
margin: 0;
color: #fff;
}
#task-card .collection-header {
padding: 20px;
}
#task-card .task-add {
position: absolute;
right: 10px;
top: 76px;
}
#task-card .task-cat {
padding: 2px 4px;
color: #fff;
margin-left: 37px;
font-weight: 300;
font-size: 0.8rem;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box;
}
.task-cat {
padding: 2px 4px;
color: #fff;
font-weight: 300;
font-size: 0.8rem;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box;
}
.collection .collection-item.avatar i.circle {
font-size: 28px;
}
#profile-card .card-image {
height: 150px;
}
#profile-card .card-content p {
font-size: 1.2rem;
margin: 10px 0 12px 0;
}
#profile-card .card-profile-image {
width: 70px;
position: absolute;
top: 110px;
z-index: 1;
cursor: pointer;
}
#profile-card .btn-move-up {
position: relative;
top: -40px;
right: -18px;
margin-right: 10px !important;
}
#chart-dashboard {
padding-top: 12px;
}
#chart-dashboard .card .card-content,
#card-stats .card .card-content,
#card-stats .card .card-action {
padding: 10px 14px;
}
#line-updated {
}
.sample-chart-wrapper {
width: 100%;
}
.chart-title {
font-size: 1.6rem;
font-weight: 300;
}
.chart-revenue {
float: right;
text-align: center;
padding: 8px;
border-radius: 3px;
}
.chart-revenue .chart-revenue-total {
font-size: 0.9rem;
margin: 0;
}
.chart-revenue .chart-revenue-per {
font-size: 0.8rem;
margin: 0;
}
.chart-revenue .chart-revenue-per i {
position: relative;
top: 5px;
}
.chart-revenue-switch {
padding-top: 28px;
padding-right: 10px;
color: #fff;
text-align: right;
}
.doughnut-chart-status {
position: relative;
top: -75px;
left: 0;
font-size: 16px;
font-weight: 500;
height: 0px;
text-align: center;
}
.doughnut-chart-status p {
margin-top: -5px;
}
.doughnut-chart-legend li {
padding: 2px 0;
font-size: 0.9rem;
}
.doughnut-chart-legend li:before {
content: "";
width: 8px;
height: 8px;
display: block;
float: left;
margin-top: 6px;
margin-right: 4px;
}
li.mobile:before {
background: #F7464A;
}
li.kitchen:before {
background: #46BFBD;
}
li.home:before {
background: #FDB45C;
}
a.button-collapse.top-nav {
position: absolute;
left: 7.5%;
top: 0;
float: none;
margin-left: 1.5rem;
color: #fff;
font-size: 32px;
z-index: 2;
}
.trending-bar-chart-wrapper {
width: 100%;
}
.btn-move-up {
position: relative;
top: -28px;
right: -18px;
margin-right: 10px !important;
}
.flotchart-placeholder {
width: 100%;
height: 300px;
font-size: 13px;
line-height: 1.2em;
}
#flotchart table {
position: absolute;
top: 13px;
right: 17px;
font-size: smaller;
color: #545454;
width: 100px;
}
#flotchart td,
th {
padding: 5px;
}
.xchart-placeholder {
width: 90%;
height: 300px;
}
.tooltip-class {
overflow: hidden;
color: #fff;
height: 20px;
width: 30px;
}
#ct2-chart .ct-series.ct-series-a .ct-area {
fill: #00BCD4;
}
#ct2-chart .ct-series.ct-series-a .ct-point {
stroke: #00BCD4;
}
#ct2-chart .ct-series.ct-series-a .ct-line {
stroke: #54E2F4;
}
.socialbox .logo {
color: #fff;
font-size: 28px;
left: 20px;
bottom: 20px;
position: absolute;
}
.socialbox .info {
color: #fff;
margin: 0;
position: absolute;
right: 20px;
bottom: 20px;
font-size: 15px;
padding: 0;
}
#full-calendar {
padding-top: 30px;
}
#calendar h2 {
font-size: 1.5rem;
text-transform: uppercase;
line-height: 35px;
}
#calendar .fc-day-header {
text-transform: uppercase;
font-weight: 400;
}
#external-events {
padding-top: 50px;
}
#external-events .fc-event {
color: #fff;
text-decoration: none;
padding: 5px;
margin-bottom: 10px;
cursor: all-scroll;
border: none;
}
.fc button {
background: #fff;
}
.fc td,
.fc th {
border-width: 0px !important;
}
.fc-state-active,
.fc-state-down {
color: #ff4081 !important;
}
.dynamic-color .red,
.dynamic-color .pink,
.dynamic-color .purple,
.dynamic-color .deep-purple,
.dynamic-color .indigo,
.dynamic-color .blue,
.dynamic-color .light-blue,
.dynamic-color .cyan,
.dynamic-color .teal,
.dynamic-color .green,
.dynamic-color .light-green,
.dynamic-color .lime,
.dynamic-color .yellow,
.dynamic-color .amber,
.dynamic-color .orange,
.dynamic-color .deep-orange,
.dynamic-color .brown,
.dynamic-color .grey,
.dynamic-color .blue-grey {
height: 55px;
width: 100%;
padding: 0 15px;
line-height: 55px;
font-weight: 500;
font-size: 12px;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dynamic-color .col {
margin-bottom: 55px;
}
@media only screen and (max-width: 1024px) {
tfoot {
display: none;
}
}
tr.group,
tr.group:hover {
background-color: #ddd !important;
}
#site-layout-example-left {
background-color: #90a4ae;
height: 300px;
}
#site-layout-example-right {
background-color: #26a69a;
height: 300px;
}
#site-layout-example-top {
background-color: #E57373;
height: 50px;
}
.flat-text-header {
height: 35px;
width: 80%;
background-color: rgba(255, 255, 255, 0.15);
display: block;
margin: 27px auto;
}
.flat-text {
height: 25px;
width: 80%;
background-color: rgba(0, 0, 0, 0.15);
display: block;
margin: 27px auto;
}
.flat-text.small {
width: 25%;
height: 25px;
background-color: rgba(0, 0, 0, 0.15);
}
.flat-text.full-width {
width: 100%;
}
.col.grid-example {
border: 1px solid #eee;
margin: 7px 0;
text-align: center;
line-height: 50px;
font-size: 28px;
background-color: tomato;
color: white;
padding: 0px;
}
.col.grid-example span {
font-weight: 200;
line-height: 50px;
}
.waves-color-demo .collection-item {
height: 57px;
line-height: 57px;
}
.browser-window {
text-align: left;
width: 100%;
height: auto;
display: inline-block;
-webkit-border-radius: 5px 5px 2px 2px;
-moz-border-radius: 5px 5px 2px 2px;
border-radius: 5px 5px 2px 2px;
background-clip: padding-box;
background-color: transparent;
margin: 20px 0px;
overflow: hidden;
}
.browser-window .top-bar {
height: 30px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background-clip: padding-box;
border-top: thin solid #eaeae9;
border-bottom: thin solid #dfdfde;
background: linear-gradient(#e7e7e6, #E2E2E1);
}
.browser-window .circle {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: white;
margin-right: 1px;
}
#close-circle {
background-color: #FF5C5A;
}
#minimize-circle {
background-color: #FFBB50;
}
#maximize-circle {
background-color: #1BC656;
}
.browser-window .circles {
margin: 5px 12px;
}
.browser-window .content {
margin: 0;
width: 100%;
display: inline-block;
border-radius: 0 0 5px 5px;
background-color: #fafafa;
}
.browser-window .row {
margin: 0;
}
.clear {
clear: both;
}
.promo i {
color: #ee6e73;
font-size: 6rem;
display: block;
}
.promo-caption {
font-size: 1.7rem;
font-weight: 500;
margin-top: 5px;
margin-bottom: 0px;
}
.icon-demo {
line-height: 50px;
}
.icon-container i {
font-size: 3em;
display: block;
margin-bottom: 10px;
}
.icon-container .icon-preview {
height: 120px;
text-align: center;
}
.icon-holder {
display: block;
text-align: center;
width: 150px;
height: 115px;
float: left;
margin: 0px 0px 15px 0px;
}
.icon-holder p {
margin: 0px 0;
}
.login-form {
width: 280px;
}
.login-form-text {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8rem;
}
.profile-image-login {
width: 100px;
height: 100px !important;
}
.login-text {
margin-top: -6px;
margin-left: -6px !important;
}
.text-long-shadow {
text-shadow: rgb(29, 125, 116) 1px 1px, rgb(29, 125, 116) 2px 2px, rgb(29, 125, 116) 3px 3px, rgb(29, 125, 116) 4px 4px, rgb(29, 125, 116) 5px 5px, rgb(29, 125, 116) 6px 6px, rgb(29, 125, 116) 7px 7px, rgb(29, 125, 116) 8px 8px, rgb(29, 125, 116) 9px 9px, rgb(29, 125, 116) 10px 10px, rgb(29, 125, 116) 11px 11px, rgb(29, 125, 116) 12px 12px, rgb(29, 125, 116) 13px 13px, rgb(29, 125, 116) 14px 14px, rgb(29, 126, 117) 15px 15px, rgb(29, 128, 119) 16px 16px, rgb(30, 130, 120) 17px 17px, rgb(30, 132, 122) 18px 18px, rgb(30, 133, 124) 19px 19px, rgb(31, 135, 125) 20px 20px, rgb(31, 137, 127) 21px 21px, rgb(32, 139, 129) 22px 22px, rgb(32, 141, 130) 23px 23px, rgb(32, 142, 132) 24px 24px, rgb(33, 144, 134) 25px 25px, rgb(33, 146, 135) 26px 26px, rgb(34, 148, 137) 27px 27px, rgb(34, 149, 139) 28px 28px, rgb(34, 151, 140) 29px 29px, rgb(35, 153, 142) 30px 30px, rgb(35, 155, 144) 31px 31px, rgb(36, 157, 145) 32px 32px, rgb(36, 158, 147) 33px 33px, rgb(36, 160, 149) 34px 34px, rgb(37, 162, 150) 35px 35px, rgb(37, 164, 152) 36px 36px, rgb(38, 166, 154) 37px 37px;
background-color: rgb(38, 166, 154);
width: 100%;
font-size: 10rem;
color: #fff !important;
text-align: center;
padding: 20px 0 !important;
}
#mail-app hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #e0e0e0;
margin: 1em 0;
padding: 0;
}
.email-unread .email-title {
font-weight: 500;
}
#email-sidebar {
min-height: 650px;
}
#email-sidebar li {
padding: 10px 0;
text-align: center;
}
#email-sidebar li i {
padding: 12px;
color: #272727;
}
#email-sidebar li i.active {
background: #DDDDDD;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
#email-sidebar li i:hover {
background: #DDDDDD;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
#mail-app #email-sidebar,
#mail-app #email-list,
#mail-app #email-details {
margin-top: 0px;
}
#email-list {
padding: 0;
}
#email-list .collection {
margin: 0;
}
#email-list .collection .collection-item.avatar {
height: auto;
padding-left: 72px;
position: relative;
}
#email-list .collection .collection-item:hover {
background: #e1f5fe;
cursor: pointer;
}
#email-list .collection .collection-item.selected {
background: #e1f5fe;
border-left: 4px solid #29b6f6;
}
#email-list .collection .collection-item.avatar .secondary-content {
position: absolute;
top: 10px;
right: -4px;
}
#email-list .collection .collection-item.avatar .secondary-content.email-time {
right: 8px;
}
#email-list .collection .collection-item.avatar .icon {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
text-align: center;
vertical-align: middle;
top: 20px;
}
#email-list .collection .collection-item.avatar .circle {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1.5rem;
color: #fff;
font-weight: 300;
padding: 10px;
}
#email-list .collection .collection-item.avatar img.circle {
padding: 0px;
}
#email-list .attach-file {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
color: #9e9e9e;
font-size: 1.1rem;
}
#email-details {
padding: 15px;
}
#email-details .email-subject {
font-size: 1.2rem;
}
#email-details .email-subject i {
font-size: 2.2rem;
}
#email-details .email-tag {
padding: 3px;
font-size: 0.9rem;
}
#email-details .collection {
border: none;
}
#email-details .collection .collection-item.avatar {
height: auto;
padding-left: 72px;
position: relative;
}
#email-details .collection .collection-item.selected {
background: #e1f5fe;
border-left: 4px solid #29b6f6;
}
#email-details .collection .collection-item.avatar .icon {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle;
top: 20px;
}
#email-details .collection .collection-item.avatar .circle {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1.5rem;
color: #fff;
font-weight: 300;
padding: 10px;
}
#email-details .collection .collection-item.avatar img.circle {
padding: 0px;
}
#email-details .email-actions {
padding-top: 25px;
}
#email-details .email-actions a {
color: #757575;
padding: 5px;
}
.email-reply {
padding-top: 20px;
}
.email-reply a {
color: #757575;
}
.email-reply p {
color: #757575;
margin: 0;
}
.email-reply a i {
font-size: 2rem;
}
#mail-app .modal .modal-content {
padding: 0;
}
.model-email-content {
padding: 24px;
}
.invoice-icon i {
font-size: 2rem;
}
.invoice-table {
padding-top: 40px;
}
.invoice-text {
padding: 18px 0px;
}
.blog-card .card {
margin: 0px;
}
.blog-card ul.card-action-buttons {
margin: -26px 10px 0px 0px;
text-align: right;
}
.blog-card ul.card-action-buttons li {
display: inline-block;
padding-left: 5px;
}
.blog-card .card .card-content {
padding: 5px 10px 5px 10px;
}
.blog-card .card .card-content .card-title,
.blog-card .card .card-reveal .card-title {
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: 400;
}
.blog {
width: 20%;
padding: 10px;
}
.blog-sizer {
width: 20%;
}
.blog .card {
margin: 0px;
}
.blog ul.card-action-buttons {
margin: -26px 10px 0px 0px;
text-align: right;
}
.blog ul.card-action-buttons li {
display: inline-block;
padding-left: 5px;
}
.blog .card .card-content {
padding: 5px 10px 5px 10px;
}
.blog .card .card-content .card-title,
.blog .card .card-reveal .card-title {
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: 400;
}
.blog-post-content {
padding-bottom: 10px;
}
@media screen and (max-width: 2200px) {
.blog-sizer {
width: 20%;
}
.blog {
width: 20%;
}
}
@media screen and (max-width: 1800px) {
.blog-sizer {
width: 30%;
}
.blog {
width: 30%;
}
}
@media screen and (max-width: 1600px) {
.blog-sizer {
width: 33.33%;
}
.blog {
width: 33.33%;
}
}
@media screen and (max-width: 1224px) {
.blog-sizer {
width: 33.33%;
}
.blog {
width: 33.33%;
}
}
@media screen and (max-width: 980px) {
.blog-sizer {
width: 50%;
}
.blog {
width: 50%;
}
}
@media screen and (max-width: 720px) {
.blog-sizer {
width: 50%;
}
.blog {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.blog-sizer {
width: 100%;
}
.blog {
width: 100%;
}
}
#blog-post-full .card-title {
text-shadow: 1px 1px 4px #000;
font-weight: 300;
font-size: 2rem;
}
#blog-post-full .blog-post-full-cat {
padding: 5px;
margin: 25px;
right: 0px;
left: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
#blog-post-full .blog-post-full-cat a {
color: #fff;
text-shadow: none;
}
.product-card .card {
margin: 0px;
}
.product-card ul.card-action-buttons {
margin: -26px 10px 0px 0px;
text-align: right;
}
.product-card ul.card-action-buttons li {
display: inline-block;
padding-left: 5px;
}
.product-card .card .card-content {
padding: 5px 10px 5px 10px;
}
.product-card .card .card-content .card-title,
.product-card .card .card-reveal .card-title {
font-size: 1.1rem;
line-height: 1.6rem;
font-weight: 400;
}
.product-card .card .btn-price {
width: 65px;
height: 65px;
font-weight: 600;
font-size: 1.0rem;
line-height: 65px;
margin: 10px;
position: absolute;
top: 0px;
letter-spacing: 0px;
}
.product {
width: 20%;
padding: 10px;
}
.product-sizer {
width: 20%;
}
.product .card {
margin: 0px;
}
.product ul.card-action-buttons {
margin: -26px 10px 0px 0px;
text-align: right;
}
.product ul.card-action-buttons li {
display: inline-block;
padding-left: 5px;
}
.product .card .card-content {
padding: 5px 10px 5px 10px;
}
.product .card .card-content .card-title,
.product .card .card-reveal .card-title {
font-size: 1.1rem;
line-height: 1.6rem;
font-weight: 400;
}
.product .card .btn-price {
width: 65px;
height: 65px;
font-weight: 600;
font-size: 1.0rem;
line-height: 65px;
margin: 10px;
position: absolute;
top: 0px;
letter-spacing: 0px;
}
@media screen and (max-width: 2200px) {
.product-sizer {
width: 20%;
}
.product {
width: 20%;
}
}
@media screen and (max-width: 1800px) {
.product-sizer {
width: 30%;
}
.product {
width: 30%;
}
}
@media screen and (max-width: 1600px) {
.product-sizer {
width: 25%;
}
.product {
width: 25%;
}
}
@media screen and (max-width: 1224px) {
.product-sizer {
width: 33.33%;
}
.product {
width: 33.33%;
}
}
@media screen and (max-width: 980px) {
.product-sizer {
width: 50%;
}
.product {
width: 50%;
}
}
@media screen and (max-width: 720px) {
.product-sizer {
width: 50%;
}
.product {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.product-sizer {
width: 100%;
}
.product {
width: 100%;
}
}
.gallary-item img {
width: 20%;
}
.gallary-sizer {
width: 20%;
}
@media screen and (max-width: 2200px) {
.gallary-sizer {
width: 20%;
}
.gallary-item img {
width: 20%;
}
}
@media screen and (max-width: 1800px) {
.gallary-sizer {
width: 30%;
}
.gallary-item img {
width: 30%;
}
}
@media screen and (max-width: 1600px) {
.gallary-sizer {
width: 25%;
}
.gallary-item img {
width: 25%;
}
}
@media screen and (max-width: 1224px) {
.gallary-sizer {
width: 33.33%;
}
.gallary-item img {
width: 33.33%;
}
}
@media screen and (max-width: 980px) {
.gallary-sizer {
width: 50%;
}
.gallary-item img {
width: 50%;
}
}
@media screen and (max-width: 720px) {
.gallary-sizer {
width: 50%;
}
.gallary-item img {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.gallary-sizer {
width: 100%;
}
.gallary-item img {
width: 100%;
}
}
.map-card #map-canvas {
width: 100%;
height: 342px;
}
.map-card .card .card-content .card-title,
.map-card .card .card-reveal .card-title {
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: 400;
}
.map-card .btn-move-up {
top: -38px;
}
#map-canvas {
width: 100%;
height: 250px;
}
.plans-container .collection {
border: none;
}
.plans-container .collection .collection-item {
border-bottom: none;
text-align: center;
font-size: 1.07rem;
line-height: 1.6em;
}
.plans-container .collection .collection-item:before {
font-size: 1.28rem;
line-height: 1.6em;
color: #009315;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
content: "\e623";
margin-right: 10px;
}
.plans-container .card .card-image {
position: relative;
width: 100%;
}
.plans-container .card .card-image .card-title {
position: relative;
font-size: 1.28rem;
line-height: 1.6em;
text-align: center;
width: 100%;
padding: 10px 15px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.1);
}
.plans-container .card .card-image .price {
position: relative;
font-size: 5rem;
line-height: 1.6em;
color: #fff;
font-weight: 300;
text-align: center;
}
.plans-container .card .card-image .price sup {
font-weight: 100;
font-size: 1.42rem;
line-height: 1.6em;
top: -35px;
}
.plans-container .card .card-image .price sub {
font-weight: 100;
font-size: 1.42rem;
line-height: 1.6em;
top: 0px;
}
.plans-container .card .card-image .price-desc {
text-align: center;
color: #fff;
padding-bottom: 10px;
}
.plans-container .card .card-content {
padding: 0;
}
#profile-page-header .card-image {
height: 250px;
}
#profile-page-header .card-profile-image {
width: 110px;
position: absolute;
top: 190px;
z-index: 1;
left: 40px;
cursor: pointer;
margin: 0;
}
#profile-page-header .card-content {
margin-top: -40px;
}
#profile-page-header .card-content .card-title {
margin-bottom: 0px;
}
#profile-page-wall .profile-image-post {
width: 60px;
margin: 30px 10px;
}
#profile-page-wall .tab-profile .tab i {
font-size: 16px;
}
#profile-page-wall .tab-content {
padding: 10px;
}
#profile-page-wall .share-icons {
margin-top: 10px;
}
#profile-page-wall .share-icons i {
padding: 0px 5px;
}
#profile-page-wall-posts .profile-small {
height: 250px;
overflow: hidden;
}
#profile-page-wall-posts .profile-medium {
height: 350px;
overflow: hidden;
}
#profile-page-wall-posts .profile-large {
height: 450px;
overflow: hidden;
}
#profile-page-wall-posts .card-profile-title {
font-size: 16px;
padding: 20px;
border-radius: 0 0 2px 2px;
}
#profile-page-wall-posts .card-action-share {
padding: 16px;
}
.shadow-demo {
background-color: #26a69a;
width: 100px;
height: 100px;
margin: 20px auto;
}
.collapsible-header {
font-weight: 500;
}
footer.page-footer {
padding-top: 0px;
}
#world-map-markers {
height: 300px;
}
#polar-chart-holder {
padding-top: 20px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.doughnut-chart-status {
display: none;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.doughnut-chart-status {
display: none;
}
#card-stats .card-stats-compare {
font-size: 0.8rem;
}
}
#main,
footer {
padding-left: 0px;
}
header .brand-logo {
margin: 1px 0px;
padding: 0 10px;
}
header .brand-logo img {
width: 172px;
}
#horizontal-nav {
margin-top: 64px;
z-index: -1;
}
@media only screen and (min-width: 993px) {
#content {
margin-top: 65px;
}
}
.doughnut-chart-status {
top: -85px;
}
#horizontal-nav ul li {
text-align: center;
}
#horizontal-nav ul li a i {
height: 0px;
line-height: 45px;
font-size: 1.4rem;
}
#horizontal-nav ul li a span {
position: relative;
top: 12px;
}
#horizontal-nav .dropdown-menu span i {
line-height: 65px;
}
.dropdown-horizontal-list li a {
min-width: 150px;
text-align: left;
font-size: 1.0rem;
padding: 10px;
font-weight: 400;
}
$(window).load(function() {
setTimeout(function() {
Materialize.toast('<span>Hiya! I am a toast.</span>', 1500);
}, 1500);
setTimeout(function() {
Materialize.toast('<span>You can swipe me too!</span>', 3000);
}, 5000);
setTimeout(function() {
Materialize.toast('<span>You have new order.</span><a class="btn-flat yellow-text" href="#">Read<a>', 3000);
}, 15000);
});
$(function() {
$('#map-canvas').addClass('loading');
var latlng = new google.maps.LatLng(40.6700, -73.9400);
var settings = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
draggable: true,
styles: [{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#e0efef"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"hue": "#1900ff"
}, {
"color": "#c0e8e8"
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"visibility": "on"
}, {
"lightness": 700
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#7dcdcd"
}]
}],
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
};
var map = new google.maps.Map(document.getElementById("map-canvas"), settings);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
$('#map-canvas').removeClass('loading');
});
var contentString =
'<div id="info-window">' +
'<p>18 McLuice Road, Vellyon Hills,<br /> New York, NY 10010<br /><a href="https://plus.google.com/102896039836143247306/about?gl=za&hl=en" target="_blank">Get directions</a></p>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('http://demo.geekslabs.com/ashoka/images/map-marker.png',
new google.maps.Size(36, 62),
new google.maps.Point(0, 0),
new google.maps.Point(18, 52)
);
var companyPos = new google.maps.LatLng(40.6700, -73.9400);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
title: "Shapeshift Interactive",
zIndex: 3
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map, companyMarker);
pageView('/#address');
});
});
$(function() {
"use strict";
var window_width = $(window).width();
$(window).load(function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 200);
});
$('.header-search-input').focus(
function() {
$(this).parent('div').addClass('header-search-wrapper-focus');
}).blur(
function() {
$(this).parent('div').removeClass('header-search-wrapper-focus');
});
$('#task-card input:checkbox').each(function() {
checkbox_check(this);
});
$('#task-card input:checkbox').change(function() {
checkbox_check(this);
});
function checkbox_check(el) {
if (!$(el).is(':checked')) {
$(el).next().css('text-decoration', 'none');
} else {
$(el).next().css('text-decoration', 'line-through');
}
}
$('.slider').slider({
full_width: true
});
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 125,
constrain_width: true,
hover: false,
alignment: 'left',
gutter: 0,
belowOrigin: true
});
$('.tab-demo').show().tabs();
$('.tab-demo-active').show().tabs();
$('.parallax').parallax();
$('.modal-trigger').leanModal();
$('.scrollspy').scrollSpy();
$('.tooltipped').tooltip({
delay: 50
});
$('.sidebar-collapse').sideNav({
edge: 'left',
});
$('.menu-sidebar-collapse').sideNav({
menuWidth: 240,
edge: 'left',
});
$('.dropdown-menu').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: true,
gutter: 0,
belowOrigin: true
});
$('.chat-collapse').sideNav({
menuWidth: 300,
edge: 'right',
});
$('.chat-close-collapse').click(function() {
$('.chat-collapse').sideNav('hide');
});
$('.chat-collapsible').collapsible({
accordion: false
});
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
$('select').not('.disabled').material_select();
var leftnav = $(".page-topbar").height();
var leftnavHeight = window.innerHeight - leftnav;
$('.leftside-navigation').height(leftnavHeight).perfectScrollbar({
suppressScrollX: true
});
var righttnav = $("#chat-out").height();
$('.rightside-navigation').height(righttnav).perfectScrollbar({
suppressScrollX: true
});
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
$('.toggle-fullscreen').click(function() {
toggleFullScreen();
});
if ($('nav').length) {
$('.toc-wrapper').pushpin({
top: $('nav').height()
});
} else if ($('#index-banner').length) {
$('.toc-wrapper').pushpin({
top: $('#index-banner').height()
});
} else {
$('.toc-wrapper').pushpin({
top: 0
});
}
var toggleFlowTextButton = $('#flow-toggle')
toggleFlowTextButton.click(function() {
$('#flow-text-demo').children('p').each(function() {
$(this).toggleClass('flow-text');
})
});
var toggleContainersButton = $('#container-toggle-button');
toggleContainersButton.click(function() {
$('body .browser-window .container, .had-container').each(function() {
$(this).toggleClass('had-container');
$(this).toggleClass('container');
if ($(this).hasClass('container')) {
toggleContainersButton.text("Turn off Containers");
} else {
toggleContainersButton.text("Turn on Containers");
}
});
});
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if (is_touch_device()) {
$('#nav-mobile').css({
overflow: 'auto'
})
}
new Chartist.Line('#ct2-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true
});
if (window_width <= 480) {
$("#trending-line-chart").attr({
height: '200'
});
}
});
