/* body {
  background-color: #fcf4fc;
} */

.overall__container {
  margin-top: 3em;
  box-shadow: 0px 0px 11px 1px rgba(240, 92, 133, 0.14),
    0px 0px 19px 6px rgba(240, 92, 133, 0.03),
    0px 0px 26px 12px rgba(240, 92, 133, 0.14),
    0px 0px 29px 12px rgba(240, 92, 133, 0.14);
  background-color: #fcf4fc;
  border: 1px solid rgba(243, 107, 146, 0);
  border-radius: 4px;
  padding: 3em;

}

.top-container form {
  width: 80%;
  margin: 0 auto;
}

.cards-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

h1 {
  color: #79a2f3;
}

h2,
label,
span {
  color: #1861f1;
}

p {
  color: black;
}

/* cards output */

.title,
.details,
.assignTo,
.status,
.date {
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: rgb(48, 48, 51);
  margin-left: 2em;
  margin-right: 2em;
}

.date {
  margin-bottom: 1em;
}

button {
  background: #fcf4fc;
}

.form-field {
  margin: 0.5em;
}

.cards {
  background: #fcf4fc;
}

.fa-square-check {
  color: green;
  font-size: 2rem;
}

.fa-xmark {
  color: red;
  font-size: 2rem;
}

.fa-pen-to-square {
  color: orange;
  font-size: 2rem;
}
button {
  border: none;
}

/* alert  validation*/
.messageAlert {
  color: red;
}

.btn.error {
  background-color: red;
  color: white;
}

.form-field.success input,
.form-field.success select {
  border-color: green;
}

.form-field.error input,
.form-field.error select {
  border-color: red;
}

.form-field small {
  visibility: hidden;
}
.form-field.error small {
  visibility: visible;
}

.form-label {
  font-size: 1.8rem;
}

/* end of validation */

/* updating, deleting, check-button */

.doneCard {
  text-decoration: line-through;
  opacity: 0.5;
}