/*
1040.me by FWDLABS
https://fwdlabs.com
*/

/* BOILERPLATE */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }

a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size:1em; display:block; margin-bottom:1rem; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; }

.ie6 legend, .ie7 legend { margin-left: -7px; }

input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

button, input, select, textarea { margin: 0; }

input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   /* border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; */
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #46A46C; color:#fff; text-shadow: none; }
::selection { background:#46A46C; color:#fff; text-shadow: none; }

a:link { -webkit-tap-highlight-color: #46A46C; }

button {  width: auto; overflow: visible; }

.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {
	color: #444;
}












/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

.hidden { display: none; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }




/* CUSTOM */



#doc {
	min-height: 100vh;
}

body {
	background-color:#fff;
	font-family:'Roboto', Helvetica, Arial, sans serif;
	font-weight: 300;
	}
	
	.icon {
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		display:block;
		text-align:center;
		margin:0 auto;
		height:150px;
		width:150px;
	}
	
	.icon-xxsmall {
		height:15px;
		width:15px;
	}
	
	.icon-xsmall {
		height:25px;
		width:25px;
	}
	
	.icon-small {
		height:50px;
		width:50px;
	}
	
	.icon-large {
		height:300px;
		width:300px;
	}
	@media only screen and (max-width : 600px) {
		.icon-large {
			height:150px;
			width:150px;
		}
	}
	
	.icon-bar-chart {
		background-image:url('https://1040.me/images/icon-bar-chart.svg');
	}
	.icon-ledger {
		background-image:url('https://1040.me/images/icon-ledger.svg');	
	}
	
	.icon-target {
		background-image:url('https://1040.me/images/icon-target.svg');
	}
	.icon-pie-chart {
		background-image:url('https://1040.me/images/icon-pie-chart.svg');
	}
	.icon-piggy-bank {
		background-image:url('https://1040.me/images/icon-piggy-bank.svg');
	}
	.icon-mileage {
		background-image:url('https://1040.me/images/icon-mileage.svg');
	}
	
	.icon-list {
		background-image:url('https://1040.me/images/icon-list.svg');
	}	
	.icon-receipts {
		background-image:url('https://1040.me/images/icon-receipts.svg');
	}
	.icon-export {
		background-image:url('https://1040.me/images/icon-export.svg');
	}
	.icon-security {
		background-image:url('https://1040.me/images/icon-security.svg');
	}
	.icon-billing {
		background-image:url('https://1040.me/images/icon-billing.svg');
	}
	
	.icon-expense {
		background-image:url('https://1040.me/images/icon-expense.svg');
	}
	.icon-expense-source {
		background-image:url('https://1040.me/images/icon-expense-source.svg');
	}
	.icon-expense-category {
		background-image:url('https://1040.me/images/icon-expense-category.svg');
	}
	.icon-revenue {
		background-image:url('https://1040.me/images/icon-revenue.svg');
	}
	.icon-revenue-source {
		background-image:url('https://1040.me/images/icon-revenue-source.svg');
	}
	.icon-revenue-category {
		background-image:url('https://1040.me/images/icon-revenue-category.svg');
	}
	
	.icon-checkbox-empty {
		background-image:url('https://1040.me/images/icon-checkbox-empty.svg');
	}
	.icon-checkbox-checked {
		background-image:url('https://1040.me/images/icon-checkbox-checked.svg');
	}
		
	.icon-target,
	.icon-pie-chart,
	.icon-piggy-bank {
		margin-bottom:1em;
	}
	
h1,h2,h3,h4,h5 {
	font-family:'Archivo Black', Helvetica, Arial, sans serif;
	font-weight: 400;
	margin-bottom:1rem;
	}

h1 { font-size:3em; font-family:'Roboto'; font-weight:900; }
	body.loggedin #sitename { width:75px; height:75px; }

h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.3em; }
	
	h2 span,
	h3 span,
	h4 span { font-family:'Roboto'; font-weight:100; }

p, li, td, label, legend { font-size:1.15em; }
	label p, td label, td h4, li td { font-size:100%; }
	
p, li {
	line-height:1.5;
	margin-bottom:1em;
}
	li {
		margin-bottom:0.25em;
	}

