body{
  background-color: #FFF;
}

nav{
  float: right;
  margin: .5em 0;
}

nav ul{
  margin-bottom: 0;
}

nav ul li{
  float: left;
  width: 2em;
  margin: 0 0 0 .5em;
  list-style-type: none;
}

a{
  text-decoration: none;
}

footer{
  border-top: 1px solid #D1D1D1;
  padding: 2rem 0;
}

.signature-box{
  display: none;
}

.icon-container{ 
  color: #1EAEDB; 
  display: inline-block;
  vertical-align: middle; /* https://codepen.io/edge0703/pen/iHJuA */
  line-height: normal;
}

.button.button-primary .icon-container{ 
  color: #FFF; 
}

.width-2rem{
  width: 2rem; 
}
.width-2rem svg.icon{
  stroke-width: 2;
}

.width-3rem{
  width: 3rem; 
}

.width-4rem{
  width: 4rem; 
}

.width-6rem{
  width: 6rem; 
}

.width-8rem{
  width: 8rem; 
}

.message {
  padding: 10px;
  margin-bottom: 1rem;
  border-radius: 4px;  
}
.info {
  color: #1EAEDB;
}
a.info:hover{
  color: #0FA0CE;
}
.success {
  color: #7EB741;
}
a.success:hover{
  color: #4F8A10;
}
.warning {
  color: #B57F2C;
}
a.warning:hover{
  color: #9F6000;
}
.error {
  color: #F32732;
}
a.error:hover{
  color: #D8000C;
}
.message.info:before {
  content:"\2139\a0\a0";
}
.message.success:before {
  content:'\2714\a0\a0';
}
.message.warning:before {
  content:'\26a0\a0\a0';
}
.message.error:before {
  content:'\2718\a0\a0';
}
.message.info {
  background-color: #BDE5F8;
}
.message.success {
  background-color: #DFF2BF;
}
.message.warning {
  background-color: #FEEFB3;
}
.message.error {
  background-color: #FFBABA;
}

svg.icon{
  fill: none;
  display: inline-block;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.center{
  text-align: center;
}

.right{
  text-align: right;
}

.center span{
  display: block;
}

.smaller{
  font-size: 50%;
}

.position-relative{
  position: relative;
}

.out-of-sight{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}

tr:hover > td:last-child > nav,
tr:hover > th:last-child > nav{
  margin-right: 0;
  transition: margin-right .5s ease-out .1s;
}

td:last-child > nav,
th:last-child > nav{
  margin-right: -9.75em; /* icon is 2em wide w/.5em between each */
  transition: margin-right .5s ease-in .1s;
}
td:last-child:has(> nav) {
  padding-left: 0; 
}

td, th{
  overflow: hidden;
  max-width: 33%;
}

table.results {
  max-width: 100%;
}

/* better alignment of input with plain text in tables */
th input,
th select,
td input,
td select{
  margin-bottom: 0; }

.monospace{
  font-family: monospace;
}

.hidden{
  visibility: hidden;
}

.display-none{
  display: none !important;
}

.slide{
    max-height: 15rem;            
    overflow-y: hidden;
    transition: all 0.5s ease-out;
}

.slide.up{            
    max-height: 0;
}

.loading{
  background: url(/static/img/loading.gif) no-repeat 95% center;
}

.mic{
  background: url(/static/img/mic.png) no-repeat 95% center;
}

.question{
  background: url(/static/img/question.png) no-repeat 95% center;
}

.tooltip{
  cursor: pointer;
}

.input-height{
  line-height: 38px;
}

li form{
  margin: 0;
}

/* https://stackoverflow.com/a/37592923/309917 */
input[type="date"]:before,
input[type="datetime-local"]:before {
  content: attr(placeholder) !important;
  margin-right: .3rem;
}
input[type="date"]:focus:before,
input[type="datetime-local"]:focus:before {
  content: '' !important;
}      

.dashed{ /* for icon ICON_STORAGE_ADD */
  stroke-miterlimit:4;
  stroke-dasharray:3,3;
}