div.Junttix-choices {
    display:inline-flex;
    margin: 2pt;
}
span.Junttix-choice {
    /*border: solid hsl(216, 68%, 27%) 2pt;
    border-radius: 2pt;*/
    padding: 2pt;
}
span.Junttix-choice-selected {
    background: hsl(45, 100%, 50%);
}

button.Junttix-choice {
    /*border: solid hsl(216, 68%, 27%) 2pt;
    border-radius: 2pt;*/
    color: hsl(216, 68%, 27%);
    background: white;
    /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);*/
    border-style: outset;
    /*border: solid hsl(216, 68%, 27%) 2pt;*/
    border-width: 2pt;
    box-shadow: 2pt 2pt 4pt hsl(216, 68%, 80%);
    padding: 2pt;
    margin: 2pt;
    font-size: large;
}
button.Junttix-choice-selected {
    /*background: hsl(45, 100%, 50%);*/
    border-style: inset;
    color: white;
    background: hsl(216, 68%, 27%);
}


rect.Junttix-harrayvalue {
    fill: hsl(216, 68%, 98%);
    /* hsl(216,68%,97%); */
    stroke: hsl(216, 68%, 27%);
    stroke-width: 2px;
}

text.Junttix-harrayvalue {
    fill: hsl(216, 68%, 27%);
    text-anchor: middle;
}

text.Junttix-harrayptr {
    fill: hsl(216, 68%, 27%);
    text-anchor: middle;
}

text.Junttix-harrayindex {
    fill: hsl(216, 68%, 27%);
    font-size: small;
    text-anchor: middle;
}

rect.Junttix-harrayindex {
    fill: hsl(216, 68%, 98%);
}

rect.Junttix-harrayindex-highlight {
    fill: hsl(45, 100%, 50%);
}

div.Junttix-harray {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: auto;
    margin-bottom: 4pt;
}

div.Junttix-harrayvalue {
    justify-content: center;
    display: flex;
    align-items: flex-end;
    background: hsl(216, 68%, 98%);
    /* hsl(216,68%,97%); */
    border: solid hsl(216, 68%, 27%) 2pt;
    border-radius: 2pt;
    padding: 4pt 2pt;
    /*vertical-align: bottom;
    position: relative;
    bottom: 1pt;*/
    transition: height 500ms;
    margin: 2pt;
    box-shadow: 2pt 2pt 4pt hsl(216, 68%, 80%);
    /*lightblue;*/
}

p.Junttix-harrayvalue {
    color: black;
    padding: 0pt;
    margin: 0pt;
    user-select: none;
    /*writing-mode: sideways-rl;*/
}

text.Junttix-harrayvalue {
    color: black;
    padding: 0pt;
    margin: 0pt;
    user-select: none;
    pointer-events: none;
    /*writing-mode: sideways-rl;*/
}

div.Junttix-harrayindex {
    margin: auto;
    width: auto;
    text-align: center;
    user-select: none;
    color: black;
    /*background: #ffc100;*/
}

div.Junttix-harrayindex-highlight {
    background: hsl(45, 100%, 50%);
    /*#ffc100;*/
}

div.v {
    background: #8f8;
    /*height: 200pt;*/
    border: solid #888 1pt;
    margin: auto;
    position: relative;
    bottom: 0pt;
    left: 10%;
    vertical-align: top;
}

td.testv {
    background: #eef;
    /*height: 200pt;*/
    border: solid #888 1pt;
    padding: 8pt;
    vertical-align: bottom;
}

td.testi {
    background: #faa;
    /*height: 200pt;*/
    text-align: center;
    padding: 1pt;
    border: solid #888 1pt;
    border-radius: 2pt;
}

div.testa {
    background: #eef;
    display: block;
    position: relative;
    /*height: 200pt;*/
    padding: 8pt;
}

div.teste {
    background: #ffc100;
    display: inline-flex;
    justify-content: flex-end;
    flex-direction: column;
    border: solid #888 1pt;
    border-radius: 2pt;
    position: relative;
    padding: 2pt;
    box-shadow: 4pt -4pt 4pt lightblue;
    transition: height 10s;
    /*left: 0pt;*/
    /*bottom: 0pt;*/
    /*height: 100pt;*/
}

