body {
  font-family: "Muli", sans-serif;
  /* font-family: tahoma, sans-serif; */
  color: #172727;
  /* background-color: #FAFAFA;
  background-color: #FBFCFC; */
  background-color: #F9FAFB;
  /*font-weight: bold;*/
  /*font-size: 1.4em !important;*/
}

/*label {
    font-family: 'Montserrat', sans-serif !important;
}*/

.number {
  font-size: 0.96em;
  /*font-family: 'Montserrat', sans-serif;*/
}

button.text-left {
  text-align: left;
}

tr {
  background-color: #FFFFFF;
}

#content {
  width: 98%;
  margin-left: 15px;
  margin-right: 15px;
}

.form-group {
  margin-bottom: 7px;
}

.font_80 {
  font-size: 0.8em;
}

.font_85 {
  font-size: 0.85em;
}

.font_95 {
  font-size: 0.95em;
}

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

.color_attachment {
  background-color: #FFFFCC;
  /*background-color: #FFFF99;*/
}

.color_paid_invoice {
  /* background-color: #8CB3D9;
   background-color: #FF784E;*/
  background-color: #FF6738;
}

.color_light_brick_red {
  background-color: #C94C4C;
}

.text_menu {
  font-size: 1.6em;
  font-weight: bold;
}

.gray {
  color: #4D6F6F;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
}

h1 {
  margin-top: 10px;
  margin-bottom: 11px;
}

.h2_margins {
  margin-top: 3px;
  margin-bottom: 11px;
}

.h2_small_margins {
  margin-top: 3px;
  margin-bottom: 5px;
}

h2 {
  margin-top: 3px;
}

h3 {
  margin-top: 7px;
  margin-bottom: 3px;
}

.input_small {
  height: 30px;
  padding: 3px;
}

.input_button_small {
  height: 27px;
  padding: 5px;
}

.overflow_hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.red {
  color: #CC0000;
}

.dark_red {
  color: #AA2F40;
}

ul.pagination {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10px;
}

.scroll_box_800 {
  height: 500px;
  overflow: auto;
}

.scroll_box_282 {
  height: 282px;
  overflow: auto;
}

.vertical_center {
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  margin-bottom: 10px;
}

/* WORKS FOR CENTERING TEXT AND GRAPHICS - vertical_center2 goes on div
.vertical_center2 {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

OR
/************************
 vertically align in the center of a block
 vertical_align_center goes on div
 vertical_align_center2 goes on what is inside div
*************************
.vertical_align_center {
  display: table;
  height: 100%;
  width: 100%;
}

.vertical_align_center2 {
  display: table-cell;
  vertical-align: middle;
}*/

.vertical_align_center_h2 {
  height: 35px;
  line-height: 35px;
}

.vertical_align_center_30 {
  height: 30px;
  line-height: 30px;
}

.vertical_align_center_43px {
  height: 43px;
  line-height: 43px;
  text-align: center;
}

.vertical_align_center_85px {
  height: 85px;
  line-height: 85px;
  text-align: center;
}

.vertical_align_center_100px {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.vertical_align_center_132px {
  height: 132px;
  line-height: 132px;
  text-align: center;
}

.vertical_align_center_145px {
  height: 145px;
  line-height: 145px;
  text-align: center;
}

.vertical_align_center {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  border-color: #4D6F6F;
}

label {
  padding-top: 5px;
  vertical-align: middle;
}

.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  vertical-align: middle;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
label,
.blue {
  color: #005187;
}

td {
  height: 100%;
}

td a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

td a:hover {
  background-color: #FFFFAD;
}

table .admin_menu_highlight a:hover {
  background-color: #9FEFE7;
}

table tr.no_top_border td {
  border-top: 0;
}

table tr td.no_top_border {
  border-top: 0;
}

table tr td.no_bottom_border {
  border-bottom: 0;
}

table tr.no_border td {
  border: 0;
}

table tr.no_border th {
  border: 0;
}

.highlight_row {
  background: #E4E4E4;
}

.tr_hidden_row_color {
  background: #DCE9F2;
}

.background_light_blue {
  background-color: #DBE7EF;
}

table tr.td_padding_3 td {
  padding: 3px;
}

tfoot tr td.padding_bottom_none {
  padding-bottom: 0;
}

tfoot tr td.padding_top_none {
  padding-top: 0;
}

.table-condensed > tbody > tr > td.padding_bottom_none {
  padding-bottom: 0;
}

/*.tr_alt_row_color {
    background: pink;
}*/

/*.table_stripe_purchase_orders tr.tr_alt_row_color:nth-child(4n+1), .table_stripe_purchase_orders tr.tr_alt_row_color:nth-child(4n+2) {
 background: pink;
}*/

.green {
  color: #006600;
}

.hide {
  display: none;
}

.icon_center {
  display: block;
  text-align: center;
}

.btn-danger {
  background-color: #D82B2B;
}

.btn_wide {
  width: 25%;
}

#message_alert {
  position: absolute;
  top: 53px;
  right: 20px;
  z-index: 10;
  opacity: 0.75;
}

