* { box-sizing:border-box; }

body {
	font-family: Courier New;
	font-size: 16px;
	font-weight: 200;
	padding: 1em;

}

@media only screen and (max-width: 600px) {
body {
	font-family: Courier New;
	font-size: 14px;
	padding: 1rem .5rem;
}
}

.page-content {
	display: block;
	min-height: 100%;
	width: 100%;
	max-width: 600px;
	padding: 0 0 5em;
}

a {
	text-decoration: none;
	color:inherit;
	font-weight: 400;
}
a:hover {
	color: #ccc;
}

h1 {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 200%;
	color:#2187ab;
	width: 100%;
	margin: 2em 0 0;
	border-bottom: 1px solid #2187ab;
}
h2 {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 120%;
	padding: 1em 0 .4rem;
	color:#2187ab;
	width: 100%;
	margin: 2em 0 0;
	border-bottom: 1px solid #2187ab;
}
h3 {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight: 600;
	font-size: 1rem;
	line-height: 150%;
	color:#2187ab;
	width: 100%;
	margin: 0em 0 0;
}

.type {
	display: inline;	
	font-size: .8em;
	font-style: italic;
}
.smallbold {
	font-size: .8em;
	color:#2187ab;
	font-weight: 600;	
}

#menu {
	display: inline-block;
	width: 100%;
	margin: 0 0 .5em;
	font-family: Helvetica, Arial, sans-serif;	
}
#menu a {
	display: inline-block;
	float: left;
	margin: 0 .5em .5em 0;
	padding: 6px 9px;
	background: #2187ab;
	color: white;
	text-align: center;
	border: 1px solid #2187ab;
}
#menu a:hover {
	background: white;
	color: #2187ab;
}
.form, .table {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 1em 0;
	padding: 0;
	clear: both;
}

/*##### TABLE STYLEs #####*/

table {
	width: 100%;
  	border-collapse: collapse;
}

tr {
	width: 100%;
	border-bottom: 1px solid #dddddd;
	vertical-align: middle;
}


th {
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
	text-align: left;
	vertical-align: bottom;
	color: grey;
	width: 100%;
	border-bottom: 1px solid #2187ab;
	padding: .4em 0;
	height: 4em;
}
th:hover {
	background-color: #f5f5f5;
}
td {
	overflow:hidden;
    white-space: nowrap;
	padding: .5rem;
}


.items td:nth-child(1) {
	width: 6%;
	padding: 0.5em 0.5em .5em 0;;
}
.items tr td:nth-child(2) {
	width: 72%;
}
.items tr td:nth-child(3) {
	width: 12%;
}
.items tr td:nth-child(4) {
	width: 10%;
	padding-right: 0;
	text-align: right;
}
.items {
	text-transform: lowercase;
}

.date-items td:nth-child(1) {
	padding: .5em 0;
	min-width: 20%;
}
.date-items td:nth-child(2) {
word-break:break-all;
}
.date-items td:nth-child(3) {	
}
.date-items td:nth-child(4) {
	padding-right: 0;
	text-align: right;
}
tr {
	text-transform: lowercase;
}

.poo, .note, .tummy {
	display: none;
}
.tummy tr {
	border-bottom: 0px solid #dddddd;
	vertical-align: bottom;
}
.tummy td {
	text-align: center;
	padding: 2px 0;
}
.tummy tr:nth-child(odd) td {
	padding: 22px 0 2px;
}
.tummy-items td {
	width: 18%;
}
.tummy-items td:nth-child(6) {
	width: 10%;
	text-align: right;
}
.add {
	border-bottom: 0;
	font-size:1.2em;
}

/*##### FORM STYLES #####*/
form {
	height: auto;
	display: inline;
}	

.form form {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}
.row div {
    display: table-cell;
    padding: .4em 0;
}
.row div:first-child {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	color: grey;
}

input {
	height: 2rem;
	padding: 3px;
	border: 1px solid #2187ab;
	border-radius: 0;
	box-sizing: border-box;	
	width: 100%;
	font-family: Courier New;
	
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

} 


