/*================================================================================


	Item Name: Materialize - Material Design Admin Template


	Version: 1.0


	Author: GeeksLabs


	Author URL: http://www.themeforest.net/user/geekslabs


================================================================================*/


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





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


/*=================================================================================


    General


====================================================================================*/


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


  General Layout Style


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





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;


}

li.no-padding ul.collapsible li.center p.more-text{


    display: none !important;
}
.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;


}





li.uniqv:before {


  background: #dcdcdc;


  width: 15px;height: 15px;


}


li.pagev:before {


  background: #97bbcd;


  width: 15px;height: 15px;


}














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;


  }


}