#input-container {
  margin: auto;
  max-width: 75%;
  padding-top: 15%;
}

#input-container label {
  color: gray;
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Screen keyboard container */
.simple-keyboard {
  margin-top: 5px;
  background-color: transparent;
}

/* Screen keyboard buttons */
#input-container .hg-button {
  height: 27px !important;
  color: black !important;
  background-color: silver !important;
}

#login-container .hg-activeButton {
  color: black !important;
  background-color: gray !important;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) {

  #input-container {
    max-width: 75%;
    padding-top: 15%;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) {

  #input-container {
    max-width: 65%;
    padding-top: 14%;
  }

}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) {

  #input-container {
    max-width: 55%;
    padding-top: 18%;
  }

  /* Screen keyboard buttons */
  #input-container .hg-button {
    height: 40px !important;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {

  /* Screen keyboard buttons */
  #input-container .hg-button {
    height: 55px !important;
  }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) {

  /* Screen keyboard buttons */
  #input-container .hg-button {
    height: 55px !important;
  }
}