/* start from stream-feed.css */
@import url('./fonts/roboto-regular.css');
@import url('./fonts/roboto-light.css');
@import url('./fonts/roboto-thin.css');
@import url('./fonts/material-icons.css');
/* end from stream-feed.css*/

/*to be placed*/
.noTrigger {
  display:none;
}

/*===========================================================================

Coolfront Colors:

#75AADB Primary Blue
#0C5CAD Hilite Blue
#3F6075 Dark Blue
#BAD80A Hilite Green
#1EB53A Dark Green
#D62828 Red
#BABABA Gray


/*===========================================================================
  General Styles
===========================================================================*/

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
    /* Prevent font scaling in landscape */
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
body   {margin:0;padding:0;font-size:14px;font-family: robotoregular, sans-serif !important;background: none;}

input  { font-size:inherit; padding:2px 4px;}

/*ticket #4797  apply defaults to fix inconsistent appearence of input buttons caused by ios user agent style sheet */
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 5px;
     font-family: robotoregular;
}


select { font-size:1.1em; padding:4px; }

html{
  min-height:100%;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top,  #fff 5%, #fff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#fff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fff 5%,#fff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fff 5%,#fff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fff 5%,#fff 100%); /* IE10+ */
  background: linear-gradient(top,  #fff 5%,#fff 100%); /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=0 );*/ /* IE6-9 */
}

/* No borders on images for IE */
img {
  border:0;
}

.infoText, .partInfoText { color:#7B7B7B; font-size:14px;}

.partMessage {
  color:#75AADB;
  font-weight: bold;
  margin-bottom: 15px
}

.emailUsed{
  font-size: 1.1em;
  font-weight:bold;
  font-family:"Courier New";
}

.ios-status-bar-bug { margin-top: 20px;}

.betaTag{
  text-align: center;
  vertical-align: middle;
  background-color: orange;
  padding: 6px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#boxPage {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

.footNote{
  font-size: 0.8em;color: gray;margin:10px
}


.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*===========================================================================
  errors and notifications
===========================================================================*/
.alert {
  display:none;
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alertDanger,
.alertError,
.alert-danger,
.alert-error {
  color: #b94a48;
  /*background-color: #f2dede;
  border-color: #eed3d7;*/
  background-color: #fff;
}

.alertSuccess,
.alert-success {
 /* background-color: #dff0d8;
  border-color: #d6e9c6;*/
  color: #468847;
  background-color: #fff;
}

.alertInfo,
.alert-info {
  /*background-color: #d9edf7;
  border-color: #bce8f1;*/
  color: #4A4A4A;
  background-color: #fff;
}

/*===========================================================================
  Page transitions
===========================================================================*/
.page {
  position: relative;
  margin: auto;
  /*min-height: 100%;*/
  top: 0;

  /*background: #D2E1ED;*/
  background: #f5f5f5;

  /*background: #f5f5f5;
  background: -moz-linear-gradient(top,  #D2E1ED 0%, #f5f5f5 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2E1ED), color-stop(50%,#f5f5f5));
  background: -webkit-linear-gradient(top,  #D2E1ED 0%,#f5f5f5 50%);
  background: -o-linear-gradient(top,  #D2E1ED 0%,#f5f5f5 50%);
  background: -ms-linear-gradient(top,  #D2E1ED 0%,#f5f5f5 50%);
  background: linear-gradient(top,  #D2E1ED 0%,#f5f5f5 50%);*/

  /*border: 1px solid #888;*/
  border-top: 0;
}

#loginNeeded, #updateSchema{
  z-index:100;
}

#app, #loginNeeded, #updateSchema {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

/*#page {
  margin-top:60px;
}*/

.sticky {
  position: fixed;
  /*top: 0;*/
  width: 100%;
}

.topAppBar.sticky {
  position: fixed;
  /*top: 0;*/
  width: 100%;
}

#feedNav.sticky {
  position: fixed;
  /*top: 0;*/
  width: 100%;
}

/*.sticky + .appLayout {
  padding-top: 61px;
}*/

#page.noFeedNav {
  margin-top:0;
}


/* BIG SCREENS */
@media screen and (min-device-width: 1025px) {

  html {
    /* Allow scaling on computers */
    -webkit-text-size-adjust: auto;
    -ms-text-size-adjust: auto;
  }

  .page{
    border-top: 0;
  }

}


/*************************************************************/
/* TODO: figure out how to do this without hard-coding sizes */
/*************************************************************/

.stageLeft {
  left: -100%;
}

.stageRight {
  left: 100%;
}

.stageBottom {
  top: 100%;
}

.stageCenter {
  top: 0;
  left: 0;
}

.transition {
  -moz-transition-duration:     .5s;
  -ms-transition-duration:      .5s;
  -webkit-transition-duration:  .5s;
  -o-transition-duration:       .5s;
}



/* define reusable responsive-table class
derived from:
CHRIS COYIER ON APRIL 27, 2011 https://css-tricks.com/examples/ResponsiveTables/responsive.php */
.responsive-table td.divider {
  display:none;
}

@media only screen and (max-width: 420px) {

  .responsive-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 8px;
  }

  .responsive-table th,
  .responsive-table td {border: 1px solid #aaa; text-align: center}

  .responsive-table th,
  .responsive-table td {padding: 0.5em}

  .responsive-table td {background-color: #fff}
  .responsive-table th {background-color: #fff}


  /* Hide table headers (but not display: none;, for accessibility) */
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table tr {
    border: 1px solid #ccc;
    background-color: #fff;
  }


  .responsive-table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight:bold;
    text-align:left;
  }

}


/* ***************************************
Start Account purchase history table styling
****************************************/

#purchaseHistory.responsive-table .iprRecordTool {
  visibility: hidden;
  text-align: center;
  /* width:      0px;
  height:     0px;
  padding:    0px;
  margin:     0px;
  border:     0px; */
}

/* in wide mode don't show the divider column */
#purchaseHistory.responsive-table td.divider {
  display:none;
}
/*
//apply purchase history specific responsive table styling
derived from:
CHRIS COYIER ON APRIL 27, 2011 https://css-tricks.com/examples/ResponsiveTables/responsive.php */
@media only screen and (max-width: 420px) {

  /* Force table to not be like tables anymore */
  #purchaseHistory.responsive-table table,
  #purchaseHistory.responsive-table thead,
  #purchaseHistory.responsive-table tbody,
  #purchaseHistory.responsive-table th,
  #purchaseHistory.responsive-table td,
  #purchaseHistory.responsive-table tr {
    display: block;
    border:none;
    /* border-radius:10px; */
  }

  #purchaseHistory.responsive-table tbody{
    border: 1px solid #ccc;
    border-radius:10px;
    background-color:#fff;
  }

  #purchaseHistory.responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align:right;
    margin:5px;
    border-radius: 0px;
  }

  /*
  Label the data
  */

  #purchaseHistory.responsive-table td:nth-of-type(1):before { content: "Date"; }
  #purchaseHistory.responsive-table td:nth-of-type(2):before { content: "# Purchased"; }
  #purchaseHistory.responsive-table td:nth-of-type(3):before { content: "Payment Method"; }
  #purchaseHistory.responsive-table td:nth-of-type(4):before { content: "$ Amount"; }
  #purchaseHistory.responsive-table td:nth-of-type(5):before { content: "Tax"; }
  #purchaseHistory.responsive-table td:nth-of-type(6):before { content: "Total"; }

  /* trim border on last element */
  #purchaseHistory.responsive-table td.lastColumn{
    border:none;
  }
  /* Style a purchase record divider */
  #purchaseHistory.responsive-table td.divider {
    display:block;
    background-color: #aaa;
    border-radius:0px;
    margin: 0px;
    padding:2px 0px 2px 0px;
    height:1px;
  }

  #purchaseHistory.responsive-table .iprRecordTool {
    border-top: 1px solid #eee;
    padding: 0.5em;
  }
}

/* ***************************************
End Account Purchase history table styling
****************************************/


/* ***************************************
Start Account company invoice table styling
copied from purchase history table styling
****************************************/


/* in wide mode don't show the divider column */
#companyInvoices.responsive-table td.divider {
  display:none;
}
/*
//apply purchase history specific responsive table styling
derived from:
CHRIS COYIER ON APRIL 27, 2011 https://css-tricks.com/examples/ResponsiveTables/responsive.php */
@media only screen and (max-width: 420px) {

  /* Force table to not be like tables anymore */
  #companyInvoices.responsive-table table,
  #companyInvoices.responsive-table thead,
  #companyInvoices.responsive-table tbody,
  #companyInvoices.responsive-table th,
  #companyInvoices.responsive-table td,
  #companyInvoices.responsive-table tr {
    display: block;
    border:none;
    /* border-radius:10px; */
  }

  #companyInvoices.responsive-table tbody{
    border: 1px solid #ccc;
    border-radius:10px;
    background-color:#fff;
  }

  #companyInvoices.responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align:right;
    margin:5px;
    border-radius: 0px;
  }

  /*
  Label the data
  */

  #companyInvoices.responsive-table td:nth-of-type(1):before { content: "Start Date"; }
  #companyInvoices.responsive-table td:nth-of-type(2):before { content: "End Date"; }
  #companyInvoices.responsive-table td:nth-of-type(3):before { content: "Paid Date"; }
  #companyInvoices.responsive-table td:nth-of-type(4):before { content: "Total"; }
  #companyInvoices.responsive-table td:nth-of-type(5):before { content: "Status"; }

  /* trim border on last element */
  #companyInvoices.responsive-table td.lastColumn{
    border:none;
  }
  /* Style a purchase record divider */
  #companyInvoices.responsive-table td.divider {
    display:block;
    background-color: #aaa;
    border-radius:0px;
    margin: 0px;
    padding:2px 0px 2px 0px;
    height:1px;
  }

}

/* ***************************************
End System Invoice table styling
****************************************/

@media only screen and (max-width: 420px) {

  /* Force table to not be like tables anymore */
  #notificationRequestList.responsive-table table,
  #notificationRequestList.responsive-table thead,
  #notificationRequestList.responsive-table tbody,
  #notificationRequestList.responsive-table th,
  #notificationRequestList.responsive-table td,
  #notificationRequestList.responsive-table tr {
    display: block;
    border:none;
    /* border-radius:10px; */
  }

  #notificationRequestList.responsive-table tbody{
    border: 1px solid #ccc;
    border-radius:10px;
    background-color:#fff;
  }

  #notificationRequestList.responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align:right;
    margin:5px;
    border-radius: 0px;
  }

  /*
  Label the data
  */

  #notificationRequestList.responsive-table td:nth-of-type(1):before { content: "Date"; }
  #notificationRequestList.responsive-table td:nth-of-type(2):before { content: "Delivery Type"; }
  #notificationRequestList.responsive-table td:nth-of-type(3):before { content: "Title"; }
  #notificationRequestList.responsive-table td:nth-of-type(3):before { content: "Description"; }
  #notificationRequestList.responsive-table td:nth-of-type(3):before { content: "classGroup"; }
  #notificationRequestList.responsive-table td:nth-of-type(3):before { content: "class"; }

  #notificationRequestList.responsive-table td:nth-of-type(4):before { content: "Action"; }
  /* trim border on last element */
  #notificationRequestList.responsive-table td.lastColumn{
    border:none;
  }
  /* Style a purchase record divider */
  #notificationRequestList.responsive-table td.divider {
    display:block;
    background-color: #aaa;
    border-radius:0px;
    margin: 0px;
    padding:2px 0px 2px 0px;
    height:1px;
  }

  #notificationRequestList.responsive-table .iprRecordTool {
    border-top: 1px solid #eee;
    padding: 0.5em;
  }
}



/* iOS/android phone landscape screen width*/
@media screen and (max-device-width: 480px) and (orientation:landscape) {
  .stageLeft {
    right: 0;
  }

  .stageRight {
    left: 0;
  }

}



/*===========================================================================
  Top bar and App layout
===========================================================================*/
#syncText{
  color: #BABABA;
  padding: 2px;
  font-size: 0.9em;
  text-align: center;
}

.toolbar{
  /* height:         40px; */
  min-height:     40px;
  position:       relative;
  top:            0;
  left:           0;
  right:          0;
  text-align:     center;
  /*border-bottom:  2px solid #35637B;
  border-top:     1px solid #7EB5DC;*/

  background: #D8D8D8;

  /*background: #386689;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #71A6CC 0%, #2A5773 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#71A6CC), color-stop(100%,#2A5773));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #71A6CC 0%,#2A5773 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #71A6CC 0%,#2A5773 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #71A6CC 0%,#2A5773 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #71A6CC 0%,#2A5773 100%);*/ /* W3C */

  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71A6CC', endColorstr='#2A5773',GradientType=0 );*/ /* IE6-9 */
}

.listPage .toolbar {
  border-bottom: 1px solid #ADADAD;
  /*border-right: 1px solid #D2E1ED;*/
}


.toolbar.dark{
  border-bottom: 1px solid #000;

  background: #858585;

  /*background: #919191;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #919191 5%, #515151 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#919191), color-stop(100%,#515151));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #919191 5%,#515151 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #919191 5%,#515151 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #919191 5%,#515151 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #919191 5%,#515151 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#515151',GradientType=0 );*/ /* IE6-9 */
}



.toolbar.workOrder {
  background: transparent;
}

.toolbar.content {
  height:75px;
}

.toolbar.leftNav {
  height:50px;
  background:#fff;
  border:0;
  border-radius: 10px;
  width:236px;
  /* margin:8px; */
}

.topAppBar {
  /*position:fixed;*/
  /*top:0;*/
  position:relative;
  /*width:100%;*/
  height:45px;
  padding:8px;
  z-index:100;
  max-width:1006px;
  background-color:#FFF;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  border-left:1px solid #D8D8D8;
  border-right:1px solid #D8D8D8;
}

.topAppBarShadow {
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.homePage .toolbar.leftNav {
  margin-top:0px;
}

.pageHelper{
  position:         absolute;
  right:            5px;
  top:              5px;
}

.toolbar .title, .toolbar h1{
  color:            #4A4A4A;
  display:          inline-block;
  margin: 0;
  font-size:        1.3em;
}

/*.toolbar .title {
  color:            #D8D8D8;
}*/

.toolbar h1 {
  font-size: 1.2em;
}

.toolbar .title {
  width:100%;
  padding-top:      10px;
  font-stretch:     ultra-condensed;
  font-weight:      100;
}

.toolbar h1 {
  padding-top:      11px;
  font-weight:      normal;
}

/*.toolbar h1.listTitle {
  color:#5DA0CC;
  background-color: #fff;
  padding: 5px 30px;
  margin-top:5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}*/

.dark.toolbar .title, .dark.toolbar h1{
  color:            #FFFFFF;
  text-shadow:      0 -1px 1px #333;
}

.toolbar .back{
  position:         absolute;
  top:              5px;
  left:             5px;
}

.page.approvalPage .toolbar .back {
  margin-left:15px;
}

.toolbar .back.navButton{
  position:         absolute;
  top:              15px;
  left:             20px;
}

/* instruction text overlaps tabs */
@media screen and (max-width: 520px){
  .tapInstructionsContainer{
    display:none;
  }
}

.toolbar .tabs{
  position: absolute;
  bottom:   0;
  margin-left: 80px;
}

.toolbar .tabs .tab {
  float:    left;

  color:              #FFFFFF;
  border-top:         1px solid #D8D8D8;
  border-left:        1px solid #D8D8D8;
  border-right:       1px solid #D8D8D8;

  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        none;
  font-size: 0.9em;
  font-weight: normal;

  background: #0C5CAD;

  /*background: #587e9d;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0C5CAD 0%, #587e9d 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C5CAD), color-stop(100%,#587e9d));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C5CAD', endColorstr='#587e9d',GradientType=0 );*/ /* IE6-9 */
}

.tab, .tab a {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tab a {
  display:inline-block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
}

.tab .selected{
  color: #000;
  background-color: #f5f5f5;
  font-weight: bold;
}


.listPage {
  /*background:#808080;*/
  background:#f1f1f1;
  height:100%;
}

.listPage.homePage {
  padding-top:8px;
}

#navigationPane{
  width: 256px;
  min-width: 256px;
  /*border-right: 1px solid #666;*/
  /*background:#808080;*/
  background:#f1f1f1;
  -moz-transition:      width 0.5s;
  -ms-transition:       width 0.5s;
  -o-transition:        width 0.5s;
  -webkit-transition:   width 0.5s;
  transition:           width 0.5s;
}

.contentPaneContent {
  background: #f5f5f5;
  border: 1px solid #888;
  border-top: 0;
  border-left:0;
  padding-bottom:1px;
}

.contentPaneContent.internalPrint {
  background: #fff;
  border:0;
}

.contentPanePlaceholder {
  /*background: url('/images/placeholder-bg.jpg');*/
  background: #f5f5f5;
  background: #c5c5c5; /* Old browsers */
  background: -moz-linear-gradient(top,  #f1f1f1 0%, #f5f5f5 15%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(15%,#f5f5f5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f1f1f1 0%,#f5f5f5 15%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f1f1f1 0%,#f5f5f5 15%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f1f1f1 0%,#f5f5f5 15%); /* IE10+ */
  background: linear-gradient(top,  #f1f1f1 0%,#f5f5f5 15%); /* W3C */

  border: 1px solid #888;
  border-top: 0;
  border-left:0;
}

#contentPane .page {
  border:0;
}

#navigationPane, #contentPane{
  vertical-align: top;
  position: relative;
  margin-bottom:100px;
}

#navigationPane .page{
  z-index: 1;
}

#navigationPane .longTitle{
  display:none;
}

#navigationPane .shortTitle{
  display:inline;
}

#showNavigation {
  display: none;
  position: absolute;
  top:  4px;
  left: 4px;
}

#coolLayout {
  display:none;
}

.appLayout {
  width:100%;
  /*margin-top:60px;*/
  margin-bottom: 20px;
}

.page hr {
  border: 0;
  border-top: 1px solid #ccc;
}

.page{
  min-height: 592px;
  border: 1px solid #888;
  border-top: 0;
}

.page.listPage {
  border:0;
}

@media only screen and (max-width: 900px) {
  .toolbar.workOrder {
    height: 80px;
  }
  .setInvoiceStatus {
    margin-top: 60px;
  }
  .emptyCustomerLabel.customerView {
    font-size: 40px;
  }
}

@media only screen and (max-width: 800px)  {
  .appLayout { display :block; }

  #navigationPane, #contentPane{ margin-bottom: 8px; }

  .navigationPage #navigationPane { display: block; width: 100%; }
  .navigationPage #contentPane { display:none; position: absolute; }

  .contentPage #navigationPane { display: none; position: absolute; }
  .contentPage #contentPane { display:block; }

  .approvalPage .lineItemList .approvalControls .question {
    padding-right: 4px;
    display:inline-block;
  }

  .toolbar.workOrder {
    height:80px;
  }

  .setInvoiceStatus {
    margin-top:60px;
  }

  .button.back.navButton {
    left: 20px;
  }

  .topAppBar {
    display:none;
  }

  .appLayout {
    /*margin-top:-2px;*/
  }
}

#streamFeed {
  margin-top:8px;
}

#feedNav {
  display: none;
/*  position: fixed;
  top: 0;*/
  position:relative;
  z-index: 100;
  width:100%;
  height:61px;
}

#feedNav.noFeedNav {
  display:none;
}

#navPaneFeed {
  display:none;
}

@media only screen and (max-width: 800px) {
  #feedNav {
    display: block;
  }

  #embeddedMessagingFrame {
    width: 344px;
    height: 554px;
  }
}

@media only screen and (min-width: 800px)  {
  .toolbar .getSavvy, .contentPage #contentPane .toolbar .back, .getSavvy.back, .showCaseTriggerHomeButtonContainer { display: none; }
}

.radioButtonLayout {
  border-spacing: 0;
}

.radioButtonLayout td {
  vertical-align: top;
  padding-bottom:16px;
}

.radioButtonLayout input[type=radio] {
}

/*===========================================================================
  Buttons
===========================================================================*/

.button{
  white-space:      nowrap;
  display:          inline-block;
  padding:          6px 14px;
  margin:           0;
  font-weight:      bold;
  text-align:       center;
  text-decoration:  none;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -ms-user-select:      none;
  -moz-user-select:     none;
  -webkit-user-select:  none;
  user-select:          none;
  border-radius:    4px;
  cursor:           pointer;
  color:              #fff;
  border:             1px solid #33C;
  border-top:         1px solid #77F;
  border-bottom:      1px solid #003;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  /* text-shadow:        0 -1px 2px #003; */
  background: #0E64D8;
  /* background: #0C5CAD; */ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0C5CAD 0%, #1B3B90 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C5CAD), color-stop(100%,#1B3B90));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0C5CAD 0%,#1B3B90 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0C5CAD 0%,#1B3B90 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0C5CAD 0%,#1B3B90 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0C5CAD 0%,#1B3B90 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C5CAD', endColorstr='#1B3B90',GradientType=0 );*/ /* IE6-9 */
}

.button:disabled{
  cursor:default;
}

.button:active,
.button:active,
.light .active{
  background: #0C5CAD;

  /*background: #728cff;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0E64D8 0%, #728cff 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0E64D8), color-stop(100%,#728cff));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0E64D8', endColorstr='#728cff',GradientType=0 );*/ /* IE6-9 */
}

/* Turn off outline in chrome when button is pressed */
.button:focus {outline:0;}

.button.gray, .button.filterCancel{
  border:             1px solid #5f5f5f;
  border-top:         1px solid #828282;
  border-bottom:      1px solid #8b8b8b;
  text-shadow:        0 -1px 2px #6e6e6e;
  font-size: 0.9em;
  font-weight: normal;

  background: #909090;

  /*background: #666666;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #9d9d9d 0%, #656565 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(100%,#656565));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #9d9d9d 0%,#656565 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #9d9d9d 0%,#656565 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #9d9d9d 0%,#656565 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #9d9d9d 0%,#656565 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#656565',GradientType=0 );*/ /* IE6-9 */
}

.button.gray:active {
  background: #656565;

  /*background: #656565;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #656565 0%, #9d9d9d 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(100%,#9d9d9d));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #656565 0%,#9d9d9d 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #656565 0%,#9d9d9d 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #656565 0%,#9d9d9d 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #656565 0%,#9d9d9d 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#9d9d9d',GradientType=0 );*/ /* IE6-9 */
}

.button.green {
  border:             1px solid #2b9e1b;
  border-top:         1px solid #74d76a;
  border-bottom:      1px solid #296420;
  text-shadow:        0 -1px 2px #296420;
  font-size: 0.9em;
  font-weight: normal;

  background: #3E9C40;

  /*background: #319423;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #3E9C40 0%, #2C842E 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E9C40), color-stop(100%,#2C842E));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E9C40', endColorstr='#2C842E',GradientType=0 );*/ /* IE6-9 */
}

