.board,
.board-body {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;
}

.board {
  padding: 0 40px;
}

.board-header {
  position: relative;
  display: flex;

  justify-content: space-between;

  flex-direction: row;

  width: 100%;

  padding: 40px 0;
  padding-bottom: 0;
}

.board-header-actions {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  padding: 5px 5px;

  border-radius: 12px;

  background: rgba(0, 0, 0, 0.05);
}

.board-header-action {
  position: relative;
  display: flex;
  gap: 5px;

  align-items: center;

  flex-direction: row;

  height: 30px;

  padding: 0 10px;

  border-radius: 8px;

  font-weight: 500;
  font-size: 12px;

  color: black;
  background: rgba(0, 0, 0, 0);
  transition: 0.3s all ease-out;
}
.board-header-action span {
  padding-top: 3px;
}
.board-header-action:hover {
  background: rgba(0, 0, 0, 0.05);
}

.board-body {
  padding: 40px 0;
  padding-top: 20px;
}

.board-section {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;
}
.board-section:not(:first-child) {
  margin-top: 20px;
}

.board-section-header {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-direction: row;

  width: 100%;

  padding: 10px 0;
}

.board-section-header-title {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: flex-start;

  flex-direction: row;

  width: 100%;

  padding: 10px 0;

  font-size: 12px;
  font-weight: 600;

  color: black;
  transition: 0.3s all ease-out;
}
.board-section-header-title:hover {
}
.board-section-header-title span {
  padding-top: 3px;
}

.board-section .board-section-header-title i {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;
  flex-wrap: wrap;

  transform: rotateZ(0);

  margin-left: 10px;

  width: 25px;
  height: 25px;

  border-radius: 6px;

  background: rgba(0, 0, 0, 0.03);
  transition: 0.3s all ease-out;
}
.board-section .board-section-header-title i::before {
  transition: 0.3s all ease-out;
}
.board-section.closed .board-section-header-title i::before {
  transform: rotateZ(180deg);
}
.board-section-header-title:hover i {
  background: rgba(0, 0, 0, 0.06);
}

.board-section-header-actions {
  position: relative;
  display: flex;
  gap: 5px;

  align-items: center;

  flex-direction: row;
}
.board-section-header-action-container {
  position: relative;
  display: flex;
}
.board-section-header-action {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  height: 30px;

  padding: 0 10px;

  border-radius: 6px;

  font-size: 12px;

  color: black;

  background: rgba(0, 0, 0, 0.03);
  transition: 0.3s all ease-out;
}
.board-section-header-action-dropdown {
  position: absolute;
  display: none;
  overflow: hidden;
  overflow-y: auto;
  z-index: 5;

  flex-direction: column;

  width: 100%;
  min-width: 120px;
  max-width: 120px;
  max-height: 170px;

  top: calc(100% + 5px);
  left: 0;

  padding: 7px 0;

  border-radius: 8px;

  background: rgba(247, 247, 247, 1);
}
.board-section-header-action-container.opened .board-section-header-action-dropdown {
  display: flex;
}

.board-section-header-action-dropdown-item {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  padding: 5px 10px;

  font-size: 12px;

  color: black;
  transition: 0.3s all ease-out;
}
.board-section-header-action-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.board-section-header-action-dropdown-item span {
  padding-top: 3px;
}

.board-section-body {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;
}
.board-section.closed .board-section-body {
  display: none;
}



/* Type: Boxes. */
.board-section-boxes {
  position: relative;
  display: flex;
  gap: 10px;

  align-items: flex-start;
  justify-content: flex-start;

  flex-direction: row;
  flex-wrap: wrap;

  width: 100%;

  --board-boxes-border-color: rgba(0, 0, 0, 0.1);
  --board-boxes-per-row: 4; /* Default, overrided from element. */
}

.board-section-boxes-task {
  position: relative;
  display: flex;
  flex: 1;

  flex-direction: column;

  --board-boxes-task-width: calc((100% - ((var(--board-boxes-per-row) - 1) * 10px)) / var(--board-boxes-per-row));
  min-width: var(--board-boxes-task-width);
  max-width: var(--board-boxes-task-width);
  /* height: 140px; */

  border: 1px solid var(--board-boxes-border-color);

  text-decoration: none;

  font-size: 12px;

  fill: currentColor;
  color: black;
}

