@font-face {
  font-family: 'Keyboard Symbols';
  font-weight: 600;
  /* Bug 992346 - Inline Keyboard-Symbols.woff */
  src: url(data:application/x-font-woff;charset=utf-8;base64, ) format('woff')
}

html {
  font-size: 10px;
  pointer-events: none;
}

body {
  margin: 0;
  overflow: hidden;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.cache {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  display: none;
}

/* Keyboard */
#keyboard {
  position: absolute;
  bottom: 0;
  z-index: 15;
  width: 100%;
  border-top: 0.1rem solid #a1a5a8;
  background-color: #606b6e;
  pointer-events: auto;
  visibility: visible;
}

/* Row styles */
.keyboard-row {
  text-align: center;
  font-size: 0;
}
.row1 {
  background-color: #5b6668;
}

.row2 {
  background-color: #566061;
}

.row3 {
  background-color: #525c5e;
}

.row0 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #525b5e;
}

.row1 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #4c5657;
}

.row2 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #475052;
}

.row3 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #434b4d;
}

#keyboard.full-candidate-panel button.keyboard-key {
  visibility: hidden;
}

/* Buttons: logic keys */
.keyboard-key {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0;
  font-size: 0;
  font-family: sans-serif;
  border: none;
  border-radius: 0;  /* To override the system-default border radius for button element  */
  background: none;

  /* Delay hiding the highlighting long enough to make sure the user sees it. */
  transition: background-color 0s ease-in 0.01s;
}

/* Visible keys */
.keyboard-key > .visual-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 4.3rem;
  margin: 0.4rem 0;
}

/* Standard key styles. */
.keyboard-key > .visual-wrapper > .key-element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 4.3rem;
  font-weight: normal;
  text-align: center;
  border-right: 0.1rem solid #525b5e;
  border-left: 0.1rem solid transparent;

  /* Delay hiding the highlighting long enough to make sure the user sees it. */
  transition: color 0s ease-in 0.01s;
}

.popup {
  position: absolute;
  top: -5.8rem;
  left: calc(50% - 2.8rem);
  width: 5.6rem;
  height: 5.6rem;
  color: #fff;
  font-size: 2.8rem;
  line-height: 5.6rem;
  border-radius: 50%;
  background-color: #00aacc;
  visibility: hidden;

  /* To override the text-align in .float-key-first and .float-key-last */
  text-align: center;
}

.keyboard-key:not(.special-key) > .visual-wrapper > .popup {
  /* Delay hiding the bubble long enough to make sure the user sees it. */
  transition: visibility 0s ease-in 0.01s;
}

.keyboard-key.highlighted {
  background-color: #4a5255;

  transition-delay: 0s;
}

.keyboard-key:last-child > .visual-wrapper > .key-element {
  border-right: transparent;
}

.keyboard-key.highlighted > .visual-wrapper > .key-element {
  color: #00caf2;

  transition-delay: 0s;
}

/* Show the bubble text when the button is highlighted. */
.keyboard-key.highlighted > .visual-wrapper > .popup {
  z-index: 1;
  visibility: visible;
}

.keyboard-key:not(.special-key).highlighted > .visual-wrapper > .popup {
  transition-delay: 0s;
}

/* Special rules for lowercase and uppercase popups */

/* Default is uppercase, so hide the lowercase popup */
.keyboard-key.highlighted > .visual-wrapper > .popup.lowercase {
  visibility: hidden;
}

/* For lowercase, hide the uppercase popup and show the lowercase one */
.keyboard-key.highlighted.lowercase > .visual-wrapper > .popup.lowercase {
  visibility: visible;
}

.keyboard-key.highlighted.lowercase > .visual-wrapper > .popup.uppercase {
  visibility: hidden;
}

.keyboard-row button:last-child.highlighted > .visual-wrapper > .popup {
  left: -2.4rem;
}

.keyboard-row button:first-child.highlighted > .visual-wrapper > .popup {
  left: 0;
}


/* Special keys */
.keyboard-key.special-key > .visual-wrapper > .key-element {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #abb0b1;
  font: 500 1.5rem/4.3rem 'Keyboard Symbols', sans-serif;
}

/* Highlight for special keys */
.keyboard-key.special-key.highlighted > .visual-wrapper > .key-element {
  color: #00b8d6;
}

.keyboard-key.special-key.highlighted > .visual-wrapper:before,
.keyboard-key.special-key.highlighted > .visual-wrapper:after,
.keyboard-key.special-key.highlighted > .visual-wrapper > .popup,
.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper > .popup,
#keyboard-accent-char-menu .keyboard-key > .visual-wrapper:before {
  opacity: 0;
}


/* Switching keys */
.keyboard-key.special-key.switch-key > .visual-wrapper > .key-element {
  font-size: 1.8rem;
}

/* For disabled keys */
.keyboard-key.special-key[disabled="true"] {
  /* Without this rule, the focus would lose when the user clicks this key.
     This seems to be because a disabled key would not get touch/click event. */
  pointer-events: none;
}

.keyboard-key.special-key[disabled="true"] > .visual-wrapper {
  border-color: #535757;
  background-color:  #585D5D;
}

.keyboard-key.special-key[disabled="true"] > .visual-wrapper > .key-element {
  color: #888;
}

/* Special keys - text */
.keyboard-key.special-key.text > .visual-wrapper > .key-element {
  font-family: Sans-serif;
}

/* For keyboard layout menu*/
.keyboard-key.special-key.highlighted.kbr-menu-on > .visual-wrapper:before,
.keyboard-key.special-key.highlighted.kbr-menu-on > .visual-wrapper:after {
  display: inherit;
}

.keyboard-key.special-key.highlighted.kbr-menu-on .visual-wrapper > .key-element {
  font-size: 0;
}

/* Key states */

/* Active key, used for shift key - uppercase */
.keyboard-key.kbr-key-active {
  background-color: #00caf2;
}

.keyboard-key.kbr-key-active > .visual-wrapper > .key-element {
 color: #fff;
 border-right-color: transparent;
}

/* Caps lock case */
.keyboard-key.special-key.kbr-key-hold > .visual-wrapper > .key-element {
  color: #00caf2;
}

/* The underline for caps lock */
.keyboard-key.kbr-key-hold > .visual-wrapper {
  box-shadow: 0 0.4rem 0 #00caf2;
}

/* Alt menu enabled */
.keyboard-key.highlighted.kbr-menu-on > .visual-wrapper > .key-element {
  background: none;
}

.keyboard-key.highlighted.kbr-menu-on > .visual-wrapper > .popup {
  display: none;
}

.keyboard-key.pinyin-ch-ellipsis > .visual-wrapper > .key-element {
  font-size: 1.6rem;
}

span.pinyin-toggle-button-small {
  font-size: 70%;
}

/* Alternatives menu -- this menu appears when you tap and hold a key that has
alternative special (accented) characters. The menu "grows" out of the key
and displays the list of alternatives. */
#keyboard-accent-char-menu {
  display: none;
  position: absolute;
  top: -6rem;
  height: 6rem;
  font-size: 0;
  border-radius: 3rem;
  background-color: #00aacc;
  overflow: hidden;
  white-space: nowrap;
  left: -1.2rem; /* because the first child is 1.2rem wider than others */
}

#keyboard-accent-char-menu.show {
  display: block;
}

#keyboard-accent-char-menu.kbr-menu-left {
  left: auto;
  right: -1.2rem; /* because the last child is 1.2rem wider than others */
}

/* Non keyboard key styles in menu */
#keyboard-accent-char-menu .keyboard-key {
  min-width: 3rem;
}

/* if it is the first or last key in the accent menu make it wider */
#keyboard-accent-char-menu .keyboard-key:first-child,
#keyboard-accent-char-menu .keyboard-key:last-child {
  min-width: 4.2rem;
}

/*
 * If it is the first and the last key in the accent menu, it means that
 * there is only one and we need to make it wider still so we get a round
 * menu
 */
#keyboard-accent-char-menu .keyboard-key:first-child:last-child {
  min-width: 6rem;
}

