:root {
  --bg-color: #e0e0e0;
  --my-color: #4f61bc;
  --border-color: #6379e8;
  --item-color: #eeeeee;
  --node-color: #3b2755;
  --subnode-color: #454488;
  --interface-color: #fb9a4a;
  --external-color: #DDD;
  --stroke-color: #AAA;
  --stroke-line-color: #195905;
  --text-color: #ddd;
  --external-cell-color: #ccc;
  --external-text-color: #333;
  --external-stroke-color: #000000;
}
/* TODO Need to learn more about Bulma
@media (prefers-color-scheme: dark){
  :root {
      --bg-color: #e0e0e0;
      --my-color: #4f61bc;
      --border-color: #6379e8;
      --item-color: #eeeeee;
      --node-color: #3b2755;
      --subnode-color: #454488;
      --interface-color: #fb9a4a;
      --external-color: #DDD;
      --stroke-color: #AAA;
      --stroke-line-color: #195905;
      --text-color: #ddd;
      --external-cell-color: #ccc;
      --external-text-color: #333;
      --external-stroke-color: #000000;
    }
}

[data-theme=dark],
 .them-dark {
  :root {
      --bg-color: #e0e0e0;
      --my-color: #4f61bc;
      --border-color: #6379e8;
      --item-color: #eeeeee;
      --node-color: #3b2755;
      --subnode-color: #454488;
      --interface-color: #fb9a4a;
      --external-color: #DDD;
      --stroke-color: #AAA;
      --stroke-line-color: #195905;
      --text-color: #ddd;
      --external-cell-color: #ccc;
      --external-text-color: #333;
      --external-stroke-color: #000000;
    }
 } */

@font-face {
  font-family: 'Galaxy-Regular';
  src: url('/fonts/Galaxy-Regular.woff') format('woff');
}


