html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

/* body {
  margin-bottom: 60px;
} */

/* .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /*white-space: nowrap;
  /*line-height: 60px; /* Vertically center the text there */
  /*padding-top: 15px;
  padding-bottom: 15px;
} */

/*AUTO SET BORDER COLOUR VALIDATION TO RED*/
input[type="email"].input-validation-error, input[type="file"].input-validation-error, input[type="text"].input-validation-error, input[type="password"].input-validation-error, input[type="number"].input-validation-error, textarea.input-validation-error, select.input-validation-error {
  border-color: #dc3545;
  padding-right: calc(1.5em + .75rem);
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/*AUTO SET BORDER COLOUR VALIDATION TO GREEN*/
input[type="email"].valid, input[type="file"].valid, input[type="text"].valid, input[type="password"].valid, input[type="number"].valid, textarea.valid, select.valid {
  border-color: #28a745;
  padding-right: calc(1.5em + .75rem);
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}



input[type="file"] {
  position: relative;
}

input[type="file"]::file-selector-button {
  width: 136px;
  color: transparent;
}

/* Faked label styles and icon */
input[type="file"]::before {
  position: absolute;
  pointer-events: none;
  top: 10px;
  left: 16px;
  height: 20px;
  width: 20px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

input[type="file"]::after {
  position: absolute;
  pointer-events: none;
  top: 10px;
  left: 40px;
  color: #0964b0;
  content: "Fail Excel";
}

/* ------- From Step 1 ------- */

/* file upload button */
input[type="file"]::file-selector-button {
  /* border-radius: 4px; */
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}