.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6rem;
}

.tasks {
  display: grid;
  grid-template-columns: 1fr;
}
.task {
  display: grid;
  grid-template-columns: 11fr 1fr;
}

.tabPanel {
  display: flex;
}

.tabPanelItem {
  flex-grow: 1;
  padding: 5px;
  cursor: pointer;
  border-bottom: solid 2px #cae5fa;
}

.tabPanelItem:hover {
  border-bottom: solid 2px #298df8;
}

.tabPanelItemActive {
  border-bottom: solid 2px #298df8;
}