/* --------------------------------------------- global variables  ---------------------------------------------*/
* {
  --node-width: 600px;
  --node-icon-size: 20px;
  --node-icon-header-size: 20px;
  --node-direct-report-count-size: 12px;
  --node-acting-supervisor-size: 14px;
  --node-name-size: 14px;
  --node-name-header-size: 14px;
  --node-admin-code-size: 14px;
  --node-admin-code-header-size: 14px;
  --node-position-size: 14px;
  --node-tracking-number-size: 14px;
  --node-pay-info-size: 14px;
}
/* --------------------------------------------- global variables  ---------------------------------------------*/

/* --------------------------------------------- global styles  ---------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  font-family: "Arial";
}

/* global scrollbar styles */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0864bc;
  border-radius: 2rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* global scrollbar styles */

/* global button styles */

button {
  appearance: none;
  background-color: #0864bc;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  padding: 6px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
}

button:focus:not(:focus-visible):not(.focus-visible) {
  box-shadow: none;
  outline: none;
}

button:hover {
  background-color: #10046c;
}

button:focus {
  box-shadow: #10046c 0 0 0 3px;
  outline: none;
}

button:active {
  background-color: #10046c;
  box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
}

button:disabled {
  background-color: #0865bc59;
  border-color: rgba(27, 31, 35, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: default;
  &:focus,
  &:hover,
  &:active {
    background-color: #0865bc59;
    border-color: rgba(27, 31, 35, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
    outline: none;
    cursor: default;
  }
}

.btn,
.zoom-in,
.zoom-out,
.show-legend,
.disable-legend {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.3rem;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  &.link {
    background: none;
    color: #106cbd;
    font-size: 0.8rem;
    text-decoration: underline;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    &:hover {
      color: #093f6e;
    }
    &.no-underline {
      text-decoration: none !important;
    }
    &:disabled {
      color: #ccc !important;
      background: none !important;
    }
  }
}

.show-legend,
.disable-legend {
  font-size: 0.8rem;
}

/* global button styles */

/* global select styles */
select {
  appearance: none;
  background: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.99554%205.72851C1.91369%205.64667%201.87277%205.55255%201.87277%205.44615C1.87277%205.33975%201.91369%205.24563%201.99554%205.16378L2.60938%204.54994C2.69122%204.4681%202.78534%204.42718%202.89174%204.42718C2.99814%204.42718%203.09226%204.4681%203.17411%204.54994L7.99888%209.37472L12.8237%204.54994C12.9055%204.4681%2012.9996%204.42718%2013.106%204.42718C13.2124%204.42718%2013.3065%204.4681%2013.3884%204.54994L14.0022%205.16378C14.0841%205.24563%2014.125%205.33975%2014.125%205.44615C14.125%205.55255%2014.0841%205.64667%2014.0022%205.72852L8.28125%2011.4495C8.1994%2011.5313%208.10528%2011.5723%207.99888%2011.5723C7.89249%2011.5723%207.79836%2011.5313%207.71652%2011.4495L1.99554%205.72851Z%22%20fill%3D%22%23262626%22%2F%3E%3C%2Fsvg%3E)
    no-repeat 98% 50%;
  width: 100%;
  font-size: 0.7rem;
  padding: 0.5rem 0.5rem;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
  margin-top: -0.5rem;
}
/* global select styles */

/* global checkbox styles */
.checkbox-wrapper {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}
.checkbox-wrapper .tgl {
  display: none;
}
.checkbox-wrapper .tgl,
.checkbox-wrapper .tgl:after,
.checkbox-wrapper .tgl:before,
.checkbox-wrapper .tgl *,
.checkbox-wrapper .tgl *:after,
.checkbox-wrapper .tgl *:before,
.checkbox-wrapper .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper .tgl::-moz-selection,
.checkbox-wrapper .tgl:after::-moz-selection,
.checkbox-wrapper .tgl:before::-moz-selection,
.checkbox-wrapper .tgl *::-moz-selection,
.checkbox-wrapper .tgl *:after::-moz-selection,
.checkbox-wrapper .tgl *:before::-moz-selection,
.checkbox-wrapper .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper .tgl::selection,
.checkbox-wrapper .tgl:after::selection,
.checkbox-wrapper .tgl:before::selection,
.checkbox-wrapper .tgl *::selection,
.checkbox-wrapper .tgl *:after::selection,
.checkbox-wrapper .tgl *:before::selection,
.checkbox-wrapper .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox-wrapper .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 2.5em;
  height: 1.2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-wrapper .tgl + .tgl-btn:after,
.checkbox-wrapper .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 40%;
  height: 100%;
}
.checkbox-wrapper .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper .tgl + .tgl-btn:before {
  display: none;
}
.checkbox-wrapper .tgl:checked + .tgl-btn:after {
  left: 60%;
}

.checkbox-wrapper .tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  &:hover {
    background: #aaa;
  }
}
.checkbox-wrapper .tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}
.checkbox-wrapper .tgl-light:checked + .tgl-btn {
  background: #0864bc;
  &:hover {
    background: #10046c;
  }
}
.checkbox-text-label {
  cursor: pointer;
}
/* global checkbox styles */

/* global context menu styles */

/* Menu */

#menu,
#tooltip {
  position: absolute;
  width: 200px;
  padding: 2px;
  margin: 0;
  border: 1px solid #bbb;
  background: #eee;
  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  z-index: 100;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(0, 15px) scale(0.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;
}

.menu-item {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.menu-btn {
  display: block;
  color: #444;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 3px;
}

button.menu-btn {
  background: none;
  line-height: normal;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100%;
  text-align: left;
}

a.menu-btn {
  outline: 0 none;
  text-decoration: none;
}

.menu-text {
  margin-left: 25px;
}

.menu-btn .fa {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-item:hover > .menu-btn {
  color: #fff;
  outline: none;
  background-color: #0864bc;
  background: #0864bc;
  border: 1px solid #0864bc;
}

.menu-item-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.menu-item-disabled .menu-btn {
  cursor: default;
}

.menu-separator {
  display: block;
  margin: 7px 5px;
  height: 1px;
  border-bottom: 1px solid #fff;
  background-color: #aaa;
}

.menu-item-submenu::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #808080;
}

.menu-item-submenu:hover::after {
  border-left-color: #fff;
}

#menu #menu {
  top: 4px;
  left: 99%;
}

