.application-intro {
  margin-right: 1em;
  margin-left: 1em;
  margin-bottom: 40px;

  h1 {
    text-transform: uppercase;
    text-align: center;
  }

  p {
    font: normal 14px/20px $sans-serif;
    text-align: center;
  }

  a {
    color: $pink;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.project-form {
  form {
    .project-section,
    .intro-text,
    .descriptions,
    .image-upload,
    .personal-info,
    .project-info,
    .extra-questions {
      border-bottom: 1px solid rgb(200,200,200);
      margin-bottom: 30px;
      padding-bottom: 20px;
    }

    .chapter-select {
      padding-bottom: 10px;
    }

    div.input {
      &.select {
        border-bottom: 1px solid rgb(200,200,200);
        margin-bottom: 20px;
        padding-bottom: 30px;
      }
    }

    textarea {
      &.project-desc {
        padding-bottom: 20px;
      }

      &.optional {
        height: 100px;
      }
    }

    .image-upload {
      .current-images {
        ul.old-photos {
          li {
            background: rgb(255, 255,255);
            border: 1px solid rgb(200,200,200);
            border-radius: 20px;
            box-shadow: 0 1px 0 0 rgba(255,255,255, 0.75), inset 0 0 3px 0 rgba(0,0,0, 0.2);
            @include linear-gradient(rgb(246,246,246), rgb(253,253,253));
            list-style: none;
            margin-bottom: 10px;
            padding: 10px 15px;
            overflow: hidden;
            text-overflow: ellipsis;

            &:last-child {
              margin: 0px;
            }

            a.remove-image {
              color: $base-font-color;
              float: right;
              margin-right: 5px;

              &:hover {
                color: $pink;
              }
            }

            &:hover {
              background: rgb(230,230,230);
              cursor: move;
            }
          }
        }
      }
    }

    .input.file {
      font-size: 0.8em;
      line-height: 1.4;
      label {
        span {
          font-weight: normal;
        }
      }

      .toggle-uploader {
        margin-top: 1em;
        text-align: right;
      }

      .multi-input {
        background: rgb(255,255,255);
        border-top: 1px solid rgb(200,200,200);
        border: 1px solid rgb(200,200,200);
        border-radius: 20px;
        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.75), inset 0 0 3px 0 rgba(0,0,0, 0.2);
        @include linear-gradient(rgb(246,246,246), rgb(253,253,253));
        margin-bottom: 10px;
        padding: 8px 15px;

        &:last-child {
          margin: 0px;
        }

        &.noremove {
          background: transparent;
          border: none;
          box-shadow: none;
          margin: 5px 0 10px 0;

          a.remove-image {
            display: none;
          }
        }

        p {
          margin-bottom: 0;
        }

        a.remove-image {
          color: $base-font-color;
          float: right;
          margin-right: 5px;
          padding-top: 1px;

          &:hover {
            color: $pink;
          }
        }

        i.upload-status {
          display: none;
          float: left;
          margin-top: 2px;
          margin-right: 5px;
        }

        .progress-meter {
          display: none;
          background: #ddd;
          height: 1px;
          margin-top: 1px;
          width: 0;
        }
      }
    }
  }
}

input.form__image-element-caption[type="text"] {
  border-radius: 10px;
  width: calc(100% - 80px - 10px);
}

.project-form div.input.project_photos_caption {
  label {
    padding-bottom: 5px;
  }
  margin-top: 10px;
  margin-bottom: 0;
}

.form__image-element-image {
  width: 80px;
  height: 80px;
  float: left;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 0;
  object-fit: cover;
}

.form__dropzone {
  padding: 10px 0;

  .uppy-DragDrop-inner {
    padding: 40px 20px;
  }

  .uppy-DragDrop-arrow {
    display: none;
  }

  button:disabled {
    filter: grayscale(100%);
    opacity: .6;
    user-select: none;
    cursor: not-allowed;

    .uppy-DragDrop-inner {
        pointer-events: none;
    }
  }
}
