LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

user background
Roger Waters

Project Manager

+1 (612) 222 8989

mail@domain.com

Roger Waters

Here is some more information about this card.

Project Manager

+1 (612) 222 8989

mail@domain.com

18th June 1990

BAR - AUS

  • Field1 (name)

    Your Favorites

  • Web App

    AEC Company

    Development
  • Mobile App for Social

    iSocial App

    UI/UX
  • Website

    MediTab

    Marketing
  • AdWord campaign

    True Line

    SEO
  • Issues

    Assigned to you

  • #102 Home Page

    Web Project

    P1
  • #108 API Fix

    API Project

    P2
  • #205 Profile page css

    New Project

    P3
  • #188 SAP Changes

    SAP Project

    P1
  • My Task

    March 26, 2015

  • Mobile App
  • Web API
  • Mockup
  • Mobile App

Flight

June 18, Thu 04:50

LDN

London

SFO

San Francisco

Depart: 04.50

Flight: IB 5786

Terminal: B

Arrive: 08.50

Flight: IB 5786

Terminal: C

Company Name LLC

Some more information about this company.

CSS
/*================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 2.1
  Author: GeeksLabs
  Author URL: http://www.themeforest.net/user/geekslabs
================================================================================*/


/*-----------------------------------------

------------------------------------------*/


/*=================================================================================
    General
====================================================================================*/


/*----------------------------------------
  General Layout Style
------------------------------------------*/

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;
}


/*---------------------------------
    Typography
-----------------------------------*/

.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;
}


/*----------------------------------------
    Pre Loader
------------------------------------------*/

#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;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  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;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#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;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222222;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}


/* Loaded */

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -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%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -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%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}


/* JavaScript Turned Off */

.no-js #loader-wrapper {
  display: none;
}

.progress {
  background-color: rgba(255, 64, 129, 0.22);
}


/*=================================================================================
    Header
====================================================================================*/


/*----------------------------------------
    Page Header
------------------------------------------*/

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;
  }
}


/*Search box*/

.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
}


/*Old Search*/

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;
}


/*=================================================================================
    Sidebar
====================================================================================*/


/*----------------------------------------
    Sidebar Main Menu 
------------------------------------------*/

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 {
  /*overflow-y:hidden;*/
}

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;
  /*overflow: hidden;*/
  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 {
  /*height: 50px;*/
}

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;
}


/*----------------------------------------
    Right Chat Slideout
------------------------------------------*/

.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;
}


/* =================================================================================
    Content
================================================================================= */


/*----------------------------------------
    Breadcrumb
------------------------------------------*/

.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;
}


/*----------------------------------------
    Cards
------------------------------------------*/


/*card-stats*/

#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*/

#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*/

#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);
  /* Safari */
  -moz-transform: rotate(90deg);
  /* Firefox */
  -ms-transform: rotate(90deg);
  /* IE */
  -o-transform: rotate(90deg);
  /* Opera */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  /* SASS Internet Explorer */
}

#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*/

#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 */

#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;
}


/*----------------------------------------
    Charts
------------------------------------------*/

#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 {
  /*background: #00bcd4;*/
}

.sample-chart-wrapper {
  width: 100%;
}

.chart-title {
  font-size: 1.6rem;
  font-weight: 300;
}


/* Revenue Chart */

.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 */

.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 */

.trending-bar-chart-wrapper {
  width: 100%;
}

.btn-move-up {
  position: relative;
  top: -28px;
  right: -18px;
  margin-right: 10px !important;
}


/* Flot Chart*/

.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;
}


/* xCharts */

.xchart-placeholder {
  width: 90%;
  height: 300px;
}


/*Sparkline*/

.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;
}


/*------------------
  Widget
--------------------*/

.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;
}


/*----------------------------------------
    Calender
------------------------------------------*/

#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;
}


/*----------------------------------------
    Color Palette for css-color.html page
------------------------------------------*/

.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;
}


/*----------------------------------------
    Grid - Flat Site Mockup
------------------------------------------*/

#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;
}


/*----------------------------------------
    Chrome Browser Grid Example
------------------------------------------*/

.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 page
------------------------------------------*/

.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 Page
------------------------------------------*/

.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;
}


/*----------------------------------------
    Error Page
------------------------------------------*/

.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);
  /*height: 100%;*/
  width: 100%;
  font-size: 10rem;
  color: #fff !important;
  text-align: center;
  padding: 20px 0 !important;
}


/*----------------------------------------
    Email Page
------------------------------------------*/

#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);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  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 Page
------------------------------------------*/

.invoice-icon i {
  font-size: 2rem;
}

.invoice-table {
  padding-top: 40px;
}

.invoice-text {
  padding: 18px 0px;
}


/*----------------------------------------
    Blog
------------------------------------------*/


/* ----- Blog Card -----*/

.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;
}


/* -----Blogs Masonery Page----- */

.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;
}


/*  blog page media queries */

@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%;
  }
}


/* -----Blogs Page Full width 2----- */

#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;
}


/*----------------------------------------
    Products
------------------------------------------*/


/* ---- Product Card ----- */

.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;
}


/* -----Products Masonery ----- */

.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;
}


/* eCommers product page media queries */

@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  Page
------------------------------------------*/

.gallary-item img {
  width: 20%;
}

.gallary-sizer {
  width: 20%;
}


/* Gallary page media queries */

@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%;
  }
}


/*----------------------------------------
    Contact Page (Map-card)
------------------------------------------*/


/* ---- Map card ----*/

.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 Contact Page ----*/

#map-canvas {
  width: 100%;
  height: 250px;
}


/*----------------------------------------
    Pricing Plan  Page
------------------------------------------*/