a {
	color:#46A46C;
	text-decoration:none;
}
a:hover {
	color:#388356;
}
a:focus,
textarea:focus,
select:focus,
input:focus,
button:focus {
	outline: 1px solid #ccc;
}

em {
	font-style: italic;
	font-family:Georgia, Times New Roman, serif;
}

ul { margin-bottom:1em; }

#hd {
}
	body.loggedin #hd {
	}

#bd {
    min-height: 90vh;
}

#ft {
	background-color:#222;
	color:#ccc;
	padding-bottom:50px;
	width:100%;
}

#fixed-footer {
	position: fixed;
    bottom: 0;
    z-index: 10;
    background-color: #222;
	color:#ccc;
    width: 100%;
}
	#fixed-footer a:hover { color:#fff; }

#primary-viewport {
    min-height: 65vh;
	max-width:1200px;
	margin:0 auto;
}
	@media only screen and (max-width : 600px) {
		#primary-viewport { min-height: 90vh; }
		#primary-viewport-column-1 { order:2; }
		#primary-viewport-column-2 { order:1; }
	}

	#primary-viewport .gutter {
		padding:3em;
	}

#secondary-viewport {
	background-color:#eee;
	padding: 3em 0;
}

#secondary-viewport .flex-row {
	max-width:1000px;
	margin:0 auto;
}

nav.menu {
	overflow:hidden;
}
	#hd nav.menu { margin:10px 0; }

nav.menu ul {
	display: flex;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}
nav.menu ul li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 0 0 auto;
}
nav.menu ul li:not(:last-child):after {
	content: "";
	border-right: 1px solid #eee;
	height: 100%;
	margin: auto;
}
nav.menu ul li a,
nav.menu ul li strong,
nav.menu ul li em {
	padding:0.25em 1em;
}
nav.menu ul li a:hover {
	background-color:#eee;
}

#overlay {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	/* background-image:url('/images/overlay.png'); */
	background-repeat:repeat;
	background-position:top center;
	background-color:rgba(0,0,0,0.5);
	z-index:9;
}

#search-box {
	text-align:center;
}

#search-box .gutter {
	padding-left:0;
	padding-right:0;
}

#search-box form {
	display:inline-block;
}
#search-box form input[name=q] { width:300px; }

#todo-wrap {
	margin-bottom:1em;
}
	#todo-wrap ul {
		margin-bottom:0;
	}

.highlight {
	background-color:#ffffcc;
}
	.highlight.gutter {
		margin-bottom:1em;
	}

.first {
	margin-top:0 !important;
}
.last {
	margin-bottom:0 !important;
}
	
.toggle-wrap {
	position:absolute;
    min-width: 240px;
    background-color: #333;
	color:#ccc;
	z-index:10;
}
	.toggle-wrap a:hover { color:#fff; }
	.toggle-wrap-no-overlay {
		position:relative;
		background-color:transparent;
		color:#444;
	}
	
	.form-response,
	.toggle-wrap small {
		margin-top:1rem;
		display:block;
	}

.gutter { padding:1em; }

a.active {
	color:#000;
	font-weight:bold;
	text-decoration:none;
}

button.toggle,
button.toggle-no-overlay {
	border:0;
	background-color:transparent;
	padding:0;
}

button.toggle-active .submit {
	background-color:#333 !important;
	color:#fff;
}

button.checkbox {
	background:transparent;
	border:0;
	padding:0;
}
button.checkbox span {
	height:2em;
	width:2em;
}
	button.checkbox span.icon-checkbox-empty:hover {
		background-image:url('https://1040.me/images/icon-checkbox-checked.svg');
	}
	button.checkbox span.icon-checkbox-checked:hover {
		background-image:url('https://1040.me/images/icon-checkbox-empty.svg');
	}


#account-menu-wrap { text-align:right; }

.upload-receipt { text-align:left; }

@media only screen and (max-width : 600px) {
  #account-menu,
  .upload-receipt { width:100%; }
}

#account-menu p {
	font-size: 2em;
	margin-bottom:0.5em;
}

/* Form */

#add-form,
#add-form-expense,
#add-form-revenue,
#add-form-task {
	width: 50%;
}
@media only screen and (max-width : 600px) {
	#add-form,
	#add-form-expense,
	#add-form-revenue,
	#add-form-task {
		width: 100%;
	}
}