.collectPopup {
  display:none;
  position: absolute;
  top:40px;
  right:0;
  z-index:2;
  border:1px solid #adadad;
  box-shadow: 0 5px 6px #BABABA;
  background: #C1E6C2;
  border-radius: 5px;
  padding: 10px;
  min-width:150px;
}

.collectPopup:after, .collectPopup:before {
	bottom: 100%;
  left: 85%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.collectPopup:after {
	border-color: rgba(48, 104, 42, 0);
	border-bottom-color: #C1E6C2;
	border-width: 8px;
	margin-left: -8px;
}
.collectPopup:before {
	border-color: rgba(97, 209, 85, 0);
	border-bottom-color: #adadad;
	border-width: 10px;
	margin-left: -10px;
}

.button.green:active {
  background: #2C842E;

  /*background: #2C842E;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #2C842E 0%, #3E9C40 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2C842E), color-stop(100%,#3E9C40));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C842E', endColorstr='#3E9C40',GradientType=0 );*/ /* IE6-9 */
}

.toolbar .button{
  border:             1px solid #050;
  border-bottom:      1px solid #474;
  border-top:         1px solid #262;
}

.button.lightRed {
  color: #a66;
  text-shadow:none;

  border:             1px solid #aac;
  border-top:         1px solid #bbd;
  border-bottom:      1px solid #99a;

  background: #caa; /* Old browsers */
  background: -moz-linear-gradient(top,  #fcc 0%, #caa 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcc), color-stop(100%,#caa)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fcc 0%,#caa 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fcc 0%,#caa 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fcc 0%,#caa 100%); /* IE10+ */
  background: linear-gradient(top,  #fcc 0%,#caa 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc', endColorstr='#caa',GradientType=0 ); /* IE6-9 */
}


.toolbar .button{
  font-size:        0.9em;
}

.button.red{
  color:              #fff;
  font-size: 0.9em;
  font-weight: normal;

  border:             1px solid #900;
  border-bottom:      1px solid #600;
  border-top:         1px solid #E33;

  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        0 -1px 2px #300;

  background: #D62828;

  /*background: #D62828;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #D62828 0%, #84191A 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D62828), color-stop(100%,#84191A));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #D62828 0%,#84191A 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #D62828 0%,#84191A 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #D62828 0%,#84191A 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #D62828 0%,#84191A 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D62828', endColorstr='#84191A',GradientType=0 );*/ /* IE6-9 */
}

.button.red:active, .button.red.active{
  background: #84191A;

  /*background: #c12828;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #660000 0%, #c12828 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#660000), color-stop(100%,#c12828));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #660000 0%,#c12828 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #660000 0%,#c12828 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #660000 0%,#c12828 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #660000 0%,#c12828 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660000', endColorstr='#c12828',GradientType=0 );*/ /* IE6-9 */
}

.button.blue{
  color:              #fff;
  border:             1px solid #33C;
  border-top:         1px solid #77F;
  border-bottom:      1px solid #003;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        0 -1px 2px #003;

  font-size: 0.9em;
  font-weight: normal;

  background: #0E64D8;

  /*background: #3761D7;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #3761D7 0%, #1B3B90 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3761D7), color-stop(100%,#1B3B90));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #3761D7 0%,#1B3B90 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #3761D7 0%,#1B3B90 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #3761D7 0%,#1B3B90 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #3761D7 0%,#1B3B90 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3761D7', endColorstr='#1B3B90',GradientType=0 );*/ /* IE6-9 */
}

.button.blue:active, .button.blue.active{
  background: #3761D7;

  /*background: #728cff;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0E64D8 0%, #728cff 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0E64D8), color-stop(100%,#728cff));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0E64D8 0%,#728cff 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0E64D8', endColorstr='#728cff',GradientType=0 );*/ /* IE6-9 */
}


.button.light{
  color:              #fff;
  border:             1px solid #3c566b;
  border-top:         1px solid #3c566b;
  border-bottom:      1px solid #4a6a84;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        none;

  background: #0C5CAD; /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0C5CAD 0%, #587e9d 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C5CAD), color-stop(100%,#587e9d));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C5CAD', endColorstr='#587e9d',GradientType=0 );*/ /* IE6-9 */
}

.button.light:active, .button.light.active{
  background: #587e9d; /* Old browsers */
  /*background: -moz-linear-gradient(top,  #587e9d 0%, #0C5CAD 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#587e9d), color-stop(100%,#0C5CAD));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#587e9d', endColorstr='#0C5CAD',GradientType=0 );*/ /* IE6-9 */
  }


.button.play{
  color:              #bf1729;
  border:             1px solid #e4e4e4;
  border-top:         1px solid #e4e4e4;
  border-bottom:      1px solid #e4e4e4;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        none;
  padding:            2px 10px;

  background: #ffffff;
}

.button.play:active, .button.play.active{
  background: #c4c4c4;
}

.button.play:focus {
  outline:none;
}

.button.edit{
  color:              #ffffff;
  border:             1px solid #3a678d;
  border-top:         1px solid #5d8eb7;
  border-bottom:      1px solid #81a2b9;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        none;
  font-size: 0.9em;
  font-weight: normal;

  background: #0E64D8;

  /*background: #417193;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0E64D8 0%, #0C5CAD 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0E64D8), color-stop(100%,#0C5CAD));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0E64D8 0%,#0C5CAD 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0E64D8 0%,#0C5CAD 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0E64D8 0%,#0C5CAD 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0E64D8 0%,#0C5CAD 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0E64D8', endColorstr='#0C5CAD',GradientType=0 );*/ /* IE6-9 */
}

.button.edit:active, .button.edit.active{
  background: #0C5CAD;

  /*background: #0C5CAD;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0C5CAD 0%, #0E64D8 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C5CAD), color-stop(100%,#0E64D8));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0C5CAD 0%,#0E64D8 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0C5CAD 0%,#0E64D8 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0C5CAD 0%,#0E64D8 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0C5CAD 0%,#0E64D8 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C5CAD', endColorstr='#0E64D8',GradientType=0 );*/ /* IE6-9 */
}

.button.edit.selectItem, .button.edit.selectCustomer {
  padding:0;
  margin:10px 0;
  border-radius: 0;
  height: 40px;
  width:10px;
}

.button.edit.selectItem img, .button.edit.selectCustomer img {
  width:8px;
  height:15px;
  margin-top:12px;
  padding:0;
}

.button.navButton, .toolbar .button, .dark .button {
  color:              #FFFFFF;
  border:             1px solid #3c566b;
  border-top:         1px solid #3c566b;
  border-bottom:      1px solid #4a6a84;
  -moz-box-shadow:    none;
  -webkit-box-shadow: none;
  box-shadow:         none;
  text-shadow:        none;
  font-size: 0.9em;
  font-weight: normal;

  background: #0E64D8;

  /*background: #587e9d;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #0C5CAD 0%, #587e9d 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C5CAD), color-stop(100%,#587e9d));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #0C5CAD 0%,#587e9d 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C5CAD', endColorstr='#587e9d',GradientType=0 );*/ /* IE6-9 */
}

.button.navButton.additional {
  margin-top:10px;
  width:150px;
}

.button.navButton:active, .toolbar .button:active,
.toolbar .button.active,
.dark .button:active, .dark .button.active {
  /*background: #587e9d;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #587e9d 0%, #0C5CAD 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#587e9d), color-stop(100%,#0C5CAD));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #587e9d 0%,#0C5CAD 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#587e9d', endColorstr='#0C5CAD',GradientType=0 );*/ /* IE6-9 */

  background: #0C5CAD;
}

.button.navButton.printStandard {
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.button.navButton.dropDown {
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  padding:6px;
}

.shareButton {
  background: #fff;
  border:1.5px solid #e3e3e3;
  border-radius: 2px;
  width:80px;
  margin-top:10px;
  margin-bottom:10px;
  float:left;
  min-height: 5px;
}

.shareButton.disabled {
  background:#ddd;
}

.shareButton a {
  text-decoration: none;
  font-size: 0.8em;
  font-weight: bold;
  color: #47AF4B;
}

.shareButton img {
  float: left;
}

.shareText {
  padding-top:18px;
  padding-left:110px;
  /*color:#c3c3c3;*/
  color:#BABABA;
}

@media only screen and (max-width: 800px)  {
  .shareText {
    padding-left: 145px;
  }
}

.shareButtonBlocker {
  position:absolute;
  width:100%;
  height:100%;
  background:transparent;
  opacity:0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  display:none;
}

a.item{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -moz-user-select:     none;
  -ms-user-select:      none;
  -webkit-user-select:  none;
  user-select:          none;
  text-decoration:      none;
}

.button.link {
  border: none;
  background: none;
  color: blue;
  font-weight: normal;
  text-shadow: none;
  box-shadow: none;
}


/*===========================================================================
  typeahead styles
===========================================================================*/

/* input controls should be listed with class typeaheadControl */
/*.typeaheadControl {
  height:17px;
}*/

.tt-hint {
  color: #999;
  padding:6px;
  margin:4px;
  display:none;
}

.tt-dropdown-menu {
  width: 300px;
  top:40px;
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /*-webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;*/
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.partsFormSearch .tt-dropdown-menu {
  top:30px;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-suggestion {
  /*padding: 3px 5px;*/
  font-size: 14px;
  line-height: 22px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 2px;
}


/*.twitter-typeahead {
  margin: 0 8px 0 4px;
}*/



/*.twitter-typeahead {
  display: block;
}

.typeahead,
.tt-query,
.tt-hint {
  padding: 4px 6px;
  font-size: 14px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999;
  top:0;
  left:0;
  right:0;
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}*/


.useDistPartText,
.useDistPartLink,
.useOtherPartText,
.useOtherPartLink {
  font-size:12px;
}

.useDistPartText,
.useOtherPartText {
  color:#999;
}

/*===========================================================================
  Custom typeahead styles
===========================================================================*/
.customerNameLine {
  margin-left:10px;
}

.customerNameFont {
  margin-left:5px;
  color:#2D94E6;
}

.tt-suggestion.tt-is-under-cursor .customerNameFont {
  color:#000000;
}


/*===========================================================================
  bookmark prompts for mobile devices
===========================================================================*/
.ipadBookmark .bookmarkIcon{
  position:absolute;
  top:90px;
  left:147px;
}

.ipadBookmark{
  position:absolute;
  top:0;
  left:0;
}

.ipadBookmark.safari4{
  left:164px;
}

.ipadBookmark.safari5{
  left:120px;
}




/*===========================================================================
  Admin Dashboard (a.k.a. Doppler 2000)
===========================================================================*/
.admin.dashboard .toolbar h1 {
  color: white;
  letter-spacing: 0.1em;
}

.admin .toolbar h1 {
  font-size: 1.3em;
}

.adminReport {
  padding:12px;
}

.adminReport table{
   page-break-inside:auto;
}

.adminReport tr{
  page-break-inside:avoid;
  page-break-after:auto;
}

.adminReport .table td,
.adminReport .table th{
  padding:6px;
  border:1px solid #666;
}

.adminReport .table td{
  text-align:center;
  vertical-align:middle;
}

.adminReport .companyInfo{
  float:none;
  margin-top:10px;
}

.companyFeatures .actionButton {
  margin: 4px;
  width: 50px;
}

.adminHomeButton {
  padding: 4px 6px 2px;
}

.adminHomeButton img {
  width:20px;
  height:20px;
}

.adminPanel {
  float: left;
  margin-left: 10px;
  margin-top:  10px;
}

.adminPanel .panelHeader {
  border: 1px solid #BABABA;
  border-top-left-radius:               12px;
  -moz-border-top-left-radius:          12px;
  -webkit-border-top-left-radius:       12px;
  border-top-right-radius:              12px;
  -moz-border-top-right-radius:         12px;
  -webkit-border-top-right-radius:      12px;
}

.adminPanel .panelContents{
  background-color: white;
  border: 1px solid #BABABA;
  border-top: 0;
  border-bottom-left-radius:            12px;
  -moz-border-bottom-left-radius:       12px;
  -webkit-border-bottom-left-radius:    12px;
  border-bottom-right-radius:           12px;
  -moz-border-bottom-right-radius:      12px;
  -webkit-border-bottom-right-radius:   12px;
}

.adminPanel .panelHeader h3 {
  margin: 0;
  text-shadow:    0 -1px 1px #BABABA;
  font-weight: normal;
  max-width: 250px;
}

.adminPanel .panelHeader {
  color: #fff;
  padding: 12px 16px 8px;
  margin: 0;
  background-color: #3C943F;
}

.adminPanel .panelContents{
  padding:12px 16px;
}

.adminPanel .panelContents ul{
  margin: 0;
  padding: 0;
}

.adminPanel .panelContents li{
  margin: 4px 0;
  list-style-type: none;
}

.adminPanel .panelContents li a{
  padding:  4px;
  display: inline-block;
}

.adminPanel .label {
  padding-right: 8px;
}

.flex-row {
  display: flex;
  justify-content: space-between;
  margin:0 -0.5em;
}

.flex-column {
  flex: 1 1 auto;
  align-items: stretch;
  padding:0 0.5em;
}

.flex-column .adminPanel {
  float: none;
  margin: 0;
}

@media (max-width: 800px) {
  .flex-row {
    display: block;
  }
  .flex-column {
    margin: 1em 0;
  }
}

.padded-content {
  padding: 1.5em 1.25em;
}

/* avoid issues with padding if child elements are floating */
.padded-content::after {
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

.menuItem {
  color: rgb(0,0,238);
  display: block;
  text-align: left;
  padding: 6px 8px;
  box-sizing: border-box;
  border-radius: 4px;
}

.menuItem.red {
  color: rgb(238,0,0);
}

.menuItem:hover {
  background-color: #badef8;
}

.menuItem.red:hover {
  background-color: #ffcece;
}


.formSeperator {
  margin-top:5px;
}

.affiliates.table {
  margin-left: 20px;
}
.systemSubscriptions.table {
  margin-left: 20px;
}
.companySubscriptions.table, .companyClientInfo.table, .companyPaymentMethods.table {
  margin: auto;
  /* margin-left: 20px; */
}

/*===========================================================================
  Admin - User
===========================================================================*/

.forceInvoicePush{
}

.deviceItem td, .deviceItem th{
  border-left: solid;
  border-left-width: 1px;
  text-align: center;
  border-color:#CCCCCC;
  padding: 4px !important;
}

/*===========================================================================
  User
===========================================================================*/
.colorPickerExpand {
  position:relative !important;
  top:0px !important;
  left:0px !important;
}


/*===========================================================================
  Account Balance
===========================================================================*/
.accountBalance .alert {
  display:block;
  padding:4px 12px 12px;
}

.recentlyRecovered,
.allRecovered
{
  text-align: left;
  font-size:1.1em;
  color:#0084C9
}

.recentlyRecoveredAmount,
.allRecoveredAmount
{
  font-weight: bold;
}


/*===========================================================================
  Labelled Forms: new and improved
===========================================================================*/
form.vertical label{
  margin-top:25px;
  margin-left: 0;
  display:block;
}

form.vertical .heading{
  color: #4A4A4A;
  display:block;
  margin:2px 0;
  font-weight: bold;
}

form.vertical label.inline {
  display:inline;
}

form.vertical input {
  margin:2px;
  margin-left: 0;
}

form.vertical input[type=date] {
  width: 150px;
}

form.vertical input[type=checkbox],
form.vertical input[type=radio] {
  margin: 10px 2px 2px;
}

form.vertical input[type=submit] {
  margin-top: 20px;
}

form.vertical input.smallInt {
  width:40px;
  text-align: center;
}

form.vertical .subdued {
  color:#999;
  font-size:0.8em;
}

.doomMessage {
  margin-bottom: 5px;
}

/*===========================================================================
  QuickBooks Sync and QuickBooks Sync Instructions
===========================================================================*/
.quickbooksInstructions ol li {
  margin-top: 1em;
}

.quickbooksInstructions .bigWarning {
  border:1px solid black;
  background:#ddd;
  text-align:center;
  font-size:120%;
  padding:16px;
  margin: 30px 0;
}

.quickbooksInstructions .bigWarning h3 {
  color:#600;
  font-size:1.8em;
  margin-top:10px;
}

.quickbooksInstructions h3 {
  margin-top:2em;
}

.quickbooksSubscription {
  display:none;
}

/*Scale images down on small screens*/
@media only screen and (max-width: 640px)  {
  .quickbooksInstructions img {
    max-width: 100%;
  }
}

.question, .questionNewAmount, .questionPrevious {
  font-weight: bold;
}

.invoiceChangeSync, .invoiceNoSync {
  color:#666;
  margin-top:20px;
}

.newQbInvoiceNote, .activationStatus, .checkBoxLabel {
  font-size:0.8em;
  color:#999;
  font-weight:normal;
}

.recentInvoices {
  margin-top:20px;
}

.coolfrontQbItems li {
  margin-left:20px;
}

#quickbooksSync .newCustomer {
  display:none;
}

/*===========================================================================
  Miscellaneous Miscellaneous
===========================================================================*/
input[type=submit]:disabled {

  border:             1px solid #5f5f5f;
  border-top:         1px solid #828282;
  border-bottom:      1px solid #8b8b8b;
  text-shadow:        0 -1px 2px #6e6e6e;

  background: #9d9d9d;
  background: -moz-linear-gradient(top,  #aaa 0%, #9d9d9d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#9d9d9d));
  background: -webkit-linear-gradient(top,  #aaa 0%,#9d9d9d 100%);
  background: -o-linear-gradient(top,  #aaa 0%,#9d9d9d 100%);
  background: -ms-linear-gradient(top,  #aaa 0%,#9d9d9d 100%);
  background: linear-gradient(top,  #aaa 0%,#9d9d9d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#9d9d9d',GradientType=0 );

}

.connectHeader {
  display:none;
  padding: 8px;
  background: #a11;
  color: white;
  -moz-box-shadow:     0 2px 10px #000;
  -webkit-box-shadow:  0 2px 10px #000;
  box-shadow:          0 2px 10px #000;
  z-index: 1000;
  /*position: absolute;*/
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-bottom: 1px solid #700;
}

.cool{
  color: #47AF4B;
}

.subdued {
  color: #aaa;
  font-size: 0.8em;
}

.errors, .qboErrors {
  color: #a00;
}

.qboError{
  white-space: pre-wrap;
}

.success {
  color: #0a0;
}

.required {
  position: relative;
}

.required:before {
  content: "*";
  position: absolute;
  left: -8px;
  font-size: 0.9em;
}

.requiredLegend {
  padding: 1em 0;
  font-size: 0.8em;
}

.required:before, .requiredLegend {
  color: #900;
}

#stalled {
  padding: 16px 0;
  color: #BABABA;
  font-size: 1.2em;
}

.disabledNavLink#offlineMessage {
  background: #ddd;
  color: #7B7B7B !important;
}

#offlineMessage{
  padding:4px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  display: none;
}


.iosMessage {
  display:none;
  position:absolute;
  background:#fff;
  padding:16px;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.iosMessage h1 {
  margin-top:0px;
}

.loading {
  color:#aaa;
}

.loadingScreen {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:block;
  background:#fff;
  color:#ccc;
  text-align:center;
  font-size:2em;
  font-weight: bold;
  padding-top:120px;
}

.loadingScreenDetails{
  font-size:.6em;
}

.loadingScreenSpace{
  padding-top:100px;
  font-size:0.5em;
  display:none;
}

.loadingSupportTools{
  color: #ccc;
  font-size: 10px;
  position: absolute;
  bottom: 25px;
  right: 25px;
}

.footerLinks{
  text-align:center;
  margin:16px auto;
  color: #BABABA;
  font-size: 0.9em;
}

.footerLinks a {
  white-space: nowrap;
  display: inline-block;
}

.closeFooterPopup {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 12px 12px 14px !important;
  text-decoration: none !important;
  color: #4A4A4A !important;
}

.footerPopup h3 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding: 0.7em 0;
  background: #eee;
}

.footerPopup table {
  margin: 8px auto;
}

.footerPopup table td {
  text-align: left;
  padding: 8px;
  border-top: 1px dotted #ddd;
}

.footerPopup table tr:first-child td {
  border: none;
}

.footerPopups {
  color: #4A4A4A;
  position: relative;
  margin: auto;
  width: 300px;
  z-index: 100;
}

.footerPopup {
  display: none;
  position: absolute;
  width: 100%;
  border: 1px solid #bbb;
  background: white;
  bottom: 10px;
  -moz-box-shadow:     0 3px 20px #000;
  -webkit-box-shadow:  0 3px 20px #000;
  box-shadow:          0 3px 20px #000;
}

a.subdued,
.footerLinks a {
  text-decoration :none;
  color: #0E64D8;
}

a.subdued:hover,
.footerLinks a:hover {
  color:#00f;
  text-decoration: underline;
}

.footerLinks a {
  padding: 8px;
}

.aboutUserLinksContainer {
  display:none;
  background-color:#fff;
  border:1px solid #CCC;
  text-align:center;
}

.aboutUserLinks {
  position:absolute;
  /* text-align:center; */
  /* margin:16px auto; */
  color: #4A4A4A;
  font-size: 0.9em;
  z-index: 105;
}

.aboutUserLinks.smallScreen{
  top:65px;
  right:10px;
}

.aboutUserLinks.contentScreen{
  top:50px;
  right:25px;
  /* float:right;
  margin-top:-40px; */
}

#aboutUserContainer {
  position:absolute;
  top:10px;
  right:10px;
}

.aboutUserOpenerContainer {
  text-align: right;
  float:right;
  margin-top:-40px;
  margin-right:15px;
}

.aboutUserOpener.smallScreen {
  padding:0;
}

.aboutUserLinks a {
  white-space: nowrap;
  display: inline-block;
}

.closeAboutUserPopup {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 12px 12px 14px !important;
  text-decoration: none !important;
  color: #7B7B7B !important;
}

.aboutUserPopup h3 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding: 0.7em 0;
  background: #eee;
}

.aboutUserPopup table {
  margin: 8px auto;
}

.aboutUserPopup table td {
  text-align: left;
  padding: 8px;
  border-top: 1px dotted #ddd;
}

.updateStatus img {
  padding: 0px 8px;
  vertical-align: bottom;
}

.popupNote {
  margin-top:10px;
  margin-bottom:0;
  padding: 12px;
  border-top: 1px solid #ccc;
  background: #eee;
}

.popupNote a {
  padding: 0 !important;
}

.aboutUserPopup table tr:first-child td {
  border: none;
}

.aboutUserPopups {
  color: #4A4A4A;
  position: relative;
  margin: auto;
  /* width: 300px; */
  z-index: 104;
  text-align: center;
}

.aboutUserPopup {
  display: none;
  /* position: absolute; */
  width: 100%;
  border: 1px solid #bbb;
  background: white;
  bottom: 10px;
  -moz-box-shadow:     0 3px 20px #000;
  -webkit-box-shadow:  0 3px 20px #000;
  box-shadow:          0 3px 20px #000;
}

a.subdued,
.aboutUserLinks a {
  text-decoration :none;
  color: #0E64D8;
}

a.subdued:hover,
.aboutUserLinks a:hover {
  color:#0C5CAD;
  text-decoration: underline;
}

.aboutUserLinks a {
  padding: 8px;
}

#aboutMenu {
  position: absolute;
  right: 10px;
  top: 10px;
}

.modal {
  position: fixed;
  display:none;
  z-index:25;
  top:    0;
  left:   0;
  bottom: 0;
  right:  0;
}

.modal .background{
  z-index:-1;
  position: absolute;
  top:    0;
  left:   0;
  bottom: 0;
  right:  0;
  background: #000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=5);
}

.modal .dialog {
  margin:16px auto;
  width: 270px;
  padding: 16px;
  background: #fff;
  border: 1px solid #BABABA;
  -moz-border-radius:        12px;
  -webkit-border-radius:     12px;
  border-radius: 12px;
  -moz-box-shadow:     0 3px 6px #222;
  -webkit-box-shadow:  0 3px 6px #222;
  box-shadow:          0 3px 6px #222;
}

.modal .dialog ul {
  padding-left: 16px;
}

.modal .dialog li {
  margin: 16px 8px;
}

.modal .dialog a {
  margin:1px;
}


/*flex_popup*/


#flex_popup.modal {
  display:none;
  z-index:1001;
  top:    0;
  left:   0;
  bottom: 0;
  right:  0;

  position: absolute;
  overflow: visible;


}

#flex_popup.modal .background{
  z-index:-1;
  position: fixed;
  top:    0;
  left:   0;
  bottom: 0;
  right:  0;
  background: #000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=5);
}

#flex_popup.modal .dialog {
  margin:16px auto;
  width: 270px;
  border: 1px solid #BABABA;
  -moz-box-shadow:     0 3px 6px #222;
  -webkit-box-shadow:  0 3px 6px #222;
  box-shadow:          0 3px 6px #222;

  padding: 0px;
  background-color: #808080;

  -moz-border-radius:        10px;
  -webkit-border-radius:     10px;
  border-radius: 10px;

}

#flex_popup.modal .dialog ul {
  padding-left: 16px;
}

#flex_popup.modal .dialog li {
  margin: 16px 8px;
}

