style.css

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Noto Sans, sans-serif;
  background: RGBA(220, 220, 220, 1);
  background-image: linear-gradient(
    45deg,
    #d1d1d1 25%,
    #cccccc 25%,
    #cccccc 50%,
    #d1d1d1 50%,
    #d1d1d1 75%,
    #cccccc 75%,
    #cccccc 100%
  );
  background-size: 56.57px 56.57px;
  margin: 0;
  padding: 0;
}

.controlbox {
  background: RGBA(255, 255, 255, 0.5);
  padding: px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 2px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  -webkit-appearance: "Always Show Up/Down Arrows";
}

input {
  border: 0.1em solid RGBA(0, 0, 0, 0.25);
  border-radius: 15px;
  padding-left: 6px;
  color: grey;
}

.medinput {
  width: 90px;
  font-size: 10px;
}

.longinput {
  width: 98.5%;
}

#controls {
  position: absolute;
  background: RGBA(220, 220, 220, 0.75);
  text-align: right;
  right: 0;
  left: 0;
  bottom: 0px;
  margin: 5px;
  font-size: 10px;
  vertical-align: bottom;
  color: #555;
  /* min-width: 550px; */
}

#image {
  text-align: center;
  max-width: 98vw;
  max-height: 98vh;
  padding: 0;
  margin: 1vh;
  overflow: hidden;
}

#image img {
  max-width: 100%;
  max-height: 100%;
}

#theImage {
}

#theImage:hover {
}

button,
input,
div {
  margin: 2px;
  vertical-align: middle;
}

label {
  font-size: 11px;
}

input {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}

#buttonGroup {
  display: none;
}

.controlboxlabel {
  float: left;
  font-size: 12px;
  margin-right: 15px;
}