/*KOLORY
JASNE:
  color: #000000;//general-color
  background-color: #f0fbf0;//general-background-color
  border-color: #aeeaae;//general-border-color

  input.background-color: #f4fbf4;//input-background-color
  input.focus.border-color: #9ae59a;//input-focus-border-color
  textareabackground-color: #f9fff9;//textarea-border-color

  div.div.border-color: #c2efc2;//inner-border-color
  div.(even).background-color: #d6f5d6;//table-even-background-color
  div.(hover).color: #009900;//answer-hover-color
*/

button {
  padding: 4px 10px;
}
.pressed {
  font-weight: bold;
}
.tick-empty::after {
  content: " ☐";/*"☐";*/
}
.tick-no::after {
  color: red;
  content: " ✘";/*"☒";/*"☒";*/
}
.tick-yes::after {
  color: green;
  content: " ✔";/*"☑";/*"☑";*/
}

@media only screen and (max-width: 900px) {
  body {
    font-size: 95%;
  }
  button {
    padding: 3px 8px;
  }
}
@media only screen and (max-width: 768px) {
  body {
    font-size: 85%;
  }
  button {
    padding: 3px 8px;
  }
}
@media only screen and (max-width: 470px) {
  body {
    font-size: 70%;
  }
  button {
    padding: 2px 4px;
  }
}
@media only screen and (max-width: 400px) {
  body {
    font-size: 60%;
  }
  button {
    padding: 1px 2px;
  }
}
@media only screen and (max-width: 320px) {
  body {
    font-size: 55%;
  }
  button {
    padding: 1px 2px;
  }
}

button,
input,
select,
textarea {
  font-size: 95%;
}

