igor-starostenko/report_factory-web

.usersPage {
  margin-top: 22px;
  margin-bottom: 6em;
}

.pageTitle {
  font-size: 52px;
}

.usersContainer {
  display: grid;
  grid-gap: 1em;
  margin-top: 1em;
}

.userAdmin {
  background-color: rgba(243, 129, 45, 0.2);
}

.userTester {
  background-color: rgba(105, 122, 228, 0.2);
}

.user {
  margin: auto;
  min-width: 40em;
  max-width: 50em;
  color: rgba(100, 100, 100, 0.8);
  position: relative;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 1.5rem;
  box-shadow: 2px 3px 8px 0px rgba(35, 41, 51, 0.2);
}

.newUser {
  background-color: rgba(200, 200, 200, 0.2);
  color: rgba(100, 100, 100, 0.5);
  font-style: italic;
}

.newUserTitle {
  margin-left: 2.5rem;
}

.userBody {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 5rem;
}

.userTitle {
  float: left;
  margin-left: 2.5rem;
}

.userEmail {
  float: right;
  font-size: 20px;
  font-style: italic;
  font-weight: 200;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.newUser:hover {
  color: rgba(100, 100, 100, 1);
}

.user:hover {
  color: rgba(80, 80, 80, 1);
  border: 1px solid rgba(0,0,0,.35);
}

@media only screen and (max-width: 767px) {
  .user {
    margin: 0;
    min-width: 0;
  }

  .userBody {
    line-height: 4rem;
  }

  .userTitle {
    float: left;
  }

  .userEmail {
    float: unset;
    display: block;
    clear: both;
  }
}