input[type=file]::file-selector-button, input[type=file] + button {
  padding: 0.5rem;
  background-color: #eee;
  transition: all 0.3s ease-out;
  border: none;
  border-left: 10px solid #000;
  border-right: 10px solid #000;
  font-size: 12px;
  width: 18.75rem; }

input[type=file]::file-selector-button:hover, input[type=file] + button:hover {
  background-color: #000;
  color: #eee;
  cursor: pointer; }

.doc-upload-form {
  position: relative;
  display: inline-block; }

.doc-upload-form.loading > .loader {
  opacity: 1;
  pointer-events: all; }

.doc-upload-form .loader {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.7);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center; }

.doc-upload-form .loader > span {
  position: relative;
  display: block;
  padding: 20px;
  border: 8px solid #6088ba;
  border-top: 8px solid transparent;
  border-radius: 50%; }

.doc-upload-error {
  color: red;
  display: none;
  margin-bottom: 16px; }

.doc-upload-success {
  color: forestgreen;
  display: none;
  margin-bottom: 16px; }

.doc-upload-error.show, .doc-upload-success.show {
  display: block; }

.spin {
  animation: spin 0.8s infinite linear; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }