body {
  font-family: "Roboto", sans-serif;
}

.App {
  /* font-family: sans-serif; */
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.all-tasks-container {
  margin-top: 2rem;
}

.task-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  cursor: pointer;
}

.task-container:hover {
  background-color: #f1f3f6;
}

.task-header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  background-color: #5a5bc4;
  position: sticky;
  top: 0;
  padding: 0.5rem;
  color: white;
}

.high {
  color: crimson;
}

.low {
  color: green;
}

.medium-priority {
  color: blue;
}

.high,
.low,
.medium-priority,
.urgent {
  font-weight: bold;
}

.urgent {
  color: red;
}

.date-category {
  color: lightslategray;
}

.task-modal {
  width: 75%;
  /* background-color: lightgrey; */
}

.selected-task-modal-header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  border-radius: 1rem;
  /* background-color: #dfe6e9; */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.selected-task-modal-footer {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: right;
  align-items: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.selected-task-modal-body {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.button-close {
  background-color: #5a5bc4;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: white;
}

.comment-item {
  padding-bottom: 0.5rem;
  border-bottom: solid 0.5px lightgrey;
}

.selected-task-modal-comments-container {
  margin-top: 0.5rem;
}

.task-description {
  font-size: 1.2rem;
}

.Layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  justify-content: center;
  align-items: flex-start;
  gap: 0.2rem;
}

header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  justify-content: center;
  text-align: center;
  align-items: center;
  grid-column: 1/13;
  gap: 1rem;
  padding: 1rem;
  /* border-radius: 1rem; */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.add-new-task-link {
  grid-column: 10/12;
}

aside {
  /* border-radius: 1rem; */
  grid-column: 1/3;
  height: 100vh;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

main {
  grid-column: 3/13;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.lucide-user {
  grid-column: 12/13;
}

.header-title {
  grid-column: 1/5;
}

.TaskPage {
  border-radius: 1rem;
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
  padding: 1rem;
}

.selected-task-page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: #f1f3f6;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.add-comment-box {
  margin-top: 0.5rem;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.sidbar-nav-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
}

.comment-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

.commented-by,
.commented-date {
  font-size: 0.8rem;
}

a {
  text-decoration: none;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

a:hover {
  background-color: #f1f3f6;
}

.CreateNewTaskPage {
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
  padding: 1rem;
}

.new-task-form {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.selected-task-page-comments-container {
  border-top: solid 0.5px lightgrey;
}

.dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.dropdown-content {
  margin-top: 0px;
  display: none;
  position: absolute;
  background-color: aliceblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.user-dropdown-content {
  margin-top: 0px;
  display: none;
  position: absolute;
  background-color: aliceblue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  padding: 1rem;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.lucide-user-header-icon:hover .user-dropdown-content {
  display: block;
}

.dropdown ol {
  list-style: none;
  padding-left: 0px;
}

.dropdown li {
  padding: 0.5rem;
}

.dropdown li:hover {
  background-color: lightgray;
  cursor: pointer;
}

.lucide {
  vertical-align: middle;
}

.task-table-task-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* max-width: 200px; */
}

.selected-task-page-header > .task-title {
  /* white-space: nowrap; */
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

hr {
  color: aliceblue;
}

.create-view-page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f3f6;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.create-view-page-selection-container {
  /* border: solid 1px lightgrey; */
  border-radius: 1rem;
  padding: 1rem;
}

.search-label-element:hover {
  background-color: aliceblue;
  border-radius: 0.5rem;
  cursor: pointer;
}

.search-labels-contianer {
  border: solid 0.5px lightgrey;
  padding: 0.5rem;
  height: 250px;
  overflow: scroll;
}

.comment-attachment-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.drop-down-list-show {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  border: solid 0.5px lightgrey;
  padding: 0.5rem;
  z-index: 9999;
  background-color: aliceblue;
}

.drop-down-list-hide {
  display: none;
}

.drop-down-option {
  padding: 0.5rem;
  width: 99%;
}

.drop-down-option:hover {
  background-color: lightgray;
  cursor: pointer;
}

.micro-task-item {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.2rem;
}

.micro-task-item:hover {
  background-color: #f1f3f6;
}

.task-title {
  padding: 1rem;
  font-weight: bold;
  display: block;
  text-align: center;
}