.menu-show,
.tooltip-show,
.menu-item:hover > #menu {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  pointer-events: auto !important;
}

.menu-item:hover > #menu {
  transition-delay: 300ms;
}
/* global context menu styles */

body {
  overflow: hidden !important;
}

.orgchart .hierarchy::before {
  content: "";
  position: absolute;
  top: -11px; /* -(background square size + half width of line) */
  left: var(--line-left-offset) !important;
  width: var(--pseudo-width) !important;
  border-top: 2px solid #0864bc !important; /*Horizontal edge color*/
  box-sizing: border-box;
}

.orgchart .nodes.vertical .hierarchy::before,
.orgchart .nodes.vertical .hierarchy::after {
  left: -6px !important;
  border-color: #0864bc !important;
}
.orgchart .nodes.vertical .hierarchy:nth-child(n + 2):before {
  border-top: none !important;
  border-bottom: 2px solid #0864bc !important;
}

/* ------------------------------------ Connecting Lines ------------------------------------ */
/* TODO: Get rid of these "!important" rules in this block! */
/* fix for the horizontal connecting line for the first child of a hybrid/vertically aligned node */
/* Vertical Line for Vertically Aligned Nodes */
.orgchart
  .nodes.vertical
  > .hierarchy:not(.hidden):not(.spouse):only-child::before,
.orgchart .nodes.vertical > .hierarchy:first-child:before {
  width: calc(50% - 3px) !important;
}
.orgchart .nodes.vertical > .hierarchy:before {
  left: -6px !important;
  width: 11px !important;
}
/* Horizontal Line for Vertically Aligned Nodes */
.orgchart .nodes.vertical > .hierarchy:first-child::after {
  width: 15% !important;
}

.node::before,
.node::after {
  background-color: #0864bc !important; /*edge colors for edges above and below a node*/
}

/* "Down" Line */
.orgchart > ul > li > ul li > .node:not(.outsider)::before {
  height: 20px !important;
  z-index: -10 !important;
}

/* "Up" Line */
.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
  height: 20px !important;
  z-index: -10 !important;
}

/* Horizontal Line */
.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
  left: 50% !important;
}

/* ------------------------------------ Connecting Lines ------------------------------------ */

.node.focused {
  background: transparent !important;
  border-radius: 0.3rem;
}

/* fix extended lines in case of left aligned chart */
.orgchart .nodes:not(.vertical) > .hierarchy:last-child:before {
  left: 0 !important;
  width: var(--line-left-offset) !important;
}
.hide-before:last-child:before {
  display: none !important;
}
.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
  width: 0px !important;
}

/* loader styles */

.loading-spinner,
.loading-spinner div,
.loading-spinner div:after {
  box-sizing: border-box;
}
.loading-spinner {
  color: #0864bc;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  &.export {
    color: limegreen;
  }
}
.loading-spinner div {
  transform-origin: 40px 40px;
  animation: loading-spinner 1.2s linear infinite;
}
.loading-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3.2px;
  left: 36.8px;
  width: 6.4px;
  height: 17.6px;
  border-radius: 20%;
  background: #0864bc;
}
.loading-spinner.export div:after {
  background: limegreen;
}
.loading-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.loading-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.loading-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.loading-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.loading-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.loading-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.loading-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.loading-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.loading-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.loading-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.loading-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.loading-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes loading-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#exporting {
  position: fixed;
  background: #ffffff;
  opacity: 0.8;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  .placeholder-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    h3 {
      color: #444;
      font-weight: 700;
      font-size: 1.5rem;
      text-align: center;
    }
    h4 {
      font-weight: 400;
    }
  }
}
/* multi select dropdown */
.multi-select-dropdown {
  width: 125%;
  position: relative;
  font-size: 14px;
  color: #333;
  overflow: visible;

  .dropdown-list {
    padding: 12px;
    background: #fff;
    position: absolute;
    z-index: 10;
    top: 30px;
    left: 2px;
    right: 2px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
    transform-origin: 50% 0;
    transform: scale(1, 0);
    overflow: visible;
  }

  .dropdown-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.2rem;
    padding: 8px 12px;
    opacity: 0;
  }

  .dropdown-label {
    display: block;
    height: auto;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 12px;
    line-height: 1;
    cursor: pointer;
    span {
      font-style: italic;
      font-weight: 600;
    }

    &:before {
      content: "▼";
      float: right;
    }
  }

  &.on {
    .dropdown-list {
      transform: scale(1, 1);
      .dropdown-option {
        opacity: 1;
      }
    }

    .dropdown-label:before {
      content: "▲";
    }
  }

  [type="checkbox"] {
    position: relative;
    top: -1px;
    margin-right: 4px;
  }
}

.ui-widget-header {
  background: #106cbd !important;
  border: #106cbd !important;
}

