:root {
  --width-container: 30vw;
  --width-container-max: 350px; 
  --marg-container-top: 5vh;
  --width-input: 85%;

  --color-accent-bright: #0e11db;
  --color-accent-dark: #000066;

  --color-body: #FEFE00;
  --color-bodybg: #2d2d2dd3;
  --color-border: #FEFE00;

  --color-contbg: var(--color-accent-dark);
  --color-info: #FEFE00;
  --color-label: #fffdfd9a;
  --color-input: #585858;

  --color-fldbg: #E0E0E0;
  --color-fldbgact: #FCFCFC;

  --color-infobg: var(--color-accent-bright);
  --color-infobrd: var(--color-contbg);

  --color-inputbg: var(--color-fldbg);
  --color-inputbgact: var(--color-fldbgact);
  --color-inputbrd: var(--color-contbg);
  --color-inputact: #2f485e;
  --color-inputbox: #096da7;

  --color-button: #333;
  --color-buttonbg: var(--color-fldbg);
  --color-buttonbgact: var(--color-fldbgact);
  --color-note: #707070;

  --size-info: 1em;
  --size-label: 1.5em;
  --size-input: 1.5em;
  --size-button: 1.5em;
  --size-note: 0.8em;

  --size-logow: 40vw;
  --size-logoh: 15vh;
  --size-logom: 20vw;

  --size-inputh: 1em;
  --size-buttonh: 2em;
  --size-buttonw: 4em;
}

/*  Intended for Phones etc  */
@media screen and (orientation: portrait) and (max-width: 1100px) {
  :root {
    --width-container: 80vw;
    --width-container-max: 80vw;
    --marg-container-top: auto;
    --width-input: 80%;

    --size-info: 1em;
    --size-label: 1.5em;
    --size-input: 1.5em;
    --size-button: 1.5em;
    --size-note: 0.8em;

    --size-logow: 40vw;
    --size-logom: 15vw;
    --size-logoh: 20vh;

    --size-inputh: 1em;
    --size-buttonh: 2em;
    --size-buttonw: 4em;

  }
}

html, body {
  width: 98%;
  height: 98%;
  color: var(--color-body);
  background: var(--color-bodybg);
  font: 9pt Arial,Helvetica,sans-serif;
  display: inline;
}

.Oneliner {
  display: flex;
}

#mainw {
  padding-top: var(--marg-container-top);
}

#container {
  position: relative;
  width:  var(--width-container);
  max-width: var(--width-container-max);
  margin: auto;
  top: var(--marg-container-top);

  background: var(--color-contbg);
  border-radius: 15px;
  border: 5px solid var(--color-border);
  box-shadow: 30px 30px 10px rgba(64, 64, 64, 1);
}

.info {
  display: flex;

  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 10px;

  margin-bottom: 0px;
  margin-left: 18px;
  margin-right: 18px;

  font-size: var(--size-info);
  line-height: 23px;
  text-align: center;
  background-repeat: repeat-x;
  background-color: var(--color-infobg);

  border: 0px solid var(--color-infobrd);
  border-radius: 15px;
}

.LogoL {
  display:inline-block;

  vertical-align: top;
  margin-left: 0;
  margin-right: 5%;
  width: var(--size-logow);
  height: var(--size-logoh);

  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.LogoM {
  display:inline-block;

  margin-left: 0;
  margin-right: 0;
}

.LogoR {
  display: inline-block;

  vertical-align: top;
  margin-left: 5%;
  margin-right: 0;
  width: var(--size-logow);
  height: var(--size-logoh);

  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.note {
  vertical-align: top;

  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: var(--size-note);

  color: var(--color-note);
  line-height: 14px;
  text-align: left;
}

.hidden {
  display: none;
}

form {
  margin: 0 auto;
  margin-top: 0px;
}

label {
  display: inline-block;

  margin-left: 18px;
  padding-top: 0px;
  font-size: var(--size-label);
  color: var(--color-label);
  font-weight: bolder;
}

input {
  outline: none;

  border: 1px solid var(--color-inputbrd);
  border-radius: 5px;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #000066;

  font-size: var(--size-input);
}

input[type=text], input[type=password], input[type=number] {
  color: var(--color-input);
  background: var(--color-inputbg);
  padding-left: 10px;
  margin: 10px;
  margin-top: 4px;
  margin-left: 18px;
  width: var(--width-input);
  height: var(--size-inputh);
}

input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
  color: var(--color-inputact);
  background: var(--color-inputbgact);
  border: 1px solid var(--color-inputact);
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px var(--color-inputbox);
}

input[type=submit] {
  font-size: var(--size-button);
  font-weight: bolder;
  vertical-align: middle;
  text-align: center;
  color: var(--color-button);
  background: var(--color-buttonbg);
  padding-left: 10px;
  padding-bottom: 10px;
  margin: 10px;
  margin-top: 2px;
  margin-left: 18px;
  width: var(--size-buttonw);
  height: var(--size-buttonh);
  border: 3px solid var(--color-border);
  border-radius: 10px;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px var(--color-contbg);
}

input[type=submit]:focus {
  background: var(--color-buttonbgact);
  border: 3px solid var(--color-inputact);
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px var(--color-inputbox);
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}