input:disabled,
select:disabled,
button:disabled {
	font-family:Georgia, Times New Roman, serif;
	font-style:italic;
	background-color:#222 !important;
	border-color:#222 !important;
	color:#ccc !important;
	cursor: not-allowed;
	pointer-events: all !important;
}

form input[type=date],
form input[type=text],
form input[type=email],
form input[type=number],
form input[type=password],
form input[type=file],
form textarea {
	border:1px solid #555;
}
	form input[type=file] { border:0; padding:0; }

form input[type=date],
form input[type=text],
form input[type=email],
form input[type=number],
form input[type=password],
form select,
form textarea {
	font-size:16px;
    width: 100%;
    box-sizing: border-box;
	max-width:480px;
	display:block;
	margin-bottom:5px;
	}

.easy-autocomplete {
	width:100% !important;
	}

label {
	display:block;
	margin-bottom:1rem;
}

input, textarea, select, .submit {
	display:block;
	padding:5px 10px;
	margin-bottom:1rem;
	outline:none;
	}
	
	/*
	label input,
	label textarea,
	label select {
		margin-top:1rem;
	}
	*/
	
	label small,
	legend small {
		font-style:italic;
		font-family: Georgia, Times New Roman, serif;
		display:block;
	}
	
	input[type="submit"],
	input[type="reset"],
	.submit {
		display:inline-block;
		margin-bottom:0;
	}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
	font-size: 16px;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
     -webkit-appearance: none;
     border-radius: 0;
}

input[type="submit"],
.submit {
	background-color:#46A46C;
	border:0;
	color:#fff;
	}
	
	input[type="submit"]:hover,
	a:hover .submit,
	button:hover .submit,
	.submit:hover {
		background-color:#388356;
		color:#fff;
	}

.easy-autocomplete-container {
	background-color:#222;
	color:#eee;
}
.easy-autocomplete-container ul { margin:0; }
.easy-autocomplete-container ul li { list-style:none; padding:5px; margin:0 !important; }
.easy-autocomplete-container ul li.selected { text-decoration:underline; }

/*
#todo-wrap ul {
	margin-left:0;
}
#todo-wrap li {
	list-style:none;
}
#todo-wrap li:before {
	content: '';
	display: inline-block;
	height: 2em;
	width: 2em;
	background-image: url('https://1040.me/images/icon-checkbox-empty.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 1em;
	vertical-align:middle;
}
*/

#todo-wrap td {
	padding:0;
}
	#todo-wrap td.task {
		padding:5px 0;
	}
#todo-wrap tr {
	background-color:transparent !important;
}

/* Grids */

#avatar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#onboarding-grid {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}
@media only screen and (max-width : 800px) {
	#onboarding-grid { grid-template-columns: 1fr 1fr; }
}

#onboarding-grid-three {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
@media only screen and (max-width : 800px) {
	#onboarding-grid-three { grid-template-columns: 1fr; }
}

/* Form with Grid */