.ui-state-hover {
  background: #0088ff !important;
  border: #0088ff !important;
  color: #fff !important;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.position-info-modal {
  .modal__container {
    width: 600px !important;
  }
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before {
  content: "\2715";
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  input {
    width: 85%;
    font-size: 0.7rem;
    padding: 0.5rem 0.5rem;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    margin-top: -0.5rem;
  }
  .modal-flex {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    * {
      .form-label {
        font-size: 1.5rem;
        padding-bottom: 0.5rem;
      }
      form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        .form-field {
          input {
            width: auto;
          }
          &.checkbox {
            width: 100%;
          }
        }
      }
    }
    .requirement-form-1 {
      .qualification-form {
        .form-field {
          label {
            font-weight: 600;
          }
          .quantities {
            padding: 0.5rem 0rem;
            display: flex;
            gap: 1rem;
            justify-content: flex-start;
            align-items: center;
            label {
              font-weight: 400;
            }
            .all-checkbox {
              font-size: 1.2rem;
            }
          }
        }
      }
    }
    #open-plan-table-container {
      #open-plan-table {
        thead {
          tr {
            background-color: #0864bc;
            color: #fff;
          }
        }
        tbody {
          tr {
            user-select: none;
            cursor: pointer;
            &:hover {
              background-color: #0864bc;
              color: #fff;
            }
            transition: 0.1s;
          }
        }
      }
    }
    #compare-plan-table-container {
      display: flex;
      flex-direction: row;
      gap: 1.5rem;
      #compare-plan-table,
      #compare-plan-table-primary,
      #compare-plan-table-secondary {
        thead {
          tr {
            background-color: teal;
            color: #fff;
          }
        }
        tbody {
          tr {
            user-select: none;
            cursor: pointer;
            &:hover {
              background-color: teal;
              color: #fff;
            }
            &.compare-primary-highlight {
              background-color: #0864bc;
              color: #fff;
            }
            &.compare-secondary-highlight {
              background-color: #db4c40;
              color: #fff;
            }
            transition: 0.1s;
          }
        }
      }
      #compare-plan-table-secondary {
        thead {
          tr {
            background-color: #db4c40;
          }
        }
        tbody {
          tr {
            &:hover {
              background-color: #db4c40;
            }
          }
        }
      }
    }
    .form-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      width: 100%;
      .form-field {
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        input {
          flex: 0;
          margin-top: 0rem;
        }
        label {
          width: 100%;
          user-select: none;
          flex: 1;
        }
        &.column {
          margin-top: 1rem;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          text-align: left;
          gap: 0.3rem;
          width: 100%;
          label {
            font-weight: 600;
          }
          flex-direction: column;
          textarea {
            width: 100%;
            padding: 0.5rem;
          }
        }
        &.row {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
          .custom-summary {
            flex: 1;
            #calculated-summary {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;
              max-height: 9rem;
              overflow: auto;
              strong {
                color: teal;
              }
            }
          }
          .ai-generated-summary {
            flex: 1;
            #ai-summary {
              max-height: 9rem;
              overflow: auto;
              strong {
                color: teal;
              }
            }
          }
        }
      }
    }
    #ai-blueprint-summary {
      max-width: 50vw;
      max-height: 20rem;
      overflow: auto;
      strong {
        color: teal;
      }
    }
  }
}

