body {
	margin: 0;
}

.nav {
	width: 100%;
	position: fixed;
	height: 50px;
	bottom: 0px;
	background-color: white;
	overflow: hidden;
	box-shadow: 0px -2px 30px #cccccc;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

#transaction {
	display:flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 50px;
	width: 96%;
	font-family: sans-serif;
	font-size: 1.2rem;
	color: #444444;
}

#transaction a {
  display: flex;
  flex-basis: 100%;
  text-decoration: none;
  color: inherit;
}

#transaction div.transaction-form-row {
	display: flex;
	flex-basis: 100%;
	padding-bottom: 15px;
	border-bottom: 1px solid #CCCCCC;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

div.transaction-form-row > div.budget {
	display: flex;
	justify-content: center;
	align-items: center; 
	border: 0;
	border-radius: 4px;
	height: 100%;
	padding: 5px;
	background-color: #c4de8a;
	width: 100%;
	height: 70px;
	padding: 1px 12px 1px 12px;
}


div.transaction-form-row > div.overview {
	display: flex;
	justify-content: center;
	align-items: center; 
	border: 0;
	border-radius: 4px;
	height: 100%;
	padding: 5px;
	background-color: #c4de8a;
	width: 100%;
	padding: 1px 12px 1px 12px;
	flex-direction: column;
}


div.transaction-form-row > div.overview > div.full {
	width: 100%;
	flex: 1;
	padding-bottom: 5px;
	padding-top: 5px;
	
}


div.transaction-form-row > div.budget > div {
	display: flex;
	flex-wrap: wrap;
	height: 80%;
}



div.transaction-form-row > div.budget > div.left {
	width: 50%;
}

div.transaction-form-row > div.budget > div.right {
	flex: 1;
}

div.transaction-form-row > div.budget > div > div {
	display: flex;
	flex-basis: 100%;
}

div.transaction-form-row div.top {
	font-weight: bold;
	align-items: last baseline;
}

div.transaction-form-row div.bottom {
	font-size: 0.8rem;
}


div.transaction-form-row > div.budget a {
	display: flex;
	flex: 1;
	justify-content: right;
	align-items: center; 
	text-decoration: none;
	color: white;
	font-weight: bold;
}

div.transaction-form-row > div.budget a > div {
	display: flex;
	padding: 1px 12px 1px 12px;
	height: 80%;
	align-items: center;
	background-color: #7daf0d;
	border-radius: 4px;
}


.progress-bar-row {
  width: 100%;
  display: flex;
}

.progress-bar {
  display: flex;
  width: 100%;
  height: 3px;
  background-color: #efefef;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  position: relative;
  margin-left: 5px;
}

.progress-bar > div {
  position: absolute;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  height: 3px;
}

.progress-bar:first-child {
  margin-left: 0;
}

.progress-bar-funded {
  background-color: #67bc5f;
}

.progress-bar-funded.partial {
  background-color: #e0b62f;
}

.progress-bar-spend {
  background: repeating-linear-gradient(
  155deg,
  #c4de8a,
  #c4de8a 4px,
  #f0f8dd 4px,
  #f0f8dd 6px
  );
}

.progress-bar-spend.partial-funded {
  background: repeating-linear-gradient(
  155deg,
  #ffe05b,
  #ffe05b 4px,
  #fff8d8 4px,
  #fff8d8 6px
  );
}

.progress-bar-spend.overspend {
  background: repeating-linear-gradient(
  155deg,
  #f38261,
  #f38261 4px,
  #ffd9d9 4px,
  #ffd9d9 6px
  );
}

.progress-top-bar {
  display: flex;
  width: 100%;
  font-size: 1.0rem;
  margin-bottom: 4px;
}

.progress-category {
  display: flex;
  flex: 1;
}

.category-budget {
  background-color: #ffd158;
  border-radius: 12px;
  padding-left: 8px;
  padding-right: 8px;
}

.category-budget.funded {
	background-color: #c4de8a;
}

.category-budget.overspend {
	background-color: #f38261;
}

.required-budget {
  width: 100%;
  font-size: 0.7rem;
  margin-top: 4px;
}




#transaction div.transaction-form-row > label.transaction-type {
	border: 1px solid gray;
	display: flex;
	justify-content: center;
	align-items: center;
}

#transaction div.transaction-form-row > label.description {
	width: 36%;
	font-size: 0.8rem;
}

#transaction div.transaction-form-row > label.left {
	border-top-left-radius: 20px; 
	border-bottom-left-radius: 20px; 
	width: 50%;
}

#transaction div.transaction-form-row > label.right {
	border-top-right-radius: 20px; 
	border-bottom-right-radius: 20px;
	border-left: 0; 
	flex: 1;
}

#transaction div.transaction-form-row > input[type=radio] {
	display: none;
}

#transaction div.transaction-form-row input:checked + label.left {
	background-color: lightgray;
}

#transaction div.transaction-form-row input:checked + label.right {
	background-color: #c4de8a;
}

#transaction div.transaction-form-row > input {
	border: 1px solid grey; 
	border-radius: 20px;
	display: flex;	
	flex: 1;
	font-family: sans-serif;
	text-align: center;
}

#transaction div.transaction-form-row > select {
	border: 1px solid grey; 
	border-radius: 20px;
	display: flex;	
	flex: 1;
	font-family: sans-serif;
	text-align: center;
	background-color: transparent;
}

#transaction div.transaction-form-row > input.amount, input.amount:focus {
	color: red;
	font-size: 1.5rem;
	font-weight: bold;
	border: 0;
}



#transaction div.transaction-form-row > input.positive {
	color: #7daf0d;
}

#transaction div.transaction-form-row > input[type=submit] {
	border-radius: 4px;
	background-color: #71addb;
}












/* LOGON */

form > div {
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 50px;
	width: 96%;
	font-family: sans-serif;
	font-size: 1.2rem;
	color: #444444;
}

#logon > div {
  display: flex;
	flex-basis: 100%;
	padding-bottom: 15px;
	border-bottom: 1px solid #CCCCCC;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

#logon label {
	width: 36%;
}

#logon input {
  border: 1px solid grey; 
	border-radius: 20px;
	display: flex;	
	flex: 1;
	font-family: sans-serif;
	text-align: center;
}

#logon input[type=submit] {
	border-radius: 4px;
	background-color: #71addb;
	font-size: 1.2rem;
}