@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.tdshadow {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }

.tdshadow:before, .tdshadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px; }

.tdshadow:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg); }

body {
  font-family: "Open Sans", sans-serif;
  background: url("./images/backgroundImage.jpg"); }

button:focus {
  outline: 0; }

h3 {
  font-size: 1.2rem; }

label {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

input[type='checkbox'] {
  margin-right: 4px; }

canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: inherit; }

.canvas-container {
  min-width: fit-content; }

#verify-signature-canvas {
  max-height: 175px; }

.top24 {
  margin-top: 24px; }

.logo {
  height: 80px;
  box-sizing: content-box; }

.logo--container {
  padding-top: 24px;
  display: flex;
  justify-content: center; }

.status {
  padding: 24px; }

#default-status-message {
  font-weight: bolder; }

.status--container {
  background-color: #f1f1f1;
  border-radius: 15px;
  margin-top: 20px; }

.red {
  color: red; }

.pos--container {
  height: fit-content;
  border-radius: 10px;
  padding: 40px 60px;
  background-color: white; }

@media (max-height: 750px) {
  .pos--container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; } }
@media (min-width: 768px) {
  .pos--container {
    padding: 40px 20px; } }
@media (min-width: 992px) {
  .pos--container {
    padding: 40px 60px; } }
.display {
  border-radius: 10px;
  background-color: #949494;
  color: white;
  max-width: 260px;
  padding: 5px 0;
  margin: 0 auto;
  font-size: 2em;
  -webkit-box-shadow: 0px 2px 0px #777777, 0px 2px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 2px 0px #777777, 0px 2px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 0px #777777, 0px 2px 25px rgba(0, 0, 0, 0.7); }

.space-between {
  display: flex;
  justify-content: space-between; }

.numpad {
  max-width: 300px;
  justify-content: center;
  margin: 30px auto; }

.numpad--key {
  background-color: #949494;
  border: 1px solid rgba(221, 238, 213, 0.4);
  border-radius: 10px;
  color: white;
  cursor: pointer;
  font-size: 1.5em;
  margin: 6px;
  text-align: center;
  -webkit-box-shadow: 0px 3px 0px #777777, 0px 3px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 3px 0px #777777, 0px 3px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 3px 0px #777777, 0px 3px 25px rgba(0, 0, 0, 0.7);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.numpad--row > div:first-of-type {
  padding-right: 0; }

.numpad--row > div:nth-of-type(2) {
  padding: 0 7.5px; }

.numpad--row > div:last-of-type {
  padding-left: 0; }

.numpad--key:active {
  background: #949494;
  -webkit-box-shadow: 0px 1px 0px #777777, 0px 1px 6px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 0px #777777, 0px 1px 6px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 0px #777777, 0px 3px 1px rgba(0, 0, 0, 0.9);
  position: relative;
  top: 2px; }

.double {
  padding: 15px 0; }

.triple {
  padding: 15px 0; }

.key--primary, .key--primary:active {
  background-color: #65AC42;
  -webkit-box-shadow: 0px 6px 0px #65AC42, 0px 6px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 6px 0px #65AC42, 0px 6px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 6px 0px #65AC42, 0px 6px 25px rgba(0, 0, 0, 0.7); }

.key--secondary, .key--secondary:active {
  background-color: #007e3b; }

.key--danger {
  background-color: #b75454;
  margin-top: 16px;
  -webkit-box-shadow: 0px 6px 0px #b75454, 0px 6px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 6px 0px #b75454, 0px 6px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 6px 0px #b75454, 0px 6px 25px rgba(0, 0, 0, 0.7); }

#key--charge, .key--primary, .key--secondary {
  width: 100%; }

.key__disabled, .key__disabled:active {
  background-color: #777777;
  box-shadow: none;
  cursor: not-allowed;
  top: 0px; }

/*# sourceMappingURL=main.css.map */