html.lineageBody {
  font-size: initial;
  body {
    padding: 0 !important;
    font-size: var(--vscode-font-size) !important;
    line-height: var(--bs-body-line-height);
    --text-color: #000000;
    --modal-bg: #ffffff;
    --popover-bg: #ffffff;
    --divider-color: #e8e8e8;
    --primary-accent: #247efe;

    &:global.vscode-dark {
      --text-color: #ffffff;
      --modal-bg: #484e55;
      --popover-bg: #28292c;
      --divider-color: #424750;
    }

    .lineageView {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;

      .lineageWrap {
        flex: 1;
      }

      .menu_card {
        padding: 0.275em !important;
        font-size: 0.875em;
      }

      .menu_card_container {
        background-color: var(--card-bg) !important;
        border-color: var(--card-border-color) !important;
        color: var(--text-color) !important;
      }

      .action-widget {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        gap: 8px;
        z-index: 1;
        align-items: center;

        :global .btn-outline-secondary {
          background-color: var(--background--02);
        }
      }
    }
    .demoModal {
      overflow: hidden;
      :global .modal-content {
        width: 84%;
        height: 94%;
        margin: auto;
        margin-top: 2%;
        border-radius: 8px;

        :global .close-btn {
          position: absolute;
          top: 0px;
          right: -2rem;
          color: #ffffff;
          cursor: pointer;
          background-color: var(--primary-color);
          display: flex;
          padding: 0.5rem;
          border-radius: 0 0.25rem 0.25rem 0;
        }
      }
    }
  }
}
