form {
  .field_with_errors {
    input,
    textarea {
      background-color: #fff5f5 !important;
    }

    .error {
      color: #fc8181;
    }
  }

  input,
  textarea {
    padding: 10px;
    border-radius: 0.333rem;
    color: #2d3748;
  }

  .project-details {
    box-shadow: inset 0px 1px 20px 0px rgba(59, 59, 59, 0.1);

    input[type='text'],
    textarea {
      background-color: #ebf4ff;
      box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.03);
    }
  }

  .main-btn {
    height: 73px;
  }

  button {
    font-weight: bolder;
    color: #4a5568;
    letter-spacing: 0.05rem;
  }

  div.image-inputs {
    position: relative;

    input[type='file'] {
      display: none;
    }

    label.file {
      display: block;
      width: 100%;
      height: 10rem;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
      background-color: #e2e8f0;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease-out;

      &:hover {
        background-color: #cbd5e0;
      }
    }

    img[src=''] {
      display: none;
    }

    #image-preview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      border-radius: 0.25rem;
      transition: all 0.2s ease-out;

      &:hover {
        filter: brightness(70%);
      }
    }
  }

  textarea {
    resize: none;
    height: 14rem;
    font-size: 1.125rem;
  }

  textarea:focus,
  input:focus {
    outline: none !important;
  }

  .task-card {
    box-shadow: 0px 1px 20px 0px rgba(59, 59, 59, 0.1);
  }

  #add-task {
    transition: all 0.1s ease-out;

    &:hover {
      background-color: #edf2f7;
    }
  }

  #abyme--participants {
    .remove-participant {
      cursor: pointer;
    }

    input {
      background-color: #ebf4ff;
    }

    button {
      width: 100%;
      border-style: solid;
      border-radius: 0.25rem;
      border-width: 2px;
      height: 73px;
      transition: all 0.1s ease-out;
      border-color: #4a5568;

      &:hover {
        background-color: #4a5568;
        color: white;
      }

      &:focus {
        outline: none !important;
      }
    }
  }

  #abyme--comments {
    .comment {
      margin-bottom: 5px;

      input {
        height: 40px;
        background-color: #7f9cf5;

        &::placeholder {
          color: white;
        }

        &:focus {
          outline: 0px;
          box-shadow: 0 0 0 3px rgba(66, 153, 225, 0) !important;
        }
      }
    }

    button {
      width: 100%;
      border-style: solid;
      border-radius: 0.25rem;
      border-width: 2px;
      height: 40px;
      transition: all 0.1s ease-out;

      &:hover {
        background-color: #e2e8f0;
      }

      &:focus {
        outline: none !important;
      }
    }
  }
}
