html {
  /**
   * font-size is to be overwritten by JavaScript here.
   * We are abusing CSS unit "rem" as a grid to describe the size of our elements.
   * JavaScript will set 1 rem to 1/32 of the screen width when the screen is vertical,
   * and 1/64 of the screen width when the screen is landscape.
   */
  font-size: 10px;
  pointer-events: none;
}

body {
  margin: 0;
  overflow: hidden;
}

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

/* Keyboard */
#keyboard {
  position: absolute;
  bottom: 0;
  z-index: 15;
  width: 100%;
  background-color: red; /* User should not see this */
  pointer-events: auto;
  visibility: visible;
}

/* Show/hide the layout page view */
.keyboard-type-container:not([data-active]) {
  display: none;
}

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

.row2 {
  background-color: #566063;
}

.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;
}

.rows-5 > .row0 {
  background-color: #636e71;
}

.rows-5 > .row1 {
  background-color: #5e696c;
}

.rows-5 > .row2 {
  background-color: #5b6668;
}

.rows-5 > .row3 {
  background-color: #566063;
}

.rows-5 > .row4 {
  background-color: #525b5e;
}

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

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

/* Buttons: logic keys */
.keyboard-key {
  display: inline-block;
  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;

  /* In case the keys are nested, for example in the alt char menu,
     they need to be tappable. */
  pointer-events: auto;
  flex: auto;
}

.keyboard-key { /* remove this line from build/csslint/xfail.list after csslint understand CSS variables */
  --key-height: 4.5rem;
}

.rows-5 .keyboard-key { /* remove this line from build/csslint/xfail.list after csslint understand CSS variables */
  --key-height: 3.4rem;
}

.landscape .keyboard-key { /* remove this line from build/csslint/xfail.list after csslint understand CSS variables */
  --key-height: 3.8rem;
}

.landscape .rows-5 .keyboard-key { /* remove this line from build/csslint/xfail.list after csslint understand CSS variables */
  --key-height: 2.85rem;
}

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

  /* Events must originate from .keyboard-key, not its children elements */
  pointer-events: none;
}

/* 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: var(--key-height);
  font-weight: normal;
  text-align: center;
  border-right: 0.1rem solid #525b5e;
  border-left: 0.1rem solid transparent;
}

.keyboard-type-container:not(.lowercase) .key-element.lowercase {
  visibility: hidden;
}

.keyboard-type-container:not(.uppercase-only).lowercase .key-element:not(.lowercase) {
  visibility: hidden;
}

.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 .keyboard-key:first-child or :last-child */
  text-align: center;
}

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

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

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

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

/* Special rules for lowercase and uppercase popups */
.keyboard-key.highlighted.uppercase-popup .popup.uppercase {
  visibility: visible;
}

.keyboard-key.highlighted.lowercase-popup .popup.lowercase {
  visibility: visible;
}

/* Special rules for popups near the screen edge */
.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-weight: 500;
  font-size: 1.5rem;
  font-family: '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;
}

/* Page Switching key - [ABC], [Alt], and [12&] */
.keyboard-key.special-key.page-switch-key > .visual-wrapper > .key-element {
  font-size: 1.7rem;
}

/* 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 > .key-element {
  color: #677172;
}

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

/* 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:not(.highlighted) > .visual-wrapper > .key-element {
  color: #00caf2;
}

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

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

div.zh-encode-switcher-half {
  margin-top: -0.8rem;
}

div.zh-encode-switcher {
  width: 100%;
  height: calc(50%);
  padding: 0;
  float: left;
  font-size: 1.8rem;
}

div.zh-encode-switcher-selected {
  color: #00AACC;
}

/* 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 {
  position: absolute;
  top: -6rem;
  font-size: 0;
  border-radius: 3rem;
  background-color: #00aacc;
  overflow: hidden;
  text-align: left;
  /* Special hack to make the keys in the menu flow upwards. */
  transform: rotateX(180deg);
  margin-left: -1.0rem; /* because the last child is wider than others */
}

#keyboard-accent-char-menu.kbr-menu-left {
  left: auto;

  /* because the last child is wider than others, shift 1 pixel to align with
   * the key row. */
  margin-right: -0.9rem;
}

#keyboard-accent-char-menu.left-edge {
  margin-left: 0.4rem;
}

#keyboard-accent-char-menu.right-edge {
  margin-right: 0.4rem;
}

/* Non keyboard key styles in menu */
#keyboard-accent-char-menu .keyboard-key {
  transform: rotateX(180deg);
  float: left;
}

#keyboard-accent-char-menu.kbr-menu-left .keyboard-key {
  float: right;
}

