/*
  Project Name: Kelime Keyboard
  Author: Mert Donmezyurek
  Author URL: https://mertdy.com
  Date: 11 Jan 2021
*/

@font-face {
  font-family: 'Adobe Arabic Bold';
  font-style: normal;
  font-weight: 400;
  src: local('Adobe Arabic Bold'), url('./AdobeArabic.ttf') format('truetype');
}

/* Container'a min-height - sunucuda height:0 sorununu önler (Simple-keyboard render için gerekli) */
.kelime-keyboard {
  min-height: 280px;
}

.kelime-keyboard-container {
  background-color: #ececec;
  padding: 5px;
  border-radius: 10px;
  min-height: 260px;
}

.kelime-keyboard-toolbar {
  font-family: Arial, Helvetica, sans-serif;
  color: #707070;
  max-width: calc(100% - 35px);
  display: inline-block;
}

select.kelime-keyboard-selector {
  margin: 15px 5px;
  border: 0;
  font-size: 16px;
  border-radius: 0;
  background-color: transparent;
  color: #707070;
  cursor: pointer;

  /* change select arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 12px;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: calc(100% + 5px);
  background-position-y: -5px;
}
select.kelime-keyboard-selector:focus,
select.kelime-keyboard-selector:active {
  outline: 0;
  border-bottom-color: red;
}

.kelime-keyboard-detail-text {
  font-size: 15px;
  font-weight: lighter;
  margin-left: 10px;
}

.kelime-keyboard-close-button {
  font-family: Arial, Helvetica, sans-serif;
  color: #eee;
  float: right;
  margin: 10px;
  font-size: 18px;
  cursor: pointer;
  padding: 3px;
  display: none;
}

/* Kelime keyboard container için görünürlük - diğer CSS'lerden önce */
.kelime-keyboard {
  display: block !important; /* Klavye container'ı her zaman görünür */
}

.kelime-keyboard-container {
  display: block !important; /* Container her zaman görünür */
}

.simple-keyboard {
  /* max-width: calc(100% - 10px); */
  display: block !important; /* Klavye her zaman görünür olmalı - style.css'deki display:none'u override et */
  position: relative !important; /* style.css'deki absolute'u override et */
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}

.simple-keyboard.hg-theme-default.customTheme {
  background-color: #ececec;
}

.simple-keyboard.hg-theme-default.arabicTheme {
  background-color: #ececec;
  font-family: 'Adobe Arabic Bold', Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.simple-keyboard.hg-layout-default .hg-button {
  border: 1px solid #666;
  color: #707070;
}

.simple-keyboard.hg-layout-default .hg-button.hg-red {
  background: rgb(255, 0, 0, 0.7);
  color: white;
}

.simple-keyboard.hg-layout-default .hg-button.hg-top-buttons {
  border: 1px solid #eee;
  color: #555555;
}

.simple-keyboard.hg-layout-default .hg-button.hg-question-mark {
  background: rgb(236, 227, 146);
}

.simple-keyboard.hg-layout-default .hg-button.hg-asterisk {
  background: rgb(252, 158, 158);
}

.simple-keyboard.hg-layout-default .hg-button.hg-square-brackets {
  background: rgb(152, 216, 152);
}

.simple-keyboard.hg-layout-default .hg-button.hg-icon {
  max-width: 4em;
}