/*----------------------SHAPES --------------*/
.svg-path {
  fill: var(--black);
}
.svg-trace,
.svg-axis {
  fill: none;
  stroke: var(--black);
  stroke-width: 0.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.svg-large .svg-trace {
  stroke-width: 0.7;
}
.svg-heart {
  fill: var(--colour5);
}
.svg-electrode {
  fill: var(--colour5);
  stroke: var(--colour6);
  stroke-width: 0.4px;
}
.svg-pin {
  cursor: pointer;
}
.svg-pin circle {
  fill: var(--colour6);
}
.svg-silhouette {
  fill: var(--black);
}
.svg-pin line {
  stroke: var(--colour6);
  fill: none;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svg-highlight {
  fill: var(--colour3half);
  stroke: none;
}
.svg-skin {
  display: inline;
  fill: var(--black);
  fill-opacity: 0.5;
  stroke: var(--black);
  stroke-width: 0.2;
}
.svg-bone {
  display: inline;
  overflow: visible;
  visibility: visible;
  fill: var(--white);
  fill-opacity: 1;
  fill-rule: evenodd;
  stroke: var(--black);
  stroke-width: 0.163384;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
  enable-background: accumulate;
}
.svg-arrow {
  fill: none;
  stroke: var(--colour5);
  stroke-width: 1.3;
}
.svg-arrow-polygon {
  fill: var(--colour5);
  stroke: var(--colour5);
  stroke-width: 1.3;
  transform-origin: 50% 50%;
}
.svg-arrow-thick {
  fill: none;
  stroke: var(--colour5);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svg-pin-selected {
  stroke: var(--colour4);
  fill: var(--colour5);
}
.svg-pin-selected line {
  stroke: var(--colour4);
}
/*----------------------FILLS --------------*/
.svg-fill-dark {
  fill: var(--black);
}
.svg-fill-light {
  fill: var(--white);
}
.svg-fill1 {
  fill: var(--colour1light);
}
.svg-fill2 {
  fill: var(--colour2);
}
.svg-fill3 {
  fill: var(--colour3);
}
.svg-fill4 {
  fill: var(--colour4);
}
.svg-fill5 {
  fill: var(--colour5);
}
.svg-fill6 {
  fill: var(--colour6);
}
.svg-stroke1 {
  stroke: var(--colour1);
}
.svg-stroke2 {
  stroke: var(--colour2);
}
.svg-stroke3 {
  stroke: var(--colour3);
}
.svg-stroke4 {
  stroke: var(--colour4);
}
.svg-stroke5 {
  stroke: var(--colour5);
}
.svg-stroke6 {
  stroke: var(--colour6);
}
.svg-fill {
  opacity: 0.01;
  cursor: pointer;
  fill: var(--colour5);
  transition: all 1s ease;
}
.svg-choice-area,
.transparent {
  fill: var(--lightwhite);
  opacity: 0.001;
}
.svg-fill:hover {
  opacity: 0.6;
}
/*----------------------GRID --------------*/
.svg-grid {
  opacity: 0.5;
  stroke: none;
}
.svg-grid-large {
  stroke-width: 0.4;
}
.svg-grid-small {
  stroke-width: 0.2;
}
.svg-grid path,
.svg-grid-small,
.svg-grid-large {
  stroke: var(--colour1);
  fill: none;
}
#grid-defs {
  width: 1px;
  height: 1px;
}
/*----------------------GRID THEMES--------------*/
.svg-theme2 {
  .svg-grid path,
  .svg-grid-small,
  .svg-grid-large {
    stroke: var(--colour2);
    fill: none;
  }
}
.svg-theme3 {
  .svg-grid path,
  .svg-grid-small,
  .svg-grid-large {
    stroke: var(--colour5);
    fill: none;
  }
}
.svg-theme4,
.dark {
  .svg-grid path,
  .svg-grid-small,
  .svg-grid-large {
    stroke: var(--colour2);
    fill: none;
  }
  .svg-trace {
    stroke: var(--dullwhite);
  }
  .svg-text,
  .svg-label {
    fill: var(--colour1light);
    stroke: var(--colour1light);
    stroke-width: 0.1;
  }
  .unit,
  .fullscreen {
    background: var(--black);
    color: var(--dullwhite);
  }
  .svg-fill1 {
    fill: var(--colour1);
  }
}
.svg-colours-btn {
  width: 36px;
  height: 26px;
  margin: 12px 20px;
  text-align: center;
  cursor: pointer;
}
.svg-colours-btn1 {
  border: 2px solid var(--colour1);
  background: var(--white);
  color: var(--black);
}
.svg-colours-btn2 {
  border: 2px solid var(--colour2);
  background: var(--white);
  color: var(--black);
}
.svg-colours-btn3 {
  border: 2px solid var(--colour5);
  background: var(--white);
  color: var(--black);
}
.svg-colours-btn4 {
  border: 2px solid var(--colour2);
  background: var(--black);
  color: var(--colour2light);
}
/*----------------------PAINT MENU--------------*/
#svg-paint {
  display: flex;
  flex-wrap: wrap;
}
#svg-paint input {
  font-size: 1rem;
  border-radius: 0;
  padding: 3px;
  line-height: 1;
  height: auto;
}
#svg-paint label {
  padding: 3px;
  min-width: 40px;
  font-size: 0.7em;
}
#svg-paint .color-field {
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0 3px;
}
#svg-paint .small-labels {
  padding: 6px 3px;
}
#svg-paint .small-labels label {
  min-width: 20px;
}
#svg-paint .small-labels input {
  width: 60px;
}
.svg-add rect {
  background: var(--grey);
}
.svg-add:hover {
  background: var(--colour1dark);
}
.svg-add-active,
.svg-add-active:hover {
  background: var(--colour2);
}
.svg-add,
#svg-save,
#svg-delete-element,
.svg-order {
  cursor: pointer;
  stroke: var(--white);
  min-height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  border: 1px solid var(--lightwhite);
  margin: 3px;
  border-radius: 6px;
}
.svg-add > rect:first-child,
.svg-order > rect:first-child {
  stroke: none;
}
.svg-add path {
  fill: var(--black);
  stroke-width: 0.2px;
  stroke: var(--black);
}
#svg-tools text,
#svg-save path {
  fill: var(--white);
  stroke-width: 0.2px;
  font-size: 0.5em;
}
/*----------------------NODE EDITING---------------*/
.svg-handle {
  fill: var(--colour1);
  stroke-width: 0.2;
  stroke: var(--white);
}
.svg-handle-line {
  stroke-dasharray: 0.3;
  stroke-width: 0.2;
  stroke: var(--colour4);
}
.svg-point {
  fill: none;
  stroke: var(--colour6);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/*----------------------TRACER---------------*/
.gridline,
.gline {
  stroke: var(--colour5);
  stroke-width: 1px;
}
.gridline-large {
  stroke: var(--colour5);
  stroke-width: 2.5px;
}
.vgridline {
  stroke: var(--white);
  stroke-width: 1px;
}
.vgridline-large {
  stroke: var(--white);
  stroke-width: 2.5px;
}
/*----------------------TEXT---------------*/
svg text {
  text-anchor: start;
  fill: var(--black);
  font-size: 6px;
  font-family: sans-serif;
  stroke-width: 0.4;
}
.svg-text {
  fill: var(--colour1dark);
  font-size: 3px;
  font-family: monospace;
  font-weight: 700;
}
.svg-large .svg-text {
  font-size: 6px;
}
.svg-balloon {
  font-family: "Chewy", sans-serif;
  stroke: var(--black);
  fill: var(--white);
  stroke-width: 0.2;
  font-size: 5px;
}
.svg-large .svg-balloon {
  font-size: 9px;
  stroke-width: 0.4;
}
.svg-label {
  fill: var(--black);
  font-family: sans-serif;
  stroke-width: 0.2;
  stroke: var(--black);
  font-size: 3px;
}
.svg-large .svg-label {
  font-size: 6px;
}
/*----------------------CAPTION---------------*/
.caption {
  font-size: 1.1em;
  padding: 20px;
  font-family: monospace;
  margin-top: 6px;
  text-align: center;
}
.switch-target {
  display: none;
}
.switch-default {
  display: block;
}
.switch,
.toggle-opacity {
  cursor: pointer;
  transition: all 1s ease;
}
.switch-half {
  opacity: 0.5;
  transition: all 1s ease;
  display: block;
}
.opacity-half {
  opacity: 0.5;
}
.toggle-opacity-selected {
  opacity: 0.1;
  transition: all 1s ease;
}
.caption .switch {
  text-decoration: underline 2px dotted;
  color: var(--colour1);
  min-width: 12px;
  display: inline-block;
}
.caption .active {
  color: var(--colour5);
  text-decoration: underline 2px solid;
}
.svg-outline {
  display: inline;
  fill: none;
  stroke: var(--dullwhite);
  stroke-width: 0.163384px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
}