/* 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;
}

#keyboard-accent-char-menu .keyboard-key > .visual-wrapper .key-element {
  background: none;
  border-radius: 0;
  border-right: 1px solid #008eab;
}

#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 {
  line-height: 6rem;
  font-weight: 500;
  color: #fff;

  /* XXX: to override the .lowercase show/hide control for each key, see Bug 1091018. */
  visibility: visible;
}

#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;
}

#keyboard-accent-char-menu.kbr-menu-left .keyboard-key > .visual-wrapper > .key-element {
  border-left: 1px solid #008eab;
  border-right: 0;
}

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

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

/* 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: #008eab;
}

/* Multi-row menu styles */
#keyboard-accent-char-menu.multi-row {
  border-radius: 0.2rem;
  margin-left: 0;
  background-color: #00a1c2;
}

#keyboard-accent-char-menu.multi-row::before {
  content: '';
  background-color: #19a8c2;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  position: absolute;
}

#keyboard-accent-char-menu.multi-row.kbr-menu-left {
  /* To make the divider align the key row */
  margin-right: 1px;
}

/* revert the expanded width because it won't have rounded corner */
#keyboard-accent-char-menu.multi-row .keyboard-key:first-child,
#keyboard-accent-char-menu.multi-row .keyboard-key:last-child {
  min-width: 2.6rem;
}

#keyboard-accent-char-menu.multi-row .keyboard-key:first-child > .visual-wrapper > .key-element,
#keyboard-accent-char-menu.multi-row .keyboard-key:last-child  > .visual-wrapper > .key-element {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Reset the margin used to align with the underneath key row, this is because
 * generally, the key in alternatives char menu would have the same width as a
 * normal key.
 */
.landscape #keyboard-accent-char-menu {
  margin-left: 0;
}

.landscape #keyboard-accent-char-menu.kbr-menu-left {
  /* Shift 1 pixel to align with the key row. */
  margin-right: 0.1rem;
}

#keyboard.full-candidate-panel {
  /* Occupy the space for the absolute-positioned full panel
     = height of the panel + top border + bottom border */
  padding-top: 3.2rem;
}

.keyboard-candidate-panel {
  background: #252220;
  padding: 0;
  border-top: 0.2rem solid #606b6e;
  border-bottom: 0.2rem solid #606b6e;
  height: 2.8rem;
  width: 100%;
  overflow: hidden;
  white-space: normal;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel {
  position: absolute;
  top: 0;
  height: -moz-calc(100% - 0.2rem);
  border-bottom: none;
  z-index: 1;
}

.keyboard-candidate-panel-toggle-button {
  z-index: 1;
  position: absolute;
  top: 0.2rem; /* width of the candidate panel border */
  right: 0;
  font-size: 0;
  height: 2.6rem; /* height of the candidate panel */
  background: #252220 image-set(url("images/icon_extend.png") 1x, url("images/icon_extend@1.5x.png") 1.5x, url("images/icon_extend@2x.png") 2x, url("images/icon_extend@2.25x.png") 2.25x) center center no-repeat;
  background-size: 2.4rem;
  min-width: 4rem;
}

.keyboard-candidate-panel-toggle-button.hide {
  visibility: hidden;
}

#keyboard.full-candidate-panel .keyboard-candidate-panel-toggle-button {
  background-image: image-set(url("images/icon_close.png") 1x, url("images/icon_close@1.5x.png") 1.5x, url("images/icon_close@2x.png") 2x, url("images/icon_close@2.25x.png") 2.25x);
  top: 0;
}

#keyboard.full-candidate-panel .suggestions-container {
  overflow-y: auto;
  height: 100%;
}

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

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

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

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

.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;
  font-size: 2rem;
  color: #a6a6a6;
  text-align: center;
  line-height: 2.8rem;
  background: transparent image-set(url("images/divider.png") 1x, url("images/divider@1.5x.png") 1.5x, url("images/divider@2x.png") 2x, url("images/divider@2.25x.png") 2.25x) right center no-repeat;
  background-size: auto 4rem;
  border: none;
  flex: auto;
}

/* Dummy element for flex box to look like a grid */
.keyboard-candidate-panel .candidate-row span:empty {
  border: none;
  background: 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;
  border-top: none;
  border-bottom: 0.1rem solid #a0a6a8;
  overflow: hidden;
}

.full-candidate-panel .keyboard-candidate-panel[data-truncated] .suggestions-container::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%;
  pointer-events: none;
}

.keyboard-candidate-panel.latin div.autocorrect span {
  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%);
}

