@charset "UTF-8";
/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
:root {
  --color-deadline: #000;
  --color-priority: #000;
  --color-priority-none: transparent;
  --color-priority-low: #a0e244;
  --color-priority-medium: #faa345;
  --color-priority-high: #fb5c6e;
  --color-priority-critical: #e61f1f;
}

.dark-layout {
  --color-deadline: #e0e0e0;
  --color-priority: #e0e0e0;
}

.modal-extra-wide {
  max-width: 1024px !important;
}

.modal-extra-extra-wide {
  max-width: 1280px !important;
}

.badge.badge-light-secondary-override {
  background-color: rgba(130, 134, 139, 0.33) !important;
  color: #82868b !important;
}

.table-task {
  table-layout: fixed;
}

.table-task thead {
  background-color: #f3f2f7;
}

.table-task thead th {
  position: relative;
  height: 40px;
  padding: 4px 8px;
  border-bottom: 1px solid #ebe9f1;
  overflow: hidden;
  text-align: left;
  /*text-overflow: ellipsis;*/
  vertical-align: middle;
  white-space: nowrap;
}

.table-task th.sort {
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.table-task th.sort .th {
  display: inline-grid;
  grid-template-columns: auto max-content max-content; /* Text takes space, arrows take min space */
  align-items: center;
  gap: 0.5rem;
}

.table-task th.sort .th::before,
.table-task th.sort .th::after {
  content: "▲";
  grid-column: 2;
  grid-row: 1;
  display: block;
  opacity: 0.15;
  line-height: 0.5;
}

.table-task th.sort .th::before {
  transform: translateY(-8px); /* Move Up arrow slightly up */
}

.table-task th.sort .th::after {
  content: "▼";
  transform: translateY(8px); /* Move Down arrow slightly down */
}

.table-task th.sort.sort-asc .th::before,
.table-task th.sort.sort-desc .th::after {
  opacity: 1;
}

.table-task th.sort .th:empty {
  gap: 0;
  margin-left: -4px;
}

.table-task td {
  position: relative;
  height: 48px;
  padding: 4px 8px;
  border-bottom: 1px solid #ebe9f1;
  text-align: left;
}

.table-task tr {
  transition: background-color 0.15s ease-in-out;
}

.table-task tr:hover {
  _background-color: var(--bs-table-hover-bg);
}

.table-task tbody tr:last-child td {
  border-bottom: none;
}

.table-task .task-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.4rem minmax(0, auto);
  width: 100%;
}

.table-task .task-list.copy {
  width: calc(100% - 32px);
}

.table-task .task-list h6 {
  padding: 2px 0;
}

.table-task .task-list > :first-child {
  position: relative;
  overflow: hidden;
}

.table-task .task-list > :first-child:hover {
  overflow: unset;
}

.table-task .task-list > :first-child:hover h6 {
  position: absolute;
  padding-right: 0.5rem;
  overflow: visible;
  z-index: 1;
}

.table-task .task-list > :first-child:hover h6.truncated::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  filter: drop-shadow(0px 0px 3px black);
  background-image: linear-gradient(90deg, transparent 80%, white);
}

