.state {
    vertical-align: middle;
    display: inline-block;
    border: 1px solid grey;
    margin-left: 10px; 
    width: 34px !important;
    height: 34px !important;
}

/*#ff0000*/
.state--1 {
    background-color: white !important;
    stroke: white !important;
}
text.state--1 {
    fill: white !important;
}

/*#ff0000*/
.state-0 {
    background-color: red !important;
    stroke: red !important;
}
text.state-0 {
    fill: red !important;
}

  /*#ff69b4*/
.state-1 {
    background-color: hotpink !important;
    stroke: hotpink !important;
}
text.state-1 {
    fill: hotpink !important;
}

.state-2 {
    background-color: #fff !important;
    stroke: purple !important;
    /*stroke-dasharray: 16;*/
    stroke-dasharray: 50,15;
    stroke-linecap: round;
    stroke-dasharray: 1, 20;
    border: 4px solid purple !important; 
}
text.state-2 {
    fill: purple !important;
}

.state-3 {
    background-color: purple !important;
    stroke: purple !important;
}
text.state-3 {
    fill: purple !important;
}

/*#ffff00*/
.state-4 {
    background-color: yellow !important;
    stroke: yellow !important;
}
text.state-4 {
    fill: yellow !important;
}

/*#ffa500*/
.state-5 {
    background-color: orange !important;
    stroke: orange !important;
}
text.state-5 {
    fill: orange !important;
}

/*#add8e6*/
.state-6 {
    background-color: lightblue !important;
    stroke: lightblue !important;
}
text.state-6 {
    fill: lightblue !important;
}

/*#87cefa*/
.state-7 {
    background-color: lightskyblue !important;
    stroke: lightskyblue !important;
}
text.state-7 {
    fill: lightskyblue !important;
}

/*#4169e1*/
.state-8 {
    background-color: royalblue !important;
    stroke: royalblue !important;
}
text.state-8 {
    fill: royalblue !important;
}

/*#7cfc00*/
.state-9 {
    background-color: lawngreen !important;
    stroke: lawngreen !important;
}
text.state-9 {
    fill: lawngreen !important;
}

/*#7cfc00*/
.state-10 {
    stroke: lawngreen !important;
    /*stroke-dasharray: 16;*/
    stroke-dasharray: 50,15;
    background-color: #fff !important;
    border: 4px solid lawngreen !important; 
}
text.state-10 {
    fill: lawngreen !important;
}

/*#7cfc00*/
.state-11 {
    stroke: lawngreen !important;
    background-color: lawngreen !important;
}
text.state-11 {
    fill: lawngreen !important;
}

/*#008000*/
.state-12 {
    stroke: green !important;
    background-color: green !important;
}
text.state-12 {
    fill: green !important;
}

/*#8b4513*/
.state-13 {
    stroke: saddlebrown !important; 
    background-color: saddlebrown !important;
}
text.state-13 {
    fill: saddlebrown !important;
}

.state-14 {
    stroke: darkgrey !important;
    background-color: darkgrey !important;
}

/*#a9a9a9*/
text.state-14 {
    fill: darkgrey !important;
}

text.pipe.axo {
    fill: white !important;
}

/* LVI */

/*#ff0000*/
.state-1--1 {
    background-color: white !important;
    stroke: white !important;
}
text.state-1--1 {
    fill: white !important;
}

/*#ff0000*/
.state-1-0 {
    background-color: red !important;
    stroke: red !important;
}
text.state-1-0 {
    fill: red !important;
}

/*#ffa500*/
.state-1-1 {
    background-color: orange !important;
    stroke: orange !important;
}
text.state-1-1 {
    fill: orange !important;
}

/*#add8e6*/
.state-1-2 {
    background-color: lightblue !important;
    stroke: lightblue !important;
}
text.state-1-2 {
    fill: lightblue !important;
}

/*#4169e1*/
.state-1-3 {
    background-color: royalblue !important;
    stroke: royalblue !important;
}
text.state-1-3 {
    fill: royalblue !important;
}

/*#7cfc00*/
.state-1-4 {
    background-color: lawngreen !important;
    stroke: lawngreen !important;
}
text.state-1-4 {
    fill: lawngreen !important;
}

/*#008000*/
.state-1-5 {
    background-color: green !important;
    stroke: green !important;
}
text.state-1-5 {
    fill: green !important;
}

/*#8b4513*/
.state-1-6 {
    background-color: saddlebrown !important;
    stroke: saddlebrown !important;
}
text.state-1-6 {
    fill: saddlebrown !important;
}

/* Insulation */

/*#ff0000*/
.state-2--1 {
    background-color: white !important;
    stroke: white !important;
}
text.state-2--1 {
    fill: white !important;
}

.state-2-0 {
    background-color: red !important;
    stroke: red !important;
}
text.state-2-0 {
    fill: red !important;
}

.state-2-1 {
    background-color: orange !important;
    stroke: orange !important;
}
text.state-2-1 {
    fill: orange !important;
}

.state-2-2 {
    background-color: lightblue !important;
    stroke: lightblue !important;
}
text.state-2-2 {
    fill: lightblue !important;
}

.state-2-3 {
    background-color: royalblue !important;
    stroke: royalblue !important;
}
text.state-2-3 {
    fill: royalblue !important;
}

.state-2-4 {
    background-color: lawngreen !important;
    stroke: lawngreen !important;
}
text.state-2-4 {
    fill: lawngreen !important;
}

.state-2-5 {
    background-color: green !important;
    stroke: green !important;
}
text.state-2-5 {
    fill: green !important;
}

.state-2-6 {
    background-color: saddlebrown !important;
    stroke: saddlebrown !important;
}
text.state-2-6 {
    fill: saddlebrown !important;
}



/* Full screen */


.welding_circle {
  opacity: .6;
  stroke-width: 2px;
  stroke: black;
  fill: red;
}
.welding_circle.welded {
  fill: lawngreen;
}

.welding_circle.target {
  stroke: yellow;
  stroke-width: 4px;
}