* {
	margin: 0px;
	padding: 0px;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
}


html {
	margin: 0px;
	padding: 0px;
}


body {
	/* background: #3E2F2B; */
	/* font: 76%/130% Arial, Helvetica, sans-serif; */
	color: #666;
	margin-top: 0;
}

ul {
	margin-left: 0;
	padding-left: 1em;
}

li {
	margin-top: 0.2em;
	margin-left: 0;
	padding-left: 0;
}

h2 {
	margin-top: 1.5em;
	font-size: 1.4em;
	color: #666;
}

h3 {
	font-size: 1.1em;
}

#ledgerdisplay2 {
	margin-top: 30px;
}

#debug {
	background-color: #CC9966;
	padding: 2px;
	width: 800px;
	margin-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
}

.debug_widget {
	color: #333 !important;
	background-color: #ddd;
	padding: 30px;
	font-size: 0.7rem;
}

.debug_widget h2 {
	color: #333 !important;
}


#navbar_user {
	float: right;
	clear: right;
}

#navbar_user p {
	margin-bottom: 0.5em;
}


#topnav {
	clear: right;
	position: relative;
	z-index: 100;
}


/* TABLE STYLES **************************************************/

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

td.label {
	width: 6em;
}

#undermap {
	padding-bottom: 50px;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
}

#edit_table,
#undermap table {
	border-bottom: 2px solid #FFFFFF;
	table-layout: fixed;
	color: #666;
	line-height: 1.1;
}

#undermap table:not(#edit_table):not(#rate_table) {
	width: 100%;
	min-width: 543px;
}

#undermap #profit_table {
	width: 15em;
	border-collapse: separate;
	padding-bottom: 1em;
}

#edit_table #rate_table {
	margin-top: 5px;
	width: 100%;
	border-bottom: 1px solid #000000;
	border-right: 1px solid #000000;
	
}

#edit_table #rate_table td,
#edit_table #rate_table th {
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: none;
}

#edit_table #rate_table td.delete,
#edit_table #rate_table th.delete {
	border-top: none;
}


#edit_table td,
#edit_table th,
#undermap td, 
#undermap th {
	margin-top: 1px;
	margin-left: 1px;
	border-top: 2px solid #FFFFFF;
	background: #DDDDDD;
	padding: 6px 6px 6px 4px;
	border-left: 2px solid #FFFFFF;
	font-size: 10px;
	text-align: left;
	vertical-align: top;
	width: 5em; /*default */
}

#edit_table #rate_table tr:last-child th:not(.delete),
#edit_table #rate_table tr:last-child td:not(.delete) {
	border-bottom: 1px solid #000000;
}

#rate_table .delete {
	width: 8%;
	color: #bc3f3f;
	cursor: pointer;
}

.cost_change_date input,
.mile_cost input {
	width: 100%;
}


#row_controls {
	display: flex;
	justify-content: space-between;
}

#remove_row {
	display: none;
}


.ledger #undermap .selected td {
	background: #FFFFFF;
}

#undermap .polo td {
	background: #CCFF33;
}
#undermap .scenic td {
	background: #003399;
	color: #FFFFFF;
}
#undermap .scenic.service td {
	color: #000000;
}

#undermap .punto td {
	background: #99FFFF;
}

#undermap .micra td {
	background: #FF99FF;
}

#undermap .fiesta:not(.service) td {
	background-color: #D9B4FF;
}

#undermap .citroen:not(.service) td {
	background-color: #FF0;
}

#undermap .peugeot:not(.service) td {
	background: #999999;
	color: #FFFFFF;
}

#undermap .zafira:not(.service) td {
	background: #666666;
	color: #FFFFFF;
}

#undermap .focus:not(.service) td {
	color: #FFFFFF;
	background-color: #593335;
}

#undermap .polo2:not(.service) td {
	color: #FFFFFF;
	background-color: #03F;
}

#undermap .fiesta2:not(.service) td {
	color: #333;
	background-color: #DDB37D;
}

#undermap .service td {
	background: #EEEEEE;
}

#content #undermap td.warning {
	background: #FF3300;
}

#content #undermap td.non_fuel {
	background: #000000;
	color: #FFFFFF;
}

#content #undermap .extra_expense td:not(.car) {
	background: #000000;
	color: #FFFFFF;
}

#undermap .flag td {
	background: #FCC;
}

