a {
  text-decoration: none;
}

body {
  font-family: Lato, sans-serif;
}

.box-shadow {
  box-shadow: 3px 3px 3px 3px #d8d8d8;
}

.create-new-btn {
  background: transparent;
  border: none;
}

.cancel-modal-wrapper,
.delete-modal-wrapper,
.error-modal-wrapper,
.new-user-modal-wrapper,
.remove-user-modal-wrapper {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.edit-modal-wrapper,
.new-job-modal-wrapper,
.duplicate-modal-wrapper {
  left: 8%;
  top: 30%;
}

.edit-icon {
  color: #808080;
}

.edit-job-btn {
  border: none;
}

.fa-calendar-days {
  font-size: 1.7rem;
}

.fa-check {
  font-size: 100px;
}

.fa-trash {
  font-size: 1.5rem;
}

.fa-pen-to-square {
  font-size: 1.5rem;
}

.fa-x {
  font-size: 60px;
}

i {
  font-size: 30px;
}

img {
  width: 150px;
}

.job-details {
  justify-content: space-between;
}

.job-details-header {
  background-color: #d9d9d9;
}

.job-status {
  font-size: 1.5rem;

  /* margin-bottom: 0; */
}

li {
  margin: 0%;
}

.login-btn,
.done-btn {
  background-color: #1887d7;
  color: white;
}

.login-wrapper {
  background-color: #d9d9d9;
}

.navbar {
  background-color: #212529;
}

.new-user-link {
  color: black;
}

.overflow-x {
  overflow-x: scroll;
}

.overflow-y {
  overflow-y: scroll;
}

.overlay {
  background-color: rgb(0 0 0 / 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
}

ul {
  padding: 0;
  list-style-type: none;
}

.week-btn {
  background-color: #d9d9d9;
}

@media screen and (max-width: 768px) {
  .calendar-plus-container {
    justify-content: center;
  }

  .job-status,
  .fa-trash,
  .fa-pen-to-square {
    font-size: 1rem;
  }

  p {
    font-size: 10px;
  }

  .main-title {
    font-size: 20px;
  }

  .main-title-wrapper {
    justify-content: center;
  }

  .user-info {
    font-size: 12px;
  }

  .yearly-totals {
    text-align: center;
  }
}

@media screen and (max-width: 447px) {
  .week-btn {
    font-size: 0.5rem;
  }
}

@media screen and (max-width: 424px) {
  .job-status,
  .fa-trash,
  .fa-pen-to-square {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 375px) {
  h4 {
    font-size: 1.2rem;
  }

  .job-status,
  .fa-trash,
  .fa-pen-to-square {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 355px) {
  .week-btn {
    font-size: 0.3rem;
  }
}