.board-section-boxes-task-squarer {
  position: relative;
  display: flex;

  padding-top: 100%;
}

.board-section-boxes-task-thumbnail {
  position: absolute;
  display: flex;
  z-index: 1;

  top: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

.board-section-boxes-task-inner {
  position: absolute;
  display: flex;
  z-index: 2;

  flex-direction: column;

  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 100%;
}

.board-section-boxes-task-counter {
  position: absolute;
  display: flex;
  z-index: 2;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  top: 0;
  left: 0;

  height: 40px;
  min-width: 40px;

  padding-top: 3px;

  font-size: 12px;
  font-weight: 600;

  color: black;

  border: 0 solid var(--board-boxes-border-color);
  border-right-width: 1px;
  border-bottom-width: 1px;

  background: white;
}

.board-section-boxes-task-title {
  position: relative;
  display: flex;

  align-content: center;
  justify-content: flex-start;

  flex-direction: row;
  flex-wrap: wrap;

  margin-top: auto;

  width: 100%;
  height: 40px;

  padding: 0 20px;
  padding-top: 3px;

  font-size: 14px;
  font-weight: 600;

  /* border-top: 1px solid var(--board-boxes-border-color); */

  color: white;
  background: rgba(0, 0, 0, 0.25);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05));
}



/* Type: List. */
.board-section-list {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;
}

.board-section-list-task {
  cursor: pointer;
  position: relative;
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-direction: row;

  padding: 0 20px;

  border-top: 1px solid rgba(0, 0, 0, 0.05);

  transition: 0.3s all ease-out;
}
.board-section-list-task:focus,
.board-section-list-task:hover {
  background: rgba(5, 170, 240, 0.03);
}
.board-section-list-task:focus {
}
.board-section-list-task.completed {
  opacity: 0.7;
}

.board-section-list-task > div {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;
}

.board-section-list-task-check {
  cursor: pointer;
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;

  font-size: 12px;

  border: 1px solid black;
  border-color: currentColor;
  border-radius: 100px;

  outline: 0;

  fill: currentColor;
  color: rgba(0, 0, 0, 0.3);

  transition: 0.3s all ease-out;
}
.board-section-list-task-check:focus,
.board-section-list-task-check:hover {
  color: rgba(30, 150, 240, 1);
}

.board-section-list-task.completed .board-section-list-task-check {
  background: rgba(75, 175, 80, 1);
  color: white;
}

.board-section-list-task-title {
  position: relative;
  display: flex;
  /* flex: 1; */

  flex-direction: row;

  appearance: none;
  padding: 0;
  margin: 0;
  outline: 0;

  margin-right: 5px;

  padding: 7px 20px;
  padding-right: 5px;
  padding-top: calc(7px + 3px);

  line-height: 1.5;

  font-size: 14px;
  font-weight: 500;

  border: 0;

  color: rgba(0, 0, 0, 0.7);
  background: inherit;
}

.board-section-list-task-duedate {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: rgba(170, 170, 170, 1);
}

.board-section-list-task[task-id="NEW"] .board-section-list-task-title {
  margin: 0;

  width: 100%;
}
.board-section-list-task[task-id="NEW"] .board-section-list-task-title::placeholder {
  color: rgba(0, 0, 0, 0.3);
}




/* Taskview. */
.taskview {
  position: fixed;
  display: none;
  z-index: 1010;

  flex-direction: column;

  width: 100vw;
  height: 100vh;

  padding: 0 40px;

  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  background: rgba(0, 0, 0, 0.3);
}
.taskview.active {
  display: flex;
}

.taskview-container {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  overflow-y: auto;

  flex-direction: column;

  margin: 0 auto;

  width: 100%;
  max-width: 650px;
  height: 100vh;

  padding-bottom: 60px;

  background: white;
}

.taskview-header {
  position: sticky;
  display: flex;
  z-index: 1;

  align-items: center;

  flex-direction: row;

  top: 0;

  width: 100%;

  padding: 10px 20px;

  background: rgba(255, 255, 255, 0.95);
}

