@font-face {
  font-family:'Ethiopia Jiret'; src:url(font/jiret.ttf?v=2026-05-31);
}

.letterbtn, .letterbtn:hover, .letterbtnroot {
  cursor:pointer;
  font-size:16pt;
  color:#97230B;
  font-family:'Ethiopia Jiret';
  border-width:0;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 4px;
  touch-action: manipulation;
}
.letterbtn {
  background-color:Transparent;
}
.letterbtn:hover, .letterbtnroot:hover, .letterbtn:focus, .letterbtnroot:focus{
  background-color:#21F380;
  outline: none;
}
.letterbtnroot{
  background-color:Transparent;
  font-weight: bold;
  font-size: 200%;
}

#melainputtext {
  width:70%;
  max-width:760px;
  font-size:20pt;
  color:#000000;
  border: 5px solid #21F380;
  font-family:'Ethiopia Jiret';
  padding:8px;
  outline: none;
  scrollbar-base-color:transparent;
  scrollbar-track-color:transparent;
  margin-top:30px;
  margin-bottom:8px;
  border-radius: 6px;
  resize: vertical;
}

table {
  border-collapse: collapse;
}
table, td, th {
  border: 0px solid black;
}

tr {
  align:center;
}

.lettertable {
  max-width: 100%;
}

.lettertable .titletr td {
  background-color: #21F380;
}

#jsdisabled {
    font-size: 150%;
    text-align: center;
    background-color: lightblue;
}

.suggest-list {
  max-width: 760px;
  width: 70%;
  margin: 4px auto 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background-color: #f4fbf6;
  border: 1px solid #d4ecde;
  border-radius: 6px;
  min-height: 44px;
  overflow-x: auto;
  scrollbar-width: thin;
  font-family: "Arial", Gadget, sans-serif;
}
.suggest-list.off {
  display: none;
}
.suggest-list:empty::before {
  content: "ጥቆማ";
  color: #9bb5a4;
  font-size: 13pt;
  font-family: 'Ethiopia Jiret';
  padding: 0 4px;
}
.suggest-btn {
  cursor: pointer;
  font-family: 'Ethiopia Jiret';
  font-size: 16pt;
  color: #08582C;
  background-color: #fff;
  border: 1px solid #21F380;
  border-radius: 4px;
  padding: 4px 10px;
  white-space: nowrap;
  min-height: 36px;
}
.suggest-btn:hover, .suggest-btn:focus {
  background-color: #21F380;
  outline: none;
}
.suggest-btn.top {
  background-color: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
  font-weight: bold;
}
.suggest-btn.top:hover, .suggest-btn.top:focus {
  background-color: #1558b8;
  border-color: #1558b8;
  color: #fff;
}
.suggest-toggle {
  cursor: pointer;
  font-family: 'Ethiopia Jiret', "Arial", sans-serif;
  font-size: 14pt;
  border-radius: 6px;
  padding: 8px 16px;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  border: 2px solid;
  line-height: 1;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.suggest-toggle[aria-pressed="true"] {
  background-color: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}
.suggest-toggle[aria-pressed="false"] {
  background-color: #fff;
  color: #555;
  border-color: #ccc;
}
.suggest-toggle:focus { outline: 2px solid #21F380; outline-offset: 1px; }

@media (max-width: 768px) {
  #melainputtext {
    width: 95%;
    font-size: 18pt;
    margin-top: 16px;
  }
  .suggest-list {
    width: 95%;
  }
  .letterbtn, .letterbtnroot {
    font-size: 14pt;
    min-width: 32px;
    min-height: 38px;
    padding: 4px 2px;
  }
}

@media (max-width: 480px) {
  .letterbtn, .letterbtnroot {
    font-size: 12pt;
    min-width: 28px;
    min-height: 36px;
    padding: 3px 1px;
  }
  .letterbtnroot { font-size: 150%; }
}