/* Phone keyboard (ra-mobile-keyboard.js): full width, pinned to the bottom
   of the screen, Gboard-like proportions. Hidden from 768px up, where the
   desktop keyboard (ra-keyboard.css) fits and is used instead. */
.ra-mk {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040; /* above the navbar (1030), below Bootstrap modals */
  padding: 6px 3px calc(6px + env(safe-area-inset-bottom));
  background: #e8eaed;
  border-top: 1px solid #d4d4d4;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.ra-mk-row {
  display: flex;
  direction: ltr;
  margin-bottom: 6px;
}
.ra-mk-row:last-child {
  margin-bottom: 0;
}
.ra-mk-key {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  color: #202124;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
}
.ra-mk-key:active {
  background: #d2d5da;
}
.ra-mk-fn {
  background: #d2e3fc;
  font-size: 18px;
}
.ra-mk-on {
  background: #337ab7; /* latched, like btn-primary */
  color: #fff;
}
.ra-mk-mark {
  color: #e0115f; /* the desktop keyboard's Arabic character colour */
}
.ra-mk-dim {
  color: #b0b4ba;
}
.ra-mk-wide {
  flex-grow: 1.5;
  font-size: 15px;
}
.ra-mk-space {
  flex-grow: 5;
  color: #5f6368;
  font-size: 14px;
}
.ra-mk-enter {
  background: #5bc0de; /* Bootstrap btn-info, like the "Найти" button */
  color: #fff;
}
.ra-mk-bar {
  text-align: center;
}
.ra-mk-restore {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #337ab7;
  font-size: 15px;
}

@media (max-width: 767px) {
  #ra-keyboard {
    display: none;
  }
}
@media (min-width: 768px) {
  .ra-mk {
    display: none !important;
  }
}