*{
    padding: 0;
    margin: 0;
  }

html,body {
  height: 100%;
  min-height: 100%;
}
body {
    background-color: #212833;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  a{
    text-decoration: none;
  }

  #header{
  width: 100%;
  flex: 0 1 100px;
  height:70px;
  overflow: hidden;
  background-color: white;
  position: relative;
  }
  #title{
    text-align: center;
    font-size: 27px;
    color: black;
    padding-top: 20px;
    font-weight: bold;
    
  }

  #OperationContainer{
      position:absolute;
      top:25px;
      left: 20px;

  }
  .button{
    width: 55px;
  }

  #InsertNodeField,
  #DeleteNodeField{
    width: 120px;
  }
  #DeleteNodeField {
    margin-left: 10px;
  }
  .Canvas{
    width: 100%;
    flex: 1 1 auto;
    background-color: #212833;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.indicator{
    position: absolute;
}
.indicator text{
  font-size: 20px;
}

svg{
  margin-top: 5px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.node circle{
  fill: #29e703;
  stroke: #168700;
  stroke-width: 1px;

}

.node text{
  font-size: 22px;
  fill: #ffffff;
}
.highlightedNode circle {
  fill: red;
  stroke: red;
  stroke-width: 1px;
}
.null-node,
.null-link {
  visibility: hidden;
}
line {
  stroke: #099b96;
}
.LinkAnimation {
  stroke: red;
  stroke-dasharray: 500;
  animation: filling 1s linear forwards;
}
@keyframes filling{
  from{
        stroke-dashoffset: 500;
  }
  to{
    stroke-dashoffset: 0;
  }
}