html{--c-brand:#e01212;--c-text:#444;--c-selected:#111;--c-button:#414a4c;--c-buttondark:#781010;--c-hover:#961414;--c-linkhover:#5a0c0c;--c-attention:#961414;--c-deinstall:#C3B28E;--c-jobdone:#9e9595;--c-assist:#feffeb;--c-lighttext:#fff;--c-lightgrey:#eeeeee;--c-darkgrey:#232b2b;--c-noteurgent:#CD0000;--c-notehigh:#F87531;--c-notelow:#c5b71d;--c-notenormal:#8a8770;--c-notebox:#fff8d6;--c-notehead:#e9cf63;}

.title {
	color: #499e59;
	font-size: calc(12px * var(--font-scale, 1));
	font-weight: bold;
	text-align: left;
	vertical-align: bottom;
	height: 20px;
}
.small {
	font-size: calc(9px * var(--font-scale, 1));
}
.medium {
	font-size: calc(12px * var(--font-scale, 1));
}
.large {
	font-size: calc(15px * var(--font-scale, 1));
}
.xlarge {
	font-size: calc(20px * var(--font-scale, 1));
}
.projectcolor {
	color:var(--c-brand, #e01212);
}
.backprojectcolor {
	background-color:var(--c-brand, #e01212);
}
.color1 {
	color:var(--c-attention, #961414);
}
.color3 {
	color:var(--c-deinstall, #C3B28E);
}
.color10 {
	color:var(--c-lighttext, #fff);
}
.addstop {
	background-color:#F7F0F0;
}
.duplicate {
	background-color:var(--c-assist, #feffeb);
}
.lastentry {
	background-color:#ECEBEB;
}

.saved {
	background-color:#513030;
}
.light {
	background-color:var(--c-button, #414a4c);
}
.dark {
	background-color:var(--c-buttondark, #781010);
}
.backcolor3 {
	background-color:var(--c-deinstall, #C3B28E);
}
.backcolor4 {
	background-color:var(--c-jobdone, #9e9595);
}
.black{
	background-color:#222;
}
.grey{
	background-color:var(--c-lightgrey, #eeeeee);
}
.grey2{
	background-color:var(--c-darkgrey, #232b2b);
}

.selected {
	color:#fff;
    background-color:var(--c-selected, #111);
}
.selected div, .selected a, .selected div div, .selected div div div, .selected div div h4, .selected div div h5{
	color:#fff;	/* selected row: white text (2026-10-23; was pinkish d4c1c1) */
}

body {
	margin: 0;
	padding: 0px;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(12px * var(--font-scale, 1));
	color: var(--c-text, #444);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #3B0B0B;
}
h1 {
	font-size: calc(16px * var(--font-scale, 1));
	color: #3B0B0B;
	padding-bottom: 5px;
	font-weight:bold;
	text-transform: capitalize;
}
h2 {
	font-size: calc(16px * var(--font-scale, 1));
	color: #BBBBBB;
}

h3 {

	text-transform: capitalize;
	font-size: calc(10px * var(--font-scale, 1));
	color: var(--c-button, #414a4c);
	padding-bottom: 3px;
	padding-top: 6px;
}
h4 {
	font-size: calc(16px * var(--font-scale, 1));
	color: var(--c-buttondark, #781010);
}
h5 {
	font-size: calc(12px * var(--font-scale, 1));
	color: #3B0B0B;
}
.spacer {
	height: 12px;
	width: 100px;
}
p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

a {
	text-decoration: none;
	color: #555;
	border-color: #d3d3d3;
}
a:hover, a.hover  {
	color: var(--c-linkhover, #5a0c0c);
	cursor: pointer;
	}
.border {
	border-color: #d3d3d3;
	border-style: solid;
	border-width: 1px 0 0 0;
}
/* the full-width line under each page's header: darker, like the warehouse table's header line (2026-10-21) */
.border[style*="width:100%;height:1px"] {
	border-top: 2px solid #999;
}
.padding {
	padding: 5px 0 5px 0;
}

.rightborder {
	width: 97%;
	float: left;
	border-color: #d3d3d3;
	border-style: solid;
	border-width: 0 0 0 1px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.list {
	padding-left: 10px;
	text-transform: capitalize;
	font-size: calc(12px * var(--font-scale, 1));

	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.location {
	overflow: hidden;

	padding-left: 10px;
	font-weight: bold;
	text-transform: capitalize;
	color: var(--c-attention, #961414);
	font-size: calc(14px * var(--font-scale, 1));
	line-height: calc(18px * var(--font-scale, 1));
	width: 20%;
	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.pen {
background-image: url("/images/icons.png");
background-position: top 0px left 0px;
}
.cl83 {
	line-height: calc(18px * var(--font-scale, 1));
	width:80%;
}
.attention {
	overflow: hidden;
    white-space: nowrap;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--c-attention, #961414);
	font-size: calc(14px * var(--font-scale, 1));
}
.searchtitle {

	font-weight: bold;
	text-transform: uppercase;
	color: var(--c-attention, #961414);
	font-size: calc(14px * var(--font-scale, 1));
	line-height: calc(20px * var(--font-scale, 1));
}
.notes {
	overflow: hidden;
    white-space: nowrap;
	text-transform: uppercase;
	color: var(--c-attention, #961414);
}

.day {
	font-weight: bold;
	text-transform: uppercase;
	font-size: calc(15px * var(--font-scale, 1));
	padding-top: 50px;
	padding-bottom: 15px;
}
.date {
	font-weight: bold;
	text-align: center;
	text-transform: capitalize;
	font-size: calc(20px * var(--font-scale, 1));
	padding-top: 8px;
	line-height: calc(16px * var(--font-scale, 1));
	width: 3%;

	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.clockinout {
	font-weight: bold;
	text-align: center;
	text-transform: capitalize;
	font-size: calc(20px * var(--font-scale, 1));
	padding: 20px 0 20px 0;
	line-height: calc(16px * var(--font-scale, 1));

	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.totaltitle {
		text-align:right;
	font-weight: bold;
	text-transform: uppercase;
	font-size: calc(12px * var(--font-scale, 1));
	padding-top: 10px;
	padding-bottom: 5px;
}
.total {
	text-align:right;
	font-weight: bold;
	text-transform: uppercase;
	font-size: calc(35px * var(--font-scale, 1));
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.month {
	float:right;
	font-weight: bold;
	text-transform: uppercase;
	font-size: calc(50px * var(--font-scale, 1));
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.account {
	margin-top:50px;
	text-transform: uppercase;
	font-size: calc(30px * var(--font-scale, 1));
}
.paid{
	margin-left:5px;
	margin-top:16px;
	text-transform: uppercase;
	font-size: calc(20px * var(--font-scale, 1));
	color:#C7C7C7;
}
.errors {
	color: var(--c-attention, #961414);
	font-weight: bold;
    padding-left:10px;
    padding-top:5px;
    font-size:calc(16px * var(--font-scale, 1));
}
.left {
	float: left;
	padding-right: 2px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.pright{padding-right:7px;}

.right {
	float: right;
}
.clear {
	clear: both;
}
ul, li {
	margin: 5px;
	padding-left: 0px;
	line-height:calc(16px * var(--font-scale, 1));
}

#wrapper {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 10px;
	padding-left: 10px;
	width: 80%;	/* the page's width with 10% free on each side (2026-10-21; was at most 900px) */
	box-sizing: border-box;
	height:100%;
}
@media only screen and (max-width: 700px) {
	#wrapper { width: 100%; }	/* phones: the whole width, the 10px padding is the edge */
}
.container {
	position: relative;
}
.container div {
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%)
}
.stickernotes p{
	margin:0px;
	padding:2px;
}
.arrow{
	width:23px;
	height:29px;
	margin-top:16px;
	margin-right:5px;
	background-image: url('/images/ui/arrow.gif');
	background-position: 0 0;
	cursor: pointer;
}
.flipped{
	margin-left:5px;
	margin-right:15px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.arrow:hover{
	background-position: 0 29px;
	cursor: pointer;
}

.arrow:active{
	background-position: 0 58px;
	cursor: pointer;
}

.tab{
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px 6px 0 0;
	border: 1px solid #d3d3d3;
	color: #000000;
	font-size: calc(12px * var(--font-scale, 1));
	background: #ffffff;
	text-decoration: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
    float:left;

    padding:8px;
    margin-right:2px;

    position:relative;
}
.tabselected a {
	color: #fff;
}
.tab:hover, .tab.hover, {
	color: #fff;
	background: var(--c-attention, #961414);
	text-decoration: none;
	cursor: pointer;
}
.tabselected {
	color: #fff;
	background: var(--c-hover, #961414);
	text-decoration: none;
	cursor: pointer;
}
/*******************************Forms *********************************/
.field, input, select {
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	border: 1px solid #d3d3d3;
	color: #000000;
	font-size: calc(15px * var(--font-scale, 1));
	background: #ffffff;
	text-decoration: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
textarea{
		-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	border: 1px solid #d3d3d3;
	}
.mapfield {
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	padding: 4px;
	margin-bottom:4px;
	border: 1px solid #d3d3d3;
	color: #000000;
	font-size: calc(14px * var(--font-scale, 1));
	background: #ffffff;
	text-decoration: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.field, input {
	padding: 8px;
}
select {
	padding: 7px;
}
.textarea_top {
	color: #123456;
	font-size: calc(14px * var(--font-scale, 1));
	width: 675px;
	height: 5px;
	padding: 0;
	margin: 0;
	border-width: 0;
	background-image: url(/images/forms/textarea_top.gif);
}
.textarea_middle {
	color: #123456;
	font-size: calc(14px * var(--font-scale, 1));
	width: 675px;
	height: 100px;
	padding: 10px 0;
	margin: 0;
	border-width: 0;
	background-image: url(/images/forms/textarea_middle.gif);
}
.textarea_bottom {
	color: #123456;
	font-size: calc(14px * var(--font-scale, 1));
	width: 675px;
	height: 5px;
	padding: 0;
	margin: 0;
	border-width: 0;
	background-image: url(/images/formsy/textarea_bottom.gif);
	background-repeat: no-repeat;
}
.login {
	height: 35px;
	width: 91px;
	padding: 0;
	margin: 0;
	border-width: 0;
	background-image: url(/images/forms/login.gif);
	background-repeat: repeat;
}

.button {
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	text-transform:capitalize;
	height:35px;
	border: 0px;
	color: #ffffff;
	font-size: calc(15px * var(--font-scale, 1));
	padding: 10px 20px 10px 20px;
	margin-right: 2px;
	text-decoration: none;
}
.week{
	-webkit-border-radius: 0px 6px 6px 0px;
	-moz-border-radius: 0px 6px 6px 0px;
	border-radius: 0px 6px 6px 0px;
	text-transform:uppercase;
	height:30px;
	border: 0px;
	color: var(--c-button, #414a4c);
	font-size: calc(11px * var(--font-scale, 1));
	padding: 9px 7px 5px 15px;
	text-decoration: none;
}
/* Invoices: the company's color swatch before the invoice number; no color set = an empty outline (2026-10-21) */
.invrow { position: relative; padding-left: 30px; padding-bottom: 12px; }	/* more room under the buttons and jobs (2026-10-23) */
.invbar[onclick], .invswatch[onclick] { cursor: pointer; }	/* the company color opens the company */
/* Invoices graphs: owed in the company's color, paid light grey so any company color stands out (2026-10-21) */
.monthsend .grey2 { background-color: #c9c9c9; }
.weekdates { margin-left: 8px; color: #777; }
.invbar { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: #e5e5e5; }
.invswatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #bbb; background: transparent; vertical-align: -2px; margin-right: 6px; box-sizing: border-box; }
/* Invoices: the line down the left edge, and the week date the black bar is over (2026-10-21) */
.monthtrack { position: fixed; left: 2px; top: 0; bottom: 0; width: 1px; background: #999; z-index: 1; }
.week.weekon, .week.weekon:hover { background: #000 !important; color: #fff !important; }
.week[id^="marker"] + .arrow2 { visibility: hidden; }	/* the triangle shows only on the date the bar is over, in the same black */
.week.weekon + .arrow2 { visibility: visible; border-left-color: #000; }
.week:hover, .week.hover {
	color: var(--c-deinstall, #C3B28E);
	text-decoration: none;
	cursor: pointer;
}
.arrow2{
	width: 0;
    height: 0;
    margin-top:3px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--c-lightgrey, #eeeeee);
}
.servicelist {
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	text-transform:capitalize;
	height:18px;
	border: 0px;
	color: #ffffff;
	font-size: calc(10px * var(--font-scale, 1));
	line-height: normal;
	font-weight:normal;
	background-color:var(--c-button, #414a4c);
	padding: 3px 4px 0px 4px;
	margin-right: 2px;
	margin-bottom: 2px;
	text-decoration: none;
}


/* icon buttons (edit, files, directions, call, report, invoice, delete ...): Font Awesome solid icons, all the same size (2026-10-21) */
.iconbtn {
	display: inline-block;
	width: 38px;
	height: 35px;
	padding: 0 !important;
	line-height: 35px;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	font-size: calc(15px * var(--font-scale, 1));
}
.iconbtn i { pointer-events: none; }
/* a text button that sits with the icon buttons (Users on Clients), same height (2026-10-21) */
.userbtn { display: inline-flex; align-items: center; height: 35px; padding: 0 12px !important; box-sizing: border-box; vertical-align: middle; }
/* a row's buttons: one line, centered, the same small gap (2026-10-21) */
.rowbtns { display: flex; align-items: center; gap: 4px; }
.rowbtns > a, .rowbtns > span { margin: 0 !important; }
.rowbtns > a[title="DELETE JOB"] { margin-left: 10px !important; }
/* dropdowns: the same height as the buttons around them (35px), not wider (2026-10-21) */
select, input[type=text], input[type=date], input[type=number], input[type=password], input[type=email], input[type=tel], input:not([type]) { height: 35px; }	/* text fields too, so they stay level with the dropdowns */
.bigtext select, .bigtext input[type=text], .bigtext input[type=date], .bigtext input[type=number], .bigtext input[type=password], .bigtext input:not([type]) { height: calc(35px * var(--font-scale, 1)); }
/* the bar buttons (search, date, + New, exports): all the same, 35px, dark red (2026-10-21) */
.barbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	min-width: 38px;
	padding: 0 12px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: var(--c-buttondark, #781010);	/* this site's dark button color (was Drop Pin's red for every site) */
	color: #fff !important;
	font-size: calc(14px * var(--font-scale, 1));
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: middle;
	-webkit-appearance: none;
}
.barbtn:hover { background: var(--c-hover, #961414); }
@media (max-width: 700px) { .xlsmore, a:has(.xlsmore) .fa-file-excel { display: none; } #search, #datepicker { width: 76px !important; } }	/* search and date boxes narrower: the row fits on one line (2026-10-23) */	/* XLS export buttons: just "XLS", no icon, on a phone (2026-10-23) */
.barbtn i { pointer-events: none; }
#search, #datepicker { height: 35px; box-sizing: border-box; vertical-align: middle; }
.jobsbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 18px; }
.jobsbar > div { float: none !important; margin: 0 !important; display: flex; align-items: center; gap: 6px; }
.button:hover, .button.hover {
	color: #fff;
	background: var(--c-hover, #961414);
	text-decoration: none;
	cursor: pointer;
}
.page {
	color: #000;
	background: #fff;
	border-color: #d3d3d3;
	border-style: solid;
	border-width: 1px;
	padding: 5px 10px 5px 10px;
}
.switchpad {
	margin-right: 0px;
	margin-left: 2px;
}
.submit {
	height:35px;
	-webkit-appearance: none;
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	border: 0px;
	color: #ffffff;
	font-size: calc(12px * var(--font-scale, 1));
	background: var(--c-button, #414a4c);
	padding: 10px 18px 10px 18px;
	margin-right: 5px;
	text-decoration: none;
}
.submit:hover, .submit.hover {
	background: var(--c-hover, #961414);
	text-decoration: none;
}

.item {
	height:35px;
	font-weight:normal;
	text-transform:capitalize;	
	font-size:calc(15px * var(--font-scale, 1));
	padding: 8px 12px 8px 12px;
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}


#atmpickup {
	display: none;
	padding-left: 7px;
	padding-top: 7px;
	background-color: #e5e5e5;
}
.reports {

}
.billingpadding {
	padding: 5px;
	border: 1px solid #CCCCCC;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.reportspadding {
	padding: 20px;
	border: 1px solid #CCCCCC;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.reportsimgpad{
padding-right:1%;	
}
.project, .loc-addr, .install, .vehicle, .sitesurvey, .compliance, .deinstall, .assign, .atm, .tech, .user, .contact, .signaturebox, .backdark, .bill{
	padding: 20px;
	-webkit-border-radius: 20;
	-moz-border-radius: 20;
	border-radius: 20px;
	border: 2px solid white;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
.project, .loc-addr, .assign, .atm, .tech, .user, .contact, .signaturebox, .backdark,.bill {
	float: left;
}
.signaturebox {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	padding: 20px;
	border-radius: 0px;
	width: 100%;
	border: 1px solid #CCCCCC;
}
.project {
	width: 54%;
}
.backdark, .project {
 	background-color: #444444;
	color: #fff;
}
.loc-addr, .bill {
	background-color: #EAEAEA;
	width: 46%;
}
.user {
	width: 50%;
	background-color: #444444;
}
.contact {
	background-color: #EAEAEA;
	width: 50%;
}
.install {
	background-color: #444444;
	margin-top:4px;
	border: 0px solid #CCCCCC;
}
.vehicle {
    background-color: #dde3f4;
    margin-top:4px;
    border: 0px solid #CCCCCC;
    }
/* VEHICLE INSPECTION REPORT: the blue fills its whole box instead of a box in a box (2026-10-23) */
.tech#vehicle { background-color: #dde3f4; }
.tech#vehicle > .vehicle { padding: 0; margin-top: 0; border-radius: 0; }
/* SIGNATURE: a red panel (2026-10-23); the signing pad inside stays light */
.tech#signature { background-color: #f6d4d4; border-color: #e3a3a3; }
.tech#signature h2 { color: #b3261e; }
.sitesurvey {
	background-color: #008080;
	margin-top:4px;
	border: 0px solid #00FFFF;
}
.compliance {
	text-transform: uppercase;
	background-color: #008080;
	margin-top:4px;
	border: 0px solid #00FFFF;
}
.vehicle h2{
        font-size: calc(16px * var(--font-scale, 1));
        color: #647b99;
    }
.install h3, .deinstall h3, .install h2, .deinstall h2, .project h3, .project h2, .sitesurvey h3, .sitesurvey h2, .compliance h3, .compliance h2 {
	padding-top: 5px;
	color: #ffffff;
}
.install input, .deinstall input, .vehicle input {
	padding: 5px;
}
.install select, .deinstall select, .vehicle select  {
	padding: 4px;
}
.deinstall {
	background-color: var(--c-deinstall, #C3B28E);
	margin-top:4px;
	border: 0px solid #CCCCCC;
}
.assign {
	width: 100%;
	border: 1px solid #CCCCCC;
	margin-top:2px;
}
.atm {
	width: 100%;
	border: 1px solid #CCCCCC;
	margin-top:4px;
}
.tech {
	width: 100%;
	border: 1px solid #CCCCCC;
	margin-top:4px;
}
.edit {
	position: absolute;
	width: 900px;
	max-width: calc(100% - 20px);
	box-sizing: border-box;
	left: 0;	/* left + right 0 with auto margins: centered on the page (2026-10-21; it sat at the left of the content) */
	right: 0;
	margin:0 auto;
	top: 10px;
	display: none;
	background-color: #ffffff;
	padding: 3px;
	margin-bottom: 20px;
	-webkit-border-radius: 20;
	-moz-border-radius: 20;
	border-radius: 20px;
	border: 1px solid #EAEAEA;
	-webkit-box-shadow: 7px 10px 26px 3px rgba(51,51,51,0.46);
	-moz-box-shadow: 7px 10px 26px 3px rgba(51,51,51,0.46);
	box-shadow: 7px 10px 26px 3px rgba(51,51,51,0.46);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	z-index: 2;
}
#editclose {
	z-index: 5;
}
.editwrapper {	/* the click-to-close background behind a job / form pop-up: fixed to the screen, so it covers every part of a long pop-up (2026-10-22; was 300% of the page) */
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
	display: none;
	background-color: rgba(0,0,0,.55);	/* the page behind a pop-up is darkened (2026-10-23) */
}

/*******************************Calendar Top Navigation*********************************/


div#calendar {
	margin: 0px auto;
	padding: 0px;
}
div#calendar div.box {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 40px;
	background-color: #787878;
}
div#calendar div.header {
	line-height: 40px;
	vertical-align: middle;
	position: absolute;
	top: 0px;
	width: 100%;
	height: 40px;
	text-align: center;
}
div#calendar div.header a.prev, div#calendar div.header a.next {
	position: absolute;
	top: 0px;
	height: 17px;
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: #FFF;
}
div#calendar div.header span.title {
	color: #FFF;
	font-size: calc(18px * var(--font-scale, 1));
}
div#calendar div.header a.prev {
	left: 10px;
}
div#calendar div.header a.next {
	right: 10px;
}
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content {
	border: 1px solid #787878;
	border-top: none;
}
div#calendar ul.label {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100%
}
div#calendar ul.label li {
	margin: 0px;
	padding: 0px;
	float: left;
	list-style-type: none;
	width: 14%;
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	color: #000;
	font-size: calc(15px * var(--font-scale, 1));
	background-color: transparent;
}
div#calendar ul.dates {
	float: left;
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
	margin-bottom: 5px;
	width: 100%;
}
/** overall width = width+padding-right**/
div#calendar ul.dates li {
	margin: 0px;
	padding: 0px;
	margin-right: 0.3%;
	margin-top: 5px;
	line-height: 80px;
	vertical-align: middle;
	float: left;
	list-style-type: none;
	width: 13.85%;
	height: 80px;
	font-size: calc(25px * var(--font-scale, 1));
	background-color: #DDD;
	color: #000;
	text-align: center;
}
:focus {
	outline: none;
}
/** cell format**/
.cell {
	display: none;
}
.nocell {
}



	
	#signatureparent {
		color:var(--c-button, #414a4c);
		/*max-width:600px;*/

	}
	
	/*This is the div within which the signature canvas is fitted*/
	#signature {
		border: 1px solid #CDCDCD;
		background-color:#F3F3F3;

	}


#map{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
#mapdiv{
	padding:15px;
	width:50%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	}
#right-panel{
	width:50%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	}
.menu{
	
}


@media only screen and (max-device-width: 480px) {
	.survey{
		width:100%;
	}

	#mapdiv{width:100%;clear:both;}
#right-panel{padding:15px;width:100%;clear:both;}
.date {
	height: 125px;
}
.day {
	clear:both;
}
.month {
	float: left;
}
.menu{
	height:auto;
}
.nocell {
	display: none;
}

.date {
	width: 8%;
}
.location {
	width: auto;
}
.list {
	width: auto;
}

.rightborder {
	width:92%
}
.cl83 {
	border:0px;
	width:100%;
}
.cell {
	display: inline
}
form .field, form input, form select {
	font-size: calc(12px * var(--font-scale, 1));
}
.project, .loc-addr, .install, .deinstall, .assign, .atm, .tech, .user, .contact, .vehicle {
	width: 100%
}
#users_a, #clients_a, #billing_a, #services_a, #projects_a, #calendar_a, #notes_a, #map_a, #logout_a , #timesheets_a {
	display: none;
}

.edit {
	left: 1%;
	width: 98%;
	right: 1%;
	margin-left: 0;
}
} /* end of @media (max-device-width: 480px): it was never closed, so anything added below would have been phone-only */

/* text size above 100% (Account > Text size, 2026-10-21): <html class="bigtext"> (php/colors.php user_style).
   The page widens with the text like a browser zoom (still never wider than the screen), controls grow to fit
   their text and the menus wrap as whole buttons. At 100% none of this applies. */
.bigtext .title { height: auto; min-height: calc(20px * var(--font-scale, 1)); }
.bigtext .button, .bigtext .submit, .bigtext .item { height: calc(35px * var(--font-scale, 1)); }
.bigtext .week { height: calc(30px * var(--font-scale, 1)); }
.bigtext .servicelist { height: auto; min-height: calc(18px * var(--font-scale, 1)); }
.bigtext .date { min-width: calc(27px * var(--font-scale, 1)); }
.bigtext .attention, .bigtext .notes { text-overflow: ellipsis; }
.bigtext .menu { display: flex; flex-wrap: wrap; row-gap: 6px; }
.bigtext .menu .button { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.bigtext textarea, .bigtext input[type=text], .bigtext select { max-width: 100%; }
/* Projects (2026-10-21): name and company, dates and a done bar, a jobs button that opens the list, one Import icon */
.projfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0; }
.projfilters .button { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; text-decoration: none; }
.projfilters .projcount { font-size: calc(12px * var(--font-scale, 1)); opacity: .75; }
.projfilters select { margin-left: 6px; }
.projempty { padding: 20px 4px; color: #777; }
.projrow { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 6px; padding: 8px 4px 8px 34px; border-top: 1px solid #999 !important; }
.projcolor { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: #e5e5e5; }
.projcolor2 { position: absolute; left: 0; bottom: 0; height: 50%; width: 24px; }	/* the project's own color: bottom half (2026-10-23) */
.projcolorpick { width: 26px; height: 22px; padding: 0; border: 0; margin: 0 6px 0 0; vertical-align: middle; cursor: pointer; background: none; }
.jobprojcolor { position: absolute; left: -24px; bottom: 0; height: 50%; width: 24px; }	/* jobs: the project's color under the company's */
.jobcomcolor { position: absolute; left: -24px; top: 0; height: 100%; width: 24px; cursor: pointer; }	/* the company's color opens the company */
.jobcomcolor.half { height: 50%; }
.jobprojcolor, .projcolor2 { cursor: pointer; }
@media (max-width: 700px) { .jobcomcolor { display: none; } }
.projrow > .clear { display: none; }
.projname { display: flex; flex-wrap: wrap; align-items: center; width: max-content; max-width: 100%; min-width: 0; }	/* as wide as the longest name on the page (projects.php sets it) */
.projtitle { flex: 1 1 100%; min-width: 0; font-size: calc(15px * var(--font-scale, 1)); font-weight: bold; color: var(--c-brand, #e01212); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projcompany { flex-basis: 100%; color: #666; font-size: calc(14px * var(--font-scale, 1)); }
.projsummary { flex: 1 1 180px; min-width: 160px; max-width: 320px; font-size: calc(13px * var(--font-scale, 1)); color: #555; }
.projdates { color: #222; font-size: calc(14px * var(--font-scale, 1)); }
.projbar { height: 6px; background: #e3e3e3; border-radius: 3px; overflow: hidden; margin: 4px 0 3px; }
.projbar span { display: block; height: 100%; background: var(--c-brand, #e01212); }
.projbar span.full { background: var(--c-buttondark, #781010); }
.projjobsbtn { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; margin: 0 !important; }
.projjobsbtn i { font-size: calc(11px * var(--font-scale, 1)); transition: transform .15s; }
.projjobsbtn.open i { transform: rotate(180deg); }
.projrow .rowbtns { margin-left: auto; margin-top: 0 !important; }
.projimport { margin: 0; display: inline-flex; }
.projimport input[type=file] { display: none; }
.projimport label { cursor: pointer; }
.projjobs { flex-basis: 100%; margin: 4px 0; border-top: 1px solid #ddd; }
.projjob { display: flex; gap: 14px; align-items: center; padding: 5px 6px; border-bottom: 1px solid #eee; color: #222; cursor: pointer; text-decoration: none; font-size: calc(14px * var(--font-scale, 1)); }
.projjob:hover { background: #f1f1f1; }
.projjob.cancelled { color: #999; text-decoration: line-through; }
.projjob .pjdone { width: 16px; color: var(--c-buttondark, #781010); }
.projjob .pjdate { width: 100px; flex: 0 0 auto; }
.projjob .pjtid { width: 110px; flex: 0 0 auto; font-weight: bold; }
.projjob .pjloc { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projjob .pjtech { width: 150px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; }
.projjob .pjstatus { width: 120px; flex: 0 0 auto; color: #777; font-size: calc(13px * var(--font-scale, 1)); }
@media (max-width: 700px) {
	.projname { width: 100%; }
	.projjob .pjtech, .projjob .pjstatus { display: none; }
	.projjob .pjdate { width: 80px; }
	.projjob .pjtid { width: 80px; }
}
/* Jobs on a phone (2026-10-22): no customer color, the job across the whole width, its buttons on their own line
   under it, clear of the right edge; the filters no wider than the screen */
.jobfilters select { width: 150px !important; box-sizing: border-box; }
::selection { background: var(--c-brand, #e01212); color: #fff; }	/* selected (highlighted) text: white (2026-10-23) */
.jobrow .rowbtns { margin-top: 5px !important; }	/* job buttons at the top of the job, not in the middle (2026-10-23) */
.filtersbtn { display: none !important; }	/* only on a phone */	/* the filter dropdowns all the same width (2026-10-23) */
@media (max-width: 700px) {
	.jobfilters { width: auto !important; max-width: 100%; }
	.jobfilters select { width: calc(50vw - 24px) !important; }	/* two to a line, equal */
	.jobfilters { display: none; }	/* behind the Filters button */
	.jobfilters.open { display: block; }
	body:not(.filtersopen):has(.filtersbtn) .jobsbar { display: none !important; }	/* search, date, XLS and + behind the filter button too (the line under them stays) */
	.filtersbtn { display: inline-flex !important; float: left; margin-top: 11px; background: #8a8a8a !important; color: #fff !important; font-size: calc(18px * var(--font-scale, 1)); }	/* a grey button, left of the date, centered on it */
	.month ~ .clear + .day { padding-top: 8px !important; }	/* less space under the date */
	.jobrow .padding.date { display: none !important; }	/* no day column on each job: the date is at the top */
	.jobrow .rightborder { border-left: 0 !important; }	/* and no line where the day column was */
	.jobrow .iconbtn { display: inline-flex !important; align-items: center; justify-content: center; width: 48px !important; height: 44px !important; line-height: 1 !important; padding: 0 !important; box-sizing: border-box; }	/* the job's buttons 25% bigger, the icon in the middle */
	.jobrow .iconbtn i { font-size: calc(19px * var(--font-scale, 1)) !important; line-height: 1 !important; margin: 0 !important; }
	.jobrow .rowbtns .nocell { display: none !important; }	/* the empty spacer before delete stays hidden (no gap) */
	.jobrow a.iconbtn[title="DELETE JOB"] { background: #c62828 !important; color: #fff !important; border: 0 !important; width: 36px !important; }	/* the delete X stands out from the grey job */
	.month { float: right !important; }	/* the date on the right */
	.jobsbar + .clear + .spacer { display: none; }	/* less space under the date row */
	.jobsbar { padding-top: 4px; padding-bottom: 9px; }	/* close under the logo; room under the search, date, XLS and + buttons */
	.border.jobrow { border-left: 0 !important; margin-left: 0 !important; }
	.jobrow .attention { white-space: normal; overflow: visible; text-overflow: clip; }	/* the red note wraps instead of being cut off */
	/* edge to edge: out over the page's 10px side padding (the VISIT line under a job too) */
	.border.jobrow, .border.jobrow + .border:not(.jobrow) { margin-left: -10px !important; margin-right: -10px !important; }
	.border.jobrow > .date, .border.jobrow + .border:not(.jobrow) > .date { padding-left: 6px; }
	.border.jobrow + .border:not(.jobrow) .right { margin-right: 10px; }
	/* the dividing lines on the Jobs page edge to edge too */
	#wrapper:has(.jobrow) .border[style*="width:100%;height:1px"] { width: calc(100% + 20px) !important; margin-left: -10px; margin-right: -10px; }
	/* the VISIT line's pen at its top right, like the job buttons */
	.border.jobrow + .border:not(.jobrow) { position: relative; min-height: 45px; }
	.border.jobrow + .border:not(.jobrow) .right { position: absolute; top: 5px; right: 10px; margin: 0 !important; }
	.jobrow .jobclientlink { display: none !important; }
	.jobrow > .rightborder { float: none; width: auto; overflow: hidden; }
	.jobrow .cl83 { width: 100%; }
	/* the buttons flush with the top of the job at the right; the job's name keeps clear of them */
	.border.jobrow { position: relative !important; }
	.jobprojcolor { display: none; }	/* phones have no color bar */
	.jobrow .rowbtns { float: none !important; position: absolute; top: 5px; right: 10px; display: flex; margin: 0 !important; }
	.jobrow .location { padding-right: 215px; min-height: 42px; box-sizing: border-box; }	/* clear of the bigger buttons */
	.jobrow .location .pright { white-space: normal; overflow-wrap: anywhere; }	/* a long name goes on to the next line */
}
/* Jobs: a tech's name stays on one line and the route button stays whole, so the button moves under the name when
   both do not fit (2026-10-22) */
.day .techname { white-space: nowrap; display: inline-block; margin-right: 4px; }
.day .routebtn { white-space: nowrap; display: inline-block; margin-top: 4px; }
@media (max-width: 700px) { .day .techname { display: block; margin-bottom: 2px; } }	/* phones: the route button always on its own line under the name */
/* Provider / users list on a phone (2026-10-22): the address at the left under the name, the buttons at the top right
   like Jobs (the hidden phone / fax column no longer pushes the address over) */
@media (max-width: 700px) {
	.border.userrow { position: relative; }
	.userrow .location { padding-right: 175px; min-height: 42px; box-sizing: border-box; }
	.userrow .userphones { width: auto !important; }
	.userrow .userphones br:only-of-type { display: none; }
	.userrow > div > .rightborder { float: none; width: auto; clear: both; border-left: 0; }
	.userrow .list { padding-left: 4px; text-align: left; }
	.userrow .list > div { float: none; }
	.userrow .rowbtns { position: absolute; top: 5px; right: 10px; float: none !important; margin: 0 !important; display: flex; }
}
/* Projects on a phone (2026-10-22): rows and dividing lines edge to edge, the buttons clear of the right edge */
@media (max-width: 700px) {
	.projrow { margin-left: -10px; margin-right: -10px; padding-right: 10px !important; }
	#wrapper:has(.projrow) .border[style*="width:100%;height:1px"] { width: calc(100% + 20px) !important; margin-left: -10px; margin-right: -10px; }
}
/* Invoices on a phone (2026-10-22): rows and dividing lines edge to edge, the buttons clear of the right edge */
@media (max-width: 700px) {
	.border.invrow { margin-left: -10px; margin-right: -10px; padding-right: 10px; }
	.invrow .location { width: auto !important; max-width: 100%; box-sizing: border-box; }	/* was a fixed 550px: wider than a phone */
	.invrow .location .servicelist, .invrow .location a { max-width: 100%; }
	.invrow > .rightborder { width: auto; float: none; overflow: hidden; }
	.invrow .invlong { display: none; }	/* INV and the date digits of the invoice number */
	.invrow .paid { float: none; clear: both; display: block; padding-left: 10px; }	/* the price on its own line under the jobs */
	/* the line right of the date runs the full height of the invoice; the buttons at the top right like Jobs */
	.border.invrow { display: flex; align-items: stretch; }
	.invrow > .date { flex: 0 0 auto; }
	.invrow > .rightborder { flex: 1 1 auto; min-width: 0; border-left: 1px solid #555 !important; }
	.invrow > .clear { display: none; }
	.invrow .rowbtns { position: absolute; top: 5px; right: 10px; float: none !important; margin: 0 !important; display: flex; }
	.invrow .location { padding-right: 100px; }
	#wrapper:has(.invrow) .monthtrack, #wrapper:has(.invrow) .monthlocation, #wrapper:has(.invrow) .week, #wrapper:has(.invrow) .arrow2 { display: none !important; }	/* the week markers down the left edge would cover the rows */
	#wrapper:has(.invrow) .border[style*="width:100%;height:1px"] { width: calc(100% + 20px) !important; margin-left: -10px; margin-right: -10px; }
}
/* Jobs, regular view: the VISIT line's buttons centered on its two lines of text, at the right like the job's (2026-10-22) */
@media (min-width: 701px) {
	.visitrow > .rightborder { display: flex; align-items: center; }
	.visitrow .visitbtns { margin: 0 0 0 auto !important; min-height: 0 !important; display: flex; align-items: center; gap: 4px; }
	.visitrow .visitbtns > a { margin: 0 !important; }
}
/* Jobs: no white gap between a black line and the job under it (the line's 1px height + the job's light top border) (2026-10-22) */
.border[style*="width:100%;height:1px"]:has(+ .jobrow) { height: 0 !important; }
.border[style*="width:100%;height:1px"] + .jobrow { border-top: 0 !important; }
/* Job / form pop-up on a phone (2026-10-22): the whole screen, edge to edge, no shadow or round corners; a big X that
   stays at the top right while scrolling; the Notes button hidden while it is open; its boxes open one at a time
   (popupBoxes() in php/admin/js/functions.js) */
@media (max-width: 700px) {
	.edit { left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important;
		min-height: 100vh; padding: 3px 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
	.edit > #editclose { position: fixed !important; top: 10px !important; right: 10px !important; width: 48px; height: 48px; padding: 0 !important;
		display: flex !important; align-items: center; justify-content: center; font-size: calc(26px * var(--font-scale, 1)) !important; font-weight: bold; border-radius: 50% !important;
		z-index: 12000 !important; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
	body:has(.edit[style*="block"]) #notesbutton, body:has(.edit[style*="block"]) #notesdock { display: none !important; }
	.pboxhead { cursor: pointer; display: block; padding-top: 12px !important; padding-bottom: 12px !important; margin-top: -8px !important; margin-bottom: -8px !important; min-height: 24px; }	/* a taller row to tap */
	.pbox { height: auto !important; min-height: 0 !important; }
	.pbox:not(.open) { cursor: pointer; }
	#pballbtn { position: fixed !important; top: 10px !important; right: 66px !important; height: 48px !important; display: inline-flex; align-items: center; gap: 6px;
		padding: 0 14px !important; margin: 0 !important; border-radius: 24px !important; font-size: calc(15px * var(--font-scale, 1)) !important; z-index: 12000 !important; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
	.pboxhead .pbchev { float: right; margin-right: 6px; font-size: calc(14px * var(--font-scale, 1)); transition: transform .15s; }
	.pboxhead.pbopen .pbchev { transform: rotate(180deg); }
	.pboxhead .pbchev.pbchevleft { float: none; margin: 0 8px 0 0; }	/* inside boxes: the arrow in front of the title */
	.pbox .pbox[style*="table-cell"] { display: block !important; }	/* the job type shows MACHINE / MACHINE DEINSTALL as a table cell: full width instead */
	.pbox .pbox { float: none !important; width: auto !important; clear: both; }	/* a box inside a box (MACHINE, SITE SURVEY...): full width, one under the other */
	.pbwrap:not(.pbhide), .pbwrap > *:not(.pbhide):not(.pbox) { display: block !important; float: none !important; width: auto !important; }	/* MACHINE DEINSTALL | MACHINE were table columns */
	.pbhide { display: none !important; }
	#editcontent .ticketnotebtns { display: none !important; }	/* + Note on this ticket / location / to ...: not on a phone */
	#editcontent .pboxhead.pbdarktitle { color: #333 !important; }	/* titles on light boxes: dark, easy to read */
	.editwrapper { background: #fff; }	/* the page under a short pop-up stays hidden: the pop-up fills the screen */
	.edit { overflow-x: hidden; }	/* nothing inside wider than the screen (it pushed the X off the side) */
	#editcontent select, #editcontent input, #editcontent textarea, #editcontent table, #editcontent img { max-width: 100% !important; box-sizing: border-box; }
}