/*Universal*/
* {margin:0; padding:0;}
body{font-family:Arial,Helvetica,FreeSans,sans-serif, Serif; width:100%; background:#e6e6e6; float:left; overflow-x:hidden;}
a{text-decoration:none;}
input[type="button"]{width:18%; margin:15px 1% 5px 1%; padding:7px 0 7px 0; background:#06b154; font-size:18px; font-weight:bold; box-sizing:border-box; -webkit-appearance:none; -webkit-border-radius:5px; border-radius:10px; float:left; cursor:pointer;}
input[type="text"]{border-width:1px; border-color:#000000; box-sizing:border-box; float:left;}
select{border-width:1px; border-color:#000000; box-sizing:border-box; float:left;}
option{padding:0 10px 0 10px;}

.center{width:100%; box-sizing:border-box; float:left;}

.input{width:100%; box-sizing:border-box; float:left;}
.input p{text-align:right; font-weight:bold; float:left;}

.button{width:94%; padding:3% 0 3% 0; margin:3% 3% 0 3%; float:left; background:#DB5213; color:#0D2142; border:1px solid #DB5213; text-align:center; border-radius:10px; box-sizing:border-box; font-weight:bold; box-shadow:2px 2px 2px rgba(0,0,0,0.3);}

.overlay{position:absolute; width:100%; top:0; left:0; background:rgba(255,255,255,0.85); z-index:1; display:none;}

@media (max-width:600px) {

	body{font-size:14px; padding:0 0 70px 0; margin-top:15vw; overflow-x:scroll;}

    .input{padding:2% 2.5% 2% 2.5%;}
	.input p{width:30%; margin:0 2.5% 0 0; padding:2% 0 0 0;}
	.input input{width:67.5%; padding:1.25%;}
	.input select{width:67.5%; padding:1.25%;}

	.header{height:15vw;}
	.header > img{left:3.5vw; top:3.5vw; height:8vw;}
	.header a{position:absolute; right:0; top:0; width:30%; height:15vw;}
	.header a img{top:3vw; right:3vw; height:9vw; float:left;}

	.menu a{padding:5% 5px;}

	.bottom a{padding:3% 2.5%;}

    .results a{padding:2.5vw 2.5vw;}

	.home a{width:23%; margin:1% 1% 1% 1%; height:23vw;}

    .cust{width:200%;}

	.drive{width:180%;}

    .invoice{width:160%;}

	.invoiceLine{width:180%;}

	.web{width:130%;}

}

@media (min-width:600px) and (max-width:800px) {

	body{font-size:14px; padding:0 0 70px 0; margin-top:15vw; overflow-x:scroll;}

    .input{padding:2% 2.5% 2% 2.5%;}
	.input p{width:30%; margin:0 2.5% 0 0; padding:2% 0 0 0;}
	.input input{width:67.5%; padding:1.25%;}
	.input select{width:67.5%; padding:1.25%;}

	.header{height:15vw;}
	.header > img{left:3.5vw; top:3.5vw; height:8vw;}
	.header a{position:absolute; right:0; top:0; width:30%; height:15vw;}
	.header a img{top:3vw; right:3vw; height:9vw; float:left;}

	.menu a{padding:2.5% 5px;}

	.bottom a{padding:2.5% 2.5%;}

    .results a{padding:2.5vw 2.5vw;}

	.home a{width:18%; margin:1% 1% 1% 1%; height:18vw;}

    .cust{width:200%;}

	.drive{width:180%;}

	.invoice{width:160%;}

	.invoiceLine{width:180%;}

	.web{width:130%;}

}

@media (min-width:800px) {

	body{font-size:14px; padding:0 0 70px 0; margin-top:80px;}
	body > .center{padding:0 calc(50% - 400px);}

    .input{padding:10px 5px 0 5px;}
	.input p{width:20%; margin:0 10px 0 0; padding:12.5px 0 0 0;}
	.input input{width:60%; padding:10px;}
	.input select{width:60%; padding:10px;}

	.header{height:80px;}
	.header > img{left:10px; top:15px; height:50px;}
	.header a{position:absolute; right:0; top:0; width:30%; height:90px;}
	.header a img{top:15px; right:10px; height:50px; float:left;}

	.menu{height:calc(100vh - 80px);}
	.menu a{padding:15px 5px;}

	.main .table .body{height:calc(100vh - 150px);}

	.editor{height:calc(100vh - 80px);}

	.bottom{padding:0 calc(50% - 400px);}
	.bottom a{padding:2.5% 2.5%;}

    .results a{padding:10px 10px;}

	.home a{width:10.5%; margin:1% 1% 1% 1%; height:calc(.105 * 800px);}

    .cust{width:100%;}

	.drive{width:100%;}

	.invoice{width:100%;}

	.invoiceLine{width:100%; margin-top:10px;}

	.web{width:100%;}

}

/* Header */
.header{position:fixed; top:0; left:0; width:100%; background:#024C2E; box-sizing:border-box;}
.header img{position:absolute;}
.header a{float:left; box-sizing:border-box;}

.menu{position:absolute; width:200px; left:0; z-index:100; background:#024C2E; text-align:left;}
.menu > div{width:100%; float:left;}
.menu a{width:100%; float:left; box-sizing:border-box; color:#ffffff; border-bottom:1px solid #666666; cursor:pointer; transition:background 0.15s, color 0.15s;}
.menu a:hover{background:#E6EAF0; color:#024C2E;}
.menu a:hover img{filter:invert(100);}
.menu a.selected{background:#E6EAF0; color:#024C2E;}
.menu a.selected img{filter:invert(100);}
.menu a img{width:20px; float:left;}
.menu a p{width:calc(100% - 30px); margin-left:10px; float:left;}
.menu_off{position:absolute; width:50%; height:100vh; top:0; left:50%; z-index:100; display:none;}

.main{position:absolute; width:100%; box-sizing:border-box; float:left; padding-left:200px;}
.main > div{width:100%; float:left; display:none; background:#cccccc; transition:width 0.25s;}
.main > div.editorShown{width:calc(100% - 360px);}
.main .table{float:left; border-right:1px solid #024C2E;}
.main .table .head{width:100%; float:left; box-sizing:border-box; background:#04995B; color:#ffffff; line-height:35px; padding:0 10px;}
.main .table .head p{float:left; font-weight:bold;}
.main .table .head p:nth-of-type(1){width:50%;}
.main .table .head p:nth-of-type(2){width:50%; text-align:right; cursor:pointer;}
.main .table .head p{float:left;}
.main .table .titles{width:100%; float:left; line-height:35px; padding:0 10px; box-sizing:border-box; background:#dddddd;}
.main .table .titles p{float:left; font-weight:bold; cursor:pointer; transition:color 0.15s;}
.main .table .titles p:hover{color:#04995B;}
.main .table .titles p.chosen{color:#04995B;}
.main .table .body{width:100%; float:left; background:#ffffff; overflow-y:scroll;}
.main .table .body::-webkit-scrollbar {display:none;}
.main .table .row{width:100%; float:left; line-height:30px; padding:0 10px; box-sizing:border-box; cursor:pointer; transition:background 0.15s ease-in-out, color 0.15s ease-in-out;}
.main .table .row:nth-of-type(2n){background:#f6f6f6;}
.main .table .row.selected{background:#04995B; color:#ffffff;}
.main .table .row:hover{background:#04995B; color:#ffffff;}
.main .table .row p{float:left;}

.editor{position:absolute; top:80px; right:-360px; width:360px; background:#e6e6e6; float:left; transition:right 0.25s; border-left:1px solid #024C2E; box-sizing:border-box;overflow-y:scroll;}
.editor::-webkit-scrollbar {display:none;}
.editor.shown{right:0;}
.editor .head{line-height:35px; background:#04995B; color:#ffffff; font-weight:bold; padding:0 10px;}
.editor .line{width:100%; float:left; padding:10px 10px 0 10px; box-sizing:border-box;}
.editor .line p{width:100%; float:left; padding:0 0 5px 0;}
.editor .line input{width:100%; float:left; line-height:30px; padding:0 10px; border-radius:3px;}
.editor .line select{width:100%; float:left; height:30px; padding:0 6px; border-radius:3px;}
.editor .buttons{width:100%; float:left; padding:15px 0 0 0;}
.editor .buttons a{width:25%; line-height:35px; float:left; box-sizing:border-box; text-align:center; background:#04995B; color:#ffffff; border-top:1px solid #024C2E; border-left:1px solid #024C2E; border-bottom:1px solid #024C2E; cursor:pointer; transition:background 0.15s, color 0.15s;}
.editor .buttons a:nth-of-type(1){border-left:none;}
.editor .buttons a:hover{background:#ffffff; color:#024C2E;}

.bottom{position:fixed; bottom:0; left:0; width:100%; background:#024C2E; color:#ffffff; box-sizing:border-box;}
.bottom a{width:25%; float:left; cursor:pointer; color:#ffffff; border-right:1px solid #666666; text-align:center; box-sizing:border-box;}
.bottom a:hover{background:#E6EAF0; color:#024C2E;}

.window_message{position:fixed; bottom:calc(0 -6% - 1.25em); width:100%; height:1.25em; padding:3% 3% 3% 3%; box-sizing:border-box; z-index:201; text-align:center; background:#02243d; color:#ffffff; display:none;}
.window_message.green{background:linear-gradient(#00cc99,#006600); border-top:1px solid #006600; text-shadow:-1px -1px 0 #006600, 1px -1px 0 #006600, -1px 1px 0 #006600, 1px 1px 0 #006600;}
.window_message.red{background:linear-gradient(#cc6666,#660000); border-top:1px solid #660000; text-shadow:-1px -1px 0 #660000, 1px -1px 0 #660000, -1px 1px 0 #660000, 1px 1px 0 #660000;}

/* Slide In */
.slideIn{position:fixed; width:100%; top:0; left:100%; height:100vh; z-index:200; background:#eeeeee;}
.slideIn.webapp{height:100vh;}
.slideIn .header{position:absolute; width:100%; height:1.25em; padding:3% 0 3% 0; float:left; font-weight:bold; background:#015DB4; z-index:201;}
.slideIn .header.webapp{padding:calc(3% + 20px) 0 3% 0;}
.slideIn .header .back{width:25%; padding-left:1.25em; margin-left:3%; float:left; color:#ffffff; box-sizing:border-box;}
.slideIn .header .icon-static:after{padding-top:0.07em; left:0;}
.slideIn .header .back:hover{color:#ffff00;}
.slideIn .header .title{width:72%; padding-right:3%; float:left; text-align:right; color:#ffffff; box-sizing:border-box;}
.slideIn .body{width:100%; height:calc(100vh - 6% - 1.25em); padding-top:calc(6% + 1.25em); float:left; overflow:scroll;}
.slideIn .body:after{content:""; width:100%; min-height:50px; height:50px; float:left;}
.slideIn.webapp .body{height:calc(100vh - 6% - 20px - 1em); padding-top:calc(6% + 20px + 1em);}

/* Home */
.home a{float:left; border-radius:10px; box-shadow:2px 2px 5px rgba(0,0,0,0.35);}

.results{width:100%; float:left;}
.results a{width:100%; box-sizing:border-box; background:#c0c0c0; font-weight:bold; float:left; cursor:pointer; transition:all .25s ease-in-out;}
.results a:nth-of-type(1){background:#06b154; color:#ffffff;}
.results a:nth-of-type(even){background:#dddddd;}
.results a:nth-of-type(n+2):hover{background:#ffffff;}
.results p{float:left; white-space:nowrap; overflow:hidden;}

.customers .table{width:1200px;}
.customers .table :not(.head) p:nth-of-type(1){width:16%;}
.customers .table :not(.head) p:nth-of-type(2){width:16%;}
.customers .table :not(.head) p:nth-of-type(3){width:16%;}
.customers .table :not(.head) p:nth-of-type(4){width:10%;}
.customers .table :not(.head) p:nth-of-type(5){width:7%;}
.customers .table :not(.head) p:nth-of-type(6){width:7%;}
.customers .table :not(.head) p:nth-of-type(7){width:15%;}
.customers .table :not(.head) p:nth-of-type(8){width:10%; text-align:right;}

.hourly p:nth-of-type(1){width:40%;}
.hourly p:nth-of-type(2){width:40%; text-align:right;}
.hourly p:nth-of-type(3){width:20%; text-align:right;}

.invoices .table{width:900px;}
.invoices .table :not(.head) p:nth-of-type(1){width:7%;}
.invoices .table :not(.head) p:nth-of-type(2){width:24%;}
.invoices .table :not(.head) p:nth-of-type(3){width:14%;}
.invoices .table :not(.head) p:nth-of-type(4){width:14%;}
.invoices .table :not(.head) p:nth-of-type(5){width:14%;}
.invoices .table :not(.head) p:nth-of-type(6){width:7%;}
.invoices .table :not(.head) p:nth-of-type(7){width:10%; text-align:right;}
.invoices .table :not(.head) p:nth-of-type(8){width:10%; text-align:right;}

.invoice_lines .table{width:800px;}
.invoice_lines .table :not(.head) p:nth-of-type(1){width:6%;}
.invoice_lines .table :not(.head) p:nth-of-type(2){width:56%;}
.invoice_lines .table :not(.head) p:nth-of-type(3){width:12%;}
.invoice_lines .table :not(.head) p:nth-of-type(4){width:6%; text-align:right;}
.invoice_lines .table :not(.head) p:nth-of-type(5){width:10%; text-align:right;}
.invoice_lines .table :not(.head) p:nth-of-type(6){width:10%; text-align:right;}

.purchases .table{width:700px;}
.purchases .table :not(.head) p:nth-of-type(1){width:20%;}
.purchases .table :not(.head) p:nth-of-type(2){width:25%;}
.purchases .table :not(.head) p:nth-of-type(3){width:25%;}
.purchases .table :not(.head) p:nth-of-type(4){width:20%;}
.purchases .table :not(.head) p:nth-of-type(5){width:10%; text-align:right;}

.reports_annual .table{width:500px;}
.reports_annual .table :not(.head) p:nth-of-type(1){width:10%;}
.reports_annual .table :not(.head) p:nth-of-type(2){width:18%; text-align:right;}
.reports_annual .table :not(.head) p:nth-of-type(3){width:18%; text-align:right;}
.reports_annual .table :not(.head) p:nth-of-type(4){width:18%; text-align:right;}
.reports_annual .table :not(.head) p:nth-of-type(5){width:18%; text-align:right;}
.reports_annual .table :not(.head) p:nth-of-type(6){width:18%; text-align:right;}

.reports_balance .table{width:500px;}
.reports_balance .table :not(.head) p:nth-of-type(1){width:25%;}
.reports_balance .table :not(.head) p:nth-of-type(2){width:25%;}
.reports_balance .table :not(.head) p:nth-of-type(3){width:25%;}
.reports_balance .table :not(.head) p:nth-of-type(4){width:25%;}

.reports_monthly .table{width:600px;}
.reports_monthly .table :not(.head) p:nth-of-type(1){width:20%;}
.reports_monthly .table :not(.head) p:nth-of-type(2){width:16%; text-align:right;}
.reports_monthly .table :not(.head) p:nth-of-type(3){width:16%; text-align:right;}
.reports_monthly .table :not(.head) p:nth-of-type(4){width:16%; text-align:right;}
.reports_monthly .table :not(.head) p:nth-of-type(5){width:16%; text-align:right;}
.reports_monthly .table :not(.head) p:nth-of-type(6){width:16%; text-align:right;}

.transfers .table{width:600px;}
.transfers .table :not(.head) p:nth-of-type(1){width:20%;}
.transfers .table :not(.head) p:nth-of-type(2){width:60%;}
.transfers .table :not(.head) p:nth-of-type(3){width:20%; text-align:right;}

.web p:nth-of-type(1){width:14%;}
.web p:nth-of-type(2){width:22%; text-align:right;}
.web p:nth-of-type(3){width:22%; text-align:right;}
.web p:nth-of-type(4){width:22%; text-align:right;}
.web p:nth-of-type(5){width:20%; text-align:right;}

#alert{position:fixed; width:100%; padding:15px 0 15px 0; bottom:0; text-align:center; color:#06b154; background:rgba(0,0,0,0.9); font-size:20px; display:none;}

/* Default */
.home div{width:100%; margin:2px 0 2px 0; float:left;}
.home input{width:11.1%; height:135px; margin:0 .8% 2px .8%; float:left;}
.home input:first-of-type{margin:0 .8% 2px 0;}
.home input:last-of-type{margin:0 0 2px .8%;}

/* Login */
.login input{width:96%; margin:15px 2% 20px 2%; padding:8px 10px 8px 10px; box-sizing:border-box; float:left; font-size:24px; background:#ffffff; border-color:#000000;}

/* Time Picker */
.ui-timepicker-div .ui-widget-header {margin-bottom:8px;}
.ui-timepicker-div dl {text-align:left;}
.ui-timepicker-div dl dt {float:left; clear:left; padding:0 0 0 5px; }
.ui-timepicker-div dl dd {margin:0 10px 10px 40%;}
.ui-timepicker-div td {font-size:90%; }
.ui-tpicker-grid-label {background:none; border:none; margin:0; padding:0;}
.ui-timepicker-rtl{direction:rtl;}
.ui-timepicker-rtl dl {text-align:right; padding:0 5px 0 0;}
.ui-timepicker-rtl dl dt{float:right; clear:right;}
.ui-timepicker-rtl dl dd {margin:0 40% 10px 10px;}
.ui-timepicker-hour{margin:10px 0 0 0;}