third_party/google_input_tools/src/chrome/os/inputview/common.css

.inputview-layoutview {
  position: relative;
  -webkit-user-select: none;
}
.inputview-view {
  border-left: 1px solid rgba(55, 71, 79, 0.1);
  border-right: 1px solid rgba(55, 71, 79, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.inputview-space-wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  font-size: 18px;
  color: rgba(55, 71, 79, 0.7);
}
.inputview-space-grey-bg {
  background-color: rgba(55, 71, 79, 0.15);
}
.inputview-space-grey-bg.inputview-element-highlight {
  background-color: rgba(55, 71, 79, 0.6);
}
.inputview-canvasview,
.inputview-skv {
  display: inline-block;
  overflow: hidden;
}
.inputview-sk {
  margin: 6px;
  position: relative;
}
.inputview-a11y .inputview-sk {
  margin: 2px 3px 3px 2px;
}
#us-compact-symbol .inputview-sk,
#us-compact-more .inputview-sk,
#us-compact-qwerty .inputview-sk {
  margin: 8px;
}
#us-compact-qwerty #Globe {
  margin: 5px 0 5px 0;
}
.inputview-character {
  position: absolute;
  text-align: center;
  color: rgba(55, 71, 89, 0.6);
  font-size: 12px;
  display: inline-block;
}
.inputview-a11y .inputview-character {
  font-size: 10px;
}
.inputview-ch {
  color: #37474f;
  font-size: 23px;
}
.inputview-digit-character.inputview-ch {
  font-size: 20px;
}
.inputview-font-small.inputview-special-key-name,
.inputview-font-small.inputview-compact-key,
.inputview-a11y .inputview-digit-character.inputview-ch {
  font-size: 17px;
}
.inputview-a11y .inputview-ch {
  font-size: 17px;
}
.inputview-vertical {
  display: inline-block;
  overflow: hidden;
}
.inputview-linear {
  display: inline-block;
}
.inputview-extended-transition {
  transition: margin-left 0.2s;
}
.inputview-container {
  position: fixed;
  bottom: 0;
  left: 0;
  border: 1px solid #eeeeee;
  background-color: #ECEFF1;
  -webkit-user-select: none;
  cursor: default;
}
.inputview-font {
  font-family: Roboto2, Roboto, Noto Sans, Sans-Serif;
}
.inputview-font[lang=am] {
  font-family: Roboto2, Roboto, Noto Sans Armenian, Sans-Serif;
}
.inputview-font[lang=il] {
  font-family: Roboto2, Roboto, Noto Sans Hebrew, Sans-Serif;
}
.inputview-font[lang=jp] {
  font-family: Roboto2, Roboto, Noto Sans CJK JP, Sans-Serif;
}
.inputview-font[lang=ar] {
  font-family: Roboto2, Roboto, Noto Arabic Naskh ui, Sans-Serif;
}
.inputview-font[lang=bn] {
  font-family: Roboto2, Roboto, Noto Sans Bengali, Sans-Serif;
}
.inputview-font[lang=ethi] {
  font-family: Roboto2, Roboto, Noto Sans Ethiopic, Sans-Serif;
}
.inputview-font[lang=fa] {
  font-family: Roboto2, Roboto, Noto Arabic Naskh ui, Sans-Serif;
}
.inputview-font[lang=gu] {
  font-family: Roboto2, Roboto, Noto Sans Gujarati, Lohit Gujarati, Sans-Serif;
}
.inputview-font[lang=kn] {
  font-family: Roboto2, Roboto, Noto Sans Kannada, Lohit Kannada, Sans-Serif;
}
.inputview-font[lang=ml] {
  font-family: Roboto2, Roboto, Noto Sans Malayalam, Lohit Malayalam, Sans-Serif;
}
.inputview-font[lang=ta] {
  font-family: Roboto2, Roboto, Noto Sans Tamil, Lohit Tamil, Sans-Serif;
}
.inputview-font[lang=te] {
  font-family: Roboto2, Roboto, Noto Sans Telugu, Lohit Telugu, Sans-Serif;
}
.inputview-font[lang=th] {
  font-family: Roboto2, Roboto, Noto Sans Thai, Sans-Serif;
}
.inputview-font[lang=zh-CN] {
  font-family: Roboto2, Roboto, Noto Sans CJK SC, Droid Sans Fallback, Sans-Serif;
}
.inputview-font[lang=zh-TW],
.inputview-font[lang=zh-HK] {
  font-family: Roboto2, Roboto, Noto Sans CJK TC, Droid Sans Fallback, Sans-Serif;
}
.inputview-font[lang=kr] {
  font-family: Roboto2, Roboto, Noto Sans CJK KR, Sans-Serif;
}
.inputview-emoji-font {
  font-family: Noto Color Emoji, Noto Emoji, Droid Emoji;
}
.inputview-emoticon {
  font-family: Noto Color Emoji, Noto Emoji, Droid Emoji;
}
.inputview-modifier {
  display: table-cell;
  vertical-align: middle;
  color: rgba(55, 71, 89, 0.8);
  font-size: 16px;
  text-align: center;
  position: relative;
}
.inputview-a11y .inputview-modifier {
  font-size: 17px;
}
.inputview-menu-list-indicator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  width: 20%;
}
.inputview-checked-menu-list {
  background-image: url('images/check_in_menu.png');
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 18px 15px;
  box-sizing: border-box;
  font-weight: bold;
}
.inputview-checked-menu-list .inputview-menu-list-name {
  color: #37474f;
  font-weight: bold;
  font-size: 16px;
}
.inputview-menu-list-name {
  height: 100%;
  width: 80%;
  font-size: 14px;
  color: rgba(55, 71, 89, .6);
  overflow: hidden;
}
.inputview-menu-list-indicator-name {
  height: 90%;
  text-align: center;
}
.inputview-menu-list-indicator-name,
.inputview-menu-list-name div {
  line-height: 3;
}
.inputview-ime-list-container {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.inputview-ime-list-container .inputview-menu-list-item {
  border-bottom: solid 1px rgba(55, 71, 89, .2);
  box-sizing: border-box;
}
.inputview-menu-list-item {
  -webkit-box-orient: horizontal;
  padding-left: 25px;
  display: -webkit-box;
  font-size: 16px;
  width: 100%;
}
.inputview-menu-footer-item {
  position: relative;
}
.inputview-menu-footer-item:not(:last-child):after {
  background-color: #cccccc;
  content: '';
  height: 70%;
  position: absolute;
  right: 0;
  top: 15%;
  width: 1px;
}
.inputview-menu-footer-emoji-button {
  background: url('images/emoji.png') no-repeat center;
  background-size: 18px;
  height: 100%;
}
.inputview-menu-footer-handwriting-button {
  background: url('images/handwriting_access.png') no-repeat center;
  background-size: 18px;
  height: 100%;
}
.inputview-menu-footer-setting-button {
  background: url('images/setting.png') no-repeat center;
  background-size: 18px;
  height: 100%;
}
.inputview-menu-footer {
  -webkit-box-orient: horizontal;
  background: rgba(55, 71, 89, .08);
  display: -webkit-box;
}
.inputview-gesture-canvas-view {
  /* Overlap */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.inputview-gesture-editing-finger-tracker {
  background: url('images/gesture_handle_200.png') no-repeat center;
  background-size: 64px;
  position: fixed;
  z-index: 1000;
}
.inputview-gesture-ripple {
  background: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  opacity: 0;
  position: fixed;
  z-index: 998;
}
.inputview-globe-icon {
  background: transparent url('images/globe.png') 0 0 / 20px 20px no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.inputview-menu-view,
.inputview-altdata-view {
  -webkit-box-shadow: 0 0 6px rgba(204, 204, 204, 0.65),
                      0 0 2px rgba(136, 136, 136, 0.65),
                      0 0 6px rgba(204, 204, 204, 0.65),
                      0 0 6px rgba(204, 204, 204, 0.65);
  background-color: white;
  cursor: default;
  position: fixed;
  z-index: 999;
}
.inputview-altdata-separator {
  height: 20px;
  border-left: 1px solid #ddd;
  position: relative;
  display: inline-block;
}
.inputview-swipe-view {
  background-color: rgba(0, 0, 0, 0);
  display: inline-flex;
  position: fixed;
  z-index: 999;
}
.inputview-swipe-separator {
  display: inline;
  opacity: 0;
  position: relative;
}
.inputview-swipe-key {
  display: inline;
  vertical-align: middle;
  opacity: 0;
  position: relative;
}
.inputview-altdata-key {
  display: table-cell;
  font-size: 23px;
  color: #111111;
  vertical-align: middle;
  text-align: center;
}
.inputview-a11y .inputview-altdata-key {
  font-size: 18px;
}
.inputview-candidate.inputview-candidate-default {
  color: #111111;
}
.inputview-candidate.inputview-candidate-autocorrect {
  font-weight: bold;
  color: #111111;
}
.inputview-candidate.inputview-candidate-number {
  font-size: 25px;
}
.inputview-candidate-view {
  overflow: hidden;
  display: table-cell;
}
.inputview-candidate {
  display: table-cell;
  font-size: 18px;
  color: #555555;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
}
.inputview-a11y .inputview-candidate {
  font-size: 12px;
}
.inputview-toolbar-separator,
.inputview-candidate-separator {
  border-left: 1px solid #ddd;
  position: relative;
  display: inline-block;
}
.inputview-table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.inputview-title {
  font-size: 16px;
  color: #AAAAAA;
}
.inputview-special-key-name {
  display: block;
}
.inputview-modifier-state-icon {
  background-image: url('images/modifier-off.png');
  background-repeat: no-repeat;
  background-size: 16px 4px;
  display: inline-block;
  width: 16px;
  height: 4px;
}
.inputview-modifier-state-icon.inputview-modifier-on {
  background: url('images/modifier-on.png');
}
.inputview-modifier-state-icon.inputview-hold {
  -webkit-box-shadow: 0 0 5px 1px #397FFB;
  opacity: 0.9;
}
.inputview-track-cover,
.inputview-floating-cover,
.inputview-altdata-cover {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  opacity: 0.5;
  z-index: 1;
}
.inputview-track-cover {
  background-color: #eceff1;
  backface-visibility: hidden;
  opacity: 0.9;
  overflow: hidden;
  top: 43px;
  z-index: 998;
}
.inputview-track-cover.inputview-numeric {
  top: 0;
}
.inputview-arrow-key {
  display: inline-block;
  height: 13.5px;
}
.inputview-up-key {
  background-image: transparent url('images/up.png') 0 0/16px 13.5px no-repeat;
  width: 16px;
}
.inputview-down-key {
  background: transparent url('images/down.png') 0 0/16px 13.5px no-repeat;
  width: 16px;
}
.inputview-left-key {
  background: transparent url('images/left.png') 0 0/8.5px 13.5px no-repeat;
  width: 9px;
}
.inputview-right-key {
  background: transparent url('images/right.png') 0 0/9px 13.5px no-repeat;
  width: 9px;
}
.inputview-page-up-icon {
  background: transparent url('images/arrow_up_active.png') 0 0 no-repeat;
  background-size: 10px 6.5px;
  width: 10px;
  height: 6.5px;
  display: inline-block;
}
.inputview-page-navi-inactive .inputview-page-up-icon {
  background: transparent url('images/arrow_up_inactive.png') 0 0 no-repeat;
  background-size: 10px 6.5px;
}
.inputview-page-down-icon {
  background: transparent url('images/arrow_down_active.png') 0 0 no-repeat;
  background-size: 10px 6.5px;
  width: 10px;
  height: 6.5px;
  display: inline-block;
}
.inputview-page-navi-inactive .inputview-page-down-icon {
  background: transparent url('images/arrow_down_inactive.png') 0 0 no-repeat;
  background-size: 10px 6.5px;
}
.inputview-menu-icon {
  background: transparent url('images/3dots.png') 0 0/4px 17px no-repeat;
  display: inline-block;
  width: 4px;
  height: 17px;
}
.inputview-hide-keyboard-icon {
  background: transparent url('images/hidekeyboard.png') 0 0/32px 32px no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}
.inputview-candidate.inputview-candidate-highlight,
.inputview-toolbar-button.inputview-candidate-highlight,
.inputview-element-highlight,
.inputview-candidate.inputview-candidate-highlight {
  background-color: #dddddd;
}
.inputview-menu-footer-item.inputview-element-highlight {
  background-color: #cccccc;
}
.inputview-backspace-icon {
  background: transparent url('images/backspace.png');
  background-size: 24px 24px;
  display: inline-block;
  height: 24px;
  width: 24px;
}
.inputview-enter-icon {
  background: transparent url('images/enter.png');
  background-size: 40px 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
}
.inputview-special-key-highlight .inputview-enter-icon {
  background: transparent url('images/enter_pressed.png');
  background-size: 40px 40px;
}
.inputview-space-icon {
  background: transparent url('images/space-key.png');
  background-size: 30px 7.5px;
  display: inline-block;
  width: 30px;
  height: 7.5px;
}
.inputview-shift-icon {
  background: transparent url('images/shift.png');
  background-size: 25px 22px;
  display: inline-block;
  width: 25px;
  height: 22px;
}
.inputview-special-key-highlight,
.inputview-special-key-highlight .inputview-compact-key,
.inputview-element-highlight {
  background-color: rgba(55, 71, 79, 0.15);
}
.inputview-element-highlight.inputview-container {
  background-color: #ECEFF1;
}
.inputview-special-key-disable-bg-hl.inputview-special-key-highlight {
  background-color: transparent;
}
.inputview-special-key-highlight .inputview-shift-icon {
  background: transparent url('images/shift-pressed.png');
  background-size: 25px 22px;
}
.inputview-functional-key-sticky .inputview-shift-icon {
  background: transparent url('images/shift-press-hold.png');
  background-size: 25px 22px;
}
.inputview-tab-icon {
  background: transparent url('images/tab_in_fullsize.png');
  background-size: 21px 12px;
  display: inline-block;
  width: 21px;
  height: 12px;
}
.inputview-capslock-dot {
  background-color: #ccc;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 8px;
  right: 8px;
}
.inputview-capslock-dot-highlight {
  background-color: #4285f4;
}
.inputview-hint-text {
  font-size: 16px;
  color: rgba(55, 71, 89, 0.6);
}
.inputview-inline-div {
  display: inline-block;
}
.inputview-compact-key {
  font-size: 28px;
  color: #37474f;
}
.inputview-compact-switcher {
  background: transparent url('images/compact.png');
  background-size: 19px 14px;
  display: inline-block;
  width: 19px;
  height: 14px;
}
.inputview-regular-switcher {
  background: transparent url('images/regular_size.png');
  background-size: 19px 14px;
  display: inline-block;
  width: 19px;
  height: 14px;
}
#Space {
  color: rgba(55, 71, 89, 0.6);
  font-size: 18px;
}
#Menu {
  font-weight: bold;
  margin-left: 0 !important;
}
.inputview-a11y #Globe {
  margin: 2px 0 3px 0;
}
#Globe {
  margin: 3px 0 4px 0;
}
#Globe:after {
  background-color: #cccccc;
  content: '';
  height: 50%;
  position: absolute;
  right: 0;
  top: 25%;
  width: 1px;
}
.inputview-three-candidates {
  text-align: center;
  vertical-align: middle;
}
.inputview-candidate-ic {
  display: inline-block;
}