.modal__btn {
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.modal__btn:focus,
.modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  background-color: #e6e6e6;
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
  &:hover,
  &:focus {
    background-color: #00115a;
  }
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* multi select dropdown */
/* loader styles */
/* --------------------------------------------- end of global styles  ---------------------------------------------*/

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  .page-header {
    background: #efefef;
    border-bottom: 1px solid rgb(210, 210, 210);
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    .header-top {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: center;
      align-items: center;
      padding: 0.7rem 0rem 1rem 0rem;
      border-bottom: 1px solid rgb(210, 210, 210);
      .header-title {
        display: flex;
        flex-direction: column;
        padding-left: 1rem;
        gap: 0.5rem;
        /* font-size: 1.7rem; */
        width: 8%;
        text-align: left;
        .input-title {
          font-size: 0.9rem;
          color: #808080;
        }
        #app-logo {
          padding-top: 0.3rem;
          .logo {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
      }
      .filters {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        width: 89%;
        margin-left: 4rem;
        align-items: center;
        justify-content: center;
        #file-input {
          display: none;
        }
        .drop-down-input {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 1.5rem;
          .drop-down {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            width: 100%;
            label {
              font-size: 0.7rem;
              color: #333e5a;
              font-weight: 500;
            }
            &.date-picker-container {
              input {
                width: 85%;
                font-size: 0.7rem;
                padding: 0.5rem 0.5rem;
                border: 1px solid #caced1;
                border-radius: 0.25rem;
                color: #000;
                margin-top: -0.5rem;
              }
            }
          }
        }
        .filter-actions {
          display: flex;
          gap: 0.5rem;
          justify-content: center;
          align-items: center;
        }
      }
      .action-btns {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.7rem;
        width: 35%;
        .action-btn-row {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          .btn {
            width: 8rem;
          }
          .export {
            background: #eee;
            color: #000;
            &:hover {
              background: rgba(255, 255, 255, 0.8);
            }
          }
        }
        &:last-child {
          margin-right: 3.5rem;
        }
      }
    }
    .header-bottom {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      width: 100%;
      flex: 1 0 auto;
      background: #f9fafc;
      padding: 0.5rem 0rem;
      min-height: 5rem;
      max-height: 8.5rem;
      .legend-bar {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem 1rem 0.5rem 1.5rem;
        background: inherit;
        gap: 1.5rem;
        border-bottom: 1px solid rgb(210, 210, 210);
        #legend {
          position: static;
          display: flex;
          gap: 2rem;
          max-width: 100%;
          overflow: hidden;
          white-space: pre-wrap;
          flex-wrap: wrap;
          padding-right: 1rem;
          .item {
            display: flex;
            gap: 1rem;
            p {
              font-size: 0.8rem;
              color: #444444;
              font-weight: 400;
              width: max-content;
            }
            svg {
              font-size: 1rem;
            }
          }
        }
      }
      .chart-options {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        background: inherit;
        width: 100%;
        gap: 8rem;
        .data-container {
          display: flex;
          justify-content: flex-start;
          gap: 7rem;
          width: 100%;
          flex: 0 1 auto;
          * {
            display: flex;
            flex-direction: row;
            gap: 1rem;
          }
          .selected-filters {
            position: static;
          }
          h4 {
            max-width: 100%;
            gap: 0.3rem;
            color: #757575;
            font-weight: 400;
            .display-value {
              color: #001870;
              font-weight: 600;
            }
            &#data-timestamp {
              padding-left: 1rem;
              .display-value {
                color: #757575;
                font-weight: 400;
              }
            }
          }
        }
        #bottom-bar-action-btns {
          flex: 1 0 auto;
          display: flex;
          gap: 1rem;
          justify-content: flex-end;
          align-items: center;
          padding-right: 1rem;
          min-width: 35%;
          fieldset {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            gap: 0.5rem;
            font-size: 12px;
            width: auto;
            min-width: 29%;
            user-select: none;
            border: none;
            color: #444;
            .multi-select-dropdown {
              /* .dropdown-label {
                height: 8px;
              } */
            }
            legend {
              font-size: 1.2rem;
              font-weight: 600;
            }
          }
          .chart-actions {
            width: auto;
            display: flex;
            gap: 1rem;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            button {
              &.zoom-in,
              &.zoom-out {
                color: #001870;
              }
              flex: 0;
            }
          }
        }
      }
      .legend-additional {
        border-top: 1px solid rgb(210, 210, 210);
        flex: 1;
        display: flex;
        padding-top: 0.5rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background: inherit;
        width: 100%;
        gap: 8rem;
        .additional-bar {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-end;
          position: static;
          gap: 4rem;
          margin-left: 13.6rem;
          width: 100%;
          .selected-filters {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            max-width: 50%;
            h4 {
              max-width: 100%;
              gap: 0.3rem;
              color: #757575;
              font-weight: 400;
              .display-value {
                color: #001870;
                font-weight: 600;
              }
              &#data-timestamp {
                .display-value {
                  color: #757575;
                  font-weight: 400;
                }
              }
            }
          }
          .legend-admin-codes {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            h4 {
              gap: 0.3rem;
              color: #757575;
              font-weight: 400;
              .display-value {
                color: #001870;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
  .page-content {
    display: flex;
    position: relative;
    max-width: 100vw;
    max-height: 90vh;
    #placeholder {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      color: #999999;
      .placeholder-icon,
      .error-icon {
        &.question {
          color: #0864bc;
        }
        font-size: 10rem;
      }
      .error-icon {
        color: #ffcc00;
      }
      .placeholder-text {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        .title {
          font-weight: 700;
          font-size: 1.5rem;
          text-align: center;
        }
        .description {
          font-weight: 400;
        }
      }
    }
    #primary-chart,
    #placeholder {
      max-width: 100vw;
      background: #fff;
      display: flex;
      width: 100vw;
      height: 90vh;
      max-height: 90vh;
      flex: 1 0 auto;
      text-align: center;
      justify-content: center;
      align-items: center;
      .orgchart {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        padding: 1000rem 1000rem;
        &.numerous-missing-info-employees {
          flex-direction: column;
        }
      }
      .no-data-found-node {
        position: relative;
        left: 50%;
      }
    }
    #primary-chart {
      text-align: left;
    }
    #secondary-chart,
    .broken-missing-info {
      text-align: left;
      padding: 0;
      display: none;
      overflow: visible !important;
      height: auto;
      max-height: none;
      .orgchart {
        display: flex;
        padding: 0;
        pointer-events: none;
        overflow: visible !important;
        height: auto;
        max-height: none;
      }
    }
    .broken-missing-info {
      min-width: min-content;
    }
    #app-logo {
      display: flex;
      position: fixed;
      justify-content: flex-end;
      align-items: center;
      gap: 1rem;
      right: 0;
      bottom: 0;
      pointer-events: none;
      .text {
        h4 {
          font-weight: 300;
          font-size: 0.8rem;
          font-style: italic;
          color: #6c6666;
          text-align: right;
          .ecs {
            font-weight: 600;
            font-size: 1.5rem;
          }
        }
      }
      .logo {
        width: 50%;
        img {
          width: 100%;
        }
      }
    }
  }
}
.hide {
  display: none !important;
  justify-content: center !important;
}
.hide-with-empty-space {
  visibility: hidden;
}
.custom-node-container {
  padding: 0.3rem;
  height: 66%;
  width: var(--node-width);
  .node-main-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
      rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    align-items: center;
    width: -webkit-fill-available;
    min-height: 37px;
    padding: 0.5rem;
    border-radius: 0.3rem 0.3rem 0rem 0rem;
    border: 1px solid #f2f8ff;
    background: #f2f8ff;
    text-align: center;
    color: #666;
    font-weight: 600;
    .header-left {
      display: flex;
      gap: 0.7rem;
      color: #34456b;
      justify-content: center;
      align-items: center;
      .counts {
        display: flex;
        gap: 0.7rem;
        .node-children-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 20.36px;
          min-height: 22.7px;
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #00115a;
          color: white;
        }
        .node-descendant-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 20.36px;
          min-height: 22.7px;
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #f3803d;
          color: white;
        }
        .node-direct-report-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 28px;
          min-height: 18px;
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #fff;
          font-size: var(--node-direct-report-count-size);
          font-weight: 700;
          color: #001870;
        }
      }
      .header-label {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
        max-width: 320px;
        .icon-container {
          .requirement-icon {
            width: 2rem;
            height: 1.5rem;
          }
        }
        /* padding-right: 1rem; */
        .label-text {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          .node-name {
            overflow: hidden;
            word-wrap: break-word;
            text-wrap: pretty;
            text-align: left;
          }
          .node-acting-supervisor {
            font-size: var(--node-acting-supervisor-size);
            font-style: italic;
            color: #001870;
          }
        }
      }
    }
    .header-right {
      display: flex;
      gap: 0.7rem;
      justify-content: center;
      align-items: center;
      .node-admin-code {
        font-size: var(--node-admin-code-header-size);
        font-style: italic;
      }
      .collapse-btn {
        background: none;
        box-shadow: none;
        border: none;
        color: #666;
      }
    }
  }
  .floating-node-title {
    border: 1px solid #d9d9d9;
    background: #d9d9d9;
    color: #444444;
    font-weight: 600;
    .header-left {
      color: inherit;
      .header-label {
        .icon-container {
          padding: 0rem 0.5rem 0rem 0.5rem;
          svg {
            font-size: var(--node-icon-header-size);
          }
        }
        .label-text {
          .node-name {
            font-size: var(--node-name-header-size);
          }
        }
      }
    }
    .header-right {
      .collapse-btn {
        color: inherit;
      }
    }
  }

  &.selected {
    transform: scale(1.2, 1.2);
    transition: 0.1s linear;
    z-index: 1000;
  }
}

