* {
      /* This applies to everything */
      font-family: arial, sans-serif;
    }

    body {
      /* we hide body until javascript has finished rendreding it, then we make it visible */
      visibility: hidden;
      padding: 0;
      margin: 0;
    }

    @media print {

      /* remove min width so table doesnt have scroll bar in print screen */
      table {
        border-collapse: collapse;
        table-layout: fixed;
        min-width: none;
        word-wrap: break-word;
        margin-bottom: 15px;
      }

      .header_measure_div,
      .noprint {
        display: none !important;
      }

      .overflow_div {
        height: fit-content !important;
      }

      .print-warning {
        display: block;
      }
    }

    @media screen {
      table {
        border-collapse: collapse;
        table-layout: fixed;
        min-width: 1200px;
        word-wrap: break-word;
        margin-bottom: 15px;
      }

      .print-warning {
        display: none;
      }

      .overflow_div {
        overflow-y: auto;
        overflow-x: auto;
        margin: 0 8px;
      }

      .overflow_div thead tr th {
        position: sticky;
        top: 0;
        z-index: 10;
        vertical-align: bottom;
      }
    }

    .required-checkbox {
      display: inline-flex;
      align-items: center;
    }

    table.octopart-data.show-octopart {
      overflow-x: scroll;
      min-width: max-content;
    }

    td.octopart-data,
    th.octopart-data {
      display: none;
    }
    th.extra-header {
      display: table-cell;
    }
    td.extra-data {
      display: table-cell;
    }

    td.octopart-data.show-octopart,
    th.octopart-data.show-octopart {
      display: revert;
    }

    td span.no-octopart-data {
      font-style: italic;
      font-size: 12px;
    }

    select.header-dropdown {
      margin: 3px;
    }

    .ignore-row,
    .dni {
      opacity: 0.3;
      text-decoration: line-through;
    }

    .hide {
      display: none;
    }

    .footnotes {
      margin: 8px;
    }

    .italic_info_span {
      font-style: italic;
      font-size: 14px;
      margin: 0 8px;
    }

    td {
      border: 1px solid black;
      line-height: 1.3;
      font-size: 14px;
      padding: 5px;
      font-family: 'Consolas', 'Courier New', 'Courier', monospace !important;
    }

    td * {
      font-family: 'Consolas', 'Courier New', 'Courier', monospace !important;
    }

    .split_table_cell {
      display: flex;
    }
    
    .split_table_data:not(:first-child) {
      margin-left: 5px;
    }
    
    .split_table_data:not(:last-child) {
      margin-right: 5px;
    }

    .block_wrapper {
      font-size: 12px;
      font-weight: bold;
      background: lightsteelblue;
      padding: 1px 2px;
      border-radius: 3px;
      word-spacing: normal;
    }

    /* BEGIN ACCEPT/REJECT/OVERRIDE CSS */

    /* 
      Explanation (as of 3/19/2022):
      
      All of these are classes that are assigned to the table cells (td) element.

      When a row is overriden/accepted/rejected, the related cels (a/r, match score) will be assigned one
        of these classes.
     */

    /* The match colors are only used in ep verify/compare */
    /* The accept/reject styles are used in all reports */
    td.green-cell,
    td.accept,
    td.exact-match,
    .green-node {
      background-color: #00B050;
    }
    
    td.red-cell {
      background-color: #FF0000 !important;
    }

    td.reject,
    td.non-match,
    .red-node {
      background-color: #FF0000;
    }

    td.close-match {
      background-color: #C4D79B;
    }

    td.questionable-match {
      background-color: #FABF8F;
    }

    /* Override colors (ep verify/compare) */
    td.override-good {
      text-decoration: line-through;
      /* !important because we want to override the match score css style background color without removing the class */
      background-color: #00B050 !important;
    }

    td.override-bad {
      text-decoration: line-through;
      /* !important because we want to override the match score css style background color without removing the class */
      background-color: #FF0000 !important;
    }

    /* Override values all reports (good/bad only in ep verify/compare) */
    td.override-bad::after,
    td.override-good::after,
    td.reject::after,
    td.accept::after {
      display: inline-block;
      text-decoration: none;
      padding-left: 2px;
    }

    td.override-bad::after {
      content: "0";
    }
    td.override-good::after {
      content: "100";
    }
    td.reject::after {
      content: "R";
    }
    td.accept::after {
      content: "A";
    }

    /* END ACCEPT/REJECT/OVERRIDE CSS */

    @media screen {
      th {
        background-color: #048c98;
        border: 1px solid #01454B;
        padding: 8px 4px;
        font-size: 12px;
        color: white;
        vertical-align: bottom;
      }

      th.nl_label {
        color: black;
      }

      th.sorted {
        background-color: #01454B;
        color: white;
      }

      th.sorted.ascending:after {
        content: " \2191";
      }

      th.sorted.descending:after {
        content: " \2193";
      }

      tr {
        background-color: white;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }

      tr.selectedRow {
        background-color: #4c4c4c;
        color: white;
      }
    }

    /* printer-friendly table header colors */
    @media print {
      th {
        background-color: white;
        border: 1px solid black;
        color: black;
        font-size: 12px;
        vertical-align: bottom;
      }
    }
    
    h1 {
      /* cadEnhance website aqua */
      color: #01454B;
      font-size: 20px;
    }

    h2 {
      font-size: 15px;
    }

    h3 {
      font-size: 12px;
    }

    .nl_header_wrapper {
      border-top: 4px solid #39A3AC;
      box-shadow: 0 0 2px 1px #ccc;
      background-color: whitesmoke;
      margin-bottom: 10px;
      text-align: center;
      padding: 5px 0;
      height: 100px;
    }

    .nl_header_right_button_container {
      display: inline-grid;
      position: absolute;
      padding: 10px 5px;
      float: right;
      right: 5px;
      top: 5px;
    }
    
    .nl_header_right_button_row {
      justify-content: center;
      display: inline-flex;
    }

    .nl_header_button_column {
      align-content: center;
      display: grid;
      height: 100%;
      float: left;
    }

    .nl_header_button_column.spacer {
      padding: 0 10px;
    }

    .nl_header_logo {
      margin-top: 8px;
      padding: 0 20px;
      float: left;
    }

    .nl_header_text {
      padding-right: 150px;
      display: flow-root;
    }
    
    .nl_header_text h1,
    .nl_header_text h2 {
      padding: 0px;
      margin: 3px;
    }

    .nl_header_text h3 {
      font-size: 13px;
      padding: 0px;
      margin: 2px;
    }

    /* TODO: remove me */
    .centerText {
      text-align: center;
    }

    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }

    th.tooltip {
      display: revert;
    }

    .tooltip_text {
      visibility: hidden;
      width: fit-content;
      background-color: #01454B;
      color: white;
      text-align: center;
      border-radius: 6px;
      padding: 5px 10px;

      /* Position the tooltip */
      position: absolute;
      z-index: 100;
    }

    .tooltip_left {
      top: -5px;
      right: 105%;
    }

    .tooltip_bottom {
      top: 105%;
    }

    .tooltip:hover .tooltip_text {
      visibility: visible;
    }

    .CellWithComment {
      position:relative;
    }

    .CellComment {
      display:none;
      position:absolute; 
      z-index:100;
      border:1px;
      background-color: #01454B;
      border-style:solid;
      border-width:1px;
      border-color:white;
      padding:3px;
      color:white;
      top:-5px; 
      left:0px;
      width:960px;
    }

    .CellWithComment:hover span.CellComment {
      display:block;
    }

    .nl_metadata_stat {
      float: left;
    }

    .nl_metadata_stat_button_wrapper {
      padding: 17px;
    }

    .metadata_button {
      display: inline-block;
      background: #39A3AC;
      color: black;
      border-radius: 4px;
      padding: 6px 3px;
      margin: 5px;
      -moz-transition: all 0.2s;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      box-shadow: 0 0 2px 1px black;
      text-decoration: none;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      width: 95px;
    }

    .metadata_button:hover {
      background: #666;
      color: #c1e1e0;
      box-shadow: 0 0 5px 1px black;
    }

    .sheet-button-list {
      /* same padding as accordion drop-down */
      padding-left: 15px;
      margin-top: 20px;
    }

    .sheet-change-button {
      box-shadow: 0 0 2px 1px black;
      background-color: #39A3AC;
      text-decoration: none;
      display: inline-block;
      padding: 5px 10px;
      font-size: 13px;
      cursor: pointer;
      margin: 5px;
      color: #333;
      border: 0;
    }

    .sheet-change-button.active {
      background: #666;
      color: #aaa;
    }

    .sheet-change-button.disabled {
      background: #afafaf;
      text-decoration: line-through;
    }

    .sheet-change-button:hover {
      background: #666;
      color: #ccc;
      box-shadow: 0 0 3px 1px black;
    }

    .sheet-change-button.small-square {
      text-align: center;
      border-radius: 5px;
      font-size: 16px;
      color: white;
      height: 35px;
      width: 35px;
    }

    .table-sub-filter-button {
      background-color: #F4F5F7;
      padding: 2px 4px;
      font-size: 12px;
      cursor: pointer;
      margin: 5px;
      color: #42526E;
      border: 1px solid gray;
      border-radius: 3px;
      font-weight: bold;
    }

    .table-sub-filter-button.selected {
      background-color: #505F79;
      color: #F4F5F7;
      font-weight: bold;
    }

    .table-sub-filter-button.selected:hover {
      background-color: #505F79;
    }

    .table-sub-filter-button:hover {
      background-color: #EBECF0;
    }

    .span_tooltip {
      width: 0;
      min-width: 0;
      white-space: nowrap;
      background-color: #01454B;
      color: white;
      text-align: center;
      border-radius: 6px;
      padding: 5px 10px;

      visibility: hidden;
      z-index: 100;
      line-height: 20px;
      position: absolute;
      top: -75px;
      border: 1px solid #005e64b4;
      box-shadow: 2px 2px 8px #01454B9f;
      overflow: auto;
    }

    .nl_diff_btn {
      border: 1px solid black;
      padding: 5px 0 5px 10px;
      background-color: #eee;
      text-align: left;
      transition: 0.2s;
      color: black;
      width: 100%;
    }

    .nl_diff_btn.slim {
      padding: 2px 0 2px 10px;
    }

    .nl_diff_btn.active,
    /* override regular hover */
    .nl_diff_btn.active:hover {
      width: calc(100% - 10px);
      background-color: #ccc;
      margin-left: 10px;
      color: black;
    }

    .nl_diff_btn.empty,
    /* override the regular hover */
    .nl_diff_btn.empty:hover {
      background-color: #eee;
      font-style: italic;
    }

    .nl_diff_btn:hover {
      background-color: #ccc;
      color: white;
    }

    /* all spans inside the nl_diff_btn class */
    .nl_diff_btn span {
      display: inline-block;
    }

    /* all editable spans inside the nl_diff_btn class */
    .nl_diff_btn span.editable {
      text-decoration: underline;
      background-color: #afafaf3d;
      text-decoration-style: dotted;
      border-radius: 2.5px;
      padding: 0 5px;
      cursor: text;
    }

    .nl_summary_table_container {
      display: inline-flex;
      width: 100%;
    }

    .nl_summary_table_wrapper_full {
      margin: 0 10px;
      width: 98%;
    }

    .nl_summary_table_wrapper_half {
      margin: 0 10px;
      width: 49%;
    }

    .nl_summary_table {
      background-color: #048c98;
      border-radius: 4px;
      padding: 5px 10px;
      height: 100%;
    }

    .nl_summary_table_inner_scroll {
      max-height: 250px;
      overflow-y: scroll;
    }

    .nl_summary_header {
      padding-bottom: 5px;
      text-align: center;
      height: 40px;
      color: white;
    }

    .nl_summary_row {
      display: inline-flex;
      width: 100%;
    }

    .nl_summary_checkbox {
      background-color: white;
      border: black solid 1px;
      text-align: center;
      cursor: pointer;
      height: 18px;
      width: 18px;
      margin: 4px;
    }

    .nl_summary_checkbox.inactive {
      visibility: hidden;
    }

    .nl_summary_checkbox.checked::after {
      content: '\1F5F8';
    }

    .highlight-on-click.highlighted {
      color: white;
    }
    
    .sorted-table.fixed-row-width tbody tr td {
      max-width: 300px;
    }

    td.edited {
      background-color: #fdff8f8c;
    }

    span.edited {
      background-color: #fdff8f8c !important;
    }

    /* begin connection status indicators */
    .green-dot::after {
      content: '\1F7E2';
    }

    .yellow-dot::after {
      content: '\1F7E1';
    }
    
    .red-dot::after {
      content: '\1F534';
    }

    .web-con-info-container {
      position: relative;
      margin-top: 5px;
      font-size: 14px;
      cursor: pointer;
    }

    .web-con-info-container:hover .web-con-ttp {
      visibility: visible;
    }

    .web-con-txt {
      text-decoration: underline;
    }

    .web-con-ttp {
      background-color: #555;
      visibility: hidden;
      position: absolute;
      text-align: center;
      min-width: 75%;
      border-radius: 4px;
      color: white;
      padding: 3px;
      left: 15%;
      top: 125%;
    }

    .web-con-info-container .web-con-ttp::after {
      border-color:  transparent transparent #555 transparent;
      border-style: solid;
      position: absolute;
      border-width: 5px;
      margin-left: -5px;
      bottom: 100%;
      content: "";
      left: 50%;
    }

    .netbom-connection-text {
      text-decoration: underline;
    }
    /* end connection status indicators */

    #table_filter_util_row {
      margin-top: 20px;
      margin-left: 10px;
    }

    .rail-value {
      font-weight: bold;
    }
    
    /* This will prevent the browser from merging consecutive white-space into a single white-space */
    .ignore-whitespace-formatting {
      white-space: pre;
    }
    
    .filter-search-text-styling {
      font-size: 11px;
    }


  
  
    /* Context menu */
    .context-menu {
      display: none;
      position: absolute;
      /* border: 1px solid black; */
      border-radius: 4px;
      width: 275px;
      background: white;
      box-shadow: 2px 2px 15px 2px #777777;
      z-index: 100;
      font-size: 15px;
    }

    .context-menu ul {
      list-style: none;
      padding: 4px;
      margin: 0;
    }

    .context-menu li {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      /* margin: 4px; */
    }

    .context-menu ul li:hover {
      cursor: pointer;
      /* background-color: #048c98; */
      background-color: #f1f1f1;
      border-radius: 4px;
    }

  
    
    /* The Modal (background) */
    .modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 15;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }

    .modal h1,
    .modal h2,
    .modal h3 {
      margin-bottom: 5px;
      padding-left: 40px;
      text-align: center;
    }

    .modal .build-info-container {
      border: 1px solid black;
      font-family: Courier;
      margin-bottom: 20px;
      padding: 10px 25px;
      width: 95%;
    }

    /* Modal Header */
    .modal-header {
      padding: 6px 16px;
      background-color: #048c98;
      text-align: center;
      font-size: 22px;
      color: white;
    }

    /* Modal Body */
    .modal-body {
      padding: 6px 16px;
      overflow: scroll;
      height: 87vh !important;
    }

    .modal-body table {
      width: 100%;
    }

    /* Modal Footer */
    .modal-footer {
      padding: 6px 16px;
      background-color: #048c98;
      color: white;
      font-size: 12px;
      font-style: italic;
      text-align: center;
    }

    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 90%;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      animation-name: animatetop;
      animation-duration: 0.4s;
      top: 2%;
    }

    /* Add Animation */
    @keyframes animatetop {
      from {
        top: -300px;
        opacity: 0;
      }

      to {
        top: 2%;
        opacity: 1;
      }
    }
  
  
    

    .sheet-change-dropdown.report-header-dropdown {
      font-size: 13px;
      margin: 5px;
      width: 135px;
    }

    .report-header-dropdown.red {
      background: red;
    }

    .report-header-dropdown.orange {
      background: orange;
    }

    .sheet-change-dropdown {
      display: inline-block;
      background: #39A3AC;
      color: #333;
      border: 0;
      margin-right: 5px;
      padding: 5px 10px;
      box-shadow: 0 0 2px 1px black;
      font-size: 15px;
      width: 150px;
      text-align: center;
    }

    .sheet-change-dropdown:hover {
      background: #666;
      color: #ccc;
      box-shadow: 0 0 3px 1px black;
    }

    .sheet-change-dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 170px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 11;
      margin-top: 5px;
      margin-left: -12px;
    }

    .sheet-change-dropdown-content-show {
      display: block;
    }

    .sheet-change-dropdown-content a {
      color: black;
      padding: 8px 16px;
      text-decoration: none;
      display: block;
      border: #f1f1f1 solid 1px;
    }

    .sheet-change-dropdown-content a:hover {
      background-color: #39A3AC;
    }

    .sheet-change-active {
      background-color: #39A3AC;
    }
    
    
    
      /* Style the buttons that are used to open and close the accordion panel */
      .accordion_header {
        --acc_button_padding: 12px;
        --acc_panel_margin: 15px;
        --acc_panel_width: 85%;

        display: table;
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: var(--acc_button_padding);
        padding-left: 40px;
        min-width: calc(var(--acc_panel_width) + (var(--acc_panel_margin) * 2 + var(--acc_button_padding) * 2)); /* 800px */
        width: fit-content;
        text-align: left;
        outline: none;
        transition: 0.2s;
        font-weight: bold;
        border: 3px;
        border-color: #39A3AC;
        border-style: solid;
        border-radius: 4px;
        margin-bottom: 5px;
      }

      /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
      .accordion_header:hover {
        background-color: #ccc;
      }

      .accordion_header.active {
        background-color: #ccc;
      }

      /* Style the accordion panel. Note: hidden by default */
      .panel_accordion_header {
        display: none;
        overflow: hidden;
        padding: 8px;
        border: 3px;
        border-color: #39A3AC;
        border-style: solid;
        border-top: 0;
        margin: -7px 15px 15px 15px;
        width: 85%;  /* 750px */
      }

      .panel_accordion_header.active {
        display: block;
      }

      .table-cell-height-restriction {
        overflow: hidden;
        max-height: 100px;
      }

      .table-cell-height-restriction.expanded {
        max-height: none;
        height: 100%;
        overflow: visible;
      }

      .important-sticky-left {
        position: sticky;
        float: left;
      }

      .floating-table-buttons {
        position: -webkit-sticky;
        position: sticky;
        display: inline;
        z-index: 1;
        top: 0;
      }

      .expand-icon-btn-styling {
        float: right;
        border: 1px black solid;
        border-radius: 2px;
        min-height: 20px;
        min-width: 20px;
        text-align: center;
        /* give it a background color so it covers the text in the background */
        background: white;
        /* have to explicitly set color because the row selection overrides font color */
        color: black;
      }

      .expand-icon-btn-styling:hover {
        cursor: pointer;
      }

      td.with-expand-icon {
      }

@media screen {
  .konva-net-trace-container {
    height: calc(100vh - 60px);
    width: calc(100vw - 40px);
    border: 1px black solid;
  }
}

@media print {
  .konva-net-trace-container {
    height: calc(100vh - 60px);
    width: calc(100vw - 40px);
  }
}