#flex_popup.modal .dialog a {
  margin:1px;
}

#flex_popup .toolbar{
  border-radius: 10px 10px 0px 0px;
  -moz-border-radius:        10px 10px 0px 0px;
  -webkit-border-radius:     10px 10px 0px 0px;
  height: auto;

  background-color: #0E64D8
}

#flex_popup .toolbar .title{
  padding-bottom:10px;
}


#flex_popup .dialog_form .title{
  padding-bottom:10px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}



#flex_popup .dialog_form{
  padding: 16px;
  background-color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  -moz-border-bottom-left-radius: 10px;
  -moz-border-bottom-right-radius: 10px;

  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  padding-left: 60px;
  padding-right: 60px;

}

#flex_popup .dialog_content{
  word-break: normal;
  word-wrap: break-word;
}

#flex_popup .dialog_content img{
  max-width: 100%
}


#flex_popup textarea{
  max-width: 98%;
  width: 98%;
}

#flex_popup .dialog_controls{
  text-align: center;
  padding-top: 10px;
}

#flex_popup .dialog_cancel{
  text-decoration: underline;
  padding:4px 8px;
}

#flex_popup .dialog_submit{
  white-space: normal;
  margin-bottom: 8px;
}



@media only screen and (max-width: 570px)  {
 #flex_popup .dialog_form{
  padding-left: 30px;
  padding-right: 30px;
 }
}


@media only screen and (min-width: 320px)  {
 #flex_popup.modal .dialog{
  width: 300px;
 }
}


@media only screen and (min-width: 370px)  {
 #flex_popup.modal .dialog{
  width: 350px;
 }
}


@media only screen and (min-width: 420px)  {
 #flex_popup.modal .dialog{
  width: 400px;
 }
}

@media only screen and (min-width: 470px)  {
 #flex_popup.modal .dialog{
  width: 450px;
 }
}

@media only screen and (min-width: 520px)  {
 #flex_popup.modal .dialog{
  width: 500px;
 }
}

@media only screen and (min-width: 570px)  {
 #flex_popup.modal .dialog{
  width: 550px;
 }
}


@media only screen and (min-width: 620px)  {
 #flex_popup.modal .dialog{
  width: 600px;
 }
}

@media only screen and (min-width: 670px)  {
 #flex_popup.modal .dialog{
  width: 650px;
 }
}





/*Some links should always look unvisited*/
a.unvisited {
  color: #00f;
}

.label {
  color: #7B7B7B;
}

.warning {
  color: #cc1616;
}

.homeButton,
.previousMenu {
  font-size: 1.7em !important;
  font-weight: bold;
  padding: 0 8px 2px;
}

.homeButton img {
  width:16px;
  height:16px;
  margin-top:8px;
}

.toolbar .homeButton {
  padding:0px 8px;
}


.flash{
  text-align: center;
  width: 100%;
}

.flash .close {
  float:right;
  cursor:pointer;
  padding: 10px 12px 12px 14px !important;
  text-decoration: none !important;
  color: #7B7B7B !important;
  font-size: 0.8em;
}

.flash .error,
.flash .notice,
.deletedCustomersNotice .error,
.inactiveCustomersNotice .error {
  display:block;
  padding:8px;
  border: 1px solid #BABABA;
}

.flash .error,
.deletedCustomersNotice .error,
.inactiveCustomersNotice .error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.flash .notice {
  display:block;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}

.infoBox {
  display:block;
  padding:8px;
  border: 1px solid #333333;
  color: #ffffff;
  background-color: #666666;
}

form.inline{
  display: inline;
}

.instructions{
  color:#4A4A4A;
  padding: 20px;
}


.listPage .instructions.empty{
  padding: 10px;
  color: #4A4A4A;
}

.listPage .limitMessage{
  /*display: none;*/
  background: rgb(242, 255, 95);
  padding: 1px 5px;
  margin: 10px;
  border-radius: 10px;
}


.listPage .instructions.custom{
  padding: 10px;
  color: #4A4A4A;
  display:none;
}

.quantity {
  padding: 0 0 6px 6px;
  display: inline-block;
  float:right;
  display:inline-block;
}

.costLabel .label {
  text-align:right;
  padding:8px 0;
}

.plusMinus {
  padding:7px 12px;
}

.table { border-spacing: 0; border-collapse: collapse; margin: 10px 0; }
.table tr { border: 1px solid #ccc;}
.table td { padding: 4px 4px 4px 20px;}


/* A class for displaying a table with a bunch of data (a not-too-awful style) */
.data-table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 8px;
}

.data-table th,
.data-table td {border: 1px solid #aaa; text-align: center}

.data-table th,
.data-table td {padding: 0.5em}

.data-table td {background-color: #fff}
.data-table th {background-color: #ddd}


.placeholderPolyfill {
  color:#aaa
}

.placeholderAdmin,
.placeholderOffice,
.placeholderTechnician
{
  display:none;
}

.placeholder {
  color: #BABABA;
  font-size: 1.2em;
  padding: 0 5%;
  min-height: 150px;
  margin-bottom:10px;
}

.page.coolFormat.placeholder {
  padding: 15px 40px;
  background: transparent;
  border: 0;
}

@media only screen and (max-width: 460px)  {
  .page.coolFormat.placeholder {
    padding: 5px 5px;
  }
}

.placeholderFrame {
  border: 1px solid #adadad;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
  background:#fff;
  overflow: hidden;
}

.placeholderFrame.bottom {
  margin-top:20px;
  padding:10px;
  padding-bottom:15px;
}

.placholderFrameTopDividerTopBar {
  height:2px;
  background:#6a7867;
}

.placholderFrameTopDividerBottomBar {
  height:6px;
  background:#47AF4B;
}

.placeholderFrameTopTitleArea {
  position:relative;
  clear:both;
}

.placeholderFrameTopTitleArea.showHomeTrigger {
  background:#fff;
  border-radius: 0 0 10px 10px;
}

.placeholderFrameTopTitleArea.showHomeTrigger.disabled {
  background:#ddd;
}

.placeholderTitleContent {
  margin-left:10px;
}

.placeholderTitleContent img {
  margin-top:10px;
  margin-bottom:10px;
}

.placeholderTitleContent span {
  margin-left:10px;
}

.placeholderFrameTopTitleArea img {
  float:left;
}

.placeholderTitleContent span {
  float:left;
  margin-top:15px;
  color:#4A4A4A;
  font-size:1.2em;
}

.placeholderImageContainer {
  position:relative;
  min-height:244px;
}

.archivedPlaceholderImage {
  display:none;
}

.placeholderImage, .archivedPlaceholderImage {
  width:100%;
  min-height:245px;
  position:absolute;
}

.spinnerDiv {
  width:16px;
  height: 16px;
  background: url('/images/spinner-2.gif');
}




/*===========================================================================
  Trigger common styles ..  miss labelled 1st implementation of triggers are really rewards
===========================================================================*/

.rewardInfoPopupFooter {
  text-align: left;
  margin-top:10px;
  margin-bottom:0;
  padding: 12px 20px;
  border-top: 1px solid #ccc;
  background: #eee;
}

.rewardInfoPopupFooter a {
  padding: 0 !important;
}


.rewardInfoTable{
  text-align: left;
}

.closeRewardInfo {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 12px 12px 14px !important;
  text-decoration: none !important;
  color: #4A4A4A !important;
}

.rewardInfoPopup table tr:first-child td {
  border: none;
}


.rewardInfoContentBody{
  font-size:0.8em;
}

.rewardInfoContentBody td[data-bind=valueCell]{
  color: blue;
}

.rewardInfoPopup {
  text-align: center;
  display: none;
  position: absolute;
  width: 100%;
  border: 1px solid #bbb;
  background: white;
  bottom: 10px;
  -moz-box-shadow:     0 3px 20px #000;
  -webkit-box-shadow:  0 3px 20px #000;
  box-shadow:          0 3px 20px #000;
}


.rewardInfoContainer {
  /*display:none;*/
  color: #4A4A4A;
  position: relative;
  margin: auto;
  width: 300px;
  z-index: 100;
  top: 120px;
}


.rewardInfoPopup h3 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding: 0.7em 0;
  background: #eee;
}

.rewardInfoPopup table {
  margin: 8px auto;
}

.rewardInfoPopup table td {
  text-align: left;
  padding: 8px;
  border-top: 1px dotted #ddd;
}

.rewardInfoLink{
  text-decoration: none;
}

.rewardSettingsIconContainerCell{
  padding: 0px 10px 0px 0px;
}

.rewardSettingsIconContainer{
  float:right;
  display:inline-block;
  margin:10px 10px 10px 10px;
}

.rewardSettingsLink{
  padding: 8px 8px;
  width:16px !important;
  height:16px !important;
  border-spacing: 0px;
}

.rewardSettingsIcon{
  vertical-align: middle;

}

.rewardInfosIconContainerCell{
  padding: 0px;
}

.rewardInfosIconContainer{
  float:right;
  display:inline-block;
  margin:10px 10px 10px 10px;
}

.rewardInfosLink{
  padding: 8px 8px;
  width:16px !important;
  height:16px !important;
  border-spacing: 0px;
}

.rewardInfosIcon{
  width:16px !important;
  height:16px !important;

}


.triggerItem{
}

.triggerContentPadding{
  padding-left:10px;
  padding-right:10px;
  border-spacing: 0px;
}

.triggerContentPadding tr{
  margin-top: 2px;
  margin-bottom: 2px;

}

.triggerListHeader{
  color: #FFFFFF;
  padding: 5px;
  font-size: 1.0em;
  text-align: center;

  background: #7B7B7B;

  /*background: #90c2da;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #90c2da 0%, #0073aa 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90c2da), color-stop(100%,#0073aa));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #90c2da 0%,#0073aa 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #90c2da 0%,#0073aa 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #90c2da 0%,#0073aa 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #90c2da 0%,#0073aa 100%);*/ /* W3C */

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}

.showCasedTrigger{
  margin-bottom:40px;
}
.triggerDivider{
  border-bottom:1px solid #E4E4E4;
}

.triggerList{
  padding-left:0px;
  padding-right:0px;
}

.triggerUpdateDisclaimer{
  color:#4A4A4A;
  text-align: center;
}

.shareContent{
  margin-left: 10px;
}

.triggerTitleMin{
  font-size:1.0em;
  color:#4A4A4A;
  display:inline-block;
}

.triggerContentMin{
  color: #7B7B7B;
  font-size: 1.2em;
}

.showCaseTriggerHomeButtonContainer{
  display:none;
}

.trigger {
  position:absolute;
  width:100%;
  height:100%;
}

.triggerTitle
{
  margin-top:20px;
  font-size: 2.0em;
  color:#ffffff;
  text-align:center;
  margin-left:10px;
  margin-right:10px;
}

.triggerPermission {
  margin-top:0;
  font-size: 0.8em;
  color:#ffe302;
  text-align:center;
  width:100%;
  opacity:1.0;
}

.triggerAmount
{
  font-weight:bold;
  font-size:4.0em;
  color:#ffffff;
  text-align:center;
  padding:10px;
  padding-bottom:0;
}

.triggerShareText {
  position:absolute;
  text-align: center;
  font-size: 1.2em;
  color:#fff;
  /*margin:140px 0 10px 120px;*/
  width:225px;
  height:75px;
  right:15px;
  bottom:30px;
}

.shareTriggerImg {

}




@media only screen and (max-width: 800px){
  .shareContent{
    margin-left: 0px;
  }

  .showCaseTriggerHomeButtonContainer{
    display:inline-block;
    float:left;
    margin:10px 10px 0px 10px;
  }

}


@media only screen and (max-width: 460px)  {
  .triggerAmount
  {
    font-size:1.0em;
  }


}




.triggerDisclaimer
{
  margin-top:0;
  font-size: 0.8em;
  color:#ffffff;
  text-align:center;
  padding:10px;
  opacity:1.0;
}





/*===========================================================================
  Get-Savvy Triggers
===========================================================================*/
.noHomeTriggerTop, .showHomeTriggerTop {
  position:relative;
  min-height:245px;
}

.triggerBg {
   position:absolute;
   height:245px;
   width:100%;
   min-height: 245px;
}

.noHomeTriggerTop div {
  position:absolute;
  width:100%;
}

.leftTriggerImage {
  position:absolute;
  left:5px;
  top:5px;
  width:371px;
  height:240px;
}

.triggerTextImage {
  position:absolute;
  height:auto;
  right:0;
  top:10px;
  width:50%;
}
/* End Get-Savvy Triggers*/




.insideHeaderBug{
  position: absolute;
  top: 87px;
  left: 38px;
  text-align: center;
  width: 134px;
  height: 45px;
  color: #BABABA;
  font-weight: bold;
  font-size: 1.2em;
  display: table;
}

.insideHeaderBug span{
  display:table-cell;
  vertical-align: middle;
}

.paymentMethods{
  margin:8px 16px 24px;
}

.resendUserEmail, .adminOfficeMessage, .techMessage, .diagnosticDiscountMessage, .agreementDiscountMessage, .resendSent, .flatFeeTaxMessage {
  color:#7B7B7B;
  font-size:0.8em;
}

.flatFeeTaxMessage {
  margin-left:25px;
}

.resendUserEmail, .adminOfficeMessage, .techMessage, .diagnosticDiscountMessage, .agreementDiscountMessage, .resendSent {
  display:none;
}

.resendUserEmail, .adminOfficeMessage, .techMessage, .resendSent {
  margin-top:20px;
}

.statusPrintEmailContainer {
  position:absolute;
  top:0px;
  width:100%;
  margin-top:-10px;
}

/*.setInvoiceStatus {
  float:left;
}*/

.printEmailContainer {
  position:absolute;
  right:20px;
  top:20px;
}

.approvalPage .printEmailContainer {
  top:5px;
}

/*===========================================================================
  Signup pages
===========================================================================*/
.otherHider {
  display: none;
}
.supportInfo {
  position: relative;
  padding:16px;
  padding-top:0;
  bottom: 44px;
  margin-bottom: -62px;
  color: #4A4A4A;
}

.signupBanner .clouds{
  width:100%;
  border-bottom: 1px solid #BABABA;
  -moz-box-shadow:     0 3px 10px -3px black;
  -webkit-box-shadow:  0 3px 10px -3px black;
  box-shadow:          0 3px 10px -3px black;
}

.signupBanner .logo{
  position:absolute;
  width:40%;
  right:0;
  margin:1%
}


.signupMode .signupAddress {
  display:block;
}

.signupMode .signupMessage {
  display:block;
}

.signupBlurbTitle {
  font-weight:bold;
  font-size:1.2em;
}

.signupBlurb {
  float:left;
  margin-left: 20px;
  max-width:600px;
}

@media only screen and (max-width: 930px) {
  .signupBlurb {
    float:left;
    margin-top: 20px;
    margin-left: 0px;
    max-width:600px;
  }
}

/*===========================================================================
  glDatePicker (Calendar Control)
===========================================================================*/
/*
  glDatePicker default style

  http://code.gautamlad.com/glDatePicker/
  https://github.com/glad/glDatePicker/
*/

/* Calendar container div */
.gldp-default
{
  float:left;
  background: white;
  -moz-box-shadow:    inset 0 1px 6px #222;
  -webkit-box-shadow: inset 0 1px 6px #222;
  box-shadow:         inset 0 1px 6px #222;
  width: 100%;
}

/* Table style */
.gldp-default table
{
  border-spacing:1px;
  border-collapse:collapse;
  margin: 12px;
  background: white;
}

/* Default row height */
.gldp-default tr
{
  line-height:35px;
}

/* Default style of cell */
.gldp-default td
{
  margin:0;
  padding:0;
  width:35px;
  text-align:center;
}

/* Previous and Next arrows */
.gldp-default-prevnext
{
  color:#222;
  cursor:pointer;
}

/* Month Year title */
.gldp-default-monyear
{
  color:#222;
  font-size:0.9em !important;
  font-weight:bold;
}

/* Days of the week (Sun, Mon, ...) */
.gldp-default-dow
{
  color:#aaa;
  font-size:0.8em !important;
  font-weight:bold;
}

.gldp-default-dow td {
  line-height: 20px;
}

/* Selectable days */
.gldp-default-day
{
  background-color:#fff;
  color:#222;
  border:solid 1px #ddd;
  font-weight:bold;
}
/* Selected days */
.gldp-default-selected .selected
{
  background-color:#0C5CAD;
  color:#fff;
  font-weight: bold;
}


div.today, .gldp-week.today td
{
  border: 1px solid #75AADB;
  font-weight:bold;
  background: #EDF6FF;
  color: #000;
}


.gldp-default-day-hover, .gldp-default-today-hover div.today, .gldp-default-week-hover td
{
  background-color:#0C5CAD !important;
  color:#fff !important;
  cursor:pointer;
  font-weight:bold;
}

/* Weekends */
.gldp-default-sat, .gldp-default-sun
{
  background-color:#fff;
  border:solid 1px #ddd;
  font-weight:bold;
}
.gldp-default-sat-hover, .gldp-default-sun-hover
{
  background-color:#0C5CAD;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
}

/* Non-selectable day.  Includes:previous/next month days and days that fall in the allowOld and endDate conditions */
.gldp-default-noday
{
  background-color:#f3f3f3;
  color:#aaa;
}

.gldp-week.noday {
  visibility: hidden;
}


/*.gldp-default-prevnext,*/
.gldp-default td.gldp-days {
  border: 1px solid #ccc;
}

/*.gldp-default div.today {
  border: 1px solid #75AADB;
}
*/
.gldp-week{
  text-align: left !important;
  font-weight: normal;
  border: 1px solid #ddd;
}

.gldp-week table {
  margin: 0;
  width: 100%;
}

.gldp-week-name {
  text-align: left !important;
  padding-left: 5px !important;
  width: 55% !important;
}

.gldp-week-distance{
  text-align: right !important;
  font-weight: normal;
  font-size: 0.95em;
  padding-right: 5px !important;
  width: 45% !important;
}

td.gldp-week-name { border-right: 0 !important }
td.gldp-week-distance { border-left: 0 !important  }

.weekMode .gldp-default-dow {
  height: 8px;
  visibility: hidden;
}

.weekMode .gldp-default-dow td{
  line-height: 0;
  width:36px;
}


.calendarWrapper {
  border-left: 1px solid #B1D4FF;
  border-right: 1px solid #B1D4FF;
}

.calendarImage {
  width:38px;
}

.existingCalendarOption{
  display:none;
}

.calendarWizardSpacerRow td {
  height:20px;
}

.calendarAssignMessage {
  margin-bottom: 20px;
}

.currentUserInfo {
  margin-bottom:20px;
}

#startDateText-gldp .gldp-default table,
#endDateText-gldp .gldp-default table,
#scheduledAtText-gldp .gldp-default table {
  margin: 12px auto;
}

/*===========================================================================
  Login page
===========================================================================*/
#logout, #login {
  width: 300px;
  margin-top: 20px;
  min-height: 0;
}

#logout form, #login form {
  padding: 10px;
}

#login .submit{
  text-align:center;
}

#login .element{
  padding-bottom:8px;
}

#login label{
  display: block;
}

#login form input{
  margin-bottom:8px;
  width: 90%;
}

#login form .button {
  width: 90px;
}


/*===========================================================================
  verify-logout page
===========================================================================*/
#verifyLogout{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#verifyLogout form {
  padding: 10px;
}

#verifyLogout .submit{
  text-align:center;
}

#verifyLogout .element{
  padding-bottom:8px;
}

#verifyLogout label{
  display: block;
}

#verifyLogout form input{
  margin-bottom:8px;
  width: 90%;
}

#verifyLogout form .button {
  width: 90px;
}


/*===========================================================================
  verify-force-push page
===========================================================================*/
#verifyForcePush{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#verifyForcePush .offline{
  display:none;
}

#verifyForcePush .loginNeeded{
  display:none;
}

#verifyForcePush .forcePushEnabled{
  display:none;
}

#verifyForcePush #backButton{
  display:none;
}

#verifyForcePush #forcePushButton{
  display:none;
}

#verifyForcePush #loginButton{
  display:none;
}


#verifyForcePush form {
  padding: 10px;
}

#verifyForcePush .submit{
  text-align:center;
}

#verifyForcePush .element{
  padding-bottom:8px;
}

#verifyForcePush label{
  display: block;
}

