/*INPUTS============================================================================*/

input[type="file"] {
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(0, 153, 255)" d="M22 38l4 0l0 -8.35l3.2 3.2l2.8 -2.85l-8 -8l-8 8l2.85 2.8l3.15 -3.15l0 8.35zm-14 6l0 -40l20 0l12 12l0 28l-32 0zm18 -26l0 -10l-14 0l0 32l24 0l0 -22l-10 0zm-14 -10l0 10l0 -10l0 32l0 -32z"></path></svg>');
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(0, 153, 255)" d="m24 32.35-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15ZM8 40V29.85h3V37h26v-7.15h3V40Z"></path></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  border-radius: 20px; /* radius - border width */
  
  cursor: pointer;
  height: 280px;
  text-indent: -999em;
  
  position: relative;
}

input[type="file"]::before {
  content: "";
  position: absolute;
  inset: 20px; /* Offset = border width */
  border-radius: 10px; /* radius - border width */
  background: inherit;
  border: 2px dashed lightgrey;
}

textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 2px solid lightgrey;
  border-radius: 20px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  margin: 20px 0 0;
}

textarea:focus {
  border-color: rgb(0, 153, 255);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.1);
}