#keyboard-accent-char-menu .keyboard-key > .visual-wrapper {
  height: 6rem;
  margin: 0;
  border-right: 1px solid #0099b8;
}

#keyboard-accent-char-menu .keyboard-key > .visual-wrapper .key-element {
  background: none;
  border-radius: 0;
}

#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper:after,
#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper > .popup {
  display: none;
}

/* Styles for keys in accent menu (not highlighted). */
#keyboard-accent-char-menu .keyboard-key > .visual-wrapper > .key-element {
  border: none;
  line-height: 6rem;
  font-weight: 500;
  color: #fff;
}

#keyboard-accent-char-menu .keyboard-key:first-child > .visual-wrapper > .key-element {
  padding-left: 0.5rem;
}

#keyboard-accent-char-menu .keyboard-key:last-child > .visual-wrapper > .key-element {
  padding-right: 0.5rem;
}

/* Highlighted special accent characters. These keys appear in the popover
bubble above the key when you tap and hold. */
#keyboard-accent-char-menu .keyboard-key.highlighted > .visual-wrapper > .key-element {
  background-color: #0099b8;
}

#keyboard-accent-char-menu > .keyboard-key:last-child .visual-wrapper {
  border: none;
}

/* IMEs */
.keyboard-pending-symbol-panel {
  position: absolute;
  top: -3.5rem;
  left: 0;
  height: 3.2rem;
  line-height: 3.2rem;
  font-size: 2.4rem;
  width: auto;
  padding: 0 0.8rem;
  background: rgba(245, 245, 245, 0.7);
  color: rgb(36, 36, 36);
  border-top: 0.1rem solid #d5d5d5;
  border-right: 0.1rem solid #d5d5d5;
  white-space: nowrap;
}

.keyboard-pending-symbol-panel:empty {
  display: none;
}

#keyboard.full-candidate-panel {
  padding-top: 3.4rem;
}

.keyboard-candidate-panel {
  display: block;
  background: #252220;
  padding: 0;
  margin: 0.2rem 0 0.2rem 0;
  border: none;
  border-top: 0.1rem solid #000000;
  border-bottom: 0.1rem solid #000000;
  height: 2.8rem;
  width: 100%;
  overflow: hidden;
  white-space: normal;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel {
  overflow-y: auto;

  position: absolute;
  top: 0.1rem;
  height: -moz-calc(100% - 0.4rem);
  z-index: 1;
  margin: 0.1rem 0 0.2rem 0;
}

.keyboard-candidate-panel-toggle-button {
  display: none;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0.25rem;
  font-size: 0;
  height: 2.8rem;
  background: #252220 url('images/icon_extend.png') center center no-repeat;
  background-size: 2.4rem;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel-toggle-button {
  background-image: url('images/icon_close.png');
}

.keyboard-candidate-panel .candidate-row {
  border-top: 0.1rem solid #000000;
}

.keyboard-candidate-panel .candidate-row-first {
  border-top: none;
}

#keyboard.candidate-panel .keyboard-candidate-panel .candidate-row {
  display: none;
}

#keyboard.candidate-panel .keyboard-candidate-panel .candidate-row-first {
  display: block;
}

.keyboard-candidate-panel-toggle-button.highlighted,
.keyboard-candidate-panel .candidate-row span.highlighted {
  background-color: #008eab;
  color: #333333;
}

.keyboard-candidate-panel .candidate-row span {
  display: inline-block;
  margin: 0;
  padding: 0 2px 0 0;
  min-width: -moz-calc(4rem - 2px);
  height: 2.8rem;
  font-size: 2rem;
  color: #a6a6a6;
  text-align: center;
  line-height: 2.8rem;
  background: transparent url('images/divider.png') right center no-repeat;
  background-size: auto 10rem;
  border: none;
}

.keyboard-candidate-panel.vietnamese .candidate-row span {
  font-size: 1.7rem;
}

