:root {
    --blue: #377ba8ff;
    --teal: #6acfc7ff;
    --white: #fafffdff;
    --lightgray: #e0e6e5ff;
    --darkgray: #445050ff;
/*   --darkgray: #2a3737ff;*/
    --black: #0c1a1aff;
}

html { font-family: sans-serif; background: var(--white); }
body {  min-height: 100vh; padding 0; margin: 0; }
h1 { font-size:32px; margin: 1rem 0; color: var(--black); }
p, th, td { color: var(--black); }
h2 {margin:0px }
a { color: var(--blue); }
.a-big { text-decoration: none; font-weight: bold; font-size: 20px; margin-left: 20px; }

label { font-weight: bold; }
input.danger { color: #cc2f2e; }
input[type=submit] { min-width: 10em; }

.content { margin 0 auto; padding: 2rem 5rem; min-height: calc(100vh - 11rem); background: var(--white) }
.top-div { display: flex; align-items: end;  }
.graph-controls {display: flex; background: var(--lightgray); padding: 0.5rem ; border:solid 1px;}

/* navbar */
nav { background: var(--black); display: flex; align-items: end; padding: 0.5rem 5rem; height: 4rem; }
nav .user_div { text-align: right; }
nav p { color: var(--white); margin: 0.2rem; padding: 0; }
nav a { text-decoration: none; color: var(--white); font-size: 1.5rem; font-weight: bold; margin: 0 0 0 2rem}
nav img { float: left; height: 3.5rem; padding: 0.25rem; }

/* footer */
footer { background: var(--black); height: 2rem; }
.footer_div {width: 20rem; height:1rem; margin:auto; padding: 0.5rem; }
.footer_text {color: var(--white); font-size:1rem; margin: auto;}

/* device card  */



/* readings table  */
th, td, table {
  border-style: solid;
  border-color: var(--white);
  border-collapse: collapse;
  background-color: var(--lightgray);
  padding: 3px;
  text-align:left;
}


/*
colorscheme:
green: 03b57b
white: fefefe
dark: 595456
black: 323232
gray: ea940c


*/


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}