/* 
    Created on : 09.01.2023
    Update     : 23.04.2025, 08:45
    Author     : pedro
*/

.divfix {
  clear: both;
  position: sticky;
  top: 0;
  border-radius: 5px;
  width: 100%;
  z-index: 9999;
  background-color: var(--body_background);
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;

  :hover {
    background-color: #ddd;
  }
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;

  border-radius: 2rem;
  border: 1px solid transparent;
}
#select_search {
  max-width: 10%;
}

.ui-button.btnBlue {
  background-color: #008cba;
  color: white;
  width: 100px;

  :hover {
    background-color: #f44336;
    text-align: center;
  }
}

.ui-button.btnBlue.ui-state-disabled {
  background-color: #a9a9a9;
  color: white;
  text-align: center;

  :hover {
    background-color: #f44336;
    text-align: center;
  }
}

.ui-button.btnRed {
  background-color: red;
  color: white;
  text-align: center;

  :hover {
    background-color: #f2be22;
    text-align: center;
  }
}

body.color-dark,
.divfix.color-dark {
  --color_: #f2be22;
  --body_background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.divWithImg.color-dark:hover {
  background: red;
  --color_: #f2be22;
}
.search-icon-btn.color-dark {
  background: #2b6777;
  width: 47px;
}
.search-icon-btn {
  background: #36393e;
  width: 47px;
}
hr {
  height: 2px;
  border: none;
  width: 80%;
}
.input-group {
  width: 90%;
}
.myFunkta {
  margin: 0.2em;
}
#allDialog {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#formSearch {
  margin-left: 2%;
  margin-right: 2%;
}

#btn_search,
#search-delete-btn,
#aUebersetzung,
#diktierenDE,
#diktierenES {
  background-color: white;
  border: none;
}

#btn_search {
  display: inline-block;
}

#img_search {
  width: 80%;
  /*height: 80%;*/
  text-align: center;
  vertical-align: bottom;

  aspectyy-ratio: 4/3;
  objecto-fit: contain;
  mix-blend-mod: color-burn;
}

.chkOpt {
  text-align: center;
  margin: 0 5px 0 6px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  font-size: inherit;
  width: 2em;
  height: 1em;
  box-sizing: content-box;
  border: 1px solid;
  border-radius: 1em;
  vertical-align: text-bottom;
  margin: auto;
  color: inherit;
}

.chkOpt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  box-sizing: border-box;
  width: 0.7em;
  height: 0.7em;
  margin: 0 0.15em;
  border: 1px solid;
  border-radius: 50%;
  background: currentcolor;
}

.chkOpt:checked::before {
  left: 1em;
}