#undermap .duration, 
#undermap .miles, 
#undermap .endmiles, 
#undermap .trip_cost, 
#undermap .purchase_cost {
	text-align: right;
}


#undermap .endmiles {
	width: 5.5em;
}


#undermap .comment {
	width: auto;
	border-right: 2px solid #FFFFFF;
}

#undermap .comment div {
	min-width: 5em !important;
}


.trip_id span {
	position: absolute;
	left: 0;
	top: -12em;
}

.trip_id a {
	position: relative;
	/*background-clip: padding-box; */ /* stackoverflow.com/a/19047221 */
}


/* CONTROLS **************************************************/



#interface {
	padding: 10px 10px 0px;
	z-index: 10;
	color: #CCCCCC;
}

#interface label {
	width: 85px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	display: block;
	float: left;
	color: #CCCCCC;
	cursor: pointer;
	background-color: #725F5B;
	margin-right: 20px;
	margin-top: 10px;
}

#interface #label_all_cars,
#interface #label_all_drivers {
	position: absolute;
	right: 6px;
	top: -28px;
}

#fs_driver,
#fs_car,
#fs_display {
	clear: both;
	position: relative;
	display: none;
}


#account_picker ul {
	list-style-type: none;
}

#account_picker li {
	margin-bottom: 0.5em;
}

#account_picker li.all {
	margin-bottom: 1em;
}
#account_picker p {
	margin-bottom: 1.5em;
	margin-top: 1em;
}

#account_picker a, 
#account_picker a:link, 
#account_picker a:visited, 
#interface a, 
#interface a:link, 
#interface a:visited {
	color: #CCCCCC;
}

fieldset {
	border-style: none;
}

#fs_driver input, 
#fs_car input, 
#fs_display div label input {
	position: absolute;
	left: 4px;
	top: 9px;
	cursor: pointer;
}

#interface #fs_display label {
	float: none;
	width: 110px;
}
#interface #fs_display div {
	float: left;
}

#mcp_interface_reset {
	display: block;
}

#action_buttons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	height: 100%;
}


#action_buttons input {
	
}

#action_buttons a {
	position: absolute;
	right: 26px;
	top: 0px;
}

#interface  #submit2 {
	float: left;
}
#interface #period label {
	width: 13em;
	padding-left: 0px;
	
}
#interface #period select {
	width: 8em;
	font-size: 0.85em;	
}
#interface legend {
	font-size: 1.1em;
	font-weight: bold;
	color: #CCCCCC;
	margin-bottom: 0.4em;
}
/*.fswrap,
#interface fieldset:not(#fs_display) {
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
*/
#interface fieldset:not(:last-child) {
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.annual-accounts #interface.startup fieldset#period,
.trip-log #interface.startup fieldset#period,
.make-invoice #interface.startup fieldset#period {
	border-bottom-style: none !important;
}

.invoice-checker #interface form {
	display: flex;
	justify-content: space-between;
}

.invoice-checker #interface fieldset {
	border: none !important;
}



#modewrap {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#fs_driver label {
	
	margin-right: 20px;
	margin-top: 0px;
}

#fs_driver label:last-child {
	margin-right:0px;
}

#h2_undermap {
	margin-bottom: 30px;
	line-height: 150%;
	font-size: 1.2em;
	font-weight: normal;
	position: relative;
}

#h2_undermap a, 
#h2_undermap a:link, 
#h2_undermap a:visited {
	color: #FFFFFF;
}
	
#fs_driver div {
	clear: left;
	margin-top: 10px;
	padding: 3px;
	background: #3E2F2B;
	display:inline-block;
	margin-right: 10px;
}

#fs_driver #service_div label {
	background-color: #333333;
}

#edit_table {
	line-height: 1.3;
}

table#edit_table td,
table#edit_table th {
	padding-top: 2px;
	padding-bottom: 2px;
}

table#edit_table td.label {
	width: 10em;
}

table#edit_table td.editvalue {
	width: 20em;
}

#edit_table td.feedback {
	width: auto;
}

#edit_table tr.error td {
	background-color: #FF3300;
}

input#cost_per_mile,
input#year_summaries {
	width: 100%;
}


input#cost_per_mile {
	/* width: 200%; */
}


#csv0_submit,
#cancel_upload {
	position: relative;
	top: 1.6em;
}


.unselectable {
	cursor: default;
}


a.anchor {
	position: absolute;
	top: -80px;
}