form.grid {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
form.grid-three {
	grid-template-columns: 1fr 1fr 1fr;
}
form.grid-four {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
form.grid-five {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
form.grid-six {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

form.grid .full-width {
    grid-column: 1 / 3;
}
	form.grid-three .full-width {
		grid-column: 1 / 4;
	}

	form.grid .full-width input,
	form.grid .full-width textarea {
		width:100%;
		max-width:100%;
	}
	form.grid input[type="submit"] {
		width:auto;
		max-width:auto;
	}

/* form.grid label, */
form.grid input,
form.grid textarea,
form.grid select,
form.grid .submit {
	margin-bottom:0;
	box-sizing: border-box;
}

.submit { margin-bottom:0; }

	input[type="submit"].secondary,
	input[type="reset"].secondary,
	button.secondary,
	a.secondary,
	span.secondary {
		background-color:#555;
		margin:0;
		color:#fff;
	}
	
		input[type="submit"].secondary:hover,
		input[type="reset"].secondary:hover,
		button.secondary:hover,
		a.secondary:hover,
		span.secondary:hover {
			background-color:#333;
		}

	input[type="submit"].tertiary,
	input[type="reset"].tertiary,
	button.tertiary,
	a.tertiary,
	span.tertiary {
		background-color:#eee;
		margin:0;
		color:#555;
	}

		input[type="submit"].tertiary:hover,
		input[type="reset"].tertiary:hover,
		button.tertiary:hover,
		a.tertiary:hover,
		span.tertiary:hover {
			background-color:#ddd;
			margin:0;
			color:#444;
		}

	#account-menu input[type="submit"] { margin:0; }

table {
	border-collapse:collapse;
	width:100%;
	margin-bottom:1em;
	}

thead {
	background-color:#333;
	color:#ccc;
}
	thead td {
	    font-family:Georgia, Times New Roman, serif;
	    font-style: italic;
		padding-top:0.5em;
		padding-bottom:0.5em;
	}

tr { }

	tbody tr:nth-child(odd) { background-color: #f7f7f7; }
	tbody tr:nth-child(even) { background-color: #e1e1e1; }

td {
	padding:1em;
	position:relative;
	vertical-align: top;
	box-sizing: border-box;
	}
	
	tbody tr > td:last-of-type form {
		text-align: right;
	}
	tbody tr > td:last-of-type .submit {
		float: right;
	}

	@media only screen and (max-width : 600px) {
		tr {
			display:block;
			padding:1em;
		}
		td {
			display:block;
			width:100% !important;
			padding:0;
		}
		tbody tr > td:last-of-type .submit {
			float:none;
		}
	}

.nowrap { white-space: nowrap; }

.w-auto { width:auto !important; }
.w-10 { width:10%; }
.w-20 { width:20%; }

.v-m { vertical-align:middle; }

.flex-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: space-around;
}
	.flex-row-top { align-items:flex-start; }
	.flex-row-center { align-items:center; }
	.flex-row-bottom { align-items:flex-end; }

	.flex-row-left-justify {
		justify-content: flex-start;
	}

	.flex-row .flex-item {
		
	}

		#hd .flex-row .flex-item {
			flex-basis:auto;
		}
	
	.flex-double-width {
		flex:2;
	}
	.flex-single-width {
		flex:1;
	}
	.flex-one {
		flex:1;
	}
	.flex-none {
		flex:0;
	}
		
	@media only screen and (max-width : 600px) {
		.flex-single-width,
		.flex-double-width {
			flex-basis:100%;
		}
	}
	
.border-light {
	border: 1px solid #eee;
	margin-bottom:1em;
}
	.border-light:last-of-type {
		margin-bottom:0;
	}

.flex-column {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-around;
}

code {
	background-color:#eee;
	padding:2px 5px;
}

.printme { display:none; }

.align-right { text-align:right; }

#formProcessingOverlay {
	display:none;
	background:#fff;
	height: 100%;
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 998;
	opacity: 0.5;
}

#formProcessing {
	display:none;
	text-align:center;
	line-height:16px;
	color:#000;
	z-index:999;
	background:transparent;
	left: 50%;
	position: absolute;
	top: 50%;
	margin-left: -25px;
	margin-top: -8px;
	width:50px;
	height:16px;
	opacity:1;
}

/* Modal */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow: auto;
	max-width:600px;
	max-height:600px;
}

/* Meter */

meter {
	margin: 1em auto;
	width: 100%;
	height: 30px;
	background: none;
}

meter::-webkit-meter-bar {
	background: #eee;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	border-radius: 3px;
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
meter[value="2"]::-moz-meter-bar { background: orange; }
meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: yellow; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="4"]::-moz-meter-bar { background: green; }

/* Dark Mode */

/* @media (prefers-color-scheme: dark) { */
	body.dark-mode { background-color:#222; }
	body.dark-mode,
	body.dark-mode select,
	body.dark-mode input,
	body.dark-mode textarea { color: #ccc; }
	body.dark-mode tbody tr:nth-child(odd) { background-color: #444; }
	body.dark-mode tbody tr:nth-child(even) { background-color: #333; }
    body.dark-mode form label,
	body.dark-mode form input { background-color: #000; color: #eee; }
/* } */

#inputReceiptDrop {
	border: 2px dashed #ccc;
	padding: 1rem;
	cursor: pointer;
	margin-bottom:1rem;
}
	#inputReceiptDrop:hover { background:#eee; }
	#inputReceiptDrop input:last-of-type { margin-bottom:0; }
	#inputReceiptDrop.dragover {
		border-color: #46A46C;
		background-color: #eee;
	}