.border_thin {
  border: 1px solid #4D6F6F;
}

.border_top_thin {
  border-top: 1px solid #4D6F6F;
}

.border_top_thick {
  border-top: 2px solid #4D6F6F;
}

.border_bottom_thin {
  border-bottom: 1px solid #4D6F6F;
}

.border_bottom_thick {
  border-bottom: 2px solid #4D6F6F;
}

.border_right_thin {
  border-right: 1px solid #4D6F6F;
}

.border_left_thin {
  border-left: 1px solid #4D6F6F;
}

.height_15 {
  height: 15px;
}

.height_21 {
  height: 21px;
}

.height_22 {
  height: 22px;
}

.height_27 {
  height: 27px;
}

.margin_top_3 {
  margin-top: 3px;
}

.margin_top_5 {
  margin-top: 5px;
}

.margin_top_10 {
  margin-top: 10px;
}

.margin_top_13 {
  margin-top: 13px;
}

.margin_top_15 {
  margin-top: 15px;
}

.margin_top_25 {
  margin-top: 25px;
}

.margin_top_xl {
  margin-top: 25px;
}

.margin_bottom_none {
  margin-bottom: 0;
}

.margin_bottom_3 {
  margin-bottom: 3px;
}

.margin_bottom_10 {
  margin-bottom: 10px;
}

.margin_under_border {
  margin-top: 7px;
  /*padding-top: 7px;
  padding-bottom: 4px;*/
}

.margin_right_10 {
  margin-right: 10px;
}

.margin_between_group_vertical {
  margin-top: 13px;
}

.margin_top_bottom_5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.margin_none {
  margin: 0;
}

.navbar {
  margin-bottom: 3px;
}

.padding_none {
  padding: 0;
}

.padding_bottom_none {
  padding-bottom: 0;
}

.padding_bottom_1 {
  padding-bottom: 1px;
}

.padding_bottom_3 {
  padding-bottom: 3px;
}

.padding_top_none {
  padding-top: 0;
}

.padding_top_1 {
  padding-top: 1px;
}

.padding_top_3 {
  padding-top: 3px;
}

.padding_top_5 {
  padding-top: 5px;
}

.padding_top_10 {
  padding-top: 10px;
}

.padding_top_15 {
  padding-top: 15px;
}

.padding_left_none {
  padding-left: 0;
}

.padding_right_none {
  padding-right: 0;
}

.padding_right_3 {
  padding-right: 3px;
}

.padding_right_5 {
  padding-right: 5px;
}

.padding_right_10 {
  padding-right: 10px;
}

.padding_left_5 {
  padding-left: 5px;
}

.padding_left_10 {
  padding-left: 10px;
}

/*** Screen sizes as large as cell phone portrait ***/

@media only screen and (max-width: 767px) {
  /*** used for customers edit page, removes padding if columns are side by side not if columns are stacked ***/

  .padding_left_none_on_medium_devices {
    margin-top: 5px;
    padding-left: 15px;
  }
}

/*** Screen sizes larger than cell phone portrait  ***
 *** This is for screen sizes where col-sm is used ***/

@media only screen and (min-width: 768px) {
  /*** used for customers edit page, removes padding if columns are side by side not if columns are stacked ***/

  .padding_left_none_on_medium_devices {
    padding-left: 0;
  }
}

/*** Screen sizes as large as small tablet portrait ***
 *** This is for screen sizes where col-md is used  ***/

@media only screen and (max-width: 991px) {
  .padding_left_5_medium_devices {
    padding-left: 5px;
  }

  .padding_right_5_medium_devices {
    padding-right: 5px;
  }

  .padding_top_5_medium_devices {
    padding-top: 5px;
  }

  .padding_right_none_on_medium_devices {
    padding-right: 0;
  }
}

/*** Devices same size as cell phone ***/

@media screen and (max-width: 400px) {
  .show_call_button_phone {
    display: inline-block;
  }

  .show_call_button_pc {
    display: none;
  }
}

