/* Update default theme. */
:root {
  --color-dead-load: #8a8686;
  --color-live-load: #46a3ff;
  --color-snow-load: #bfbf10;  
  --color-wind-load: #00d235;
}

#app-tab-title { border: none; }
#app-frame { border: none; }
[data-tab] { border: none; }

h3 { margin: 0; }
table { 
  width: 100%;
  border-collapse: collapse;
}
table th { text-align: left; }
thead tr {
  height: 2rem;
  color: var(--color-ui-text);
  background-color: var(--color-main);
  z-index: 1;
}
th svg:not(.selected) { fill: white; }
.align-right { text-align: right; }

img.action { cursor: pointer; }

.dof-inputs .form-row > .checkbox {
  flex-direction: row;
  justify-content: flex-start;
  align-items: end;
  gap: 0.5rem;
}

.dof-inputs .form-row > .checkbox input[type="checkbox"] {
  flex-shrink: 0;
  flex-grow: 0;
}

.columns { display: flex; }
.columns > div { flex: 1 1 auto; }

.center-line {
  display: flex;
  align-items: center;
}

.panel {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.unit { margin-left: 8px; }
.error { color: var(--color-dof-error); }

.tooltip-300 {
  width: 300px; 
  white-space: normal;
}

[data-section="parameters"] img[data-parameters="image"] { 
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.fastener-info {
  display: flex;
  align-items: center;
}

.fastener-info img { 
  max-height: 150px; 
  margin-right: 1rem;
}

.fastener-info [data-field="manufacturer"] { font-weight: bold; }

/* DESIGN */
.buttons { display: flex; }
.buttons > button { flex: 1 1 auto; }

.center { text-align: center; }
.result-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  min-width: 2.5rem;
  color: white;
  background-color: #b4b4b4;
  font-weight: bold;
  border-radius: 4px;
  transition: all 300ms ease-in;
}

.result-summary[data-status="failure"] { background-color: #df2121; }
.result-summary[data-status="success"] { background-color: #35bf18; }

.warning-text {
  color: #676767;
  font-weight: bold; font-size: 0.5rem;
  text-transform: uppercase;
  margin-top: 1rem;
}

[data-section="profile-image"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

/* PROFILES */
.tree-view {
  display: flex;  
  height: 100%;
}

/* RESULTS */
#tabResults {
  display: flex;
  flex-direction: column;
}

#results {
  max-height: 80vh;
  overflow-y: auto;
}

/* Enforce that sorting symbol gets click instead of sub elements. */
[data-ascending] { cursor: pointer; }
[data-ascending] > * { pointer-events: none; }

[data-section="setup"] textarea { height: 200px; }

[data-figure] { text-align: center; }
.mobile [data-figure] svg { max-height: var(--max-height, 100%); }

svg.figure path {
  stroke: #333;
  stroke-width: 2px;
  fill: none;
}

svg line.fastener {
  stroke: white;
  stroke-dasharray: 3 4;
  stroke-width: 2px;
}

svg.figure text { 
  font-size: 16px;
  text-anchor: middle; 
}

[data-figure="purlin"] svg.figure text { font-size: 12px; }
svg.figure text.start { text-anchor: start; }

svg .point path {
  stroke-width: 3px;
  /*stroke: #d68011;*/
  stroke: #333;
}

svg .structure rect { fill: #025099; }
svg .supportSheet { fill: #025099; }

svg path[data-load="deadLoad"] { fill: var(--color-dead-load); }
svg path[data-load="liveLoad"] { fill: var(--color-live-load); }
svg path[data-load="snowLoad"] { fill: var(--color-snow-load); }
svg path[data-load="windLoad"] { fill: var(--color-wind-load); }

svg .index circle {
  stroke: #888;
  fill: none;
}

@media screen and (min-width: 69em) {
  div.dof-main-box { height: 700px; }
  div.dof-inside-box { height: 640px; }
  div.maximize-button { min-height: 700px; }   
}