.register {
  padding-top: 50px;
}

.text-left {
  text-align: left;
}

.middleinput {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.tos-checkbox {
  padding-top: 20px !important;
  color: red;
}

.mr-input {
  margin-right: 25px;
}

input[type=checkbox] {
  transform: scale(1.5);
  margin-left: 4px !important;
  height: 13px !important;
  width: 13px !important;
}

.bordered {
  border: 1px dashed lightgray;
  padding: 20px;
}

input {
  font-size: 20px !important;
  margin-bottom: 20px !important;
  padding: 10px !important;
  letter-spacing: 1px;
  height: 100% !important;
}

h2 {
 margin-bottom: 20px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.tos {
  max-height: 350px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-overflow: clip;
  border: 1px dashed black;
  padding: 10px;
}
.shadow {
  	-webkit-box-shadow: 0 5px 30px -6px #777;
  	   -moz-box-shadow: 0 5px 30px -6px #777;
  	        box-shadow: 0 5px 30px -6px #777;
}

.text-center {
  text-align: center;
}

.container {
  margin-bottom: 30px;
}

@media only screen and (max-width: 1200px) {
  .middleinput {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .mr-input {
    margin-right: 15px;
  }
}

@media only screen and (max-width: 980px) {
  .register {
    padding-top: 100px;
  }

  .middleinput {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .mr-input {
    margin-right: 14px;
  }
}

@media only screen and (max-width: 768px) {
  .middleinput {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}