/* for latin suggestions we don't need such a tall box */
/* and in latin we hide the toggle button, so we can be full-width */
.candidate-panel .keyboard-candidate-panel.latin {
  display: block;
  white-space: nowrap;
  height: 3rem;
  width: 100%;
  background: #333;
  margin: -0.6rem 0 0 0; /* I don't know why we need the top margin */
  border: none;
  border-bottom: 0.1rem solid #a0a6a8;
  overflow: hidden;
}

.full-candidate-panel .keyboard-candidate-panel[data-truncated]::after {
  content: '…';
  background: none ! important;
  border-color: transparent ! important;

  display: block;
  text-align: center;
  margin: 0;
  height: 2.8rem;
  font-size: 2rem;
  color: #a6a6a6;
  line-height: 2.8rem;
}

.keyboard-candidate-panel.latin span {
  display: inline-block;
  font-size: 2.0rem;
  font-weight: normal;
  line-height: 3rem;
  height: 3rem;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.keyboard-candidate-panel.latin span.autocorrect {
  color: #0ac;
}

/*
 * Don't display the toggle button for latin suggestions.
 * For now, at least, we only ever get 3 at a time
 */
#keyboard.candidate-panel .keyboard-candidate-panel-toggle-button.latin {
  display: none;
}

.keyboard-candidate-panel span[data-active],
.keyboard-candidate-panel-toggle-button[data-active] {
  background: -moz-linear-gradient(bottom, rgb(191,191,183) 10%, rgb(161,158,153) 90%);
}

/* Pending panel highlight */
.keyboard-pending-symbols-highlight-green {
  background: #33aa33;
}

.keyboard-pending-symbols-highlight-red {
  background: #aa3333;
}

.keyboard-pending-symbols-highlight-blue {
  background: #3333aa;
}

/* A note to show on the key to indicate the alternative char */
.alt-note {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: #a6a6a6;
  font: 1.6rem/1.6rem "Keyboard Symbols", sans-serif;
}

.keyboard-key.highlighted  .alt-note {
  visibility: hidden;
}

.keyboard-key.big-key > .visual-wrapper .key-element {
  font-size: 3rem;
  font-weight: normal;
  color: #fff;
}

.keyboard-key.big-key .visual-wrapper .alt-note {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
    text-indent: 4rem;
}

.keyboard-key.big-key.highlighted .alt-note {
  visibility: visible;
}

/* Increase tap area for first / last keys in a row that
  doesn't fill full width */
.keyboard-key.float-key-first {
  text-align: right;
}
.keyboard-key.float-key-last {
  text-align: left;
}

#keyboard.landscape .keyboard-key > .visual-wrapper > .key-element {
  font-size: 2.8rem
}

#keyboard.landscape .keyboard-key.special-key > .visual-wrapper > .key-element {
  font: 500 2.1rem/4.3rem 'Keyboard Symbols', sans-serif;
}

#keyboard.landscape .keyboard-key.highlighted > .visual-wrapper > .popup {
    top: -7rem;
    left: calc(50% - 3.5rem);
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
    font-size: 3.5rem
}

.suggestions-container {
  display: none;
}
.dismiss-suggestions-button {
  visibility: hidden;
}

/*
 * Styles for the dismiss suggestions button in the candidate panel
 */
.keyboard-candidate-panel.latin > .dismiss-suggestions-button {
  display:inline-block;
  height: 100%;
  /*
   * the icon is 2.4rem wide but the visual space only takes up 1.4rem
   * we want 10 blank pixels to the left and 15 to the right. But the first
   * suggestion has a 0.3rem margin, so we only need to add 1.2rem to the
   * icon size.
   */
  width: 3.6rem;
  background: url('images/icon_dismiss.png') 0.5rem center /2.4rem no-repeat;
  margin: 0;
  padding: 0;
  float: left;
  visibility: visible;
}

.keyboard-candidate-panel.latin > .dismiss-suggestions-button.hide {
  visibility: hidden;
}

.keyboard-candidate-panel.latin > .suggestions-container {
  display: block;
  width: calc(100% - 3.6rem);
  float: left;
}
.keyboard-candidate-panel.latin > .suggestions-container > div {
  text-align: center;
  display: inline-block;
  height: 100%;
  margin: 0 0.3rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
}