.node {
  max-width: 800px;

  /* level based styles */
  &.level-0 {
    .custom-node-container {
      .node-main-header {
        border: 1px solid #001870;
        background: #001870;
        color: #fff;
        font-weight: 600;
        .header-left {
          color: inherit;
          .header-label {
            color: #fff;
            .label-text {
              .node-name {
                font-size: var(--node-name-header-size);
              }
              .node-acting-supervisor {
                font-size: var(--node-acting-supervisor-size);
                color: #fff;
              }
            }
          }
        }
        .header-right {
          .node-admin-code {
            font-size: var(--node-admin-code-header-size);
          }
          .collapse-btn {
            color: inherit;
          }
        }
      }
      /* special node styles for this level */
      /* .vacant,
      .vacancies-title {
        border: 1px solid #db4c40;
        background: #db4c40;
        .header-left {
          color: white;
          font-weight: 600;
        }
        .header-right {
          color: #fff;
          .collapse-btn {
            color: #fff;
          }
        }
      } */
      /* .team-title {
        border: 1px solid #e3e3e3;
        background: #e3e3e3;
        color: #444444;
        font-weight: 600;
        .header-left {
          font-weight: 600;
        }
        .header-right {
          .collapse-btn {
            color: inherit;
          }
        }
      } */
      /* special node styles for this level */
    }
  }
  &.level-1 {
    .custom-node-container {
      .node-main-header {
        border: 1px solid #c2c8dd;
        background: #c2c8dd;
        color: #001870;
        font-weight: 600;
        .header-left {
          color: inherit;
          .header-label {
            color: #001870;
            .label-text {
              .node-name {
                font-size: var(--node-name-header-size);
              }
              .node-acting-supervisor {
                font-size: var(--node-acting-supervisor-size);
              }
            }
          }
        }
        .header-right {
          .node-admin-code {
            font-size: var(--node-admin-code-header-size);
            color: #001870;
          }
          .collapse-btn {
            color: inherit;
          }
        }
      }
      /* special node styles for this level */
      /* .vacant,
      .vacancies-title {
        border: 1px solid #db4c40;
        background: #db4c40;
        .header-left {
          color: white;
          font-weight: 600;
        }
        .header-right {
          color: #fff;
          .collapse-btn {
            color: #fff;
          }
        }
      } */
      /* .team-title {
        border: 1px solid #e3e3e3;
        background: #e3e3e3;
        color: #444444;
        font-weight: 600;
        .header-left {
          font-weight: 600;
        }
        .header-right {
          .collapse-btn {
            color: inherit;
          }
        }
      } */
      /* special node styles for this level */
    }
  }
  &.level-2 {
    .custom-node-container {
      .node-main-header {
        border: 1px solid #e5eff9;
        background: #e5eff9;
        color: #001870;
        font-weight: 600;
        .header-left {
          color: inherit;
          .header-label {
            color: #001870;
            .label-text {
              .node-name {
                font-size: var(--node-name-header-size);
              }
              .node-acting-supervisor {
                font-size: var(--node-acting-supervisor-size);
              }
            }
          }
        }
        .header-right {
          .node-admin-code {
            font-size: var(--node-admin-code-header-size);
            color: #001870;
          }
          .collapse-btn {
            color: inherit;
          }
        }
      }
      /* special node styles for this level */
      /* .vacant,
      .vacancies-title {
        border: 1px solid #db4c40;
        background: #db4c40;
        .header-left {
          color: white;
          font-weight: 600;
        }
        .header-right {
          color: #fff;
          .collapse-btn {
            color: #fff;
          }
        }
      } */
      /* .team-title {
        border: 1px solid #e3e3e3;
        background: #e3e3e3;
        color: #444444;
        font-weight: 600;
        .header-left {
          font-weight: 600;
        }
        .header-right {
          .collapse-btn {
            color: inherit;
          }
        }
      } */
      /* special node styles for this level */
    }
  }
  &.level-max {
    .custom-node-container {
      .node-main-header {
        border: 1px solid #d9d9d9;
        background: #d9d9d9;
        color: #444444;
        font-weight: 600;
        .header-left {
          color: inherit;
          .header-label {
            color: #444444;
            .label-text {
              .node-name {
                font-size: var(--node-name-header-size);
              }
              .node-acting-supervisor {
                font-size: var(--node-acting-supervisor-size);
              }
            }
          }
        }
        .header-right {
          .node-admin-code {
            font-size: var(--node-admin-code-header-size);
            color: #444444;
          }
          .collapse-btn {
            color: inherit;
          }
        }
      }
      /* special node styles for this level */
      /* .vacant,
      .vacancies-title {
        border: 1px solid #db4c40;
        background: #db4c40;
        .header-left {
          color: white;
          font-weight: 600;
        }
        .header-right {
          color: #fff;
          .collapse-btn {
            color: #fff;
          }
        }
      } */
      /* .team-title {
        border: 1px solid #e3e3e3;
        background: #e3e3e3;
        color: #444444;
        font-weight: 600;
        .header-left {
          font-weight: 600;
        }
        .header-right {
          .collapse-btn {
            color: inherit;
          }
        }
      } */
      /* special node styles for this level */
    }
  }
  /* level based styles */
}

/* .full-container {
  height: max-content;
} */

.vacant-custom-node {
  border-color: #f1f7ee;
  background: #f1f7ee;
}

.backToCompactSymbol,
.backToLooseSymbol {
  font-size: 1.4rem;
  color: #0864bc;
  top: 0% !important;
  left: 0% !important;
  right: 0% !important;
  &::before {
    box-shadow: 0 0 2px #888;
    border-bottom-color: transparent !important;
    background: #fff;
    border-radius: 1.5rem;
  }
}

.orgchart {
  background: transparent !important;
}

.node.compact {
  background: transparent !important;
  gap: 0.3rem;
  grid-template-columns: repeat(2, auto) !important;
  justify-items: center;
  align-items: flex-start;
}
.node.compact > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1 / 3 !important; /* Center in a 3-column grid */
  justify-self: center !important; /* Center horizontally within its cell */
  align-self: center !important; /* Center vertically within its cell */
  width: 99.3%;
  margin-bottom: 0.5rem;
  .custom-node {
    border-radius: 0rem 0rem 0.3rem 0.3rem;
  }
  &:hover {
    background: transparent;
  }
}
.node.compact.looseMode > :first-child {
  .custom-node {
    width: 99.7%;
  }
}

