:root {
  --deep-blue: #036;
  --dark-blue: #047;
  --medium-blue: #069;
  --light-blue: #27a;
  --gray-blue: #9ac;
  --border-base: 1px solid var(--medium-blue);
  --border-dark: 1px solid var(--deep-blue);
  --border-light: 1px solid var(--gray-blue);
  --bg-medium: #bdf;
  --bg-light: #def;
  --bg-pale: #eef7ff;
  --bg-pale-warning: #fffff8;
  --selected-option: #00557f;
  --warning: darkred;
  --gray60: #999;
}

body { font-size: 13px; }

.smalllabel { font-size: 11px; }

/* Sizes for various controls: */
.slider_xxsmall { width: 3em; }
.slider_xsmall { width: 4.5em; }
.slider_small { width: 6em; }
.slider_medium { width: 9.5em; }

.number_10s { width: 2.5em; }
.number_100s { width: 3em; }
.number_10000s { width: 4.25em; }

.grid_entire_row {
  grid-column: 1 / -1;
}

.grid_sidebar_right {
  display: grid;
  grid-template-columns: 1fr fit-content(15ch);
}

/* Hover effects for slider value display: */
.fade-init {
  visibility: hidden;
  opacity: 0;
}

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s;
}

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s;
}

/* This is required in order to absolute-position anything inside an element: */
.output_container { position: relative; }

output {
  position: absolute;
  top: -1.5em;
  padding: 0.15em 0.1em;
  border-radius: 0.6em;
  text-align: center;
  background-color: var(--bg-pale);
  color: var(--selected-option);
  border: var(--border-dark);
}

/*
The output 'width' here refers to the size of the value which might be
shown, not the size of the slider.
The 'left' value approximates a good place to place the tooltip.
- Typically the label is included in the container width.
*/
.output_10s { width: 2em; left: 45%; }
.output_medium { width: 2.5em; left: 56%; }
.output_medium_long { width: 2.5em; left: 66%; }
.output_wide { width: 3.3em; left: 52%; }

.font_sans { font-family: sans-serif; }
.font_serif { font-family: serif; }
.font_mono { font-family: monospace; }

.font_lighter { font-weight: lighter; }
.font_bolder { font-weight: bolder; }

.text_right { text-align: right; }
.text_left { text-align: left; }
.text_center { text-align: center; }

.hidden_under {
  opacity: 0; /* not gone, just not visible */
  z-index: -1; /* move under the regular UI */
  position: absolute; /* don't take up space in the visible layout */
}

/* START WEBKIT TWEAKS
   Make WebKit (Safari/Chrome) sliders a tiny bit more accessible:
   (Firefox doesn't have this issue.) */

/* 1. Replace the regular slider track with a color-customizable one: */
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background-color: #aaa;
}

/* 2. Align the 'thumb' with the revised slider track: */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -6px;
}

/* 3. When selected with the keyboard OR mouse, highlight the slider
      background with an accent color: */
input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:active::-webkit-slider-runnable-track {
  background-color: #000;
}

/* END WEBKIT TWEAKS */

[aria-disabled="true"] {
  opacity: 0.5;
}

.errormessage {
  background-color: #fed;
  width: fit-content;
  color: #600;
  border: 1px solid indianred;
  padding: 4px;
  margin: -1px 2px;
}

.okmessage {
  background-color: var(--bg-light);
  width: fit-content;
  color: var(--deep-blue);
  border: var(--border-base);
  padding: 4px;
  margin: 2px;
}

.importanttext {
  color: var(--warning);
  background-color: inherit;
  text-decoration: underline;
}

dfn {
  font-style: normal;
  border-bottom: 1px dashed;
}

.center_basic {
  /* centering, in 2014: :-\ */
  margin: 0 auto;
  display: table;
}

.center_para {
  margin: 0 auto 4px;
  display: table;
  padding-top: 4px;
  padding-bottom: 4px;
}

.indicator,
.float_right {
  float: right;
}

.left_checkbox {
  float: left;
  margin-right: 0.5em;
}

.right_checkbox {
  float: right;
  margin-left: 0.5em;
}

/* The textarea where the user is typing: */
#flows_in {
  border: var(--border-base);
  padding: 0.25em;
  margin: 0.25em;
  font-size: small;
  vertical-align: middle;
}

.form_elements {
  margin: 2px 3px 5px;
}

.form_elements1 {
  background-color: inherit;
  margin: 2px 3px 5px;
  padding: 2px 3px;
}

.form_elements2 {
  background-color: #ddf0ff;
  margin: 2px 3px 5px;
  padding: 2px 3px;
}

.form_elements3 {
  background-color: var(--bg-pale);
  border: var(--border-light);
  margin: 2px 3px 5px;
  padding: 3px 4px;
}

.form_box {
  border: var(--border-light);
  margin: 0.1em 0.2em;
  padding: 0.25em 0.4em;
}

/* for items which need leftward breathing room: */
.spaced_label,
.spaced_checkbox {
  margin-left: 0.8em;
}

.ui_head {
  padding: 3px 6px 2px;
  margin: 2px 0 0;
  color: white;
  text-align: left;
}

h2.ui_head {
  font-size: 15px;
  background-color: var(--dark-blue);
}

h2.ui_head:hover {
  background-color: var(--medium-blue);
}

h3.ui_head {
  font-size: 13px;
  background-color: #37b;
}

h3.ui_head:hover {
  background-color: #39d;
}

span.toggleable {
  background-color: var(--bg-pale);
  color: black;
  padding: 0.1em 0.2em;
  border: var(--border-light);
  border-radius: 0.3em;
  font-style: italic;
  vertical-align: middle;
}

