.data-table td{border:solid 1px;padding: 3px;}
.data-table {border-collapse:collapse;}
.data-form {border: solid 1px;display:inline-block;}
.search-form {display: inline;}
.centered-div
{
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  justify-content: center;
}
.sorting-image {width:16px;height:16px;vertical-align:middle;}
.message-div
{
  border:solid 2px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  justify-content: center;
}
h1 { width:500px; margin: 0 auto; text-align: center;}
h3 { margin: 0 auto; text-align: center;}

.plan {max-width: 100%; margin: 10px 0;}
.plan-svg {max-width: 100%; max-height: 80vh; border: solid 1px #ccc;}
.plan-area {fill: rgba(0, 120, 255, 0); stroke: rgba(0, 120, 255, 0); stroke-width: 2; vector-effect: non-scaling-stroke;}
.plan-label {text-anchor: middle; dominant-baseline: middle; fill: #335; paint-order: stroke; stroke: white; stroke-width: 3px; pointer-events: none;}
.plan:hover .plan-area {stroke: rgba(0, 120, 255, 0.4);}
.plan-link:hover .plan-area {fill: rgba(0, 120, 255, 0.3); stroke: rgba(0, 120, 255, 1);}
.plan-link:hover .plan-label, .plan-highlight .plan-label {fill: #003; font-weight: bold;}
.plan-highlight .plan-area {fill: rgba(255, 60, 0, 0.35); stroke: rgba(255, 60, 0, 1);}
.plan-reference .plan-area {fill: rgba(0, 0, 0, 0.08); stroke: rgba(0, 0, 0, 0.3);}
.plan-reference {pointer-events: none;}
.plan-reference .plan-label {fill: #666;}
.plan-editor-area {fill: rgba(255, 60, 0, 0.35); stroke: rgba(255, 60, 0, 1); pointer-events: none;}
svg[data-editor-for] {cursor: crosshair;}
.plan-controls {margin-top: 6px;}