/*** Devices larger than cell phone ***/

@media screen and (min-width: 401px) {
  .show_call_button_pc {
    display: inline-block;
  }

  .show_call_button_phone {
    display: none;
  }
}

.font_fix_for_link_as_button {
  font-size: 0.97em;
  vertical-align: middle;
}

.block {
  display: inline-block;
}

.inline {
  display: inline;
}

/* hack to get signature pad / canvas element to draw correctly on mobile devices
 * mobile devices were drawing on too large of a scale (past the cursor) so canvas 
 * tag has a large width and height (inline css) and this css keeps the line being drawn
 * with the cursor/mouse/finger. On desktop the signature is skewed too small
 * but is useable. */

#signature-pad {
  width: 100%;
  height: 100%;
}

.width_2 {
  width: 2%;
}

.width_4 {
  width: 4%;
}

.width_5 {
  width: 5%;
}

.width_6 {
  width: 6%;
}

.width_7 {
  width: 7%;
}

.width_8 {
  width: 8%;
}

.width_9 {
  width: 9%;
}

.width_10 {
  width: 10%;
}

.width_11 {
  width: 11%;
}

.width_12 {
  width: 12%;
}

.width_13 {
  width: 13%;
}

.width_14 {
  width: 14%;
}

.width_15 {
  width: 15%;
}

.width_16 {
  width: 16%;
}

.width_17 {
  width: 17%;
}

.width_18 {
  width: 18%;
}

.width_19 {
  width: 19%;
}

.width_20 {
  width: 20%;
}

.width_21 {
  width: 21%;
}

.width_23 {
  width: 23%;
}

.width_24 {
  width: 24%;
}

.width_25 {
  width: 25%;
}

.width_26 {
  width: 26%;
}

.width_27 {
  width: 27%;
}

.width_28 {
  width: 28%;
}

.width_29 {
  width: 29%;
}

.width_30 {
  width: 30%;
}

.width_31 {
  width: 31%;
}

.width_32 {
  width: 32%;
}

.width_33 {
  width: 33%;
}

.width_34 {
  width: 34%;
}

.width_35 {
  width: 35%;
}

.width_38 {
  width: 38%;
}

.width_40 {
  width: 40%;
}

.width_45 {
  width: 45%;
}

.width_46 {
  width: 46%;
}

.width_50 {
  width: 50%;
}

.width_54 {
  width: 54%;
}

.width_63 {
  width: 63%;
}

.width_64 {
  width: 64%;
}

.width_65 {
  width: 65%;
}

.width_68 {
  width: 68%;
}

.width_70px {
  width: 70px;
}

.width_75 {
  width: 75%;
}

.width_78 {
  width: 73%;
}

.width_79 {
  width: 79%;
}

.width_80 {
  width: 80%;
}

.width_90 {
  width: 90%;
}

.width_97 {
  width: 97%;
}

.width_99 {
  width: 99%;
}

.width_100 {
  width: 100%;
}

.width_175px {
  width: 175px;
}

.min_width_15px {
  min-width: 15px;
  /*width: 15px;*/
}

.min_width_50px {
  min-width: 50px;
  /*width: 50px;*/
}

.min_width_70px {
  min-width: 70px;
  /*width: 70px;*/
}

.min_width_75px {
  min-width: 75px;
  /*width: 75px;*/
}

.min_width_125px {
  min-width: 125px;
  /*width: 125px;*/
}

/* Style the tab */

.tab {
  margin-top: 10px;
  overflow: hidden;
  /* border: 1px solid #ccc; */
  /* background-color: #f1f1f1; */
}

.button_yellow {
  background-color: yellow;
}

/* Style the buttons that are used to open the tab content */

.tab button {
  font-size: 1.15em;
  font-weight: bold;
  background-color: inherit;
  float: left;
  /* border: none; */
  outline: none;
  cursor: pointer;
  padding: 7px 8px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #DDDS;
}

.tab_content_active {
  display: block;
}

.tab_content_hide {
  display: none;
}

/* Create an active/current tablink class */

.tab button.active {
  /*background-color: #ccc;*/
  border-bottom: 2px solid blue;
}

/* Style the tab content */

.tab_content {
  /*    padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;*/
}

button.button_link {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  width: 100%;
  color: #172727;
}

button.button_link:hover {
  text-decoration: underline;
  font-weight: bold;
  background-color: #FFFFAD;
}

input[type=checkbox] {
  outline: 0px;
  height: 25px;
}

a:hover {
  font-weight: bold;
}