#verifyForcePush form input{
  margin-bottom:8px;
  width: 90%;
}

#verifyForcePush form .button {
  width: 90px;
}


/*===========================================================================
  requires-login page
===========================================================================*/
#requiresLogin{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#requiresLogin form {
  padding: 10px;
}

#requiresLogin .submit{
  text-align:center;
}

#requiresLogin .element{
  padding-bottom:8px;
}

#requiresLogin label{
  display: block;
}

#requiresLogin form input{
  margin-bottom:8px;
  width: 90%;
}

#requiresLogin form .button {
  width: 90px;
}

/*===========================================================================
  offline-session-expired page
===========================================================================*/
#offlineSessionExpired{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#offlineSessionExpired form {
  padding: 10px;
}

#offlineSessionExpired .submit{
  text-align:center;
}

#offlineSessionExpired .element{
  padding-bottom:8px;
}

#offlineSessionExpired label{
  display: block;
}

#offlineSessionExpired form input{
  margin-bottom:8px;
  width: 90%;
}

#offlineSessionExpired form .button {
  width: 90px;
}


/*===========================================================================
  offline-session-expire-warning page
===========================================================================*/
#offlineSessionExpireWarning{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#offlineSessionExpireWarning form {
  padding: 10px;
}

#offlineSessionExpireWarning .submit{
  text-align:center;
}

#offlineSessionExpireWarning .element{
  padding-bottom:8px;
}

#offlineSessionExpireWarning label{
  display: block;
}

#offlineSessionExpireWarning form input{
  margin-bottom:8px;
  width: 90%;
}

#offlineSessionExpireWarning form .button {
  width: 90px;
}

.expiresAt{

}


/*===========================================================================
  verify action page
===========================================================================*/
#verifyAction{
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#verifyAction form {
  padding: 10px;
}

#verifyAction .submit{
  text-align:center;
}

#verifyAction .element{
  padding-bottom:8px;
}

#verifyAction form .button {
  width: 90px;
}



/*===========================================================================
  signup pages
===========================================================================*/

.signupList td.buttons{
  white-space:nowrap;
}


.coolFormat .content {
  padding: 8px 3% 6%;
  font-size: 1.1em;
}


.signupMode .content {
  padding-bottom: 48px;
}

@media only screen and (max-width: 460px)  {
  .signupList td{
    display:block;
    float:left;
    padding: 8px;
  }

  .signupList td.buttons{
    float:right;
  }

  .supportInfo {
    padding: 0 12px;
    bottom: 64px;
    margin-bottom: -48px;
  }

  .signupMode .content {
    padding-bottom: 64px;
  }
}

.coolFormat form {
  max-width: 280px
}


.coolFormat h1 {
  font-size: 2em;
  font-weight: normal;
  padding: 10px;
  margin: 0;
  display: none;
}

.feedItemWrapper h1 {
  display:block;
}

.coolFormat .introduction li {
  margin-bottom: 1em;
}

.coolFormat .inputField{
  width: 100%;
  display: block;
}

.coolFormat .inputField:disabled{
  background-color: #fafafa;
  color: #999;
}

input[type=text]:disabled{
  background-color: #fafafa;
  color: #999;
}

.coolFormat .percentage{
  width:3em;
  margin:4px 0;
  display:inline-block;
  text-align:center;
}

.coolFormat .inputField, .coolFormat .percentage{
  padding: 6px;
  margin: 4px 0;
  box-sizing: border-box;
}

.cityStateZip .city, .cityStateZip .state{ padding-right:20px }
.cityStateZip .city { width:50%; }
.cityStateZip .state{ width:20%; }

.tiny-label {
  display:flex;
  font-size:12px;
  color:gray;
  padding-left: 10px;
}


.partMarkupSplitArrow {
   float:left;
   margin-left:140px;
}

@media only screen and (max-width: 400px)  {
  .partMarkupSplitArrow { margin-left: 80px;}
}

.signupMode .coolFormat h1 {
  display: block;
}

.signupMode .toolbar {
  display:none;
}



/*===========================================================================
  password reset
===========================================================================*/
#resetPassword {
  width: 300px;
  margin-top: 20px;
  min-height: 0;
}

#resetPassword form, #resetPassword form {
  padding: 10px;
}

#resetPassword .submit{
  text-align:center;
}

#resetPassword .element{
  padding-bottom:8px;
}

#resetPassword label{
  display: block;
}

#resetPassword form input{
  margin-bottom:8px;
  width: 90%;
}

#resetPassword form .button {
  width: 90px;
}



/*===========================================================================
  Home page
===========================================================================*/

.homePage h1{
  font-size: 1.7em;
  color: white;
  letter-spacing: 0.3em;
}

.homePage .list .item{
  font-size: 1.2em;
  padding-top: 1em;
  padding-left: 0.8em;
  font-weight: bold;
}

.divider {
  padding:0 20px;
  color: #4A4A4A;
  font-weight: bold;
  margin:10px 0 2px 5px;
}

.approvalPage .divider, .divider.techView {
  display:none;
}

.homePage .navOption {
  display: block;
  float: left;
  padding: 20px;
  border:             1px solid #55C;
  border-top:         1px solid #77F;
  border-bottom:      1px solid #003;
  margin: 8px;
  min-width: 260px;
  text-decoration: none;
  font-size: 1.5em;
  color: white;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius:  4px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#0084C9), color-stop(100%,#3F6075)); /* Chrome,Safari4+ */
}

.homePage .navOption:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#75AADB), color-stop(100%,#0084C9)); /* Chrome,Safari4+ */
  -moz-box-shadow:     0 3px 6px #666;
  -webkit-box-shadow:  0 3px 6px #666;
  box-shadow:          0 3px 6px #666;
}

.sectionList, .listItemBg {
  background:#fff;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  margin:0 10px 10px 10px;
  border: 1px solid #D1D1D1
}

.sectionList.oneItem {
  min-height:50px;
}

.sectionListTitle {
  color:#4A4A4A;
  margin:15px 0 5px 30px;
  font-weight: 600;
}

.sectionList.oneItem.getSavvy {
  margin-top:15px;
}

.addOnPaymentForm .defaultPaymentMethod {
  margin: 10px 0px;
}

.inputField.payment {
  margin:0;
  font-size:1.5em;
  padding-top:10px;
  padding-bottom:10px;
}

.noDefaultPaymentMethod {
  display: none;
  font-weight: bold;
  margin:  10px 0px;
}

.addOnsIssueCount, .qbItemIssueCount {
  color: white;
  border: 2px solid #900;
  background: #C00;
  position: absolute;
  right: 10px;
  padding: 4px 8px;
  top: 12px;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  display:none;
}

.qbItemIssueCount {
  top:-19px;
  right:0px;
}

/*===========================================================================
  Device Info page
===========================================================================*/
#deviceInfos {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

#deviceInfos form, #login form {
  padding: 10px;
}

#deviceInfos .submit{
  text-align:center;
}

#deviceInfos .element{
  padding-bottom:8px;
}

#deviceInfos label{
  display: block;
}

#deviceInfos form input{
  margin-bottom:8px;
  width: 90%;
}

#deviceInfos form .button {
  width: 90px;
}


/*===========================================================================
  404 pageNotFound page
===========================================================================*/
#pageNotFound {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}



#pageNotFound form {
  padding: 10px;
}

#pageNotFound .submit{
  text-align: center;
}

#pageNotFound form .button {
  width: auto;
}


/*===========================================================================
  default error page
===========================================================================*/
#errorPage {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}



#errorPage form {
  padding: 10px;
}

#errorPage .submit{
  text-align: center;
}

#errorPage form .button {
  width: auto;
}

#errorPage .message {
  padding: 10px;
  text-align: center;
}




/*===========================================================================
  Lists
===========================================================================*/
.list{
}

.list .item {
  display: block;
  color: #09527E;
  position: relative;
  text-decoration: none;
  min-height: 30px;
}

.invoices .list .item {
  background: #FFFFFF;
}

.list .item.top {
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius:10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

.list .item.bottom {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

.list .item.bottom .tableLayout {
  border-bottom:0;
}

.list .item.solo {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.list .item.solo .tableLayout {
  border-bottom:0;
}

.list .item .tech {
  font-size:12px;
  margin-bottom:5px;
}

.list .item .street {
  font-weight: bold;
  font-size: 16px;
}

.list .item .cityStateZip {
  color: #4A4A4A;
}

.sectionListItem {
  height:50px;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
  background:#fff;
  color:#4A4A4A;
  position:relative;
}

.disabledNavLink .sectionListItem {
  background: #ddd;
  color: #7B7B7B !important;
}

.disabledNavLink .pageLink {
  background: #ddd;
  color: #7B7B7B !important;
}

.sectionListItem:active, .listItemBg:active {
  background: #0C5CAD;
  color:#fff;
}

.sectionListItem.top, .sectionListItem.bottom {
  height:54px;
}

.sectionListItem.top {
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

.sectionListItem.bottom {
  border-bottom: 0;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

.sectionListItem.solo {
  height:54px;
  border-bottom: 0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius:10px;
}

.sectionListItem.bottom.noClick:active {
  background:#fff;
  color:#3E9C40;
}

.sectionListItem span {
  float:left;
  font-size:16px;
  text-decoration: none;
  margin:16px 10px 0 20px;
}

.sectionListItem img {
  float:right;
  margin:18px 15px 0 10px;
}

.sectionListItem span:active, .sectionListItem a:active {
  color:#fff;
}

.sectionListItem .button {
  margin-top:13px;
}

.sectionListItem .offlineText {
  font-size: 0.8em;
  position:absolute;
  bottom:2px;
  left:0;
  color:#7B7B7B;
  opacity:0.6;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  display:none;
}

.itemContent {
  padding:10px 20px 10px 10px;
}


/*===========================================================================
  Invoice List
===========================================================================*/
.scheduledTime{
  margin-left: 5px;
  margin-right:0px;
  float:right;
}

.invoices .item:hover{
  background: #c6e5fc !important;
}

.invoices .item.selected{
  border-style: solid;
  border-width: 4px;
  border-color: #FFA500;
  font-weight: bold;
}

.invoices .item.selected:after{ /* selected item indicator triangle */
  content: "";
  position: absolute;
  bottom: 50%;
  z-index: 1000;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #ccc;
  border-top: 8px solid transparent;
  margin-bottom: -8px;
  border-left-color: #FFA500;
}

.invoices .item.closed{
  background: #CDCDCD;
}

.invoices .item.open:active, .invoices .item.closed:active{
  background: #0C5CAD;
  color:#fff;
}

.invoices .item .statusIndicator {
  width: 5%;
}

.invoices .item .statusIndicator.top {
  -moz-border-radius: 10px 0 0 0;
  -webkit-border-radius: 10px 0 0 0;
  border-radius: 10px 0 0 0;
}

.invoices .item .statusIndicator.bottom {
  -moz-border-radius: 0 0 0 10px;
  -webkit-border-radius: 0 0 0 10px;
  border-radius: 0 0 0 10px;
}

.invoices .item .statusIndicator.solo {
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
}

.invoices .item .statusIndicator.new {
  background: #A9DBFF;
}

.invoices .item .statusIndicator.started {
  background: #549BFF;
}

.invoices .item .statusIndicator.completed {
  background: #005C9E;
}

.invoices .item .statusIndicator.paid {
  background: #00253F;
}

.invoices .item.selected .statusIndicator {
  width: 4%;
}

.invoices .item.selected .statusIndicator.top {
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
}

.invoices .item.selected .statusIndicator.bottom {
  -moz-border-radius: 0 0 0 5px;
  -webkit-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

.invoices .item.selected .statusIndicator.solo {
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}

.invoices .item .tableLayout {
  border-spacing: 0;
}

.invoices .item.selected .itemBottomBorder {
  display: none;
}

.invoices .item .itemBottomBorder {
  margin:0;
  padding:0;
}

.invoices .item .itemBottomBorder .borderTopLine {
  border-bottom: 1px solid #808080;
  height:1px;
}

.invoices .item .itemBottomBorder .borderBottomLine {
  border-bottom: 1px solid #d4d4d4;
  height:1px;
  margin-top:-1px;
}

.invoices .item.solo .borderTopLine, .invoices .item.bottom .borderTopLine, .invoices .item.solo .borderBottomLine, .invoices .item.bottom .borderBottomLine {
  display:none;
}

.invoices .item .itemContent {
  width:100%;
}

.invoices .item .itemLogo {
  vertical-align:middle;
  width:10px;
}

.invoices .item .itemLogo .userIcon {
  position:absolute;
  left:-24px;
  top:-15px;
}

.users .item .itemLogo .userIcon {
  position:absolute;
  left:-35px;
  top:-22px;
}

.techColor,
.userColor
{
  width:30px;
  height:30px;
  border-radius:17px;
  border-style: solid;
  border-width: 2px;
}

.techColor,
.userColor
{
  border-color:#ffffff;
}

.closed .techColor {
  border-color:#e4e4e4;
}

.techInitials,
.userInitials
{
  position:relative;
  text-align: center;
  top:5px;
  /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
}

.techInitials,
.userInitials
{
  color:#ffffff;
}

.closed .techInitials {
  color:#e4e4e4;
}




.noTech, .noAddress {
  color: #900;
  font-style: italic;
}

.techDisplay {
  margin-bottom: 5px;
  color: #4A4A4A;
  font-size: 12px;
}


.invoices .item .summary .issue {
  font-weight:bold;
}

.invoices .item .summary div {
  padding-right:8px;
  float: left;
}

.invoices .item .status {
  color:#BABABA;
}

.chunk{
  display:inline-block;
}

.prevNextDate {
  font-weight: bold;
}

.currentDateButton {
  width: 94%;
  padding-left:  0 !important;
  padding-right: 0 !important;
}


.pickDateMenu {
  display: none;
  position: relative;
  z-index: 2;
  padding-bottom:4px;
  margin:0 10px;
  margin-top: -1px;
  margin-bottom:-4px;
  width: 140px;
}

.pickDateMenu .menuWrapper {
  padding: 6px 0;
  border: 1px solid #75AADB;
  border-top: 0;
  -moz-box-shadow:    0 5px 6px #BABABA;
  -webkit-box-shadow: 0 5px 6px #BABABA;
  box-shadow:         0 5px 6px #BABABA;
  background: #c6e5fc;
  width: 158px;
}

.pickDateMenu.inline .menuWrapper {
  position: relative !important;
  padding-left: 8px;
}

.pickDateMenu .filterLineItem {
  width:120px !important;
}

.pickDateMenu .topLevel {
  width:inherit !important;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid #fff;
  padding-bottom:2px;
}

.filterBar {
  color: #428bca;
  padding:4px 6px;
  font-size:0.9em;
}

.filterBar a {
  color: #4A4A4A;
  font-weight: bold;
  text-decoration: none;
}

/*.filterBar a:hover,
.filterBar a:focus {
  color: #428bca;
  text-decoration: none;
}*/

.tabsBottomBorder {
  width:100%;
  height:100%;
  border-bottom:1px solid #888;
}

.filterBar.repairs {
  border-bottom:1px solid #bbb;
  padding-top:10px;
  padding-left:5px;
}

.filterBarOnBottom {
  font-size:0.9em;
  position: relative;
  margin-left:4px;
}

.filterBar .button {
  padding-left:  12px;
  padding-right: 12px;
}

.currentFilters {
  margin: 1px 4px;
  color: #FFFFFF;
}

.filterBar table td {
  vertical-align: top;
}

.pickDateInputBlocker,
.filterModeListInputBlocker{
  display:none;
  background-color: #666;
  opacity: 0.9;
  -moz-opacity: 0.9;
  filter:alpha(opacity=9);
  position: absolute;
  width:100%;
  z-index:1;
  top:0px;
  bottom:49px;
}

.pickDateInputBlocker{
  top:86px;
  bottom:0px;
}


.filterSelector {
  margin: 2px 4px;
}

.closeFilter{
  float: right;
  padding: 4px;
  font-size: 1.6em;
  display: block;
  color: #85C7EB;
  font-weight: bold;
  margin-left: -19px;
}

.filterSelectorDivide{
  display:inline-block;
  width:1px;
  background-color:#aaaaaa;
  height:100%;
  margin: 0;
  padding: 0;
  border: 0;
  position:absolute;
  top:0;
}

.filterModeList {
  border: 1px solid #9DC8FF;
  text-align: left !important;
  z-index: 2;
  position: absolute;
  left:   7px;
  top:   -246px;
  width:  300px;
  -moz-box-shadow:    0 3px 6px #aaa;
  -webkit-box-shadow: 0 3px 6px #aaa;
  box-shadow:         0 3px 6px #aaa;
}

.filterModeList.jsEnabled{
  display:             none;
}

.filterModeList .topLevel {
  display:none;
}


.previousMenu {
  font-size: 1.3em !important;
  padding: 0px 8px;
  margin: 6px 0;
}


.filterModeList table     { border-spacing: 0; }
.filterModeList table td  { padding: 0; vertical-align: top; }

.filterModeList .contents {
  overflow: hidden;
  border-top: 0;
  margin:0 10px;
}

.itemBlock .filterLineItem:first-child {
  -moz-border-top-left-radius:     4px;
  -moz-border-top-right-radius:    4px;
  -webkit-border-top-left-radius:  4px;
  -webkit-border-top-right-radius: 4px;
  border-top-left-radius:          4px;
  border-top-right-radius:         4px;
}

.itemBlock .filterLineItem:last-child {
  -moz-border-bottom-left-radius:     4px;
  -moz-border-bottom-right-radius:    4px;
  -webkit-border-bottom-left-radius:  4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-left-radius:          4px;
  border-bottom-right-radius:         4px;
}

.filterModeList .menus {
  position: relative;
  -moz-transition:      left 0.4s, height 0.4s;
  -ms-transition:       left 0.4s, height 0.4s;
  -o-transition:        left 0.4s, height 0.4s;
  -webkit-transition:   left 0.4s, height 0.4s;
  transition:           left 0.4s, height 0.4s;
  -webkit-backface-visibility: hidden;
}

.menuWrapper {
  background: #CFE7FF;
}

.filterModeList .menuBack {
  display: none;
  margin: 0;
}

.filterModeList .previousMenu {
  position: absolute;
  left: 0;
  top:  0;
}


.filterLineItem, .filterSection {
  width: 276px;
  position: relative;
}


.filterSection{
  color: #3F6075;
  font-size: 1.1em;
  text-align:center;
  user-select:none;
  ms-user-select:none;
  moz-user-select:none;
  -webkit-user-select:none;
}

.filterSection span {
  margin:10px;
  display:inline-block;
}

.filterLineItem{
  cursor: pointer;
  display:block;
  position: relative;
  background: #fcfcfc;
  /*avoid gray flicker when tapping items*/
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.filterModeList .menu, .filterModeList .submenu{
  margin:14px 0px;
}

.filterModeList .menu{
  margin-right: 20px;
}

.filterModeList .submenu{
  margin-right: 0;
}

.filterModeList .menu, .filterModeList .submenu{
  margin-top: 4px;
}

.filterLineItem {
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-top: 1px solid #fff;
}

.filterLineItem .filterMark{
  visibility: hidden;
  display:block;
  position: absolute;
  top: 12px;
  right: 8px;
}

.listArrow {
  position:absolute;
  right:6px;
  top: 6px;
  font-family:sans-serif;
  font-weight: bold;
  font-size: 1.6em;
  color: #aaa;
}

.filterLineItem.active{
  background-color:#0C5CAD;
  border-top:#0C5CAD;
  font-weight: bold;
}

.filterLineItem.active .filterMark {
  visibility: visible;
}

.filterLineItemName {
  display: block;
  padding: 12px 24px 12px 16px ;
  font-weight: normal;
  color: #428BCA;
}

/*order dependant.. must be placed before coloring for .selected filterLineItems*/
.filterLineItem .filterLineItemName,.filterMark{
  color: #4A4A4A;
}

.filterLineItem.active .filterLineItemName,.filterMark{
  color:white;
}

a.active.filterStatus, .filterLineItem{
  text-decoration:none !important;
}

.toolbar.filterMode{
  display:inline-block;
  position:relative;
  top:5px;
}

/*===========================================================================
  Home Page
===========================================================================*/

#home .description {
  color: #538883;
  font-style: italic;
  font-size: 14px;
  padding: 4px 0;
}


/*===========================================================================
  Settings (and QB Sync) page
===========================================================================*/
.settingsPage{
  padding:10px;
}

#downloadProgress{
  display:none;
}

.pleaseWait{
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.2em;
}

.progress {
  color:#4A4A4A;
}

.progressBar,
#progressBar{
  height: 12px;
  width:0;
  background: #4074A6;
}

.progressBarBorder,
#progressBarBorder{
  border:1px solid #4074A6;
  padding:2px;
  width:150px;
}

.fullNameSyncOptionText {
  font-size: 0.9em;
  /*font-weight: bold;*/
  color:#666;
}

.fullNameCustomers {
  padding:5px;
  background: #fff;
  border: 1px solid #999;
}

.fullNameSyncSetSuccess, .fullNameSyncSetFail {
  margin-top:5px;
  margin-left:5px;
  font-size:0.7em;
  color:#0a0;
}

.fullNameSyncSetFail {
  color:#F00;
}

.qbOnline {
  display:none;
}

.invoiceYesAll, .invoiceNoAll, .customerYesAll, .customerNoAll {
  text-decoration: none;
  font-size: 0.7em;
}



/*===========================================================================
  Toolbar titles
===========================================================================*/
/*Toolbar titles change to shorter versions for phones in portrait mode*/
.longTitle{
  display:inline;
}

.shortTitle{
  display:none;
}

@media only screen and (max-width: 435px)  {
  .longTitle{
    display:none !important;
  }

  .shortTitle{
    display:inline;
  }
}

/*===========================================================================
  Customer details and invoice details
===========================================================================*/

.detailsContainer {
  position: absolute;
  top:40px;
  right:20px;
  bottom:20px;
  left:20px;
  padding:20px;
  margin:10px;
}

.customerContainer, .invoiceContainer, .notesSection, .techView, .partsUsedContainer {
  background: #fff;
  color:#4A4A4A;
}

.detailsContainer, .customerContainer, .invoiceContainer, .notesSection, .companyContainer.techView, .alertInfo, .alertError, .alertSuccess, .partsUsedContainer {
  padding:0;
  border: 1px solid #adadad;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  border-radius:  10px;
}

.editDetails.invoiceForm,.customerContainer, .invoiceContainer, .notesSection, .companyContainer.techView {
  margin:20px;
}

.partsUsedContainer {
  margin-left:20px;
  margin-bottom:20px;
}

.customerContainer, .invoiceContainer.techView, .notesSection {
  position:relative;
}

.customerContainer span, .invoiceContainer span, .notesSection span, .companyContainer span {
  margin-right:10px;
}

.customerContainer .name {
  font-weight: bold;
}

.customerContainer a:link, .customerContainer a:visited, .customerContainer a:active, .customerContainer a:hover,
.invoiceContainer a:link, .invoiceContainer a:visited, .invoiceContainer a:active, .invoiceContainer a:hover,
.notesSection a:link, .notesSection a:visited, .notesSection a:active, .notesSection a:hover,
.partsUsedContainer a:link, .partsUsedContainer a:visited, .partsUsedContainer a:active, .partsUsedContainer a:hover {
  text-decoration: none;
  color:#4A4A4A;
}

.customerContainer .editButtonContainer a {
  color:#fff;
}

.qbStatus {
  display:none;
  border-radius: 5px;
  background: #CDCDCD;
  overflow: auto;
  padding: 5px;
  color: #447390;
  padding-bottom:10px;
}

.qbStatusInfo {
  margin-left:10px;
}

.offline, .syncStatus, .totalChanged, .syncableStatus, .invoiceIssues, .syncOptions, .syncDecision {
  max-width: 590px;
  display:none;
}

.offline, .syncStatus, .totalChanged, .syncableStatus, .invoiceIssues, .syncDecision, .qboSyncableItems {
  margin:5px 0;
  font-size: 0.8em;
}

.invoiceIssues ul {
  padding-left: 20px;
}

.invoiceIssues li {
  padding-bottom:3px;
}

.qbStatus img, .qbStatusInfo {
  float: left;
}

.syncOptions {
  margin-top:10px;
}

.syncLabel {
  font-weight: bold;
}

.syncButtons {
  margin-top:5px;
}

.syncYes, .syncNo {
  float:left;
  padding:5px 10px;
  color:#ffffff !important;
}

.syncNo {
  margin-left:5px;
}

.syncButtons a:hover {
  text-decoration:none;
  color:#ffffff;
}

.companyInfo, .customerInfo {
  margin:0 10px 10px 35px;
}

.companyInfo {
  margin-top:10px;
  float:left;
}

.customerInfo {
  margin-top:10px;
}

.detailsColumn {
  padding: 10px 10px 10px 0;
}

.notesSection .detailsColumn{
  max-width: 636px;
  overflow-wrap: break-word;
}

.customerContainer .detailsColumn .customerNumber, .customerContainer .detailsColumn .email {
  color:#777777;
}

.customerContainer .detailsColumn .email {
  margin-top:10px;
}

.companyContainer.techView {
  display:none;
}

.invoiceInfo {
  margin-bottom:10px;
}

/*.setInvoiceStatus {
  margin:0 20px 0 55px;
  color:#4A4A4A;
}*/

.workOrderImageContainer {
  clear:both;
  margin:20px;
}

.costBreakdown{
  display:none;
  font-size: 0.9em;
}

.costBreakdown input{
  border: none;
  background: none;
  color: blue;
  font-weight: normal;
  text-shadow: none;
  box-shadow: none;
}

.costBreakdown input:focus{
  border: none;
  background: none;
  color: blue;
  font-weight: normal;
  text-shadow: none;
  box-shadow: none;
}

.addRepairButton .buttonContainer {
  padding:4px;
  padding-left:0;
  display:inline;
}

.notes textarea {
  width: 100%;
}

.share textarea {
  width:100%;
  display:block;
}

.emptyNotesLabel, .emptyCustomerLabel {
  font-size: 60px;
  font-style: italic;
  font-weight: bold;
  opacity:0.15;
  filter:alpha(opacity=15);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  text-align: center;
  text-decoration: none;
  color:#4A4A4A;
}

.editNotesButton {
  clear:both;
}

.laborAndParts td {
  vertical-align: top !important;
}

.laborAndParts td, .laborAndParts td {
  border-top: 1px dashed #ddd;
  padding: 8px 0;
}

.deleteRestoreArchive  {
  min-height: 20px;
  padding: 20px 0;
}

.deleteRestoreArchive {
  text-align: center;
}

.deleteInvoiceForm, .archiveInvoiceForm, .restoreInvoiceForm {
  margin:0 10px;
  display:inline;
}

.searchResults .laborAndParts, .companyFavorites .laborAndParts, .userFavorites .laborAndParts {
  display: none;
}

.searchResults .infoText, .companyFavorites .infoText, .userFavorites .infoText {
  text-align: center;
  border-bottom: 1px solid #BABABA;
  background: #eee;
  padding:4px;
}

.searchResults .repair .addForm .button, .companyFavorites .repair .addForm .button, .userFavorites .repair .addForm .button {
  padding-left:  10px;
  padding-right: 10px;
}

.searchResults a.details, .companyFavorites a.details, .userFavorites a.details {
  text-decoration: none;
  color: inherit;
}

.searchResults .repair .leftColumn, .companyFavorites .repair .leftColumn, .userFavorites .repair .leftColumn {
  width: 68px;
  vertical-align: top;
}

.favoritesTitle {
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
}

.moreDetailsPlease {
  background: #ffc;
  border-bottom: 1px solid #bb8;
  color: #774;
  display: none;
  padding: 4px 8px;
}

.repair .leftColumn .label{
  margin-left: 8px;
}

.priceContainer {
  padding:0 10px;
}

.parts .empty {
  display:inline-block;
}

.parts {
  padding: 0 !important;
}

.parts .part {
  border-bottom: 1px dotted #ddd;
  padding: 8px 0;
}

.parts .part:last-child {
  border-bottom: 0;
}

.approvalContainer {
  text-align: left;
  width:140px;
}

.techView .approvalContainer {
  text-align: left;
  padding-left: 6px;
}

.promoItems a:link, .promoItems a:visited, .promoItems a:active, .promoItems a:hover {
  text-decoration: none;
  color:#4A4A4A;
}

@media only screen and (min-width: 100px)  {
/*  .promoBug {
    position: absolute;
    right: 25px;
  }

  .promoBug img {
    width: 150px;
  }*/

  .promoThumbnail img {
    max-width: 95px;
    max-height: 75px;
  }

  .promoDescription .name {
    font-weight: bold;
    padding-top: 10px;
  }

  .promoInstruction {
    font-size: 0.8em;
    font-style: italic;
    color: #e7161b;
  }
}

@media only screen and (min-width: 450px) {
/*  .promoBug {
    position: absolute;
    right: 50px;
  }

  .promoBug img {
    width: 150px;
  }*/

  .promoThumbnail img {
    max-width: 150px;
    max-height: 75px;
  }

  .promoDescription .name {
    font-weight: bold;
    padding-top: 10px;
  }

  .promoInstruction {
    font-size: 0.8em;
    font-style: italic;
    color: #e7161b;
  }
}

.rows a:link, .rows a:visited, .rows a:active, .rows a:hover {
  text-decoration: none;
  color:#4A4A4A;
}

.repairContainer, .promoContainer {
   padding:10px 0;
   position:relative;
 }

.approvalContainer {
  padding-right: 8px;
}

.approvalPage .lineItemList .approvalControls .question {
  display: none;
  vertical-align: middle;
  font-weight: bold;
}

.techView .divider {
  padding-left: 8px;
}

.techView .currentStatus {
  float:right;
  padding: 8px 0 0;
  text-align: right;
}

.divider .label {
  color: #fff;
}

.editItem{
  padding: 8px 10px;
  margin: 8px 0;
}

.editCustomerDetails, .editInvoiceDetails {
  padding: 8px 10px;
}

.companyLogo {
  padding:20px 20px 10px 20px;
}

.notesSection {
  clear:both;
  margin-bottom:0;
}

.notesBorder {
  border: 1px solid #adadad;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  border-radius:  10px;
}

.internalNotesContainer, .customerNotesContainer {
  clear:both;
}

.customerNotesContainer {
  padding-top:10px;
}

.internalNotesContainer label, .customerNotesContainer label {
  font-weight: bold;
}

.notesContainer {
  margin:0 45px 10px 55px;
  clear:both;
}

.notesContainer label {
  font-weight: bold;
}


.currencyMarker{
  position:absolute;
  right:104px;
  display:none;
}

.descriptionContainer {
  position: relative;
  margin-right: 10px;
}

.lineItemList.customerApproval {
  width:100%;
  padding:5px 0;
  color:#4A4A4A;
}

.techView .priceContainer {
  text-align: right;
}

.techView .priceContainerSmall {
  display:none;
  text-align: right;
  padding-right:0;
}

.techView .priceDivider {
  display:none;
  border-bottom: 1px dashed #ddd;
}

.lineItemTapIcon {
  min-height:60px;
  padding-right:10px;
  padding-left:10px;
  border-left:1px solid #ddd;
  float:left;
}

.deletedItemsText {
  margin-top:20px;
  font-size:12px;
  display:none;
}



/*Plus sign (instead of Create Work Order button) for phones in portrait mode*/
.add.button, .toolbar .button.createWorkOrderShort {
  font-size:20px !important;
  font-weight:bold !important;

  background:#3E9C40;

  /*background: #319423;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #3E9C40 0%, #2C842E 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E9C40), color-stop(100%,#2C842E));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #3E9C40 0%,#2C842E 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E9C40', endColorstr='#2C842E',GradientType=0 );*/
}

.add.button:active, .toolbar .button.createWorkOrderShort:active {
  background: #2C842E;

  /*background: #2C842E;*/ /* Old browsers */
  /*background: -moz-linear-gradient(top,  #2C842E 0%, #3E9C40 100%);*/ /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2C842E), color-stop(100%,#3E9C40));*/ /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* IE10+ */
  /*background: linear-gradient(top,  #2C842E 0%,#3E9C40 100%);*/ /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C842E', endColorstr='#3E9C40',GradientType=0 );*/ /* IE6-9 */
}

.add.button {
  padding: 3px 9px 6px !important;
}

.toolbar .button.createWorkOrderShort {
  padding: 2px 10px;
}

a.add.button {
  font-weight: normal !important;
  font-size: 20px !important;
  padding: 2px 10px !important;
}

/* don't set width on add buttons that are in <a> tags */
input.add.button{
  width:35px;
}

.resize{
  max-height:200px;
  max-width:400px;
  width:auto;
  margin:10px 10px 5px 30px;
}

/* make the logo smaller on small screens */
@media only screen and (max-width: 700px)  {
  .resize{
    max-width:200px;
  }
}

.editCustomer.button{
  margin: 8px 0;
  color:#fff;
}

.editDetails, .editCustomer, .invoiceForm{
  padding:10px;
}

.invoiceForm .inputField{
  margin: 6px 0 ;
  width:270px;
}

.invoiceForm select{
  width: 290px;
  margin:4px;
}

.invoiceForm textarea{
  width:280px;
  margin:6px;
}

.searchResults .favoriteBlock {
  min-width:210px;
}

/* Allow the company favorites and user favorites to stack on smaller screens */
@media only screen and (max-width: 440px) {
  .searchResults .favoriteBlock {
    min-width: 0;
  }
}

.companyFavorites .favoriteBlock, .userFavorites .favoriteBlock {
  min-width:95px;
}

.toggleFavorite, .toggleCompanyFavorite {
  cursor:pointer;
  float:right;
  width:92px;
}

.toggleFavorite {
  margin-top:7px;
}

.favoriteImage{
  margin-bottom: 7px;
}

.favoriteText {
  width:70px;
  display:inline-block;
}

.invoiceForm label, .customRepairForm label, .discountForm label, .tuneUpForm label, .installationForm label{
  margin-top: 6px;
  margin-left: 4px;
  color: #4A4A4A;
}

.discountForm label {
  vertical-align:middle;
  margin-right:0;
  font-weight:bold;
}

.tuneUpForm label, .installationForm label {
  font-weight:bold;
}

.tuneUpForm label, .installationForm label, .invoiceForm label {
  display:block;
}

.customRepairForm, .discountForm, .tuneUpForm, .installationForm {
  padding:8px 3% 6%;
}

.tuneUpForm .nameOption input, .tuneUpForm #useCustom, .tuneUpsCheckboxes .tuneUpOption, .discountCheckboxes .discountOption {
  float:left;
  margin-right: 7px;
}

.installationForm .nameOption input, .installationForm #useCustom, .installationsCheckboxes .installationOption, .discountCheckboxes .discountOption {
  float:left;
  margin-right: 7px;
}

.discountOptionLabel, .tuneUpOptionLabel, .installationOptionLabel {
  color:black
}

.tuneUpsCheckboxes .tuneUpOption, .installationsCheckboxes .installationOption, .discountCheckboxes .discountOption, .discountOptionLabel, .tuneUpOptionLabel, .installationOptionLabel {
  cursor:pointer;
}

.tuneUpForm #useCustom {
  margin-top:0;
}

