/*
 *
 */

/* Document
 *
 * 1. Change from `box-sizing: content-box' to 'border-box'.
 * 2. Change the default font family.
 * 3. Change the default font-size.
 * 4. Correct the line height.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 14px;               /* 14px minimum, 18px maximum */
    line-height: 1.15;
}

@media screen and (min-width: 720px) {
    html {font-size: calc(14px + 4 * ((100vw - 720px) / (960 - 720))); } }
@media screen and (min-width: 960px) {
    html {font-size: 18px; } }     /* maximum font-size */
@media screen and (max-width: 640px) {
    .hidden {display: none;} }

@media screen and (max-width: 45rem) {
    .col--3 .units {display: none;}
    .col--4 .units {display: none;}
    .col--5 .units {display: none;}
    .col--6 .units {display: none;} }


/* Body
 *
 * 1. Minimize margin. Set minimum and maximum width.
 * 2. As a best practice, apply default and background-colors.
 * 3. Set an explicit initial text-align value.
 * 4. Font-family, font-size, line-height inherited from document.
*/
body {
    margin: 0.5rem;
    min-width: 480px; 
    max-width: 1024px;
    font-weight: normal;
    color: #000000;
    background-color: #f1faf8;
    text-align: left;
 }
 
strong {font-weight: bold; }

small {font-size: 80%; }

/* Prevent `sub` and `sup` elements from affecting the line height */
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }

/* Tables */

table {margin: 0;
    border-collapse: collapse; 
    table-layout: fixed;
}

tr.top > td, tr.top > th {
    padding-top: 8px;
}
tr.shim td {
    padding-bottom: 12px;
}

td {padding: 0 0 4px 4px;
}
/* left-hand column always right aligned */
td:first-child {                   
    text-align: right;
}
/* except timeline header should always be left aligned */
.timeline--header td {
    text-align: left;
}
.timeline--header {
    border: solid black thin;
    background-color: #fffbf2;
}
/* Forms
 * 1. labels currently used minimally, but check them
 * 2. button radius could be tweaked for Porel
*/
label {
  /* Allow labels to use `margin` for spacing. */
  display: inline-block;
/*  margin-bottom: 0;  */  /* what is the best value for this */
}

button {
    border: solid black thin;
    border-radius: 7px;   /* make this the "Porel" brand */
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size:  0.8rem; 
    line-height: inherit;
}

input[type='checkbox'] {
    height: 0.9rem
}

textarea {
    overflow: auto; /* Remove the default vertical scrollbar in IE. */
    /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
    resize: vertical;
}

/* *************************************************************************
 * colors in one place for easy access
 */
 body {
    color: #000000;
    background-color: #f1faf8;
 }

.sheet {background-color: #fff8f0;
    border: solid black thin;
}
.sheet .sheet {background-color: #fff6ec;
} 
.tab {background-color: #f2f2f2; }

.tab--active {border: solid black thin;
    background-color: #fff8f0;
    color: #000099;
    border-bottom: solid #fff8f0 thin;
}
.sheet .tab--active {background-color: #fff6ec;
    border-bottom: solid #f0f8ff thin;
}
.option--active {background-color: #fffdbb;
    color: black;
}
.col--3, .col--4, .col--5, .col--6 {
    color: #666666; 
}
.sheet--totals .col--3, .sheet--totals .col--5 {
        background-color: #fff2e2;
        border-left: solid #eeddcc thin;
        border-right: solid #eeddcc thin;
}
[readonly] {background-color: #f2e4d2; }   /* ":read-only" selector not supported by IE */

/* ************************************************************************* */

/* more table styles */
.full {width: 100%; }
.bar--front table {margin-bottom: -6px; }
.bar--front span {border: none;
    background-color: inherit;
    font-size: inherit; }


/* now for sheet styles */
.sheet {
    border: solid black thin;
    z-index: 1;
    margin-top: -1px;
    overflow: hidden; }

.sheet .sheet {margin: -1px 8px 8px 8px; }
.sheet .bar {margin-left: 12px; }

.tab {border-radius: 5px 5px 0 0;
    text-align: left;
    font-size: 1.2rem;
    border: solid #999999 1px;
    z-index: 2;
    }
.tab--hide {display: none; }
.tab:focus {outline: none; }
.tab--active {border: solid #000000 1px;
    color: #000099; text-align: center; font-size: 1.4rem;
    border-bottom: solid #fff8f0 1px;
    }
.bar--front .tab {font-size: 1.2rem; 
    font-weight: bold; 
    line-height: 1.6rem;
    width: 100%;}
.bar--front .tab--active {font-size: 1.4rem;}



.col--1 {width: 10em;}
.col--2 {width: 9em; }
.col--3 .units,
    .col--4 .units,
    .col--5 .units,
    .col--6 .units {
        font-size: 0.8rem;}

.history .col--2 {width: 5.8em; }

.sheet--tpn .col--1 {width: 9.4em; }
.sheet--tpn .col--2 {width: 8.6em; }
.sheet--tpn .col--3 {width: 11.2em; }
.sheet--tpn .col--4 {width: 9.1em; }
.sheet--tpn .col--5 {width: 10.5em; }



.numeric {width: 2.6em;
    text-align: right; padding: 2px;
    border: solid black 1px;
    border-radius: 0.3em;
}
.name {width: 5.9em; }
.date {width: 5.6em; }
.numeric--wt {width: 3.6em; }
.numeric--sm {width: 1.6em; }
input[data-list] {width: 12em; }

.panel--side table {margin: 0; }
.panel--side td {width: 50%;
    padding:  0 4px 2px 4px; }

.panel--formulation {
    border: double black 3px; float: left;
    width: 24rem; margin-left: 1.2rem;
}
.panel--formulation > div {padding: 0.8em; }
/* .cell--1 {width: 8rem; text-align: right; } */
.timeline--on {
    border: solid black 1px;
    background-color: #ffeecc;
}
.timeline--off {
    background-color: #eeeeee;
}
div[data-timeline] {background-color: #ffffff; 
    color: black; 
    border: solid black thin; 
    padding: 4px; margin: 8px;}
div[data-timeline] table {width: 100%; }

.directions .numeric {width: 1.6rem; }
.directions .numeric--sm {width: 1.2rem; }
.directions .bar {margin-left: 0; }


.panel--side {display: inline-block; }
/*
@media screen and (max-width: 48rem) {
    .panel--side {display: block; }
}
*/
.bar--front span {pointer-events: none; }
@media screen and (max-width: 32rem) {
    .bar--front span {display: none;} }

.disabled {visibility: hidden; }

td.grid, td.gridHeader {border: solid black thin;
    width: 4em;
    height: 1.4em;
    text-align: right; padding-right: 4px;
}
td.gridHeader {background-color: white; text-align: center; }