.screen-lock {
  align-items: center;
  background: transparent url('../_img/busy__.gif') no-repeat center center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.screen-lock .alert-box {
  background-color: #fafff0;
  border: 1px solid #808080;
  box-shadow: 10px 10px #ff8080;
  display: none;
  justify-content: center;
  /*max-width: 95%;*/
  margin: auto 5px;
  padding: 50px;
  text-align: center;
  z-index: 101;
}
@media only screen and (max-width: 900px) {
  .screen-lock {
    background-size: 90px;
  }
  .screen-lock .alert-box {
    padding: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .screen-lock {
    background-size: 77px;
  }
  .screen-lock .alert-box {
    padding: 30px;
  }
}
@media only screen and (max-width: 470px) {
  .screen-lock {
    background-size: 47px;
  }
  .screen-lock .alert-box {
    padding: 10px;
  }
}

.screen-lock .alert-src {
  color: green;
  /*margin: auto;*/
  z-index: 101;
}
.screen-lock .alert-box-mssg {
  margin-bottom: 1rem;
  text-align: left;
}
.screen-lock .alert-box-warn-mssg {
  /*max-width: 95%;*/
  color: #ffb0b0;
}
.screen-lock .alert-box-info-mssg {
  /*max-width: 95%;*/
  color: #c0f0c0;
}
/*
.screen-lock .alert-box-input {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}
*/
.screen-lock .alert-box-input {
  min-width: 10rem;
  text-align: center;
}
.screen-lock .alert-box-bttns {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}


.progress-display {
  background-color: #4d4d5e;
  box-shadow: 10px 10px #333344;
  display: inline-block;
  left: 200px;
  padding: 20px;
  position: absolute;
  top: 200px;
  width: 600px;
  z-index: 110;
}
@media only screen and (max-width: 768px) {
  .progress-display {
    box-shadow: 7px 7px #333344;
    font-size: 90%;
  }
}
@media only screen and (max-width: 470px) {
  .progress-display {
    box-shadow: 3px 3px #333344;
    font-size: 75%;
  }
}
.progress-display > span {
  margin: 0 1em;
  vertical-align: 5px;
}
.progress-display > progress {
  border: 1px solid #333344;
  height: 30px;
}


.copy-container {
  font-size: 1px;
  height: 1px;
  visibility: hidden;
}

.cookies-info- {
  align-items: center;
  background-color: #aeeaae;/*general-border-color*/
  border: 1px solid #aeeaae;/*general-border-color*/
  bottom: 20px;
  color: red;
  display: none;
  justify-content: space-between;
  opacity: 0.8;
  padding: 1em;
  position: fixed;
  width: 90%;
}
.cookies-info- > div {
  padding: 0 1em;
}

.image-show {
  height: 1em;
}
.image-show-full {
  left: 0;
  max-height: 100%;
  max-width: 100%;
  position: fixed;
  top: 0;
}
.image-show-full-screen {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}
.image-show-full-screen-close {
  color: green;
  cursor: default;
  font-size: 1.5em;
  font-weight: bold;
  padding-right: 5px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}
.blinking25 {
  animation: blinker25 1s linear infinite;
}
@keyframes blinker25 {
  50% {
    opacity: 0.25;
  }
}
.console {
  font-family: Lucida Console;
}
.button {
  cursor: pointer;
  padding: 2px !important;
}
.underline {
  text-decoration: underline;
}
.small-caps {
  font-variant: small-caps;
}
.fsize95 {
  font-size: 90%;
}
.fsize90 {
  font-size: 90%;
}
.small {
  font-size: 80%;
}
.smaller {
  font-size: 60%;
}
.tiny {
  font-size: 30%;
}
.big {
  font-size: 110%;
}
.bigger {
  font-size: 120%;
}
.large {
  font-size: 150%;
}
.verylarge {
  font-size: 200%;
}

.blue {
  color: blue;
}
.green {
  color: green;
}
.red {
  color: red;
}
.hidden {
  visibility: hidden;
}
.no-display {
  display: none;
}
.height0 {
  height: 0;
}
.line-spacing-15 {
  line-height: 1.5;
}
/*
.hidden-text {
  display: none;
}
*/
.text-left,
.text-left p {
  text-align: left;
}
.text-center,
.center-text,
.text-center p,
.center-text p {
      text-align: center;
}
.text-right,
.text-right p {
  text-align: right;
}
.text-justify,
.text-justify p {
  text-align: justify;
}
.indent1em {
  text-indent: 1em;
}
.unindent1em {
  text-indent: -1em;
}
.indent2em {
  text-indent: 2em;
}
.unindent2em {
  text-indent: -2em;
}
.indent3em {
  text-indent: 3em;
}
.unindent3em {
  text-indent: -3em;
}
.up-1em {
  margin-top: -1em;
}
.reverse {
  direction: rtl;
}

.nobr {
  white-space: nowrap;
}

.frame1p {
  border: 1px solid silver;/*#f9fff9;*/
}

.full-size {
  width: 100%;
}

.w-10prc,
.width10prc {
  min-width: 10%;
}
.w-40prc,
.width40prc {
  min-width: 40%;
}

.w-100 {
  width: 100px;
}
.w-150 {
  width: 150px;
}
.w-200 {
  width: 200px;
}
.w-300 {
  width: 300px;
}

/*.table-row {
  display: flex;
}
*/
.tab-col1of5 {
  width: 20%;
}
.tab-col2of5 {
  width: 40%;
}
.tab-col3of5 {
  width: 60%;
}
.tab-col4of5 {
  width: 80%;
}
.tab-col100 {
  width: 100%;
}

.tab-col1of10 {
  width: 10%;
}
.tab-col2of10 {
  width: 20%;
}
.tab-col3of10 {
  width: 30%;
}
.tab-col4of10 {
  width: 40%;
}
.tab-col5of10 {
  width: 50%;
}
.tab-col6of10 {
  width: 60%;
}
.tab-col7of10 {
  width: 70%;
}
.tab-col8of10 {
  width: 80%;
}
.tab-col9of10 {
  width: 90%;
}

.square100 {
  display: flex;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
}
.rectangle150x100 {
  display: flex;
  height: 100px;
  width: 150px;
  align-items: center;
  justify-content: center;
}

.rectangle200x100 {
  display: flex;
  height: 100px;
  width: 200px;
  align-items: center;
  justify-content: center;
}

.letter-paper {
  background: url("../_img/paper-texture-with-pattern_107441-37.jpg");
  color: darkblue;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 46em;
  padding: 3em 5em;
}
@media only screen and (max-width: 768px) {
  .letter-paper {
    padding: 2em 3em;
  }
}
@media only screen and (max-width: 470px) {
  .letter-paper {
    padding: 1em 1em;
  }
}
.letter-paper .title {
  font-size: 105%;
  font-weight: bold;
  margin-bottom: 2em;
  margin-top: 0;
  text-align: center;
}
.letter-paper p {
  margin-bottom: 2em;
  text-align: justify;
}
.letter-paper .highlight {
  background-color: #ffff99;
  font-style: italic;
}
.letter-paper a {
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
  color: blue;
  font-style: italic;
  text-decoration: none;
}
.letter-paper .consent {
  display: table;
  margin: 0 auto 1em;
}
.letter-paper .consent > div {
  display: table-row;
}
.letter-paper .consent > div > div {
  cursor: default;
  display: table-cell;
  font-size: 110%;
  padding: 2px 10px;
}
.letter-paper .consent > div > div:first-child {
  display: table-cell;
  font-style: italic;
  font-weight: bold;
  text-align: left;
}
.letter-paper input {
  background-color: #fff2e6;/*input-background-color*/
  border: 1px solid #ffcc99;/*general-border-color*/
}
.letter-paper input[type=text],
.letter-paper input[type=date] {
  background-color: transparent;
  border-bottom: 1px dashed black;
  color: #000099;
  font-size: 105%;
  font-style: italic;
}
.letter-paper .submit-button {
  text-align: right;
}
.letter-paper .submit-button button {
  font-style: italic;
  padding: 5px 10px;
}

.timeout-clock {
  border: 1px solid red;
  color: red;
  font-size: smaller;
  font-style: italic;
  padding: 1px 2px;
  position: fixed;
  right: 150px;
  text-align: center;
  top: 0;
  /*width: 40px;*/
}

.inet-connect {
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  height: 20px;
  position: fixed;
  right: 0px;
  top: 0;
  width: 20px;
  /*width: 40px;*/
}
@keyframes blink {
  0% { opacity: 0}
  50% { opacity: 1}
  100% {opacity: 0}
}
.inet-connect > img {
  height: 20px;
  width: 20px;
  /*width: 40px;*/
}


.trans-panels-container {
  align-items: center;
  bottom: 1px;
  display: flex;
  justify-content: space-between;
  left: 1px;
  position: fixed;
  right: 1px;
  top: 1px;
}
.trans-panels-container > fieldset {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  height: 98%;
  justify-content: space-around;
  /*min-width: 46%;*/
  padding: 5px 1px 1px;
  width: 50%
}
/*
.trans-panels-container > fieldset:first-child {
  width: 40%;
}
.trans-panels-container > fieldset:last-child {
  width: 40%;
}
*/
.trans-panels-container .trans-arrow {
  display: flex;
  justify-content: space-around;
}
.trans-panels-container .trans-arrow > button {
  font-size: 150%;
  margin: 1px;
  padding: 0 3px 3px;
}
.trans-panels-container > fieldset > .input-box,
.trans-panels-container > fieldset > .output-box {
  border: 0.5px solid rgb(66, 66, 66);
  height: 94%;
}
.trans-panels-container > fieldset > .input-box > textarea {
  /*border: 0.5px solid black;*/
  border-width: 0;
  height: 100%;
  overflow-wrap: normal;
  overflow-x: scroll;
  padding: 0;
  resize: none;
  width: 100%;
  white-space: pre;
}

.trans-panels-container > fieldset > .output-box > iframe {
  /*border: 0.5px solid black;*/
  border-width: 0;
  height: 100%;
  width: 100%;
}

.trans-panels-container > fieldset > .buttons {
  align-items: stretch;
  display: flex;
  font-size: 95%;
  justify-content: space-around;
  margin-top: 1px;
  width: 100%;
}
.trans-panels-container > fieldset > .buttons > button > div {
  border: 1px dotted black;
}


.login-form {
  border: 1px solid grey;
  display: table;
  margin: 2rem auto;
  padding: 1rem 0.5rem;
}
.login-form .message {
  color: red;
  font-style: italic;
  text-align: center;
}
.login-form > div {
  display: table;
  margin: auto;
  padding: 0.5rem;
}
.login-form > div > div {
  display: table-row;
}
.login-form > div > div > label {
  display: table-cell;
  padding: 1rem 0.5rem;
  text-align: center;
}
.login-form input,
.login-form button {
  font-size: 100%;
}
.login-form > div > div > input {
  display: table-cell;
  width: 12rem;
}
.login-form input[type=submit],
.login-form input[type=reset] {
  width: 7rem;
}

.logout-button {
  background-color: transparent;
  background-image: url("../_img/logout.gif");
  background-size: 100%;
  box-shadow: unset;
  height: 18px;
  position: fixed;
  right: 0;
  top: 0;
  width: 18px;
  z-index: 1000;
}