.installationForm #useCustom {
  margin-top:0;
}

.diagnosticDiscountMessage {
  position:absolute;
  bottom:5px;
  padding:16px 16px 16px 0;
  height:0.8em;
  display:block;
}

.customRepairForm .inputField, .discountForm .inputField{
  padding:2px 4px;
  margin:6px 4px;
  width:270px;
}

.customRepairForm textarea.inputField {
  height: 24px;
  overflow: hidden;
}

.customRepairForm .button, .discountForm .button, .tuneUpForm .button, .installationForm .button{
  margin:10px 4px;
}

.installationForm .installationPrice {
  text-align:center;
  width:70px;
  vertical-align:middle;
}

.customRepairForm p {
  margin:0 4px;
}

.divColumn {
  display:inline;
  float:left;
  height:25px;
  line-height:25px;
  margin-bottom: 10px;
}

.firstColumn {
  width:15px;
}

.customRepairForm .secondColumn {
  width:100px;
}

.customRepairForm label {
  vertical-align:middle;
  margin-right:5px;
  margin-left:10px;
}

.editDetails td{
  vertical-align: top;
}

#showNotes, #showDiscounts, #showTuneUps, #showCustomer2, #showInstallations {
  display:inline-block;
  padding-right: 10px;
  /*float:right;*/
  text-decoration: none;
  color: #66f;
}

.discountsContainer {
  margin-bottom:20px;
}

.discountCheckboxes, .tuneUpsCheckboxes, .installationCheckboxes {
  margin:10px 0 5px 0;
}

.signatureContainer, .partsSignatureContainer {
  float:left;
  margin-top:10px;
}

.signatureForPrint {
  display:none;
}

.warranty {
  margin:10px 0 0 0;
  padding:10px;
  border-top:1px solid #999;
  display:none;
  clear:both;
}

.warrantyTitle {
  color:#BABABA;
  margin-left:45px;
  margin-right:30px;
}

.warrantyText {
  color:#BABABA;
  margin:0 30px 15px 45px;
  font-size:0.8em;
}

.emailCustomer {
  /*float:right;*/
  margin-left:5px;
}

.approvePrompt{
  z-index: 1;
  margin:0 8px 8px;
  display: inline-block;
  padding:16px;
  font-weight:normal;
  font-size:14px;
  border:2px solid #75AADB;
  background-color: #D3EAFF;
  -moz-box-shadow:    0 3px 6px #aaa;
  -webkit-box-shadow: 0 3px 6px #aaa;
  box-shadow:         0 3px 6px #aaa;
}

.largeText{
  font-size:18px;
  font-weight:bold;
  padding-bottom:10px;
}

.approvePrompt .largeText{
  color: #000;
}

.approvePromptHide {
  display:none;
}

.approveArrowBorder
{
    border-color: #75AADB transparent transparent transparent;
    border-style: solid;
    border-width: 18px;
    height:0;
    width:0;
    position:absolute;
    bottom:-28px;
    left:24px;
}

.approveArrow
{
    border-color: #D3EAFF transparent transparent transparent;
    border-style: solid;
    border-width: 18px;
    height:0;
    width:0;
    position:absolute;
    bottom:-26px;
    left:24px;
}

.printOptionsBg {
  border: 1px solid #75AADB;
  border-top: 0;
  -moz-box-shadow:    0 5px 6px #BABABA;
  -webkit-box-shadow: 0 5px 6px #BABABA;
  box-shadow:         0 5px 6px #BABABA;
  /*background: #AFD2FE;*/
  background: #F5F5F5; /* Old browsers */
  background: -moz-linear-gradient(top,  #71A6CC 0%, #2A5773 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#71A6CC), color-stop(100%,#2A5773)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #71A6CC 0%,#2A5773 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #71A6CC 0%,#2A5773 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #71A6CC 0%,#2A5773 100%); /* IE10+ */
  background: linear-gradient(top,  #71A6CC 0%,#2A5773 100%); /* W3C */
   -moz-border-radius: 5px;
  -webkit-border-radius:5px;
  border-radius:  5px;
  padding:10px;
}

.printOptions {
  display: none;
  position: absolute;
  z-index: 2;
  right: 0;
  border: 1px solid #75AADB;
  border-top: 0;
  -moz-box-shadow:    0 5px 6px #BABABA;
  -webkit-box-shadow: 0 5px 6px #BABABA;
  box-shadow:         0 5px 6px #BABABA;
  /*background: #AFD2FE;*/
  background: #F5F5F5; /* Old browsers */

   -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
}

.printOptionsButton {
  position:relative;
  margin-left:-2px;
}

.printOptionsButton:focus {
  outline: none;
}

.printOptionsBlocker {
  background-color: #666;
  /*opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);*/
  display: none;
  z-index:1;
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:-2px;
}

.internalPrintContent {
  display:none;
}

.internalPrintContent .invoiceInfo {
  margin:10px 10px 10px 35px;
}

.internalPrintContent .invoiceContainer, .internalPrintContent .customerContainer, .internalPrintContent .notesSection {
  margin:10px;
}

.internalPrintContent .items {
  margin:5px 10px 0 10px;
}

.internalPrintContent .divider {
  color:#4A4A4A;
  font-weight: bold;
  padding-left: 40px;
}

.internalPrintContent .notesSection .detailsColumn {
  padding:5px 0;
}

.internalPrintContent .notesSection .customerNotesContainer {
  padding-top:5px;
}

.internalPrintContent .internalNotice {
  width:100%;
  text-align: center;
  font-weight:bold;
  font-size:18px;
  color:#999999;
}

.internalPrintContent .lineItemFooter {
  margin-right:28px;
}

/*===========================================================================
  Customer Page and Invoice Detail Page
===========================================================================*/
.invoiceDetail{
  float:right;
}

.nonQBBorder{
  border:1px solid black;
  padding:5px;
}

.customerLabelContainer {
  height:30px;
}

.customerSearchInfo {
  color:#4A4A4A;
}

.searchBusyText {
  color:#AAA;
}

.customerSearchNoResults {
  color:#AAA;
}

.customerModify {
  display:none;
}

.customerModify .modifyText {
  color:#f00;
  font-size: 12px;
}

.customerForm{
  max-width:280px;
}

.customerContainer .customerDetails,
.customerContainer .customer2Details{
  display:table-cell;
}

.customerContainer .customerDetails{
  margin-right:5px;
  margin-top:5px;
  margin-bottom:5px;
}

.customerContainer .customer2Details{
  width:50%;
  margin-right:22px;
  margin-top:5px;
  margin-bottom:5px;
}

#customerDetails,
#customer2Details{
  display:inline-block;
  width:304px
}

.customerLabel {
  text-decoration: underline;
  font-style: italic;
  font-size: 0.9em;
  color: #4A4A4A;
  margin-bottom: 5px;
}

.customerButtons {
  margin:10px 0;
  clear:both
}

.secondCustomerFeature {
  display:none;
}

.customerDetailsWrapper {
  width:100%;
  display:table;
}

@media only screen and (min-width: 650px) {
  #customer2Details{
    margin-left:10px;
  }
}

@media only screen and (max-width: 550px) {
  .customerContainer .customer2Details{
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
  }
}

.customerFormRestart,
.customer2FormRestart,
.customerFormCancel,
.customer2FormCancel {
  margin:5px 0 0 5px;
}

.customerFormCancel,
.customer2FormCancel {
  display:none;
}

.customerButtonTable{
  table-layout:fixed;
  width:95%;
}
.customerButtonTable tr {
  text-align:center;
  vertical-align:middle;
}
.customerButtonTable .customerFormRestart,
.customerButtonTable .customer2FormRestart,
.customerButtonTable .customerFormCancel,
.customerButtonTable .customer2FormCancel {
  margin:0px
}


.searchResultsHeader {
  margin: 5px 0;
  background: #DDD;
  color: #666;
  border-bottom: 1px solid #666;
  padding:5px;
}

.dismissAutoSearch{
  float: right;
  margin-right:5px;
}

.dismissAutoSearchBtn{
  margin-left: 8px;
  cursor: pointer;
  width: 18px;
  height: 17px;
  background: url('/images/remove-button.png');
  background-repeat: no-repeat;
  background-position: left top;
  border:none;
}

.qbLinked, .qbNoConnection {
  display:none;
  font-size:0.9em;
  margin:5px;
  background: #FFFFFF;
  border:1px solid #aaaaaa;
  padding: 5px;
}

.qbLinked.locked {
  display:block;
}

.qbNoConnection {
  color:#F00;
}

.unlinkQbCustomer {
  color: #66f;
}

.qbLinkIcon {
  display:none;
}

.qbLinkIcon.locked {
  display:block;
}

.customerInputContainer .qbLinkIcon,
.customer2InputContainer .qbLinkIcon
{
  position:absolute;
  top:-10px;
  left:140px;
}

/*.qbNoConnection {
  display:none;
}*/

.customerInputContainer,
.customer2InputContainer
{
  margin-top:-6px;
}

.customerInputContainer.searchDisabled,
.customer2InputContainer.searchDisabled
{
  border:1px solid #666666;
  position:relative;
  padding:5px 0;
  margin-top:5px;
}


input.typeaheadControl
{
  padding:6px;
  margin:4px;
}


input.firstName,
input.lastName{ width: 120px; }
input.customerExternalId,
input.fullName,
input.companyName,
input.billToName,
input.email,
input.phone,
input.street,
input.secondLine  { width: 268px; }
input.city    { width: 118px; }
input.state   { width: 34px; }
input.zip     { width: 60px; }

.savingsContainer {
  margin-right:45px;
  clear:both;
}

.invoiceForm .customerQuickbooksInfo {
  color:#900;
  margin-bottom: 15px;
  display:none;
}

.qbSearchDisabled {
  background: #EFEFEF;
  opacity: 0.7;
}

/*===========================================================================
  Merge-it
===========================================================================*/
.customerTable.table {
  background-color: #CDCDCD;
}
.customerTable.table thead tr th, .customerTable.table tfoot tr th {
  border: 1px solid #FFF;
  padding: 4px 16px !important;
}
.customerTable.table tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}
.customerTable.table tbody tr.odd td {
  background-color:#F0F0F6;
}

/*===========================================================================
  Invoice Page
===========================================================================*/
.forceInvoiceSync{
  display:none;
  float:right;
  color:#BABABA;
  padding: 5px;
}


