#header {
  position: absolute; top: 0; right: 0; left: 0; z-index: 3;
  background: #009688;

  /*-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
          box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);*/

  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
          box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
}
#header > div {
  padding: 8px;
  height: 64px;
}
#header > div > a.action { float: left; }
#header .ic { color: #fff; }
#header .ic svg {
  fill: #fff;
  opacity: 1;
}
#header a { color: inherit; }
#header a.logo {
  color: #FFF;
}
#header a.logo:hover,
#header a.logo:focus {
  text-decoration: none;
}
#header a.logo-company {
  color: #008AC9;
}
#header a.logo-company:hover,
#header a.logo-company:focus {
  color: #FFF;
  text-decoration: none;
}
#header > div > a.logo {
  float: left;
  font-size: 24px;
  margin-left: 12px; margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
}
#header > div > a.logo-company {
  float: left;
  margin-left: 12px; margin-right: 8px;
}
#header div.company-select {
  position: relative;
  float: left;
  margin-left: 12px; margin-right: 8px;
}
#header div.company-select a.logo-company {
  float: none;
  margin: 0;
}
#header div.company-select ul.menu {
  position: absolute; top: 0; left: -12px;
  white-space: nowrap;
}
#header div.company-select ul.menu-hidden {
  -webkit-transform-origin: top left;
     -moz-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
}
#header ul.tabs {
  padding-top: 8px; padding-left: 12px;
  height: 56px;
  background: none;
  color: #fff;
  overflow: hidden;
}
#header ul.tabs a { text-decoration: none; }
#header ul.tabs a:hover,
#header ul.tabs a:focus {
  color: #008AC9;
}
#header ul.tabs a.active:hover,
#header ul.tabs a.active:focus {
  color: #fff;
}
#header ul.tabs a::after { height: 4px; }
#header ul.actions { padding-top: 8px; }
#header hgroup {
  float: left;
  padding-left: 12px; padding-right: 8px; /* 24px */
  color: #fff;
  font-size: 18px; font-weight: 400;
  line-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#header hgroup a.logo { font-size: 24px; }
#header ul.actions ul.menu {
  top: -8px;
  min-width: 168px;
}
#header ul.actions ul.menu a,
#header div.company-select ul.menu a {
  text-decoration: none;
}
#header ul.actions ul.menu a.active,
#header div.company-select ul.menu a.active {
  color: #fff;
}

#drawer {
  position: absolute; top: 64px; bottom: 0; left: 0; z-index: 2;
  width: 270px;
  background: #fff;
  overflow: auto; overflow-x: hidden;

  -webkit-box-shadow: 1px 0 3px rgba(0,0,0,0.12), 1px 0 2px rgba(0,0,0,0.16);
          box-shadow: 1px 0 3px rgba(0,0,0,0.12), 1px 0 2px rgba(0,0,0,0.16);

  overflow: auto;
}
#drawer img.avatar {
  width: 64px; height: 64px;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
          box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 6px rgba(0, 0, 0, .12);
}

#content {
  position: absolute; top: 64px; right: 0; bottom: 0; left: 0; z-index: 1;
  padding: 20px;
  background: #f1f1f1;
  overflow: auto;
}
#drawer + #content { left: 270px; }