* { box-sizing:border-box; }

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

}

@media only screen and (max-width: 750px) {
	body {
	font-size: 16px;
	
	}
}

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

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

h1 {
	font-family: Helvetica, Arial, sans-serif;	
	font-weight: 600;
	font-size: 1em;
	line-height: 200%;
	color:pink;
	width: 100%;
	border-bottom: 1px solid grey;
	margin: 2em 0 0;
}
.type {
	font-size: .8em;
	font-style: italic;
}

.ital {
	font-size: .8em;
	font-style: italic;
}

#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: pink;
	color: white;
	text-align: center;
	border: 1px solid pink;
}
#menu a:hover {
	background: white;
	color: pink;
}
.form, .table {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 1em 0;
	padding: 0;
	clear: both;
}


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

table {
	width: 100%;
  	border-collapse: collapse;
	font-size: 1em;
}

tr {
	width: 100%;
	border-bottom: 1px solid pink;
	vertical-align: middle;
}
.cat-header {
	width: 100%;
	height: 4em;
	vertical-align: bottom;
}
tbody > tr:first-child {
	border-bottom: 1px solid grey;
}

tbody > tr:first-child:hover {
	background-color: #f5f5f5;
}
th, td {
	text-align: right;
	padding: .5em 0 .5em 1em;
}
th {
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
	font-size: .7em;
	color: grey;
}

tr td:first-child,
tr th:first-child {
	max-width: 50%;
	text-align: left;
	padding-left: 0;
}
tr td:nth-child(2) {
}
tr td:nth-child(3) {
}
tr td:nth-child(4) {
}
.date_items {
	margin: 0 0 44px;
}
.items {
	text-transform: lowercase;
}
tr {
	text-transform: lowercase;
}
tr.total {
	border-bottom: 0px solid grey;
}
.total td {
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	color: pink;
	font-weight: 600;
	font-size: 1em;
	line-height: 200%;
}



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

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

.row {
    display: table-row;
}
.row div {
    display: table-cell;
    padding: .5em 0;
}
.row div:first-child {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: .8em;
	text-transform: uppercase;
	color: grey;
	padding-right: .5em;
}
input {
	height: 2em;
	padding: 6px 9px;
	border: 1px solid pink;
	border-radius: 0;
	box-sizing: border-box;	
	
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=text],
input[type=number],
input[type=password] {
	font-family: Courier New;
	font-size: 1em;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.table input[type=text],
.table input[type=number] {
	width: 3em;
}

.form input {
}

.form input[type=text],
.form input[type=number],
.form input[type=password] {
	width: 100%;
}

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

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

}

.per div input {
	max-width: 65%;
	
}
.per div select {
	float: right;
	width: 30%;
}
.header {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: .8em;
	text-transform: uppercase;
	color: grey;
}

.add {
	clear:both;
	margin: 36px 0 0 0;
}

.item div.right {
	text-align: right;
	padding-right: 0em;
}

/*##### MISC STYLES #####*/
svg {
	border-left: 1px solid grey;
	border-top: 1px solid grey;
	padding: 0;
	width: 100%;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
path {
}
.chart {
	display: inline-block;
	position: relative;
	padding: 0 0 0em;
	width: 100%;
}
.yaxis {
	display: inline-block;
	position: absolute;
	bottom: -1em;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: .45em;
	padding-left: 0em;
	color: grey;
	border: 0px solid red;
	transform-origin: center left;
	transform: rotate(90deg);
}
/*##### MISC STYLES #####*/
.err {
	color: pink
}
.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;
}

/*##### MOBILE STYLES #####*/

@media only screen and (max-width: 750px) {
	.type {
	display: block;
	clear: both;
	}

}