md-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 16px 88px 16px;
  z-index: 110;
  border-top-width: 1px;
  border-top-style: solid;
  transform: translate3d(0, 80px, 0);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: transform;
  background-color: #FAFAFA;
  border-top-color: #E0E0E0; }
  md-keyboard.md-has-header {
    padding-top: 0; }
  md-keyboard.ng-enter {
    opacity: 0;
    transform: translate3d(0, 100%, 0); }
  md-keyboard.ng-enter-active {
    opacity: 1;
    display: block;
    transform: translate3d(0, 80px, 0) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  md-keyboard.ng-leave-active {
    transform: translate3d(0, 100%, 0) !important;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  md-keyboard .md-subheader {
    background-color: transparent;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    line-height: 56px;
    padding: 0;
    white-space: nowrap; }
  md-keyboard .md-button {
    min-width: 100%;
    text-transform: none; }
    md-keyboard .md-button.key-caps:before {
      content: '';
      position: absolute;
      top: 5px;
      left: 5px;
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 100%;
      background-color: #ccc; }
    md-keyboard .md-button.key-caps.locked:before {
      background-color: #0f0;
      box-shadow: 0 0 3px #adff2f; }
  md-keyboard md-inline-icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    fill: #444; }
  md-keyboard md-list-item {
    display: flex;
    outline: none; }
    md-keyboard md-list-item:hover {
      cursor: pointer; }
  md-keyboard.md-grid {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px; }
  md-keyboard .layout-row > .flex {
    border: 4px solid transparent; }
    md-keyboard .layout-row > .flex:not(.key-char) {
      width: auto; }
    md-keyboard .layout-row > .flex.key-bksp, md-keyboard .layout-row > .flex.key-caps {
      min-width: 15%; }
    md-keyboard .layout-row > .flex.key-tab, md-keyboard .layout-row > .flex.key-shift, md-keyboard .layout-row > .flex.key-enter {
      min-width: 10%; }
    md-keyboard .layout-row > .flex.key-space {
      text-align: center; }
      md-keyboard .layout-row > .flex.key-space > span {
        max-width: 80%; }
    md-keyboard .layout-row > .flex > span {
      display: inline-block;
      width: 100%; }
      md-keyboard .layout-row > .flex > span .md-button {
        margin: 0; }
  md-keyboard ~ .md-scroll-mask {
    pointer-events: none; }

@media screen and (-ms-high-contrast: active) {
  md-keyboard {
    border: 1px solid #fff; } }