.node.compact > *.node {
  padding: 0;
}

.node {
  min-width: 26rem !important;
  width: max-content !important;
  height: max-content !important;
  &:hover {
    background: transparent !important;
  }
}
/* .max-content {
  width: max-content !important;
} */

.custom-node {
  border: 1px solid #eaeaea;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 16px 16px 0px;
  border-radius: 0rem 0rem 0.3rem 0.3rem;
  cursor: pointer;
  font-weight: 400;
  color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  min-width: 99.3%;
  width: 99.3%;
  min-height: 36px;
  position: relative;
  left: 0.1%;
  .custom-node-content {
    width: 100%;
    height: 100%;
    border-color: rgb(188, 188, 188);
    background: #fff;
    border-collapse: collapse;
    tr {
      position: relative;
      line-height: 2.5rem;
      background: inherit;
      &:nth-child(even) {
        background: #f4f8ff;
      }
      .style-note {
        position: absolute;
        left: 26%;
        bottom: 0%;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.3rem;
        width: 65%;
        i {
          font-size: 0.9rem;
        }
        span {
          font-size: 0.7rem;
        }
      }
      &.primary-plan-item {
        background-color: #0864bc !important;
        * {
          color: #fff !important;
        }
      }
      &.secondary-plan-item {
        background-color: teal !important;
        * {
          color: #fff !important;
        }
      }
      &.conflicting-plan-item {
        background-color: purple !important;
        * {
          color: #fff !important;
        }
      }
    }
    td {
      width: 50%;
      line-height: 1.4rem;
      align-content: center;
      text-align: left;
      padding: 0.5rem 0.5rem 2rem 0.5rem;
      &:last-child {
        text-align: right;
      }
      &.count-container {
        padding: 0.5rem 0.5rem 2rem 0.5rem;
        width: auto;
        text-align: center;
        align-items: center;
        .counts {
          display: flex;
          gap: 0.7rem;
          .node-children-count {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            min-width: 20.36px;
            min-height: 22.7px;
            border-radius: 0.2rem;
            padding: 0.4rem;
            background: #00115a;
            color: white;
          }
          .node-descendant-count {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            min-width: 20.36px;
            min-height: 22.7px;
            border-radius: 0.2rem;
            padding: 0.4rem;
            background: #f3803d;
            color: white;
          }
          .node-direct-report-count {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            min-width: 20px;
            min-height: 10px;
            border-radius: 0.2rem;
            padding: 0.4rem;
            background: #001870;
            font-size: var(--node-direct-report-count-size);
            font-weight: 700;
            color: #fff;
          }
        }
      }
      &.node-icon {
        align-content: center;
        text-align: center;
        width: 10%;
        svg {
          font-size: var(--node-icon-size);
        }
      }
      &.node-name {
        font-size: var(--node-name-size);
      }
      &.node-position {
        font-size: var(--node-position-size);
        font-weight: 400;
      }
      &.node-admin-code {
        font-size: var(--node-admin-code-size);
      }
      .node-content-flex-1,
      .node-content-flex-2,
      &.node-content-flex-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-right: 0;
        width: auto;
        /* gap: 0.4rem; */
        font-size: 0;
        span {
          text-align: left;
          white-space: pre;
          &.node-name {
            font-size: var(--node-name-size);
            font-weight: 400;
          }
          &.node-position {
            font-size: var(--node-position-size);
            font-weight: 400;
          }
          &.node-tracking-number {
            height: 1.2rem;
            font-size: var(--node-tracking-number-size);
            font-weight: 700;
          }
          &.node-pay-info {
            font-size: var(--node-pay-info-size);
            font-weight: 400;
          }
        }

        .additional-info-work,
        .additional-info-qual {
          display: flex;
          gap: 1.5rem;
          justify-content: center;
          align-items: center;
          font-size: 1rem;
          color: #0864bc;
          .district-text {
            color: #0864bc;
            font-size: 0.9rem;
            font-weight: 500 !important;
            font-style: italic;
          }
        }
        .additional-info-work {
          gap: 1rem;
        }
      }
      .node-content-flex-1 {
        padding: 0.5rem 0.5rem 1rem 0.5rem;
      }
      &.node-content-flex-3 {
        gap: 0.5rem;
      }
    }
  }
}
.vacancies {
  cursor: pointer;
  font-weight: 400;
  color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: max-content;
  .custom-node-content {
    width: 100%;
    height: 100%;
    padding: 0rem;
    border-color: rgb(188, 188, 188);
    border-radius: 0rem 0rem 0.3rem 0.3rem;
    tr {
      background: inherit;
      &:hover {
        background: #fff;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        transform: scale(1.1, 1.1);
        transition: 0.1s linear;
      }
    }
    td {
      &.node-content-flex-1,
      &.node-content-flex-2 {
        padding-right: 0.5rem;
        span {
          white-space: normal;
        }
      }
      width: auto;
      padding: 0.5rem;
      text-align: center;
      vertical-align: middle;
      color: red;
    }
  }
}
.team {
  cursor: pointer;
  font-weight: 400;
  color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: max-content;
  .custom-node-content {
    width: 100%;
    height: 100%;
    padding: 0rem;
    border-color: rgb(188, 188, 188);
    border-radius: 0rem 0rem 0.3rem 0.3rem;
    tr {
      background: inherit;
      &:hover {
        background: #fff;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        transform: scale(1.1, 1.1);
        transition: 0.1s linear;
      }
      td {
        &.node-content-flex-1,
        &.node-content-flex-2 {
          padding-right: 0.5rem;
          span {
            white-space: normal;
          }
        }
        width: auto;
        padding: 0.5rem;
        text-align: center;
        vertical-align: middle;
      }
      &.team-lead {
        td {
          font-weight: 700 !important;
          &.node-content-flex-1,
          &.node-content-flex-2 {
            span {
              font-weight: 700 !important;
            }
          }
        }
      }
    }
    .node-header {
      text-align: left;
    }
  }
}

