:root {
    --link-color: #000066;
    --link-decoration: underline;
    --main-color: black;
    --background-color: white;
    --half-faded-color: #888888;
    --some-faded-color: #666666;
    --lots-faded-color: #cccccc;
    --most-faded-color: #eeeeee;
    --highlight-color: #993333;
    --full-color-border: black;
    --mid-color-border: #999999;
    --mostlyfull-color-border: #666666;
    --embiggen-background: #bbbbbb;
    --tooltip-background: #ffff66;
    --tooltip-border: #0000ff;
    --tooltip-color: black;
    --good-color: #006000;
    --bad-color: #c00000;
    --warning-color: #c06040;
    --held-color: #c00000;
    --ready-color: #aa00aa;
    --claimed-color: #aa5500;
    --running-color: #0000c0;
    --done-color: #006000;
}

body { color: var(--main-color);
       background: var(--background-color);
     }

.good { color: var(--good-color) }
.bad { color: var(--bad-color) }
.warning { color: var(--warning-color) }

.stateheld { color: var(--held-color) }
.stateready { color: var(--ready-color) }
.stateclaimed { color: var(--claimed-color) }
.staterunning { color: var(--running-color) }
.statedone { color: var(--done-color) }

.italic { font-style: italic }
.bold { font-weight: bold }
.monospace { font-family: monospace }

.bgwhite { background: var(--background-color) }
.bgfade { background: var(--lots-faded-color) }
.link { background: none; border: none; padding: 0;
        color: var(--link-color); text-decoration: var(--link-decoration); cursor: pointer; }

.padhalfex { padding: 0.5ex }
.padex { padding: 1ex }
.hmargin { margin-left: 0.5ex; margin-right: 0.5ex }
.xmargin { margin-left: 1ex; margin-right: 1ex }
.mmargin { margin-left: 1em; margin-right: 1em }
.mmarginright { margin-right: 1em }
.mostlyborder { border: 2px solid var(--mostlyfull-color-border); }
.midborder { border: 2px solid var(--mid-color-border); }

.right { text-align: right }
.center { text-align: center }
.vcenter { vertical-align: middle }

.tooltipcolorlesssource { text-decoration: var(--link-decorate);
                          cursor: pointer; }
.tooltipsource { color: var(--link-color);
                 text-decoration: var(--link-decoration);
                 cursor: pointer; }
.tooltipsource .tooltiptext, .tooltipcolorlesssource .tooltiptext {
    visibility: hidden;
    background-color: var(--tooltip-background);
    border: 1px solid var(--tooltip-border);
    color: var(--tooltip-color);
    z-index: 10;
    position: absolute;
}
.tooltipsource:hover .tooltiptext, .tooltipcolorlesssource:hover .tooltiptext { visibility: visible; }

img { image-rendering: pixelated }
a { color: var(--link-color); text-decoration: var(--link-decoration); cursor: pointer; }



.tabunsel { background: var(--most-faded-color);
            border: 2px outset var(--full-color-border);
            margin-left: 0.5ex;
            margin-right: 0.5ex; }
.tabsel { background: var(--half-faded-color);
          border: 2px inset var(--full-color-border);
          margin-left: 0.5ex;
          margin-right: 0.5ex; }
div.tabdiv {}
div.buttonboxdiv {}
div.tabcontentdiv { border: 2px solid var(--mostlyfull-color-border);
                    padding: 0.5ex;
                  }


table { border: 2px solid var(--full-color-border); border-spacing: 2px }
table th { border-bottom: 2px solid var(--full-color-border); font-weight: bold }
table td { border-bottom: 2px solid var(--half-faded-color);
           border-spacing: 2px;
           padding-left: 1ex;
           padding-right: 1ex;
           padding-top: 2px;
           padding-bottom: 2px;
         }
table th.borderleft { border-left: 2px solid var(--half-faded-color); }

table.borderedcells tr td { padding-left: 1ex;
                            padding-right: 1ex;
                            border-left: 1px solid var(--half-faded-color); }

tr.greybg { background: var(--lots-faded-color); }

table.borderless { border: none }
table.borderless th { border: none; font-weight: bold }
table.borderless td { border: none; padding: 0px }

table.exposurelist td { border: 2px solid var(--half-faded-color); }
tr.heldexposure { font-style: italic; color: var(--some-faded-color); }
tr.readyexposure {}

div.dispnone { display : none; }
div.dispflex { display : flex; }
div.dispblock { display : block; }

div.dispnone { display : none; }
div.dispflex { display : flex; }
div.dispblock { display : block; }

div.hbox { display: flex;
           flex-direction: row;
           min-width: 0;
           min-height: 0; }

div.vbox { display: flex;
           flex-direction: column;
           min-width: 0;
           min-height: 0; }
div.vbox100p  { display: flex;
                flex-direction: column;
                height: 100%;
              }

.fillpage { position: fixed; top: 0; bottom: 0; left: 0; right: 0 }
.flexeven { justify-content: space-evenly }
.minwid25p { min-width: 25%; }
.minwid40p { min-width: 40%; }
.height100p { height: 100%; }
.scrolly { overflow-y: scroll }
.flexfitcontent { flex-basis: fit-content }


div.subdiv { border: 2px solid var(--mostlyfull-color-border);
             padding: 0.5ex;
             margin: 1ex; }

div.authdiv { color: var(--some-faded-color);
              font-size: 75% }

div.footer { color: var(--some-faded-color);
             font-size: 75%;
             font-style: italic }

div.conductorconfig { border: 4px inset var(--main-color);
                      font-size: 75%;
                      padding: 1ex;
                      margin: 1em;
                      width: fit-content; }

div.conductorworkers { border: 4px inset var(--main-color);
                       font-size: 75%;
                       padding: 1ex;
                       margin: 1em;
                       width: fit-content; }



div.svgplottopdiv { position: relative;
                    display: flex;
                    flex-direction: column;
                    flex-grow: 0;
                    flex-shrink: 0;
                    min-width: 0;
                    min-height: 0;
                  }
div.svgplotdiv { min-width: 0;
                 min-height: 0;
                 display: flex;
                 flex-direction: row;
                 flex-grow: 0;
                 flex-shrink: 0; }

svg.svgplotsvg { display: block;
                 flex-grow: 1;
                 flex-shrink: 1;
                 min-width: 0;
                 min-height: 0;
               }

div.svgplotbuttonbox { display: flex;
                       flex-direction: row;
                       min-width: 0;
                       min-height: 0;
                       margin-right: auto;
                       margin-left: 0;
                     }
div.svgplotdocbox { display: flex;
                    flex-direction: row;
                    min-width: 0;
                    min-height: 0;
                    margin-left: auto;
                    margin-right: 0;
                  }

div.svgplothbox { display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  min-width: 0;
                  min-height: 0;
                  margin-top: 0.5ex;
                  margin-bottom: 0.5ex;
                }
div.svgplotvbox { display: flex;
                  flex-direction: column;
                  min-width: 0;
                  min-height: 0; }