.taskview-header-task {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  width: 100%;

  padding: 10px 20px;
}
.taskview-header-task-check {
  cursor: pointer;
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;

  font-size: 12px;

  border: 1px solid black;
  border-color: currentColor;
  border-radius: 100px;

  outline: 0;

  fill: currentColor;
  color: rgba(0, 0, 0, 0.3);

  transition: 0.3s all ease-out;
}
.taskview-header-task-check:focus,
.taskview-header-task-check:hover {
  color: rgba(30, 150, 240, 1);
}

.taskview.completed .taskview-header-task-check {
  background: rgba(75, 175, 80, 1);
  color: white;
}

.taskview-header-task-title {
  position: relative;
  display: flex;
  /* flex: 1; */

  flex-direction: row;

  appearance: none;
  padding: 0;
  margin: 0;
  outline: 0;

  margin-right: 5px;

  padding: 7px 40px;
  padding-right: 5px;
  padding-top: calc(7px + 3px);

  line-height: 1.5;

  font-size: 14px;
  font-weight: 500;

  border: 0;

  color: rgba(0, 0, 0, 0.7);
  background: inherit;
}

.taskview-thumbnail {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 0 40px;
}
.taskview-thumbnail-image {
  position: relative;
  display: flex;

  width: 100%;
  height: auto;

  border-radius: 8px;

  object-fit: cover;
  object-position: center center;
}

.taskview-info {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 10px 20px;
}

.taskview-info-row {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-direction: row;

  width: 100%;

  padding: 10px 20px;
}

.taskview-info-item-container {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;
}
.taskview-info-item {
  cursor: pointer;
  position: relative;
  display: flex;
  gap: 5px;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  padding: 7px 15px;

  border-radius: 8px;

  font-size: 12px;
  font-weight: 500;

  fill: currentColor;
  color: black;
  background: rgba(0, 0, 0, 0.05);

  transition: 0.3s all ease-out;
}
.taskview-info-item:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.taskview-info-item span {
  padding-top: 5px;
}

.taskview-info-item-popup {
  position: absolute;
  display: none;
  z-index: 10;
  gap: 5px;
  flex-shrink: 0;

  flex-direction: column;

  top: calc(100% + 5px);
  left: 0;

  width: 100%;
  min-width: 120px;
}
.taskview-info-item-container.poped .taskview-info-item-popup {
  display: flex;
}
.taskview-info-item-popup-inputgroup {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  width: 100%;

  border-radius: 8px;

  background: rgba(242, 242, 242, 1);
}
.taskview-info-item-popup-input {
  position: relative;
  display: flex;

  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;

  width: 100%;
  height: 35px;

  padding: 5px 10px;

  font-weight: 600;
  font-size: 11px;

  background: rgba(0, 0, 0, 0);
}
.taskview-info-item-popup-suggestions {
  position: relative;
  display: flex;
  overflow: hidden;
  overflow-y: auto;

  flex-direction: column;

  width: 100%;
  max-height: 150px;

  padding: 10px 0;

  border-radius: 8px;

  background: rgba(242, 242, 242, 1);
}
.taskview-info-item-popup-suggestion {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  width: 100%;

  padding: 5px 10px;
  padding-top: calc(5px + 3px);

  font-weight: 500;
  font-size: 11px;

  color: rgba(0, 0, 0, 0.4);
  transition: 0.16s all ease-out;
}
.taskview-info-item-popup-suggestion:hover {
  color: rgba(0, 0, 0, 1);
  background: rgba(0, 0, 0, 0.05);
}


.taskview-overview {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 40px;
}

.taskview-overview-save-button {
  cursor: pointer;
  position: sticky;
  display: none;
  z-index: 1;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  bottom: 0;

  appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;

  margin: 10px 0;

  width: 100%;
  height: 45px;

  padding: 0 20px;

  border-radius: 12px;

  font-size: 12px;
  font-weight: 600;

  fill: currentColor;
  color: white;

  background: #00BC08;
}
.taskview-overview-save-button[name="edit_overview"] {
  background: #0098BC;
}
.taskview-overview-save-button.active {
  display: flex;
}


.taskview-comments {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 20px 40px;
}

.taskview-comment {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 20px 0;
}

.taskview-comment-header {
  position: relative;
  display: flex;
  gap: 10px;
  flex-shrink: 0;

  align-items: center;
  justify-content: space-between;

  flex-direction: row;

  width: 100%;
}

.taskview-comment-user {
  position: relative;
  display: flex;
  gap: 10px;
  flex-shrink: 0;

  align-items: center;

  flex-direction: row;
}