.inputview-shrink-candidates-icon {
  background: transparent url('images/hide_candidates.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-expand-candidates-icon {
  background: transparent url('images/show_candidates.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-copy-icon {
  background: transparent url('images/copy.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-cut-icon {
  background: transparent url('images/cut.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-paste-icon {
  background: transparent url('images/paste.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-bold-icon {
  background: transparent url('images/bold.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-italics-icon {
  background: transparent url('images/italic.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-underline-icon {
  background: transparent url('images/underline.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-select-all-icon {
  background: transparent url('images/select_all.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-redo-icon {
  background: transparent url('images/redo.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

.inputview-undo-icon {
  background: transparent url('images/undo.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}

/**
 * The following css style is for handwriting panel,
 * please keep it in the end of the file
 */
.inputview-handwriting {
  font-size: 16px;
}

.inputview-a11y.inputview-handwriting .inputview-modifier {
  font-size: 16px;
}

.inputview-handwriting-switcher {
  background: url('images/handwriting-circle.png');
  background-size: 12px 12px;
  display: inline-block;
  width: 12px;
  height: 12px;
}

.inputview-handwriting-back {
  float: right;
  color: #111111;
  text-align: center;
}

.inputview-canvas {
  cursor: url('images/handwriting-circle.png') 12 12, auto;
}
#candidateView {
  background-color: #E4E7E9;
}
.inputview-handwriting-network-error {
  background: no-repeat url('images/error.png');
  padding: 0 0 0 50px;
  position: absolute;
  width: 600px;
  height: 100px;
}

.inputview-handwriting-privacy-cover {
  position: relative;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  z-index: 1;
}

.inputview-voice-privacy-info,
.inputview-handwriting-privacy-info {
  position: absolute;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  background-color: white;
  padding: 20px;
}

.inputview-voice-privacy-info > :first-child,
.inputview-handwriting-privacy-info > :first-child {
  color: #37474f;
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
}

.inputview-voice-got-it,
.inputview-handwriting-got-it {
  color: #ffffff;
  background-color: #4285f4;
  float: right;
  padding: 10px 25px;
  border-radius: 6px;
  font-size: 16px;
  cursor:pointer;
}

.inputview-handwriting-privacy-info-hidden {
  visibility: hidden;
  opacity: 0;
  transition: all 2s ease;
}

.inputview-jp-ime-switch {
  text-align: left;
  font-size: 12px;
  display: inline-block;
}
.inputview-switcher-chinese {
  display: inline-block;
  background: url('images/cn.png') no-repeat center;
  background-size: 50px 20px;
  height: 20px;
  width: 50px;
}
.inputview-switcher-english {
  display: inline-block;
  background: url('images/en.png') no-repeat center;
  background-size: 50px 20px;
  height: 20px;
  width: 50px;
}
.inputview-pinyin .inputview-en-switcher-default {
  display: inline-block;
  background: url('images/cn.png') no-repeat center;
  background-size: 40px 16px;
  height: 16px;
  width: 40px;
}
.inputview-pinyin .inputview-en-switcher-english {
  display: inline-block;
  background: url('images/en.png') no-repeat center;
  background-size: 40px 16px;
  height: 16px;
  width: 40px;
}
.inputview-portrait .inputview-select-knob-left div,
.inputview-portrait .inputview-select-knob-right div {
  opacity: 0;
}
.inputview-select-knob-left,
.inputview-select-knob-right {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.inputview-select-knob-left {
  left: 0px;
}
/* Anchor to the center of the column */
.inputview-select-knob-right > div,
.inputview-select-knob-left > div {
  width: 100%;
  position: relative;
  height: 1px;
  top: 50%;
  left: 0;
}
/* Semi-circular knob */
.inputview-select-knob-left > div > div,
.inputview-select-knob-right > div > div {
  width : 100%;
  height: 75px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 12px;
  -webkit-transform: translateY(-37.5px);
}
.inputview-select-knob-left > div > div {
  background-image: url(images/select_right.png);
  background-position-x: 12px;
}
.inputview-select-knob-right > div > div {
  background-image: url(images/select_left.png);
  background-position-x: 14px;
}

.inputview-candidate-internal-wrapper {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: inline-block;
}
.inputview-candidate-tooltip .inputview-candidate-internal-wrapper {
  font-size: 20px;
  color: #4285f4;
}
.inputview-switcher-key-name {
  font-size: 20px;
  color: rgba(55, 71, 89, .8);
}
.inputview-back-to-keyboard {
  background: url('images/back_to_keyboard.png') no-repeat center;
  background-size: 26px 15px;
  width: 26px;
  height: 15px;
  display: inline-block;
}
#hwt {
  border-left: 1.5px solid rgba(55, 71, 79, 0.1);
  border-right: 1.5px solid rgba(55, 71, 79, 0.1);
}
.inputview-toolbar-button {
  float: right;
}
.inputview-toolbar-button.float-left {
  float: left;
}
.inputview-voice-btn {
  float: right;
}
.inputview-ime-list-container::-webkit-scrollbar-thumb {
  background-color: #c9ced1;
}
.inputview-ime-list-container::-webkit-scrollbar {
  width: 12px;
}
.inputview-drag-button {
  background: transparent url('images/draggable_area.png') 0 0/17px 16.5px no-repeat;
  height: 17px;
  width: 16.5px;
}