.body-fullscreen {
       overflow: hidden;
   }
   .grid-graph-container {
       display: grid;
       grid-template-columns: minmax(302px,1fr) 3fr;
       grid-template-rows: min-content max-content;
       grid-row-gap: 0px;
       height: 65vh;
       padding: 0px;
   }
   .grid-graph-container-fullscreen {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       z-index: 2;
       background-color: white;
   }
   .grid-item-top {
       grid-column: 2;
       /* height: 10vh; */
   }

   /* .grid-item-top-grid { */
   /*     display: grid; */
   /*     grid-column-gap: 0.5rem; */
   /* } */

   #graph-ui-top-toolbar {
       grid-column: 2;
       grid-row: 1;
   }

   #graph-ui-fullscreen {
       float: inline-end;
   }

   #graph-ui-top-info {
       grid-column: 2;
       grid-row: 2;
   }

   #graph-ui-graph {
       position: relative;
   }

   div#graph-ui-info-float {
       pointer-events: none; 
       position: absolute;
       background-color: var(--bs-dom-graph);
       opacity: 0.9;
       top: 0;
       margin: 1.5rem;
       color: white;
       padding: 0.5rem;
       filter: drop-shadow(2px 4px 6px grey);
   }

   h2#graph-ui-info-float-title {
       font-size: 1.0rem;
   }
   
   .grid-item-fullscreen {
       grid-column: 3;
       height: min-content;
   }
   .grid-item-graph {
       grid-column: 2;
   }
   .grid-item-graph-fullscreen {
       /* height: 95vh; */
   }
   line.link {
       vector-effect: non-scaling-stroke;
   }
   circle.node, path.node {
       vector-effect: non-scaling-stroke;
       stroke-alignment: inner;
       pointer-events: none;
   }
   circle.node-interact {
       vector-effect: non-scaling-stroke;
       stroke-alignment: outer;
   }
   circle.selection {
       vector-effect: non-scaling-stroke;
       stroke-alignment: outer;
       pointer-events: none;
       stroke-dasharray: 1% 1%;
       animation: dash 5s linear infinite;
   }

   path.node-muted {
       filter: brightness(200%) contrast(50%);
   }

   @keyframes dash {
       to {
	   stroke-dashoffset: 500;
       }
   }

   #graph-ui-ctrl-menu {
       grid-column: 1;
       grid-row: 1;
   }
   
   #graph-ui-ctrl-scrollable {
       grid-column: 1;
       grid-row: 2;
       height: 100%;
       overflow-y: scroll;
   }

   ol.hyp-list {
       list-style: none;
   }

   .hyp-list li {
       display: inline-block;
       border-radius: 50%;
       width: 30px;
       height: 30px;
       line-height: 30px;
       text-align: center;
   }
   li.hyp-1 {
       background: orange;
   }
   li.hyp-2 {
       background: green;
   }
   li.hyp-3 {
       background: lime;
   }
   li.hyp-4 {
       background: blue;
   }
   li.hyp-5 {
       background: purple;
   }

   ul#ui-ctrl-tab a.nav-link.active {
       background-color: var(--primary);
       border-color: var(--primary);
       color: white;
   }
   
   #ui-ctrl-panel-selection-info {
       display: grid;
       grid-template-columns: min-content auto;
   }

   #ui-ctrl-panel-selection-info-toggle {
       grid-column: 1;
       color: black;
   }

   #ui-ctrl-panel-selection-info-toggle[aria-expanded="true"] span {
       display: inline-block;
       transform: rotate(90deg);
   }

   #ui-ctrl-panel-selection-info-title {
       grid-column: 2;
   }

   #ui-ctrl-panel-selection-info-desc-collapse {
       grid-column: 1 / 3;
   }

   #ui-ctrl-panel-selection-class:hover {
       background: black;
       color: white;
   }

   #ui-ctrl-panel-selection-title:hover {
       background: black;
       color: white;
   }

   #ui-ctrl-panel-selection-title:hover a {
       color: white;
   }

   div#ui-ctrl-panel-filter-node-container,
   div#ui-ctrl-panel-filter-link-container {
       display: grid;
       grid-template-columns: min-content auto;
   }

   .ui-grid-filter-class-label {
       grid-column: 2 / 6;
       background-color: lightblue;
       margin: 0;
       padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   }
   
   .ui-grid-filter-class-toggle {
       grid-column: 1;
       border: 1px solid lightblue;
       text-align: center;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }
   

   div#ui-ctrl-panel-selection-connected-container {
       display: grid;
       /* grid-template-columns: min-content auto min-content min-content min-content; */
       grid-template-columns: min-content auto 2rem 2rem 2rem;
   }

   .ui-grid-connected-class-collapse {
       grid-column: 1;
       background-color: lightblue;
       text-align: center;
       padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   }
   
   .ui-grid-connected-class-label {
       grid-column: 2 / 6;
       background-color: lightblue;
       margin: 0;
       padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   }
   
   .ui-grid-connected-node-toggle {
       grid-column: 1;
       border: 1px solid lightblue;
       text-align: center;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }
   
   .ui-grid-connected-node-label {
       grid-column: 2;
       border: 1px solid lightblue;
       margin: 0;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }

   .ui-grid-connected-node-select {
       grid-column: 3;
       border: 1px solid lightblue;
       margin: 0;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }

   .ui-grid-connected-node-expand {
       grid-column: 4;
       border: 1px solid lightblue;
       margin: 0;
       font-style: unset;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }

   .ui-grid-connected-node-graph {
       grid-column: 5;
       border: 1px solid lightblue;
       margin: 0;
       font-style: unset;
       padding: 0.15rem 0.5rem 0.15rem 0.5rem;
   }

   /* i[data-op="op_exclude"], i[data-op="op_exclude"] + .ui-grid-connected-node-label {
      background-color: white;
      } */

   /* i[data-op="op_exclude"] ~ .ui-grid-connected-node-select,
      background-color: white;
      } */
   
   i.ui-grid-connected-node-toggle[data-visible],
   h5.ui-grid-connected-node-label[data-visible],
   h5.ui-grid-filter-class-label[data-visible],
   i.ui-grid-connected-node-select[data-visible],
   i.ui-grid-connected-node-expand[data-visible],
   i.ui-grid-connected-node-graph[data-visible] {
       background-color: white;
   }

   i.ui-grid-connected-node-select:hover,
   i.ui-grid-connected-node-expand:hover,
   i.ui-grid-connected-node-graph:hover,
   i.ui-grid-connected-node-toggle:hover {
       cursor: pointer;
   }

   
   h5.ui-grid-filter-label:not([data-visible]):hover,
   h5.ui-grid-connected-node-label:not([data-visible]):hover {
       cursor: not-allowed;
   }
   
   h5.ui-grid-filter-class-label[data-visible]:hover,
   h5.ui-grid-connected-node-label[data-visible]:hover {
       background-color: black;
       color: white;
       cursor: help;
   }

   i[data-link-op],
   i[data-op] {
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       text-align: center;
       border: 1px solid lightblue;
       font-style: unset;
   }

   i[data-op="op_include"]:before {
       content: "\f070";
       background-color: white;
   }

   i[data-op="op_exclude"]:before {
       content: "\f06e";
       background-color: white;
   }

   i[data-link-op="op_include"]:before {
       content: "\f06e";
       background-color: white;
   }

   i[data-link-op="op_exclude"]:before {
       content: "\f070";
       background-color: white;
   }

   i.ui-grid-connected-node-select:before {
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       text-align: center;
       content: "\f25a";
   }
   
   i.ui-grid-connected-node-expand:before {
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       text-align: center;
       content: "\f542";
   }
   
   i.ui-grid-connected-node-graph:before {
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       text-align: center;
       content: "\f05b";
   }
   
   .grid-item-controls h2 {
       background-color: var(--bs-dom-graph);
       color: var(--bs-white);
       font-size: 1.2rem;
       margin: 0;
       padding: 0.5rem;
       text-align: center;
   }
   
   .grid-item-controls h3 {
       background-color: #BDD9BF;
       color: var(--bs-black);
       font-size: 1.1rem;
       /* margin-bottom: 0.25rem !important; */
       margin: 0;
       padding: 0.5rem;
       text-align: center;
       /* text-transform: uppercase; */
   }

   .grid-item-controls h4 {
       color: var(--bs-black);
       font-size: 1.0rem;
       margin: 0;
       overflow-wrap: anywhere;
       /* padding: 0.5rem; */
   }

   #ui-ctrl-panel-help h4 {
       background-color: var(--bs-dom-essay);
       color: var(--bs-white);
       font-size: 1.0rem;
       margin: 0;
       padding: 0.5rem;
       text-align: center;
   }

   #ui-ctrl-panel-help p {
       margin: 0;
       padding: 0.5rem;
   }

   .grid-item-controls h5 {
       font-size: 0.9rem;
       margin: 0;
       overflow-wrap: anywhere;
       padding: 0.5rem;
   }

   .grid-item-controls a {
       margin: 0;
       padding: 0;
   }

   .grid-item-controls p {
       margin: 0;
       padding: 0 0.25rem 0 0.25rem;
   }