.modal {
  &__background {
    @include position(fixed, 0 0 0 0);
    background-color: rgba($black, 0.25);
    z-index: 3;
  }

  &__content {
    .input-field {
      width: 100%;
    }
  }

  &__ex {
    @include position(absolute, 30px 30px null null);
    @include size(30px);
    line-height: 30px;
    text-decoration: none;

    .button {
      @include size(30px);
      line-height: 30px;
      color: $text-medium;
      font-size: $larger;

      &:hover {
        color: $alert-light;
      }
    }
  }

  &__header {
    font-size: 24px;
    font-weight: $normal;
    line-height: normal;
    letter-spacing: -0.5px;
    text-align: left;
    color: $text-ultradark;
  }

  &__modal_container {
    @include position(absolute, 50% null null 50%);
    @include transform(translate(-50%, -50%));
    background-color: $white;
    width: 600px;
    z-index: 3;
    padding: 30px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.07), 0 16px 24px rgba(50, 50, 93, 0.14), inset 0 0 0 1px rgba(74, 144, 226, 0.1);
    border-radius: 2px;
  }
}