a.invoiceDetails{
  float: right;
}

.thanks{
  margin:18px 26px;
  color: #538883;
  font-size:1.5em;
  font-style: italic;
}

.companyContainer .documentTypeTitle {
  position: absolute;
  right: 0;
  padding: 10px 30px 10px 10px;
  font-weight: bold;
  font-size: 2.5em;
}

@media only screen and (max-width: 560px) {
  .companyContainer .documentTypeTitle {
    position: static;
    padding: 0;
    margin-top: 10px;
    margin-left: 35px;
    font-size: 2em;
  }
}

#envelopeDocumentTypeTitle {
  display: none;
}


/*===========================================================================
  Repair Search
===========================================================================*/

.tapInstructions {
  padding:8px 8px 0;
  color: #858585;
  font-weight: normal;
}

.searchResultsContainer {
  padding-bottom:30px;
}

.searchBox{
  padding: 5px;
  width: 100%;
}

form.addForm .button{
  margin:0 10px 0 0;
}

.searchForm{
  margin-top: -5px;
}

.searchForm table {
  width: 100%;
}

.searchForm table td {
  vertical-align: middle;
}

.searchIndicator {
  font-size:      18px;
  margin:         12px;
  display:        none;
  background:     #666;
  color:          white;
  padding:        20px;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius:  4px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -moz-user-select:     none;
  -ms-user-select:      none;
  -webkit-user-select:  none;
  user-select:          none;
  opacity:        0.9;
  z-index:        100;
  position:absolute;
  top:140px;
  left:66px;
  margin-top:0;
}

.searchSuggestions{
  display:        none;
  border-bottom:  1px solid #bbb;
  overflow:       auto;
  white-space:    nowrap;
  background:     #BABABA;
}

.searchSuggestionInstructions {
  color:#ddd;
  display: none;
  font-size:0.8em;
  padding:2px;
  text-align: center;
}

.searchSuggestionInstructions img {
  width: 14px;
  vertical-align: bottom;

  transform: rotate(15deg);

  -webkit-animation: swipe-left-animation ease-in 1.5s;
     -moz-animation: swipe-left-animation ease-in 1.5s;
       -o-animation: swipe-left-animation ease-in 1.5s;
      -ms-animation: swipe-left-animation ease-in 1.5s;
          animation: swipe-left-animation ease-in 1.5s;

  -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
       -o-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;

  -webkit-animation-iteration-count: 3;
     -moz-animation-iteration-count: 3;
       -o-animation-iteration-count: 3;
      -ms-animation-iteration-count: 3;
          animation-iteration-count: 3;
}

@keyframes swipe-left-animation {
    0% {opacity:1; transform: rotate(15deg); }
   22% {opacity:1; transform: rotate(-15deg); }
   34% {opacity:1; transform: rotate(-15deg); }
   58% {opacity:0; transform: rotate(-15deg); }
   67% {opacity:0; transform: rotate(15deg); }
   89% {opacity:1; transform: rotate(15deg); }
  100% {opacity:1; transform: rotate(15deg); }
}

@-moz-keyframes swipe-left-animation {
    0% {opacity:1; -moz-transform: rotate(15deg); }
   22% {opacity:1; -moz-transform: rotate(-15deg); }
   34% {opacity:1; -moz-transform: rotate(-15deg); }
   58% {opacity:0; -moz-transform: rotate(-15deg); }
   67% {opacity:0; -moz-transform: rotate(15deg); }
   89% {opacity:1; -moz-transform: rotate(15deg); }
  100% {opacity:1; -moz-transform: rotate(15deg); }
}

@-webkit-keyframes swipe-left-animation {
    0% {opacity:1; -webkit-transform: rotate(15deg); }
   22% {opacity:1; -webkit-transform: rotate(-15deg); }
   34% {opacity:1; -webkit-transform: rotate(-15deg); }
   58% {opacity:0; -webkit-transform: rotate(-15deg); }
   67% {opacity:0; -webkit-transform: rotate(15deg); }
   89% {opacity:1; -webkit-transform: rotate(15deg); }
  100% {opacity:1; -webkit-transform: rotate(15deg); }
}

@-o-keyframes swipe-left-animation {
    0% {opacity:1; -o-transform: rotate(15deg); }
   22% {opacity:1; -o-transform: rotate(-15deg); }
   34% {opacity:1; -o-transform: rotate(-15deg); }
   58% {opacity:0; -o-transform: rotate(-15deg); }
   67% {opacity:0; -o-transform: rotate(15deg); }
   89% {opacity:1; -o-transform: rotate(15deg); }
  100% {opacity:1; -o-transform: rotate(15deg); }
}

@-ms-keyframes swipe-left-animation {
    0% {opacity:1; -ms-transform: rotate(15deg); }
   22% {opacity:1; -ms-transform: rotate(-15deg); }
   34% {opacity:1; -ms-transform: rotate(-15deg); }
   58% {opacity:0; -ms-transform: rotate(-15deg); }
   67% {opacity:0; -ms-transform: rotate(15deg); }
   89% {opacity:1; -ms-transform: rotate(15deg); }
  100% {opacity:1; -ms-transform: rotate(15deg); }
}

.touchScroll {
  overflow:       scroll;
  -webkit-overflow-scrolling: touch;
}

.suggestion{
  display: inline-block;
  text-align: left;
  color: #000;
  background: #fff;
  border-right: 1px solid #bbb;
  position: relative;
  text-decoration: none;
  padding: 9px 8px;
}

.suggestionsTitle{
  background: #BABABA;
  color: #fff;
  padding: 4px 6px 3px;
  text-shadow: 0 1px 0 #333;
  font-size: 0.8em;
  line-height: 1.2em;
  display: inline-block;
}

.suggestions {
  display: inline-block;
  vertical-align: top;
}

.loadMoreInvoices,
.loadingMoreRepairs,
.loadMoreRepairs{
  display:          block;
  padding:          16px;
  margin:           0;
  font-weight:      bold;
  text-decoration:  none;
  border-bottom:    1px solid #BBB;
  color:             #2A5773;
}

.loadMoreInvoices:active
.loadMoreRepairs:active{
  color:             #fff;
  background:        #33d;
}

.loadMoreInvoices {
  text-align: center;
  color:      #75AADB;
  font-size:  20px;
}

.loadingMoreRepairs{
  color:#538883;
}

.addCustom, .nextSyncDetails {
  position:absolute;
  bottom:0;
  padding:16px;
  color:#858585;
  font-size:11px;
  height:0.8em;
}

.addCustom a, .nextSyncDetails a {
  color:#0E64D8;
}

.addCustom {
  left: 0;
  right: 0;
  text-align: center;
}

/*===========================================================================
  Repairs and line items
===========================================================================*/

.itemAdd  {
  background-color: #0E64D8; /*#f8f8f8;*/
  border:1px solid rgba(0,0,0,0.1); /*#e8e8e8;*/
  border-color:#e9e9e9;
  padding: 4px 9px 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-decoration: none;
  color:#fff; /*#00295b;*/
  float:left;
  margin:5px;
  font-size: 11px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


.repair th, .items th{
  color: #BABABA;
  text-align: left;
  font-weight: normal;
}

.declinedItem .category,
.declinedItem .number,
.declinedItem .description,
.declinedItem .comment,
.declinedItem .quantity,
.declinedItem .price,
.declinedItem .priceWide,
.declinedItem .laborTime{
  text-decoration:line-through;
  color: #aaa !important;
}

.statusBar {
  margin:5px 20px 20px 0;
  padding:0;
  list-style:none;
  /*width:500px;*/
}

.statusBar li {
  display:inline;
}

.statusBar li a {
  text-decoration: none;
  padding:5px 0;
  width:70px;
  background: #fff;
  color:#7B7B7B;
  float:left;
  text-align: center;
  border-top:1px solid #9d9d9d;
  border-right:1px solid #9d9d9d;
  border-bottom:1px solid #9d9d9d;
  border-color:#adadad;
  font-size:10px;
  overflow:hidden;
}

.statusBar li a:hover {
  text-decoration: underline;
}

.statusBar #statusNew {
  border-left:1px solid #9d9d9d;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}

.statusBar #statusPaid {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}

.statusBar .statusIndicator {
  height: 5px;
  display: block;
  margin-top: 3px;
  margin-bottom: -5px;
}

.statusBar #statusNew .statusIndicator {
  background:#A9DBFF;
}

.statusBar #statusStarted .statusIndicator {
  background:#549BFF;
}

.statusBar #statusCompleted .statusIndicator {
  background:#005C9E;
}

.statusBar #statusPaid .statusIndicator {
  background:#00253F;
}

.statusBar .statusSelected {
  background:#0E64D8;
  color:#fff;
}

.statusBar #statusNew.statusSelected {
  background:#A9DBFF;
}

.statusBar #statusStarted.statusSelected {
  background:#549BFF;
}

.statusBar #statusCompleted.statusSelected {
  background:#005C9E;
}

.statusBar #statusPaid.statusSelected {
  background:#00253F;
}


.items, .itemAddContainer, .promoItems {
  border:1px solid #adadad;
  background:#fff;
}

.itemAddContainer, .setInvoiceStatus {
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  /*padding:10px 20px;
  margin:5px 20px 0 20px;*/
}

.itemAddContainer {
  min-height:45px;
  height:100%;
  padding:10px 20px;
  margin:5px 20px 0 20px;
}

.promoItems {
  height:100%;
  padding-left:10px;
  margin:5px 20px 5px 20px;
}

.itemAddContainer.solo, .setInvoiceStatus {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.setInvoiceStatus {
  margin-left:20px;
  color:#4b78ab;
}


.items{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin:0 20px 10px 20px;

  /*-moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius:0 0 10px 10px;
  border-radius: 0 0 10px 10px;
  margin:0 20px 10px 20px;*/
}

.customerPrint .items.techView {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius:0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

/*.approvalPage .items, .items.partsRequested, .recommendedPartsList .items, .items.closed, .items.shoppingCart {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}*/


.items.closed {
  margin:10px 20px 10px 20px;
}

.customerPrint .items.techView.closed {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.repair, .lineItem, .lineItemHeader{
  position: relative;
  margin-left:0;
  margin-right:0;
  border-bottom: 1px solid #ddd
}

.lineItem.bottom {
  border-bottom:none;
}

.techView .lineItem {
  min-height:60px;
}

.techView .lineItem.bottom {
  border-bottom:none;
}

.lineItem.empty .description {
  color:#BABABA;
}

.admin .empty {
  color:#BABABA;
}

.declinedItem {
  background: #f2f2f2;
}

.declinedItem.top {
  border-radius: 10px 10px 0 0;
}

.declinedItem.bottom {
  border-bottom:none;
  border-radius:0 0 10px 10px
}

.declinedItem.solo {
  border-bottom:none;
  border-radius:10px 10px 10px 10px
}

.techView .declinedItem.bottom {
  border-bottom:none;
  min-height:60px;
  border-radius:0 0 10px 10px;
}

.leftColumn {
  width: 30px;
  vertical-align: middle !important;
}

.leftColumn .label{
  margin-left: 8px;
}

.dividerColumn {
  width:3px;
  margin:2px 0;
}

.dividerLine {
  position:absolute;
  border-left:1px solid #ddd;
  top:0;
  bottom:0;
  margin:20px 0;
}

.tapColumn {
  width:30px;
  padding-left:10px;
}

.tapIconDivider {
  min-height:60px;
}

.lineItemFooter .label{
  padding-left:0;
  padding-right:15px;
}

.lineItemTotals {
  float:right;
}

.lineItemFooter{
  float:right;
  margin:5px 75px 10px 0;
}

.discountsApplied {
  margin-right:55px;
}

.lineItemFooter.customerApproval {
  margin-right: 45px;
}

.lineItemFooter td {
  padding:4px 0 4px 4px;
}

.lineItemFooter .value {
  text-align: right;
}

.lineItemFooter .taxableAmount {
  font-size: 0.7em;
  font-weight: bold;
}

.lineItemFooter .labelColumn {
  float:left;
  width:165px;
  text-align: right;
}

.lineItemFooter .valueColumn {
  float:left;
  width:117px;
}

.lineItemFooter .underline {
  border-bottom:1px solid #000;
}

.savingsForPrint, .notesWarrantyForPrint {
  display:none;
}

.repair {
  padding:20px;
}

.lineItemHeader{
  padding: 0 8px;
}

.repair td, .lineItem td{
  vertical-align: middle;
}

.repair .labor, .lineItem .labor{
  margin-right:8px;
}

.repair .category, .repair .trade{
  font-size:0.8em;
}

.techView .priceColumn .price,
.techView .lineItem .trade,
.techView .lineItem .number,
.techView .lineItem .description,
.techView .priceColumn .priceWide,
.techView .priceColumn .quantityWide {
  color:#4A4A4A;
  font-size:1.0em;
}

.techView .priceColumn .quantityWide,
.priceColumn .itemQuantity {
  display:inline-block;
}

.techView .lineItem .trade {
  font-size: 0.8em;
}

.repair .category, .partSummary .category{
  color: #a00;
  font-size:0.85em;
}

.techView .lineItem .category{
  color: #e7161b;
  font-size:0.85em;
}

.repair .comment, .lineItem .comment, .partSummary .comment {
  color:#7B7B7B;
}

.repair .details ul li{
  list-style-type: none;
  font-size:13px;
}

.repair .details ul{
  margin: 0;
  padding: 0 20px
}

.priceBreakDown,.sharedPriceComponents{
  display:none;
}

.dashed{
  border-bottom:1px dashed #bb8;
}

.recoveryPriceColumn,.partsTaxPercColumn, .laborTaxPercColumn, .laborPriceColumn, .laborTaxColumn, .partsPriceColumn, .partsTaxColumn, .agreementColumn{
  display:none;
}

 .recoveryPriceColumn,.partsTaxPercColumn, .laborTaxPercColumn, .agreementColumn, .laborPriceColumn, .laborTaxColumn, .partsPriceColumn, .partsTaxColumn, .priceColumn, .subtotal, .tax, .total, .savings, .beforeTax, .pastDue {
  font-weight: normal;
  font-size: 15px;
  white-space: nowrap;
  color:#4A4A4A;
}

.total .label, .total .value {
  font-weight: bold;
}

.pastDue .label, .total .label, .subtotal .label, .savings .label, .beforeTax .label, .tax .label {
  color:#4A4A4A;
  text-align: right;
}

.savings, .savings label {
  color: #D62828
}

.savings .label {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width:300px;
}

.actualSavings,
.possibleSavings,
.closedPaidSavings {
  margin-bottom:20px;
  color:#3a3;
  font-size:26px;
  float:right;
  font-weight:bold;
  text-align:right;
}

.actualSavings {
  color:#090;
}

.possibleSavings,
.closedPaidSavings {
  color:#c00;
}

.savingsReason{
  font-size:12px;
}

.price {
  color: #4A4A4A;
  margin-right:13px;
}

/*animating the width of this class to 115px will reveal the remove button*/
.removeItem{
  position: absolute;
  top:   8px;
  right: 0;
  width: 0;
  overflow: hidden;
  -moz-transition:      width 0.5s;
  -ms-transition:       width 0.5s;
  -o-transition:        width 0.5s;
  -webkit-transition:   width 0.5s;
  transition:           width 0.5s;
}

.removeItem .button.red {
  float:right;
  margin-top:20px;
  margin-right:45px;
}

/*===========================================================================
  Line item approval status and approval controls
===========================================================================*/
.approvalReset{
  display: inline;
}

.currentStatus{
  display:inline-block;
  min-width: 29px;
  padding: 8px 8px 8px 0;
  font-weight: bold;
}

.approvalControls .button{
  width: 60px;
  padding: 8px 0;
}

.pending{
  color: #DD931F;
}

.declined{
  color: #900;
}

.approved{
  color:#4ab21e;
}


/*===========================================================================
Login needed notification
=============================================================================*/

#loginNeeded {
  display:             none;
  opacity:             0;
/*  position:            absolute;*/
  top:                 0;
  left:                0;
  right:               0;
  background:          #FFC;
  text-align:          center;
  border-bottom:       1px solid #bb8;
  -moz-transition:  opacity 0.5s;
  -ms-transition:  opacity 0.5s;
  -o-transition:  opacity 0.5s;
  -webkit-transition:  opacity 0.5s;
  transition:          opacity 0.5s;
}

#loginNeeded a{
  color: #00c;
  padding: 8px 0;
}



#loginNeeded div{
  display: inline-block;
}

#loginNeeded table{
  height: 43px;
  width: 100%;
}

#loginNeeded td{
  vertical-align: middle;
}

/*===========================================================================
update schema notification
=============================================================================*/

#updateSchema {
  display:             none;
  opacity:             0;
  position:            absolute;
  top:                 0;
  left:                0;
  right:               0;
  background:          #FFC;
  text-align:          center;
  border-bottom:       1px solid #bb8;
  -moz-transition:  opacity 0.5s;
  -ms-transition:  opacity 0.5s;
  -o-transition:  opacity 0.5s;
  -webkit-transition:  opacity 0.5s;
  transition:          opacity 0.5s;
}

#updateSchema a{
  color: #00c;
  padding: 8px 0;
}



#updateSchema div{
  display: inline-block;
}

#updateSchema table{
  height: 43px;
  width: 100%;
}

#updateSchema td{
  vertical-align: middle;
}




/*===========================================================================
  Show Line Item Page & Edit Part Page (made for demo)
===========================================================================*/
.partTitle{
  font-size:16px;
  font-weight:bold;
  padding-left:20px;
  color:#959400;
  border-bottom: 1px solid #bbb;
}

.partSummary{
  padding:22px;
}

.editPage{
  padding:10px 20px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -ms-user-select:      none;
  -moz-user-select:     none;
  -webkit-user-select:  none;
  user-select:          none;
}

.tableLabel{
  width:100%;
  border-bottom: 1px solid #bbb;
}

.editPart{
  padding:20px 0;
}

.editPartLabel{
  padding-left:20px;
  color:#538883;
}


.partDescriptionColumnCondensed {
  display:none;
}



/*===========================================================================
  Action Menu
===========================================================================*/

.actions {
  z-index: 2;
  background: #3A3A3A;
  margin:8px;
  border: 1px solid #222;
  padding: 6px;
  float:right;
  clear:both;
  min-width: 150px;
  -moz-box-shadow:     0 3px 6px #666;
  -webkit-box-shadow:  0 3px 6px #666;
  box-shadow:          0 3px 6px #666;
}

.actions h3 {
  margin: 4px 8px 8px;
  color: #fff;
  text-shadow: 0 -1px 2px #003;
  font-weight: normal;
}

.actions .action{
  width: 100%;
  margin-top:4px;
}

.actions .action .button{
  width: 100%;
  text-align: left;
}

/* The actionMenuPopup class is added if they have javascript enabled */

.actionMenuPopup {
  position: absolute;
  border: 0;
  top: 34px;
  right: 5px;
  margin: 0px;
  padding: 10px;
}

.actionMenuPopup h3 {
  display:none;
}

.emailCustomerContainer {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:none;
  z-index:9;
  width:100%;
}

.emailCustomerContainer .emailSettings {
  display:none;
  position:relative;
  top:40px;
  border:2px solid #bbb;
  background:#f5f5f5;
}

.emailCustomerContainer .emailSettings form {
  margin:10px 0 0 10px;
}