/* A note to show on the key to indicate the alternative char */
.alt-note {
  position: absolute;
  top: 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: 3.2rem;
  font-weight: normal;
  color: #fff;
}

.keyboard-key.big-key .visual-wrapper .alt-note {
    width: 100%;
    text-align: center;
    text-indent: 4rem;
    font-size: 1.6rem;
    top: 0.2rem;
    padding-left: 1rem;
    color: #a6a6a6;
}

.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:first-child {
  text-align: right;
}
.keyboard-key:last-child {
  text-align: left;
}

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

.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;
}

/*
 * Styles for the dismiss suggestions button in the candidate panel
 */
.keyboard-candidate-panel.latin > .dismiss-suggestions-button {
  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: image-set(url("images/icon_dismiss.png") 1x, url("images/icon_dismiss@1.5x.png") 1.5x, url("images/icon_dismiss@2x.png") 2x, url("images/icon_dismiss@2.25x.png") 2.25x) 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: flex;
  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;
  flex: 1;
}

.handwriting-pad {
  background-color: #ebeced;
  margin: -1px;
  float: left;
}

/* Indicator for keyboard hiding action */
.keyboard-key[data-keycode="32"] {
  background: image-set(url("images/icon_hide_keyboard.png") 1x, url("images/icon_hide_keyboard@1.5x.png") 1.5x, url("images/icon_hide_keyboard@2x.png") 2x, url("images/icon_hide_keyboard@2.25x.png") 2.25x) 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: image-set(url("images/icon_alternate_keyboard.png") 1x, url("images/icon_alternate_keyboard@1.5x.png") 1.5x, url("images/icon_alternate_keyboard@2x.png") 2x, url("images/icon_alternate_keyboard@2.25x.png") 2.25x) left 50% bottom 0.4rem / 1.4rem no-repeat;
}

.search-icon {
  background: image-set(url("images/icon_search.png") 1x, url("images/icon_search@1.5x.png") 1.5x, url("images/icon_search@2x.png") 2x, url("images/icon_search@2.25x.png") 2.25x) left calc(50% - 0.1rem) bottom 1.2rem / 3rem no-repeat;
}

/* hide actual text for search-icon */
.keyboard-key.search-icon > .visual-wrapper > .key-element,
.keyboard-key.search-icon.highlighted > .visual-wrapper > .key-element {
  color: transparent;
}

/* With symbols on the bottom */
.keyboard-key.bottom-symbol > .visual-wrapper:after {
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #a6a6a6;
  margin-bottom: -0.3rem;
}

.keyboard-key.bottom-symbol.highlighted > .visual-wrapper:after {
  opacity: 1;
}

.keyboard-key.bottom-symbol[data-keycode="50"] > .visual-wrapper:after {
  content: 'ABC';
}

.keyboard-key.bottom-symbol[data-keycode="51"] > .visual-wrapper:after {
  content: 'DEF';
}

.keyboard-key.bottom-symbol[data-keycode="52"] > .visual-wrapper:after {
  content: 'GHI';
}

.keyboard-key.bottom-symbol[data-keycode="53"] > .visual-wrapper:after {
  content: 'JKL';
}

.keyboard-key.bottom-symbol[data-keycode="54"] > .visual-wrapper:after {
  content: 'MNO';
}

.keyboard-key.bottom-symbol[data-keycode="55"] > .visual-wrapper:after {
  content: 'PQRS';
}

.keyboard-key.bottom-symbol[data-keycode="56"] > .visual-wrapper:after {
  content: 'TUV';
}

.keyboard-key.bottom-symbol[data-keycode="57"] > .visual-wrapper:after {
  content: 'WXYZ';
}

/* All keys except 0 should be move up to 2px. */
.keyboard-key.bottom-symbol:not([data-keycode="48"]) > .visual-wrapper > .key-element {
  top: -0.2rem;
}

/* We need to put '*' in the middle, so its top is set top 8px. */
.keyboard-key.bottom-symbol > .visual-wrapper > .key-element[data-label="*"] {
  top: 0.8rem;
}

/* Based on UI spec, [Backspace] is put in middle and 16px size. */
.keyboard-key.bottom-symbol[data-keycode="8"] > .visual-wrapper > .key-element {
  top: 0;
  font-size: 1.6rem;
}

/* Based on UI spec, alt-note '+' is set bigger. */
.keyboard-key.bottom-symbol[data-keycode="48"] > .visual-wrapper > .alt-note {
  font-size: 1.8rem;
}

.emoji {
  font-family: sans-serif;
  border: none;
  background: none;
  font-size: 3rem;
  min-height: 5rem;
  min-width: 16.66vw;
  padding: 0;
  flex: 1;
}