.intro {
	font-size: 1.2em;
}

.home #loop {
	font-size: 1.1em;
}

.home #loop ul {
	margin-top: 20px;
}

iframe {
	margin-top: 30px;
}

a,
a:link,
a:visited {
	color: inherit;
}

#main a:hover {
	background-color:#bc3f3f;
}

#region_right h2 {
	font-size: 1.1em;
	margin-bottom: 1em;
}

#region_right .date {
	font-size: 0.8em;
	margin-top: 0.5em;
	margin-bottom: -0.3em;
}

#region_right .post {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
	margin-bottom: 0.5em;
}

.single h1 {
	margin-bottom: 1em;
}

iframe.google_calendar {
	position: relative;
	z-index: 1000;
	left: -210px;
}

#max_inv {
	display: none;
}

#login_link {
	color:#FFF;
	bottom: auto;
	top: 30px;
	right: 300px;
}

#table_end {
	position: relative;
	top: -200px;
}

#csv_uploader {
	width: 700px;
	color: #666;
}

#csvtable td.error {
	background-color: #FF3300;
}


.admin_only:before {
	content: "\F13E"; /* icon-unlock-alt */
	position: absolute;
	font-size: 0.8em;
	left: 5px;
	bottom: 1px;
	font-family: FontAwesome;
	z-index: 200;
	color: #FFF;
}

.hidden {
	display: none;
}

#secondary-navigation li {
	position: relative;
}


/* PROCESS MONITOR */

#monitor {
	border-top-width: 20px;
}

#monitor h2 {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	color: #ffffff;
}

#monitor .fa-check {
	color: #9F0;
	position: absolute;
	right: 0;
}

#monitor p,
#monitor label {
	margin: 0;
	max-width: 280px;
	position: relative;
}

p#monitor_title {
	/*background-color: #bc3f3f;*/
	margin-top: -33px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	width: 100%;
	max-width: none;
}

#monitor span {
	display: inline-block;
	width: 6em;
}

#monitor h4 {
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	/*font-weight: bold;*/
	text-transform: uppercase;
	margin-bottom: 0em;
}

#monitor label {
	display: block;
}


#monitor  #ledger_entries_label,
#cqtr_complete {
	display: none;
}

.archived_files {
	list-style: none;
	padding-left: 0;
}

/*** ANNUAL ACCOUNTS STUFF *****************************************************************/

.annual-accounts #balance_table,
.annual-accounts #car_table,
.annual-accounts #profit_table {
	background-color: #f8f8f8f8;
}

.annual-accounts #undermap td, 
.annual-accounts #undermap th {
	text-align: right;
	font-size: 0.8rem;
	background-color: transparent;
	width: 5em;
	color: #999;
	border-left: none;
	border-right: none;
}

.annual-accounts #undermap td:last-child, 
.annual-accounts #undermap th:last-child {
	width: 6em;
	padding-right: 1.5em;
}

.annual-accounts #balance_table td, 
.annual-accounts #balance_table th {
	width: 6em;
}

.annual-accounts #balance_table .totals, 
.annual-accounts #balance_table .totals {
	width: 6em;
}

.row_header {
	font-weight: bold;
}


.money:not(.row_header):before {
	content: "\00A3"; /* pound */
}

.negative.money:not(.row_header):before {
	content: "\02013\00A3"; /* pound */
}

#car_table {
	border-collapse: separate;
}


.annual-accounts #undermap .row_header,
.annual-accounts #undermap .totals {
	color: #333;
}

.annual-accounts #undermap .row_header {
	width: 8em;
	padding-left: 0;
}

.annual-accounts #undermap .totals {
	/*padding-right: 3em;*/
}

.annual-accounts #undermap .negative {
	color: #C00;
}

.annual-accounts #undermap .row_gross_trip_cost td {
	padding-bottom: 2em;
}

.annual-accounts #undermap .row_costs td {
	border-top: 1px solid #666;
	padding-bottom: 2em;
}

.annual-accounts #undermap .row_miles td,
.annual-accounts #undermap .row_service td,
.annual-accounts #profit_table .row_accruals td {
	padding-bottom: 1em;
}

.annual-accounts #car_table .row_trip_revenue td,
.annual-accounts #profit_table .row_surplus td {
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}

.annual-accounts #undermap td.assets {
	padding-top: 5em;
	padding-bottom: 1em;
	font-weight: bold;
}