.emailCover {
  display:none;
  position:absolute;
  background: #000000;
  width:100%;
  height:100%;
  opacity:0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


/*On non-touch enabled devices make the filter menu (and calendar fit in the width of the left nav)*/
.no-touch .gldp-default tr { line-height:28px !important }
.no-touch .gldp-default td { width: 33px }
.no-touch .filterLineItem, .no-touch .filterSection { width: 216px }
.no-touch .filterModeList, .no-touch .topLevel { width:218px }
.no-touch .filterModeList { width: 240px }
.no-touch .gldp-week{ font-size: 0.85em }


@media only screen and (max-width: 800px) {
  .approvalPage .lineItemList .approvalControls .question {
    padding-right: 4px;
    display:inline-block;
  }

  .approvalPage .lineItemList .approvalControls .question p {
    margin: 0;
  }

  .descriptionContainer {
    padding: 8px 0;
    display:block;
  }

  .approvalContainer {
    width:220px;
  }
}



/*Invoice details wrap to left (under customer info) for phones in portrait mode*/
@media only screen and (max-width: 600px)  {
  .toolbar .back.button.paymentInfo {
    position:relative;
    float:left;
    margin-top:3px;
  }

  .toolbar .title.paymentInfo {
    float:left;
    width:auto;
    margin-left:20px;
  }

  .toolbar .title {
    font-size:1.2em;
  }

  .repairContainer, .promoContainer {
    padding:0;
  }

  .lineItemFooter {
    margin-right: 40px;
  }

  .currencyMarker{
    right:94px;
  }

  .techView .currentStatus {
    float:left;
    margin-left:35px;
  }

  .resize {
    display:none;
  }

  .approvePrompt{
    left:-20px;
  }

  /*Change layout of invoice page*/
  .lineItemHeader{
    display: none;
  }

  .approvalContainer {
    display: block;
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom: 1px dashed #ccc;
    text-align: left;
    min-height: 16px;
    width: inherit;
  }

  .approvalPage .approvalContainer {
    min-height:32px;
  }

  .lineItemList .approvalContainer {
    padding-left: 0;
  }

  .approvalPage .lineItemList .priceContainer {
    display: block;
    width: 100px;
    position: absolute;
    right: 0;
    top: 20px;
    padding-right: 8px;
  }

  .techView .priceContainerSmall {
    float: none;
    padding-bottom: 8px;
    display:inline;
  }

  .techView .priceContainerSmall .priceColumn {
    float:right;
    padding-top:8px;
    margin-right:10px;
  }

  .techView .priceContainerSmall .priceColumn .quantitySmall {
    display:inline-block;
  }

  .techView .priceDivider {
    width:100%;
    display:block;
    clear:both;
    padding:2px 0;
  }

  .techView .priceContainer {
    display:none;
  }

  .laborAndParts{
    font-size: 0.9em;
  }

  .parts {
    margin: 8px 0;
  }

  .emptyNotesLabel, .emptyCustomerLabel {
    font-size: 40px;
  }

  .items.techView .dividerLine {
    margin:40px 0 10px;
  }

  .lineItemList.customerApproval {
    padding:8px;
  }

  .addRepairButton {
    margin-left:20px;
  }

  .leftTriggerImageContainer {
    width:100%;
    height:100%;
    position:absolute;
  }

  .leftTriggerImage {
    position:relative;
    margin:auto;
    height:150px;
    width:auto;
    top:95px;
    left:0;
    display:block;
  }

  .triggerTextImage {
    position:relative;
    margin:auto;
    display:block;
    width:60%;
  }

  .triggerTextImageContainer {
    width: 100%;
    position:absolute;
  }

  .triggerShareText {
    display:none;
  }

  .partDescriptionColumn {
    display:none;
  }

  .partDescriptionColumnCondensed {
    display:block;
  }

  .removeItem .button.red {
    margin-top:40px;
  }
}


@media only screen and (max-width: 400px) {
  .savings .label {
    width:235px;
  }
}

@media only screen and (max-width: 340px) {
  .savings .label {
    width:165px;
  }
}


@media only screen and (max-width: 320px)  {

  /* The title for Work Orders does not fit in the toolbar, setting it below the toolbar and providing some space between the title and the invoice details with .toolbar.workOrder */
  .toolbar .title.workOrder {
    padding-top:55px;
    color:#386689;
  }

  .toolbar.workOrder, .toolbar.approval {
    margin-bottom:30px;
  }
}


@media only screen and (max-width: 340px)  {
  /* Fix title for approval page as it overlaps the email/print buttons on small width screens */
  .approvalPage .title {
    /*display:none;*/
  padding-top:55px;
    color:#386689;
}
}

@media only screen and (max-width: 560px)  {

  /* The title for Work Orders does not fit in the toolbar, setting it below the toolbar and providing some space between the title and the invoice details with .toolbar.workOrder */
  .toolbar .title.workOrder {
    display:none;
  }

  /* Below are better positions for smaller phones in portrait mode */
  .customerApproval .leftColumn {
    display:none;
  }

  .customerApproval .price {
    margin-right:0;
  }

  .lineItemFooter.customerApproval {
    margin-right:25px;
  }

  .savingsContainer {
    margin-right:25px;
  }

  .removeItem .button.red {
    margin-top:55px;
  }

  .partInfoText {
    max-width:300px;
  }

  .statusBar li a {
    width:60px;
  }
}

.onlyPrint {
  display:none;
}

@media print
{
  html{color:#000;}
  body{font-family: arial !important}
  .topAppBar, .topAppBarShadow, #feedNav {display:none;}
  .notificationsDisplay {display:none;}
  #coolLayout, #page {padding-top:0px !important;} /* this is to remove any padding that might have been added due to scrolling */
  input.button, .toolbar, .editButtonContainer, .sigNav, .approvalContainer, .buttonContainer, .editNotesButton, .aboutUserLinks, .trade, .category, .comment {display:none;}
  .lineItem.empty, .invoiceContainer.techView, .dividerColumn, .tapColumn, .currentStatus, .setInvoiceStatus, .addRepairContainer, .notesSection, .removeDiscount, .addDiscount {display:none;}
  .getCustomerApprovalForm, .deleteRestoreArchive, .sigNavContainer, .promoItems, #alertContainer, .customerLabel {display:none}
  .companyContainer.techView, .internalPrintContent .notesSection, .savingsForPrint, .signatureForPrint, .notesWarrantyForPrint { display:block; }
  .customerContainer, .invoiceContainer, .notesSection, .companyContainer.techView, .items { border: 1px solid #000; }
  .customerContainer, .invoiceContainer, .companyContainer.techView, .items { margin:10px; }
  .items {margin-top:0;}
  .customerContainer {margin-bottom: 5px}
  .notesSection {margin:0 10px;}
  .internalPrintContent .items.techView {margin-bottom:0;}
  .internalPrintContent .items.techView .comment {display: block; font-style: italic; margin: 10px;}
  .contentPage #navigationPane { display: none; position: absolute; }
  .approvePrompt, .actions {display:none !important}
  .approvalPage .divider, .divider.techView {color: #000; background: transparent; text-shadow:none; padding:4px 0 4px 55px; display:block; margin: 0;}
  .divider.techView, .divider.customerView {padding-left: 50px;}
  .priceContainer {padding-right: 2px}
  .leftColumn {width:30px;}
  .warranty {margin:10px 0; clear:both; padding:0;}
  .warrantyHeader {margin:10px 0 0 0;}
  .warrantyText, .warrantyTitle {color:#000}
  .warrantyTitle {margin:0;}
  .warrantyText {margin:10px 0 0 0;}
  .notesContainer { margin:0; }
  .lineItemList.customerApproval, .items.techView, .customerContainer, .companyContainer.invoiceContainer, .price, .subtotal, .tax, .total, .savings, .beforeTax, .pastDue, .total .label, .subtotal .label, .savings .label, .beforeTax .label, .tax .label, .pastDue .label {color:#000;font-size:12px;}
  .savings, .savings label { color: #d60000; font-size:12px; }
  .techView .lineItem { min-height:0 }
  .lineItem.firstItem {border-radius: 10px 10px 0 0;}
  .techView .lineItem .number, .techView .lineItem .description, .techView .lineItem .priceWide, .companyContainer.techView { color:#000;font-size:12px; }
  .customerContainer a:link, .customerContainer a:visited, .customerContainer a:active, .customerContainer a:hover { color:#000;font-size:12px; }
  .customerContainer.techView .leftColumn {width:30px;}
  .techView .priceContainer {margin-right:13px;}
  .lineItemFooter {margin-right:28px;margin-top:10px;margin-bottom:5px;}
  .lineItemFooter.customerApproval {margin-bottom:10px;margin-right:33px;}
  .internalPrintContent .lineItemFooter {margin-top:0;}
  .customerContainer.techView .assigneeForPrint, .customerContainer.techView .workOrderNumber {display:block;}
  .customerContainer.techView .statusForPrint {display:block;margin-bottom: 10px;}
  .repairContainer {padding:4px 0;}
  .lineItemList.customerApproval {padding:5px 0;}
  .customerContainer .detailsColumn .customerNumber, .customerContainer .detailsColumn .email { color:#000;font-size:12px; }
  .lastItemForPrint { border-bottom: 0; border-radius:0 0 10px 10px; }
  .internalPrintContent .invoiceContainer, .internalPrintContent .divider, .internalPrintContent .notesSection { color: #000;}
  .savingsContainer {margin-right:38px;}
  .customerContainer .customerNumber {float:right;margin-right:5px}
  .companyInfo {float:left;}
  .items.techView.closed {margin:10px;}
  .collectPopup {display: none}
  #openCollectPopup {display:none}

  /* Make background white in IE for printing*/
  html{
    min-height:100%;
    background: -ms-linear-gradient(top,  #FFFFFF 5%,#FFFFFF 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
  }
  .lineItem {
    padding:0 8px;
  }

  /* Remove border in firefox */
  #contentPane, .page {
    border:0;
    background: transparent;
  }

  .onlyPrint {
    display:block;
  }

  /* Hide stuff we don't want to show when empty (customer info) */
  .hidePrint {
    display:none !important;
  }

  .customerPrint .items.techView {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }

  .envelopePrint .statusForPrint,
  .itemAddContainer
  {
    display:none;
  }

  .envelopePrint .companyContainer {
    min-height:165px;
    max-height:165px;
  }

  .envelopePrint .companyInfo {
    float:none;
  }

  .envelopePrint .companyContainer .documentTypeTitle {
    display:none;
  }

  .envelopePrint #envelopeDocumentTypeTitle.documentTypeTitle {
    display:block;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 1.75em;
  }

  .envelopePrint .logoImage {
    float:right;
  }

  .envelopePrint .customerContainer .phone,
  .envelopePrint .customerContainer .email
  {
    visibility:hidden;
  }

  .envelopePrint .customerContainer{
    border-width: 0px;
    top: -9px;
  }
}

/* invoice advanced filtering start */
#mainFilterContainer {
  overflow:auto;
  margin-bottom: 4px;
}

#mainFilterContainer .filterNameContainer {
  display: block;
  padding-left: 4px;
  padding-right: 0px;
}

#mainFilterContainer .filterValueContainer {
    padding-right: 0px;
}

#mainFilterContainer .addFilterButton {
    padding-right: 0px;
}

#addFilterBtnConainter{
  margin: 0px 10px 4px 10px;
  padding-bottom: 8px;
  border-bottom: 3px solid #CCCCCC;
}

.filterBtns, #addFilterBtn{
  font-weight:bold !important;
  margin-top: 4px;
}

#selectedFilters, #filterValueContainerXXX {
  margin-top: 2px;
}

#selectedFilters {
  display: line-block;
}

.filterSelectList{
  width: 192px;/
  padding: 2px;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius:    4px;
  border: 1px solid #333333;
}

#filterOwner{
    width: 170px;
}

#selectedFilterContainer{
  display: inline-block;
  padding: 2px 6px;
  margin: 0px 4px 2px 0px;
  background: #FFFFFF; /* Old browsers */
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #333333;
  cursor: pointer;
}

.workOrderRoundedCorners {
  background: #FFFFFF;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #999999;
  cursor: pointer;
}

.workOrderFieldLabel {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
}

.startDateLabel, .endDateLabel{
  display: table-cell;
  width: 1px;
  padding-right: 6px
}

.endDateLabel{
  padding-left: 6px;
}

.filterDateField{
  display: table-cell;
  height: 35px;
  width: 100%;
}

.filterValueText {
  display: inline-block;
}

.filterContainer{
  height: 35px;
  padding: 9px 4px;
  margin: 2px 0px;
  background: #FFFFFF; /* Old browsers */
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #999999;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.filter,
.filterExternalIdCss,
.filterCustExternalIdCss,
.filterStatusCss,
.filterOwnerCss,
.filterLastNameCss,
.filterFirstNameCss,
.filterCityCss,
.filterStateCss,
.filterIssueCss,
.filterRateDescCss,
.filterDiscountDescCss,
.filterStreetCss,
.filterCompanyNameCss,
.filterEmailCss,
.filterPhoneCss,
.filterCostMinCss,
.filterCostMaxCss {
  display: inline-block;
  cursor: pointer;
  color: #777777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.filterDiscountDescCss {
  max-width: 114px;
}

.filterRateDescCss {
  max-width: 112px;
}

.filterIssueCss {
  max-width: 145px;
}

.filterStateCss {
  max-width: 150px;
}

.filterCityCss {
  max-width: 160px;
}

.filterFirstNameCss {
  max-width: 112px;
}

.filterLastNameCss {
  max-width: 105px;
}

.filterOwnerCss {
  max-width: 105px;
}

.filterStatusCss {
  max-width: 135px;
}

.filterExternalIdCss {
  max-width: 96px;
}

.filterCustExternalIdCss {
  max-width: 105px;
}

.filterStreetCss {
  max-width: 144px;
}

.filterPhoneCss {
  max-width: 139px;
}

.filterCompanyNameCss {
  max-width: 65px;
}

.filterEmailCss {
  max-width: 144px;
}

.filterCostMinCss, .filterCostMaxCss {
  max-width: 114px;
}


.filterNameFieldLabel{
  display: inline-block;
  margin-right: 4px;
  color: #4A4A4A;
  overflow: hidden;
}

.removeFilter{
  float: right;
  margin-right:10px;
}

/*needed for chrome, ie9/10 etc. without this a black box appears when you click the delete btn for a filter*/
.removeFilter input, .removeFilter input:disabled{
  margin-left: 8px;
  cursor: pointer;
  width: 14px;
  height: 14px;
  background: url('/images/remove.png');
  background-repeat: no-repeat;
  background-position: left top;
  border:none;
}

/*this is redundant to the css for .removeFilter input. However both are needed*/
/*needed for ie8. without this the delete btn for a filter doesn't display correctly in any state*/
.removeFilterBtn{
  margin-left: 8px;
  cursor: pointer;
  width: 14px;
  height: 14px;
  background: url('/images/remove.png');
  background-repeat: no-repeat;
  background-position: left top;
  border:none;
}

#submitFilterBtn,
#resetFilterBtn {
  display: none;
}

#invoiceViewData{
  display: none;
}

#filterStartDateField-gldp, #filterEndDateField-gldp{
  width: 180px !important;
  left: 14px !important;
  z-index: 100;
  margin-top: -10px;
}

#filterEndDateField-gldp{
  left: 124px !important;
}

.leftPaneContainer{
  padding: 0 6px;
}

.filterInputField{
  background: #FFFFFF;
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #999999;
  height: 34px;
  margin: 4px 0;
  width: 100%;
}

.filterActionLink{
  color: #4A4A4A;
  text-decoration: underline;
  font-size: 12px;
  margin: 0px 4px;
}

.filterHeader{
  color: #4A4A4A;
  font-size: 12px;
  font-weight: bold;
}

.dateFieldWidth{
  width: 132px;
}

.filterInput{
  padding:6px;
  margin:4px;
  width:275px;
}

.gotoDateSelector{
  display: inline-block;
  float: right;
  font-weight: normal !important;
  font-size: 20px !important;
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin-right:8px;
}