.table-task .task-list > :first-child:hover h6.truncated::after {
  content: attr(data-bs-original-title);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 2px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 80%, var(--color-table-row, #fff) 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 80%, white 80%);
          mask-image: linear-gradient(90deg, transparent 80%, white 80%);
}

.table-task .copytoclipboard {
  position: absolute;
  top: -7px;
  right: -36px;
}

.task-priority {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 100%;
  border-radius: 10px 0 0 10px;
  background-color: var(--color-priority);
  _background-image: linear-gradient(to left, transparent, var(--color-priority));
  cursor: pointer;
}

.button-task-deadline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.button-task-status {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  padding: 0.125rem 0.7rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.status-deadline {
  text-align: center;
}
.status-deadline .button-task-deadline {
  padding: 0.1rem 1rem;
  border: none;
  box-shadow: none;
  font-size: 0.75rem;
}

.project-list-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: max-content max-content;
  grid-gap: 8px;
  line-height: 1.1;
}

.state-view-current .list-item[data-callback=menuItemNotify] {
  display: none;
}

.state-view-final_review .archive-project-tasks,
.state-view-final_review .button-task-archive,
.state-view-final_review .button-task-completed {
  display: block !important;
}

.state-view-final_review .button-task-send {
  display: none;
}

.menu {
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu[popover] {
  position: absolute;
  top: anchor(bottom);
  right: anchor(right);
  bottom: anchor(top);
  left: anchor(left);
  width: -moz-max-content;
  width: max-content;
  margin-block-start: 16px;
  opacity: 0;
  animation: popover 0.2s ease-out forwards;
}

@keyframes popover {
  0% {
    opacity: 0;
    translate: 0 -16px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.menu-action[popover] {
  left: anchor(bottom);
}

.menu-priority[popover],
.menu-stage[popover] {
  margin-block-start: 0;
}

.menu-tab-bar-add-tab[popover] {
  left: anchor(bottom);
  right: anchor(left);
  margin: 4px 96px 0 0;
}

.menu .menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  grid-template-rows: 8px minmax(32px, auto) 8px;
  place-items: center;
  justify-items: left;
  border-radius: 12px;
  font-size: 1rem;
}

.menu .menu-item:has(> .leading) {
  grid-template-columns: 12px 20px 8px 1fr 12px;
}

.menu .menu-item:has(> .trailing) {
  grid-template-columns: 12px 1fr 8px 20px 12px;
}

.menu .menu-item:has(> .leading.trailing) {
  grid-template-columns: 12px 20px 8px 1fr 8px 20px 12px;
}

.menu .menu-item:has(> .label) {
  grid-template-rows: 8px minmax(16px, auto) 8px;
  justify-items: left;
  font-size: 0.9rem;
  font-weight: bold;
}
.menu .menu-item:has(> .label):hover {
  background-color: transparent;
  cursor: default;
}

.menu .menu-item:has(> .divider) {
  grid-template-rows: 8px minmax(16px, auto) 8px;
  justify-items: left;
  font-size: 0.8rem;
  font-weight: bold;
}
.menu .menu-item:has(> .divider):hover {
  background-color: transparent;
  cursor: default;
}

.menu .menu-item:hover {
  background-color: rgba(46, 5, 235, 0.12);
  cursor: pointer;
}

.menu .menu-item :first-child {
  grid-area: 2/2/3/3;
}

.menu .menu-item :nth-child(2) {
  grid-area: 2/4/3/5;
  justify-self: start;
}

.menu .menu-item :nth-child(3) {
  grid-area: 2/6/3/7;
  font-size: 0.75rem;
}

.menu .menu-item.selected {
  background-color: rgba(46, 5, 235, 0.22);
}

.menu .menu-item.selected:hover {
  background-color: transparent;
  cursor: pointer;
}

.tab-bar .btn {
  --tab-color: black;
  --tab-bg-color: #edebf7;
  position: relative;
  margin-left: 4px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--tab-color);
  background-color: var(--tab-bg-color);
}

.tab-bar .btn-check:focus + .btn,
.tab-bar .btn:focus {
  box-shadow: none;
}

.tab-bar .btn-check:checked + .btn::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background-color: var(--tab-bg-color);
}

.tab-bar .btn:hover,
.tab-bar .btn-check:checked + .btn:hover,
.tab-bar .btn-check:checked + .btn:hover::before {
  background: color-mix(in oklab, var(--tab-bg-color), var(--tab-color) 10%);
}

.tab-bar .btn-check:checked + .btn {
  _box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
}

.dark-layout .tab-bar .btn:not([class*=btn-]) {
  color: var(--tab-color);
  --tab-bg-color: #39436c;
}

.dark-layout .tab-bar .btn {
  --tab-color: white;
  --tab-bg-color: #444;
}

button {
  border: 0;
}

.collaborator {
  --parent-size: 32px;
  --child-radius: 20px;
  --angle-start: 180deg;
  position: absolute;
  width: var(--parent-size);
  height: var(--parent-size);
  border-radius: 50%;
  pointer-events: none;
}

/* Orbiter: centered at the middle of the ring and rotated by angle */
.collaborator > div {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: dodgerblue;
  translate: -50% -50%;
  rotate: calc(var(--angle-start) + var(--i, 0) * 360deg / var(--children, 1));
  transform: translateY(calc(-1 * var(--child-radius))) rotate(calc(-1 * (var(--angle-start) + var(--i) * 360deg / var(--children, 1))));
  transition: transform 0.2s ease-in-out;
  pointer-events: auto;
}

.collaborator > div:hover {
  scale: 1.25;
}

/* MD3 Icon Button */
.md3-icon-btn {
  border: 0 solid #79747E;
  border-radius: 32px;
  width: 56px;
  height: 56px !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #49454F;
  background: transparent;
}

.md3-icon-btn:hover {
  border-color: #49454F;
  background-color: #f5f5f5;
  color: #1D1B20;
}

/* Dark Layout Overrides */
.dark-layout {
  --color-table-row: #242b3d;
}
.dark-layout .table-task thead {
  background-color: #30385a;
}
.dark-layout .table-task thead th {
  border-bottom-color: #30385a;
}
.dark-layout .table-task td {
  border-bottom-color: #30385a;
}
.dark-layout .table-task .task-list > :first-child:hover h6.truncated::after {
  background: linear-gradient(90deg, transparent 80%, #242b3d 80%);
}
.dark-layout .menu {
  background-color: #242b3d;
  border-color: #30385a;
  color: #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.dark-layout .menu .menu-item {
  color: #e0e0e0;
}
.dark-layout .menu .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.dark-layout .menu .menu-item.selected {
  background-color: rgba(3, 179, 249, 0.15);
  color: #fff;
}
.dark-layout .menu .menu-item.selected:hover {
  background-color: rgba(3, 179, 249, 0.25);
}
.dark-layout .menu .menu-item .label {
  color: #c4c4c4;
}
.dark-layout .tab-bar .btn:not([class*=btn-]) {
  --tab-bg-color: #30385a;
}
.dark-layout .tab-bar .btn {
  --tab-bg-color: #161d31;
}
.dark-layout .md3-icon-btn {
  color: #e0e0e0;
}
.dark-layout .md3-icon-btn:hover {
  background-color: #30385a;
  color: #fff;
  border-color: #c4c4c4;
}
.dark-layout .md3-icon-btn:focus, .dark-layout .md3-icon-btn:active {
  border-color: #d0bcff;
  color: #d0bcff;
  box-shadow: none !important;
}
.dark-layout .btn-configure-tabs {
  color: #e0e0e0;
}
.dark-layout .btn-configure-tabs:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.dark-layout .filter-popover-pane {
  background-color: #242b3d;
  color: #e0e0e0;
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.6);
}
.dark-layout .filter-popover-pane .bg-white {
  background-color: #242b3d !important;
  color: #e0e0e0;
}
.dark-layout .filter-popover-pane .border-bottom {
  border-bottom-color: #30385a !important;
}
.dark-layout .filter-popover-pane .md3-headline-small,
.dark-layout .filter-popover-pane .md3-label-large {
  color: #e0e0e0;
}
.dark-layout .filter-popover-pane .text-primary {
  color: #fff !important;
}
.dark-layout .filter-popover-pane .text-muted {
  color: #c4c4c4 !important;
}
.dark-layout .filter-popover-pane .text-dark {
  color: #e0e0e0 !important;
}
.dark-layout .filter-popover-pane .btn-text-primary {
  color: #fff;
}
.dark-layout .filter-popover-pane .btn-text-primary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.dark-layout .filter-popover-pane .btn-text-danger:hover {
  background-color: rgba(179, 38, 30, 0.2);
}
.dark-layout .filter-popover-pane .btn-link.text-primary {
  color: #337ab7 !important;
}
.dark-layout .filter-popover-pane .btn-link.text-muted {
  color: #c4c4c4 !important;
}
.dark-layout .filter-popover-pane::-webkit-scrollbar-thumb {
  background: #c4c4c4;
}
.dark-layout .filter-popover-pane::-webkit-scrollbar-track {
  background: transparent;
}
.dark-layout .filter-popover-pane .hover-bg-light:hover {
  background-color: #30385a !important;
}
.dark-layout .filter-popover-pane .form-control {
  background-color: #161d31;
  color: #e0e0e0;
  border-color: #30385a;
}
.dark-layout .filter-popover-pane .form-check-input {
  background-color: #161d31;
  border-color: #c4c4c4;
}
.dark-layout .filter-popover-pane .form-check-input:checked {
  background-color: #337ab7;
  border-color: #337ab7;
}
.dark-layout .filter-popover-pane i[style*="cursor: move"] {
  color: #c4c4c4 !important;
}
.dark-layout .filter-popover-pane .drag-handle {
  color: #c4c4c4 !important;
}
.dark-layout .filter-popover-pane .btn-icon {
  color: #e0e0e0;
  border-radius: 4px;
}
.dark-layout .filter-popover-pane .btn-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.dark-layout .filter-popover-pane .btn-icon.text-success {
  color: #28c76f !important;
}
.dark-layout .filter-popover-pane .btn-icon.text-danger {
  color: #ea5455 !important;
}
.dark-layout .filter-popover-pane .btn-icon.text-primary {
  color: #337ab7 !important;
}
.dark-layout .filter-popover-pane .btn-icon.text-muted {
  color: #c4c4c4 !important;
}
.dark-layout .md3-trigger {
  background-color: transparent;
  border-color: #c4c4c4 !important;
  color: #e0e0e0;
}
.dark-layout .md3-trigger:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #e0e0e0;
}
.dark-layout .md3-trigger:focus, .dark-layout .md3-trigger[aria-expanded=true] {
  border-color: #337ab7;
}
.dark-layout .md3-trigger:focus .md3-label, .dark-layout .md3-trigger[aria-expanded=true] .md3-label {
  color: #337ab7;
}
.dark-layout .md3-trigger .md3-label {
  color: #c4c4c4;
}
.dark-layout .md3-trigger .md3-value {
  color: #e0e0e0;
}
.dark-layout .md3-input {
  background-color: #161d31;
  border-color: #c4c4c4 !important;
  color: #e0e0e0;
}
.dark-layout .md3-floating-label {
  color: #c4c4c4 !important;
}
.dark-layout .dropdown-menu {
  background-color: #242b3d;
  border-color: #30385a;
  color: #e0e0e0;
}
.dark-layout .dropdown-menu .text-dark {
  color: #e0e0e0 !important;
}
.dark-layout .dropdown-menu .text-muted {
  color: #c4c4c4 !important;
}
.dark-layout .dropdown-menu .form-control {
  background-color: #161d31;
  border-color: #30385a;
  color: #e0e0e0;
}
.dark-layout .dropdown-menu .list-group-item {
  background-color: transparent;
  color: #e0e0e0;
  border-color: #30385a;
}
.dark-layout .dropdown-menu .list-group-item.bg-light, .dark-layout .dropdown-menu .list-group-item:hover, .dark-layout .dropdown-menu .list-group-item.draggable-item:hover {
  background-color: #30385a !important;
}