input[type=checkbox] {
	display: inline-block;
	width: 2rem;
	height: 2rem;
    vertical-align: middle;
	font-family: Courier New;
	font-size: 1rem;
	
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type=checkbox]:checked {
	background: #2187ab;
}
input[type=checkbox]:checked:before {
	content: "X";
	font-weight: bold;
	color: white;
}
label {
	display:inline-block;
	padding: 0 10px;
	width: 40%;
}

input[type=submit] {
  	font-family: Helvetica, Arial, sans-serif;
  	font-weight: 400;
	color: #fff;
	background-color: #2187ab;
    border: 1px solid #2187ab;
    padding: 0;
	font-size: 1em;
	min-width: 2em;
	text-align: center;
	margin: 0;
	
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type=submit]:hover {
	color: #2187ab;
	background-color: #fff;
}
textarea {
	width:100%;
	height: 5em;
}
select {
  font-family: Courier New;
  font-size: 1em;
  width: 100%;
  height: 2em;
  padding: 4px;
  border-radius:0px;
  border: 1px solid #2187ab;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

}
input.time {
	max-width: 2rem;
	max-height: 2rem;
	padding: 0;
	vertical-align: middle;
	text-align: center;
}
input.tick {
	max-width: 2rem;
	max-height: 2rem;
	padding: 0;
	vertical-align: middle;
	text-align: center;
}

.header {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: .8em;
	text-transform: uppercase;
	color: grey;
}


/*##### MISC STYLES #####*/
.fodmap {
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
}
.fodmap.low {
	background: #00cc33;
}
.fodmap.med {
	background: #ff9900;
}
.fodmap.high {
	background: #ff0000;
}
.fodmap.tbc {
	background: #eeeeee;
}
/*##### MISC STYLES #####*/
.add-item {
	color:#2187ab;
	font-family: Helvetica, Arial, sans-serif;	
	font-size: 1rem;
	padding-top: 1rem;
	height: 3rem;
	text-transform: uppercase;
	border-bottom: 0;
}
.add-item a {
	font-weight: 600;
}

.err {
	color: #2187ab
}
.logout {
	clear: both;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: .8em;
	color: grey;
	width: 100%;
	max-width: 600px;
	height: 4em;
	margin: -4em 0 0;
	padding: 1em 0;
	text-align: center;
}
div.clear {
	border: 0px solid cyan;
	width: 1px;
	height: 1px;
	padding: 0;
	display: inline-block;
}
.chart, .index {
font-size: .8em;
width: 100%;
text-align: center;
color: #ccc;
padding: 6px 0;
text-tranform: uppercase;
font-family: Helvetica, Arial, sans-serif;	

}
svg {
width: 100%;
aspect-ratio: 595 / 210;
border: 0px solid red;
}

line {
  stroke: #ddd;
  stroke-dasharray: 1;
  stroke-width: 1;
}

polyline {
	fill: none;
	stroke-width: 3px;
	opacity: .8;
	stroke-linejoin:round;
}

polyline:nth-of-type(1) {
stroke: blue;
}
polyline:nth-of-type(2) {
stroke: red;
}
polyline:nth-of-type(3) {
stroke: green;
}
polyline:nth-of-type(4) {
stroke: lime;
}
polyline:nth-of-type(5) {
stroke: cyan;
}
polyline:nth-of-type(6) {
stroke: orange;
}
.legend > div {
width: 100%;
display: block;
}
.legend div div {
width:20px;
height: 3px;
background: red;
display: inline-block;
margin: 0 5px 4px 0;
}

.legend div:nth-of-type(1) div {
background: blue;
}
.legend div:nth-of-type(2) div {
background: red;
}
.legend div:nth-of-type(3) div {
background: green;
}
.legend div:nth-of-type(4) div {
background: lime;
}
.legend div:nth-of-type(5) div {
background: cyan;
}
.legend div:nth-of-type(6) div {
background: orange;
}

.index {
width: 100%;
margin: 0px 0 16px;
padding: 0;
}
.index div {
width: 14.28%;
height: 6px;
float: left;
text-align: center;
}
/*##### MOBILE STYLES #####*/

@media only screen and (max-width: 560px) {
	 span.type {
	 	display: none;
	 }

	 div.clear {
		border: 0px solid red;
		width: 100%;
		height: 1px;
		display: block;	
	 }
}