.annual-accounts #container #mainContent {
	/* margin-left: 100px; */
}

.annual-accounts #mainContent #h2_undermap {
	margin-left: 115px;
}

.annual-accounts #balance_table .row_header {
	width: 7em;
	text-align: left;
	padding-left: 2em;
	font-weight: normal;
}

.annual-accounts #balance_table .bighead {
	padding-left: 1em;
	padding-top: 3em;
	font-weight: bold;
	text-transform: uppercase;
}

.annual-accounts #balance_table .sumhead {
	padding-left: 1em;
	padding-top: 0.5em;
	font-weight: bold;
	text-transform: uppercase;
}

.annual-accounts #balance_table tr[class^='row_ar_'] .row_header, 
.annual-accounts #balance_table tr[class*=' row_ar_'] .row_header{
	padding-left: 3em;
}

.annual-accounts #balance_table tr[class^='row_ar_'] .totals, 
.annual-accounts #balance_table tr[class*=' row_ar_'] .totals {
	padding-right: 5em;
}

.annual-accounts #balance_table tr.row_ar_total .totals {
	padding-right: 0em;
}

.annual-accounts #balance_table tr.row_ar_heading .row_header {
	padding-left: 2em;
	padding-top: 0.5em;
}

.annual-accounts #balance_table tr.row_ar_heading .totals {
	display: none;
}

#stopwatch {
	list-style: none;
	font-size: 0.6rem;
	line-height: 1;
}

#stopwatch .nodename {
	display: inline-block;
	width: 10em;
}

#stopwatch .total {
	margin-top: 0.5em;
	font-weight: bold;
}


/* INVOICE CHECKER ******************************************************************/

.invoice-checker #container #mainContent {
	color: #000;
}

.invoice-checker #undermap .fail {
	background-color: #F63;
}

.invoice-checker #undermap .other_inc {
	background-color: #FF3;
}

.invoice-checker #undermap .service {
	background-color: #9FF;
}

.invoice-checker #undermap .tax {
	background-color: #CFC;
}

.invoice-checker #undermap .courtesy {
	background-color: #99F;
}

.invoice-checker #undermap .accruals {
	background-color: #BF9495;
}










.controls {
	border: 3px solid #bc3f3f;
	border-radius: 15px;
	background-color: #543D37;
	padding: 15px;
	margin-bottom: 30px;
	box-shadow: inset 2px 2px 8px -4px rgba(0,0,0,0.75);
	color: #FFF;
}

#trip_input {
	width: 80%;
	margin-left: 20%;
}

#trip_input label {
	margin-bottom: 1em;
	display: block;
}


.fakelabel {
	font-weight: bold;
}

#fakeinput {
  width: 100%;
  outline: 0px !important;
  font-size: 0.8rem;
  text-overflow: ellipsis;
}

#copy_to_trip_log,
#upload,
#new_entry,
#export,
#import,
#csv0_submit,
#cancel_upload input,
#annual_accounts_submit,
#mcp_interface_submit,
#edit_data,
#swap_data,
#cancel_data,
#cqtr_complete,
#done {
	/* display: none; */
	width: 7em;
	float: right;
	border: 1px solid #333333;
	background-color: #666666;
	border-radius: 4px;
	color: #FFF;
	cursor: pointer;
	text-decoration: none;
	padding: 4px;
	position: relative;
	top: -3px;
	text-align: center;
	font-family: sans-serif;
	font-size: 1rem;
	line-height: normal;
}

#car_select_div {
	margin-bottom: 1em;
}

#label_only_uncopied {
	margin-top: 1em;
}

#copy_to_trip_log {
	float: right;
}

#trip_input h3 {
	color: #9F0;
}

#invoice_check_submit {
	width: 7em;
	border: 1px solid #333333;
	background-color: #666666;
	border-radius: 4px;
	color: #FFF;
	cursor: pointer;
	text-decoration: none;
	padding: 4px;
	position: relative;
	top: -3px;
	text-align: center;
	display: none;
}

.ledger #new_entry,
#annual_accounts_submit {
	display: block;
}

#new_entry:hover,
#export:hover {
	background-color: #bc3f3f;
}

#trip_input_submit {
	display:none;
}

#file2:hover {
	cursor: pointer;
}

.aside_head {
	margin-top: -0.25em;
}

#rightcol {
	font-size: 0.8rem;
	line-height: 1.4;
}