.taskview-comment-user-avatar {
  position: relative;
  display: flex;

  flex-direction: row;

  object-fit: cover;
  object-position: center center;

  width: 25px;
  height: 25px;

  border-radius: 100px;
}
.taskview-comment-user-name {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  padding-top: 3px;

  font-size: 12px;
  font-weight: 600;
}

.taskview-comment-content {
  position: relative;
  display: flex;
  gap: 5px;

  flex-direction: column;

  margin: 10px 0;

  width: 100%;

  padding: 20px 20px;

  font-size: 11px;

  line-height: 1.5;

  border-radius: 4px;

  background: rgba(0, 0, 0, 0.05);
}

.taskview-comment-date {
  position: relative;
  display: flex;
  gap: 5px;

  align-items: center;

  flex-direction: row;

  font-size: 12px;
  font-weight: 500;

  color: rgba(180, 180, 180, 1);
}
.taskview-comment-date span {
  margin-top: 3px;
}


.taskview-commenting-container {
  position: relative;
  display: flex;
  gap: 10px;
  flex-shrink: 0;

  flex-direction: column;

  margin: 20px 0;

  width: 100%;

  padding: 20px 40px;
}

.taskview-commenting-editing {
  position: relative;
  display: flex;
  gap: 10px;
  flex-shrink: 0;

  align-items: flex-start;

  flex-direction: row;
}
#taskview-commenting-editor {
  position: relative;

  width: 100%;
}
.taskview-commenting-avatar {
  position: relative;
  display: flex;

  align-content: center;
  justify-content: center;

  flex-direction: row;

  width: 30px;
  height: 30px;

  object-fit: cover;
  object-position: center center;

  border-radius: 100px;
}

.taskview-commenting-button {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-direction: row;

  margin-top: 10px;
  margin-right: auto;

  height: 40px;

  padding: 0 15px;
  padding-left: calc(35px + 15px);

  font-weight: 600;
  font-size: 12px;

  border-radius: 100px;
  border: 2px solid rgba(242, 242, 242, 1);

  color: black;
  opacity: 0.75;

  transition: 0.3s all ease-out;
}
.taskview-commenting-button span {
  margin-top: 3px;
}
.taskview-commenting-button-icon-container {
  position: absolute;
  display: flex;
  z-index: 1;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  top: -2px;
  left: -2px;

  width: 40px;
  height: 40px;

  font-size: 12px;

  border-radius: 100px;
  border: 2px solid rgba(242, 242, 242, 1);

  color: white;
  background: rgba(0, 0, 0, 1);
}
.taskview-commenting-button:hover {
  opacity: 1;
}
.taskview-commenting-button.is_loading {
  pointer-events: none;
  opacity: 0.3;
}




/* Board Create. */
.board-create-form {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  margin: 0 auto;

  width: 100%;
  max-width: 450px;
  min-height: 400px;

  padding: 0 40px;
}
.board-create-form-title {
  position: relative;
  display: flex;

  flex-direction: row;

  margin: 10px 0;

  width: 100%;

  font-size: 18px;
  font-weight: 600;
}

.board-create-form-group {
  position: relative;
  display: flex;

  flex-direction: column;

  margin: 10px 0;

  width: 100%;
}

.board-create-form-label {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  margin-bottom: 5px;

  font-size: 14px;
  font-weight: 500;

  color: rgba(90, 90, 120, 1);
}

.board-create-form-input {
  position: relative;
  display: flex;

  flex-direction: row;

  appearance: none;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;

  width: 100%;
  height: 40px;

  padding: 0 20px;

  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.05);

  font-size: 14px;

  transition: 0.3s all ease-out;
}
.board-create-form-input:focus {
  border-color: rgba(65, 80, 180, 0.5);
}

.board-create-form-button {
  cursor: pointer;
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  appearance: none;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;

  margin: 10px 0;

  width: 100%;
  height: 40px;

  border-radius: 12px;

  font-size: 12px;
  font-weight: 600;

  color: white;
  background: rgba(0, 0, 0, 0.8);

  transition: 0.3s all ease-out;
}
.board-create-form-button span {
  padding-top: 3px;
}

.board-create-form-button:focus,
.board-create-form-button:hover {
  background: rgba(0, 0, 0, 1);
}
.board-create-form-button:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}