keyboard.css

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

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

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

/* Visible keys */
.keyboard-key > .visual-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 4.3rem;
  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: 4.3rem;
  font-weight: normal;
  text-align: center;
  border-right: 0.1rem solid #525b5e;
  border-left: 0.1rem solid transparent;
}

.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.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;
  visibility: visible;
}


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

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

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

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

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

#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.
 */
#keyboard.landscape #keyboard-accent-char-menu {
  margin-left: 0;
}

#keyboard.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 {
  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 4rem;
  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%);
}

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

.search-icon {
  background: url('images/icon_search.png') 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;
}

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

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

.zh-Hant-Zhuyin .keyboard-row.row0 {
  background-color: #636e71;
}

.zh-Hant-Zhuyin .keyboard-row.row1 {
  background-color: #5e696c;
}

.zh-Hant-Zhuyin .keyboard-row.row2 {
  background-color: #5b6668;
}

.zh-Hant-Zhuyin .keyboard-row.row3 {
  background-color: #566063;
}

.zh-Hant-Zhuyin .keyboard-row.row4 {
  background-color: #525b5e;
}

.zh-Hant-Zhuyin .keyboard-row.row4 > .keyboard-key > .visual-wrapper > .key-element {
  border-right-color: #434b4d;
}

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

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