.keyboard-candidate-panel.latin > .suggestions-container.has1 > div {
  width: calc(100% - 0.6rem);
}
.keyboard-candidate-panel.latin > .suggestions-container.has2 > div {
  width: calc(50% - 0.6rem);
}
.keyboard-candidate-panel.latin > .suggestions-container.has3 > div {
  width: calc(33% - 0.6rem);
}

/* Indicator for keyboard hiding action */
.keyboard-key[data-keycode="32"] {
  background: url('images/icon_hide_keyboard.png') right 0.4rem top 0.4rem / 1.6rem no-repeat;
}

.keyboard-key.highlighted[data-keycode="32"] {
  background-color: #4a5255;
}

/* Indicator for alternate indicator */
.alternate-indicator {
  background: url('images/icon_alternate_keyboard.png') left 50% bottom 0.4rem / 1.4rem no-repeat;
}

/*
 * Specific layout rules; When a layoutX.js has specificCssRule set to true
 * you can use layout name (Example: ar for Arabic) as a class name.
 * This is useful is cases where characters are outlining their containers.
 */

/* Arabic */
.ar .keyboard-key > .visual-wrapper > .key-element {
  font-size: 1.8rem;
}

.keyboard-key > .visual-wrapper > span[data-label="ض"],
.keyboard-key > .visual-wrapper > span[data-label="ش"]{
  margin-left:-.5rem;
}

.keyboard-key > .visual-wrapper > span[data-label="س"]{
  margin-left:-.2rem;
}

.keyboard-key > .visual-wrapper > span[data-label="ص"]{
  margin-left:-.1rem;
}

/* Bangla Probhat */
.keyboard-key > .visual-wrapper > span[data-label="ো"] {
  font-size: 1.6rem;
}

.keyboard-key > .visual-wrapper > span[data-label="া"] {
  font-size: 1.7rem;
}

/* Hindi */
.keyboard-key.hindi > .visual-wrapper > span[data-label="औ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="आ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="ओ"],
.keyboard-key.hindi > .visual-wrapper > span[data-label="ऑ"] {
  font-size: 2rem;
}

/* Tamil */
.keyboard-key.tamil > .visual-wrapper > .popup {
  width: auto;
  min-width: 4.4rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  border-radius: 2.8rem;
}

.keyboard-row button:last-child.tamil.highlighted >
  .visual-wrapper > .popup {
  left: auto;
  right: 0;
}

@media (orientation:portrait) {
  .special-key > .visual-wrapper > .key-element[data-label="அஆஇ"] {
    font-size: 1.1rem;
  }

  .keyboard-key.tamil > .visual-wrapper > .key-element {
    font-size: 2rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஹ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஊ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ா"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ூ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ே"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ெ"] {
    font-size: 1.7rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ௗ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ை"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ண"] {
    font-size: 1.4rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ஔ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ொ"],
  .keyboard-key.tamil > .visual-wrapper > span[data-label="ோ"] {
    font-size: 1.2rem;
  }

  .keyboard-key.tamil > .visual-wrapper > span[data-label="ௌ"] {
    font-size: 1.1rem;
  }
}

@media (orientation:landscape) {
  #keyboard.landscape .special-key > .visual-wrapper >
    .key-element[data-label="அஆஇ"] {
    font-size: 1.7rem;
  }

  #keyboard.landscape .keyboard-key.tamil.highlighted >
    .visual-wrapper > .popup {
    top: -7rem;
    left: calc(50% - 3.5rem);
    width: auto;
    min-width: 5.6rem;
    height: 7rem;
    line-height: 7rem;
    font-size: 3.5rem;
    border-radius: 3.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  #keyboard.landscape .keyboard-row button:last-child.tamil.highlighted >
    .visual-wrapper > .popup {
    left: auto;
    right: 0;
  }

  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ஔ"],
  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ொ"] {
    font-size: 2.5rem;
  }

  #keyboard.landscape .keyboard-key.tamil >
    .visual-wrapper > span[data-label="ௌ"] {
    font-size: 2rem;
  }
}
