body { background-color: #fcfcfc; }
#main, footer { padding-left: 240px; }
.margin { margin: 0; }
#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; }
}
/*---------------------------------
    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; }
/*----------------------------------------
    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.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: 5px 0px; /*padding: 0 42px;
  padding: 0px 10px 0 75px;*/
  
padding: 0 20px; }

@media only screen and (max-width: 992px) {
nav .nav-wrapper { text-align: center; }
nav .nav-wrapper a.page-title { font-size: 36px; }
}
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 
------------------------------------------*/

ul.side-nav.fixed { top: 64px; }

@media only screen and (max-width: 992px) {
ul.side-nav.fixed { top: 56px; }
}
ul.side-nav.fixed 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.fixed { overflow: hidden; }
ul.side-nav.fixed li { line-height: 44px; }
ul.side-nav.fixed li:hover, ul.side-nav.fixed li.active { background-color: rgba(0, 0, 0, 0.05); }
ul.side-nav.fixed li a { font-size: 14px; font-weight: 400; }
.side-nav .collapsible-body li a { margin: 0 1rem 0 3rem; }
ul.side-nav.fixed ul.collapsible-accordion { background-color: #FFF; }
ul.side-nav.fixed:hover { /*overflow-y:hidden;*/
}
ul.side-nav.fixed li.user-details { background: url(../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.fixed .profile-image { /*height: 50px;*/
}
ul.side-nav.fixed .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: 1.64rem; 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);
/* Internet Explorer */
}
#flight-card .card-content-bg { background: url(../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-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: 80px; position: absolute; top: 90px; z-index: 1; cursor: pointer; }
#profile-card .btn-move-up { position: relative; top: -45px; 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; }
/*----------------------------------------
    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; }
}