.floating-node {
  cursor: pointer;
  font-weight: 400;
  color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: max-content;
  .custom-node-content {
    width: 100%;
    height: 100%;
    padding: 0rem;
    border-color: rgb(188, 188, 188);
    border-radius: 0rem 0rem 0.3rem 0.3rem;
    background: #fff;
    tr {
      background: inherit;
    }
    td {
      padding: 0.5rem;
      text-align: center;
      vertical-align: middle;
    }
    .node-header {
      text-align: left;
    }
  }
}
.custom-highlight-row {
  background: #ffea00 !important;
  &:hover {
    color: #444444 !important;
    background: #ffbb00 !important;
  }
}
/* node comment */
.node-comment-row {
  border-radius: 0.3rem;
  background: #0864bc;
  .node-comment-input {
    background: #0864bc;
    width: 96%;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    padding: 0.3rem;
    outline: none;
    font-size: 14px;
  }
  .node-comment {
    color: white;
    font-weight: 600;
    font-size: 14px;
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
  }
}
/* node comment */

/* tooltip */
#tooltip {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  padding: 1rem;
  * {
    color: #000 !important;
    background: transparent !important;
  }
  .custom-node {
    box-shadow: none;
    border: none;
    .custom-node-content {
      tbody {
        tr {
          line-height: 1rem;
        }
      }
    }
  }
  .node-main-header {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;
    justify-content: space-between;
    align-items: center;
    &.vacant {
      background: transparent;
      border: none;
      .header-left {
        .node-name,
        .header-label svg {
          color: #db4c40 !important;
          font-weight: 600 !important;
        }
      }
    }
    &.team-title {
      background: transparent;
      border: none;
      .header-left {
        .node-name,
        .header-label svg {
          color: #444444 !important;
          font-weight: 600 !important;
        }
      }
      .header-right {
        padding-left: 1rem;
        color: #444444 !important;
        .collapse-btn {
          color: #444444 !important;
        }
      }
    }
    .header-left {
      display: flex;
      gap: 1.5rem;
      color: #34456b;
      justify-content: center;
      align-items: center;
      .counts {
        display: flex;
        gap: 0.7rem;
        .node-children-count {
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #00115a !important;
          color: white !important;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 20.36px;
          min-height: 22.7px;
        }
        .node-direct-report-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 28px;
          min-height: 18px;
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #fff;
          font-size: var(--node-direct-report-count-size);
          font-weight: 700;
          color: #001870;
        }
        .node-descendant-count {
          border-radius: 0.2rem;
          padding: 0.4rem;
          background: #f3803d !important;
          color: white !important;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          min-width: 20.36px;
          min-height: 22.7px;
        }
      }
    }
    .header-right {
      display: flex;
      flex-direction: row;
      gap: 0.7rem;
      justify-content: center;
      align-items: center;
      .collapse-btn {
        display: none;
      }
    }
  }
}
/* tooltip */

/*----------------------------------------------------- Media Queries -----------------------------------------------------*/
/* Breakpoint (3000px) */
@media screen and (min-width: 3000px) {
  .content {
    .page-header {
      .header-top {
        .action-btns {
          .action-btn-row {
            .btn {
              width: 16rem;
            }
          }
        }
      }
      .header-bottom {
        .legend-bar {
          #legend {
            .item {
              p {
                font-size: 1rem;
              }
            }
          }
        }
        .legend-additional {
          * {
            h4 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}
/* Breakpoint (2600px) */
@media screen and (min-width: 2600px) {
  .content {
    .page-header {
      .header-bottom {
        .chart-options {
          gap: 24rem;
          .data-container {
            * {
              h4 {
                font-size: 1rem;
              }
            }
          }
          .checkboxes {
            font-size: 1rem;
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 15rem;
          }
          * {
            h4 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 2600px) {
  .content {
    .page-header {
      .header-top {
        .action-btns {
          .action-btn-row {
            .btn {
              width: 8rem;
            }
          }
        }
      }
      .header-bottom {
        .legend-bar {
          #legend {
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 15rem;
          }
        }
      }
    }
  }
}

/* Full HD (1920px) */
@media screen and (max-width: 1920px) {
  .content {
    .page-header {
      .header-top {
        .header-title {
          .input-title {
            font-size: 0.8rem;
          }
        }
        .filters {
          gap: 1.3rem;
          .drop-down-input {
            gap: 1.3rem;
            .drop-down {
              gap: 0.7rem;
              label {
                font-size: 0.7rem;
                font-weight: 500;
              }
            }
          }
          .filter-actions {
            gap: 0.2rem;
          }
        }
        .action-btns {
          gap: 0.7rem;
          .action-btn-row {
            .btn {
              width: 8rem;
            }
          }
          button {
            font-size: 0.8rem;
          }
          &:last-child {
            margin-right: 3.3rem;
          }
        }
      }
      .header-bottom {
        gap: 0.3rem;
        .legend-bar {
          gap: 1.3rem;
          #legend {
            padding-right: 0.5rem;
            gap: 1.7rem;
            .item {
              gap: 0.7rem;
              p {
                font-size: 0.7rem;
                font-weight: 400;
              }
              svg {
                font-size: 0.9rem;
              }
            }
          }
        }
        .chart-options {
          .data-container {
            * {
              gap: 0.7rem;
            }
            h4 {
              gap: 0.3rem;
              font-size: 0.8rem;
              font-weight: 400;
            }
          }
          #bottom-bar-action-btns {
            fieldset {
              font-size: 0.8rem;
            }
            .chart-actions {
              gap: 0.7rem;
            }
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 13.6rem;
          }
          * {
            h4 {
              font-size: 0.8rem;
            }
          }
        }
      }
    }
  }
}

/* Breakpoint (1820px) */
@media screen and (max-width: 1820px) {
  .content {
    .page-header {
      .header-bottom {
        .chart-options {
          gap: 2rem;
          #bottom-bar-action-btns {
            min-width: 41%;
          }
        }
      }
    }
  }
}

/* Breakpoint (1550px) */
@media screen and (max-width: 1550px) {
  .content {
    .page-header {
      .header-top {
        .header-title {
          .input-title {
            font-size: 0.7rem;
          }
        }
        .filters {
          .drop-down-input {
            .drop-down {
              gap: 0.7rem;
              label {
                font-size: 0.5rem;
              }
            }
          }
        }
        .action-btns {
          .action-btn-row {
            .btn {
              width: 6rem;
            }
          }
          button {
            font-size: 0.6rem;
          }
        }
      }
      .header-bottom {
        .legend-bar {
          #legend {
            .item {
              p {
                font-size: 0.7rem;
              }
              svg {
                font-size: 0.7rem;
              }
            }
          }
        }
        .chart-options {
          .data-container {
            h4 {
              font-size: 0.7rem;
            }
          }
          #bottom-bar-action-btns {
            fieldset {
              font-size: 0.7rem;
            }
            .chart-actions {
              button {
                font-size: 0.7rem;
              }
              .disable-legend,
              .show-legend {
                font-size: 0.7rem;
                svg {
                  font-size: 0.7rem;
                }
              }
            }
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 12.8rem;
          }
          * {
            h4 {
              font-size: 0.7rem;
            }
          }
        }
      }
    }
  }
}

/* Breakpoint (1447px) */
@media screen and (max-width: 1447px) {
  .content {
    .page-header {
      .header-top {
        .filters {
          .drop-down-input {
            .drop-down {
              width: 30%;
              .selector {
                font-size: 0.5rem;
              }
            }
          }
        }
        .filter-actions {
          button {
            font-size: 0.6rem;
          }
        }
        .action-btns {
          .action-btn-row {
            .btn {
              width: 6rem;
            }
            button {
              font-size: 0.6rem;
            }
          }
          &:last-child {
            margin-right: 3.3rem;
          }
        }
      }
      .header-bottom {
        .legend-bar {
          #legend {
            .item {
              p {
                font-size: 0.6rem;
              }
              svg {
                font-size: 0.6rem;
              }
            }
          }
        }
        .chart-options {
          .data-container {
            h4 {
              font-size: 0.6rem;
            }
          }
          #bottom-bar-action-btns {
            fieldset {
              font-size: 0.6rem;
            }
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 12.1rem;
          }
          * {
            h4 {
              font-size: 0.6rem;
            }
          }
        }
      }
    }
  }
}

/* Breakpoint (1377px) */
@media screen and (max-width: 1377px) {
  .content {
    .page-header {
      .header-bottom {
        .chart-options {
          gap: 8rem;
        }
      }
    }
  }
}

/* Breakpoint (1325px) */
@media screen and (max-width: 1325px) {
  .content {
    .page-header {
      .header-bottom {
        .legend-bar {
          #legend {
          }
        }
        .chart-options {
          #bottom-bar-action-btns {
            min-width: 47%;
          }
        }
        .legend-additional {
          .additional-bar {
            margin-left: 11.7rem;
          }
        }
      }
    }
  }
}

