/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/
html, body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  color: #333; }

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px; }

.material-icons.md-24 {
  font-size: 24px; }

.material-icons.md-32 {
  font-size: 32px;
  height: 32px;
  width: 32px; }

.material-icons.md-36 {
  font-size: 36px;
  height: 36px;
  width: 36px; }

.material-icons.md-48 {
  font-size: 48px;
  height: 48px;
  width: 48px; }

h3 {
  font-weight: bold;
  font-size: 24px; }

p {
  line-height: 175%; }

/* Toolbar area */
.menu {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px;
  width: 36px; }

md-toolbar h1 {
  margin: auto; }

/* Sidenav area */
md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%; }

md-list .md-button.selected {
  color: #03a9f4; }

md-sidenav md-list {
  padding: 0px 0px 8px 0px; }

/* Primary content area */
#content {
  overflow: hidden; }

#content {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 5px; }

#content .md-button.contact {
  background-color: transparent;
  border: none;
  width: 48px;
  height: 48px;
  margin: 8px auto 16px 0;
  position: absolute;
  top: 10px;
  right: 40px; }

#content md-icon.avatar {
  margin-top: 10px; }

#content .md-button.contact > md-icon {
  fill: black;
  width: 36px;
  height: 36px; }

md-button.menuBtn > md-icon {
  fill: white;
  width: 24px;
  height: 24px; }

#content .md-button.contact:active > md-icon {
  background-color: #dadada;
  border-radius: 75%;
  padding: 4px;
  transition: all 100ms ease-out 30ms; }

#content img {
  display: block;
  height: auto;
  max-width: 500px; }

/* Utils */
.content-wrapper {
  position: relative; }

/* Typography support coming in 0.8.0 */
md-toolbar h1 {
  font-size: 1.250em;
  font-weight: 400; }

.avatar {
  position: relative;
  width: 128px;
  height: 128px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  margin: 0px;
  vertical-align: middle;
  zoom: 0.70;
  transform: translateZ(0);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7); }

md-bottom-sheet md-icon {
  margin-right: 20px; }

span.name {
  font-weight: bold;
  font-size: 1.1em;
  padding-left: 5px; }

.page-header {
  padding: 20px; }

.page-header .breadcrumbs {
  font-size: 13px;
  color: #fff;
  vertical-align: top;
  clear: both; }

.page-header .breadcrumbs div {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  float: left; }

.page-header .content {
  font-size: 32px;
  color: #fff;
  padding: 16px 0px 16px 0px; }

.page-header .content ng-md-icon {
  position: relative;
  top: 11px;
  left: 1px; }

.page-header .tagline {
  font-size: 16px;
  color: #fff; }

.page-header .actions {
  font-size: 16px;
  color: #fff;
  padding: 16px 0px 0px 0px; }

.page-header .actions ng-md-icon {
  position: relative;
  top: 11px;
  left: 1px; }

.page-content {
  padding: 20px 20px 0px 80px; }

.page-content.small {
  padding: 5px 10px 0px 20px; }

.page-content .page-link {
  margin: 0px;
  padding: 0px; }

.toolbar-icon {
  position: relative;
  top: 8px; }

.site-sidenav .md-button ng-md-icon {
  position: relative;
  top: 8px;
  padding-right: 8px; }

li {
  line-height: 175%; }

a {
  color: #03A9F4; }

/**
 * Menu styles
 */
.menu-text {
  color: #333; }

.menu-icon {
  color: #333;
  font-size: 32px;
  height: auto;
  padding: 0px 12px 4px 0px; }

/**
 * Welcome styles
 */
.welcome {
  background-color: #4587CB; }

.welcome .message {
  width: 100%;
  height: 100%; }

.welcome .message .company-name {
  color: #fff;
  font-size: 54px; }

.welcome.xs .message .company-name {
  font-size: 32px; }

.welcome .message .company-slogan {
  color: #fff;
  font-size: 18px;
  padding-top: 8px; }

.welcome.xs .message .company-slogan {
  font-size: 14px; }

.welcome .message .coming-soon {
  color: #fff;
  font-size: 16px;
  padding-top: 48px;
  font-style: italic; }

.welcome.xs .message .coming-soon {
  font-size: 12px;
  padding-top: 32px; }

.welcome .terms {
  background-color: #445566;
  padding: 20px;
  color: #fff;
  width: 100%; }

.welcome .terms a {
  color: #fff;
  text-weight: bold;
  text-decoration: none; }

.contact {
  border: 3px solid #eee;
  background: #f6f6f6;
  padding: 12px 24px 12px 24px;
  line-height: 24px; }

.contact .name {
  font-weight: bold; }

.action {
  padding: 0px 32px 0px 0px; }

.action .icon {
  height: 72px; }

.action .text {
  color: #471A97;
  font-size: 14px;
  height: 32px;
  text-align: center; }

.link-separator {
  color: #888;
  padding: 0px 12px 0px 12px; }