@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
body, td, input, select, textarea, button {font-size:14px; font-family:"Open Sans",HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}
/* body {background:#dbdbdb url("../images/bg-header.jpg") repeat-x} */
h1, h2, h3, h4, h5 {
    color: #1F2937;
    font-weight: 500;
    /*font-family: "Lucida Grande", Lucida, Helvetica, Arial, Geneva, sans-serif;
    padding: 0;
    margin: 0*/
}
h1 {width:197px; height:76px; float:left; text-indent:-1000px; background-repeat:no-repeat; background-position:center; background-size:contain; background-origin:content-box; padding:10px}
h2 {font-size:28px; padding-top:32px}
h5 {border-bottom:1px solid #dedede}
h3 {font-size:24px; margin:5px 0}
h4 {font-size:20px; margin:15px 0 5px 0}
h5 {font-size:16px; margin-top:10px}
section h5:first-child {margin-top:5px}
a {color:#2375be}
a:hover {color:#1d4165}
table {border-collapse:collapse}
table.verticalAlignMiddle th, table.verticalAlignMiddle td {vertical-align:middle}
th, td {padding:0 10px 0 0}
th {text-align:left; vertical-align:top}

#sizer {background-color:white; width:90%; border-radius:5px; margin:40px auto 10px auto}
#menu {background-color:#1a6093}
#menu ul, ul.plain {list-style-image:none; list-style-type:none; padding:0; margin:0}
#menu li {float:left; border-right:1px solid #0a3c5e}
#menu a {color:white; text-decoration:none; display:block; padding:15px 25px}
#menu a:hover {background-color:#106faf}
/*#content {padding:10px; border-width:0 2px 2px 2px; border-style:solid; border-color:#bebebe}*/
.notice, .specialBorder {background:white url("../images/sidebar-bg.png") repeat-x; padding:10px; border:1px solid #dedede; margin:10px 0}
input[type="submit"], input[type="button"] {-webkit-appearance:none}
/*a.button, input[type="button"], input[type="submit"], button {color:white; text-decoration:none; background-color:#1a6093; display:inline-block; border:0 none transparent; padding:5px 10px; cursor:pointer}
a.button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {background-color:#106faf}
    */


form div.row {clear:both; overflow:hidden}
form div.row>label {float:left; font-weight:bold; width:85px}
form div.row>label, form.readOnly div.row>div, form div.row.noFormElement>div {padding:5px 3px 3px 0}
form div.row.noFormElement>div {overflow:hidden}
form div.row>div {padding:2px 0}
form div.row>div.floatLeft {float:left}
form div.row.fullWidth {width:auto}
form div.row.fullWidth>label {float:none}
form div.row.required>label::after {content:"*"; color:red; margin-left: 3px;}
form div.row div.belowLabel {float:left; clear:left}
form div.row div div.textareaWrapper {overflow:hidden}
/*form div.row.noFormElement>div {margin-left:80px}*/
form.small div.row>label {font-weight:normal; margin-right:5px}
form.labelsWidthAuto div.row>label {width:auto}
form.labelsFloatNone div.row>label {float:none}
form input[type="date"] {width:140px}
form input[type="number"] {width:65px}
select {max-width:100%}
textarea {width:100%; max-width:400px; height:85px; box-sizing:border-box}

form.customer div.row>label {width:115px}
/*form.customer div.row.noFormElement>div {margin-left:115px}*/
form.Location div.row>label {width:115px}
form.Equipment div.row>label {width:140px}
/*form.Equipment div.row.noFormElement>div {margin-left:145px}*/
form.serviceRequest div.row>label {width:115px}
/*form.serviceRequest div.row.noFormElement>div {margin-left:115px}*/
form.serviceRequestWide div.row>label {width:155px}
/*form.serviceRequestWide div.row.noFormElement>div {margin-left:155px}*/

.clearBoth {clear:both}
.notice {margin-bottom:15px}
.blockLinks a {display:block}
.tableSubstitute {display:none}
.tableSubstitute>div {margin-top:10px}
th.quantity, td.quantity {text-align:right}
td>h4 {padding:0; margin:0}
.specialBorder>h3:first-child, .specialBorder>h4:first-child {margin-top:0}
.floatColumns>div {float:left; margin-bottom:10px}
.floatColumns>div>div {margin-right:10px}
.floatColumns>div:last-child>div {margin-right:0}
.floatColumns.three>div {width:33%}
.floatColumns.three>div:last-child {width:34%}
.floatColumns.four>div {width:25%}
.filters div {float:left}
form.filters label {float:left; padding:2px 5px 0 0}
.afterFilters {clear:both; margin-bottom:5px}
div#records table th, div#records table td {padding:2px 10px 2px 2px}
div#records table tr.out {background-color:#c0c0c0}
a.button.new {margin-bottom:5px}
.buttons>a {float:left; width:90px; min-height:40px; text-align:center; background-position:center top; background-repeat:no-repeat; padding-top:55px; margin:0 5px}
.buttons>a:first-child {margin-left:0}
.buttons>a:last-child {min-height:0}
.buttons.customer_printer {float:left}
.buttons.customer_printer a {width:70px; min-height:0; padding-top:40px}
.buttons.customer_printer a:first-child {margin-left:10px}
.alarms>div {background-position:left top; background-repeat:no-repeat; min-height:35px; padding-left:41px; margin-top:10px}
.alarms {width:49%; box-sizing:border-box}
.alarms.meterReading {float:left}
.alarms.invoice {float:right}
.alarms a {display:block}
form.oneLine>div.row {float:left}
form.oneLine>div.row {clear:none}
form.oneLine>div.row>label {width:40px}
form.oneLine>div.row>div {width:auto; float:left; padding-right:20px}
.altTable>tbody>tr:nth-child(2n+1), tr.altRow {background-color:#dedede}
.altTable>thead>tr>th:first-child, .altTable>tbody>tr>td:first-child, tr.altRow>th:first-child, tr.altRow>td:first-child {padding-left:3px}

table.meterReadings td.CompanyName>a, table.meterReadings td.MakeModel>a {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.meterReadings td.ResourceCode, table.meterReadings td.ResourceCode>div {max-width:40px}
table.meterReadings td.PONumber, table.meterReadings td.PONumber>div {max-width:80px}
table.meterReadings td.ResourceCode>div, table.meterReadings td.PONumber>div {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
tr.warning td, a.warning, div.warning, span.warning, tr.warningNegative td, a.warningNegative, div.warningNegative, tr.warningAgreement td, a.warningAgreement, div.warningAgreement, .remoteServiceWarning {color:red}
tr.bucket {display:none}
tr.bucket.open {display:table-row}
td.Invoice input {width:81px}
tr.inactiveMonth {font-style:italic}
#MeterReadingsLiteDiv {position:absolute; left:0; right:0; margin:0}
table.meterReadings.multipleEquipment .MeterReadingDate, table.meterReadings.multipleEquipment .MonthAndYear, table.meterReadings.multipleEquipment .Usage, table.meterReadings.multipleEquipment .ServiceTotal, table.meterReadings.multipleEquipment .Recalculate {display:none}
#MeterReadingsLiteDiv.multipleEquipment .MeterReadingDate, #MeterReadingsLiteDiv.multipleEquipment .MonthAndYear, #MeterReadingsLiteDiv.multipleEquipment .Usage, #MeterReadingsLiteDiv.multipleEquipment .ServiceTotal, #MeterReadingsLiteDiv.multipleEquipment .Recalculate {display:none}
table.meterReadings.singleEquipment .ScheduledMeterReadingDate, table.meterReadings.singleEquipment .MeterReadingDate, table.meterReadings.singleEquipment .CustomerNumber, table.meterReadings.singleEquipment .CompanyName, table.meterReadings.singleEquipment .MakeModel, table.meterReadings.singleEquipment .SalesType, table.meterReadings.singleEquipment .ServiceTotal, table.meterReadings.singleEquipment .ResourceCode, table.meterReadings.singleEquipment .PONumber {display:none}
#MeterReadingsLiteDiv.singleEquipment .ScheduledMeterReadingDate, #MeterReadingsLiteDiv.singleEquipment .MeterReadingDate, #MeterReadingsLiteDiv.singleEquipment .CustomerNumber, #MeterReadingsLiteDiv.singleEquipment .CompanyName, #MeterReadingsLiteDiv.singleEquipment .MakeModel, #MeterReadingsLiteDiv.singleEquipment .SalesType, #MeterReadingsLiteDiv.singleEquipment .ServiceTotal, #MeterReadingsLiteDiv.singleEquipment .ResourceCode, #MeterReadingsLiteDiv.singleEquipment .PONumber {display:none}
table.meterReadings .Recalculate {text-align:center}
table.meterReadings.hideRecalculate .Recalculate {display:none}
#MeterReadingsLiteDiv.hideRecalculate .Recalculate {display:none}
table.meterReadings.hideEntered .Entered {display:none}
#MeterReadingsLiteDiv.hideEntered .Entered {display:none}
table.meterReadings.singleEquipment tr.bucket .MonthAndYear {display:none}
table.meterReadings.singleEquipment tr.total td {padding-top:10px}
table.meterReadings.singleEquipment tr.total .MonthAndYear, table.meterReadings.singleEquipment tr.average .MonthAndYear {font-weight:bold}
table.meterReadings.singleEquipment tr.average td {padding-bottom:10px}
#quickMemos {font-size:12px}
#quickMemos a {display:block}
.lightBGs>div>div>div {background-position:right top; background-repeat:no-repeat}

.tabContainer .tabs {display:none}
.tabContainer .tabs a {color:#1b6eae; text-decoration:none; background-color:#f6f6f6; background-repeat:no-repeat; background-position:4px center; padding:4px 8px; height:26px; overflow:hidden; float:left; border-width:1px; border-style:solid; border-color:#f0f0f0 #f0f0f0 #dedede #f0f0f0; margin-left:10px; cursor:pointer}
.tabContainer .tabs a.active {border-color:#dedede #dedede #f6f6f6 #dedede; cursor:default}
.js .tabContainer .tabs {display:block}
.js .tabContainer h3 {display:none}
.js .tabContent {display:none}
.js .tabContent.specialBorder {margin-top:-1px}
.js .tabContent.active {display:block}

form.Equipment section {padding:0 5px 5px 5px; border-width:2px; border-style:solid; margin-top:5px}
form.Equipment section.section1 {border-color:#9e9e9e}
form.Equipment section.section2 {border-color:#5b9bd4}
form.Equipment section.section3 {border-color:#ec7c30}
form.Equipment section.section4 {border-color:#ffc000}
form.Equipment section.section5 {border-color:black; margin-bottom:5px}

form.serviceRequest input[type="submit"] {clear:both}
form.serviceRequest>div.left {float:left; width:65%}
#serviceRequestEditEquipment {float:right; width:35%}
#ServiceRequestPartOrOrderItemDynamicTable input, #ServiceRequestPartOrOrderItemDynamicTable select {width:100%; box-sizing:border-box}
#ServiceRequestPartOrOrderItemDynamicTable .quantity input {text-align:right}
#ServiceRequestPartOrOrderItemDynamicTable .code {width:60px}
#ServiceRequestPartOrOrderItemDynamicTable .ServiceRequestPartItemFilterTD {width:100px}
#ServiceRequestPartOrOrderItemDynamicTable .numberOrName {width:100px}
#ServiceRequestPartOrOrderItemDynamicTable .quantity {width:50px}
#ServiceRequestPartOrOrderItemDynamicTable .price {width:62px}
#ServiceRequestPartOrOrderItemDynamicTable .price input {width:57px}
#ServiceRequestPartOrOrderItemDynamicTable .charge input {width:auto}
#ServiceRequestPartOrOrderItemDynamicTable #ServiceRequestPartNumberTD select {width:100%; box-sizing:border-box}
#ServiceRequestPartOrOrderItemDynamicTable td {white-space:nowrap}
table.serviceRequestNotes {width:100%}
table.serviceRequestNotes>thead>tr>th.Created {width:50px}
table.serviceRequestNotes>tbody>tr>td>textarea {width:100%; height:42px}
table.serviceRequestCalendar {width:100%}
table.serviceRequestCalendar>thead>tr>th {width:20%}
table.serviceRequestCalendar>tbody>tr>td.nonCurrentMonth {color:#a0a0a0; background-color:#e8e8e8}
table.serviceRequestCalendar>tbody>tr>td {border:1px solid black; padding:5px; vertical-align:top}

#signatureDiv {width:100%}
#signatureDiv {background-color:white; position:relative; border:1px solid black; margin:0 0 10px 0; user-select:none; touch-action:none}
#signatureDiv canvas, #signatureMouseDiv {width:100%; height:100%; position:absolute}
#signatureMouseDiv {z-index:1}
#signatureDiv .dot {border:1px solid black;/*width:2px; height:2px; background-color:black;*/ position:absolute; z-index:0}

div.PrinterReading>div.kvps>div {float:left; margin-right:15px}
div.PrinterReading>div.kvps>div>div {font-weight:bold}
div.PrinterReading pre {padding:0; margin:0}
div.PrinterReading .barGraph {height:200px; padding-top:15px}
div.PrinterReading .barGraph table {height:100%; float:left}
div.PrinterReading .barGraph td {vertical-align:top; padding:0}
div.PrinterReading .barGraph .yLabels {text-align:right; margin:-9px 3px 0 0}
div.PrinterReading .barGraph .yHashes td {width:8px; border-width:1px 1px 0 0; border-style:solid; border-color:black}
div.PrinterReading .barGraph .cartridge {border-bottom:1px solid black; margin-bottom:20px}
div.PrinterReading .barGraph .cartridge td {padding-left:10px; width:20px; height:100%; vertical-align:bottom}
div.PrinterReading .barGraph .cartridge td div, .barGraph .cartridge td span {overflow:hidden; text-align:center; width:40px; cursor:default}
div.PrinterReading .barGraph .cartridge td div {overflow:hidden; text-align:center; width:40px; box-sizing:border-box; border-width:1px 1px 0 1px; border-style:solid; border-color:black}
div.PrinterReading .barGraph .cartridge.rightSpacer td {width:0}

input[type="number"] {-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}

/*.wideChart {max-width:100% !important; height:auto !important; display:block}*/

@media (max-width: 1450px)
{
    table.meterReadings.multipleEquipment td.CompanyName, table.meterReadings.multipleEquipment td.CompanyName>div {max-width:126px}
    table.meterReadings.multipleEquipment td.MakeModel, table.meterReadings.multipleEquipment td.MakeModel>div {max-width:140px}
}

@media screen and (max-width: 1225px)
{
    .alarms {width:auto; box-sizing:content-box; float:none !important}
    .alarms>div {background-image:none !important; padding-left:0}
	table.meterReadings.multipleEquipment td.CompanyName, table.meterReadings.multipleEquipment td.CompanyName>div {max-width:100px}
}

@media screen and (max-width: 1200px)
{
	table.meterReadings.multipleEquipment .PONumber {display:none}
}

@media screen and (max-width: 1150px)
{
    #menu a {padding:5px 10px}

	table.meterReadings.multipleEquipment .CustomerNumber {display:none}
}

@media screen and (max-width: 1100px)
{
	table.meterReadings.multipleEquipment .Invoice {padding-right:0}
	table.meterReadings.multipleEquipment .ResourceCode {display:none}
}

@media screen and (max-width: 1000px)
{
	table.meterReadings.multipleEquipment .SalesType {display:none}
	table.meterReadings.multipleEquipment tr.bucket .MakeModel {display:none}
    form.serviceRequest>div.left, #serviceRequestEditEquipment {float:none; width:auto}
    #serviceRequestEditEquipment h3 {margin-top:10px}
}

@media (max-width: 950px)
{
	table.meterReadings.multipleEquipment .AgreementBase {display:none}
}

@media (max-width: 875px)
{
	table.meterReadings.multipleEquipment .AgreementOverage {display:none}
}

@media (max-width: 825px)
{
	table.meterReadings.singleEquipment .Entered {display:none}
}

@media (max-width: 775px)
{
	table.meterReadings.multipleEquipment .AgreementTotal {display:none}
	table.meterReadings.multipleEquipment tr.bucket .AgreementTotal {display:table-cell}
	table.meterReadings.multipleEquipment tr.bucket .Invoice {display:table-cell}
}

@media (max-width: 700px)
{
	body {margin:0}
    h1 {float:none}
    h2 {font-size:24px; padding:0 10px 10px 10px}
    h3 {font-size:18px}
    h4 {font-size:16px}
    #sizer {width:100%; border-radius:0; margin:0}
	#content {border-width:0; padding:3px}
    .floatColumns>div {width:auto !important; float:none}
    .floatColumns>div div {margin-right:0}
    .liteDisplayNone {display:none}
    .liteFloatNone {float:none !important; width:auto}
    .tableSubstitute {display:block}
}

@media (max-width: 660px)
{
	table.meterReadings.multipleEquipment .BeginningMeterReading, table.meterReadings.multipleEquipment tr.bucket .CompanyName {display:none}
	table.meterReadings.multipleEquipment tr.bucket .BeginningMeterReading {display:table-cell}
}

@media (max-width: 625px)
{
	table.meterReadings.multipleEquipment .MakeModel, table.meterReadings.multipleEquipment tr.bucket .ScheduledMeterReadingDate {display:none}
	table.meterReadings.singleEquipment .AgreementBase {display:none}
    table.meterReadings.multipleEquipment tr.bucket .BucketName {padding-left:3px}
}

@media (max-width: 550px)
{
	table.meterReadings.singleEquipment .AgreementOverage {display:none}
}

@media (max-width: 500px)
{
    form div.row.noFormElement>div {margin-left:0 !important}
    form.serviceRequestWide div.row>label, form.serviceRequestWide div.row>div {float:none; width:auto}
}

@media (max-width: 450px)
{
	table.meterReadings th, table.meterReadings td, table.meterReadings input, #MeterReadingsLiteDiv {font-size:11px}
    table.meterReadings.multipleEquipment th, table.meterReadings.multipleEquipment td {padding-right:4px}
	table.meterReadings.multipleEquipment td.CompanyName, table.meterReadings.multipleEquipment td.CompanyName>div {max-width:120px}
	table.meterReadings input[type="number"] {width:49px}
    table.meterReadings input[type="text"] {width:53px}
	#MeterReadingsLiteDiv {padding:3px}
	table.meterReadings .ScheduledMeterReadingDate span {display:none}
    #ServiceRequestPartOrOrderItemDynamicTable .code {width:40px}
    #ServiceRequestPartOrOrderItemDynamicTable .ServiceRequestPartItemFilterTD {width:50px}
    #ServiceRequestPartOrOrderItemDynamicTable .numberOrName {width:54px}
    #ServiceRequestPartOrOrderItemDynamicTable .quantity {width:25px}
    #ServiceRequestPartOrOrderItemDynamicTable .price {width:50px}
    #ServiceRequestPartOrOrderItemDynamicTable .hideIfNeeded {display:none}
}

@media (max-width: 400px)
{
	table.meterReadings.singleEquipment .Usage {display:none}
}

@media (max-width: 350px)
{
	table.meterReadings.singleEquipment .AgreementTotal {display:none}

    @viewport {width:device-width}
}

@media print
{
    a {color:black; text-decoration:none}
    #top {display:none}
    .printDisplayNone {display:none}
    .printDisplayBlock {display:block}
    #sizer, #content, .specialBorder {background:none; padding:0; border:0 none transparent; margin:0; border-radius:0}
    #sizer {width:auto}
    .tabContainer .tabs div {display:none}
    .tabContainer .tabs div.active {color:black; display:block}
}