div.testi {
    background: #00c1ff;
    display: block;
    /*position: absolute;
    bottom: 0pt;
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: column;*/
    padding: 2pt;
}

div.testv {
    background: #ffc1aa;
    display: block;
    border: solid #444 1pt;
    border-radius: 2pt;
    position: absolute;
    left: 0pt;
    bottom: -0pt;
}

div.Junttix-playground {
    min-width: 300px;
    width: 100%;
    min-height: 300px;
    background: #f0f0ff;
    border: solid #18447e 1px;
    border-radius: 3px;
    box-shadow: 3px 3px 2px #18447e60;
}

svg.Junttix-playground {
    /*background: #ffffff;
    border: solid #18447e 1px;
    border-radius: 3px;
    box-shadow: 3px 3px 2px #18447e;*/
    display:block;
}

circle.Junttix-vertex {
    fill: #ffc100;
    /*white; */
    stroke: #0b5087;
    /*#18447e;*/
    stroke-width: 3;
    /*box-shadow: 3px 3px 2px #0b508780;*/
}
rect.Junttix-vertex {
    fill: #ffc100;
    /*white; */
    stroke: #0b5087;
    /*#18447e;*/
    stroke-width: 3;
    /*box-shadow: 3px 3px 2px #0b508780;*/
    border-radius: 3px;
}

circle.Junttix-vertex-selected {
    fill: #ffc1ff;
    stroke-width: 5;
}

circle.Junttix-vertex-shadow {
    fill: #a0a0a0;
    stroke: #a0a0a0;
    /*#18447e;*/
    stroke-width: 3;
}

span.Junttix-vertex-label {
    font-size: 20px;
    display: inline-block;
    /*text-align: center;*/
    /*background-color: #ffc100;*/
    /*white; */
    color: black;
    /*#18447e;*/
    /*color: #0b5087; */
    stroke-width: 3;
    /*opacity: 0.9;*/
    /*border: 1pt solid #0b5087;*/
    /*border-radius: 2pt;*/
    padding: 2px 2px;
    /*alignment-baseline: text-before-edge;*/
    user-select: none;
}

span.Junttix-vertex-attr {
    margin: 0px 0px;
    padding: 0px 1pt;
    font-size: 14px;
    display: inline-block;
    /*text-align: center;*/
    /*background-color: #ffc100; */
    background-image: linear-gradient(hsl(216, 68%, 70%), white);
    /* 29% */
    color: black;
    /*#18447e;*/
    /*color: #0b5087; */
    /*stroke-width: 3;*/
    opacity: 0.9;
    border: 1pt solid hsl(216, 68%, 29%);
    border-radius: 2pt;
    /*padding: 0pt 1pt;
    alignment-baseline: text-before-edge; */
    user-select: none;
}

polyline.Junttix-edge {
    fill: none;
    stroke: #0b5087;
    stroke-width: 3;
    stroke-linejoin: round;
}

polyline.Junttix-edge:hover {
    stroke: #ffc1ff;
}

path.Junttix-edge-arrow {
    fill: #18447e;
    stroke: #18447e;
    stroke-width: 1;
    opacity: 1.0;
}

polyline.Junttix-edge-shadow {
    fill: none;
    stroke: #a0a0a0;
    stroke-width: 3;
    stroke-linejoin: round;
}

path.Junttix-edge-arrow-shadow {
    fill: #a0a0a0;
    stroke: #a0a0a0;
    stroke-width: 1;
    opacity: 1.0;
}

span.Junttix-edge-label {
    font-size: 18px;
    display: inline-block;
    /*text-align: center;*/
    background-color: #ffc100;
    /*white; */
    color: black;
    /*#18447e;*/
    /*color: #0b5087; */
    stroke-width: 3;
    opacity: 0.9;
    border: 1pt solid #0b5087;
    border-radius: 2pt;
    padding: 0pt 1pt;
    /*alignment-baseline: text-before-edge;*/
}