.dateSelectorContainer{
  border: 1px solid red;
  height: 35px;
  padding: 7px 4px;
  margin: 2px 0;
  background: #FFFFFF; /* Old browsers */
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #999999;
  cursor: pointer;
  background-color: #c6e5fc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.filterPrevSelector,
.filterNextSelector,
.filterDateSelector {
  display: inline-block;
  background: #FFFFFF; /* Old browsers */
  -moz-border-radius: 4px;
  -webkit-border-radius:4px;
  border-radius: 4px;
  border: 1px solid #999999;
  cursor: pointer;
  background-color: #c6e5fc;
}

.filterPrevSelector,
.filterNextSelector{
  width: 24px;
}

.filterPrevSelector,
.filterNextSelector {
  padding: 6px 6px;
  text-align: center;
}

.filterDateSelector{
  padding: 6px 0 6px 8px;
}

.archivedDateLabel,
.archivedDateLabelHover {
  color: #4A4A4A;
  display: inline-block;
  cursor: pointer;
  padding-top: 2px;
  overflow: hidden;
}

.archivedDateLabelHover {
  color: #428BCA;
}

.filterLinks{
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sortContainer{
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sortContainer .invoiceSortBy{
  font-size: 0.8em;
  padding: 2px;
  width: 80px;
}

.assignedTo, .rates, .agreements, .statuses, .usStates {
  margin-top:5px;
  margin-left:5px;
}

.assignedTo input, .rates input, .agreements input, .statuses input, .usStates input {
  cursor:pointer;
}

.checkboxAnchor {
  text-decoration:none;
  font-size:1.1em;
  color:#000
}

@media only screen and (max-width: 800px)  {
  .filter,
  .filterCustExternalIdCss,
  .filterStatusCss,
  .filterOwnerCss,
  .filterLastNameCss,
  .filterFirstNameCss,
  .filterCityCss,
  .filterStreetCss,
  .filterStateCss,
  .filterIssueCss,
  .filterPhoneCss,
  .filterEmailCss,
  .filterRateDescCss,
  .filterDiscountDescCss {
    max-width: 315px;
  }

  .filterExternalIdCss,
  .filterCompanyNameCss
  {
    max-width:270px;
  }

  .sortContainer .invoiceSortBy {
    width: 175px;
  }

  .homeButton:not(.getSavvy) {
    display: none;
  }

}

@media only screen and (max-width: 465px)  {
  .filter,
  .filterExternalIdCss,
  .filterCustExternalIdCss,
  .filterStatusCss,
  .filterOwnerCss,
  .filterLastNameCss,
  .filterFirstNameCss,
  .filterCityCss,
  .filterStateCss,
  .filterStreetCss,
  .filterIssueCss,
  .filterPhoneCss,
  .filterCompanyNameCss,
  .filterEmailCss,
  .filterRateDescCss,
  .filterDiscountDescCss {
    max-width: 155px;
  }


  .filterCompanyNameCss {
    max-width: 145px;
  }

  .sortContainer .invoiceSortBy {
    width: 125px;
  }

  .toolbar.workOrder .button {
    padding-left:  4px;
    padding-right: 4px;
  }
}

@media only screen and (max-width: 320px)  {
  .filter,
  .filterExternalIdCss,
  .filterCustExternalIdCss,
  .filterStatusCss,
  .filterOwnerCss,
  .filterLastNameCss,
  .filterFirstNameCss,
  .filterCityCss,
  .filterStateCss,
  .filterStreetCss,
  .filterIssueCss,
  .filterRateDescCss,
  .filterDiscountDescCss {
    max-width: 110px;
  }
}


/* invoice advanced filtering end */

/*===========================================================================
  Parts Replenishment
===========================================================================*/

.purchaseOrderTrackingNumber{
  font-weight: bold;
}

table.userTruckNumbers{
  border-spacing: 0px 15px;
}

div[data-bind=restock]
{
  text-align:left;
  font-weight:bold;
  font-size:0.70em;
  color:#39c339;
  display:none;
}

div[data-bind=quantity]{
  font-weight:bold;
  font-size:0.65em;
  color:#888888;

}

span[data-bind=description], span[data-bind=manId], span[data-bind=venId]{
  color: #5555dd;
  font-size:0.8em;
  font-weight: bold;
  /*white-space: wrap;*/
}


div[data-bind=partsList] span[data-bind=age], div[data-bind=partsList] span[data-bind=lastNameFirstName]
{
  margin-left: 100px;
}


.distributorWebsiteContainer{
  display:none;
  margin-bottom:10px;
}

.distributorWebsiteContainer a{
  text-decoration:none;
}

.distributorWebsiteContainer a img{
  height:25px;
  vertical-align:middle;
}

.distributorWebsiteContainer a div{
  display:inline;
  margin-left:2px;
  text-decoration:underline;
}

.distributorLogoSq{
  height: 25px;
  width: auto;
  display: none;
}

.partsRestockTable {
  padding:8px;
}

.partsRestockTable span[data-bind=quantity] {
  font-weight: bold;
  font-size:0.8em;
  color:#000;
}


.partsRestockTable span[data-bind=description] {
  font-weight: bold;
  font-size:0.8em;
  color:#000;
}

.partsRestockTable div[data-bind=requestedBy] {
  font-size:0.65em;
  color:#5555dd;
  font-weight:bold;
}

.partsRestockTable div[data-bind=truckNumber] {
  font-size:0.65em;
  color:#888888;
}

.partsRestockTable div[data-bind=usedOnWorkOrder] {
  font-size:0.65em;
  color:#666;
}

.partsRestockTable .blue.button{
  margin-right:5px;
}

.partsRestockTable .yesNoButtonContainer{
  width: 130px;
  text-align:left;
}


.requestedPartDetails{
  width: 250px;
}


@media only screen and (min-width: 320px)  {
  .requestedPartDetails{
    width: 135px;
  }
}

@media only screen and (min-width: 345px)  {
  .requestedPartDetails{
    width: 155px;
  }
}


@media only screen and (min-width: 375px)  {
  .requestedPartDetails{
    width: 175px;
  }

}


@media only screen and (min-width: 400px)  {
  .requestedPartDetails{
    width: 200px;
  }

}

@media only screen and (min-width: 450px)  {
  .requestedPartDetails{
    width: 250px;
  }

}

@media only screen and (min-width: 480px)  {
  .requestedPartDetails{
    width: 280px;
  }

}

@media only screen and (min-width: 500px)  {
  .requestedPartDetails{
    width: 300px;
  }

}

@media only screen and (min-width: 600px)  {

 .requestedPartDetails{
    width: 390px;
  }

}

@media only screen and (min-width: 700px)  {

 .requestedPartDetails{
    width: 490px;
  }

}

@media only screen and (min-width: 800px)  {

 .requestedPartDetails{
    width: 340px;
  }

}

@media screen and (min-width: 900px) {
 .requestedPartDetails{
    width: 440px;
  }
}


/* BIG SCREENS */
@media screen and (min-width: 1025px) {
 .requestedPartDetails{
    width: 550px;
  }
}


/*===========================================================================
  Email Purchase Order page
===========================================================================*/

.emailOrderTo{
  width: 100%;
}

.emailPurchaseOrderPage label{
  font-weight:bold; display:block;
}


.emailPurchaseOrderPage .accountNumber{
  margin: 0;
  padding: 0;
  width:100%;
}

.emailPurchaseOrderPage form{
  max-width: 400px;
}

.assignedToChoiceDividerText{
  font-style: italic;
  margin: 10px 0px 10px 10px;
}
/* tables */
table.tablesorter {
  background-color: #E8E8E8;
  margin:10px 0pt 15px;
  width: 100%;
  text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  border: 1px solid #FFF;
  padding: 0.5em !important;
}
table.tablesorter thead tr .header {
  background-image: url('/images/tablesorter/bg.gif');
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}
table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 0.5em;
  background-color: #FFF;
  vertical-align: top;
}
table.tablesorter tbody tr.odd td {
  background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
  background-image: url('/images/tablesorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown {
  background-image: url('/images/tablesorter/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #0E64D8;
}






/*===========================================================================
Notification Flash,Pin,Count
=============================================================================*/

/*.notificationsDisplay{
  top: 61px; !* push this down below the top application nav bar *!
}*/

.notificationListRemove{
  float: left;
  padding: 10px;
}

.notificationMessage{
  font-size: 1.0em;
  color: #666666;
}


.notificationTitle{
  display:inline-block;
}


.newNotificationsNotice{
  display:none;
  background-color: lightgreen;
  border-color: black;
  border: solid 1px;
  padding: 3px;
}

.notificationCount {
  color: white;
  border: 2px solid #900;
  background: #C00;
  position: absolute;
  right: 10px;
  padding: 4px 8px;
  top: 12px;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  display:none;
}

.notificationsDisplay {
  width: 100%;
/*  height: 45px;
  padding: 8px;*/
  z-index: 99;
  max-width: 1024px;
/*  background-color: #FFF;*/
/*  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  border-left: 1px solid #D8D8D8;
  border-right: 1px solid #D8D8D8;*/
}

#notificationFlash {
  display:             none;
  background:          rgba(239, 162, 6, 1);
  border-bottom:       1px solid #bb8;

  text-align: center;

  z-index:99;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  max-height: 60px;

  padding: 5px 5px 8px 5px;

}

#notificationPin {
  display:             none;
  /*opacity:             0;*/
  background:          #ff6666;
  border-bottom:       1px solid #bb8;
  color: white;
  text-align: center;
  z-index:99;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  max-height: 60px;
  padding: 5px 5px 8px 5px;
}

.notificationContent{

}

.notificationContent .flashMessage, .notificationContent .pinMessage{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#notificationFlash a, #notificationPin a{
  color: #00c;
  padding: 8px 0;
}

.notificationListPosition{
  text-align: center;
}

.notificationTitle {
  color:#4d7997;
}
.emptyNotificationList{
  text-align: center;
  padding:50px;
  font-size:3em;
  color:#969696;
}

.subscribe, .unsubscribe{
  display:none;
}

.subscriptionInfo {
  margin-bottom:2px;
}

.subscriptionContainer {
  padding: 2px;
}

.subscriptionFeaturesImg {
  width: 340px;
}

.quickbooksDesktopLink,
.quickbooksOnlineLink {
  margin-left: 10px;
}

.payedAtContainer {
  display:none;
}

.systemInvoiceLabel {
  font-weight:bold
}

.addOnsIssueCount {
  color: white;
  border: 2px solid #900;
  background: #C00;
  position: absolute;
  right: 10px;
  padding: 4px 8px;
  top: 12px;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  display:none;
}


/*===========================================================================
subscription invoice page
=============================================================================*/
/* todo: subscription invoice page needs to be refactored to not use workOrder class
applying !important to override */
.toolbar.subscriptionInvoice{
  height: 40px !important;
}

/*===========================================================================
link proxy pages
=============================================================================*/
.linkProxy .textContent{
  padding:10px;
}

.linkProxy {
  width: 250px;
  margin-top: 20px;
  min-height: 0;
}

.linkProxy .submit{
  text-align:center;
  padding:10px;
}

.linkProxy .element{
  padding-bottom:8px;
}

.linkProxy label{
  display: block;
}


/*===========================================================================
glance back styles
=============================================================================*/

.glanceBackHeader{
  text-align: center;
  display: block;
  /*border-top: solid;*/
  border:none;
  /*border-top-width: thin;*/
  padding: 8px 8px 8px 8px;
  margin-right: 8px;
  margin-left:8px;
}



.glanceBackTitle {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;

  text-align: center;
  text-decoration: none;
  color:#666666;
  vertical-align: middle;

}

.glanceBackLogo{
  vertical-align: middle;
  padding-left: 6px;
  padding-right: 6px;
  height: 22px;
}

.stateMessage{
  font-size: 20px;
  font-style: italic;
  font-weight: bold;

  text-align: center;
  text-decoration: none;
  color:#B1B5B8;

  display: none;

  padding: 8px 8px 8px 8px;
  margin-right: 8px;
  margin-left:8px;
}


.stateMessage .loading{
  color:#cccccc;
}

.glanceBackContainer .items{
  font-size: .8em;
  color: gray;
  background-color: rgb(240, 240, 240);
  display:none;
}

.historyItem {
  display:block;
  margin:8px 8px 8px 8px;
  padding:8px 8px 8px 8px;

  background:none;
  text-decoration:none;
  background-color: rgb(240, 240, 240);
}

.historyItem .itemContent{
  padding: 2px 0px 2px 0px;
  overflow-wrap: break-word;
  max-width: 636px;
}

.historyItem div[data-bind=currentInvoice]{
  display:none;
}

.historyItem table{
  border-spacing:0px;
}

.historyItem span[data-bind='repairNumber']{
  margin-right: 5px;
}

.historyItem span[data-bind='repairComment']{
  margin:0px 5px;
  font-style:italic;
  display:none;
}

.historyItem span[data-bind='scheduledAtValue']{
  font-size: 1.2em;
  font-weight: bold;
}

.historyItem .glanceBackTopLabel{
  padding: 5px 5px 5px 0px;
}

.historyItem .glanceBackPrependLabel{
  display: inline;
  font-weight: bold;
}

.historyItem .repairItems div[data-bind=lineItem],
.historyItem .agreementItems div[data-bind=lineItem],
.historyItem span[data-bind='publicNotesValue'],
.historyItem span[data-bind='internalNotesValue']{
  margin-left: 10px;
}

.historyItem span[data-bind='publicNotesValue'],
.historyItem span[data-bind='internalNotesValue']{
  display: block;
}

.glanceBackHeader .betaTag{
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 4px 2px 4px;

  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.invoiceFilesCount {
  color: #75AADB;
  border: 1px solid #3F6075;
  background: white;
  position: relative;
  padding: 2px 6px;
  top: -15px;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  display:inline-block;
}

.calendarSyncText {
  position: relative;
  padding: 2px 2px;
  top: -4px;
  display:inline-block;
}

.exportCustomerContainer{
  margin:10px
}

.toolbar .buttonContainer {
  margin-left: 5px
}

@media only screen and (max-width: 350px)  {
  .toolbar.workOrder .button {
    padding-left: 3px;
    padding-right: 4px;
  }
}

/************************
 **   Add-On Styles   **
 ************************/
.dropboxButtonContainer,
.syncGoogleCalendarContainer {
  display:block;
  max-height:28px;
}

.toolbar .dropboxButton,
.toolbar .syncGoogleCalendarButton {
  padding: 0px 4px;
  max-height:26px;
}

.dropboxButton img {
  height:32px;
  position:relative;
  top:-2px;
}

.settingsButtonContainer {
  display:none;
}
.syncGoogleCalendarButton img {
  height:21px;
  position:relative;
  top:2px;
}

.dropboxLogo, .qbLogo {
  width:223px;
}

.iconButton {
  padding:0px 4px
}

.calendarDisabled {
  text-align:center;
}

.calendarDisabled h1 {
  color:#3e82f7;
  font-size:30px;
  display:block;
  font-weight: bold;
}

.calendarDisabled h2 {
  font-size:24px;
}

.calendarDisabled table {
  margin-left: auto;
  margin-right:auto;
}

.calendarDisabled .picture {
  width:225px;
}

.calendarDisabled .pictureText {
  color:#9a9b9b;
  max-width: 250px;
  font-weight:bold;
  font-size:18px;
  text-align:justify;
  padding-left:35px;
}

.calendarDisabled li {
  font-size:24px;
  text-align: left;
  margin-left:10%;
  margin-right:10%;
}

.calendarDisabled.footer {
  padding:15px 0px;
  background-color: #e6f3fa;
}

.payzerPayment,
.propayPayment,
.individualPayment {
  display:none
}

.propayLogo{
  width:265px
}

.propayLogo.centered {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.propayLogoMessage {
  font-size: 32pt;
  text-align:center;
}

.propayOverlay{
  filter: alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -webkit-opacity:0.5;
  -moz-opacity:0.5;
  -ms-opacity: 0.5;
  -khtml-opacity:0.5;
  opacity: 0.5;
  background-color:#000000;
  position:absolute;
  width:100%;
  height:100%;
  z-index:10000;
  text-align:center;
  vertical-align: middle;
}

.propayPageMessage {
  left: 50%;
  top: 50%;
  width: 50%;
  position: absolute;
  padding: 12px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: white;
  /* font-family: Arial,Verdana; */
  font-size: 14px;
  border: 1px solid dimgrey;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  -khtml-border-radius: 16px;
  border-radius: 16px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -khtml-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.propayText{
  font-size:14pt;
}
.addOnPayments .propayText {
  font-size:12px;
  font-style:italic;
}

.propayText.info {
  font-weight:bold;
}

.propayText .info {
  margin: 15px 0px;
}

.propayLinkMessage{
  font-size: 12pt;
}

.propayRegisterForm{

}

.propayRegisterForm table,
.propayMerchantForm table{
  margin:0px auto;
}

.propayButton{
  font-size:8pt;
  color:#ffffff;
  background-color:#008fc8;
  text-shadow:none;
}

.hppFrame {
  border: none;
  width: 100%;
  height: 610px;
  overflow: hidden;
  color: #000000;
  margin-left: auto;
  margin-right: auto;
  /* font-family: Verdana,Arial; */
  font-size: 14px;
}
.hppFrame.invoiceFrame {
  height:640px;
}

.hppFrame.errorFrame {
  height:670px;
}

.hppFrame.invoiceFrame.errorFrame {
  height:700px
}

@media only screen and (max-width: 641px) {
  .propayContainer{
    width:345px;
  }

  .hppFrame {
    height:890px;
  }

  .hppFrame.invoiceFrame {
    height:925px
  }

  .hppFrame.errorFrame {
    height:980px;
  }

  .hppFrame.invoiceFrame.errorFrame {
    height:1001px
  }
}


.clearentLogo{
  width:265px
}

.clearentLogo.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.clearentLogoMessage {
  font-size: 32pt;
  text-align: center;
  padding-bottom: 20px;
}

.clearentLogoMessage .clearentLogo {
  max-height: 60px;
  width: auto;
}

.clearentButton{
  font-size: 10pt;
  color: #ffffff;
  background-color: #7fc62d;
  /*blue: #009bde*/
  text-shadow: none;
}

.clearentHowTo {
  display: block;
  margin: auto;
}

/******************************
 **   Show and Sell Styles   **
 ******************************/

.activeCampaignTitle {
  margin-left:10px;
  margin-bottom:5px;
}

.campaignItem {
  border-style:solid;
  border-width:2px;
  border-color: #DAE48C;
  padding:10px;
  /*margin-right:10px;*/
  border-radius:10px;
  margin-bottom:20px;
  background: white;
  /*margin-left:20px;*/
}

.campaignItem.active {
  border-color:#00FF00;
}

.campaignTitle {
  font-size:1.1em;
  font-weight:bold;
  margin-bottom:15px;
}

.campaignDescription {
  font-family:latobold;
  font-size:0.9em;
}

.campaignActionButtons {
  /*float:right;*/
  /*max-width:120px;*/
  margin:0 10px 0 20px;
  /*margin-left:20px;*/
  /*margin-right:10px;*/
}

.campaignActionButtons .button {
  width:105px;
  padding:5px;
}

.campaignStats {
  margin-left:15px;
  background: #E7F4FB;
  padding:10px;
  color:black;
  font-size: 0.9em;
}

.campaignStats div {
  margin-bottom:3px;
}

.impressionCount, .clickCount, .conversionCount {
  font-weight: bold;
}

.campaignInfo {
  clear:both;
  padding-bottom:20px;
  color:#9d9d9d;
  font-size:16px;
  position:relative;
}

.campaignInfoStatus, .campaignInfoAvailable, .campaignAvailable {
  text-align: center;
  font-size: 1.2em;
  /*position:absolute;
  left:10px;*/
}

.campaignInfoStatus {
  color:red;
}

.campaignInfoAvailable {
  /*position:absolute;
  right:10px;*/
}

.campaignImageWithText {
  text-align: justify;
  /*width: 158px;*/
  font-family: latoregular;
  font-size:0.7em;
  margin-left:20px;
}

.momentsLogo {
  width:295px;
}

@media only screen and (max-width: 366px)  {
  .campaignStats {
    margin:10px 0px 0px 15px;
  }
}

@media only screen and (max-width: 510px)  {
  .campaignActionButtons {
    float: none;
  }

  .campaignInfo {
    margin-top: 15px;
  }

  .campaignInfoStatus, .campaignInfoAvailable {
    position: relative;
    right:0;
    left:0;
  }

  .campaignInfoAvailable {
    margin-top:5px;
  }
}

.admin.page .addUser {
  float:right;
  display:none;
}

/*===========================================================================
admin: create notification page styles
=============================================================================*/
.popupItem{
  display:none;
}

.feedItem{
  display:none;
}

.createNotificationPage .itemContent{

border-top: none;
border-left: none;
border-right: none;
border-bottom:none;
border-color: gray;
border-width: 1px;
margin: 5px;
padding: 5px 5px 5px 0px;
}

.createNotificationPage .itemContent .itemContent{
border:none;
margin: 2px;
margin-left: 5px;
padding:0px;

}

.createNotificationPage .itemContent.feedItem label {
  clear: both;
  float: left;
  width: 25%;
  margin-right: 0.5em;
  text-align: right;
}

.createNotificationPage .itemContent.feedItem label[for='feedTypeContent'],
.createNotificationPage .itemContent.feedItem label[for='feedTypeAd'],
.createNotificationPage .itemContent.feedItem label[for='feedTypeSavvy'],
.createNotificationPage .itemContent.feedItem label[for='feedVisibilityOn'],
.createNotificationPage .itemContent.feedItem label[for='feedVisibilityOff'] {
  float: inherit;
  width: auto;
  margin-right: 0.5em;
  padding-top: 0.2em;
  text-align: right;
}

.createNotificationPage .feedAdOption,
.createNotificationPage .feedContentOption,
.createNotificationPage .feedSavvyOption,
.createNotificationPage .feedOption {
  clear: both;
}

.createNotificationPage #selectable .ui-selecting { background: #FECA40; }
.createNotificationPage #selectable .ui-selected { background: #F39814; color: white; }
.createNotificationPage #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.createNotificationPage #selectable li { margin: 3px; padding: 0.4em; height: 18px; float:left; text-align: center; min-width: 50px}

.createNotificationPage form{
  margin: 0 20px 0 0;
  max-width:none;
}

.deliveryTypeOption, .roleTargetOption{
  float:left;
  margin: 0px 3px 0px 3px;
}

.eTouchLogoContainer {
  text-align: center;
}

.eTouchButton{
  text-shadow: none;
  background-color: #F58220;
}

.eTouchSignupForm {
  display:inline-block;
  margin-right:1%;
}

.eTouchDeregisterForm {
  display:inline-block;
  float:right;
  margin-left:1%;
}

.eTouchRegisterForm {
  display:inline-block;
  margin-left:1%;
}

.eTouchOptionsContainer{
  margin-bottom:10px
}

.eTouchResponseRow .name,
.eTouchResponseRow .email,
.eTouchResponseRow .rating,
.eTouchResponseRow .responseDate
{
  vertical-align: middle;
}

.eTouchResponseRow .rating {
  text-align: center;
  width:129px;
  min-width: 129px;
}

.eTouchStar {
  height:20px;
}

.eTouchStarInvoice {
  height:10px;
}

.eTouchContainer {
  display:none;
  float:right;
  text-align:right;
  margin-right:15px ;
}

.eTouchContainer img {
  width:50px;
}

.eTouchInvoice {
  clear:both;
  margin-right:75px;
  margin-bottom:20px;
  text-align:right;
}

.eTouchInvoice .logo {
  width:50px;
  display:inline-block;
}

.eTouchInvoice .sentInfo {
  display:block;
}

.eTouchInvoice .sentInfo .sentMessage{
  display:inline-block;
}

.eTouchInvoice .ratingInfo {
  display:block;
}

.eTouchInvoice .ratingInfo .rating{
  display:inline-block;
}


.partCartEnable {
  font-weight:bold;
  margin: 0px 20px;
}

@media only screen and (max-width: 640px)  {
  .partCartEnable .distributorImage {
    width:514px;
  }
}
@media only screen and (max-width: 320px)  {
  .partCartEnable .distributorImage {
    width:265px;
  }
}


.partCartEnable .pageTitle,
.partCartEnable .pageFooter {
  text-align:center;
  color:#f36e40;
  font-size:24pt;
  text-shadow: 0 0px 0px #000;
}

.partCartEnable .message {
  font-size:16pt;
}

.partCartEnable .button {
  background-color:#f36e40;
  text-shadow:none;
}

/*===========================================================================
 Utility: page styles
=============================================================================*/
.utilitySpace, .utilityClear {
  padding: 8px 3% 6%;
}

.utilitySpace label, .utilityClear label {
  padding-right: 8px;
}

.utilitySpace .lsValue, .utilitySpace .lsRecordCount {
  text-align:center;
  vertical-align:middle;
}

.utilitySpace .clearStorage {
  margin-top: 15px;
}



/*===========================================================================
 Popups used to show errors and other transient messages
=============================================================================*/

.flash-notification-container {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 100;
}

.flash-notification-message-animation {
  left: 0;
  right: 0;
  position: absolute;
  transition: top 0.5s ease-in-out;
}

.flash-notification-message {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  display: inline-block;
  font-weight: 300;
  margin: 8px auto;
  padding: 8px 16px;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow:    0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow:         0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.flash-notification-error {
  color: #b94a48;
  background-color: #fff2f2;
  border-color: #ccb5b5;
}


/*===========================================================================
 Styles for the app config page -- for picking search engines and such
=============================================================================*/

.config-option {
  display: block;
  border: 1px solid #ccc;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow:    0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow:         0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-sizing: border-box;
  color: #333;
  font-weight: lighter;
  padding: 1em 1.5em;
  margin: 8px auto;
  text-align: center;
  cursor: pointer;
  max-width: 500px;
  margin-left: 0;
}

.config-option-checkmark {
  visibility: hidden;
  width: 30px;
}

.config-option-selected {
  color: #fff;
  background-color: #0E64D8;
  border-color: #0E64D8;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
  -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
  box-shadow:         0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
}

.config-option-selected .config-option-checkmark {
  visibility: visible;
}


/*===========================================================================
  Search page instructions and the footer link (to custom repair page)
=============================================================================*/

.add-custom, .search-repair-db {
  color: #BABABA;
  font-size: 11px;
  height: 0.8em;
}

.search-repair-db {
  position: absolute;
  bottom: 15px;
}

.search-intro-screen {
  font-size: 14px;
  padding: 2px 4px;
}

.search-instructions {
  color: #777;
  font-weight: normal;
  font-size: 13.5px;
  margin: 8px 0 0;
}

.new-search-notes {
  padding: 8px;
}

.search-wrapper {
  font-family: robotoregular, sans-serif !important;
}

@media (max-width: 800px) {
  .search-instructions {
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
  }

  .new-search-notes {
    display: none;
  }
}

.mui-tabs__bar>li>a {
  color:#5F9DC9;
}

.mui-tabs__bar>li.mui--is-active>a {
  color:#FFFFFF;
}

.mui-tabs__bar>li.mui--is-active {
  border-bottom: 2px solid #FFFFFF;
}



/* start from stream-feed.css */

/* .body {
  color:black;
} */


#navPaneFeed {
  padding-bottom: 10px;
  /*padding-top: 10px;*/
  margin-top: 10px;
}

.feedItemWrapper {
  -webkit-font-smoothing: antialiased;
  font-family: robotoregular;
  font-weight: 300;
  max-width: 600px;
  overflow: hidden;
  margin:auto;
  margin-bottom:8px;
  font-size:14px;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
  webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
  color: #4a4a4a;
}

.feedItemWrapper .mediaContent img {
  max-width:100%;
  height:auto;
}

/*possible fix #6148 - this will remove bottom margin from top level p element within Notification media content.
eg: It will not remove margin from p elements beyond the 1st layer.
*/
.notificationHtml > p{
  margin-bottom: 0px;
}

.titleBar {
  min-height:72px;
}

.titleBarLeft {
  padding:16px;
  float:left;
  align-items:center;
  display:flex;
  width:40px;
}

.titleBarRight {
  float:right;
  padding:16px;
  width:60px;
}

.titleBarCenter {
  margin-left: auto;
  margin-right: auto;
  padding-top: 16px;
  padding-bottom:8px;
  min-height: 40px;
  /* height:40px; disabling to allow title bar to size when displaying long titles*/
  max-width: 425px;
  align-items:center;
  display:flex;
}

.dateTimeText {
  font-size:12px;
  color:#9e9e9e;
}

.feedDivider {
  border-top:1px solid #ebebeb;
  margin-left:10px;
  margin-right:10px;
}

.avatarWrapper {
  float:left;
  margin-right:16px;
}

.avatarImage {
  height:40px;
  width:auto;
}

.avatarContainer{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0px;
}

.avatarTitle {
  font-size:16px;
  margin:0;
  white-space:normal;
  color:#000;
  max-width:420px;
}

.avatarSubTitle {
  font-size:14px;
  color:#858585;
}

.feedSubject {
  padding-top:10px;
  font-weight:bold;
  font-size:20px;
  padding-bottom:10px;
}

.feedMessage {
  white-space:pre-line;
  font-size:14px;
}

.feedSubject, .feedMessage {
  padding-left:16px;
}

.feedMessage.empty {
  padding-bottom:0;
}

.savvyFeedPost .mediaContent .notificationHtml p {
  color: #09527E;
  font-family: robotoregular, sans-serif;
  font-size: 1.1em;
}

.offlineFeedPost .avatarImage {
  border-radius: 0% !important;
}

.offlineMessage {
  background:#ddd;
  color:#7B7B7B;
  padding-bottom:10px;
}

.mediaContent {
  padding-left:16px;
  padding-right:16px;
}

.notificationHtml {
  overflow-y:hidden;
  overflow-x:hidden;
}

.navBar {
  box-shadow:0 0 20px rgba(0,0,0,0.3);
  webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
  padding-left:45px;
  padding-right:25px;
}

.navBarCFLogo {
  position:absolute;
  top:12px;
  left:10px;
  width:33px;
}

.offlineBanner {
  background:#ddd;
  z-index: 1001;
  text-align: center;
  height: 30px;
  color: #7B7B7B;
  font-family: robotoregular;
  font-size: 0.9em;
}

.offlineBanner div {
  padding-top: 5px;
}

.feedItemFooter {
  background-color: #ffffff;
  padding-top: 24px;
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 8px;
}

@media only screen and (max-width: 800px) {
  .feedItemWrapper {
    max-width: 400px;
  }

  .offlineBanner {
    height:50px;
  }
}

@media only screen and (max-width: 450px) {
  .feedItemWrapper {
    max-width: 360px;
  }

}


.loader {
  color: #fff;
}
/* end from stream-feed.css */

.chatIcon {
  float:right;
  margin-top:-39px;
  margin-right:50px;
  display:none;
}

.chatIcon img {
  width:28px;
}

.chatDisabled {
  display:none;
  opacity: 0.38;
}

.chatClose {
  width:100%;
  height:30px;
  position:absolute;
  top:-30px;
  border-bottom:1px solid #f2f3f4;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
  border-radius: 10px 10px 0 0;
  background-color: #ffffff;
}

.chatClose img {
  width: 26px;
  margin-top:4px;
  margin-left:5px;
}

.chatClose.chatOffline {
  background-color: #ddd;
}

.chatClose.chatOfflineMobile {
  height:50px;
  top:0;
  border-radius:0;
}

.chatClose img.chatOfflineMobile {
  margin-top:10px;
}

#salesforce-offline-cover {
  display:none;
  opacity:0.6;
  background-color:#000;
  position:fixed;
  bottom:0px;
  right:12px;
  margin-right:17px;
  z-index: 2147483647;
}

#salesforce-offline-cover.chatOfflineMobile {
  right:0;
}

@media only screen and (max-width: 767px) {
  #salesforce-offline-cover {
    bottom:15px;
    right:0px;
  }
}

.chatOfflineText {
  display:none;
  color:#7B7B7B;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  top:-22px;
  left:40px;
}

.chatOfflineText.chatOfflineMobile {
  top:15px;
}



.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
  /* font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; */
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

#react-paginate ul, #react-paginate menu, #react-paginate dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

.pagination>li>a, .pagination>li>span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}

.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination>li:first-child>a, .pagination>li:first-child>span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}

[role=button] {
  cursor: pointer;
}

#react-paginate ul {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
}

#react-paginate li {
  display: inline-block;
}

#react-paginate a:hover {
  background-color: #EDEDED;
}

.partMarkupBetween {
  margin-left:100px;
  max-width:330px;
}

.agreementCheckBoxes {
  position:absolute;
  top:0;
  left:23px;
  top:1px;
}

.installationsNotesContainer {
  margin:20px 5px;
  font-weight:bold;
}