/* Style for program 1212. */

h1.wall-selector {
  position: relative;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.1;
  color: #0076bd;
  margin-bottom: 1.5em;
  left: 1em;
  top: 0.5em;
}

.menu-row {
  display: flex;
  width: 80%;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;  
}

.select-label {
  display: inline-block;
  font-weight: bold; 
  margin-bottom: 5px;
}

.menu-select {  
  max-height: 300px;      
  color: #6d6e71;
  background-color: white;  
  outline: none;    
  display: block;
  height: 33px;
  padding: 6px 12px;
  font-size: 15px;
  line-height: 1.42857;  
  border: 1px solid #d0d0d0;
  border-radius: 4px;
}

.menu-select-width { width: 200px; }

.button-order { cursor: pointer; }
.button-order:hover { color: #ebf21d; }

.current-page { 
  color: black;
  background-color: #f0f0f0;
}

span.designation { 
  color: #7cb346;
  text-decoration: none;
  background: url('../img/arrow-green.png') no-repeat left 1px;
  background-size: 13px 14px;
  padding-left: 20px;
  cursor: pointer;
}

span.designation:hover {
  color: #2c5005;
  text-decoration: underline;
}

#menu {
  width: 99%;
  background-color: #f0f0f0;
  padding-bottom: 1em;
  box-shadow: 0px 2px 0px 0px #d3d3d4;
  border-radius: 2px;
  margin: 0 auto 43px auto;
}

#results {  
  background-color: #dfe7ec;
  margin: 0 auto;
}

#table-results { 
  width: 100%;
  font-size: 14px;  
  border-collapse: collapse;
}

#table-results th {
  color: white;
  font-size: 12px;
  background: #0076bd;
  padding: 1.5em 0 0.5em 0;
}

#table-results td { 
  text-align: center;
  padding: 10px 0;
}

#table-results tr:nth-child(odd) { background-color: #ebeeef; }
#table-results tr:nth-child(even) { background-color: #dfe7ec; }

#table-results .column-designation { 
  text-align: left; 
  padding-left: 20px;
}

.column-designation { width: 40%; }
.column-audio { width: 10%; }
.column-image { width: 20%; }
.column-fire { width: 10%; }
.column-height { width: 20%; }
.column-price { width: 10%; }

#pagination {
  display: none;
  position: relative;
  width: 80%;
  align-items: center;
  min-height: 41px;
  background-color: #7cb346;
  margin: 1em auto;  
  text-align: center;
}

#pagination-menu { padding-right: 10px; }

#pagination-menu label { 
  display: inline-block;
  color: white;
  font-weight: bold;
}

#list-pagination {
  display: inline-block;
  max-width: 90%;
  color: white;
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

#list-pagination li {
  box-sizing: border-box;
  min-width: 50px;
  float: left;
  padding: 10px 16px;
  border: 1px solid #9fc579;
}

#list-pagination li:hover { 
  background-color: #6e9e3f; 
  cursor: pointer;
}

@media screen and (min-width: 32em) {
  .menu-row { 
    flex-direction: row; 
    width: 100%;
    margin: 0 0 2em 0;
  }
}

/* Controls flow of the page. With wider screens, place container in same row.*/
@media screen and (min-width: 69em) {
  div.dof-main-box { 
    flex-wrap: nowrap; 
    height: 825px;   
  }
  
  div.dof-inside-box { height: 765px; }
  
  div.maximize-button {    
    max-width: 1em;
    min-height: 825px;
  }
}

/* DATABASE CSS */

#product-image { border-bottom: 3px solid #c1c1c1; }
#product-summary { 
  margin-bottom: 1em; 
  margin-top: 1em;
}

h2.system { background: url('../img/system.png') no-repeat left 1px; }
h2.specification { background: url('../img/specification.png') no-repeat left 1px; }

h2.system, h2.specification {  
  color: #0076bd;
  font-size: 21px;
  font-weight: 700;
  background-size: 33px 33px;
  line-height: 1.5;
  padding: 3px 0px 0px 40px;
}

table.product {
  width: 100%;
  background-color: #ebeeef;
  border-collapse: collapse;
  text-align: left;  
}

table.product th {
  color: white;
  background-color: #0076bd;
  border-bottom: 2px solid #f0f0f0;
  padding: 9px 20px 7px 20px;
  line-height: 1.42857;
}

table.product tr:nth-child(odd) { background-color: #dfe7ec; }
table.product tr:nth-child(even) { background-color: #ebeeef; }
table.product th:first-of-type { width: 50%; }
#table-system th:first-of-type { width: 90%; }

table.product td {
  padding: 9px 20px 7px 20px;
}

.arrow-link { width: 20px; }

/* Fix for IE11 (which aligns these automaticall on center). */
thead tr th { text-align: left; }

/* PDF OPTIONS */
#print-options {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  min-width: 400px;
  background-color: white;
  transform: translate(-50%, -50%);
  padding: 12px;
  border: 2px solid #83b820;
  border-radius: 3px;
}

.print-option {
  display: inline-block;
  width: 30%;  
}

.print-option + input { width: 65%; }

svg.product {
  width: 100%;
  min-width: 300px;
  height: auto;
}

svg line {
  stroke: black; 
  stroke-width: 1px;
}

svg text {
  font-size: 45px;
}

/* UUDET */

svg .plate {
  stroke: #3a3a3a;
  fill: #e4dfcc;
}

svg .plate-P { fill: #ffe1eb; }

svg .carcass { stroke-width: 2px; }

svg .carcass-gt { 
  fill: #af6f1c; 
  stroke: black;
}

svg .carcass-shape { 
  fill: none; 
  stroke: black;
}

svg .insulator {
  stroke: #fde45e;
  fill: #fde45e;
}

svg .double-gap { stroke-width: 2px; }

svg .side-line {
  stroke-width: 1px;
  stroke-dasharray: 20, 20;
}

svg .descriptor-circle {
  fill: white;
  stroke: #a3a3a3;
  stroke-width: 2px;
}

svg .descriptor-line {
  stroke: #a3a3a3;
  stroke-width: 3px;
}