body, html, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, ol, li, form, input, textarea, label {position: relative; margin: 0; padding: 0; font-size: 100%; vertical-align: top;}
* {box-sizing: border-box}
html {height: 100%;}
body {font-family: arial; font-size: 12px; padding: 20px 10px 30px; color: #333; transition: transform .4s ease; -webkit-text-size-adjust: none; touch-action: manipulation; -webkit-touch-action: manipulation; min-height: 100%;}
h1 {font-size: 20px; color: rgba(30,30,30,0.8); text-transform: uppercase; transition: .3s all ease;}
h3 {font-size: 16px; padding: 10px 0;}
h4 {font-size: 14px; padding: 10px 0;}
img {border: none; max-width: 100%;}
hr {background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); outline: none; width: 100%; margin: 5px 0;}
a {text-decoration: none; outline: 0; color: #333; transition: .3s ease all;}
a:hover {text-shadow: #FFF 0 0 10px, #FFF 0 0 10px, #FFF 0 0 10px;}

.clear {clear: both;}
.centred {text-align: center; margin: auto;}
.inline {display: inline-block !important;}
.floatLeft {float: left;}
.floatRight {float: right;}
.pointer {cursor: pointer !important;}
.nowrap {white-space: nowrap;}
.block {display: block;}
.middle {vertical-align: middle;}
.lefty {text-align: left !important;}
.righty {text-align: right !important;}
.hidden {display: none !important;}
.red {background: #F00 !important;}
.fx {display: table; display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.icon {width: 30px; height: 30px; vertical-align: middle; padding: 5px; margin-right: 5px;}
.titleImg {display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 5px; opacity: 0.8;}
.message {
	background: rgba(0,0,0,0.6); position: fixed; padding: 5px 6px; font-size: 14px; color: #FFF; line-height: 16px; display: flex; align-items: center; justify-content: center;
	-webkit-animation: message 8s ease 1; animation: message 8s ease 1; opacity: 0; visibility: hidden; z-index: 500; overflow: hidden; max-width: 400px; top: 10px; right: 60px; border-radius: 10px;
}
@-webkit-keyframes message {0%,85%{opacity: 1; visibility: visible;}99%{opacity: 0;}100%{opacity: 0;}}
@keyframes message {0%,85%{opacity: 1; visibility: visible;}99%{opacity: 0;}100%{opacity: 0;}}
#preload {position: fixed; height: 40px; top: -100px; overflow: hidden;}
#preload img {width: 40px;}
.container {max-height: calc(100% - 60px); overflow-y: auto; padding-bottom: 20px;}
.centreBox {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; display: inline-block; text-align: center; color: #333; z-index: 99;}
.centreBox.jogWheel {background: rgba(0,0,0,0.6); padding: 10px; border-radius: 50px; width: auto; transition: .1s opacity ease; z-index: 9999;}
.iconBox {display: inline-block; margin: 10px; text-transform: uppercase; font-weight: 700; color: rgba(30,30,30,0.8);}
.iconBox > * {color: rgba(30,30,30,0.8); cursor: pointer; display: inline-block;}
.iconBox > * img, .switch, .iconBox.media > div, .iconBox > .inner {width: 100px; height: 100px; display: block; padding: 20px; opacity: 0.65; border-radius: 20px; border: 3px solid #333; margin-bottom: 10px; transition: .3s all ease;}
.iconBox:hover {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px;}
.iconBox:hover > * {color: rgba(30,30,30,0.9);}
.iconBox:hover img, .iconBox:hover .inner {opacity: 0.9;}
.iconBox:active > * {color: #333;}
.iconBox:active img, .iconBox:active .inner {opacity: 1; transition: none;}
.iconBox.touch, .iconBox.touch > *, .iconBox.touch img {transition: 2s all ease;}
.iconBox.touch:hover {text-shadow: none;}
.iconBox.touch:hover > * {color: rgba(30,30,30,0.8);}
.iconBox.touch:hover img, .iconBox.touch:hover .switch, .iconBox.touch:hover .inner {opacity: 0.65;}
.iconBox.touch:active {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; transition: none;}
.iconBox.touch:active > * {color: rgba(30,30,30,0.9); transition: none;}
.iconBox.touch:active img, .iconBox.touch:active .switch, .iconBox.touch:active .inner {opacity: 0.9; transition: none;}
.iconBox > .inner {width: auto !important; display: flex; align-items: center; cursor: pointer;}
.iconBox > .inner select {font-size: 14px; line-height: 24px; cursor: pointer;}
.notifyBox {width: 500px; max-width: calc(100% - 40px); margin: 0 auto 20px; font-size: 14px; padding: 0 20px 10px;}
.button {
	background: transparent; border: 2px solid rgba(30,30,30,0.5); color: rgba(30,30,30,0.8); position: relative; padding: 6px 14px; display: inline-block; text-decoration: none;
	text-transform: uppercase; font: 700 11px arial; margin: 3px; transition: .2s all ease; border-radius: 10px; vertical-align: middle; -webkit-appearance: none; cursor: pointer;
}
.button:hover, a:hover .button {text-shadow: none; border-color: #333; box-shadow: #FFF 0 0 10px, inset #FFF 0 0 10px; text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; color: #333;}
.button.hollow {border: none !important; box-shadow: none;}
.switch {opacity: 0.65;}
.switch:hover {opacity: 1; border-color: #333;}
.switch:before {content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 50%; left: 50%; transform: translate(-27px,-17px); border-radius: 36px; display: block; width: 54px; height: 34px; transition: .1s all ease; box-shadow: inset rgba(0,0,0,0.3) 0 1px 1px;}
.switch:after {content: ""; background: #FFF; position: absolute; border-radius: 36px; display: block; transition: .1s all ease; width: 28px; height: 28px; top: calc(50% - 1px); left: 50%; transform: translate(-24px,-14px); border-bottom: 2px solid #CCC; box-shadow: rgba(0,0,0,0.2) 0 1px 2px;}
.switch.on:before {background: rgba(0,136,255,0.8);}
.switch.on:after {transform: translate(-4px,-14px);}


/* FORMS AND INPUT */
input[type=text], input[type=password], input[type=number], input[type=date] {
	background: rgba(0,0,0,0.5); position: relative; display: block; font: 700 13px/24px arial; transition: .3s all ease; padding: 10px 20px; border-radius: 10px; width: 250px; margin: 10px auto; border: none; outline: none; text-align: center; color: #E4E4E4; -webkit-appearance: none; max-width: calc(100% - 20px);
}
input[type=text]:focus, input[type=password]:focus {background: rgba(0,0,0,0.6);}
input[type=range] {width: 80px; vertical-align: middle;}
input[type=color], select {vertical-align: middle;}
input[type=date]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; cursor: pointer;}
input[type=date] {min-height: 28px;}
input[type=number] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input::-moz-placeholder {text-transform: uppercase;}
input::-webkit-input-placeholder {text-transform: uppercase;}
input:-ms-input-placeholder {text-transform: uppercase;}
input[type=text].alt, input[type=date].alt {background: #FFF; color: #333; padding: 2px; border: 1px solid #CCC; margin: 0 2px; font-size: 12px; display: inline-block;}
textarea {padding: 10px; border-radius: 10px; border: 1px solid #CCC; margin: 5px; resize: none; outline: none;}


/* MENU AND TOOLBAR */
nav {position: fixed; width: 50px; height: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; flex-direction: column; top: 0; right: 6px; padding: 10px 0; text-align: center; z-index: 99;}
nav ul {padding-left: 0;}
nav li {display: block;}
nav li:before {content: attr(data-title); position: absolute; width: 0; display: inline-block; text-align: right; right: 56px; top: 10px; color: #333; transition: .2s ease all; font-size: 11px; font-weight: 700; line-height: 30px; opacity: 0; overflow: hidden; white-space: nowrap; text-transform: uppercase; border-radius: 10px; text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px;}
nav img {width: 30px; margin: 10px 0; opacity: 0.6; transition: .2s ease all;}
nav li div, nav li span {cursor: pointer;}
nav li:hover img {opacity: 1;}
nav li:hover:before {opacity: 1; width: 160px;}
nav li:active img {opacity: 1; transition: none;}
nav li:active:before {transition: none;}
nav li.touch:hover img {opacity: 0.65;}
nav li.touch:hover:before {opacity: 0; width: 0;}
nav li.touch:before {transition: 2s all ease;}
nav li.touch:active:before {opacity: 1; width: 160px; transition: none;}
nav li.large img {width: 40px;}
nav li.large:before {right: 55px; line-height: 43px;}


/* EXPENSES */
table, #groupTable {position: relative; width: calc(100% - 50px); color: #333; border-collapse: collapse; margin-right: 50px;}
table.year {border-collapse: separate;}
table td, table th {position: relative; padding: 6px 3px; vertical-align: middle; font-size: 14px; text-align: left; line-height: 16px;}
table th {background: rgba(0,0,0,0.7); color: #FFF;}
table th:first-child, table td:first-child {border-top-left-radius: 10px;}
table th:last-child, table td:last-child {border-top-right-radius: 10px;}
table th:first-child, table td:first-child {border-bottom-left-radius: 10px;}
table th:last-child, table td:last-child {border-bottom-right-radius: 10px;}
table tr:nth-child(even) td {background: rgba(0,0,0,0.07);}
table#yearTable th {min-width: 90px;}
table#yearTable tr td:first-child, table#yearTable tr th:first-child {padding-left: 8px;}
table#yearTable tbody tr:last-child th {background: rgba(0,0,0,0.7);}
table#yearTable tbody tr:last-child th:last-child {background: #000;}
table tr.positive td {background: #339A66; color: #FFF; border-bottom: 2px solid #FFF;}
table .warn:empty {background: #FD67FF;}
table .editable, table .editableDD {transition: .3s ease background;}
table .editableDD {cursor: pointer;}
table .editable:focus, table .editableDD:focus {outline: 2px solid #C00;}
table .warn:empty:focus {outline: 2px solid #ac00ae;}
table tr.positive .editable:focus {outline: 2px solid #257d50;}
table td .textLink {text-decoration: underline; cursor: pointer;}
table td .textLink:hover {color: #A00;}
table th.grandTotal {font-size: 1.4em;}
.cmTrig {position: absolute; top: 0; left: 0; width: 10px; height: 100%; z-index: 5;}
.cmtable {position: absolute; top: -3px; right: -1px; width: 5px; height: 5px; z-index: 5;}
.cmtable.hasContent {border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #C00; transform: rotate(-45deg);}
span.expense {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; line-height: 24px;}
span.comment {background: #FFF; display: none; position: absolute; left: 0; top: 0; transform: translate(-25%,22px); border: 1px solid #FFF; min-height: 20px; width: 200%; z-index: 9; font-size: 11px; line-height: 14px; color: #333; padding: 2px 4px; border-radius: 4px; box-shadow: rgba(0,0,0,0.3) 0 5px 15px -4px;}
.cmTrig.touch:hover ~ span.comment, .cmTrig:focus ~ span.comment, .cmTrig:active ~ span.comment, span.comment:hover, span.comment:focus, .expense.editable:hover ~ .cmtable.hasContent ~ span.comment {display: block;}
.expense.editable:focus ~ .cmtable.hasContent ~ span.comment {display: none;}
span.comment:focus {outline: 1px solid #C00; border-color: #C00;}
div#yearTable span.expense {position: relative;}
.autoSuggest {background: rgba(0,0,0,0.6); position: absolute; display: block; width: 100%; color: #FFF; font-weight: bold; border-radius: 0 0 6px 6px; left: 0; top: 100%; z-index: 9;}
.autoSuggest > span {display: block; margin: 2px; border-radius: 4px; padding: 3px 6px; line-height: 18px; transition: all .3s ease; font-size: 0.8em; cursor: pointer;}
.autoSuggest > span.active {background: #FFF; color: #333;}

/* INVOICES */
form.invoice label {font-weight: 700;}
form.invoice textarea {margin: 5px 5px 0 0; font-family: arial;}
form.invoice textarea.unr {width: 100px; height: 400px; text-align: center;}
form.invoice textarea.unr2 {width: 500px; height: 400px;}
form.invoice input[type=date] {margin: 5px 0 0 0; vertical-align: middle; width: 150px;}
div.invoice {width: 900px; font-size: 17px; margin: auto;}
div.invoice .invLogo {width: 360px;}
div.invoice .invTitle {width: 260px; display: inline-block; margin: 30px 0; left: 16px;}
div.invoice table {margin: 0; width: 100%;}
div.invoice table td, div.invoice table th {background: transparent; color: #000; line-height: 22px; padding: 3px; font-size: 17px; vertical-align: top;}
div.invoice table th {color: #000;}
div.invoice table th:first-child, div.invoice table td:first-child {border-top-left-radius: 0;}
div.invoice table th:last-child, div.invoice table td:last-child {border-top-right-radius: 0;}
div.invoice table th:first-child, div.invoice table td:first-child {border-bottom-left-radius: 0;}
div.invoice table th:last-child, div.invoice table td:last-child {border-bottom-right-radius: 0;}
div.invoice table tr:nth-child(even) td {background: transparent;}
div.invoice table.client {margin-top: 50px;}
div.invoice table.details {margin-top: 20px;}
div.invoice table.details td {border: 2px solid #000;}
div.invoice table.details th {border: 2px solid #000; font-weight: 700;}
div.invoice table.details tr:nth-child(2) td {height: 700px; padding: 20px 3px;}
.action {cursor: pointer;}


/* GRAPHS */
.graphArea {position: relative; height: 200px; border-bottom: 1px solid #999; margin: 116px 20px; display: inline-flex; align-items: flex-end; vertical-align: top;}
.graphArea.dual {height: 100px; margin-bottom: 216px;}
.graphTitle {position: absolute; width: 100%; font: bold 20px/20px arial, sans-serif; text-align: center; top: -110px; left: 0;}
.graphBar {width: 28px; background: #339A66; margin: 0 3px; display: inline-block;}
.graphBar.highest {background: #18692e;}
.graphBar.negative {background: #E00;}
.graphBar:after {content: attr(data-title); color: #333; position: absolute; display: block; top: -60px; left: -26px; transform: rotate(-90deg); text-align: left; font-size: 14px; font-weight: bold; width: 80px;}
.graphBar.negative:after {bottom: -60px; transform: rotate(90deg); top: auto;}
.graphBar:before {content: attr(data-year); color: #333; position: absolute; display: block; bottom: -20px; width: 100%; text-align: center; font-size: 10px; font-weight: bold;}
.graphBar.negative:before {color: #FFF; top: 6px; bottom: auto;}

.modal {background: rgba(255,255,255,0.95); position: fixed; width: 100%; height: 100%; font-size: 14px; padding: 20px; overflow-y: auto; opacity: 0; transition: .1s all ease;}
.modalFx {position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; z-index: 5;}
.modal .inner {z-index: 5;}
.modal .close {position: absolute; top: 20px; right: 20px; font-size: 50px; text-align: center; line-height: 40px; width: 40px; height: 40px; z-index: 9;}
.modal .closeArea {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}


@media (max-width: 1280px) {
	table#yearTable td, table#yearTable th {font-size: 0.9em; padding: 4px 3px; min-width: 70px;}
	table#yearTable tr td:first-child, table#yearTable tr th:first-child {font-size: 14px; padding-left: 8px;}
	span.comment {transform: translate(-25%,18px); font-size: 10px; line-height: 12px;}
	table#yearTable th.grandTotal {font-size: 1.2em;}
	#yearNav .button {padding: 6px 7px; margin: 5px 1px 2px;}
}

@media (max-width: 1024px) {
	table#yearTable td, table#yearTable th {font-size: 0.8em; padding: 4px 3px; min-width: 60px;}
	table#yearTable tr td:first-child, table#yearTable tr th:first-child {font-size: 12px; padding-left: 6px;}
	table#yearTable th.grandTotal {font-size: 0.8em;}
}

@media (max-width: 767px) {
	h1 {font-size: 16px;}
	nav img {width: 24px; margin: 8px 0;}
	nav li.large img {width: 34px;}
	nav li:before {right: 44px; line-height: 24px;}
	nav li.large:before {right: 48px; line-height: 34px;}
	.notifyBox p {font-size: 0.8em;}
	
	.iconBox {margin: 12px; width: 60px; font-size: 0.8em;}
	.iconBox > * img, .switch, .iconBox.media > div, .iconBox > .inner {width: 60px; height: 60px; padding: 5px; border: none; margin: 0 auto 5px;}
	
	table.mobFormat {width: 100%; background: none;}
	table.mobFormat tbody {border: none;}
	table.mobFormat tbody tr {display: block; padding: 5px; background: none !important;}
	table.mobFormat tbody td {display: block; padding: 5px 8px; font-weight: 700; border: none; background: #FFF;}
	table.mobFormat td:first-child {font-weight: 700;}
	table.mobFormat tbody td {background: #FFF;}
	table.mobFormat tbody td:before {content: attr(data-title)": "; display: inline; text-align: left; font-weight: normal;}
	table.mobFormat tbody tr:last-child td:first-child, table.mobFormat tbody td:first-child {border-radius: 5px 5px 0 0;}
	table.mobFormat tbody tr:last-child td:last-child, table.mobFormat tbody td:last-child {border-radius: 0 0 5px 5px;}
	table.mobFormat thead, table.mobFormat td.noBefore:before {display: none !important;}
	table.mobFormat td.colour {background-color: #111; color: #FFF;}
}

@media print {
	body, html {position: relative;}
	nav, #yearNav, .message {display: none;}
	table#yearTable {width: 100%;}
	table#yearTable td, table#yearTable th {font-size: 0.8em; padding: 2px 3px; min-width: 60px;}
	table#yearTable tr td:first-child, table#yearTable tr th:first-child {font-size: 12px; padding-left: 6px;}
	table#yearTable th.grandTotal {font-size: 0.8em;}
}