/* Breakpoint (1255px) */
@media screen and (max-width: 1255px) {
  .content {
    .page-header {
      .header-top {
        /* height: 1.3rem; */
        .header-title {
          .input-title {
            font-size: 0.6rem;
          }
        }
        .filters {
          * {
            font-size: 0.6rem;
          }
        }
        .action-btns {
          .action-btn-row {
            gap: 1rem;
            button {
              font-size: 0.6rem;
            }
            .btn {
              width: 5rem;
            }
          }
        }
      }
      .header-bottom {
        .legend-bar {
          #legend {
            gap: 1.5rem;
            .item {
              p {
                font-size: 0.5rem;
              }
              svg {
                font-size: 0.5rem;
              }
            }
          }
        }
        .chart-options {
          .data-container {
            h4 {
              font-size: 0.5rem;
            }
          }
          #bottom-bar-action-btns {
            fieldset {
              font-size: 0.5rem;
              legend {
                font-size: 0.5rem;
              }
            }
            .chart-actions {
              button,
              .disable-legend,
              .show-legend {
                font-size: 0.5rem;
                svg {
                  font-size: 0.5rem;
                }
              }
            }
          }
        }
        .legend-additional {
          * {
            h4 {
              font-size: 0.5rem;
            }
          }
        }
      }
    }
  }
}

/* Breakpoint (1035px) */
@media screen and (max-width: 1035px) {
  .content {
    .page-header {
      .header-top {
        .action-btns {
          .action-btn-row {
            .btn {
              width: 4rem;
            }
            button {
              font-size: 0.5rem;
            }
          }
        }
      }
      .header-bottom {
        max-height: 15.5rem;
        .chart-options {
          .data-container {
            gap: 4rem;
          }
        }
      }
    }
  }
}

/* Breakpoint (915px) */
@media screen and (max-width: 915px) {
  .content {
    .page-header {
      .header-top {
        .header-title {
          .input-title {
            font-size: 0.5rem;
          }
        }
      }
    }
  }
}

/* Breakpoint (870px) */
@media screen and (max-width: 870px) {
  .content {
    .page-header {
      .header-bottom {
        .chart-options {
          .data-container {
            * {
              h4 {
                font-size: 0.45rem;
              }
            }
          }
          .checkboxes {
            font-size: 0.45rem;
          }
        }
        .legend-additional {
          * {
            h4 {
              font-size: 0.45rem;
            }
          }
        }
      }
    }
  }
}

/* CRT (800px) */
@media screen and (max-width: 800px) {
  .content {
    .page-header {
      .header-top {
        .action-btns {
          .action-btn-row {
            .btn {
              width: 4rem;
            }
            button {
              font-size: 0.45rem;
            }
          }
        }
      }
      .header-bottom {
        .chart-options {
          .data-container {
            gap: 1rem;
            * {
              gap: 0.3rem;
              h4 {
                font-size: 0.45rem;
              }
            }
          }
          .checkboxes {
            font-size: 0.45rem;
          }
        }
        .legend-additional {
          * {
            h4 {
              font-size: 0.45rem;
            }
          }
        }
      }
    }
  }
}

/*----------------------------------------------------- Media Queries -----------------------------------------------------*/