.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;
}


/*
@media screen and (min-width: 601px) {
  .plans-container .card {
    min-height: 550px;
  }
}*/


/*----------------------------------------
    Profile Page
------------------------------------------*/

#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-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 effect
------------------------------------------*/

.shadow-demo {
  background-color: #26a69a;
  width: 100px;
  height: 100px;
  margin: 20px auto;
}

.collapsible-header {
  font-weight: 500;
}


/*=================================================================================
    Footer
====================================================================================*/

footer.page-footer {
  padding-top: 0px;
}


/*----------------------------------------
    footer charts
------------------------------------------*/

#world-map-markers {
  height: 300px;
}

#polar-chart-holder {
  padding-top: 20px;
}


/*=================================================================================
    Media Queries
====================================================================================*/


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* STYLES GO HERE */
  .doughnut-chart-status {
    display: none;
  }
}


/* For Tables ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* STYLES GO HERE */
  .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 Menu
------------------------------------------*/

#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;
}
JS
// Toast Notification
$(window).load(function() {
  setTimeout(function() {
    Materialize.toast('Hiya! I am a toast.', 1500);
  }, 1500);
  setTimeout(function() {
    Materialize.toast('You can swipe me too!', 3000);
  }, 5000);
  setTimeout(function() {
    Materialize.toast('You have new order.Read', 3000);
  }, 15000);
});

$(function() {
  // Google Maps  
  $('#map-canvas').addClass('loading');
  var latlng = new google.maps.LatLng(40.6700, -73.9400); // Set your Lat. Log. New York
  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 =
    '';
  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), // Width and height of the marker
    new google.maps.Point(0, 0),
    new google.maps.Point(18, 52) // Position of the marker 
  );

  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');
  });
});

/*================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 2.1
  Author: GeeksLabs
  Author URL: http://www.themeforest.net/user/geekslabs
================================================================================*/

$(function() {

  "use strict";

  var window_width = $(window).width();

  /*Preloader*/
  $(window).load(function() {
    setTimeout(function() {
      $('body').addClass('loaded');
    }, 200);
  });

  // Search class for focus
  $('.header-search-input').focus(
    function() {
      $(this).parent('div').addClass('header-search-wrapper-focus');
    }).blur(
    function() {
      $(this).parent('div').removeClass('header-search-wrapper-focus');
    });

  // Check first if any of the task is checked
  $('#task-card input:checkbox').each(function() {
    checkbox_check(this);
  });

  // Task check box
  $('#task-card input:checkbox').change(function() {
    checkbox_check(this);
  });

  // Check Uncheck function
  function checkbox_check(el) {
    if (!$(el).is(':checked')) {
      $(el).next().css('text-decoration', 'none'); // or addClass            
    } else {
      $(el).next().css('text-decoration', 'line-through'); //or addClass
    }
  }

  /*----------------------
  * Plugin initialization
  ------------------------*/

  // Materialize Slider
  $('.slider').slider({
    full_width: true
  });

  // Materialize Dropdown
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 125,
    constrain_width: true, // Does not change width of dropdown to that of the activator
    hover: false, // Activate on click
    alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
    gutter: 0, // Spacing from edge
    belowOrigin: true // Displays dropdown below the button
  });

  // Materialize Tabs
  $('.tab-demo').show().tabs();
  $('.tab-demo-active').show().tabs();

  // Materialize Parallax
  $('.parallax').parallax();
  $('.modal-trigger').leanModal();

  // Materialize scrollSpy
  $('.scrollspy').scrollSpy();

  // Materialize tooltip
  $('.tooltipped').tooltip({
    delay: 50
  });

  // Materialize sideNav  

  //Main Left Sidebar Menu
  $('.sidebar-collapse').sideNav({
    edge: 'left', // Choose the horizontal origin    
  });

  // FULL SCREEN MENU (Layout 02)
  $('.menu-sidebar-collapse').sideNav({
    menuWidth: 240,
    edge: 'left', // Choose the horizontal origin     
    //defaultOpen:true // Set if default menu open is true
  });

  // HORIZONTAL MENU (Layout 03)
  $('.dropdown-menu').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on hover
    gutter: 0, // Spacing from edge
    belowOrigin: true // Displays dropdown below the button
  });

  //Main Left Sidebar Chat
  $('.chat-collapse').sideNav({
    menuWidth: 300,
    edge: 'right',
  });
  $('.chat-close-collapse').click(function() {
    $('.chat-collapse').sideNav('hide');
  });
  $('.chat-collapsible').collapsible({
    accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
  });

  // Pikadate datepicker
  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });

  // Perfect Scrollbar
  $('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
  });

  // Fullscreen
  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();
  });

  // Floating-Fixed table of contents (Materialize pushpin)
  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
    });
  }

  // Toggle Flow Text
  var toggleFlowTextButton = $('#flow-toggle')
  toggleFlowTextButton.click(function() {
    $('#flow-text-demo').children('p').each(function() {
      $(this).toggleClass('flow-text');
    })
  });

  //Toggle Containers on page
  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");
      }
    });
  });

  // Detect touch screen and enable scrollbar if necessary
  function is_touch_device() {
    try {
      document.createEvent("TouchEvent");
      return true;
    } catch (e) {
      return false;
    }
  }
  if (is_touch_device()) {
    $('#nav-mobile').css({
      overflow: 'auto'
    })
  }

  //LINE CHART WITH AREA IN SIDEBAR
  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
  });

  //Trending chart for small screen
  if (window_width <= 480) {
    $("#trending-line-chart").attr({
      height: '200'
    });
  }

}); // end of document ready
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:42

Related Codes

Pen ID
Pen ID
Pen ID