.reports-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* gap: 7vh 6vw; */
  gap: 8vh 8vw;
  /* justify-content: space-between; */
  /* min-width: 100vw; */
  margin-top: 4vh;
  /* margin-right: 8vw; */
}

.report-element {
  background-color: var(--main-foreground);
  width: 20vw;
  height: 32vh;
  border-radius: 10%;
  color: var(--main-text);
  display: grid;
  grid-template-rows: 4fr 1fr 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
  "title"
  "created_at"
  "date"
  ;
  transition: all 0.3s ease;
  overflow-wrap: break-word;
}

.report-element:hover {
  background-color: var(--main-primary-accent);
  transform: scale(1.05);
}

/* .report-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-self: center;
  height: 27vh;
  /* align-self: center; */
/* } */

.report-title {
  grid-area: title;
  font-size: 1.5rem;
  width: 16vw;
  margin-left: 2vw;
  margin-right: 2vw;
  text-decoration: none;
  margin-top: 4vh;
  text-transform: capitalize;
  /* display: block; */
  /* padding-left: 1.5rem;
  padding-right: 1rem; */
}

.report-created_at {
  grid-area: created_at;
  width: 17vw;
  margin-left: 2vw;
  margin-right: 1vw;
  color: var(--main-secondary-accent-brighter)
    /* padding-bottom: 1rem;
  padding-left: 1.5rem; */
}

.report-date {
  grid-area: date;
  width: 17vw;
  color: var(--main-secondary-accent);
  margin-bottom: 3vh;
  margin-top: -0.5vh;
  margin-left: 2vw;
  margin-right: 1vw;
}

.report-link {
  text-decoration: none;
}

.create-new-report-link {
  background-color: var(--main-foreground);
  width: 20vw;
  height: 32vh;
  border-radius: 10%;
  color: var(--main-text);
  order: -1;
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  grid-template-areas:
  "top-text . ."
  ". plus ."
  ". . bottom-text"
  ;
  overflow-wrap: break-word;
  text-decoration: none;
  text-transform: uppercase;
}

.plus-icon {
  grid-area: plus;
  height: auto;
  width: 300%;
  stroke-width: 1;
  justify-self: center;
  align-self: center;
  /* transition: all 0.4s ease; */
  transition: all 0.3s ease-out;
}

.plus-icon:hover {
  transition: all 0.4s ease;
  transform: rotate(225deg);
  stroke-width: 0.4;
  transition-delay: 100ms;
}

.create-new-report-link:hover {
  background-color: var(--main-success-accent-darker);
  transform: scale(1.05);
  color: var(--main-success)
}


.new-report-text-top {
  grid-area: top-text;
  margin-left: 1.7vw;
  margin-top: 3vh;
  margin-bottom: 0;
  margin-right: 0;
  /* width: 4vw; */
  /* margin-left: 2vw; */
  /* margin-right: 1vw; */
  /* margin-top: 3vh; */
  /* margin-bottom: 3vh; */
}


.new-report-text-bottom {
  grid-area: bottom-text;
  display: inline;
  margin-bottom: 3vh;
  margin-right: 1vw;
  margin-left: -1vw;
  /* transition: */
  /* width: 6vw; */
  /* margin-left: 14vw;
  margin-right: 1vw;
  margin-top: 3vh;
  margin-bottom: 3vh; */
}

.reports-header {
  margin-top: 2vh;
}