/*
Copyright (c) 2011 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
*/

body {
  background: -webkit-linear-gradient(#131925, #04070B);
  color: white;
  margin: 0;
  overflow: hidden;
  padding: 0;
  -webkit-user-select: none;
}

div.main {
  margin: 0 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

div.keyboard {
  margin: 0 auto;
  display: -webkit-box;
  text-align: center;
  -webkit-box-flex: 1;
}

div.rows {
  display: -webkit-box;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-flex: 1;
}

div.row {
  display: -webkit-box;
  margin-top: 5px;
  -webkit-box-flex: 1;
}

div.row > div {
  display: -webkit-box;
  -webkit-box-flex: 1;
}

.handwritingcanvas {
  border: 1px solid gray;
  color: #dbdbdb;
  font-family: sans-serif;
  margin: 5px 0 0 5px;
  text-align: center;
  -webkit-border-radius: 4px;
}

.ime {
  border: 1px solid gray;
  color: #dbdbdb;
  display: inline-block;
  font-family: sans-serif;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.panel {
  border: 0;
  clear: both;
  margin-left: 5px;
  text-align: left;
}

.button {
  background: -webkit-linear-gradient(#5a616f, #505662);
}
.button:active {
  background: -webkit-linear-gradient(#505662, #5a616f);
}

.auxiliary:active {
  background: -webkit-linear-gradient(#5a616f, #505662);
}

.key {
  border: 1px solid gray;
  color: #dbdbdb;
  display: -webkit-box;
  font-family: sans-serif;
  margin-left: 5px;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-border-radius: 4px;
}

.key > div {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.r0 {
  background: -webkit-linear-gradient(#5a616f, #505662);
}
.r0:active {
  background: -webkit-linear-gradient(#505662, #5a616f);
}

.r1 {
  background: -webkit-linear-gradient(#505662, #41464f);
}
.r1:active {
  background: -webkit-linear-gradient(#41464f, #505662);
}

.r2 {
  background: -webkit-linear-gradient(#41464f, #32373d);
}
.r2:active {
  background: -webkit-linear-gradient(#32373d, #41464f);
}

div.moddown {
  background: -webkit-linear-gradient(#0d0d0d, #1e2026);
  border-color: #304a9b;
}

.ncr0,
.ncr1,
.ncr2,
.ncr3 {
  background: -webkit-linear-gradient(#1f2127, #1b1e22);
}

.ncr0:active,
.ncr1:active,
.ncr2:active,
.ncr3:active {
  background: -webkit-linear-gradient(#0d0d0d, #1e2026);
}

.image-key {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
}

.text-key {
  height: 1.2em;
}

.backspace > div, .handwriting-backspace > div {
  background-image: url("del.svg");
}

.tab > div {
  background-image: url("tab.svg");
}

.return > div, .handwriting-return > div {
  background-image: url("ret.svg");
}

.mic > div, .handwriting-mic > div {
  background-image: url("mic.svg");
}

.shift > div.image-key {
  background-image: url("shift.svg");
}

.moddownshift > div {
  background-image: url("shift.svg");
}

.hide > div {
  background-image: url("keyboard.svg");
}

.at,
.com,
.comma,
.handwriting-backspace,
.hide,
.mic,
.period,
.return,
.symbol {
  -webkit-box-flex: 1.3;
}

.backspace,
.left_shift {
  -webkit-box-flex: 1.6;
}

.space {
  -webkit-box-flex: 4.8;
}

.handwriting-mic,
.handwriting-space {
  -webkit-box-flex: 3.7;
}

.handwriting-clear,
.handwriting-return {
  -webkit-box-flex: 5;
}

.nodisplay {
  display: none;
}