span.toggleable:hover {
  color: var(--selected-option);
  cursor: pointer;
}

#imbalance_control {
  padding: 0.4em 0.5em;
  background-color: var(--bg-light);
  color: var(--deep-blue);
  border: var(--border-base);
  margin-top: 0.3em;
  width: fit-content;
}

.differencemessage {
  background-color: var(--bg-pale-warning);
  text-align: center;
  border: var(--border-base);
  padding: 0.3em;
}

.differencemessage table {
  border-spacing: 0.75em 0;
  border-collapse: separate;
}

.differencemessage table th {
  padding: 0.1em 0.2em 0;
  text-align: right;
  border-bottom: 1px solid var(--dark-blue);
}

.differencemessage table td {
  padding: 0.2em;
  text-align: right;
}

.differencemessage table td.nodename {
  text-align: left;
}

#messages_area {
  padding: 0.4em;
  text-align: center;
  background-color: var(--bg-light);
  color: var(--deep-blue);
  border: var(--border-base);
}

#messages h4 {
  margin: 0 0 0.2em;
  text-decoration: underline;
}

span.underline {
  border-bottom: var(--border-dark);
  display: inline-block;
  margin-bottom: 0.3em;
}

p.lastrow {
  border-top: var(--border-base);
  margin: 0.3em;
  padding: 0.1em;
}

.expandable_box {
  max-width: fit-content;
  min-width: 30em;
}

.form_chunk {
  color: #024;
  background-color: #fbfeff;
  margin: 0 3px 5px;
  padding: 2px;
  border: var(--border-light);
  border-width: 0 1px 1px;
}

p#chart {
  width: 600px;
  height: 500px;
  border: 1px dotted #666;
  margin: 0.4em auto;
}

.svg_background_default {
  background-color: white;
  background-image: none;
}

.svg_background_transparent {
  background-color: transparent;
  background-image: url("transparent_bg.png");
}

.node rect { cursor: move; }

output,
svg g#sankey_labels text,
svg g#sankey_labels rect {
  pointer-events: none;
}

/* Note on how curved links are drawn:
   A path is specified but no line ('fill') is drawn on it.
   The 'stroke' is all we are seeing, so that is what gets colored.
   The stroke styling is now done in the JS, not the overall CSS. */

td#other_entry {
  padding: 0 2px;
  background-color: #cce8ff;
  vertical-align: middle;
}

td#grapharea {
  padding: 0;
  margin: 0;
}

th#title {
  padding: 5px 10px;
  background-color: #8bc;
  font-size: large;
}

.download_link {
  margin-top: 8px;
}

.download_link a {
  background-color: #acf;
  border: var(--border-base);
  padding: 5px 8px;
}

#img_tag_hint {
  background-color: white;
  padding: 3px;
  margin: 3px;
  border: 1px dotted var(--gray60);
}

#svg_for_export {
  border: 1px solid #ccc;
  background: #f2f2f2;
  color: #666;
  overflow: auto;
  text-align: left;
  margin: auto;
  white-space: pre;
}

.separated_stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-content: space-between;
}

.top_center_self {
  place-self: start center;
  padding: 1em 0.2em;
}

.bottom_center_self {
  place-self: end center;
  padding: 1em 0.2em 0;
}

#download_central button,
.loadsave_button {
  background-color: var(--medium-blue);
  color: white;
  border-radius: 0.4em;
  border: var(--border-base);
  cursor: pointer;
  vertical-align: middle;
  padding: 0.25em 0.5em;
}

#download_central button:hover {
  background-color: var(--light-blue);
}

.loadsave_button {
  font-size: 13px;
  background-color: var(--dark-blue);
}

.loadsave_button:hover {
  background-color: var(--medium-blue);
}

.label_as_button {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}

input[type="file"]:focus + label {
  outline: 2px solid var(--medium-blue);
  outline: -webkit-focus-ring-color auto 5px;
}

button#save_as_svg {
  background-color: #304550;
  border-color: #1d3030;
}

button#save_as_svg:hover {
  background-color: #495961;
}

#example_diagrams {
  width: fit-content;
  background-color: #f3f4ff;
  border: var(--border-base);
  border-style: dotted;
  border-radius: 0.7em;
  margin: 0 auto 0.5em;
  padding: 0.25em 1em;
  box-shadow: 0.1em 0.1em 0.2em gray;
}

#example_diagrams h4 {
  margin-top: 0;
  margin-bottom: 0;
}

#example_diagrams button {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#replace_graph_warning {
  background-color: #ffa;
  color: var(--warning);
  margin: 0.2em 3em 0;
  padding: 0.3em;
  border-radius: 0.5em;
}

#replace_graph_yes {
  color: var(--warning);
}

#reset_moves_area {
  margin-left: 0.1em;
  margin-bottom: 0;
}

.callout_container {
  text-align: center;
  margin: 0.3em;
}

.callout {
  background-color: #e3ff9f;
  padding: 0.3em 1.5em;
  font-size: 90%;
  border-style: dotted;
  border-color: #6ae58b;
  border-width: 1px;
}

#color_themes tr td {
  vertical-align: baseline;
  padding: 1px 2px;
}

.theme_container {
  white-space: nowrap;
}

#highlight_fld_label {
  background-color: #fffc;
  padding: 0.25em 0.3em;
  border-radius: 0.5em;
}

/* Customize checkable things (radio & checkbox labels):
   Mnemonic: "ropt" = "radio option" */
.ropt,
.rnote {
  color: #293030;
}

input:checked ~ label.ropt,
.theme_container input:checked ~ * {
  color: var(--selected-option);
}

input[type=range]::-webkit-slider-thumb {
  background: #B97A2B
  ;
}