.emoji.highlighted {
  background-color: #4a5255;
}

.swipe-panel {
  position: relative;
  height: 16.2rem;
  background-color: #606b6e;
}

.swipe-section {
  position: absolute;
  width: 100%;
  transform: translateX(99.99%);
  will-change: transform;
  display: flex;
  flex-wrap: wrap;
}

.swipe-section:first-child {
  transform: translateX(0);
}

.emoji-ime-switch {
  background: image-set(url("images/emoji/keyboard_ic_ime_emoji_off.png") 1x, url("images/emoji/keyboard_ic_ime_emoji_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_ime_emoji_off@2x.png") 2x, url("images/emoji/keyboard_ic_ime_emoji_off@2.25x.png") 2.25x) center center / 3rem no-repeat,
              image-set(url("images/icon_alternate_keyboard.png") 1x, url("images/icon_alternate_keyboard@1.5x.png") 1.5x, url("images/icon_alternate_keyboard@2x.png") 2x, url("images/icon_alternate_keyboard@2.25x.png") 2.25x) left 50% bottom 0.4rem / 1.4rem no-repeat;
}

.emoji-ime-switch.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_ime_emoji_pressed.png") 1x, url("images/emoji/keyboard_ic_ime_emoji_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_ime_emoji_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_ime_emoji_pressed@2.25x.png") 2.25x);
}

/* styles for the switching keys of different emoji categories */
.swipe-switching-buttons {
  background-color: #525a5d;
}

.swipe-switching-buttons > .active {
  background-color: #606b6e;
  border-bottom: 0.2rem solid #00aacb;
}

.swipe-switching-buttons > .keyboard-key > .visual-wrapper > .key-element {
  border-right: 0.1rem solid transparent;
}

.emoji-recent {
  background: #576367 image-set(url("images/emoji/keyboard_ic_recent_off.png") 1x, url("images/emoji/keyboard_ic_recent_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_recent_off@2x.png") 2x, url("images/emoji/keyboard_ic_recent_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.keyboard-key.emoji-recent > .visual-wrapper > .key-element {
  border-right: 0.1rem solid transparent;
  border-left: 0.1rem solid #525a5d;
}

.emoji-recent.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_recent_pressed.png") 1x, url("images/emoji/keyboard_ic_recent_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_recent_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_recent_pressed@2.25x.png") 2.25x);
}

.emoji-people {
  background: #576367 image-set(url("images/emoji/keyboard_ic_ppl_off.png") 1x, url("images/emoji/keyboard_ic_ppl_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_ppl_off@2x.png") 2x, url("images/emoji/keyboard_ic_ppl_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.emoji-people.active {
  background-image: image-set(url("images/emoji/keyboard_ic_ppl_on.png") 1x, url("images/emoji/keyboard_ic_ppl_on@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_ppl_on@2x.png") 2x, url("images/emoji/keyboard_ic_ppl_on@2.25x.png") 2.25x);
}

.emoji-people.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_ppl_pressed.png") 1x, url("images/emoji/keyboard_ic_ppl_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_ppl_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_ppl_pressed@2.25x.png") 2.25x);
}

.emoji-nature {
  background: #576367 image-set(url("images/emoji/keyboard_ic_nature_off.png") 1x, url("images/emoji/keyboard_ic_nature_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_nature_off@2x.png") 2x, url("images/emoji/keyboard_ic_nature_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.emoji-nature.active {
  background-image: image-set(url("images/emoji/keyboard_ic_nature_on.png") 1x, url("images/emoji/keyboard_ic_nature_on@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_nature_on@2x.png") 2x, url("images/emoji/keyboard_ic_nature_on@2.25x.png") 2.25x);
}

.emoji-nature.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_nature_pressed.png") 1x, url("images/emoji/keyboard_ic_nature_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_nature_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_nature_pressed@2.25x.png") 2.25x);
}

.emoji-object {
  background: #576367 image-set(url("images/emoji/keyboard_ic_object_off.png") 1x, url("images/emoji/keyboard_ic_object_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_object_off@2x.png") 2x, url("images/emoji/keyboard_ic_object_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.emoji-object.active {
  background-image: image-set(url("images/emoji/keyboard_ic_object_on.png") 1x, url("images/emoji/keyboard_ic_object_on@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_object_on@2x.png") 2x, url("images/emoji/keyboard_ic_object_on@2.25x.png") 2.25x);
}

.emoji-object.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_object_pressed.png") 1x, url("images/emoji/keyboard_ic_object_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_object_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_object_pressed@2.25x.png") 2.25x);
}

