/*
Date            By       Version Reason
2021-03-01      PA2EVR   2.3     Translation from Opticoil 2.2 desktop app to web based version
*/

html { /*Font family for all HTML in website unless overridden by later style*/
  font-family: Arial;
}

div { /* for debugging */
  /*border: 1px solid black; */
}

h2, h4 { 
  margin: 0px;
}

body {
  overflow: hidden;
  margin-right: 5px;
}

.scaleable-wrapper {
  width: 1340px;
}

header, footer, .maindiv {
  display: flex;
  flex-flow: row nowrap;
  background-color: #f0e5e5;
  margin: 10px;
  flex-basis: auto;
}

header, footer {
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

footer .disclaimer{
  font-size: small;
  /*text-wrap: normal;*/
}

.maindiv {
  align-items: flex-start;
}

.measure {
  /*this div wraps tightly around its elements, and serves to measure its width*/
  display: flex;
  flex-flow: row nowrap;
  clear: both;
}

.row, .row_small {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 30px;
}

.text_right {
  text-align: right;
}

.text_large {
  font-size: larger;
}
table{
  border-collapse:collapse;
}

td {
  height: 30px;
  padding: 3px;
  /*border: 1px solid black;*/
}

.col1, .col7, .col9, .col10 {
  min-width: 80px;
}

.col5, .col9, .col10, .col11 {
  min-width: 30px;
}

.col2 {
  min-width: 110px;
}

.col3, .col4, .col6, .col8 {
  min-width: 70px;
}

/*this is the main section. It contains 2 <section> rows. */
.box_inputs_column {
  display: flex;
  flex-direction: column;
  min-width: 790px;
}

.box_outputs_column {
  display: flex;
  flex-direction: column;
  min-width: 720px;
}

.box_group { 
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  margin: 10px;
}

.box_group_split {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  padding-right: 0;
}

.coilpic {
  border: 2px solid black;
  margin: 10px;
  width: 500px;
}

.graph {
  border: 2px solid black;
  margin: 10px;
  position: relative;
}

.box_header { /* the small header on each box */
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  left: 10px;
  top: -11px;
  width: max-content;
  background-color: #f0e5e5;
}

.box_row {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  align-items: center;
}

input, .selbox {
  text-align: center;
  height: 26px;
  width: 60px;
  background-color: yellow;
  padding: 0;
  margin-right: 3px;
}

  input[readonly] {
    background-color: aqua;
  }

  input.interact {
    background-color: lightyellow;
  }

.selbox {
  height: 28px;
  width: 62px;
  -webkit-appearance: menulist-button;
}

  .selbox._large {
    height: 28px;
    width: 100px;
    background-color: yellow;
    font-family: Arial Narrow;
    text-align: left;
  }

#LDmax {
  position: absolute;
  right: 20px;
  bottom: 1px;
}



/* The slider itself */
.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  width: 310px;             /* Full-width */
  height: 10px;             /* Specified height */
  background: #d3d3d3;      /* Grey background */
  opacity: 0.7;             /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1;             /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 20px;              /* Set a specific slider handle width */
    height: 25px;             /* Slider handle height */
    background: yellow;       /* Green background */
    cursor: pointer;          /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
    width: 10px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background:yellow; /* Green background  #4CAF50*/
    cursor: pointer; /* Cursor on hover */
  }