body {
  --primary-100: #e8f7f4;
  --primary-300: #d8f5f5;
  --primary-700: #309096;
  --secondary: #6b7280;
  --blue-300: #cee7f7;
  --blue-500: #1aa5f8;
  --blue-700: #0186d5;
  --blue-900: #1f78b4;
  --green-700: #41c04f;
  --green-300: #d5fdda;
  --green-900: #35953f;
  --neutral-200: #f7f9fc;
  --neutral-300: #e7eaf0;
  --neutral-400: #c2c7ce;
  --neutral-500: #929aa6;
  --neutral-600: #677281;
  --neutral-700: #293442;
  --gray-700: #374151;
  --red-300: #fde0e0;
  --red-700: #ee4040;
  --red-900: #c13434;
  --orange-300: #ffe7ce;
  --orange-700: #ff7f00;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--surface-900);
  margin: 1.5rem 0 1rem;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

.bg-surface-300 {
  background-color: #e0e0e0;
}

.project-dropdown .p-dropdown-item-label {
  font-size: 14px !important;
}

.p-datepicker table td > span {
  width: 1.8rem;
  height: 1.8rem;
}

.p-datepicker table td > span.p-highlight {
  color: #fff;
}

.p-datatable .p-sortable-column.p-highlight, .p-selection-column, .p-datatable .p-datatable-tbody > tr.p-highlight {
  background: #fff;
}

.layout-container {
  flex-direction: row;
  display: flex;
}

.Sidebar {
  width: 13.75rem;
}

.content {
  padding: 16px;
}

.content.pinned {
  margin-left: 15rem;
}

.hover-card {
  transition: transform .3s, box-shadow .3s;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 12px #0003;
}

.p-progressbar {
  background-color: #f7f9fc;
}

.p-progressbar, .p-progressbar-value {
  border-radius: 9999px;
}

.p-progressbar-value {
  background-color: var(--green-700);
}

.p-progress-timeline {
  height: 16px;
}

.text-primary-100 {
  color: var(--primary-100);
}

.text-primary-300 {
  color: var(--primary-300);
}

.text-primary-700 {
  color: var(--primary-700);
}

.text-secondary {
  color: var(--secondary);
}

.text-blue-300 {
  color: var(--blue-300);
}

.text-blue-500 {
  color: var(--blue-500);
}

.text-blue-700 {
  color: var(--blue-700);
}

.text-blue-900 {
  color: var(--blue-900);
}

.text-green-700 {
  color: var(--green-700);
}

.text-green-300 {
  color: var(--green-300);
}

.text-neutral-400 {
  color: var(--neutral-400);
}

.text-neutral-300 {
  color: var(--neutral-300);
}

.text-neutral-500 {
  color: var(--neutral-500);
}

.text-neutral-600 {
  color: var(--neutral-600);
}

.text-neutral-700 {
  color: var(--neutral-700);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-red-300 {
  color: var(--red-300);
}

.text-red-700 {
  color: var(--red-700);
}

.text-red-900 {
  color: var(--red-900);
}

.text-orange-300 {
  color: var(--orange-300);
}

.text-orange-700 {
  color: var(--orange-700);
}

.bg-primary-100 {
  background-color: var(--primary-100);
}

.bg-primary-300 {
  background-color: var(--primary-300);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-blue-300 {
  background-color: var(--blue-300);
}

.bg-blue-500 {
  background-color: var(--blue-500);
}

.bg-blue-700 {
  background-color: var(--blue-700);
}

.bg-blue-900 {
  background-color: var(--blue-900);
}

.bg-green-700 {
  background-color: var(--green-700);
}

.bg-green-300 {
  background-color: var(--green-300);
}

.bg-neutral-200 {
  background-color: var(--neutral-200);
}

.bg-neutral-400 {
  background-color: var(--neutral-400);
}

.bg-neutral-300 {
  background-color: var(--neutral-300);
}

.bg-neutral-500 {
  background-color: var(--neutral-500);
}

.bg-neutral-600 {
  background-color: var(--neutral-600);
}

.bg-neutral-700 {
  background-color: var(--neutral-700);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-red-300 {
  background-color: var(--red-300);
}

.bg-red-700 {
  background-color: var(--red-700);
}

.bg-red-900 {
  background-color: var(--red-900);
}

.bg-orange-300 {
  background-color: var(--orange-300);
}

.bg-orange-700 {
  background-color: var(--orange-700);
}

.border-primary-100 {
  border-color: var(--primary-100);
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-700 {
  border-color: var(--primary-700);
}

.border-secondary {
  border-color: var(--secondary);
}

.border-blue-300 {
  border-color: var(--blue-300);
}

.border-blue-500 {
  border-color: var(--blue-500);
}

.border-blue-700 {
  border-color: var(--blue-700);
}

.border-blue-900 {
  border-color: var(--blue-900);
}

.border-green-700 {
  border-color: var(--green-700);
}

.border-green-300 {
  border-color: var(--green-300);
}

.border-neutral-200 {
  border-color: var(--neutral-200);
}

.border-neutral-400 {
  border-color: var(--neutral-400);
}

.border-neutral-300 {
  border-color: var(--neutral-300);
}

.border-neutral-500 {
  border-color: var(--neutral-500);
}

.border-neutral-600 {
  border-color: var(--neutral-600);
}

.border-neutral-700 {
  border-color: var(--neutral-700);
}

.border-gray-700 {
  border-color: var(--gray-700);
}

.border-red-300 {
  border-color: var(--red-300);
}

.border-red-700 {
  border-color: var(--red-700);
}

.border-red-900 {
  border-color: var(--red-900);
}

.border-orange-300 {
  border-color: var(--orange-300);
}

.border-orange-700 {
  border-color: var(--orange-700);
}

.ml-2_5 {
  padding-left: .6rem;
}

.p-input-icon-left > .p-inputtext {
  padding-left: 2.5rem;
}

.table-status-on-track {
  color: #00f;
}

.table-status-acceptable-delayed {
  color: green;
}

.table-status-very-late {
  color: orange;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  color: #fff;
}

.p-multiselect-items .p-multiselect-item.p-highlight {
  background: #fff;
}

.p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
  background: #14b8a63d;
}

.custom-label {
  color: #000;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  padding: 10px;
}

.p-timeline-event-opposite {
  display: none;
}

.p-paginator .p-paginator-pages .p-paginator-page {
  min-width: 2rem;
  height: 2rem;
}

.p-paginator {
  justify-content: right;
}

.p-datatable .p-column-header-content .p-sortable-column-icon {
  opacity: 0;
  transition: opacity .2s;
}

.p-datatable .p-column-header-content:hover .p-sortable-column-icon, .p-datatable .p-column-header.p-highlight .p-sortable-column-icon {
  opacity: 1 !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight:hover, .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: #fff;
  background: var(--primary-700);
}

.p-button:disabled {
  background-color: var(--neutral-400);
  border-color: var(--neutral-400);
  color: #fff;
  cursor: not-allowed;
}

.p-button-default, .p-button-gray {
  border-color: var(--gray-300);
  color: var(--gray-700);
  background-color: #fff;
}

.p-button-default:hover, .p-button-gray:hover {
  background-color: var(--gray-100);
}

.p-button-primary {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  color: #fff;
}

.p-button-primary:hover {
  background-color: var(--primary-600);
}

@media screen and not ((hover: none) and (pointer: coarse)) {
  .custom-scroll {
    scrollbar-width: unset;
  }

  .custom-scroll:hover {
    --fix: "";
  }

  .custom-scroll:hover::-webkit-scrollbar-track {
    background: #00000012;
  }

  .custom-scroll:hover::-webkit-scrollbar-thumb {
    background: #0003;
  }

  .custom-scroll::-webkit-scrollbar {
    border-radius: 8px;
    width: 8px;
    height: 8px;
  }

  .custom-scroll::-webkit-scrollbar-track {
    background: none;
    border-radius: 8px;
  }

  .custom-scroll::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 8px;
    transition: all .3s ease-in-out;
  }
}

:root {
  --sidebar-shadow: 0px 4px 50px #d9ddfc;
  --sidebar-border: 1px solid transparent;
  --surface-ground: #eff3f8;
}

body {
  min-height: 100%;
  color: var(--text-color);
  font-weight: 400;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  background: #fff;
  margin: 0;
  padding: 0;
}

.auth-layout-content {
  padding: 4rem 8rem;
}

.sidebar-layout {
  background: var(--surface-ground);
  box-shadow: var(--sidebar-shadow);
  border-right: var(--sidebar-border);
}

.sidebar-layout {
  z-index: 1;
  font-size: 14px;
}

.sidebar-layout .org-title {
  color: #293442;
}

.sidebar-layout > .logo {
  margin-top: .5rem !important;
}

.sidebar-layout > .logo .active-menuitem button {
  display: none;
}

.sidebar-layout > .logo .layout-menu {
  padding: 30px;
}

.sidebar-layout > .logo .layout-root-menuitem a {
  padding: 1rem 1.3rem;
  transition: padding-left .2s cubic-bezier(0, 0, .2, 1);
}

.sidebar-layout > .logo .layout-root-menuitem a .border {
  border: .5px solid #c2c7ce;
}

.sidebar-layout > .layout-menu {
  width: 5rem;
  margin: 5px 0 0;
  padding: 0;
  list-style-type: none;
  transition: width .2s cubic-bezier(0, 0, .2, 1);
}

.sidebar-layout > .layout-menu .menu-separator {
  border: 1px solid var(--gray-200);
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar-layout > .layout-menu a {
  color: var(--popup-submenu-item-text-color);
  white-space: nowrap;
  padding: .75rem .5rem .75rem 2rem;
  text-decoration: none;
}

.sidebar-layout > .layout-menu a span {
  opacity: 0;
  white-space: nowrap;
  transition: all .1s;
}

.sidebar-layout > .layout-menu a .layout-menuitem-icon {
  width: 1.25rem;
  font-size: 1.25rem;
  transform: translateY(.125rem);
}

.sidebar-layout > .layout-menu ul {
  display: none;
}

.sidebar-layout > .layout-menu li.active-menuitem > ul {
  display: block;
}

.sidebar-layout > .layout-menu .layout-root-menuitem > a {
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-duration);
  border-radius: 50%;
  outline: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.sidebar-layout > .layout-menu .layout-root-menuitem > a .layout-submenu-toggler {
  display: none;
}

.sidebar-layout > .layout-menu .layout-root-menuitem > a .layout-menuitem-icon {
  transform: unset;
  color: #757575;
}

.sidebar-layout > .layout-menu .layout-root-menuitem > a .layout-menuitem-text {
  opacity: 0;
}

.sidebar-layout > .layout-menu .layout-root-menuitem > a:hover {
  background-color: var(--menuitem-hover-bg-color);
}

.sidebar-layout > .layout-menu .layout-root-menuitem.active-menuitem > ul {
  display: block;
}

.sidebar-layout-active {
  width: 16rem;
}

.sidebar-layout-active > .layout-menu {
  width: 16rem;
  margin-top: 0;
  transition: width .2s cubic-bezier(0, 0, .2, 1);
}

.sidebar-layout-active > .layout-menu .active-submenu > a .layout-submenu-toggler {
  transform: rotate(-180deg);
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem > a {
  padding: .75rem 1rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem > a .layout-menuitem-text {
  opacity: 1;
  white-space: nowrap;
  padding-left: .5rem;
  transition: all .3s;
  display: flex;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem > a .layout-submenu-toggler {
  margin-left: auto;
  display: block;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul {
  border-radius: var(--border-radius);
  color: #757575;
  margin-top: .5rem;
  list-style-type: none;
  display: block;
  overflow: hidden;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li {
  padding: .5rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li a {
  padding-left: .5rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li a span {
  opacity: 1;
  margin-left: .5rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li li a {
  padding-left: 3rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li li li a {
  padding-left: 3.5rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li li li li a {
  padding-left: 4rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li li li li li a {
  padding-left: 5.5rem;
}

.sidebar-layout-active > .layout-menu .layout-root-menuitem ul li li li li li li a {
  padding-left: 5rem;
}

.sidebar-layout > .action {
  margin-top: 0;
  position: absolute;
  bottom: 1rem;
}

.sidebar-layout > .action .profile {
  padding-left: 1.2rem;
}

.sidebar-layout > .action .profile img {
  border-radius: 100px;
  width: 40px;
  height: 40px;
}

.sidebar-layout-active > .logo {
  margin-left: .5rem;
}

.sidebar-layout-active > .logo .active-menuitem a {
  margin-left: 3rem;
}

.sidebar-layout-active > .logo .active-menuitem button {
  display: block;
}

.sidebar-layout-active > .logo .active-menuitem a {
  display: none;
}

#popup_menu_left {
  z-index: 2202;
  transform-origin: top;
  top: 0;
  position: absolute !important;
  top: 57px !important;
  left: 200px !important;
}

#popup_menu_left_workspace {
  z-index: 2202;
  transform-origin: top;
  position: absolute !important;
  left: 217px !important;
}

#popup_menu_left_profile .p-submenu-header {
  display: none;
}

#popup_menu_left_profile {
  z-index: 2202;
  transform-origin: top;
  top: unset !important;
  position: absolute !important;
  bottom: 11px !important;
  left: 217px !important;
}

.active-route {
  color: #309096;
  background: #d8f5f5;
}

.active-route-text {
  color: #309096 !important;
}

.content {
  margin-left: 5rem;
  transition: margin-left .2s ease-in-out;
}

.content.pinned {
  margin-left: 18rem;
}

.content.noUser {
  margin-left: 0;
}

.p-dropdown-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.milestone-header-text {
  color: #ff7f00;
  font-size: 12px;
}

.input-label {
  color: #374151;
  width: 100px;
  margin: auto 0;
  font-weight: 600;
}

.intensity-container {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  width: 100px;
  padding: 10px;
}

.intensity-input {
  text-align: center;
  border: none;
  width: 100%;
  font-size: 13px;
}

.intensity-input:focus {
  border: none;
  outline: none;
}

.working-hours-container {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  width: 110px;
  padding: 10px;
}

.working-hours-input {
  text-align: center;
  border: none;
  width: 100%;
  font-size: 13px;
}

.working-hours-input:focus {
  border: none;
  outline: none;
}

.assignment .p-accordion .p-accordion-content {
  background-color: #e7eaf0;
  padding: 7px;
}

.assignment .accordion-header {
  position: relative;
}

.assignment .accordion-header:hover {
  background-color: #e8f7f4 !important;
}

.assignment .accordion-header:hover button {
  display: block;
}

.input-talent {
  padding: 5px;
  border: none !important;
  outline: none !important;
  width: 100% !important;
}

.input-talent:enabled:focus {
  box-shadow: none;
  border: 1px solid #309096 !important;
  outline: none !important;
}

.panel-input-talent .p-autocomplete-item {
  justify-content: space-between;
  padding: 0 10px;
  display: flex;
}

.talent-container .btn {
  display: none;
}

.talent-container:hover {
  opacity: .5px;
  background-color: #e8f7f4;
}

.talent-container:hover .btn {
  display: block;
}

.p-inputtext.p-invalid.duration-input {
  box-shadow: 0 0 .2rem .05rem #e24c4c;
}

