.nikud-wrap * {
  box-sizing: border-box;
}

.nikud-wrap {
  display: inline-block;
  position: relative;
}

.nikud-wrap input,
.nikud-wrap textarea {
  font-family: SBL Hebrew, Narkisim, David, monospace;
}

.nikud-keyboard {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  justify-content: space-around;
  width: 415px;
  text-align: center;
  background: #d0d5db;
  padding: 5px 2px 6px;
  z-index: 9999;
  user-select: none;
  font-size: 30px;
  border-radius: 2px;
  transition: opacity 0.2s 0.2s, visibility 0s 0.4s;
}

.nikud-keyboard:active,
.nikud-wrap input:focus + .nikud-keyboard,
.nikud-wrap textarea:focus + .nikud-keyboard {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

.nikud-key {
  display: inline-block;
  width: 30px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px #999, inset 0 0 #999;
  transition: box-shadow 0.1s, background 0.1s, color 0.1s;
}

#nikud-key-dagesh {
  margin-right: 5px;
}

.nikud-key.-disabled {
  background: #eee;
  color: #999;
}

.nikud-key:active:not(.-disabled) {
  box-shadow: 0 0 #999, inset 0 1px 0 1px #999;
}

.nikud-key span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 38px;
  vertical-align: top;
  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  background-size: auto 31px;
  color: #ccc;
  transition: transform 0.1s;
}

.nikud-key:active:not(.-disabled) span {
  transform: translateY(1px);
}

.nikud-key#nikud-key-kamatz span {
  background-position: -413px 5.5px;
}

.nikud-key#nikud-key-patach span {
  background-position: -374px 5.5px;
}

.nikud-key#nikud-key-tzere span {
  background-position: -335px 5.5px;
}

.nikud-key#nikud-key-segol span {
  background-position: -297px 5.5px;
}

.nikud-key#nikud-key-hiriq span {
  background-position: -255px 5.5px;
}

.nikud-key#nikud-key-holam span {
  background-position: -223px 5.5px;
}

.nikud-key#nikud-key-kubutz span {
  background-position: -182px 5.5px;
}

.nikud-key#nikud-key-shva span {
  background-position: -140px 5.5px;
}

.nikud-key#nikud-key-Hataf-kamatz span {
  background-position: -104px 5.5px;
}

.nikud-key#nikud-key-Hataf-patach span {
  background-position: -64px 5.5px;
}

.nikud-key#nikud-key-Hataf-segol span {
  background-position: -24px 5.5px;
}

.nikud-key#nikud-key-dagesh span {
  background-position: 14px 5.5px;
}