html {
  scroll-behavior: smooth;
}
html, body {
  overscroll-behavior-y: contain;
}

#tabela,
td,
tr,
th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
  user-select: none;
}

td,
th {
  background-color: #222222;
}

.fa-arrow-left,
.fa-arrow-right {
  font-size: 1.3em;
}

.iau,
.l_ozvezdje,
.ozvezdje {
  color: #ffffff;
}

td:hover {
  color: white;
}

.finder_chart, .skica {
  margin: 10px;
  border: 1px solid #0000aa;
  border-radius: 10px;
}
.finder_chart {
  width: 100%;
  max-width: 600px;
}
.skica {
  width: 100%;
  max-width: 600px;
}

.fa-arrow-left,
.fa-arrow-right {
  padding: 5px;
  border-radius: 5px;
}

.fa-arrow-left:hover,
.fa-arrow-right:hover {
  background-color: #777777;
  box-shadow: 1px 1px;
}

.fa-arrow-left:active,
.fa-arrow-right:active {
  background-color: #887788;
  box-shadow: 1px 1px;
}

button {
  background-color: #222222;
  border: none;
  padding: 8px 20px;
  text-align: center;
  display: inline-block;
  color: white;
  font-weight: bolder;
  font-size: 1em;
  border-radius: 10px;
  margin: 0px 10px;
}

#kontrolerjiDiv button:hover {
  background-color: #559955;
}

#kontrolerjiDiv button:active {
  background-color: #55aa55;
}

.napisHeader {
  padding: 5px 10px;
  margin: 5px 0px;
}

button:hover {
  background-color: #555555;
}

button:active {
  background-color: #777777;
}

.infoTd {
  background-color: #02095c;
  text-align: center;
}

.infoTd:hover {
  background-color: #aaaaaa;
}

.infoTd:active {
  background-color: #bbbbbb;
}