.emoji-place {
  background: #576367 image-set(url("images/emoji/keyboard_ic_place_off.png") 1x, url("images/emoji/keyboard_ic_place_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_place_off@2x.png") 2x, url("images/emoji/keyboard_ic_place_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.emoji-place.active {
  background-image: image-set(url("images/emoji/keyboard_ic_place_on.png") 1x, url("images/emoji/keyboard_ic_place_on@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_place_on@2x.png") 2x, url("images/emoji/keyboard_ic_place_on@2.25x.png") 2.25x);
}

.emoji-place.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_place_pressed.png") 1x, url("images/emoji/keyboard_ic_place_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_place_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_place_pressed@2.25x.png") 2.25x);
}

.emoji-symbol {
  background: #576367 image-set(url("images/emoji/keyboard_ic_symbol_off.png") 1x, url("images/emoji/keyboard_ic_symbol_off@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_symbol_off@2x.png") 2x, url("images/emoji/keyboard_ic_symbol_off@2.25x.png") 2.25x) center center / 3rem no-repeat;
}

.emoji-symbol.active {
  background-image: image-set(url("images/emoji/keyboard_ic_symbol_on.png") 1x, url("images/emoji/keyboard_ic_symbol_on@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_symbol_on@2x.png") 2x, url("images/emoji/keyboard_ic_symbol_on@2.25x.png") 2.25x);
}

.emoji-symbol.highlighted {
  background-image: image-set(url("images/emoji/keyboard_ic_symbol_pressed.png") 1x, url("images/emoji/keyboard_ic_symbol_pressed@1.5x.png") 1.5x, url("images/emoji/keyboard_ic_symbol_pressed@2x.png") 2x, url("images/emoji/keyboard_ic_symbol_pressed@2.25x.png") 2.25x);
}

.keyboard-key.emoji-symbol > .visual-wrapper > .key-element {
  border-right: 0.1rem solid #525a5d ;
  border-left: 0.1rem solid transparent;
}

/* Section indicator for emoji sections */
.section-indicator-container {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 1.7rem;
  text-align: center;
}

.section-indicator {
  display: inline-block;
  background-color: #545d60;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  margin: 0.7rem 0.3rem 0.7rem 0;
}

.section-indicator.active {
  background-color: #3e4446;
}

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

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

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

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

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

/* Bangla Probhat */
.bn-Probhat .keyboard-key:not(.special-key) > .visual-wrapper > .key-element[data-label="ো"] {
  font-size: 1.6rem;
}

.bn-Probhat .keyboard-key:not(.special-key) > .visual-wrapper > .key-element[data-label="া"] {
  font-size: 1.7rem;
}

/* Dzongkha */
.dz-BT .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2rem;
}
.dz-BT .keyboard-key > .visual-wrapper > .key-element[data-label="༃"],
.dz-BT .keyboard-key > .visual-wrapper > .key-element[data-label="༼"],
.dz-BT .keyboard-key > .visual-wrapper > .key-element[data-label="༽"] {
  font-size: 1.6rem;
}

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

/* Myanmar */
.my .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2.2rem;
}
.landscape .my .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2rem;
}

/* Persian */
.fa .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 1.9rem;
}

.fa .keyboard-type-container > .visual-wrapper > .key-element[data-label="﷼"] {
  font-size: 1.9rem;
}

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

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

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

.fa .keyboard-key > .visual-wrapper > .key-element[data-label="◂┇▸"] {
  font-size: 1.2rem;
}

/* Tamil */
.ta .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2.2rem;
}

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

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

.ta .special-key > .visual-wrapper > .key-element[data-label="அஆஇ"] {
  font-size: 1.1rem;
}

.landscape .ta .special-key > .visual-wrapper > .key-element[data-label="அஆஇ"] {
  font-size: 1.7rem;
}

.landscape .ta .keyboard-key.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;
}

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

.landscape .ta .keyboard-key > .visual-wrapper > .key-element[data-label="ஔ"],
.landscape .ta .keyboard-key > .visual-wrapper > .key-element[data-label="ொ"] {
  font-size: 2.5rem;
}
.landscape .ta .keyboard-key > .visual-wrapper > .key-element[data-label="ௌ"] {
  font-size: 2rem;
}

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

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

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

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

/* Telugu */
.te .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2rem;
}
.portrait .te .keyboard-key > .visual-wrapper > .key-element[data-label="ీఊ"] {
  font-size: 1.4rem;
}
.portrait .te .keyboard-key > .visual-wrapper > .key-element[data-label="ఋ"] {
  font-size: 1.6rem;
}

/* Chinese Zhuyin */
.zh-Hant-Zhuyin .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
  font-size: 2rem;
}