html, body{
	margin: 0px;
	padding: 0px;
    height: 100%;
	overflow: hidden;
	
	font-family: 'Open Sans', sans-serif;
	font-size: min(4vw, 30px);
	color: #666;
}

/* General Wrapper*/
.wrapper {
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.wrapper:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22);
}

#contentWrapper {
	width: calc(100% - 80px);
	height: 100%;
	margin: 0 auto;
}

/* Graph */
#graphWrapper {
	height: calc(50% - 30px); 
	margin: 0 auto;
	margin-top: 20px;
	background: #FEFEFE;
	padding-top: 10px;
}

#graphContainer {
	min-width: 310px; 
	height: 100%;
	margin: 0 auto;
}

#fullGraph {
	width: 100% ;
	height: calc(100% - 50px); 
	margin-top: 20px;
	margin-right: 20px;
	background: #FEFEFE;
	float: left;
	padding-top: 10px;
}

/* Category */
#categoryWrapper {
	width: 33% ;
	height: calc(50% - 50px); 
	margin-top: 20px;
	margin-right: 20px;
	background: #FEFEFE;
	float: left;
	padding-top: 10px;
}

/* Transcations */
#transactionWrapper {
	width: calc(67% - 20px);
	height: calc(50% - 40px); 
	margin-top: 20px;
	background: #FEFEFE;
	float: left;
}

#transactionTable {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

#transactionContainer {
	overflow-y: scroll;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 10px;
}

.transaction {
	display: none;
	height: 24px;
	line-height: 24px;
	width: 100%;
	border-bottom: 1px solid #DEE0E4;
}

#transactionHeader {
	display: table-header-group;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	border-bottom: 1px solid #DEE0E4;
}

.transaction:hover {
	background: #F9F9F9;
}

.transactionColumn {
	display: table-cell;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.greenColor {
	color: #27ae60;
}

.greenButton {
	background-color: #27ae60;
	color: #FFF;
	font-size: min(4vw, 30px);
}

.redColor {
	color: #c0392b;
}

a {
	text-decoration: none;
	color: #666;
	font-weight: bold;
}

a:hover {
	color: #999;
}