div.Junttix-info {
    font-size: inherited;
    /*background: #ffffff;*/
    /*background: #f1f2f1;*/
    /*border: solid #18447eb0 2pt;*/
    /*border: solid #009246 1pt;*/
    /*border-radius: 3pt;*/
    /*box-shadow: 3pt 3pt 2pt #18447e80;*/
    /* box-shadow: 3pt 3pt 2pt #009246; /* 0,146,70*/
    /*margin: 1pt 5pt 2pt 2pt;*/
    /*padding: 3pt 3pt;*/
    /*padding: 1pt 2pt 4pt 2pt;*/
    padding: 2pt;
    width: auto;
    display: block;
    position: relative;
    box-shadow: 2pt 2pt 4pt hsl(216, 68%, 75%);
    /*lightblue;*/
    background: hsl(216, 68%, 98%);
    color: black;
    border: solid 1pt hsl(216, 68%, 27%);
    border-radius: 2pt;
    margin-bottom: 5pt;
}

div.Junttix-array {
    /*background: #ffffff;*/
    /*background: #f1f2f1;*/
    /*border: solid #18447eb0 2pt;*/
    /*border: solid #009246 1pt;*/
    /*border-radius: 3pt;
    box-shadow: 3pt 3pt 2pt #18447e80;*/
    /* box-shadow: 3pt 3pt 2pt #009246; /* 0,146,70*/
    /*margin: 1pt 5pt 2pt 2pt;*/
    /*padding: 3pt 3pt;*/
    /*padding: 1pt 2pt 4pt 2pt;*/
    padding: 5pt 0pt;
    width: auto;
    display: inline-block;
    position: relative;
}

div.Junttix-array-element {
    font-size: 12pt;
    background: #ffffff;
    border: solid #18447e 1pt;
    /*border-radius: 3pt;*/
    /*box-shadow: 3pt 3pt 2pt #18447e;*/
    /*margin: 2pt;*/
    padding: 3pt;
    display: inline-block;
    position: relative;
    cursor: pointer;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

div.Junttix-array-element-selected {
    /*background: #ffc100;*/
    background: hsl(216, 68%, 80%);   
}

div.Junttix-array-anchor {
    position: absolute;
    left: 0pt;
    top: 0pt;
    width: 0pt;
    height: 0pt;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

div.Junttix-array-index {
    background: #ffc100;
    border: solid #0b5087 1pt;
    border-radius: 1pt;
    /*box-shadow: 3pt 3pt 2pt #18447e;*/
    /*margin: 2pt;*/
    padding: 1pt;
    display: block;
    position: absolute;
    left: 1pt;
    bottom: 0pt;
    font-size: 8pt;
    /*cursor: pointer;*/
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

div.Junttix-button {
    font-size: 14pt;
    min-width: 24pt;
    min-height: 18pt;
    text-align: center;
    background: hsl(216, 68%, 97%);
    /*border: solid hsl(216,68%,29%) 2pt solid hsl(216,68%,50%) 2pt;*/
    border-style: solid;
    border-width: 2pt;
    border-color: hsl(216, 68%, 60%) hsl(216, 68%, 29%) hsl(216, 68%, 29%) hsl(216, 68%, 60%);
    /*border-radius: 3pt;*/
    /*box-shadow: 3pt 3pt 2pt #18447e;*/
    box-shadow: 2pt 2pt 4pt hsl(216, 68%, 75%);
    margin: 2pt;
    padding: 3pt;
    /*border-style: outset;*/
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.Junttix-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1pt dotted black;
}

.Junttix-tooltip span.Junttix-tooltiptext {
    visibility: hidden;
    width: 200pt;
    background-color: #18447e;
    opacity: 0.8;
    color: #fff;
    text-align: center;
    border-radius: 2pt;
    padding: 2pt 0;
    position: absolute;
    z-index: 1;
    top: -2pt;
    left: 110%;
}

.Junttix-tooltip span.Junttix-tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.Junttix-tooltip:hover span.Junttix-tooltiptext {
    visibility: visible;
}