html, body {
  margin: auto;
  overflow: hidden; /* Hide scrollbars */
  height: 100%;     /* Για να μην γίνεται scrolling */
  touch-action: none; /* Για να μην κινείται ο canvas όταν γίνεται drag */

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
  /* background-color: rgb(0, 0, 0); */
  background-color: rgb(255, 212, 183);
  color: rgb(255, 255, 255);
}
canvas {
  display: block;
  margin: auto;
  height: 100%;     /* Για να μην γίνεται scrolling */
  touch-action: none; /* Για να μην κινείται ο canvas όταν γίνεται drag */
}
.loadingclass {
  background-color: rgb(0, 0, 60);
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}
.modes {
  color: rgb(0, 200, 245);
  background-color: transparent;
  border: none;
  font-weight: bold;
  outline: none;
}
.inputbox {
  font-family: "Segoe UI Semibold";
  font-weight: normal;
  background-color: rgb(48, 98, 213);
  color: white;
  border: none;
  position: relative;
  z-index: 9;
}
.inputbox:focus {
  outline: none;
  position: relative;
  z-index: 9;
}
.inputbox::selection {
    background: grey;
    position: relative;
    z-index: 9;
}
img {
  padding: 0;
  max-width: 100%;
  max-height: 100%;
 /* Οι πιο κάτω  3 γραμμές είναι για κεντράρισμα*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.common_button {
  background: transparent;
  border: none;
  cursor: pointer;
}
.confirm_button {
  padding: 0;
  background-color: rgb(255, 136, 45);
  color: black;
  border-width: thin;
  border-radius: 2vh;
  -webkit-border-radius: 2vh;
  border-color: black;
  font-weight: bold;
  cursor: pointer;
}
.OK_button {
  padding: 0;
  font-weight: bold;
  font-size: large;
}
/* .buttons:hover {
  background-color: rgb(0, 0, 150);
  color: white;
} */

.animation-left-show {
  position: relative;
  animation-name: anim_left-show;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes anim_left-show {
  from {left: 100%;}
  to {left: 0%;}
}

.animation-left-hide {
  position: relative;
  animation-name: anim_left-hide;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}
@keyframes anim_left-hide {
  from {left: 0%;}
  to {left: -100%;}
}

.animation-right {
  position: relative;
  animation-name: anim_right;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes anim_right {
  from {left: -100%;}
  to {left: 0%;}
}

@font-face {font-family: "Segoe UI Semibold"; src: url("seguisb.ttf") format("truetype"); }