.main-layout-container {
  display: flex;
  min-height: 100vh;
}

.summary-content-div {
  padding-top: 110px;
  width: calc(100% - 232px);
  max-width: 1208px;
  margin-left: 96px;
  margin-top: 110px;
}

.headline-div {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 8px;
}

.headline-span-div {
  font-size: 24px;
  font-weight: 400;
  color: #2a3647;
  line-height: 120%;
}

.seperator-content {
  background-color: #d1d1d1;
  width: 0px;
  height: 59px;
  border: 3px solid #29abe2;
  border-radius: 10px;
}

.todo-done-div {
  display: flex;
  gap: 32px;
  margin-top: 56px;
}

.todo-div {
  display: flex;
  gap: 18px;
  background-color: white;
  border-radius: 30px;
  cursor: pointer;
}

.todo-div img {
  padding-top: 49.5px;
  padding-bottom: 49.5px;
  padding-left: 57px;
}

.todo-span-div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  padding-right: 63px;
}

.todo-number-span {
  font-size: 64px;
  font-weight: 600;
  line-height: 120%;
  color: #000000;
}

.todo-span {
  color: #2a3647;
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
}

.done-div {
  display: flex;
  gap: 18px;
  background-color: white;
  border-radius: 30px;
  cursor: pointer;
}

.done-div img {
  padding-top: 49px;
  padding-bottom: 49px;
  padding-left: 63.5px;
}

.done-span-div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  padding-right: 63.5px;
}

.done-number-span {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  line-height: 120%;
}

.done-span {
  color: #2a3647;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
}

.priority-date-greeting-div {
  display: flex;
  align-items: center;
  margin-top: 28px;
  gap: 80px;
}

.priority-date-div {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 30px;
  gap: 61px;
  cursor: pointer;
}

.seperator-content-summary {
  background-color: #d1d1d1;
  width: 0px;
  height: 102px;
  border: 2px solid #d1d1d1;
  border-radius: 10px;
}

.urgency-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.urgency-summary img {
  padding-top: 54px;
  padding-bottom: 54px;
  padding-left: 65px;
}

.urgency-span-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.urgency-span {
  color: #2a3647;
}

.urgency-number-span {
  font-size: 64px;
  font-weight: 700;
  color: #000000;
}

.date-summary {
  display: flex;
}

.date-span-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 41px;
  padding-top: 55px;
  padding-bottom: 55px;
  gap: 13px;
}

.date-span {
  font-size: 21px;
  font-weight: 700;
  color: #2a3647;
}

.date-number-span {
  color: #2a3647;
}

.greet-span-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}

.greet-span {
  color: #2a3647;
  font-weight: 500;
  font-size: 47px;
  line-height: 120%;
}

.greet-name-span {
  font-size: 64px;
  font-weight: 700;
  color: #29abe2;
  line-height: 120%;
}

.open-tasks-div {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  align-items: flex-start;
}

.tasks-in-board-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 30px;
  height: 168px;
  width: 168px;
  cursor: pointer;
}

.tasks-in-board-span {
  text-align: center;
  font-size: 20px;
  color: #2a3647;
  font-weight: 400;
}

.tasks-in-board-number-span {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  line-height: 120%;
}

.tasks-in-progress-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 30px;
  height: 168px;
  width: 168px;
  cursor: pointer;
}

.tasks-in-progress-span {
  text-align: center;
  font-size: 20px;
  color: #2a3647;
  font-weight: 400;
}

.tasks-in-progress-number-span {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  line-height: 120%;
}

.tasks-completed-span {
  text-align: center;
  font-size: 20px;
  color: #2a3647;
  font-weight: 400;
}
.tasks-completed-number-span {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  line-height: 120%;
}

.awaiting-feedback-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 30px;
  height: 168px;
  width: 168px;
  cursor: pointer;
}
.awaiting-feedback-span {
  text-align: center;
  font-size: 20px;
  color: #2a3647;
  font-weight: 400;
}
.awaiting-feedback-number-span {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  line-height: 120%;
}

.todo-div:hover *,
.done-div:hover *,
.priority-date-div:hover *,
.tasks-in-board-div:hover *,
.tasks-in-progress-div:hover *,
.awaiting-feedback-div:hover * {
  color: white;
}

.todo-div:hover,
.done-div:hover,
.priority-date-div:hover,
.tasks-in-board-div:hover,
.tasks-in-progress-div:hover,
.awaiting-feedback-div:hover {
  background-color: rgba(42, 54, 71, 1);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.125s ease;
  transform: scale(1.1);
}

.todo-div img.hover {
  display: none;
}

.todo-div:hover img.normal {
  display: none;
}

.todo-div:hover img.hover {
  display: inline;
}

.done-div img.hover {
  display: none;
}

.done-div:hover img.normal {
  display: none;
}

.done-div:hover img.hover {
  display: inline;
}

.greet-overlay{
  display: none;
}