@-webkit-keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 100px 50px;
    opacity: 0;
  }
}

@keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 100px 50px;
    opacity: 0;
  }
}

.input {
  position: relative;
  z-index: 1;
}

.input__field {
  position: relative;
  display: block;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  width: 100%;
}

.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}

.icon {
  color: #ddd;
  font-size: 150%;
}

/* Individual styles */

/* Minoru */
.input__field--minoru {
  width: 100%;
  background: #fff;
  box-shadow: 0px 0px 0px 2px transparent;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}

.input__label--minoru {
  padding: 0;
  width: 100%;
  text-align: left;
}

.input__label--minoru::after {
  content: "";
  position: absolute;
  top: 49px;
  z-index: -1;
  width: calc(100% - 2px);
  max-width: 640px;
  box-shadow: 0px 0px 0px 0px;
  /* color: rgba(199,152,157, 0.6); */
  color: rgba(42, 176, 214, 0.6);
}

.input__field--minoru:focus {
  /* box-shadow: 0px 0px 0px 2px #2ab0d6; */
  box-shadow: 0px 0px 0px 2px rgba(42, 176, 214, 1);
}

.input--filled .input__label--minoru {
  pointer-events: none;
}

.input--filled .input__label--minoru::after {
  -webkit-animation: anim-shadow 0.3s forwards;
  animation: anim-shadow 0.3s forwards;
}

.input__label-content--minoru {
  padding: 0.75em 0.15em;
}

@media screen and (min-width: 761px) {
  .input__label--minoru::after {
    left: 58px;
    height: 59px;
  }
  .input__label--minoru.input_textarea::after {
    height: 150px;
  }
}
@media screen and (max-width: 760px) {
  .input__label--minoru::after {
    height: 46px;
    top: 43px;
    left: 0;
  }
  .input__label--minoru.input_textarea::after {
    height: 150px;
  }
}