html,
body {
  font-size: 0.9rem;
  background-color: var(--bg-color);
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/material-icons/iconfont/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/assets/material-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(/assets/material-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(/assets/material-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}

.error {
  color: #FF0000;
}

.color-blue {
  background-color: #3e8ed0;
}

.color-purple {
  background-color: var(--my-color);
  border-bottom-color: var(--border-color);
  border-top-color: var(--border-color);
  border-left-color: var(--border-color);
  border-right-color: var(--border-color);
}

.item-color {
  background-color: var(--item-color);
}

.is-active {
  color: white;
}

.myFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}

.horizontal-center {
  margin: auto;
  width: 50%;
  padding: 5px;
}

.vertical-center {
  margin: 0;
  position: relative;
  top: 45%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

svg.graph {
  background-color: "#555555";
  font-family: "sans-serif";
  font-size: 12px;
}

.lines line {
  stroke: var(--stroke-line-color);
  stroke-opacity: 0.6;
}

td.external {
  background-color: var(--external-cell-color);
  color: var(--external-text-color);
  font-weight: 700;
}

text.ext-node,
text.ext-subnode,
text.ext-interface {
  fill: var(--external-text-color);
}

text.node,
text.subnode,
text.interface {
  fill: var(--text-color);
  font-weight: bold;
}

circle.node {
  fill: var(--node-color);
  stroke: var(--stroke-color);
  stroke-width: 2.5px;
}

circle.ext-node {
  fill: var(--external-color);
  stroke: var(--external-stroke-color);
  stroke-opacity: 0.6;
}

circle.subnode {
  fill: var(--subnode-color);
  stroke: var(--stroke-color);
  stroke-width: 2.5px;
}

circle.ext-subnode {
  fill: var(--external-color);
  stroke: var(--external-stroke-color);
  stroke-opacity: 0.6;
}

circle.interface {
  fill: var(--my-color);
  stroke: var(--stroke-color);
  stroke-width: 2.5px;
}

circle.ext-interface {
  fill: var(--external-color);
  stroke: var(--external-stroke-color);
  stroke-opacity: 0.6;
}
rect.legend {
  fill: #C9C9C9;
}
/* This is a Node */
g.node :is(rect.node-legend),
g.node :is(polygon) {
  fill: var(--node-color);
  stroke-opacity: 0.6;
  stroke: var(--stroke-color);
  stroke-width: 2.5px;
}
/* This is a SubNode */
g.node :is(rect.subnode-legend),
g.node :is(path) {
  fill: var(--subnode-color);
  stroke: var(--stroke-color);
  stroke-opacity: 0.6;
  stroke-width: 2.5px;
}
/* This is an Interface */
g.node :is(ellipse) {
  fill: var(--my-color);
  stroke-width: 2.5px;
  stroke: var(--stroke-color);
}

g.ext-node :is(polygon),
g.ext-node :is(polyline),
g.ext-node :is(ellipse) {
  fill: var(--external-color);
  stroke: var(--external-stroke-color);
  stroke-opacity: 0.6;
  stroke-width: 1px;
}
/* This is the text for Node, SubNode and Interface */
g.node :is(text) {
  fill: var(--text-color);
  font-weight: bold;
}
g.ext-node :is(text) {
  fill: var(--external-text-color);
}
/* This is the arrow head of te connectors */
g.edge :is(polygon) {
  fill: var(--stroke-line-color);
  stroke: var(--stroke-line-color);
  stroke-opacity: 0.6;
}
/* This is the line between Node, SubNode and/or Interface */
g.edge :is(path) {
  stroke: var(--stroke-line-color);
  stroke-opacity: 0.6;
}

.navbar.is-mycolor {
  background-color: var(--my-color);
  color: rgb(10, 8, 8)
}

.navbar.is-mycolor .navbar-brand .navbar-link,
.navbar.is-mycolor .navbar-brand>.navbar-item {
  color: #fff
}

.navbar.is-mycolor .navbar-brand .navbar-link.is-active,
.navbar.is-mycolor .navbar-brand .navbar-link:focus,
.navbar.is-mycolor .navbar-brand .navbar-link:hover,
.navbar.is-mycolor .navbar-brand>a.navbar-item.is-active,
.navbar.is-mycolor .navbar-brand>a.navbar-item:focus,
.navbar.is-mycolor .navbar-brand>a.navbar-item:hover {
  background-color: var(--my-color);
  color: #fff
}

.navbar.is-mycolor .navbar-brand .navbar-link::after {
  border-color: #fff
}

.navbar.is-mycolor .navbar-burger {
  color: #fff
}

@media screen and (min-width: 1024px) {

  .navbar.is-mycolor .navbar-end .navbar-link,
  .navbar.is-mycolor .navbar-end>.navbar-item,
  .navbar.is-mycolor .navbar-start .navbar-link,
  .navbar.is-mycolor .navbar-start>.navbar-item {
    color: #fff
  }

  .navbar.is-mycolor .navbar-end .navbar-link.is-active,
  .navbar.is-mycolor .navbar-end .navbar-link:focus,
  .navbar.is-mycolor .navbar-end .navbar-link:hover,
  .navbar.is-mycolor .navbar-end>a.navbar-item.is-active,
  .navbar.is-mycolor .navbar-end>a.navbar-item:focus,
  .navbar.is-mycolor .navbar-end>a.navbar-item:hover,
  .navbar.is-mycolor .navbar-start .navbar-link.is-active,
  .navbar.is-mycolor .navbar-start .navbar-link:focus,
  .navbar.is-mycolor .navbar-start .navbar-link:hover,
  .navbar.is-mycolor .navbar-start>a.navbar-item.is-active,
  .navbar.is-mycolor .navbar-start>a.navbar-item:focus,
  .navbar.is-mycolor .navbar-start>a.navbar-item:hover {
    background-color: var(--my-color);
    color: #fff
  }

  .navbar.is-mycolor .navbar-end .navbar-link::after,
  .navbar.is-mycolor .navbar-start .navbar-link::after {
    border-color: #fff
  }

  .navbar.is-mycolor .navbar-item.has-dropdown.is-active .navbar-link,
  .navbar.is-mycolor .navbar-item.has-dropdown:focus .navbar-link,
  .navbar.is-mycolor .navbar-item.has-dropdown:hover .navbar-link {
    background-color: var(--my-color);
    color: #fff
  }

  .navbar.is-mycolor .navbar-dropdown a.navbar-item.is-active {
    background-color: var(--my-color);
    color: #fff
  }
}

abbr[pcidss]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

abbr[pcidss]:after {
  content: attr(pcidss);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: wrap;
  width: 120px;
  z-index: 20;
  border-radius: 5px;
  box-shadow: 5px 5px 15px #222;
  background-image: linear-gradient(#eeeeee, var(--my-color));
  visibility: hidden;
}

abbr[pcidss] {
  position: relative;
}

abbr[source]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

abbr[source]:after {
  content: attr(source);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: wrap;
  width: 200px;
  z-index: 20;
  border-radius: 5px;
  box-shadow: 5px 5px 15px #222;
  background-image: linear-gradient(#eeeeee, var(--my-color));
  visibility: hidden;
}

abbr[source] {
  position: relative;
}

abbr[interface]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

abbr[interface]:after {
  content: attr(interface);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: -100px;
  top: 100%;
  white-space: wrap;
  width: 200px;
  z-index: 200;
  border-radius: 5px;
  box-shadow: 5px 5px 15px #222;
  background-image: linear-gradient(#eeeeee, var(--my-color));
  visibility: hidden;
}

abbr[interface] {
  position: relative;
}

abbr[target]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

abbr[target]:after {
  content: attr(target);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  right: 0;
  top: 100%;
  white-space: wrap;
  width: 200px;
  z-index: 20;
  border-radius: 5px;
  box-shadow: 5px 5px 15px #222;
  background-image: linear-gradient(#eeeeee, var(--my-color));
  visibility: hidden;
}

abbr[target] {
  position: relative;
}

p.table {
    background-color: rgba(255, 255, 255, 0);
}

p.table[interface]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

p.table[interface]:after {
  content: attr(interface);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0px;
  top: -100%;
  white-space: nowrap;
  z-index: 20;
  border-radius: 5px;
  box-shadow: 5px 5px 15px #222;
  background-image: linear-gradient(#eeeeee, var(--my-color));
  visibility: hidden;
}

p.table[interface] {
  position: relative;
}

.bulma-ltr-property-mixin {
  margin-right: 1rem;
  border-radius: 0.25em;
}
/* styles.css */

/* Apply some basic styles to the fixed-width container */
.fixed-width-container {
  width: min(75vw, 100%);
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Style the image container */
.image-container {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.image-container svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  margin: 0 auto;
}

.zoomable-svg {
  transform-origin: top left;
  will-change: transform;
  transition: transform 0.06s linear;
}

@media (max-width: 768px) {
 .fixed-width-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .fixed-width-container {
    width: 100%;
  }
  h3.legend {
    display: none;
  }
}