#rightcol li {
	margin-top: 0.5em;
}

#rightcol ol {
	padding-left: 1.1em;
}

.ledger #interface {
	display: none;
}


fieldset#annual {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

fieldset#fs_display {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

fieldset#period {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

.annual-accounts fieldset#annual,
.make-invoice fieldset#fs_display {
	display: none;
}

#quarters_select {
	margin-left: 20px;
}

#display_radio_div {
	display: flex;
	flex-direction: column;
	width: 60%;
}

#display_radio_div label {
	width: 100%;
	position: relative;
	padding-left: 2em;
	
}

#display_radio_div input {
	width: 100%;
	position: absolute;
	width: 1em;
	left: 0.5em;
	top: 0.5em;
}



#edit_mask {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
}

#smoky {
	background-color: #000;
	opacity: 0.8;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#modal_text {
	width: 50%;
	top: 30%;
	position: absolute;
	z-index: 9999999;
	left: 25%;
	padding-top: 1em;
	
}

.trip_change {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;	
	padding-top: 1.5em;
}

.trip_change p {
	margin-bottom: 0em;
	color: #CCC;
}

#modal_text h2 {
	margin-top: 0em;
	margin-bottom: 1em;
}



.reveal i:before {
	content: "\f13a";
	width: 1.3em;
	font-family: FontAwesome;
	font-style: normal;
}

.reveal.closed i:before {
  content: "\f138";
  /*cursor: pointer;
  display: inline-block;
  float: left;*/
  width:1.3em;
}

.reveal i {
	margin-right: 0.5em;
}




@media only screen and (min-width: 920px) {
	#display_radio_div {
		display: flex;
		flex-direction: row;
		width: auto;
	}
}

/* DRIVERS PAGE ******************************************************************/

ul.drivers {
	margin-top: 4em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #675451;
	margin-left: 0px;
	padding-left: 0px;
}

.drivers ul {
	margin-left: 0px;
	padding-left: 0px;
}

.cars li.car h2,
.drivers li.driver {
	margin-bottom: 1em;
	position: relative;
}

.drivers li {
	list-style-type: none !important;	
}

.account {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #675451;
}

.driver_name {
	display: inline-block;
	width: 10em;
	position: absolute;
	margin-left: 20px;
}

ul.drivers .address,
ul.drivers .phone {
	display: inline-block;
	margin-left: 10em;
}

.dummy_uid {
	display: none;
}

.drivers .edit_link {
	display: block;
	position: absolute;
	left: -5px;
	top: 1px;
	width: 1em;
	height: 1em;
	color: #EA3482;
}

.cars .edit_link {
	width: 1em;
	height: 1em;
	color: #EA3482;
	margin-right: 0.5em;
}

.cars .edit_link:hover,
.drivers .edit_link:hover {
	background: none !important;
}


/* CARS PAGE ******************************************************************/

.cars {
	list-style-type: none !important;	
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #675451;
}

.car {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #675451;
}

.car dt {
	display: inline-block;
	width: 10em;
	position: absolute;
}

.car dd {
	display: inline-block;
	margin-left: 10em;
}




.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 80%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}





.loader,
.loader:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
}
.loader {            
	margin: 60px auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #ffffff;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#loadingDiv {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
}

#page-header .wrapper {
	position: relative;
}

#loader {
	position:absolute;
	top: 0px;
	right: 0px;
	background: url(../images/loader.gif) center no-repeat #fff;
	height: 16px;
	width: 16px;
}

#undermap .start, 
#undermap .finish {
	width: 6.5em;
}

#undermap .car {
	width: 6em;
	white-space: nowrap;
}

#undermap .trip_id,
#undermap .id {
	width: 4em;
	white-space: nowrap;
}

#undermap .purchase_item {
	/*width: 7em;*/
}

#undermap .debit_ac, 
#undermap .credit_ac {
	width: 7em;
}

#undermap .transaction ,
#undermap .date {
	width: 6em;
}

#carpool_example {
	margin-top: -1.6em;
}




/*
This is for the triplog tables etc - at larger sizes
*/

@media 
	only screen and (min-width: 700px) and (max-width: 919px),
	only screen and (min-width: 1075px)
{
	
	#content {  
		/*background-color: #0CC;*/
	}
	
	#undermap .start, 
	#undermap .finish {
		width: auto;
	}
	
	

	
}