html,
body {
  height: 100%;
  margin: 0;
}

.root {
  height: 100%;
  display: grid;
  grid-template-columns: 2.8fr 9fr;
  grid-template-rows: min-content auto min-content;
  grid-template-areas: "h h" "ui cy" "f f";
  gap: 5px 5px;
}

.ext-header {
  grid-area: h;
}

.ext-intro {
  grid-area: ui;
  overflow-y: auto;
  font-size: .875rem;
}
.cy-canvas {
  width: 100%;
  height: 100%;
  padding: 8px;
  grid-area: cy;
}
.cy-container {
  height: 100%;
  padding: 8px;
  grid-area: cy;
}
.ext-footer {
  padding-bottom: 5px;
  grid-area: f;
}
.cy-extension-container{
  padding: 8px;
  height: 47%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.cy-container-header{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cy-container-header h1{
  width: 50%;
  margin: 0;
  margin-left: 10px;
}
#cy {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 2px solid #2f4154;
  border-radius: 6px;
}

#cyVisible {
  width: 50%;
  height: 100%;
  border: solid #2f4154;
  border-width: 1px 1px 2px 2px;
  border-radius: 6px;
  float: left;
}

#cyInvisible {
  width: 50%;
  height: 100%;
  border: solid #2f4154;
  border-width: 1px 2px 2px 1px;
  border-radius: 6px;
}
#cyHeadless{
  width: 50%;
  height: 100%;
  border: solid #2f4154;
  border-width: 1px 2px 2px 1px;
  border-radius: 6px;
}
h1 {
  opacity: 0.5;
  font-size: 14px;
  font-weight: bold;
  margin: 1%;
  background-color: transparent;
}
#smallTag{
  font-size: 14px;
  padding-right: 5px;
}
.break {
  flex-basis: 100%;
  height: 0;
}

#slider-nodes, #slider-edges
{
  width: 75%;
  margin-left: 1em;
  margin-top: 0.5em;
}

#min-weight-node, #min-weight-edge, #max-weight-node, #max-weight-edge {
  width: 50px;
  text-align: center;
}

.accordion-body{
  padding: 0.5rem 1.0rem;
}
hr{
  margin: 0.2rem 0rem;
}