/* Style for program 1231. */
h2 {
  color: var(--color-main);
  display: flex;
  align-items: center;
}

h2 img, h2 svg {
  max-height: 2rem;
  margin-right: 1rem;
}

table { 
  width: 100%; 
  border-collapse: collapse;
}

thead tr, [data-header="table"] {  
  height: 2rem;
  color: var(--color-ui-text);
  background-color: var(--color-main);  
}

.DOF_panel thead tr, [data-header="table"] {  
  color: unset;
  background-color: unset;
}

thead.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

th { 
  text-align: left;
  padding-left: 1em;
  padding-right: 1em;
}

td { 
  padding-left: 1em;
  padding-right: 1em;
}

button.action {
  background-color: unset;
  border: none;
  padding: 0;
}

button.action svg { fill: var(--color-main); }
button.action:hover { background-color: #4f4a4a33; }

[data-ascending] {
  fill: white;
  cursor: pointer; 
}
[data-ascending] > * { pointer-events: none; }
[data-ascending].selected { fill: #333; }

[data-tab="tabFilter"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 90vh;
}

[data-table="results"] .action {  
  color: var(--color-main);
  cursor: pointer;
}

[data-table="results"] tr { height: 1.5rem; }

tbody.animate tr {
  opacity: 0;
  animation: fade-in 250ms ease-out calc(var(--delay, 0) * 1ms) normal forwards;  
}

@keyframes fade-in {
  from {}
  to { opacity: 1; }
}

tr.selected { background-color: var(--color-input-field); }
td.action {
  display: table-cell;
  transition: all 100ms ease-in; 
}
td.action:hover {
  color: var(--color-ui-text);
  background-color: var(--color-main);
}

span.pre { position: absolute; }
input.pre, select.pre { padding-left: 1rem; }

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dof-drawer > div { padding: 1rem; }
#figure { margin-top: 1rem; }
#figure { height: 80vh; }
#results {
  flex: 1 1 auto;
  overflow-y: auto; 
}

[data-tab="tabResults"] table { margin-bottom: 2rem; }

svg.info { width: 30px; }
svg.info rect { fill: white; }
svg.info circle {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

[data-tab="tabFigure"] svg {
  width: 100%;
  height: 100%;
}

svg.bars { max-height: calc(100vh/2 - 60px); }

svg.bars .labelX {
  text-anchor: middle;
  dominant-baseline: central;
}

svg.bars .labelY {
  text-anchor: end;
  dominant-baseline: central;
}