linny-r 1.1.0

package/static/linny-r.css

@@ -0,0 +1,4722 @@
+/*
+Linny-R is an executable graphical specification language for (mixed integer)
+linear programming (MILP) problems, especially unit commitment problems (UCP).
+The Linny-R language and tool have been developed by Pieter Bots at Delft
+University of Technology, starting in 2009. The project to develop a browser-
+based version started in 2017. See https://linny-r.org for more information.
+
+This Cascading Style Sheets file (linny-r.css) defines the styles for the HTML
+file that implements the graphical user interface for Linny-R.
+*/
+
+/*
+Copyright (c) 2017-2022 Delft University of Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+body {
+  display: initial;
+}
+
+body.waiting * { cursor: wait; }
+
+@font-face {
+  font-family: Lato;
+  src: url(fonts/Lato-Regular.ttf);
+}
+
+@font-face {
+  font-family: Lato;
+  src: url(fonts/Lato-Bold.ttf);
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: Lato;
+  src: url(fonts/Lato-Italic.ttf);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Lato;
+  src: url(fonts/Lato-BoldItalic.ttf);
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(fonts/FantasqueSansMono-Regular.ttf);
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(fonts/FantasqueSansMono-Bold.ttf);
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(fonts/FantasqueSansMono-Italic.ttf);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(fonts/FantasqueSansMono-BoldItalic.ttf);
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Hack;
+  src: url(fonts/Hack-Regular.ttf);
+}
+
+@font-face {
+  font-family: Hack;
+  src: url(fonts/Hack-Bold.ttf);
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: Hack;
+  src: url(fonts/Hack-Italic.ttf);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Hack;
+  src: url(fonts/Hack-BoldItalic.ttf);
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Mplus;
+  src: url(fonts/mplus-1m-regular.ttf);
+}
+
+html, body {
+  margin: 0;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  font-family: Lato, Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;   
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+blockquote {
+  font-size: 10px;
+  margin-left: 9px;
+  padding-left: 3px;
+  border-left: solid 3px #bfc0e2;
+}
+
+header,
+footer {
+  flex: none;
+  background-color: #f4f0f2;
+}
+
+header {
+  min-height: 38px;
+}
+
+footer {
+  margin-left: 30px;
+}
+
+main {
+  margin-left: 30px;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  flex: auto;
+  border-top: 1px solid #e2d8e8;
+  background-color: #faf8f9;
+}
+
+/* the chart container that holds the SVG paper in the main area */
+#cc {
+  min-width: 100%;
+  min-height: 80vh;
+  background-color: #fdfeff;
+  overflow: hidden;
+  /* background-image: url(images/NOTICE.png); */
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+/* SVG with "rippling circles" positioned to keep top buttons accessible */
+#solver-active {
+  width: 90vh;
+  height: 90vh;
+  margin: auto;
+  padding: 0;
+  position: absolute;
+  top: 35px;
+  left: calc(50vw - 45vh);
+  filter: opacity(0.5);
+  display: none;
+}
+
+#static-icon,
+#rotating-icon {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  height: 40px;
+  width: 40px;
+}
+
+#rotating-icon {
+  display: none;
+}
+
+#linny-r-name {
+  position: absolute;
+  top: 5px;
+  left: 40px;
+  height: 20px;
+  margin: 5px 3px 3px 0px;
+  z-index: 1;
+}
+
+#linny-r-version-number {
+  position: absolute;
+  top: 26px;
+  left: 38px;
+  height: 8px;
+  padding: 2px;
+  font: 7px sans-serif;
+  font-style: oblique;
+  color: gray;
+  cursor: pointer;
+}
+
+#topbar {
+  display: inline-block;
+  margin-left: 200px;
+  margin-top: 5px;
+}
+
+#host-logo {
+  height: 25px;
+  margin: 3px;
+}
+
+img.local-server {
+  cursor: pointer;
+}
+
+img.local-server:hover {
+  filter: brightness(150%);
+}
+
+img.btn {
+  width: 26px;
+  height: 26px;
+  margin: 1px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+img.sep {
+  margin-bottom: 13px;
+}
+
+img.enab {
+  cursor: pointer;
+}
+
+img.enab:hover {
+  background-color: #bfc0e2;
+}
+
+img.disab {
+  filter: grayscale(100%) brightness(180%) contrast(60%);
+}
+
+img.activ {
+  background-color: #9e96e5;
+}
+
+img.stay-activ {
+  background-color: #cc88b0;
+}
+
+img.off {
+  display: none !important;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+img.blink {
+  animation: blink 1s step-start 0s infinite;
+}
+
+img.mbtn {
+  width: 21px;
+  height: 21px;
+  margin: 1px 2px;
+  border-radius: 2px;
+  vertical-align: top;
+}
+
+img.sbtn {
+  width: 16px;
+  height: 16px;
+  margin: 1px 2px;
+  border-radius: 2px;
+  vertical-align: middle;
+}
+
+img.sbtn.senab:hover {
+  filter: brightness(150%);
+}
+
+div.eqbtn {
+  background-image: url('images/eq.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+div.eqbtn:hover,
+div.intbtn:hover {
+  filter: brightness(120%);
+}
+
+div.nebtn {
+  background-image: url('images/ne.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+div.nebtn:hover,
+div.contbtn:hover {
+  filter: brightness(110%);
+}
+
+div.intbtn {
+  background-image: url('images/integer-on.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+div.contbtn {
+  background-image: url('images/integer-off.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+input {
+  vertical-align: baseline;
+}
+
+input[type="text"],
+input[type="password"] {
+  height: 18px !important; 
+  /* prevent overrun in Safari */
+  border-width: thin !important;
+  padding: 0;
+  border-radius: 0;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+    background-color: #f4f0f2;
+}
+
+textarea {
+  /* prevent overrun in Safari */
+  box-sizing: border-box !important;
+  resize: none;
+}
+
+/* the vertical side bar with editing buttons on the left-hand side of the browser window */ 
+#sidebar {
+  position: fixed;
+  top: 38px;
+  left: 0;
+  width: 30px;
+  height: inherit;
+  background-color: #f4f0f2;
+  border-right: 1px solid #e2d8e8;
+}
+
+/* the horizontal status bar at the bottom of the browser window */
+/* NOTE: a similar status bar (having its own X and Y coordinates) is shown at the bottom of the dynamic bounds editor */
+#statusbar,
+#db-statusbar {
+  border: 1px solid #e2d8e8;
+  border-collapse: collapse;
+}
+
+#pos-x,
+#pos-y,
+#db-pos-x,
+#db-pos-y {
+  min-width: 51px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+#zoom {
+  min-width: 32px;
+  text-align: center;
+}
+
+#step {
+  min-width: 32px;
+  text-align: center;
+}
+
+#pos-y,
+#db-pos-y,
+#zoom-sep,
+#step-sep,
+#info-line,
+#autosave-sep {
+  border-right: 1px solid #e2d8e8;
+}
+
+#info-line,
+#db-equation {
+  width: 100%;
+}
+
+#recall-btn {
+  min-width: 14px;
+  background-image: url(images/info.png);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+#recall-btn:hover {
+  filter: brightness(1.3);
+}
+
+#set-up-progress {
+  width: 100%;
+  height: 1.5px;
+  background-color: #e8e8e8;
+}
+
+#set-up-progress-bar {
+  height: 100%;
+  width: 0%;
+  background-color: #500080;
+}
+
+div.error-time,
+div.warning-time,
+div.notification-time {
+  display: inline-block;
+  font: 9px monospace;
+  width: 50px;
+  vertical-align: top;
+  padding-top: 4px;
+}
+
+div.error-time {
+  color: red;
+}
+
+div.warning-time {
+  color: orange;
+}
+
+div.notification-time {
+  color: #0040f0;
+}
+
+div.error-msg,
+div.warning-msg,
+div.notification-msg {
+  display: inline-block;
+  max-width: calc(100% - 65px);  
+}
+
+div.error-msg {
+  color: #c00000;
+}
+
+div.warning-msg {
+  color: #806040;
+}
+
+div.notification-msg {
+  color: #0060a0;
+}
+
+#info-line.error,
+div.error-msg.first-msg {
+  background: Orange;
+  font-weight: bold;
+  color: black;
+}
+
+#info-line.warning,
+div.warning-msg.first-msg {
+  background: Yellow;
+  color: black;
+}
+
+#info-line.notification,
+div.notification-msg.first-msg {
+  background: SkyBlue;
+  color: black;
+}
+
+/* Modal dialogs cover the entire browser window with a dark,
+   semi-transparent DIV that ignores mouse events. Their z-index
+   is 100+ so that they cover "stay-on-top" dialogs. */ 
+div.modal {
+  display: none;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* on top of the "modal layer", modal dialogs appear in the center of
+   the browser window */
+div.inp-dlg {
+  position: absolute; 
+  top: 0; 
+  bottom: 0; 
+  left: 0; 
+  right: 0;
+  margin: auto;
+  border-radius: 4px;
+  border: 1px solid #400080;
+  box-shadow: 0 0 3px rgb(0, 0, 0, 0.5);
+  background-color: #f4f0f2;
+}
+
+div.dlg-title {
+  background-color: #c0c0e0;  
+  border-radius: 3.3px 3.3px 0pt 0pt;
+  padding: 3px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* all input dialogs have an OK button and a CANCEL button,
+   stay-on-top dialogs have a CLOSE button */
+img.ok-btn,
+img.cancel-btn,
+img.close-btn,
+img.info-btn {
+  width: 17px;
+  height: 17px;
+  margin-left: 4px;
+  margin-top: -1px;
+  float: right;
+  cursor: pointer;
+}
+
+/* To appear responsive to cursor, buttons change brightness */
+img.ok-btn:hover,
+img.inline-ok-btn:hover,
+img.close-btn:hover,
+img.info-btn:hover {
+  filter: brightness(130%);
+}
+
+img.cancel-btn,
+img.inline-cancel-btn {
+  filter: brightness(85%);
+}
+
+img.cancel-btn:hover,
+img.inline-cancel-btn:hover {
+  filter: brightness(120%);
+}
+
+/* CHECK BOX styles
+   NOTE: separate style names `abox` and `vbox` so that different events can be
+   bound dynamically to actor check boxes */
+div.box,
+div.abox,
+div.vbox {
+  display: inline-block;
+  filter: brightness(95%);  
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+  margin-bottom: 0px;
+  cursor: pointer;
+}
+
+div.box:hover,
+div.abox:hover,
+div.vbox:hover {
+  filter: brightness(105%);  
+}
+
+div.clear {
+  background-size: contain;
+  background-image: url('images/check-off.png');
+}
+
+div.checked {
+  background-size: contain;
+  background-image: url('images/check-on.png');
+}
+
+div.crossed {
+  background-size: contain;
+  background-image: url('images/check-x.png');
+}
+
+div.disab {
+  background-size: contain;
+  background-image: url('images/check-disab.png');
+}
+
+/* NOTE: the name of the focal cluster is displayed to the right of
+         the top bar buttons */
+#focal-cluster {
+  display: inline-block;
+  margin-left: 50px;
+}
+
+#focal-name {
+  font: 10pt sans-serif;
+  display: inline-block;
+  max-width: 60vw;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+/* LOGON modal dialog */
+#logon-dlg {
+  width: 303px;
+  height: min-content;
+}
+
+/* LOAD modal dialog */
+#load-dlg,
+#comparison-dlg {
+  width: 430px;
+  height: min-content;
+  overflow: hidden;
+}
+
+#load-xml-file,
+#comparison-xml-file {
+  padding: 2px;
+  max-width: 375px;
+  overflow: hidden;
+}
+
+#load-autosaved-btn {
+  position: absolute;
+  right: 2px;
+  top: 23px;
+  height: 20px;
+  width: 20px;
+  display: none;
+}
+
+#autosave-btn {
+  height: 15px;
+  width: 15px;
+}
+
+#restore-dlg {
+  width: 440px;
+  max-height: 219px;
+}
+
+#restore-scroll-area {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+  width: calc(100% - 4px);
+  max-height: 190px;
+  overflow-x: clip;
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+td.restore-name {
+  color: navy;
+  padding-right: 4px;
+  max-width: 272px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+img.del-asm-btn {
+  height: 12px;
+  width: 12px;
+  border-radius: 2px;
+  margin-bottom: -2px;
+  margin-right: 1px;
+  cursor: pointer;
+}
+
+img.del-asm-btn:hover {
+  background-color: #bfc0e2;
+}
+
+#auto-save-settings {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: calc(100% - 4px);
+}
+
+#auto-save-minutes,
+#auto-save-hours {
+  width: 25px;
+  text-align: center;
+  max-height: 17px;
+}
+
+#auto-save-clear-btn {
+  position: absolute;
+  right: 0px;
+  bottom: -1px;
+  width: 18px;
+  height: 18px;
+}
+
+#confirm-remove-models {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  height: 15px;
+  width: calc(100% - 8px);
+  background-color: #cc88b0;
+  padding: 1px 2px 3px 2px;
+}
+
+img.inline-ok-btn,
+img.inline-cancel-btn {
+  width: 17px;
+  height: 17px;
+  margin-bottom: -4px;
+  margin-left: 8px;
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+
+/* styles for the MODEL SETTINGS dialog */
+#settings-dlg {
+  width: min-content;
+  height: min-content;
+}
+
+#password-dlg {
+  width: min-content;
+  height: min-content;
+}
+
+#encryption-password {
+  margin: 2px;
+  width: 160px;
+}
+
+input.pws-0 {
+  color: #c00000;
+  background-color: #ffc0c0;
+}
+
+input.pws-1 {
+  color: #600000;
+  background-color: #ffd0b0;
+}
+
+input.pws-2 {
+  background-color: #ffe0a0;
+}
+
+input.pws-3 {
+  background-color: #f0f0a0;
+}
+
+input.pws-4 {
+  color: #006000;
+  background-color: #e0ffb0;
+}
+
+input.pws-5 {
+  color: #00c000;
+  background-color: #c0ffc0;
+}
+
+/* styles for the ACTOR DIALOG
+   NOTE: the z-index is very high for this dialog, as it should appear
+   on top of the ACTOR LIST DIALOG
+*/
+#actor-modal {
+  z-index: 110;
+}
+
+#actor-dlg {
+  width: 300px;
+  height: 72px;
+}
+
+/* styles for the ACTOR LIST DIALOG */
+#actor-list-dlg {
+  width: 365px;
+  height: 350px;
+}
+
+#round-settings {
+  width: calc(100% - 2px);
+  height: 38px;
+}
+
+#round-count-lbl {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+}
+
+#add-round-btn {
+  position: absolute;
+  top: 23px;
+  left: 150px;
+}
+
+#delete-round-btn {
+  position: absolute;
+  left: 180px;
+  top: 23px;
+}
+
+#default-seq-div {
+  position: absolute;
+  left: 210px;
+  top: 23px;
+}
+
+#default-sequence {
+  width: calc(100% - 62px);
+  max-height: 16px;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+#round-info-lbl {
+  position: absolute;
+  top: 41px;
+  left: 3px;
+}
+
+#actors-name-hdr {
+  position: absolute;
+  top: 1px;
+  left: 2px;
+}
+
+#actors-weight-hdr {
+  position: absolute;
+  top: 1px;
+  left: 210px;
+}
+
+div.round-nr {
+  display: inline-block;
+  background-color: #d4d5f0;
+  padding: 3px 1px 1px 1px;
+  width: 20px;
+  max-width: 20px;
+  overflow: hidden;
+  height: 11px;
+  font-family: monospace;
+  font-size: 11px;
+  vertical-align: top;
+  text-align: center;
+  cursor: pointer;
+}
+
+div.round-nr:hover {
+  color: white;
+}
+
+div.round-nr.sel {
+  background-color: #cc88b0;
+}
+
+#rounds-hdr {
+  position: absolute;
+  top: 1px;
+  left: 335px;
+}
+
+td.actor {
+  padding: 0 0 0 3px;
+}
+
+td.opt {
+  padding-bottom: 2px;
+}
+
+#actors-scroll-hdr {
+  background-color: #bfc0e2;
+  font-weight: bold;
+  padding-left: 3px;
+  width:calc(100% - 8.5px);
+  height: 17px;
+  margin-left: 3px;
+  margin-bottom: 0.2px;
+}
+
+#actors-scroll-hdr {
+  position: relative;
+}
+
+#actors-scroll {
+  padding-left: 3px;
+  width:calc(100% - 6px);
+  overflow-y: scroll;
+}
+
+#actors-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: white;
+  border: 1px solid Silver;
+}
+
+#actor-span {
+  display: inline-block;
+  max-width: 180px;
+  margin-bottom: -2.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+tr.actor {
+  height: 23px;
+}
+
+tr.actor:hover {
+  background-color: #dfe0ff;
+}
+
+td.a-box {
+  width: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.a-box > div.abox {
+  margin-left: 4px;
+}
+
+td.a-name {
+  width: 208px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+td.a-weight {
+  width: 124px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.import,
+td.export {
+  font-weight: 600;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+td.import {
+  color: #b00000;
+}
+
+td.export {
+  color: #0000b0;
+}
+
+/* styles for the MODEL dialog */
+#model-dlg {
+  width: 270px;
+  height: 70px;
+}
+
+/* styles for the ADD PROCESS dialog */
+#add-process-dlg {
+  width: 270px;
+  height: 70px;
+}
+
+/* styles for the ADD PRODUCT dialog */
+#add-product-dlg {
+  width: 270px;
+  height: 70px;
+}
+
+/* styles for the CLUSTER dialog */
+#cluster-dlg {
+  width: 315px;
+  height: min-content;
+}
+
+/* the MOVE modal asks whether node should be moved to focal cluster */
+#move-dlg {
+  width: 270px;
+  height: 120px;
+}
+
+#move-msg {
+  width: calc(100% - 8px);
+  height: calc(100% - 55px);
+  margin: 3px;
+  overflow: auto;
+}
+
+#move-node-type,
+#move-node-name,
+#move-from-cluster {
+  white-space: nowrap;
+}
+
+/* styles for the NOTE dialog */
+#note-dlg {
+  width: 320px;
+  height: 200px;
+}
+
+#note-text {
+  width: calc(100% - 4px);
+  height: calc(100% - 50px);
+  margin: 2px;
+}
+
+#note-attr {
+  width: calc(100% - 4px);
+  height: 20px;
+  margin: 2px;
+}
+
+#note-color {
+  width: calc(100% - 61px);
+  font-size: 13px;
+}
+
+/* styles for the CONSTRAINT dialog */
+#constraint-dlg {
+  width: 445px;
+  height: 75px;
+}
+
+#c-threshold, #c-low, #c-high {
+  width: 40px; margin-top: -4px;
+}
+
+/* styles for the PROCESS properties dialog */
+#process-dlg {
+  width: 314px;
+  height: 213px;
+}
+
+#process-name-lbl {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+}
+
+#process-name {
+  position: absolute;
+  top: 24px;
+  left: 41px;
+  width: 268px;
+}
+
+#process-actor-lbl {
+  position: absolute;
+  top: 50px;
+  left: 3px;
+}
+
+#process-actor {
+  position: absolute;
+  top: 48px;
+  left: 41px;
+  width: 268px;
+}
+
+#process-LB-lbl {
+  position: absolute;
+  top: 75px;
+  left: 19px;
+  width: 80px;
+}
+
+#process-LB {
+  position: absolute;
+  top: 72px;
+  left: 94px;
+  width: 195px;
+}
+
+#process-LB-x {
+  position: absolute;
+  top: 72px;
+  right: 2px
+}
+
+#process-UB-lbl {
+  position: absolute;
+  top: 100px;
+  left: 19px;
+  width: 80px;
+}
+
+#process-UB {
+  position: absolute;
+  top: 97px;
+  left: 94px;
+  width: 195px;
+}
+
+#process-UB-x {
+  position: absolute;
+  top: 97px;
+  right: 2px
+}
+
+#process-UB-equal {
+  position: absolute;
+  top: 83px;
+  left: 3px;
+  width: 16px;
+  height: 26px;
+}
+
+#process-IL-lbl {
+  position: absolute;
+  top: 125px;
+  left: 31px;
+}
+
+#process-IL {
+  position: absolute;
+  top: 122px;
+  left: 94px;
+  width: 195px;
+}
+
+#process-IL-x {
+  position: absolute;
+  top: 122px;
+  right: 2px
+}
+
+#process-int-lbl,
+#process-shut-down-lbl,
+#process-collapsed-lbl {
+  position: absolute;
+  left: 22px;
+  top: 3px;
+  white-space: nowrap;
+}
+
+#process-int-div {
+  position: absolute;
+  top: 145px;
+  left: 2px;
+  width: 65px;
+}
+
+#process-shut-down-div {
+  position: absolute;
+  top: 145px;
+  left: 72px;
+  width: 165px;
+}
+
+#process-pace-div {
+  position: absolute;
+  top: 168px;
+  left: 2px;
+  white-space: nowrap;
+}
+
+#process-pace {
+  width: 77px;
+}
+
+#process-pace-x {
+  margin-bottom: 5px;
+}
+
+#process-collapsed-div {
+  position: absolute;
+  top: 191px;
+  left: 2px;
+  width: 65px;
+}
+
+/* styles for the PRODUCT properties dialog */
+#product-dlg {
+  width: 360px;
+  height: 190px;
+}
+
+#product-name-lbl {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+}
+
+#product-name {
+  position: absolute;
+  top: 24px;
+  left: 41px;
+  width: 314px;
+}
+
+#product-unit-lbl {
+  position: absolute;
+  top: 50px;
+  left: 3px;
+}
+
+#product-unit {
+  position: absolute;
+  top: 48px;
+  left: 41px;
+  width: 60px;
+}
+
+#source {
+  position: absolute;
+  top: 48px;
+  left: 115px;
+}
+
+#sink {
+  position: absolute;
+  top: 48px;
+  left: 185px;
+}
+
+#stock {
+  position: absolute;
+  top: 48px;
+  left: 242px;
+}
+
+#data {
+  position: absolute;
+  top: 48px;
+  left: 306px;
+}
+
+#product-source-lbl,
+#product-sink-lbl,
+#product-stock-lbl,
+#product-data-lbl,
+#product-int-lbl,
+#product-no-slack-lbl,
+#product-no-links-lbl {
+  position: absolute;
+  left: 22px;
+  top: 3px;
+}
+
+#product-LB-lbl {
+  position: absolute;
+  top: 75px;
+  left: 18px;
+}
+
+#product-LB {
+  position: absolute;
+  top: 72px;
+  left: 93px;
+  width: 240px;
+}
+
+#product-LB-x {
+  position: absolute;
+  top: 72px;
+  left: 337px
+}
+
+#product-UB-lbl {
+  position: absolute;
+  top: 100px;
+  left: 18px;
+}
+
+#product-UB {
+  position: absolute;
+  top: 97px;
+  left: 93px;
+  width: 240px;
+}
+
+#product-UB-x {
+  position: absolute;
+  top: 97px;
+  left: 337px
+}
+
+#product-UB-equal {
+  position: absolute;
+  top: 82px;
+  left: 3px;
+  width: 16px;
+  height: 26px;
+}
+
+#product-IL-lbl {
+  position: absolute;
+  left: 18px;
+  top: 125px;
+}
+
+#product-IL {
+  position: absolute;
+  top: 122px;
+  left: 93px;
+  width: 240px;
+}
+
+#product-IL-x {
+  position: absolute;
+  top: 122px;
+  left: 337px;
+}
+
+#product-P-div {
+  position: absolute;
+  left: 3px;
+  top: 147px;
+}
+
+#product-P-lbl {
+  display: inline-block;
+  vertical-align: middle;
+  padding-bottom: 4px;
+  max-width: 105px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#product-P {
+  margin-left: 2px;
+  width: 220px;
+}
+
+#product-int-div {
+  position: absolute;
+  top: 168px;
+  left: 2px;
+  width: 65px;
+}
+
+#product-no-slack-div {
+  position: absolute;
+  top: 168px;
+  left: 72px;
+  width: 80px;
+}
+
+#product-no-links-div {
+  position: absolute;
+  top: 168px;
+  left: 150px;
+  width: 120px;
+}
+
+
+/* NOTE: actors, datasets and products have import/export toggle boxes */
+#actor-io {
+  position: absolute;
+  top: 21px;
+  right: 6px;
+  font-size: 18px;
+  color: Silver;
+  cursor: pointer;
+}
+
+#dataset-io {
+  position: absolute;
+  bottom: -3px;
+  right: 4px;
+  font-size: 18px;
+  color: Silver;
+  cursor: pointer;
+}
+
+#product-io {
+  position: absolute;
+  bottom: -1px;
+  right: 2px;
+  font-size: 18px;
+  color: Silver;
+  cursor: pointer;
+}
+
+#actor-export,
+#dataset-export,
+#product-export {
+  position: absolute;
+  bottom: 10px;
+  right: 4.5px;
+  font-size: 12px;
+  font-weight: bold;
+  display: none;
+}
+
+#actor-import,
+#dataset-import,
+#product-import {
+  position: absolute;
+  bottom: 9px;
+  right: 4.5px;
+  font-size: 12px;
+  font-weight: bold;
+  display: none;
+}
+
+/* styles for the CLONE dialog */
+#clone-dlg {
+  width: 255px;
+  height: min-content;
+}
+
+#clone-count {
+  font-weight: normal;
+  font-size: 11px;
+}
+
+#clone-prefix,
+#clone-actor {
+  width: 210px;
+  font-size: 12px;
+}
+
+/* styles for the REPLACE dialog */
+#replace-dlg {
+  width: 375px;
+  height: min-content;
+}
+
+#replace-product-name {
+  display: inline-block;
+  vertical-align: top;
+  max-width: 280px;
+  font-weight: lighter;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;  
+}
+
+#replace-product-name.is-data {
+  text-decoration: underline dotted 2px;
+}
+
+#replace-by-name {
+  font-size: 12px;
+  max-width: 235px;
+}
+
+#replace-option {
+  display: inline-block;
+  width: 65px;
+  margin: 2px 0 0 6px;
+}
+
+#replace-local {
+  margin-bottom: -3px;
+}
+
+/* styles for the LINK properties dialog */
+#link-dlg {
+  width: 425px;
+  height: min-content;
+}
+
+#link-from-name,
+#link-to-name {
+  display: inline-block;
+  max-width: 143px;
+  margin-left: 2px;
+  margin-right: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: sub;
+  font-weight: normal;
+  font-style: italic;
+}
+
+#link-multiplier-row.off {
+  display: none;
+}
+
+#link-multiplier {
+  margin-left: 2px;
+  margin-bottom: 2px;
+  font-size: 9pt;
+  min-height: 20px;
+  max-width: 358px;
+}
+
+#link-R {
+  width: 135px;
+  margin: 0 0 2px 0;
+}
+
+#link-D {
+  width: 135px;
+  margin: 0 0 2px 0;
+}
+
+#link-output-row {
+  border-collapse: collapse;
+}
+
+#link-output-soc {
+  display: inline-block;
+  margin-left: 20px;
+}
+
+#link-share-of-cost {
+  width: 40px;
+  margin: 0 2px 2px 2px;
+}
+
+/* styles for the EXPRESSION EDITOR */
+#expression-modal {
+  z-index: 115;
+}
+
+#expression-dlg {
+  width: 545px;
+  height: 325px;
+}
+
+#expression-property {
+  display: inline-block;
+  vertical-align: top;
+  max-width: calc(100% - 185px);
+  font-weight: normal;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;  
+}
+
+#expression-text {
+  width: calc(100% - 4px);
+  height: calc(100% - 70px);
+  margin: 1px 2px;
+  font: 12px monospace;
+  overflow-y: hidden;
+}
+
+#variable-bar {
+  width: calc(100% - 4px);
+  margin: 2px 2px 1px 2px;
+}
+
+#variable-obj {
+  width: 80px;
+  font-size: 12px;
+}
+
+#variable-name {
+  width: calc(100% - 210px);
+  font-size: 12px;
+}
+
+#variable-attr {
+  width: 65px;
+  font-size: 12px;
+}
+
+#variable-insert {
+  width: 55px;
+  font-size: 12px;
+}
+
+#expression-status {
+  position: absolute;
+  border: solid 1px #e2d8e8;
+  bottom: 0;
+  width: 536px;
+  margin: 2px;
+  padding: 2px;
+}
+
+#expression-info {
+  display: none;
+  position: absolute;
+  border: solid 1px #e2d8e8;
+  background-color: #fafcfe;
+  top: 22px;
+  left: 2px;
+  width: calc(100% - 9px);
+  height: calc(100% - 29px);
+  padding: 2px;
+  font-family: Serif;
+  font-size: 13px;
+}
+
+#expression-info h3 {
+  margin: 0;
+}
+
+#expression-info h4 {
+  margin: 6px 0px 3px 0px;
+}
+
+#expression-info p {
+  margin: 0px 0px 3px 0px;
+}
+
+#expression-info code {
+  margin: 0px 2px 0px 2px;
+}
+
+#diagram-menu {
+  display: none;
+  position: fixed;
+  left: 380px;
+  top: 40px;
+  border: solid 1px #e2d8e8;
+  background-color: #f4f0f2;
+}
+
+div.menu-item {
+  padding: 2px 4px;
+  cursor: pointer;
+}
+
+div.menu-item:hover {
+  background-color: #bfc0e2;  
+}
+
+/* the CONSTRAINT DIALOG allows definition/editing of a constraint */
+#constraint-dlg {
+  width: 362px;
+  height: 436px;
+}
+
+#ce-button-bar {
+  margin-top: 1px;
+  margin-left: 2px;
+}
+
+#ce-container {
+  position: absolute;
+  top: 45px;
+  left: 20px;
+}
+
+#ce-y-label {
+  position: absolute;
+  bottom: 75px;
+  left: 8px;
+  height: 300px;
+  max-width: 16px;
+  text-align: center;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  white-space: nowrap;
+}
+
+#ce-x-label {
+  position: absolute;
+  top: 374px;
+  left: 45px;
+  width: 300px;
+  text-align: center;
+}
+
+#ce-pos-x {
+  position: absolute;
+  top: 393px;
+  left: 4px;
+  width: 54px;
+}
+
+#ce-pos-y {
+  position: absolute;
+  top: 393px;
+  left: 55px;
+  width: 54px;  
+}
+
+#ce-point {
+  position: absolute;
+  top: 393px;
+  left: 160px;
+  width: 75px;  
+  text-align: center;
+}
+
+#ce-equation {
+  position: absolute;
+  top: 393px;
+  right: 4px;
+  width: 125px;  
+  text-align: right;
+}
+
+#ce {
+  width: 330px;
+  height: 320px;
+  transform-origin: top left;
+}
+
+#ce-from-name,
+#ce-to-name {
+  display: inline-block;
+  max-width: 190px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 700;
+}
+
+#ce-from-name {
+  vertical-align: bottom;
+}
+
+#del-point-btn.disab,
+#chart-delete-variable-btn.disab {
+  filter: grayscale(100%) brightness(150%) contrast(100%);
+}
+
+#bl-type {
+  height: 20px;
+  font-size: 12px;
+  margin: 1px 6px 0 6px;
+}
+
+#bl-selectors {
+  font-size: 12px;
+  width: 126px;
+}
+
+#ce-bottom-div {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  width: calc(100% - 9px);
+  height: 22px;
+  border-top: 1px solid silver;
+}
+
+#ce-no-slack-div {
+  position: absolute;
+  left: -2px;
+  bottom: -1px;
+  width: 100px;
+}
+
+#ce-no-slack-lbl {
+  display: inline-block;
+  vertical-align: top;
+  padding-top: 4px;
+}
+
+#ce-soc-direct {
+  height: 19px;
+  font-size: 12px;
+}
+
+#ce-share-of-cost {
+  width: 45px;
+  max-height: 18px;
+  margin: 3px 1px 0 3px;
+}
+
+#ce-soc {
+  position: absolute;
+  right: 0px;
+}
+
+/* NOTE: The following dialogs are not modal, but "stay-on-top",
+         i.e., windows that remain open (until dismissed) and above
+         the main window, and they are draggable and resizable.
+         The z-indices are lower (5-50) than those of modal dialogs. */
+
+/* all resizable dialogs have a striped triangle at the bottom right */
+div.resizer {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  height: 12px;
+  width: 12px;
+  cursor: se-resize;
+  background-image: url(images/resize.png);
+  background-size: contain;
+}
+
+/* draggable dialogs can be moved by dragging their header */
+div.dragger {
+  cursor: move;
+}
+
+/* the DATASET DIALOG displays the dataset manager */
+#dataset-dlg {
+  display: none;
+  z-index: 5;
+  margin: 0;
+  width: 450px;
+  height: 300px;
+  min-width: 400px;
+  min-height: 160px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#dataset-buttons,
+#equation-buttons {
+  position: absolute;
+  width: 40%;
+  top: 21px;
+  left: 1px;
+}
+
+#dataset-buttons > img.btn,
+#equation-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+#dataset-header,
+#equation-header {
+  position: absolute;
+  top: 44px;
+  left: 2px;
+  font-weight: 600;
+}
+
+div.sdsn {
+  display: inline-block;
+  vertical-align: top;
+  font-style: italic;
+  width: calc(100% - 115px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.it {
+  font-style: italic;
+}
+
+td.io {
+  width: 12px;
+}
+
+div.io-box {
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid gray;
+  box-shadow: 1.3px 1.3px gray;
+  color: #e0e0e0;
+}
+
+#ds-filter-btn {
+  height: 12px;
+  width: 12px;
+}
+
+#ds-filter-bar {
+  position: absolute;
+  top: 60px;
+  left: 2px;
+  width: calc(40% - 4px);
+  display: none;
+}
+
+#ds-filter-text {
+  max-height: 16px;
+  width: calc(100% - 1px);
+  font-size: 10px;
+}
+
+#dataset-scroll-area {
+  position: absolute;
+  top: 60px;
+  left: 2px;
+  width: calc(40% - 4px);
+  height: calc(100% - 122px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#dataset-table,
+#dataset-modif-table,
+#equation-table,
+#experiment-table,
+#experiment-dim-table,
+#experiment-chart-table,
+#xp-clusters-table,
+#modules-table,
+#parameter-table,
+#finder-table,
+#finder-item-table,
+#finder-expression-table,
+#restore-table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  line-height: 16px;
+  background-color: white;
+  border: 1px solid Silver;
+  border-top: none;
+}
+
+#dataset-properties {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: 40%;
+}
+
+#dataset-outcome {
+  position: absolute;
+  bottom: 0px;
+  right: 25px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+#dataset-outcome.not-selected {
+  filter: saturate(0) contrast(50%) brightness(170%);
+}
+
+#dataset-separator {
+  position: absolute;
+  top: 22px;
+  left: calc(40%);
+  height: calc(100% - 24px);
+  width: 3px;
+  border-left: 1.5px Silver ridge;
+}
+
+#dataset-modif-header {
+  position: absolute;
+  top: 22px;
+  left: calc(40% + 4px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#dataset-modif-ds-name {
+  position: absolute;
+  top: 22px;
+  left: calc(40% + 70px);
+  font-style: italic;
+  width: calc(60% - 74px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#dataset-modif-titles {
+  position: absolute;
+  top: 44px;
+  left: calc(40% + 4px);
+  font-weight: 600;
+}
+
+#dataset-modif-scroll-area {
+  position: absolute;
+  top: 60px;
+  left: calc(40% + 4px);
+  width: calc(60% - 6px);
+  height: calc(100% - 122px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#dataset-modif-buttons {
+  position: absolute;
+  bottom: 1px;
+  left: calc(40% + 3px);
+}
+
+#dataset-modif-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+tr.module,
+tr.dataset,
+tr.experiment,
+tr.variable {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+tr.module:hover,
+tr.dataset:hover,
+tr.dataset-modif:hover,
+tr.experiment:hover,
+tr.variable:hover {
+  background-color: #dfe0ff;
+}
+
+tr.sel-set {
+  background-color: #eff0ff;  
+}
+
+td.outcome:before {
+  content: ' \25C8';
+}
+
+td.array:before {
+  content: ' \2637';
+}
+
+td.blackbox:before {
+  content: ' \25FC';
+}
+
+td.blackbox.array:before {
+  content: ' \25FC\2637';
+}
+
+td.blackbox.outcome:before {
+  content: ' \25FC\25C8';
+}
+
+td.dataset-selector {
+  min-width: 80px;
+  max-width: 80px;
+  width: 80px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.equation-selector {
+  min-width: 120px;
+  max-width: 240px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.wildcard {
+  font-weight: bold;
+  color: #900040;
+}
+
+td.dataset-expression,
+td.equation-expression {
+  border-left: solid 1px Silver;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.equation-expression {
+  min-width: 60%;
+}
+
+#dataset-blackbox {
+  position: absolute;
+  bottom: 6px;
+  right: 45px;
+  width: 16px;
+  height: 16px;
+  font-size: 19px;
+  cursor: pointer;
+  color: #e0e0e0;
+}
+
+#dataset-blackbox.off {
+  color: #e0e0e0;
+}
+
+#dataset-blackbox.on {
+  color: #403848;
+}
+
+/* the EQUATION DIALOG displays the equation manager */
+/* NOTE: much the same as the dataset manager, so few "own" styles */
+#equation-dlg {
+  display: none;
+  z-index: 10;
+  margin: 0;
+  width: 400px;
+  height: 235px;
+  min-width: 300px;
+  min-height: 120px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#equation-scroll-area {
+  position: absolute;
+  top: 45px;
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 60px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+/* NOTE: Rename equation modal must be above Edit variable modal */
+#rename-equation-modal {
+  z-index: 110;
+}
+
+#new-dataset-dlg,
+#rename-dataset-dlg,
+#new-equation-dlg,
+#rename-equation-dlg {
+  width: 240px;
+  height: 45px;
+}
+
+#new-dataset-name,
+#rename-dataset-name,
+#new-equation-name,
+#rename-equation-name {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: calc(100% - 6px);
+}
+
+#new-selector-dlg,
+#rename-selector-dlg {
+  width: 215px;
+  height: 45px;
+}
+
+#new-selector-name,
+#rename-selector-name {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: 102px;
+}
+
+#new-selector-label,
+#rename-selector-label {
+  position: absolute;
+  left: 110px;
+  bottom: 5px;
+}
+
+/* SERIES modal dialog */
+#series-dlg {
+  width: 156px;
+  height: 282px;
+}
+
+#series-default-lbl {
+  position: absolute;
+  top: 25px;
+  left: 2px;
+}
+
+#series-default {
+  position: absolute;
+  top: 24px;
+  left: 79px;
+  width: 73px;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+#series-periodic {
+  position: absolute;
+  top: 45px;
+  left: 0px;  
+}
+
+#series-periodic-lbl {
+  position: absolute;
+  top: 47px;
+  left: 22px;  
+}
+
+#series-array {
+  position: absolute;
+  top: 45px;
+  left: 90px; 
+}
+
+#series-array-lbl {
+  position: absolute;
+  top: 47px;
+  left: 112px;  
+}
+
+#series-no-time-msg {
+  position: absolute;
+  top: 66px;
+  left: 1px;
+  width: calc(100% - 2px);
+  height: 27px;
+  z-index: 1;
+  background-color: inherit;
+  font-style: italic;
+  padding-top: 15px;
+  text-align: center;
+  display: none;
+}
+
+#series-time-step-lbl {
+  position: absolute;
+  top: 68px;
+  left: 2px;
+}
+
+#series-time-scale {
+  position: absolute;
+  top: 67px;
+  left: 60px;
+  width: 43px;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+#series-time-unit {
+  position: absolute;
+  top: 67px;
+  left: 108px;
+  height: 19px;
+  width: 45px;
+  font-size: 12px;
+}
+
+#series-method-lbl {
+  position: absolute;
+  top: 90px;
+  left: 2px;
+}
+
+#series-method {
+  position: absolute;
+  top: 88px;
+  left: 49px;
+  height: 19px;
+  width: 105px;
+  font-size: 11px;
+}
+
+#series-remote {
+  position: absolute;
+  top: 110px;
+  left: 2px;  
+}
+
+#series-url {
+  width: 150px;
+  font-size: 12px;
+}
+
+#series-data-lbl {
+  position: absolute;
+  top: 129px;
+  left: 2px;
+}
+
+#series-data {
+  width: 150px;
+  height: 120px;
+  margin: 125px 3px;
+}
+
+#series-line {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  font-size: 10px;
+}
+
+/* the CHART dialog displays the Chart Manager */
+#chart-dlg {
+  display: none;
+  z-index: 15;
+  margin: 0;
+  width: 570px;
+  height: 255px;
+  min-width: 455px;
+  min-height: 180px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#chart-experiment-info {
+  display: inline-block;
+  vertical-align: bottom;
+  margin-left: 10px;
+  max-width: calc(100% - 120px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: white;
+  text-shadow: 0.5px 0.5px 0px gray;
+}
+
+#chart-control-panel {
+  position: absolute;
+  bottom: 0px;
+  left: 1px;
+  width: 203px;
+  height: calc(100% - 25px);
+  padding: 2px;
+}
+
+#chart-selector {
+  position: absolute;
+  top: 23px;
+  left: 1px;  
+  width: 201px;
+  font-size: 12px;
+}
+
+#chart-buttons {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+
+#chart-buttons > img.btn,
+#change-equation-btns > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+#chart-histogram {
+  position: absolute;
+  top: 46px;
+  left: -1px;
+}
+
+#chart-histogram-lbl {
+  position: absolute;
+  top: 49px;
+  left: 21px;
+}
+
+#chart-histogram-options {
+  position: absolute;
+  top: 46px;
+  left: 100px;
+}
+
+#histogram-bins {
+  font-size: 12px;
+  height: 20px;
+  width: 50px;
+}
+
+#chart-title {
+  position: absolute;
+  top: 68px;
+  left: -1px;
+}
+
+#chart-title-lbl {
+  position: absolute;
+  top: 71px;
+  left: 21px;
+}
+
+#chart-legend-lbl {
+  position: absolute;
+  top: 71px;
+  left: 90px;
+}
+
+#chart-legend {
+  position: absolute;
+  top: 68px;
+  left: 134px;
+  width: 68px;
+  font-size: 12px;
+}
+
+#chart-variables-header {
+  position: absolute;
+  top: 93px;
+}
+
+#chart-variable-buttons {
+  width: 146px;
+  display: inline-block;
+  position: absolute;
+  left: 60px;
+  top: -2px;
+}
+
+#chart-variable-buttons > img.btn {
+  height: 18px;
+  width: 18px;
+}
+
+#chart-variables {
+  position: absolute;
+  top: 113px;
+  width: 200px;
+  height: calc(100% - 115px);
+  overflow-y: auto;
+}
+
+#chart-variables-table {
+  width: 100%;
+  border-collapse: collapse;
+  line-height: 12px;
+  background-color: white;
+  border: 1px solid Silver;
+}
+
+td.v-box {
+  width: 20px;
+}
+
+td.v-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+img.v-btn {
+  height: 18px;
+  width: 18px;
+  cursor: pointer;
+  filter: brightness(85%);
+}
+
+img.v-btn:hover {
+  filter: brightness(110%);
+}
+
+img.v-disab {
+  cursor: default;
+  pointer-events: none;
+  filter: saturate(10%) brightness(200%) contrast(70%);
+}
+
+#chart-display-panel {
+  position: absolute;
+  width: calc(100% - 212px);
+  bottom: 2px;
+  left: 205px;
+  height: calc(100% - 25px);
+  border-left: 1.5px Silver ridge;
+}
+
+#chart-svg-scroller {
+  height: calc(100% - 24px);
+  width: 100%;
+  border: 1px solid Silver;
+  margin-left: 2px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+#chart-svg-container {
+  height: 100%;
+  /* width will be affected by the "stretch factor" */
+  width: 100%;  
+}
+
+#chart-svg {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+}
+
+#chart-table-panel {
+  width: 100%;
+  height: calc(100% - 24px);
+  overflow: auto;
+}
+
+#no-chart-data {
+  display: inline-block;
+  font-style: italic;
+  padding-top: 40px;
+  text-align: center;
+  width: 100%;
+}
+
+#chart-table {
+  border: solid 1px Silver;
+  background-color: white;
+  border-collapse: collapse;
+  margin: 2px;
+  max-width: calc(100% - 2px);
+  text-align: right;
+}
+
+#chart-table th {
+  border: solid 1px Silver;
+  padding-left: 3px;
+  max-width: 50px;
+  background-color: #e4e4e8;
+  text-align: center;
+  padding: 2px 5px;
+}
+
+#chart-table th:first-of-type {
+  text-align: left;
+  max-width: none;
+}
+
+#chart-table td {
+  border: solid 1px Silver;
+  text-align: right;
+  padding-left: 3px;
+  max-width: 50px;
+  padding: 2px 5px;
+}
+
+#chart-table td:first-of-type {
+  text-align: left;
+  max-width: none;
+}
+
+#chart-display-buttons {
+  position: absolute;
+  bottom: -1px;
+  left: 20px;
+}
+
+#table-only-buttons,
+#chart-only-buttons {
+  display: inline-block;
+}
+
+#chart-display-buttons > img.btn,
+#table-only-buttons > img.btn,
+#chart-only-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+  margin-left: 4px;
+}
+
+#chart-time-step {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 50px;
+  font-size: 11px;
+}
+
+#chart-toggle-chevron,
+#sa-toggle-chevron {
+  font-size: 16px;
+  color: grey;
+  position: absolute;
+  bottom: 3px;
+  left: 1px;
+  cursor: pointer;
+}
+
+#variable-dlg {
+  width: 215px;
+  height: 148px;
+}
+
+#variable-dlg-name {
+  display: inline-block;
+  width: 165px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#variable-color {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 1px solid Black;
+  background-color: #c00000;
+}
+
+#variable-scale {
+  display: inline-block;
+  width: 40px;
+  margin-left: 2px;
+}
+
+#variable-width {
+  display: inline-block;
+  width: 28px;
+  margin-left: 2px;
+}
+
+#variable-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+#change-equation-btns {
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  display: none;
+}
+
+#color-picker {
+  position: absolute;
+  top: 26px;
+  left: 120px;
+}
+
+#add-variable-dlg,
+#add-sa-variable-dlg {
+  width: 450px;
+  height: 46px;
+}
+
+#add-variable-obj,
+#add-sa-variable-obj {
+  position: absolute;
+  top: 22px;
+  left: 2px;
+  font-size: 12px;
+  width: 80px;
+  height: 22px;
+}
+
+#add-variable-name,
+#add-sa-variable-name {
+  position: absolute;
+  top: 22px;
+  left: 84px;
+  width: 297px;
+  font-size: 12px;
+  height: 22px;
+}
+
+#add-variable-attr,
+#add-sa-variable-attr {
+  position: absolute;
+  top: 22px;
+  right: 2px;
+  width: 55px;
+  font-size: 12px;
+  height: 22px;
+}
+
+#rename-chart-dlg {
+  width: 350px;
+  height: 44px;
+}
+
+#new-chart-title {
+  margin: 2px;
+  width: calc(100% - 6px);
+}
+
+/* the SENSITIVITY DIALOG displays the sensitivity analysis */
+#sensitivity-dlg {
+  display: none;
+  z-index: 15;
+  margin: 0;
+  width: 500px;
+  height: 265px;
+  min-width: 380px;
+  min-height: 220px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#sensitivity-control-panel {
+  position: absolute;
+  width: 40%;
+  height: calc(100% - 22px);
+  top: 21px;
+  left: 1px;  
+}
+
+#sa-base {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  width: calc(100% - 2px);
+}
+
+#sa-base-selectors {
+  position: absolute;
+  left: 34px;
+  top: -1px;
+  width: calc(100% - 37px);
+  height: 16px !important;
+  font-size: 12px;
+  background-color: inherit;
+}
+
+td.sa-ds-sel {
+  cursor: pointer;
+}
+
+td.sa-ds-sel:hover {
+  text-decoration: underline solid #b00090;
+  text-decoration-thickness: 1.5px;
+}
+
+#sa-delta {
+  position: absolute;
+  top: 22px;
+  left: 2px;
+  width: calc(100% - 2px);
+}
+
+#sensitivity-delta {
+  position: absolute;
+  left: 34px;
+  top: -1px;
+  width: 35px;
+  height: 16px !important;
+  font-size: 12px;
+  padding-left: 2px;
+  background-color: inherit;
+}
+
+#sa-percent {
+  position: absolute;
+  left: 75px;  
+}
+
+#sa-p-header {
+  position: absolute;
+  top: 43px;
+  left: 2px;  
+}
+
+#sa-p-btns,
+#sa-o-btns {
+  position: absolute;
+  top: -2px;
+  left: 72px;
+  width: 90px;
+  display: inline-block;
+}
+
+#sa-p-scroll-area {
+  position: absolute;
+  top: 59px;
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(50% - 41px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#sa-p-table {
+  width: 100%;
+  border-collapse: collapse;
+  line-height: 16px;
+  background-color: white;
+  border: 1px solid Silver;
+  border-top: none;
+}
+
+#sa-o-header {
+  position: absolute;
+  top: calc(50% + 23px);
+  left: 2px;  
+}
+
+#sa-o-scroll-area {
+  position: absolute;
+  top: calc(50% + 39px);
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(50% - 41px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#sa-o-table {
+  width: 100%;
+  border-collapse: collapse;
+  line-height: 16px;
+  background-color: white;
+  border: 1px solid Silver;
+  border-top: none;
+}
+
+#sa-p-btns > img.v-btn,
+#sa-o-btns > img.v-btn {
+  height: 16px;
+  width: 16px;
+}
+
+#sensitivity-display-panel {
+  position: absolute;
+  left: calc(40% + 2px);
+  top: 23px;
+  width: calc(60% - 5px);
+  height: calc(100% - 25px);
+  border-left: 1.5px Silver ridge;
+}
+
+#sa-display-top-bar {
+  position: absolute;
+  top: 0px;
+  left: 1px;
+  width: 100%;
+  height: 21px;
+}
+
+#sa-control-buttons {
+  position: absolute;
+  width: 50px;
+  top: 0px;
+  left: 1px;
+}
+
+#sa-progress {
+  position: absolute;
+  width: calc(100% - 160px);
+  height: 100%;
+  top: 2px;
+  left: 50px;
+}
+
+#sa-statistic {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+
+#sa-scroll-area {
+  position: absolute;
+  left: 1px;
+  top: 23px;
+  width: calc(100% - 2px);
+  height: calc(100% - 45px);
+  overflow: auto;
+}
+
+#sa-table {
+  border-collapse: collapse;
+  position: relative;
+  left: 2px;
+  top: 2px;  
+}
+
+tr.sa-p-row:hover > td {
+  filter: brightness(85%);
+}
+
+tr.sa-p-sel > td:first-child {
+  background-color: #00b0ff;
+}
+
+tr.sa-p-sel > td:not(:first-child) {
+  filter: brightness(90%);
+}
+
+tr.sa-p-sel:hover > td:not(:first-child) {
+  filter: brightness(85%);
+}
+
+td.sa-col-hdr {
+  background-color: #ffd800;
+  min-width: 40px;
+  text-align: center;
+  border: 0.5px solid silver;
+}
+
+td.sa-row-hdr {
+  background-color: #a0c8ff;
+  max-width: 190px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 0.5px solid silver;
+  padding-right: 5px;
+}
+
+td.sa-plus {
+  background-color: #8080f0 !important;
+  color: white;
+  border: 0.5px solid silver;
+  max-width: 50px;
+}
+
+td.sa-minus {
+  background-color: #f08080 !important;
+  color: white;
+  border: 0.5px solid silver;
+  max-width: 50px;
+}
+
+td.sa-data {
+  border: 0.5px solid silver;
+  background-color: white;
+  text-align: right;
+}
+
+td.sa-brd {
+  font-weight: bold;
+}
+
+td.sa-not-run {
+  background-color: #e0e0e0;
+}
+
+
+#sa-bottom-bar {
+  position: absolute;
+  bottom: 2px;
+  left: 12px;
+}
+
+#sa-abs-rel {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid gray;
+  color: #400040;
+  background-color: white;
+  font-size: 10px;
+  text-align: center;
+  cursor: pointer;
+}
+
+#sa-abs-rel:hover {
+  background-color: #f0e0ff;
+}
+
+#sa-outcome-name {
+  position: absolute;
+  bottom: 1px;
+  left: 135px;
+  max-width: calc(100% - 145px);
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #806000;
+}
+
+/* the EXPERIMENT DIALOG displays the experiment manager */
+#experiment-dlg {
+  display: none;
+  z-index: 20;
+  margin: 0;
+  width: 400px;
+  height: 275px;
+  min-width: 400px;
+  min-height: 250px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#experiment-buttons {
+  position: absolute;
+  width: 40%;
+  top: 21px;
+  left: 1px;
+}
+
+#sa-control-buttons > img.btn,
+#viewer-buttons > img.btn,
+#experiment-buttons > img.btn,
+#experiment-params-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+#experiment-header {
+  position: absolute;
+  top: 44px;
+  left: 2px;
+  font-weight: 600;
+}
+
+#experiment-scroll-area {
+  position: absolute;
+  top: 60px;
+  left: 2px;
+  width: calc(40% - 4px);
+  height: calc(100% - 92px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#experiment-properties {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;  
+}
+
+#sensitivity-separator,
+#experiment-separator {
+  position: absolute;
+  top: 22px;
+  left: calc(40%);
+  height: calc(100% - 24px);
+  width: 3px;
+  border-left: 1.5px Silver ridge;
+}
+
+#experiment-default-message {
+  position: absolute;
+  top: 22px;
+  left: calc(40% + 4px);
+  margin: 50px 10px;
+}
+
+#experiment-params-header {
+  position: absolute;
+  top: 22px;
+  left: calc(40% + 4px);
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#experiment-d-header {
+  position: absolute;
+  top: 40px;
+  left: calc(40% + 4px);
+  margin-right: 4px;
+}
+
+#experiment-d-btns {
+  position: absolute;
+  top: -2px;
+  left: 72px;
+  width: 140px;
+}
+
+/* enhance brightness for dark v-btn buttons */
+#sa-p-down-btn:hover,
+#sa-o-down-btn:hover,
+#xp-d-down-btn:hover,
+#xp-d-settings-btn:hover {
+  filter: brightness(200%);
+}
+
+#experiment-d-scroll-area {
+  position: absolute;
+  top: 60px;
+  left: calc(40% + 4px);
+  width: calc(60% - 6px);
+  height: calc(50% - 40px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#experiment-c-header {
+  position: absolute;
+  top: calc(55% + 10px);
+  left: calc(40% + 4px);
+  margin-right: 4px;
+}
+
+#xp-c-add-btn {
+  position: absolute;
+  top: -2px;
+  left: 45px;
+}
+
+#xp-c-delete-btn {
+  position: absolute;
+  top: -2px;
+  left: 75px;
+}
+
+#experiment-c-scroll-area {
+  position: absolute;
+  top: calc(55% + 30px);
+  left: calc(40% + 4px);
+  width: calc(60% - 6px);
+  height: calc(40% - 40px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#experiment-filter {
+  position: absolute;
+  bottom: 3px;
+  left: calc(40% + 4px);
+  width: calc(60% - 41px);  
+}
+
+#experiment-exclude {
+  width: calc(100% - 50px);
+  height: 16px !important;
+  font-size: 12px;
+  background-color: inherit;
+}
+
+#xp-ignore-btn {
+  position: absolute;
+  right: 18px;
+  bottom: 1px;
+  height: 18px;
+  width: 18px;
+}
+
+#xp-ignore-count {
+  position: absolute;
+  right: 14px;
+  bottom: 3px;
+  height: 16px;
+  font-size: 9px;
+  color: #806070;
+}
+
+#experiment-viewer {
+  position: absolute;
+  top: 22px;
+  left: 2px;
+  height: calc(100% - 24px);
+  width: calc(100% - 4px);
+}
+
+#sensitivity-buttons,
+#viewer-buttons {
+  display: inline-block;
+}
+
+#viewer-selectors {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  width: calc(100% - 95px);
+}
+
+#viewer-variable {
+  font-size: 10px;
+  max-width: calc(100% - 160px);
+}
+
+#sensitivity-statistic,
+#viewer-statistic {
+  width: 50px;
+  font-size: 10px;
+}
+
+#viewer-scale {
+  width: 75px;
+  font-size: 10px;
+}
+
+#viewer-bar {
+  white-space: nowrap;  
+}
+
+#viewer-title {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  font-weight: 600;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#sensitivity-progress,
+#viewer-progress {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  font-size: 10px;
+}
+
+span.x-checked {
+  color: #00d000;
+  font-weight: bold;
+}
+
+#viewer-scroll-area {
+  width: calc(100% - 2px);
+  height: calc(100% - 64px);
+  overflow: auto;
+}
+#viewer-table {
+  border-collapse: collapse;
+  position: relative;
+  left: 2px;
+  top: 2px;
+}
+
+th.conf-ttl,
+th.scen-h-ttl {
+  min-width: 15px;
+  min-height: 10px;
+  font-weight: normal;
+  font-style: italic;
+  background-color: #f4f0f2;
+}
+
+th.conf-ttl {
+  border-bottom: 2px solid #ffa050;
+}
+
+th.scen-h-ttl {
+  border-bottom: 2px solid #1858b0;
+}
+
+th.conf-hdr,
+th.scen-hdr {
+  border: 1px solid Silver;
+  min-width: 15px;
+  min-height: 10px;
+  vertical-align: middle;
+}
+
+th.scen-hdr {
+  text-align: left;
+}
+
+th.leaf-conf {
+  border-bottom: 1.5px solid Silver;
+  cursor: pointer;
+}
+
+th.leaf-conf:hover {
+  box-shadow: 0px 0px 0px 2px rgba(96,64,0,0.5) inset;
+}
+
+th.sel-leaf {
+  box-shadow: 0px 0px 0px 2px Orange inset;
+}
+
+th.scen-v-ttl {
+  border-right: 2px solid #1858b0;
+  max-width: 14px;
+  overflow: visible;
+  font-weight: normal;
+  font-style: italic;
+  background-color: #f4f0f2;
+}
+
+div.v-rot {
+  position: relative;
+  left: -10px;
+  top: 0;
+  text-align: center;
+  white-space: nowrap !important;
+  float: left;  
+  min-width: 400%;
+  margin-left: -150%;
+  transform: rotate(-90deg);
+  transform-origin: center center 0;
+  font-weight: normal;
+  font-style: italic;
+}
+
+td.data-cell {
+  border: 1px solid Silver;
+  min-width: 40px;
+  min-height: 12px;
+  background-color: white;
+  text-align: right;
+}
+
+td.data-cell:hover {
+  cursor: pointer;
+  box-shadow: Black 0px 0px 0px 2px inset;
+  font-weight: bold;  
+}
+
+td.not-run {
+  background-color: #e0e0ec;
+  color: white;
+  font-size: 10px;
+  text-align: center;
+  cursor: default;
+  pointer-events: none !important;
+}
+
+td.in-chart {
+  box-shadow: gray -0.5px -0.5px 1px 1.5px inset;
+  font-weight: bold;
+}
+
+#viewer-spinners {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+}
+
+div.spinner {
+  display: inline-block;
+  border: 1px solid Silver;
+  border-radius: 3px;
+  font-size: 10px;
+  margin-right: 6px;
+}
+
+div.spin-min,
+div.spin-plus {
+  display: inline-block;
+  cursor: pointer;  
+  background-color: Silver;
+  color: Black;
+  padding: 0 1px;
+}
+
+div.spin-min:hover,
+div.spin-plus:hover {
+  background-color: #808080;
+  color: white;
+}
+
+div.spin-val {
+  display: inline-block;
+  width: 12px;
+  max-width: 12px;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: bottom;
+}
+
+div.no-spin {
+  background-color: #e0e0e0;
+  color: Silver;
+  pointer-events: none;
+}
+
+#xp-config-spinner {
+  border-width: 1.5px;
+  border-color: #f4c400;
+}
+
+#xp-scen-spinner {
+  border-width: 1.5px;
+  border-color: #2484e0;
+}
+
+div.color-scale {
+  display:inline-block;
+  vertical-align: bottom;
+  width: 14px;
+  height: 14px;
+  border: 1px solid Silver;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+div.color-scale:hover {
+  border-color: rgba(0,0,0,0.5);
+  box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) inset;
+}
+
+div.sel-cs {
+  border-color: Black;
+  box-shadow: 0px 0px 0px 1.5px Black inset;
+}
+
+div.blue-to-red {
+ background: linear-gradient(180deg, #2e86de 0%, #fff8ff 50%, #ee5253 100%);
+}
+
+div.red-to-blue {
+ background: linear-gradient(180deg, #ee5253 0%, #fff8ff 50%, #2e86de 100%);
+}
+
+div.green-to-red {
+ background: linear-gradient(180deg, #10ac84 0%, #feca57 50%, #ee5253 100%);  
+}
+
+div.red-to-green {
+ background: linear-gradient(180deg, #ee5253 0%, #feca57 50%, #10ac84 100%);  
+}
+
+div.no-colors {
+ background: #fafafa;
+}
+
+#sa-copy-btn,
+#sa-copy-data-btn,
+#xv-copy-btn,
+#xv-chart-btn {
+  display: inline-block;
+  vertical-align: bottom;
+  width: 19px;
+  height: 19px;
+  margin-left: 5px;
+  margin-bottom: -2px;
+}
+
+#xp-new-dlg {
+  width: 240px;
+  height: 45px;
+}
+
+#xp-new-name {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: calc(100% - 6px);
+}
+
+#xp-rename-dlg {
+  width: 240px;
+  height: 45px;
+}
+
+#xp-rename-name {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: calc(100% - 6px);
+}
+
+#xp-parameter-dlg {
+  width: 270px;
+  height: 45px;  
+}
+
+#xp-parameter-select {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: calc(100% - 6px);
+}
+
+/* the EDIT SETTINGS DIMENSIONS dialog allows editing these dimensions */
+/* NOTE: many styles in common with the EDIT ACTOR DIMENSIONS dialog */ 
+#xp-settings-dlg {
+  width: 270px;
+  height: 236px;
+}
+
+#xp-actor-s-header,
+#xp-settings-s-header,
+#xp-settings-d-header {
+  margin: 2px;
+}
+
+#xp-actor-s-header > img,
+#xp-settings-s-header > img,
+#xp-settings-d-header > img {
+  margin-left: 5px;
+  margin-bottom: -1px;
+  vertical-align: bottom;
+}
+
+#xp-settings-s-scroll-area,
+#xp-settings-d-scroll-area {
+  width: 266px;
+  margin: 2px;
+  height: 80px;
+  overflow: auto;
+}
+
+#xp-actor-dimension-table,
+#xp-settings-s-table,
+#xp-settings-d-table {
+  background-color: white;
+  border-collapse: collapse;
+  border: 1px solid Silver;
+  width: 100%;
+}
+
+#xp-actor-dimension-table > tbody > tr:hover,
+#xp-settings-s-table > tbody > tr:hover,
+#xp-settings-d-table > tbody > tr:hover,
+#xp-clusters-table > tbody > tr:hover {
+  background-color: #dfe0ff;
+}
+
+#xp-actor-dimension-table > tbody > tr > td,
+#xp-settings-s-table > tbody > tr > td,
+#xp-clusters-table > tbody > tr > td {
+  border: 1px solid Silver;
+}
+
+#xp-settings-selector-dlg {
+  width: 370px;
+  height: 45px;
+}
+
+#xp-actor-selector-code,
+#xp-settings-selector-code {
+  width: 80px;
+}
+
+#xp-settings-selector-string {
+  width: 182px;
+  font-family: monospace;
+}
+
+#xp-settings-dimension-dlg {
+  width: 295px;
+  height: 45px;
+}
+
+#xp-settings-dimension-string {
+  width: 234px;
+}
+
+span.sd-clear {
+  font-size: 10px;
+  font-style: italic;
+  font-weight: normal;
+  margin-left: 5px;
+}
+
+/* the ACTOR DIMENSION dialog allows editing this dimension */
+#xp-actor-dimension-dlg {
+  width: 150px;
+  height: 160px;
+}
+
+#xp-actor-dimension-scroll-area {
+  width: calc(100% - 4px);
+  margin: 2px;
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+
+#xp-actor-selector-dlg {
+  width: 255px;
+  height: 68px;
+}
+
+#xp-actor-selector-rounds {
+  width: 150px;
+  font-family: monospace;
+}
+
+#xp-clusters-dlg {
+  width: 408px;
+  height: min-content;  
+}
+
+#xp-clusters-select {
+  width: 380px;
+  font-size: 12px;
+  margin: 2px;
+}
+
+#xp-clusters-add-btn {
+  position: absolute;
+  top: 23px;
+  left: 386px;
+  height: 18px;
+  width: 18px;
+}
+
+#xp-clusters-no-list {
+  width: 398px;
+  text-align: center;
+  font-style: italic;
+  padding: 2px;
+  margin: 2px;
+  border: 1px solid silver;
+}
+#xp-clusters-list {
+  margin: 2px;
+}
+
+#xp-clusters-scroll-hdr {
+  font-weight: bold;  
+}
+
+#xp-clusters-name-hdr {
+  width: 300px;
+  display: inline-block;
+}
+
+#xp-clusters-selectors-hdr {
+  width: 100px;
+  display: inline-block;
+}
+
+#xp-clusters-scroll {
+  width: 100%;
+  max-height: 250px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#xp-clusters-table > tbody > tr > td:last-child {
+  width: 100px;
+  max-width: 100px;
+}
+
+#xp-clusters-selectors-div {
+  margin: 2px;
+  width: calc(100% - 4px);
+}
+
+#xp-clusters-selectors {
+  width: 318px;
+  height: 16px !important;
+  font-size: 12px;
+}
+
+#xp-clusters-delete-btn {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  height: 18px;
+  width: 18px;
+}
+
+
+/* the REPOSITORY DIALOG displays the repository browser */
+#repository-dlg {
+  display: none;
+  z-index: 30;
+  margin: 0;
+  width: 300px;
+  height: 300px;
+  min-width: 275px;
+  min-height: 200px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#repository-not-implemented {
+  position: absolute;
+  top: 22px;
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 24px);
+  text-align: center;
+  display: none;
+}
+
+#repository-pane {
+  position: absolute;
+  top: 21px;
+  left: 1px;  
+  width: calc(100% - 2px);
+  height: calc(100% - 24px);
+  display: block;
+}
+
+#repository-buttons {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+
+#repository-buttons > img.btn {
+  height: 20px;
+  width: 20px;
+}
+
+#repo-remove-btn.disab,
+#delete-round-btn.v-disab {
+  filter: grayscale(100%) brightness(150%) contrast(80%);
+}
+
+#repo-include-btn.disab {
+  filter: grayscale(100%) brightness(300%) contrast(80%);
+}
+
+#repository-selector {
+  position: absolute;
+  left: 2px;
+  top: 26px;
+  width: calc(100% - 4px);
+}
+
+#modules-header {
+  position: absolute;
+  top: 48px;
+  left: 2px;
+  font-weight: 600;
+}
+
+#modules-scroll-area,
+#parameter-scroll-area {
+  position: absolute;
+  top: 64px;
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 81px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#modules-count {
+  position: absolute;
+  bottom: 0px;
+  left: 2px;
+}
+
+#add-repository-dlg {
+  width: 280px;
+  height: min-content;
+}
+
+#access-repository-dlg {
+  width: 276px;
+  height: min-content;
+}
+
+#access-repository-name {
+  display: inline-block;
+  font-style: italic;
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: -3px;
+}
+
+#store-in-repository-dlg,
+#store-bb-in-repository-dlg {
+  width: 320px;
+  height: 111px;
+}
+
+#include-dlg {
+  width: 320px;
+  height: min-content;
+}
+
+#include-name {
+  font-family: monospace;
+  max-width: 135px;
+  display: inline-block;
+  overflow: clip;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#include-prefix {
+  width: calc(100% - 50px);
+  font-size: 12px;
+}
+
+#include-actor {
+  width: calc(100% - 50px);
+  font-size: 12px;
+  margin-left: 9px;
+}
+
+#include-scroll-area {
+  margin: 2px;
+  height: min-content;
+  max-height: 350px !important;
+  width: calc(100% - 4px);
+  border-top: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+tr.i-param {
+  font-style: italic;
+  border: 1px solid Silver;
+}
+
+tr.o-param {
+  font-weight: bold;
+  border: 1px solid Silver;
+}
+
+tr.no-param {
+  font-weight: bold;
+  border: 1px solid Red;
+  color: Red;
+}
+
+select.i-param {
+  font-size: 11px;
+  margin: 2px 0 0 2px;
+  max-width: calc(100% - 15px);
+}
+
+#confirm-delete-from-repo-dlg {
+  width: 270px;
+  height: 120px;
+}
+
+#confirm-delete-from-repo-name {
+  word-break: keep-all;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+#confirm-delete-from-repo-mod-name {
+  word-break: keep-all;
+  white-space: nowrap;
+  font-family: monospace;
+}
+
+/* the FINDER DIALOG allows lookup of occurrences of entities */
+#finder-dlg {
+  display: none;
+  z-index: 40;
+  margin: 0;
+  width: 450px;
+  height: 335px;
+  min-width: 400px;
+  min-height: 200px;
+  max-height: 99vh;
+  max-width: 99vw;
+  opacity: 0.9;
+}
+
+#finder-entity-imgs {
+  display: inline-block;
+}
+
+#finder-entity-imgs > img {
+  height: 14px;
+  width: 14px;
+  margin-left: 3px;
+  margin-bottom: -2px;
+}
+
+#finder-filter-bar {
+  position: absolute;
+  top: 23px;
+  left: 2px;
+  width: calc(50% - 4px);
+}
+
+#finder-filter-text {
+  max-height: 16px;
+  width: calc(100% - 1px);
+  font-size: 12px;
+}
+
+#finder-scroll-area {
+  position: absolute;
+  top: 43px;
+  left: 2px;
+  width: calc(50% - 4px);
+  height: calc(100% - 62px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+img.finder {
+  height: 14px;
+  width: 14px;
+  margin-right: 2px;
+  margin-bottom: -2px;
+}
+
+#finder-status {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: 50%;
+}
+
+#finder-copy-btn {
+  position: absolute;
+  height: 16px;
+  width: 16px;
+  bottom: 1px;
+  right: calc(50% + 1px);
+  display: none; /* NOTE: button is initially invisible */
+}
+
+#finder-separator {
+  position: absolute;
+  top: 22px;
+  left: calc(50%);
+  height: calc(100% - 24px);
+  width: 3px;
+  border-left: 1.5px Silver ridge;
+}
+
+#finder-item-header {
+  position: absolute;
+  top: 23px;
+  left: calc(50% + 4px);
+  width: calc(50% - 6px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#finder-item-scroll-area {
+  position: absolute;
+  top: 43px;
+  left: calc(50% + 4px);
+  width: calc(50% - 6px);
+  height: calc(50% - 20px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+#finder-expression-hdr {
+  position: absolute;
+  top: calc(50% + 23px);  
+  left: calc(50% + 4px);
+}
+
+#finder-expression-scroll-area {
+  position: absolute;
+  top: calc(50% + 38px);
+  left: calc(50% + 4px);
+  width: calc(50% - 6px);
+  height: calc(50% - 48px);
+  overflow-y: auto;
+  border-top: 1px solid Silver;
+}
+
+
+/* the MONITOR DIALOG displays solver progress and messages */
+#monitor-dlg {
+  display: none;
+  z-index: 35;
+  margin: 0;
+  width: 680px;
+  height: 250px;
+  min-width: 250px;
+  min-height: 150px;
+  max-height: 99vh;
+  max-width: 99vw;
+}
+
+#monitor-tabs {
+  width: calc(100% - 5px);
+}
+
+#monitor-clear-btn {
+  color: #603000;
+  background-color: white;
+  border: 1px solid #603000;
+  box-shadow: inset #ffd0b0 0 0 8px 2px; 
+}
+  
+#monitor-clear-btn:hover {
+  box-shadow: inset #f0c0a0 0 0 11px 2px; 
+}
+
+#monitor-msg,
+#monitor-vbl,
+#monitor-eqs,
+#monitor-trc {
+  margin: 2px;
+  padding-top: 3px;
+  width: calc(100% - 5px);
+  height: calc(100% - 64px);
+  font: 12px monospace;
+  border: 1px solid Black;
+}
+
+#monitor-blocks {
+  position: absolute;
+  bottom: 4px;
+  left: 2px;
+}
+
+#monitor-timer {
+  position: absolute;
+  bottom: 4px;
+  left: 64px;
+  min-width: 43px;
+  text-align: right;
+}
+
+#monitor-progress {
+  position: absolute;
+  bottom: 4px;
+  left: 110px;
+  height: 10px;
+  border: 1px solid #dadada;
+  border-radius: 5px;
+  width: calc(100% - 140px);
+}
+
+#monitor-progress-bar {
+  height: 100%;
+  width: 0%;
+  box-shadow: inset 0 0 5px 0px #006000;
+  border-radius: 5px;
+}
+
+div.progress-block {
+  background-color: rgba(0, 224, 0, 0.55);
+  height: 9px;
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 0.5px;
+  cursor: pointer;
+}
+
+div.progress-block:hover {
+  box-shadow: inset 0 0 0 1.8px #404040;
+}
+
+div.progress-block:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+div.progress-block:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+div.progress-block:first-child:last-child {
+  border-radius: 5px;
+}
+
+div.even-pb {
+  filter: brightness(120%);
+}
+
+div.sel-pb {
+  filter: saturate(15%) brightness(50%) contrast(150%);
+}
+
+div.error-pb {
+  background-color: rgba(210, 0, 0, 0.7);
+  min-width: 1%;
+}
+
+/* tab panes */
+/* NOTE: tabs appear "button style" to look the same across browsers */
+div.tabs {
+  margin: 3px 2px -1px 2px;
+}
+
+div.tab {
+  color: gray;
+  border: 1px solid gray;
+  border-radius: 4px;
+  display: inline-block;
+  padding-left: 2px;
+  padding-right: 2px;
+  margin-bottom: 2px;
+  cursor: pointer;
+}
+
+div.tab:hover {
+  background-color: #fefafc;
+}
+
+div.sel-tab {
+  color: Black;
+  background-color: white;
+  border: 1px solid Black;
+  box-shadow: inset #bfc0e2 0 0 7px 2px; 
+}
+
+/* the CHANNEL DIALOG configures and activates the receiver */
+#channel-dlg {
+  width: 258px;
+  height: 102px;  
+}
+
+#channel-path,
+#channel-callback {
+  width: 250px;
+  font-size: 12px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+/* the DOCUMENTATION DIALOG displays comments and Linny-R reference */
+#documentation-dlg {
+  display: none;
+  z-index: 150; /* should be highest of all dialogs (even modal ones) */
+  margin: 0;
+  width: 395px;
+  height: 195px;
+  min-width: 340px;
+  min-height: 150px;
+  max-height: 99vh;
+  max-width: 99vw;
+  opacity: 0.9;
+}
+
+#docu-item-title {
+  display: inline-block;
+  max-width: calc(100% - 22px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#docu-container {
+  margin: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 45px);
+}
+
+#docu-viewer {
+  height: 100%;
+  overflow-y: auto;
+  font-family: serif;
+  font-size: 10pt;
+  background-color: rgba(251, 253, 254, 0.5);
+}
+
+#docu-viewer p {
+  margin: 0 0 3px 0;
+}
+
+#docu-viewer h1 {
+  font-size: 160%;
+  margin: 0 0 7px 0;
+}
+
+#docu-viewer h2 {
+  font-size: 130%;
+  margin: 0 0 5px 0;
+}
+
+#docu-viewer h3 {
+  font-size: 110%;
+  margin: 0 0 3px 0;
+}
+
+#docu-viewer ins {
+  color: Blue;
+}
+
+#docu-viewer del {
+  color: Red;
+}
+
+#docu-viewer cite {
+  font-style: normal;
+  background-color: Yellow;
+}
+
+#docu-viewer ul {
+  padding-left: 14px;
+  margin: 6px 0;
+}
+
+#docu-viewer ol {
+  padding-left: 21px;
+  margin: 6px 0;
+}
+
+#docu-viewer span.dsx {
+  margin-left: 6px;
+  font-size: 10pt;
+  font-family: monospace;
+  white-space: nowrap;
+}
+
+td.markup {
+  width: 50%;
+  font-size: 8.5pt;
+  font-family: monospace;
+  vertical-align: top;
+  padding-top: 5px;
+  border-top: 1px dashed Silver;
+}
+
+td.markdown {
+  width: calc(50% - 8px);
+  padding-left: 8px;
+  padding-top: 3px;
+  vertical-align: top;
+  border-top: 1px dashed Silver;
+}
+
+#docu-editor {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+
+#docu-edit-btn {
+  position: absolute;
+  left: 1px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+}
+
+#docu-model-info-btn {
+  position: absolute;
+  left: 30px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+}
+
+#docu-copy-btn {
+  position: absolute;
+  left: 50px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+}
+
+#compare-btn {
+  position: absolute;
+  left: 70px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+}
+
+#docu-save-btn {
+  position: absolute;
+  left: 1px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+  display: none;
+}
+
+#docu-cancel-btn {
+  position: absolute;
+  left: 20px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+  filter: brightness(85%);
+  display: none;
+}
+
+#docu-info-btn {
+  position: absolute;
+  left: 40px;
+  bottom: 0.5px;
+  width: 16.5px;
+  height: 16.5px;
+  display: none;
+}
+
+#docu-resume-btn {
+  position: absolute;
+  left: 2px;
+  bottom: 1px;
+  width: 15px;
+  height: 15px;
+  display: none;
+}
+
+#docu-symbols {
+  font-size: 10px;
+  position: absolute;
+  right: 20px;
+  bottom: 2px;  
+}
+
+div.docu-sym {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 3px;
+  min-width: 11px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+div.docu-sym:hover {
+  background-color: #bfc0e2;
+}
+
+#docu-message-hint {
+  font-size: 10px;
+  font-style: italic;
+  position: absolute;
+  right: 20px;
+  bottom: 3px;
+}
+
+/* the CALL STACK modal displays the VM call stack */
+#call-stack-dlg {
+  width: 300px;
+  height: 250px;
+}
+
+#call-stack-error {
+  display: inline-block;
+}
+
+#call-stack-table {
+  width: calc(100% - 9px);
+  height: calc(100% - 26px);
+  margin: 2px;
+  padding-left: 4px;
+  border: solid 1px Silver;
+  background-color: White;
+  overflow: auto;
+}
+
+div.call-stack-vbl {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* cursor: pointer; */
+}
+
+/*
+div.call-stack-vbl:hover {
+  background-color: #f8f0f4;
+}
+*/
+
+div.call-stack-expr {
+  font-family: monospace;
+  font-size: 12px;
+  overflow-x: hidden;
+  overflow-y: auto;  
+}
+
+/* the CHECK UPDATE modal asks for permission to update the software */
+#check-update-dlg {
+  width: 245px;
+  height: 150px;
+}
+
+#confirm-delete-from-repo-msg,
+#check-update-msg {
+  width: calc(100% - 8px);
+  height: calc(100% - 55px);
+  margin: 3px;
+  overflow: auto;
+}
+
+#confirm-move-buttons,
+#confirm-delete-from-repo-buttons,
+#check-update-buttons {
+  width: calc(100% - 8px);
+  height: 23px;
+  font-size: 16px;
+}
+
+#confirm-move-buttons > img,
+#confirm-delete-from-repo-buttons > img,
+#check-update-buttons > img,
+#check-update-restart-btn > img,
+#check-update-reload-btn > img {
+  float: none;
+  height: 23px;
+  width: 23px;
+  vertical-align: middle;
+}
+
+/* Linny-R logo icon animation in 60 frames */
+
+#fr00 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.05s;
+}
+
+#fr01 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.1s;
+}
+
+#fr02 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.15s;
+}
+
+#fr03 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.2s;
+}
+
+#fr04 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.25s;
+}
+
+#fr05 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.3s;
+}
+
+#fr06 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.35s;
+}
+
+#fr07 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.4s;
+}
+
+#fr08 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.45s;
+}
+
+#fr09 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.5s;
+}
+
+#fr10 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.55s;
+}
+
+#fr11 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.6s;
+}
+
+#fr12 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.65s;
+}
+
+#fr13 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.7s;
+}
+
+#fr14 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.75s;
+}
+
+#fr15 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.8s;
+}
+
+#fr16 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.85s;
+}
+
+#fr17 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.9s;
+}
+
+#fr18 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 0.95s;
+}
+
+#fr19 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1s;
+}
+
+#fr20 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.05s;
+}
+
+#fr21 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.1s;
+}
+
+#fr22 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.15s;
+}
+
+#fr23 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.2s;
+}
+
+#fr24 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.25s;
+}
+
+#fr25 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.3s;
+}
+
+#fr26 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.35s;
+}
+
+#fr27 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.4s;
+}
+
+#fr28 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.45s;
+}
+
+#fr29 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.5s;
+}
+
+#fr30 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.55s;
+}
+
+#fr31 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.6s;
+}
+
+#fr32 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.65s;
+}
+
+#fr33 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.7s;
+}
+
+#fr34 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.75s;
+}
+
+#fr35 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.8s;
+}
+
+#fr36 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.85s;
+}
+
+#fr37 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.9s;
+}
+
+#fr38 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 1.95s;
+}
+
+#fr39 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2s;
+}
+
+#fr40 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.05s;
+}
+
+#fr41 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.1s;
+}
+
+#fr42 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.15s;
+}
+
+#fr43 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.2s;
+}
+
+#fr44 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.25s;
+}
+
+#fr45 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.3s;
+}
+
+#fr46 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.35s;
+}
+
+#fr47 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.4s;
+}
+
+#fr48 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.45s;
+}
+
+#fr49 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.5s;
+}
+
+#fr50 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.55s;
+}
+
+#fr51 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.6s;
+}
+
+#fr52 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.65s;
+}
+
+#fr53 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.7s;
+}
+
+#fr54 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.75s;
+}
+
+#fr55 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.8s;
+}
+
+#fr56 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.85s;
+}
+
+#fr57 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.9s;
+}
+
+#fr58 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 2.95s;
+}
+
+#fr59 {
+  visibility: hidden;
+  animation: 3s show infinite;
+  animation-delay: 3s;
+}
+
+@keyframes show {
+  0% { visibility: visible;}
+  1.666% { visibility: visible; }
+  1.667% { visibility: hidden; }
+  100% { visibility: hidden; }
+}
+