html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input[type=radio] {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /*	font: inherit;*/
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

textarea {
  border-style: none;
  border-color: Transparent;
  overflow: auto;
  outline: none;
  resize: both;
}

#popupDivContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.applyWrapping td {
  white-space: normal !important;
}
.applyWrapping th {
  min-width: 200px !important;
}

td.applyWrapping:not(.comboBoxColumn) {
  white-space: normal !important;
}

.note-editable {
  white-space: normal; /* Allow lines to wrap */
  word-wrap: break-word; /* Break words if needed to fit */
}

html {
  font-size: 62.5%;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  min-height: 100%; /* make sure it is at least as tall as the viewport */
  position: relative;
}

body {
  font-size: 1.4rem;
  color: #232323;
  margin: 0;
  display: block;
  white-space: nowrap;
  height: 100%; /* force the BODY element to match the height of the HTML element */
  /*background-color: #EAFFCE;*/
}

header, footer, nav, section {
  display: block;
}

img {
  -ms-interpolation-mode: bicubic;
}

a {
  color: #058583;
  cursor: pointer;
}
a:link, a:visited, a:active, a:hover {
  color: #058583;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

ul, ol {
  margin-left: 20px;
}

b,
strong {
  font-weight: bold !important;
}

select, textarea, input[type], .comboBoxTextBox {
  display: inline-block;
  width: 178px;
  border: 1px solid #ccc;
  min-height: 12px;
  padding: 2px 2px;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif !important;
  font-size: 1.4rem !important;
  vertical-align: middle;
  white-space: pre-wrap;
}

input[type=radio] {
  width: auto;
  margin-left: 4px;
}

textarea {
  height: 50px;
}

h1 {
  font-size: 2rem;
  margin: 16px 0;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

hr {
  margin: 20px;
}

input[type=checkbox] {
  width: 15px;
}

.smallText {
  font-size: 1.1rem;
}

.clearable {
  padding-right: 18px !important;
}

.clearable::-ms-clear {
  display: none;
}

.clearableDiv {
  position: relative;
  display: inline-block;
}

.clearableSpan {
  margin-top: 1px;
  text-align: center;
  position: absolute;
  right: 4px;
  height: 16px;
  width: 16px;
  font-size: 18px;
  cursor: pointer;
  display: none;
  border-radius: 16px;
}

#headerDiv #userMenuLink {
  text-decoration: none;
  float: right;
  padding: 5px;
}
#headerDiv #userMenuLink:hover {
  background-color: #F9F9F9;
  text-decoration: none;
}
#headerDiv #userMenuLink img {
  vertical-align: middle;
}
#headerDiv #userMenuLink span {
  display: inline-block;
}
#headerDiv #userMenuLink #userMenuProfilePic {
  width: 45px;
  height: 45px;
  display: inline-block;
}
#headerDiv #userMenuTable {
  float: right;
}
#headerDiv p {
  font-size: 2.4rem;
  position: absolute;
  top: 55px;
  left: 400px;
}

.dropDownMenu {
  border: 1px solid #DDD;
  box-shadow: 2px 2px 6px rgba(150, 150, 150, 0.2);
  float: left;
  z-index: 50;
  width: 240px;
  height: auto;
  background-color: #F9F9F9;
}
.dropDownMenu ul {
  list-style: none;
  margin: 2px;
  padding-left: 0;
}
.dropDownMenu ul li {
  display: list-item;
}
.dropDownMenu ul li a {
  text-decoration: none;
  padding: 10px;
  color: black;
  display: block;
}
.dropDownMenu ul li a:hover {
  background-color: #09A8A5;
  color: white;
}
.dropDownMenu ul li a.linkedAccount {
  padding-left: 20px;
}
.dropDownMenu ul li label {
  padding: 10px;
  display: block;
}
.dropDownMenu ul li.separator {
  display: block;
  margin: 10px;
  height: 1px;
  background: #DDD;
}

.colourDiv {
  display: block;
  margin-bottom: 20px;
  background-color: #F4F9FF;
  padding: 20px;
}

.requiredFieldBackGround {
  background-color: #ffe3e3;
}

#userMenuDiv {
  float: right;
}

#adminMenu {
  float: left;
  clear: none;
  padding: 10px;
  color: White;
  background-color: #09A8A5;
}

#bodyDiv {
  height: 100%;
  display: block;
  min-width: 850px;
}

.body-content {
  padding: 16px 14px 40px 14px;
  height: 100%;
  margin-bottom: 30px;
}

.inProgressFilter .fieldDiv label:first-of-type {
  vertical-align: top !important;
  width: 280px !important;
}

.highlightPink {
  background-color: #ffc0cb;
}

.highlightAmber {
  background-color: #FCE4C4;
}

.highlightGreen {
  background-color: #afffb2;
}

.formDiv label, .formDivVeryWideLabel label, .formDivWideLabel label, .formDivMediumLabel label, .formDivShortLabel label {
  padding-top: 5px;
  min-height: 22px;
  display: inline-block;
}
.formDiv .fieldDiv, .formDivVeryWideLabel .fieldDiv, .formDivWideLabel .fieldDiv, .formDivMediumLabel .fieldDiv, .formDivShortLabel .fieldDiv {
  padding: 2px;
}
.formDiv .fieldDiv .note-editor, .formDivVeryWideLabel .fieldDiv .note-editor, .formDivWideLabel .fieldDiv .note-editor, .formDivMediumLabel .fieldDiv .note-editor, .formDivShortLabel .fieldDiv .note-editor {
  display: inline-block;
}
.formDiv .fieldDiv label:first-of-type, .formDivVeryWideLabel .fieldDiv label:first-of-type, .formDivWideLabel .fieldDiv label:first-of-type, .formDivMediumLabel .fieldDiv label:first-of-type, .formDivShortLabel .fieldDiv label:first-of-type {
  vertical-align: top;
  width: 170px;
}
.formDiv .fieldDiv input, .formDivVeryWideLabel .fieldDiv input, .formDivWideLabel .fieldDiv input, .formDivMediumLabel .fieldDiv input, .formDivShortLabel .fieldDiv input, .formDiv .fieldDiv textarea, .formDivVeryWideLabel .fieldDiv textarea, .formDivWideLabel .fieldDiv textarea, .formDivMediumLabel .fieldDiv textarea, .formDivShortLabel .fieldDiv textarea {
  width: 200px;
}
.formDiv .fieldDiv select, .formDivVeryWideLabel .fieldDiv select, .formDivWideLabel .fieldDiv select, .formDivMediumLabel .fieldDiv select, .formDivShortLabel .fieldDiv select {
  width: 206px;
}
.formDiv .fieldDiv a, .formDivVeryWideLabel .fieldDiv a, .formDivWideLabel .fieldDiv a, .formDivMediumLabel .fieldDiv a, .formDivShortLabel .fieldDiv a {
  padding-top: 5px;
  display: inline-block;
}
.formDiv .fieldDiv .comboBoxTextBox, .formDivVeryWideLabel .fieldDiv .comboBoxTextBox, .formDivWideLabel .fieldDiv .comboBoxTextBox, .formDivMediumLabel .fieldDiv .comboBoxTextBox, .formDivShortLabel .fieldDiv .comboBoxTextBox {
  width: 180px;
}
.formDiv .fieldDiv input[type=checkbox], .formDivVeryWideLabel .fieldDiv input[type=checkbox], .formDivWideLabel .fieldDiv input[type=checkbox], .formDivMediumLabel .fieldDiv input[type=checkbox], .formDivShortLabel .fieldDiv input[type=checkbox] {
  position: relative;
  width: 18px;
  left: -5px;
}
.formDiv .fieldDiv input[type=radio], .formDivVeryWideLabel .fieldDiv input[type=radio], .formDivWideLabel .fieldDiv input[type=radio], .formDivMediumLabel .fieldDiv input[type=radio], .formDivShortLabel .fieldDiv input[type=radio] {
  width: 20px;
}
.formDiv .fieldDiv .cleditorMain, .formDivVeryWideLabel .fieldDiv .cleditorMain, .formDivWideLabel .fieldDiv .cleditorMain, .formDivMediumLabel .fieldDiv .cleditorMain, .formDivShortLabel .fieldDiv .cleditorMain {
  display: inline-block;
}
.formDiv .fieldDiv .timeTextBox, .formDivVeryWideLabel .fieldDiv .timeTextBox, .formDivWideLabel .fieldDiv .timeTextBox, .formDivMediumLabel .fieldDiv .timeTextBox, .formDivShortLabel .fieldDiv .timeTextBox {
  width: 60px;
}
.formDiv .fieldDiv .comment, .formDivVeryWideLabel .fieldDiv .comment, .formDivWideLabel .fieldDiv .comment, .formDivMediumLabel .fieldDiv .comment, .formDivShortLabel .fieldDiv .comment {
  width: 300px;
  height: 80px;
}

.formDivShortLabel label:first-of-type {
  width: 110px !important;
}

.formDivMediumLabel label:first-of-type {
  width: 125px !important;
}

.formDivWideLabel label:first-of-type {
  width: 250px !important;
}

.formDivVeryWideLabel label:first-of-type {
  width: 300px !important;
}

.restrictedTextWidth {
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.AddLinkButton {
  display: inline-block;
  color: #058583;
  cursor: pointer;
  height: 16px;
  line-height: 16px;
  margin-bottom: 15px;
  padding-right: 16px;
}

.Information {
  vertical-align: middle !important;
  font: normal 11px Helvetica, sans-serif;
  color: green !important;
}

.Error {
  vertical-align: middle !important;
  font: normal 11px Helvetica, sans-serif;
  color: #b94a48;
}

.ErrorHeader {
  font: normal 14px Helvetica, sans-serif;
  color: #b94a48;
}

input[type=text][readonly] {
  background: lightgray;
  color: gray;
}

.valueTextBox {
  text-align: right;
  width: 80px !important;
}

.valueDropDown {
  direction: rtl;
  width: 86px !important;
}

.valueLabel {
  text-align: right;
  width: 83px;
}

.emailDisplayDiv p {
  margin: 1em 0px;
}

.orderPrintDiv {
  font-family: Arial;
  font-size: 10pt;
  width: 800px !important;
}

#orderDiv {
  width: 980px;
  padding: 10px;
  padding-left: 20px;
  border: 1px solid lightgray;
}
#orderDiv td {
  padding: 3px;
}
#orderDiv .orderCheckBoxLabel {
  float: left;
  margin-right: 30px;
}
#orderDiv #headerDiv {
  padding: 15px 15px 15px 0;
}
#orderDiv #headerDiv #orderControlsDiv {
  float: right;
}
#orderDiv #headerDiv label.boldText, #orderDiv #headerDiv label.boldAndUnderlineText, #orderDiv #headerDiv .quoteMaterialListReportDiv label.subSystemHeader, .quoteMaterialListReportDiv #orderDiv #headerDiv label.subSystemHeader, #orderDiv #headerDiv .quoteReportDivEvo label.subSystemHeader, .quoteReportDivEvo #orderDiv #headerDiv label.subSystemHeader, #orderDiv #headerDiv .quoteReportDivEvo label.systemTotal, .quoteReportDivEvo #orderDiv #headerDiv label.systemTotal, #orderDiv #headerDiv .quoteReportDivEvo label.systemHeader, .quoteReportDivEvo #orderDiv #headerDiv label.systemHeader, #orderDiv #headerDiv .quoteReportDiv label.subSystemHeader, .quoteReportDiv #orderDiv #headerDiv label.subSystemHeader, #orderDiv #headerDiv .quoteReportDiv label.systemTotal, .quoteReportDiv #orderDiv #headerDiv label.systemTotal, #orderDiv #headerDiv .quoteReportDiv label.systemHeader, .quoteReportDiv #orderDiv #headerDiv label.systemHeader {
  padding-bottom: 10px;
}
#orderDiv #headerDiv #statusLabel {
  padding-top: 40px;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#orderDiv #companyDetailsDiv {
  padding-bottom: 20px;
}
#orderDiv #companyDetailsDiv .boldedColumn {
  font-weight: bold;
  padding-right: 15px;
}
#orderDiv #companyDetailsDiv .paddedColumn {
  padding-left: 15px;
}
#orderDiv #companyDetailsDiv #deliveryDateText {
  color: red;
  font-weight: bold;
}
#orderDiv #supplierDiv {
  padding-bottom: 20px;
}
#orderDiv #supplierDiv #supplierDivTop {
  margin-bottom: 10px;
}
#orderDiv #supplierDiv #supplierDivTop #showInvoicesLink {
  display: inline;
  margin-left: 280px;
}
#orderDiv #supplierDiv #supplierDivTop #showInvoicesLink span {
  display: inline;
}
#orderDiv #supplierDiv #supplierDivTop #showInvoicesLink #icon {
  display: inline-block;
  vertical-align: bottom;
}
#orderDiv #supplierDiv td {
  width: 450px;
  border: 1px solid black;
  margin-top: 5px;
  padding: 5px;
  display: table-cell;
  white-space: normal;
}
#orderDiv #supplierDiv td #supplierDetailDiv {
  display: inline;
  vertical-align: top;
}
#orderDiv #supplierDiv td #supplierDetailDiv span {
  display: block;
}
#orderDiv #supplierDiv td #supplierDetailDiv span .addressLabel {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
}
#orderDiv #supplierDiv td #supplierDetailDiv span .descriptionLabel {
  display: inline-block;
  width: 50px;
}
#orderDiv #orderItemsDiv {
  padding-bottom: 10px;
}
#orderDiv #orderItemsDiv #showCostToSection {
  margin-bottom: 10px;
}
#orderDiv #orderItemsDiv #showCostToSection a {
  display: inline;
  margin-left: 520px;
}
#orderDiv #orderItemsDiv #showCostToSection a span {
  display: inline;
}
#orderDiv #orderItemsDiv #showCostToSection a #icon {
  display: inline-block;
  vertical-align: bottom;
}
#orderDiv #orderItemsDiv .formDiv, #orderDiv #orderItemsDiv .formDivShortLabel, #orderDiv #orderItemsDiv .formDivMediumLabel, #orderDiv #orderItemsDiv .formDivWideLabel, #orderDiv #orderItemsDiv .formDivVeryWideLabel {
  margin-bottom: 15px;
}
#orderDiv #orderItemsDiv table {
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}
#orderDiv #orderItemsDiv table .highlightedRow {
  background-color: lightgray;
}
#orderDiv #orderItemsDiv table .partiallyReceivedRow {
  background-color: pink;
}
#orderDiv #orderItemsDiv table td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}
#orderDiv #orderItemsDiv table td .receivedTextBox {
  width: 55px;
}
#orderDiv #orderItemsDiv table td .receivedWithSerialNumberTextBox {
  cursor: pointer;
  background: white;
  color: black;
}
#orderDiv #orderItemsDiv table td.invalidCostTo {
  background-color: pink !important;
}
#orderDiv #orderItemsDiv .cancelComment {
  color: red;
  padding-top: 12px;
}

#supplierInvoicesDiv {
  display: inline-block;
  vertical-align: top;
}
#supplierInvoicesDiv table {
  table-layout: fixed;
  width: 275px;
}
#supplierInvoicesDiv table td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
#supplierInvoicesDiv table td a {
  color: #3835E9;
}
#supplierInvoicesDiv .dateColumn {
  width: 85px;
}
#supplierInvoicesDiv .invoiceNumberColumn {
  width: 100px;
}
#supplierInvoicesDiv .amountColumn {
  word-wrap: inherit !important;
  white-space: nowrap;
  width: 90px;
}

#orderInvoiceItemsDiv {
  display: inline-block;
  vertical-align: top;
  margin-top: 12px;
}
#orderInvoiceItemsDiv table td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 24px;
}
#orderInvoiceItemsDiv .amountColumn {
  word-wrap: inherit !important;
  white-space: nowrap;
  width: 90px;
}

#linkedTree,
#linkedTree ul,
#linkedTree li {
  list-style-type: none !important;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

.ui-state-highlight {
  height: 1.5em;
  background: #eaeaea;
  border: 2px dashed #aaa;
  margin: 4px 0;
}

.receiveOrderDiv {
  width: 1050px !important;
}

#serialNumbersDiv label {
  line-height: 22px;
  display: block;
}
#serialNumbersDiv #stockItemDescription {
  font-weight: bold;
}
#serialNumbersDiv #serialNumbersTextArea {
  width: 370px;
  height: 150px;
  margin-top: 10px;
  line-height: 22px;
}

.drag-target-parent {
  outline: 2px dashed #007bff;
  background-color: #eef6ff;
}

#linkedTree.drag-target-root {
  outline: 2px dashed #007bff;
  background-color: #f5fbff;
}

.ui-sortable-placeholder {
  visibility: visible !important;
  height: 2em;
  background-color: #f0f0f0;
  border: 1px dashed #bbb;
}

#linkedTree ul {
  padding-bottom: 10px; /* Increase drop zone at bottom */
}

.companyDetails {
  width: 730px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
  /*font-size: 9pt;
  white-space: normal;*/
}
.companyDetails label {
  line-height: 15px;
}
.companyDetails td {
  padding: 3px;
  word-wrap: break-word;
}
.companyDetails .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
.companyDetails .column1 {
  width: 230px;
}
.companyDetails .column2 {
  width: 80px;
}
.companyDetails .column3 {
  width: 190px;
}
.companyDetails .column4 {
  width: 100px;
}

.quoteReportDiv {
  width: 730px;
  margin: 15px;
  font-size: 9pt;
  white-space: normal;
}
.quoteReportDiv .borderedDiv {
  margin-bottom: 10px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  line-height: 12px;
  display: block;
  width: 730px;
}
.quoteReportDiv .comment {
  line-height: 15px;
}
.quoteReportDiv .eAndOELabel {
  float: right;
}
.quoteReportDiv .headerDiv {
  padding-bottom: 15px;
}
.quoteReportDiv .headerDiv label {
  font-weight: bold;
  float: right;
  padding-top: 40px;
  padding-right: 10px;
}
.quoteReportDiv .customerDiv {
  width: 400px;
  margin-top: 5px;
}
.quoteReportDiv .customerDiv #vatText {
  text-align: right;
}
.quoteReportDiv .customerDiv span {
  line-height: 15px;
  display: block;
}
.quoteReportDiv .systemsTable, .quoteReportDiv .commentTable {
  width: 742px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
.quoteReportDiv .systemsTable td, .quoteReportDiv .commentTable td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  word-wrap: break-word;
}
.quoteReportDiv .systemsTable .borderRight, .quoteReportDiv .commentTable .borderRight {
  border-width: 1px;
  border-right-style: solid;
  border-color: black;
}
.quoteReportDiv .systemsTable .borderTop, .quoteReportDiv .commentTable .borderTop {
  border-width: 1px;
  border-top-style: solid;
  border-color: black;
}
.quoteReportDiv .systemsTable .borderBottom, .quoteReportDiv .commentTable .borderBottom {
  border-width: 1px;
  border-bottom-style: solid;
  border-color: black;
}
.quoteReportDiv #systemCommentTable, .quoteReportDiv #subSystemCommentTable {
  width: 742px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
.quoteReportDiv #systemCommentTable td, .quoteReportDiv #subSystemCommentTable td {
  word-wrap: break-word;
}
.quoteReportDiv .systemHeader {
  display: block;
  text-decoration: underline;
  margin-bottom: 15px;
}
.quoteReportDiv .systemTotal {
  float: right;
}
.quoteReportDiv .subSystemHeader {
  display: block;
  margin-bottom: 15px;
}
.quoteReportDiv .commentLabel {
  display: block;
  margin-bottom: 10px;
  word-wrap: break-word;
}
.quoteReportDiv .subSystemsTable {
  width: 743px;
  display: block;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
}
.quoteReportDiv .subSystemsTable td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  word-wrap: break-word;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

.quoteReportDivEvo {
  width: 800px;
  white-space: normal;
  font-size: 1em;
  page-break-inside: avoid;
}
.quoteReportDivEvo .borderedDiv {
  margin-bottom: 10px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  line-height: 12px;
  display: block;
  width: 690px;
}
.quoteReportDivEvo .eAndOELabel {
  float: right;
}
.quoteReportDivEvo .headerDiv {
  padding-bottom: 15px;
}
.quoteReportDivEvo .headerDiv label {
  float: right;
  padding-top: 40px;
  padding-right: 10px;
  font-weight: bold;
}
.quoteReportDivEvo .companyDetails {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
}
.quoteReportDivEvo .companyDetails label {
  line-height: 20px;
}
.quoteReportDivEvo .companyDetails td {
  padding: 3px;
  word-wrap: break-word;
}
.quoteReportDivEvo .companyDetails .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
.quoteReportDivEvo .companyDetails .column1 {
  width: 250px;
}
.quoteReportDivEvo .companyDetails .column2 {
  width: 70px;
}
.quoteReportDivEvo .companyDetails .column3 {
  width: 220px;
}
.quoteReportDivEvo .companyDetails .column4 {
  width: 90px;
}
.quoteReportDivEvo .customerLabel {
  display: block;
  margin-bottom: 10px;
}
.quoteReportDivEvo .customerDiv {
  width: 450px;
  margin-top: 5px;
}
.quoteReportDivEvo .customerDiv span {
  line-height: 18px;
  display: block;
}
.quoteReportDivEvo .commentTable {
  width: 780px;
  line-height: 15px;
  padding-bottom: 10px;
}
.quoteReportDivEvo .currencyLabel {
  display: block;
  margin-bottom: 10px;
}
.quoteReportDivEvo .systemsTable {
  width: 790px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
.quoteReportDivEvo .systemsTable td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  word-wrap: break-word;
  page-break-inside: avoid;
}
.quoteReportDivEvo .systemsTable .borderRight {
  border-width: 1px;
  border-right-style: solid;
  border-color: black;
}
.quoteReportDivEvo .systemsTable .borderTop {
  border-width: 1px;
  border-top-style: solid;
  border-color: black;
}
.quoteReportDivEvo .systemsTable .borderBottom {
  border-width: 1px;
  border-bottom-style: solid;
  border-color: black;
}
.quoteReportDivEvo .systemsTable .descriptionColumn {
  width: 640px;
}
.quoteReportDivEvo .systemsTable .amountColumn {
  width: 150px;
}
.quoteReportDivEvo #systemCommentTable, .quoteReportDivEvo #subSystemCommentTable {
  width: 790px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
.quoteReportDivEvo #systemCommentTable td, .quoteReportDivEvo #subSystemCommentTable td {
  word-wrap: break-word;
  page-break-inside: avoid;
}
.quoteReportDivEvo .systemHeader {
  display: block;
  text-decoration: underline;
  margin-bottom: 15px;
}
.quoteReportDivEvo .systemTotal {
  float: right;
}
.quoteReportDivEvo .subSystemHeader {
  display: block;
  margin-bottom: 15px;
}
.quoteReportDivEvo .commentLabel {
  display: block;
  margin-bottom: 10px;
  word-wrap: break-word;
}
.quoteReportDivEvo .subSystemsTable {
  width: 790px;
  display: block;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
}
.quoteReportDivEvo .subSystemsTable td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  word-wrap: break-word;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  page-break-inside: avoid;
}
.quoteReportDivEvo .subSystemsTable .column1 {
  width: 30px;
}
.quoteReportDivEvo .subSystemsTable .column2 {
  width: 30px;
}
.quoteReportDivEvo .subSystemsTable .column3 {
  width: 450px;
}
.quoteReportDivEvo .subSystemsTable .column4 {
  width: 100px;
}
.quoteReportDivEvo .subSystemsTable .column5 {
  width: 100px;
}
.quoteReportDivEvo .subSystemsTable .column6 {
  width: 60px;
}
.quoteReportDivEvo .subSystemsTable .descriptionColumn {
  width: 280px;
}
.quoteReportDivEvo .subSystemsTable .unitCostColumn {
  width: 100px;
}
.quoteReportDivEvo .subSystemsTable .markUpColumn {
  width: 70px;
}

.quoteMaterialListReportDiv {
  width: 730px;
  margin: 15px;
  font-size: 9pt;
  white-space: normal;
}
.quoteMaterialListReportDiv #headerTable {
  width: 742px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
.quoteMaterialListReportDiv #headerTable td {
  word-wrap: break-word;
}
.quoteMaterialListReportDiv .systemsTable {
  width: 742px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
.quoteMaterialListReportDiv .systemsTable #column1 {
  width: 70px;
}
.quoteMaterialListReportDiv .systemsTable #column2 {
  width: 310px;
}
.quoteMaterialListReportDiv .systemsTable #column3 {
  width: 130px;
}
.quoteMaterialListReportDiv .systemsTable #column4 {
  width: 232px;
}
.quoteMaterialListReportDiv .systemsTable td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  word-wrap: break-word;
}
.quoteMaterialListReportDiv .systemsTable .borderRight {
  border-width: 1px;
  border-right-style: solid;
  border-color: black;
}
.quoteMaterialListReportDiv .systemsTable .borderTop {
  border-width: 1px;
  border-top-style: solid;
  border-color: black;
}
.invoiceBorder {
  border-width: 1px;
  border-style: solid;
  border-color: lightgray;
}

.invoicePrintDiv {
  font-family: Arial;
  font-size: 10pt;
  width: 800px !important;
}
.invoicePrintDiv #itemsDiv table #qtyColumn {
  width: 70px !important;
}
.invoicePrintDiv #itemsDiv table #unitColumn {
  width: 100px !important;
}

#invoiceDiv {
  width: 1200px;
  padding: 10px;
  padding-left: 20px;
  white-space: normal;
}
#invoiceDiv td {
  padding: 3px;
}
#invoiceDiv .eAndOELabel {
  float: right;
}
#invoiceDiv #headerDiv {
  padding: 15px 15px 15px 0;
}
#invoiceDiv #headerDiv .contextMenuButton {
  float: right;
}
#invoiceDiv #headerDiv label {
  padding-bottom: 5px;
}
#invoiceDiv #headerDiv #statusLabel {
  padding-right: 10px;
  padding-top: 40px;
  float: right;
  display: flex;
  flex-direction: column;
}
#invoiceDiv #detailsDiv {
  padding-bottom: 10px;
}
#invoiceDiv #detailsDiv .editDetailsButton {
  display: inline-block;
  height: 14px;
  cursor: pointer;
}
#invoiceDiv #detailsDiv #companyTable {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#invoiceDiv #detailsDiv #companyTable #column1 {
  width: 260px;
}
#invoiceDiv #detailsDiv #companyTable #column2 {
  width: 65px;
}
#invoiceDiv #detailsDiv #companyTable #column3 {
  width: 200px;
}
#invoiceDiv #detailsDiv #companyTable #column4 {
  width: 130px;
}
#invoiceDiv #detailsDiv #companyTable label {
  line-height: 20px;
}
#invoiceDiv #detailsDiv #companyTable td {
  word-wrap: break-word;
}
#invoiceDiv #detailsDiv #companyTable .boldedColumn {
  font-weight: bold;
  padding-right: 7px;
}
#invoiceDiv #detailsDiv .customerLabel {
  display: block;
  margin-bottom: 10px;
}
#invoiceDiv #detailsDiv #customerTable {
  width: 780px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#invoiceDiv #detailsDiv #customerTable span {
  line-height: 20px;
  display: block;
}
#invoiceDiv #detailsDiv #customerTable label {
  line-height: 20px;
}
#invoiceDiv #detailsDiv #customerTable td {
  word-wrap: break-word;
  padding: 10px;
}
#invoiceDiv #detailsDiv #customerTable #customerColumn {
  width: 360px;
  border: 1px solid black;
}
#invoiceDiv #detailsDiv #customerTable #customerColumn #vatText {
  text-align: left;
  margin-top: 10px;
}
#invoiceDiv #detailsDiv #customerTable #commentColumn {
  width: 380px;
}
#invoiceDiv #detailsDiv #customerTable .visibleCommentColumn {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
#invoiceDiv #currencyDiv {
  padding-bottom: 20px;
}
#invoiceDiv #itemsDiv {
  padding-bottom: 30px;
}
#invoiceDiv #itemsDiv table {
  width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
  border: 1px solid black;
}
#invoiceDiv #itemsDiv table #displayOrderColumn {
  width: 15px;
}
#invoiceDiv #itemsDiv table #qtyColumn {
  width: 60px;
}
#invoiceDiv #itemsDiv table #unitColumn {
  width: 60px;
}
#invoiceDiv #itemsDiv table #descriptionColumn {
  width: 320px;
}
#invoiceDiv #itemsDiv table #financialCategoryColumn {
  width: 100px;
}
#invoiceDiv #itemsDiv table .comboBoxTextBox {
  width: 70px;
}
#invoiceDiv #itemsDiv table #unitPriceColumn {
  width: 110px;
}
#invoiceDiv #itemsDiv table #discountValueColumn {
  width: 65px;
}
#invoiceDiv #itemsDiv table #amountColumn {
  width: 115px;
}
#invoiceDiv #itemsDiv table #editColumn {
  width: 38px;
}
#invoiceDiv #itemsDiv table #editQuantityTextBox {
  width: 55px;
}
#invoiceDiv #itemsDiv table #editUnitTextBox {
  width: 55px;
}
#invoiceDiv #itemsDiv table #editDescriptionTextBox {
  width: 315px;
}
#invoiceDiv #itemsDiv table #dropDownForCategory-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #dropDownForCategoryDisabled-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #EditStockItemID-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #EditSerialNumberID-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #EditLabourRateID-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #EditTravelRateID-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table #EditRentalRateID-text {
  width: 290px;
}
#invoiceDiv #itemsDiv table .editUnitPriceTextBox {
  width: 105px;
}
#invoiceDiv #itemsDiv table .editDiscountTextBox {
  width: 105px;
}
#invoiceDiv #itemsDiv table .editLabel {
  display: block;
  font-weight: bold;
  color: gray;
}
#invoiceDiv #itemsDiv table .highlightedRow {
  background-color: lightgray;
}
#invoiceDiv #itemsDiv table .emptyTd {
  height: 18px;
}
#invoiceDiv #itemsDiv table .borderedTop {
  border-top: 1px solid black;
}
#invoiceDiv #itemsDiv table .borderedBottom {
  border-bottom: 1px solid black;
}
#invoiceDiv #itemsDiv table td {
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  line-height: 18px;
  border-right: 1px solid black;
}
#invoiceDiv #itemsDiv table .insufficientStockRow {
  background-color: pink;
}
#invoiceDiv #itemsDiv table .descriptionColumn span {
  display: inline;
}
#invoiceDiv #bankDetailsDiv {
  padding-bottom: 30px;
}
#invoiceDiv #bankDetailsDiv #bankDetailsLabel {
  display: block;
  text-decoration: underline;
  line-height: 20px;
}
#invoiceDiv #bankDetailsDiv span {
  display: block;
  line-height: 20px;
  overflow: hidden;
}
#invoiceDiv #deliveryDiv {
  padding-bottom: 30px;
}
#invoiceDiv #deliveryDiv .deliveryDetailsDiv {
  display: inline-block;
}
#invoiceDiv #deliveryDiv .deliveryDetailsDiv .deliveryDetailsHeaderLabel {
  text-decoration: underline;
  line-height: 20px;
}
#invoiceDiv #deliveryDiv .deliveryDetailsDiv label {
  display: block;
  line-height: 50px;
}
#invoiceDiv #footerDiv table {
  width: 780px;
}

.warningElement {
  border: 2px solid red !important;
  background-color: #FFCCCC;
}

.popupTable {
  border-collapse: collapse;
  border: #CCC solid;
  border-width: 1px 1px 1px 1px;
  width: auto;
  margin: 5px;
}
.popupTable tr {
  border-bottom: 1px dotted #bbb !important;
}
.popupTable tr th, .popupTable tr td {
  text-align: left;
  white-space: nowrap;
  border-right: 1px dotted #bbb;
  padding: 2px 5px;
  line-height: 18px;
  vertical-align: middle;
}
.popupTable tr td {
  background-color: #F9F9F9 !important;
}
.popupTable tr th {
  text-align: left !important;
  background-color: lightgray !important;
}

#callOutReportDiv {
  width: 800px;
  padding: 10px;
  padding-left: 20px;
  white-space: normal;
  font-size: 1.3em;
}
#callOutReportDiv td {
  padding: 3px;
}
#callOutReportDiv #headerDiv {
  padding-bottom: 15px;
}
#callOutReportDiv #headerDiv label {
  float: right;
  padding-top: 40px;
  padding-right: 10px;
  font-weight: bold;
}
#callOutReportDiv #detailsDiv {
  padding-bottom: 20px;
}
#callOutReportDiv #detailsDiv #companyTable {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
}
#callOutReportDiv #detailsDiv #companyTable #column1 {
  width: 30%;
}
#callOutReportDiv #detailsDiv #companyTable #column2 {
  width: 10%;
}
#callOutReportDiv #detailsDiv #companyTable #column3 {
  width: 25%;
}
#callOutReportDiv #detailsDiv #companyTable #column4 {
  width: 18%;
}
#callOutReportDiv #detailsDiv #companyTable #column5 {
  width: 17%;
}
#callOutReportDiv #detailsDiv #companyTable label {
  line-height: 20px;
}
#callOutReportDiv #detailsDiv #companyTable td {
  word-wrap: break-word;
}
#callOutReportDiv #detailsDiv #companyTable .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
#callOutReportDiv #detailsDiv .customerLabel {
  display: block;
  margin-bottom: 10px;
}
#callOutReportDiv #detailsDiv #customerTable {
  width: 420px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#callOutReportDiv #detailsDiv #customerTable span {
  line-height: 20px;
  display: block;
}
#callOutReportDiv #detailsDiv #customerTable label {
  line-height: 20px;
}
#callOutReportDiv #detailsDiv #customerTable td {
  word-wrap: break-word;
  padding: 10px;
}
#callOutReportDiv #detailsDiv #customerTable #customerColumn {
  width: 360px;
  border: 1px solid black;
}
#callOutReportDiv #detailsDiv #customerTable #customerColumn #vatText {
  text-align: right;
}
#callOutReportDiv #callOutDetailsTable {
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
  margin-right: 30px;
}
#callOutReportDiv #callOutDetailsTable #column1 {
  width: 80px;
}
#callOutReportDiv #callOutDetailsTable #column2 {
  width: 200px;
}
#callOutReportDiv #callOutDetailsTable #column3 {
  width: 80px;
}
#callOutReportDiv #callOutDetailsTable #column4 {
  width: 400px;
}
#callOutReportDiv #callOutDetailsTable label {
  line-height: 20px;
}
#callOutReportDiv #callOutDetailsTable td {
  word-wrap: break-word;
}
#callOutReportDiv #callOutDetailsTable #materialTable {
  vertical-align: top;
  white-space: normal;
  line-height: 16px;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 20px;
}
#callOutReportDiv #callOutDetailsTable #materialTable #quantityColumn {
  width: 120px;
}
#callOutReportDiv #callOutDetailsTable #materialTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}
#callOutReportDiv #callOutDetailsTable #checkListTable {
  max-width: 780px;
  vertical-align: top;
  white-space: normal;
  line-height: 16px;
  table-layout: fixed;
  margin-bottom: 20px;
}
#callOutReportDiv #callOutDetailsTable #checkListTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  max-width: 450px;
  min-width: 80px;
}

#callOutReportDivEvo {
  width: 800px;
  white-space: normal;
  font-size: 1em;
}
#callOutReportDivEvo td {
  padding: 3px;
}
#callOutReportDivEvo .headerDiv {
  padding-bottom: 15px;
}
#callOutReportDivEvo .headerDiv label {
  float: right;
  padding-top: 40px;
  padding-right: 10px;
  font-weight: bold;
}
#callOutReportDivEvo #detailsDiv {
  padding-bottom: 20px;
}
#callOutReportDivEvo #detailsDiv #companyTable {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
}
#callOutReportDivEvo #detailsDiv #companyTable #column1 {
  width: 250px;
}
#callOutReportDivEvo #detailsDiv #companyTable #column2 {
  width: 70px;
}
#callOutReportDivEvo #detailsDiv #companyTable #column3 {
  width: 220px;
}
#callOutReportDivEvo #detailsDiv #companyTable #column4 {
  width: 90px;
}
#callOutReportDivEvo #detailsDiv #companyTable label {
  line-height: 20px;
}
#callOutReportDivEvo #detailsDiv #companyTable td {
  word-wrap: break-word;
}
#callOutReportDivEvo #detailsDiv #companyTable .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
#callOutReportDivEvo #detailsDiv .customerLabel {
  display: block;
  margin-bottom: 10px;
}
#callOutReportDivEvo #detailsDiv #customerTable {
  width: 450px;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#callOutReportDivEvo #detailsDiv #customerTable span {
  line-height: 20px;
  display: block;
}
#callOutReportDivEvo #detailsDiv #customerTable label {
  line-height: 20px;
}
#callOutReportDivEvo #detailsDiv #customerTable td {
  word-wrap: break-word;
  padding: 10px;
}
#callOutReportDivEvo #detailsDiv #customerTable #customerColumn {
  width: 360px;
  border: 1px solid black;
}
#callOutReportDivEvo #detailsDiv #customerTable #customerColumn #vatText {
  text-align: right;
}
#callOutReportDivEvo #callOutDetailsTable {
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
  margin-right: 30px;
}
#callOutReportDivEvo #callOutDetailsTable #column1 {
  width: 100px;
}
#callOutReportDivEvo #callOutDetailsTable #column2 {
  width: 240px;
}
#callOutReportDivEvo #callOutDetailsTable #column3 {
  width: 100px;
}
#callOutReportDivEvo #callOutDetailsTable label {
  line-height: 20px;
}
#callOutReportDivEvo #callOutDetailsTable td {
  word-wrap: break-word;
}
#callOutReportDivEvo #callOutDetailsTable #materialTable {
  width: 780px;
  vertical-align: top;
  white-space: normal;
  line-height: 16px;
  table-layout: fixed;
  margin-bottom: 20px;
}
#callOutReportDivEvo #callOutDetailsTable #materialTable #quantityColumn {
  width: 140px;
}
#callOutReportDivEvo #callOutDetailsTable #materialTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}
#callOutReportDivEvo #callOutDetailsTable #checkListTable {
  max-width: 780px;
  vertical-align: top;
  white-space: normal;
  line-height: 16px;
  table-layout: fixed;
  margin-top: 10px;
  margin-bottom: 10px;
}
#callOutReportDivEvo #callOutDetailsTable #checkListTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  max-width: 450px;
  min-width: 80px;
}

#callOutChargeBreakdownReportDiv {
  width: 800px;
  padding: 10px;
  padding-left: 20px;
  white-space: normal;
  font-size: 1.3em;
}
#callOutChargeBreakdownReportDiv td {
  padding: 3px;
}
#callOutChargeBreakdownReportDiv #headerDiv {
  padding-bottom: 15px;
}
#callOutChargeBreakdownReportDiv #headerDiv label {
  float: right;
  padding-top: 40px;
  padding-right: 10px;
  font-weight: bold;
}
#callOutChargeBreakdownReportDiv #detailsDiv {
  padding-bottom: 20px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable #column1 {
  width: 30%;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable #column2 {
  width: 10%;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable #column3 {
  width: 25%;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable #column4 {
  width: 18%;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable #column5 {
  width: 17%;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable label {
  line-height: 20px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable td {
  word-wrap: break-word;
}
#callOutChargeBreakdownReportDiv #detailsDiv #companyTable .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
#callOutChargeBreakdownReportDiv #detailsDiv .customerLabel {
  display: block;
  margin-bottom: 10px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable {
  width: 420px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable span {
  line-height: 20px;
  display: block;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable label {
  line-height: 20px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable td {
  word-wrap: break-word;
  padding: 10px;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable #customerColumn {
  width: 360px;
  border: 1px solid black;
}
#callOutChargeBreakdownReportDiv #detailsDiv #customerTable #customerColumn #vatText {
  text-align: right;
}
#callOutChargeBreakdownReportDiv #chargeTable {
  width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}
#callOutChargeBreakdownReportDiv #chargeTable #qtyColumn {
  width: 70px;
}
#callOutChargeBreakdownReportDiv #chargeTable #descriptionColumn {
  width: 445px;
}
#callOutChargeBreakdownReportDiv #chargeTable #unitPriceColumn {
  width: 90px;
}
#callOutChargeBreakdownReportDiv #chargeTable #amountColumn {
  width: 90px;
}
#callOutChargeBreakdownReportDiv #chargeTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}

#callOutChargeBreakdownReportDivEvo {
  width: 800px;
  white-space: normal;
  font-size: 1em;
}
#callOutChargeBreakdownReportDivEvo td {
  padding: 3px;
}
#callOutChargeBreakdownReportDivEvo .headerDiv {
  padding-bottom: 15px;
}
#callOutChargeBreakdownReportDivEvo .headerDiv label {
  float: right;
  padding-top: 40px;
  padding-right: 10px;
  font-weight: bold;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv {
  padding-bottom: 20px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
  line-height: 16px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable #column1 {
  width: 250px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable #column2 {
  width: 70px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable #column3 {
  width: 220px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable #column4 {
  width: 90px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable label {
  line-height: 20px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable td {
  word-wrap: break-word;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #companyTable .boldedColumn {
  border-width: 1px;
  border-right-style: solid;
  border-color: lightgray;
  font-weight: bold;
  padding-right: 7px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv .customerLabel {
  display: block;
  margin-bottom: 10px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable {
  width: 450px;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-bottom: 10px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable span {
  line-height: 20px;
  display: block;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable label {
  line-height: 20px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable td {
  word-wrap: break-word;
  padding: 10px;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable #customerColumn {
  width: 360px;
  border: 1px solid black;
}
#callOutChargeBreakdownReportDivEvo #detailsDiv #customerTable #customerColumn #vatText {
  text-align: right;
}
#callOutChargeBreakdownReportDivEvo #chargeTable {
  width: 800px;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}
#callOutChargeBreakdownReportDivEvo #chargeTable #qtyColumn {
  width: 70px;
}
#callOutChargeBreakdownReportDivEvo #chargeTable #descriptionColumn {
  width: 100%;
}
#callOutChargeBreakdownReportDivEvo #chargeTable #unitPriceColumn {
  width: 100px;
}
#callOutChargeBreakdownReportDivEvo #chargeTable #amountColumn {
  width: 100px;
}
#callOutChargeBreakdownReportDivEvo #chargeTable td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}

#busyCompanyNameImage, #busyEmailImage {
  vertical-align: middle;
  border-width: 0px;
  width: 15px;
  height: 15px;
  display: none;
}

#loginForm {
  width: 315px;
}

#forgotPasswordDiv {
  float: left;
  font-size: 1.4rem;
  font-weight: bold;
}

.jobHeader {
  height: 34px;
}
.jobHeader .heading {
  font-weight: bold;
  font-size: 2rem;
}

#jobDetailsDiv {
  width: 1200px;
}
#jobDetailsDiv #dockingDivWrapper {
  width: inherit;
}
#jobDetailsDiv #dockingDiv {
  background-color: white;
  width: inherit;
}
#jobDetailsDiv .docked {
  position: fixed;
  top: 35px;
}
#jobDetailsDiv tr td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
}
#jobDetailsDiv tr td .commentLink {
  font-size: 13px;
}
#jobDetailsDiv .textIndent {
  padding-left: 28px;
  padding-right: 40px;
}
#jobDetailsDiv .contextMenuButton {
  float: right;
  margin-right: 8px;
  margin-top: 3px;
}
#jobDetailsDiv .systemHeaderDescription, #jobDetailsDiv .checkedImage, #jobDetailsDiv .uncheckedImage, #jobDetailsDiv .visibleImage, #jobDetailsDiv .invisibleImage {
  cursor: pointer;
}
#jobDetailsDiv .reservedOrderedCheckedImage, #jobDetailsDiv .reservedOrderedUncheckedImage {
  cursor: pointer;
  display: block;
  padding-top: 4px !important;
}
#jobDetailsDiv .expandImage, #jobDetailsDiv .collapseImage {
  padding-top: 3px;
  cursor: pointer;
  width: 18px;
  vertical-align: top;
}
#jobDetailsDiv .subValues {
  color: gray;
  font-size: 12px;
  line-height: 24px;
}
#jobDetailsDiv .documentsRow {
  background-color: #EEEEEE;
  line-height: 18px;
}
#jobDetailsDiv .documentsRow td {
  padding-bottom: 10px;
}
#jobDetailsDiv .systemsMainHeader {
  color: white;
  background-color: #09A8A5;
  padding: 6px 4px 2px 4px;
}
#jobDetailsDiv .systemsMainHeader .expandAllImage, #jobDetailsDiv .systemsMainHeader .collapseAllImage {
  cursor: pointer;
  width: auto;
  height: 16px;
  padding-left: 3px;
  padding-right: 3px;
}
#jobDetailsDiv .systemHeader {
  vertical-align: top;
}
#jobDetailsDiv .systemHeader .systemHeaderLabel {
  vertical-align: top;
  display: inline-block;
}
#jobDetailsDiv .systemHeader .systemHeaderLabel .systemHeaderDescription {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  padding-top: 3px;
  padding-left: 2px;
  padding-bottom: 6px;
  width: 563px;
}
#jobDetailsDiv .systemHeader .systemHeaderLabel .comments {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  line-height: 18px;
  vertical-align: top;
  width: 484px;
  padding-bottom: 4px;
  padding-left: 2px;
}
#jobDetailsDiv .systemHeader .systemHeaderLabel .noSubSystemsLabel {
  display: block;
  padding-bottom: 4px;
  padding-left: 2px;
}
#jobDetailsDiv .systemHeader .systemHeaderEstimatedAmount {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 100px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemHeader .systemHeaderEstimatedAmountAlt {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 128px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemHeader .systemHeaderAmount {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 110px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemHeader .systemHeaderLabour {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  padding-right: 40px !important;
  vertical-align: top;
  text-align: right;
  width: 95px;
}
#jobDetailsDiv .systemHeader .systemHeaderLabourAlt {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  padding-right: 50px !important;
  vertical-align: top;
  text-align: right;
  width: 136px;
}
#jobDetailsDiv .systemHeader .systemHeaderSSD {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 90px;
}
#jobDetailsDiv .systemHeader .systemHeaderAMC {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 35px;
}
#jobDetailsDiv .systemHeader .allCheckedImage, #jobDetailsDiv .systemHeader .partiallyCheckedImage, #jobDetailsDiv .systemHeader .allReservedOrderedCheckedImage, #jobDetailsDiv .systemHeader .partiallyReservedOrderedCheckedImage {
  padding-left: 5px;
  vertical-align: top;
}
#jobDetailsDiv .systemHeader .visibleImage, #jobDetailsDiv .systemHeader .invisibleImage, #jobDetailsDiv .systemHeader .allCheckedImage, #jobDetailsDiv .systemHeader .partiallyCheckedImage, #jobDetailsDiv .systemHeader .allReservedOrderedCheckedImage, #jobDetailsDiv .systemHeader .partiallyReservedOrderedCheckedImage {
  padding-top: 2px;
  width: 16px;
  height: 16px;
  vertical-align: top;
}
#jobDetailsDiv .systemHeader .collapsedImagesDiv, #jobDetailsDiv .systemHeader .expandedImagesDiv {
  display: block;
  vertical-align: top;
}
#jobDetailsDiv .systemHeaderCollapsed {
  padding: 6px 4px 2px 4px;
  min-height: 24px;
  border-bottom: solid 1px #09A8A5;
}
#jobDetailsDiv .systemHeaderExpanded {
  padding: 6px 4px 2px 4px;
  min-height: 22px;
  color: black;
  background-color: #EEEEEE;
}
#jobDetailsDiv .systemDetail {
  color: black;
  background-color: #EEEEEE;
  border-bottom: solid 1px #09A8A5;
}
#jobDetailsDiv .systemDetail .subSystemDiv {
  background: gainsboro;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemDescription {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  line-height: 20px;
  min-height: 24px;
  vertical-align: top;
  width: 562px;
  padding-top: 6px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemEstimatedAmount {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 104px;
  padding-top: 6px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemEstimatedAmountAlt {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 128px;
  padding-top: 6px;
  padding-right: 8px !important;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemAmount {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 110px;
  padding-top: 6px;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemSSD {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  width: 89px;
  padding-top: 6px;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemLabour {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  padding-right: 36px !important;
  vertical-align: top;
  text-align: right;
  width: 95px;
  padding-top: 6px;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemLabourAlt {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  padding-right: 50px !important;
  vertical-align: top;
  text-align: right;
  width: 136px;
  padding-top: 6px;
}
#jobDetailsDiv .systemDetail .subSystemDiv .subSystemAMC {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  text-align: right;
  width: 35px;
  padding-top: 6px;
}
#jobDetailsDiv .systemDetail .subSystemDiv img {
  padding-top: 8px;
  width: 16px;
  height: 16px;
}
#jobDetailsDiv .systemDetail .highlightedRow {
  background-color: pink;
}
#jobDetailsDiv .subSystemDiv {
  border-top: solid 1px white;
}

.quoteIcons a {
  padding-left: 40px;
}
.quoteIcons a:first-of-type {
  padding-left: 0;
}

.jobHeaderPartial, .quoteHeaderPartial, .manufacturingHeaderPartial {
  width: 1000px;
}
.jobHeaderPartial .jobHeader, .quoteHeaderPartial .jobHeader, .manufacturingHeaderPartial .jobHeader {
  height: 28px;
}
.jobHeaderPartial .jobHeader .heading, .quoteHeaderPartial .jobHeader .heading, .manufacturingHeaderPartial .jobHeader .heading {
  font-weight: bold;
  font-size: 2rem;
}
.jobHeaderPartial .details, .quoteHeaderPartial .details, .manufacturingHeaderPartial .details {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 12px;
}
.jobHeaderPartial .details tr td, .quoteHeaderPartial .details tr td, .manufacturingHeaderPartial .details tr td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
  padding: 5px 0 5px 0;
}
.jobHeaderPartial .details .systemDetail, .quoteHeaderPartial .details .systemDetail, .manufacturingHeaderPartial .details .systemDetail {
  background-color: gainsboro;
}
.jobHeaderPartial .details .subSystemDetail, .quoteHeaderPartial .details .subSystemDetail, .manufacturingHeaderPartial .details .subSystemDetail {
  background-color: whitesmoke;
}
.jobHeaderPartial .details .commentDetail, .quoteHeaderPartial .details .commentDetail, .manufacturingHeaderPartial .details .commentDetail {
  background-color: #FAFAFA;
}

#callOutHeader {
  width: 1000px;
}
#callOutHeader .header {
  height: 28px;
}
#callOutHeader .header .heading {
  font-weight: bold;
  font-size: 2rem;
}
#callOutHeader .header .contextMenuButton {
  float: right;
}
#callOutHeader .details {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 12px;
}
#callOutHeader .details tr td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
  padding: 5px 0 5px 0;
  line-height: 20px;
}
#callOutHeader .details #column1 {
  width: 250px;
  vertical-align: middle;
}
#callOutHeader .details #column2 {
  width: 180px;
}
#callOutHeader .details #column3 {
  width: 180px;
}
#callOutHeader .details #column4 {
  width: 130px;
}
#callOutHeader .details #column5 {
  width: 130px;
}
#callOutHeader .details .financialCategory {
  background-color: gainsboro;
}
#callOutHeader .details .systemDescription {
  background-color: whitesmoke;
}
#callOutHeader .details .headerComment {
  background-color: ghostwhite;
}
#callOutHeader .details select {
  width: 386px;
}
#callOutHeader .details .alertComment {
  background-color: pink;
}

#reOrderDiv th {
  vertical-align: middle;
  text-align: center;
}
#reOrderDiv .shadedColumn {
  background-color: #EFEDED;
}
#reOrderDiv .quantityTextBox {
  text-align: right;
  width: 70px !important;
}

#orderStatusDiv th {
  vertical-align: middle;
  text-align: center;
}
#orderStatusDiv .stockData {
  background-color: #EFEDED;
}
#orderStatusDiv .allReceived {
  background-color: #AFFFB2;
}
#orderStatusDiv .overdue {
  background-color: pink;
}

.quantityTextBox {
  text-align: right;
  width: 50px !important;
}

.sortablePlaceholder {
  height: 2.2em;
  border: 1px dashed #09A8A5;
  background: none;
  background-color: #F4F9FF;
}

.subSortablePlaceholder {
  border: 1px dashed #0D8180;
  background: none;
  background-color: #F4F9FF;
  height: 1.4em;
}

/* Validation Helpers
-----------------------------------------------------------*/
.field-validation-error {
  color: #b94a48;
}

.field-validation-valid {
  display: none;
}

input.input-validation-error {
  border: 1px solid #b94a48;
  background-color: #ffe3e3;
}

input[type=checkbox].input-validation-error {
  border: 0 none;
}

.validation-summary-errors {
  color: #b94a48;
}

.validation-summary-valid {
  display: none;
}

/* Header
-----------------------------------------------------------*/
#headerDiv {
  padding: 8px;
}

#headerMenuDiv {
  margin: 0;
  background-color: #0D8180;
  height: 35px;
}
#headerMenuDiv #helpDiv {
  float: right;
  margin-top: 8px;
  margin-right: 45px;
}
#headerMenuDiv button {
  color: #ffffff;
  background-color: #09A8A5;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  font-size: 1.4rem;
  height: 28px;
  border: none;
  padding: 8px 14px 10px 14px;
  vertical-align: middle;
}

#headerMenuDiv.docked {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100;
}

#timeSheetHeader #DisplayDate {
  background: white;
  color: black;
}
#timeSheetHeader #copyExistingTimeSheetSection {
  display: inline-block;
  float: right;
  margin: 5px 0;
}
#timeSheetHeader #copyExistingTimeSheetSection .formDiv, #timeSheetHeader #copyExistingTimeSheetSection .formDivShortLabel, #timeSheetHeader #copyExistingTimeSheetSection .formDivMediumLabel, #timeSheetHeader #copyExistingTimeSheetSection .formDivWideLabel, #timeSheetHeader #copyExistingTimeSheetSection .formDivVeryWideLabel {
  padding: 10px;
  background-color: #F4F9FF;
}
#timeSheetHeader #copyExistingTimeSheetSection .formDiv #selectCopyButton, #timeSheetHeader #copyExistingTimeSheetSection .formDivShortLabel #selectCopyButton, #timeSheetHeader #copyExistingTimeSheetSection .formDivMediumLabel #selectCopyButton, #timeSheetHeader #copyExistingTimeSheetSection .formDivWideLabel #selectCopyButton, #timeSheetHeader #copyExistingTimeSheetSection .formDivVeryWideLabel #selectCopyButton {
  margin-left: 5px;
}

#timeSheetHeader.docked {
  position: fixed;
  top: 35px;
  background-color: white;
  z-index: 90;
  width: 650px;
  border-bottom: 1px solid black;
}

#timeSheetEntryGrid.dockedDisplaced {
  margin-top: 64px;
}

.dockedDisplaced {
  margin-top: 35px;
}

#headerMenuDiv li {
  position: relative;
}

#headerMenuDiv > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#headerMenuDiv > ul > li {
  float: left;
}

#headerMenuDiv li ul {
  display: none;
  position: absolute;
  top: 35px;
  left: 5px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.topLevelMenu {
  float: left;
}
.topLevelMenu a {
  color: #ffffff;
  background-color: #09A8A5;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  font-size: 1.4rem;
  padding: 7px 13px;
  margin: 0;
  margin-left: 10px;
  line-height: 36px;
  height: 35px;
  border-radius: 4px;
}
.topLevelMenu a:hover {
  text-decoration: none;
}
.topLevelMenu ul {
  position: absolute;
  list-style: none;
  margin-left: 5px;
  padding-left: 0;
  z-index: 2000;
}
.topLevelMenu ul li {
  margin: 0;
  display: list-item;
}
.topLevelMenu ul li a {
  width: 200px;
  text-decoration: none;
  margin: 0;
  color: White;
  display: block;
  padding: 2px 14px 0 14px;
  border-bottom-width: thin;
  border-bottom-color: #0e6563;
  border-bottom-style: solid;
}
.topLevelMenu ul li a:hover {
  text-decoration: underline;
  color: #F4F9FF;
}
.topLevelMenu ul li .subMenu {
  position: relative !important;
  left: 220px !important;
  top: -73px;
  display: none;
}
.topLevelMenu ul li .subMenu ul li a {
  width: 150px;
  border-left-width: thin;
  border-left-color: #0e6563;
  border-left-style: solid;
}

.stickyMenu {
  display: block !important;
}

/* Grid
-----------------------------------------------------------*/
.gridFilter {
  display: inline-block;
}
.gridFilter input {
  height: 18px;
}
.gridFilter .wrapper {
  border: 1px solid #ccccca;
  display: inline-block;
  vertical-align: top;
}
.gridFilter .wrapper #search {
  margin: 0;
  border: 0;
  border-right: 1px solid #ccccca;
}
.gridFilter .wrapper .searchButton {
  margin: 0;
  padding: 1px 3px 0 1px;
  background-color: #ffffff;
  vertical-align: bottom;
  border: 0;
  cursor: pointer;
}
.gridFilter .filterDiv {
  display: inline-block;
  height: 24px;
}
.gridFilter .filterDiv select {
  width: 120px;
}
.gridFilter .filterDiv input {
  height: 20px;
}
.gridFilter .filterDiv label {
  padding-left: 6px;
  padding-right: 6px;
}
.gridFilter .filterDiv .dateFilter {
  height: 24px;
  width: 100px;
  padding: 0;
}
.gridFilter .filterDiv .searchButton {
  padding: 1px 3px 0 1px;
  background-color: #ffffff;
  vertical-align: bottom;
  border: 2px outset buttonface;
  cursor: pointer;
}
.gridFilter .filterDiv .verticalHeaderDiv {
  display: inline-table;
}
.gridFilter .filterDiv .verticalHeaderDiv > label {
  display: block;
  padding-bottom: 6px;
}

.ui-autocomplete {
  max-width: 375px;
  height: 250px;
  overflow: auto;
}

.combobox-position-div {
  position: fixed;
  z-index: 1000;
}

.dateFilterDiv input {
  width: 100px !important;
  height: 16px;
}

.mvcGrid {
  margin-top: 15px;
  border-collapse: collapse;
  border: #CCC solid;
  border-width: 1px 1px 1px 1px;
  width: auto;
  empty-cells: show;
}
.mvcGrid th {
  white-space: nowrap;
  border-right: 1px dotted #bbb;
  border-bottom: 1px solid #bbb;
  background-color: #09A8A5;
  padding: 0 5px;
  color: white;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 26px;
  text-align: left;
}
.mvcGrid th a {
  color: white;
  font-weight: bold;
}
.mvcGrid tr {
  border-bottom: 1px dotted #bbb;
}
.mvcGrid tr:hover {
  background-color: silver !important;
}
.mvcGrid .greyedOut {
  color: grey;
}
.mvcGrid .highlightedGreyRow {
  background-color: lightgray;
}
.mvcGrid .highlightedRow {
  background-color: pink !important;
}
.mvcGrid .boldItalicRow {
  font-weight: bold;
  font-style: italic;
}
.mvcGrid .alertRow {
  background-color: pink !important;
}
.mvcGrid .comboBoxColumn {
  padding: 2px 2px 2px 2px;
  border-right: 1px dotted #bbb;
}
.mvcGrid td:not(.comboBoxColumn) {
  white-space: nowrap;
  border-right: 1px dotted #bbb;
  padding: 2px 5px;
  line-height: 18px;
  vertical-align: top;
}
.mvcGrid td:not(.comboBoxColumn) a {
  border-bottom: none;
  display: inline;
  padding-left: 0;
}
.mvcGrid td:not(.comboBoxColumn) .contextMenuToggle {
  display: none;
}
.mvcGrid td:not(.comboBoxColumn) ._activeRow {
  background-color: #fffee8;
}
.mvcGrid td:not(.comboBoxColumn) table:not(.mvcGrid) tr {
  border-bottom: none;
}
.mvcGrid td:not(.comboBoxColumn) table:not(.mvcGrid) tr th {
  background-color: white;
  color: black;
}
.mvcGrid td:not(.comboBoxColumn) table:not(.mvcGrid) tr th:last-of-type {
  border-right: none;
}
.mvcGrid td:not(.comboBoxColumn) table:not(.mvcGrid) tr td:last-of-type {
  border-right: none;
}
.mvcGrid .textWrapColumn {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
  display: table-cell;
  max-width: 400px;
}
.mvcGrid .gridLinkColumn {
  text-align: center;
  vertical-align: top;
}
.mvcGrid .gridImageColumn {
  display: inline-block;
  cursor: pointer;
}
.mvcGrid .gridrow_alternate {
  background-color: #F4F9FF;
}
.mvcGrid .costNotEqaulToPriceHighlight {
  background-color: #FCE4C4;
}
.mvcGrid .footerHeader {
  background-color: black;
  padding: 0 5px;
  color: white;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 26px;
  text-align: left;
}
.mvcGrid .ui-icon {
  display: inline-block !important;
}
.mvcGrid .ui-icon:hover {
  cursor: pointer !important;
}

.mvcGridNoHover tr:hover {
  background-color: transparent !important;
}

.mvcGridGreen {
  border: Green solid;
  border-width: 2px;
}
.mvcGridGreen th {
  border-right: 1px dotted Green;
  border-bottom: 1px solid Green;
}
.mvcGridGreen tr {
  border-bottom: 1px dotted Green;
}
.mvcGridGreen td {
  border-right: 1px dotted Green;
}

.mvcGridRed {
  border: Red solid;
  border-width: 2px;
}
.mvcGridRed th {
  border-right: 1px dotted Red;
  border-bottom: 1px solid Red;
}
.mvcGridRed tr {
  border-bottom: 1px dotted Red;
}
.mvcGridRed td {
  border-right: 1px dotted Red;
}

.mvcGridBlue {
  border: Blue solid;
  border-width: 2px;
}
.mvcGridBlue th {
  border-right: 1px dotted Blue;
  border-bottom: 1px solid Blue;
}
.mvcGridBlue tr {
  border-bottom: 1px dotted Blue;
}
.mvcGridBlue td {
  border-right: 1px dotted Blue;
}

.quoteVsCostGroupingDiv {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 10px;
  background-color: #F4F9FF;
  padding: 10px;
  vertical-align: top;
  margin-right: 10px;
}

.numericField, #supplierInvoicesDiv .amountColumn, #orderInvoiceItemsDiv .amountColumn {
  text-align: right !important;
}

.wrappedColumn {
  max-width: 400px;
  white-space: normal !important;
}

.wrappedColumnPrint {
  min-width: 400px;
  max-width: 400px;
  white-space: normal !important;
  overflow: initial;
}

.boldText, .boldAndUnderlineText, .quoteReportDiv .systemHeader, .quoteReportDiv .systemTotal, .quoteReportDiv .subSystemHeader, .quoteReportDivEvo .systemHeader, .quoteReportDivEvo .systemTotal, .quoteReportDivEvo .subSystemHeader, .quoteMaterialListReportDiv .subSystemHeader {
  font-weight: bold;
}

.boldAndUnderlineText {
  text-decoration: underline;
}

.addIcon {
  vertical-align: top;
  cursor: pointer;
}

#footer {
  padding-top: 10px;
  position: fixed;
  background-color: #0D8180;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  color: white;
  z-index: 1000;
}
#footer div {
  float: left;
  clear: none;
  margin-left: 10px;
}
#footer a {
  text-decoration: underline;
  color: white;
}
#footer #copyrightDiv {
  float: right;
  clear: none;
  margin-right: 10px;
}

.editRateTable {
  border: none;
  table-layout: fixed;
  border-collapse: collapse;
  table-layout: fixed;
}
.editRateTable .highlightedRow {
  background-color: lightgray;
}
.editRateTable td {
  min-width: 200px;
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
}
.editRateTable td:last-of-type {
  min-width: 0;
}

#ratePeriodList {
  width: 100%;
}
#ratePeriodList th {
  background-color: inherit;
  border-bottom-color: gray;
}

#PeriodGrid {
  display: inline-block;
}

#callOutAwaitingOrderNumberSentEmailDiv {
  display: block;
  width: 400px;
  margin-bottom: 20px;
  background-color: #F4F9FF;
  padding: 10px;
}
#callOutAwaitingOrderNumberSentEmailDiv button {
  float: right;
}
#callOutAwaitingOrderNumberSentEmailDiv label {
  width: 80px !important;
}
#callOutAwaitingOrderNumberSentEmailDiv #UpToDate {
  width: 100px;
}
#callOutAwaitingOrderNumberSentEmailDiv #OverrideEmailAddress {
  width: 390px;
}
#callOutAwaitingOrderNumberSentEmailDiv #Comment {
  width: 390px;
}

#callOutMaterialDiv h1:first-of-type, #callOutSignOffDiv h1:first-of-type, #callOutCheckListDiv h1:first-of-type {
  display: inline;
  font-weight: bold;
  margin-right: 5px;
}
#callOutMaterialDiv #callOutMobiDetailsTable, #callOutSignOffDiv #callOutMobiDetailsTable, #callOutCheckListDiv #callOutMobiDetailsTable {
  max-width: 650px;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 20px;
}
#callOutMaterialDiv #callOutMobiDetailsTable .alternatingRow, #callOutSignOffDiv #callOutMobiDetailsTable .alternatingRow, #callOutCheckListDiv #callOutMobiDetailsTable .alternatingRow {
  background-color: whitesmoke;
}
#callOutMaterialDiv #callOutMobiDetailsTable .headerColumn, #callOutSignOffDiv #callOutMobiDetailsTable .headerColumn, #callOutCheckListDiv #callOutMobiDetailsTable .headerColumn {
  height: 35px;
  vertical-align: top;
}
#callOutMaterialDiv #callOutMobiDetailsTable .headerColumn a, #callOutSignOffDiv #callOutMobiDetailsTable .headerColumn a, #callOutCheckListDiv #callOutMobiDetailsTable .headerColumn a {
  padding-top: 10px;
}
#callOutMaterialDiv #callOutMobiDetailsTable #column1, #callOutSignOffDiv #callOutMobiDetailsTable #column1, #callOutCheckListDiv #callOutMobiDetailsTable #column1 {
  width: 100px;
  font-weight: bold;
}
#callOutMaterialDiv #callOutMobiDetailsTable #column2, #callOutSignOffDiv #callOutMobiDetailsTable #column2, #callOutCheckListDiv #callOutMobiDetailsTable #column2 {
  width: 225px;
}
#callOutMaterialDiv #callOutMobiDetailsTable #column3, #callOutSignOffDiv #callOutMobiDetailsTable #column3, #callOutCheckListDiv #callOutMobiDetailsTable #column3 {
  width: 100px;
  font-weight: bold;
}
#callOutMaterialDiv #callOutMobiDetailsTable #column4, #callOutSignOffDiv #callOutMobiDetailsTable #column4, #callOutCheckListDiv #callOutMobiDetailsTable #column4 {
  width: 225px;
}
#callOutMaterialDiv #callOutMobiDetailsTable td, #callOutSignOffDiv #callOutMobiDetailsTable td, #callOutCheckListDiv #callOutMobiDetailsTable td {
  word-wrap: break-word;
  border: none;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  vertical-align: middle;
}
#callOutMaterialDiv #materialsDiv, #callOutSignOffDiv #materialsDiv, #callOutCheckListDiv #materialsDiv {
  margin-bottom: 15px;
}
#callOutMaterialDiv #signOffDiv, #callOutSignOffDiv #signOffDiv, #callOutCheckListDiv #signOffDiv {
  margin-bottom: 15px;
  margin-left: 8px;
}
#callOutMaterialDiv #signOffDiv #ctlSignature_Container, #callOutSignOffDiv #signOffDiv #ctlSignature_Container, #callOutCheckListDiv #signOffDiv #ctlSignature_Container {
  width: 450px;
  height: 300px;
  margin: 10px;
  margin-left: 2px;
  position: relative;
}
#callOutMaterialDiv #signOffDiv #ctlSignature_Container #ctlSignature, #callOutSignOffDiv #signOffDiv #ctlSignature_Container #ctlSignature, #callOutCheckListDiv #signOffDiv #ctlSignature_Container #ctlSignature {
  left: 0px;
  top: 0px;
  position: absolute;
}
#callOutMaterialDiv #signOffDiv #ctlSignature_toolbar, #callOutSignOffDiv #signOffDiv #ctlSignature_toolbar, #callOutCheckListDiv #signOffDiv #ctlSignature_toolbar {
  display: block;
  left: 2px;
  height: 20px;
  width: 450px;
  position: relative;
  background-color: transparent;
}
#callOutMaterialDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_resetbutton, #callOutSignOffDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_resetbutton, #callOutCheckListDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_resetbutton {
  cursor: pointer;
  float: right;
}
#callOutMaterialDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_status, #callOutSignOffDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_status, #callOutCheckListDiv #signOffDiv #ctlSignature_toolbar #ctlSignature_status {
  color: blue;
  font-family: verdana;
  font-size: 12px;
  float: left;
  margin-right: 5px;
}
#callOutMaterialDiv #checkListBorderDiv, #callOutSignOffDiv #checkListBorderDiv, #callOutCheckListDiv #checkListBorderDiv {
  padding: 20px 30px 20px 20px;
  border: 1px solid black;
  display: inline-block;
}
#callOutMaterialDiv #checkListTable, #callOutSignOffDiv #checkListTable, #callOutCheckListDiv #checkListTable {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 4px;
  table-layout: fixed;
  white-space: normal;
  line-height: 16px;
}
#callOutMaterialDiv #checkListTable td, #callOutSignOffDiv #checkListTable td, #callOutCheckListDiv #checkListTable td {
  border: 1px solid black;
  padding: 6px;
  max-width: 400px;
  word-wrap: break-word;
  white-space: normal;
}
#callOutMaterialDiv #checkListTable td input[type=text], #callOutSignOffDiv #checkListTable td input[type=text], #callOutCheckListDiv #checkListTable td input[type=text] {
  width: 150px;
}
#callOutMaterialDiv #checkListTable td input[type=radio], #callOutSignOffDiv #checkListTable td input[type=radio], #callOutCheckListDiv #checkListTable td input[type=radio] {
  width: 25px;
}
#callOutMaterialDiv #checkListTable td select, #callOutSignOffDiv #checkListTable td select, #callOutCheckListDiv #checkListTable td select {
  min-width: 155px;
  width: auto;
}

#stockTakeDiv #titleDiv, #stockValueDiv #titleDiv {
  display: block;
  width: 620px;
}
#stockTakeDiv #titleDiv h1, #stockValueDiv #titleDiv h1 {
  display: inline-block;
}
#stockTakeDiv #titleDiv .contextMenuButton, #stockValueDiv #titleDiv .contextMenuButton {
  display: inline-block;
  float: right;
  margin-top: 16px;
}
#stockTakeDiv #filterDiv, #stockValueDiv #filterDiv {
  display: inline-block;
  margin-bottom: 20px;
  background-color: #F4F9FF;
  padding: 10px;
}
#stockTakeDiv #filterDiv .formDivShortLabel, #stockValueDiv #filterDiv .formDivShortLabel {
  display: inline-block;
  vertical-align: top;
}
#stockTakeDiv #filterDiv .formDivShortLabel .checkBoxDiv, #stockValueDiv #filterDiv .formDivShortLabel .checkBoxDiv {
  display: inline-block;
}
#stockTakeDiv #filterDiv .formDivShortLabel .checkBoxDiv .checkBoxLabel, #stockValueDiv #filterDiv .formDivShortLabel .checkBoxDiv .checkBoxLabel {
  display: block;
}
#stockTakeDiv #filterDiv .formDivShortLabel .checkBoxDiv .checkBoxLabel label, #stockValueDiv #filterDiv .formDivShortLabel .checkBoxDiv .checkBoxLabel label {
  position: relative;
  top: -3px;
  min-height: 0px;
  padding-right: 30px;
}
#stockTakeDiv #filterDiv .formDivShortLabel #FilterDate, #stockValueDiv #filterDiv .formDivShortLabel #FilterDate {
  width: 135px;
}
#stockTakeDiv #filterDiv .formDivShortLabel #Categories, #stockValueDiv #filterDiv .formDivShortLabel #Categories {
  width: 220px;
  height: 165px;
}
#stockTakeDiv #filterDiv .formDivShortLabel #SortOrder, #stockValueDiv #filterDiv .formDivShortLabel #SortOrder {
  width: 220px;
}
#stockTakeDiv #stockTakeForm th, #stockTakeDiv #stockValueForm th, #stockValueDiv #stockTakeForm th, #stockValueDiv #stockValueForm th {
  text-align: center;
  vertical-align: middle;
}
#stockTakeDiv #stockTakeForm .wrappedColumn, #stockTakeDiv #stockValueForm .wrappedColumn, #stockValueDiv #stockTakeForm .wrappedColumn, #stockValueDiv #stockValueForm .wrappedColumn {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  max-width: 300px;
}
#stockTakeDiv #stockTakeForm .subStoreCountDetailLabel, #stockTakeDiv #stockValueForm .subStoreCountDetailLabel, #stockValueDiv #stockTakeForm .subStoreCountDetailLabel, #stockValueDiv #stockValueForm .subStoreCountDetailLabel {
  cursor: help;
  color: #058583;
}
#stockTakeDiv #stockTakeForm #stockTakeDateLabel, #stockTakeDiv #stockTakeForm #stockValueDateLabel, #stockTakeDiv #stockValueForm #stockTakeDateLabel, #stockTakeDiv #stockValueForm #stockValueDateLabel, #stockValueDiv #stockTakeForm #stockTakeDateLabel, #stockValueDiv #stockTakeForm #stockValueDateLabel, #stockValueDiv #stockValueForm #stockTakeDateLabel, #stockValueDiv #stockValueForm #stockValueDateLabel {
  display: block;
}
#stockTakeDiv #stockTakeForm input[type=text], #stockTakeDiv #stockValueForm input[type=text], #stockValueDiv #stockTakeForm input[type=text], #stockValueDiv #stockValueForm input[type=text] {
  width: 80px;
  text-align: right;
}
#stockTakeDiv #stockTakeForm #recordButton, #stockTakeDiv #stockValueForm #recordButton, #stockValueDiv #stockTakeForm #recordButton, #stockValueDiv #stockValueForm #recordButton {
  margin-top: 10px;
}

#stockTakeReportDivNonCostColumn {
  margin: 20px;
  margin-right: 30px;
}
#stockTakeReportDivNonCostColumn #stockTakeDateLabel {
  display: block;
  font-size: 1.2em;
}
#stockTakeReportDivNonCostColumn table {
  width: 96%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 10px;
  line-height: 20px;
}
#stockTakeReportDivNonCostColumn table .header {
  font-weight: bold;
  text-align: center;
}
#stockTakeReportDivNonCostColumn table .stockItemTD {
  text-align: center;
}
#stockTakeReportDivNonCostColumn table #stockItemIDColumn {
  width: 70px;
}
#stockTakeReportDivNonCostColumn table #categoryColumn {
  width: 90px;
}
#stockTakeReportDivNonCostColumn table #descriptionColumn {
  width: 250px;
}
#stockTakeReportDivNonCostColumn table #partNumberColumn {
  width: 90px;
}
#stockTakeReportDivNonCostColumn table td {
  word-wrap: break-word;
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  vertical-align: middle;
}

#stockTakeReportDivWithCostColumn #stockTakeDateLabel {
  display: block;
  font-size: 0.8em;
}
#stockTakeReportDivWithCostColumn table {
  width: 100%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 10px;
  line-height: 10px;
  font-size: 0.8em;
}
#stockTakeReportDivWithCostColumn table .header {
  font-weight: bold;
  text-align: center;
}
#stockTakeReportDivWithCostColumn table .centeredTD {
  text-align: center;
}
#stockTakeReportDivWithCostColumn table #stockItemIDColumn {
  width: 45px;
}
#stockTakeReportDivWithCostColumn table #categoryColumn {
  width: 72px;
}
#stockTakeReportDivWithCostColumn table #descriptionColumn {
  width: 140px;
}
#stockTakeReportDivWithCostColumn table #partNumberColumn {
  width: 80px;
}
#stockTakeReportDivWithCostColumn table #countColumn {
  width: 45px;
}
#stockTakeReportDivWithCostColumn table #stockOnHandColumn {
  width: 45px;
}
#stockTakeReportDivWithCostColumn table #diff1Column {
  width: 30px;
}
#stockTakeReportDivWithCostColumn table #priceColumn {
  width: 40px;
}
#stockTakeReportDivWithCostColumn table #countValueColumn {
  width: 45px;
}
#stockTakeReportDivWithCostColumn table #stockValueColumn {
  width: 45px;
}
#stockTakeReportDivWithCostColumn table #diff2Column {
  width: 35px;
}
#stockTakeReportDivWithCostColumn table td {
  word-wrap: break-word;
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  height: 18px;
  vertical-align: middle;
}
#stockTakeReportDivWithCostColumn table .checkBoxTD {
  padding-top: 3px;
  text-align: center;
}
#stockTakeReportDivWithCostColumn table .checkBoxTD input {
  width: 10px;
  height: 10px;
}

#contractDiv h1 {
  display: block;
}
#contractDiv #filterDiv {
  display: inline-block;
  margin-bottom: 20px;
  background-color: #F4F9FF;
  padding: 10px;
}
#contractDiv #filterDiv .monthDropDown {
  width: 120px;
}
#contractDiv #filterDiv .yearDropDown {
  width: 80px;
}
#contractDiv #contractsForm #detailsLabel {
  display: block;
}
#contractDiv #contractsForm #contractTable #EditingCommissionedDate {
  width: 100px;
}
#contractDiv #contractsForm #contractTable td {
  line-height: 25px !important;
}
#contractDiv #contractsForm #contractTable .valueColumn {
  min-width: 50px;
}
#contractDiv #contractsForm #contractTable .valueTextBox {
  width: 45px !important;
}
#contractDiv #contractsForm #contractTable .commentTextArea {
  margin-top: 10px;
  width: 80px;
  height: 60px;
}
#contractDiv #contractsForm #contractTable .highlightedRow {
  background-color: lightgray;
}
#contractDiv #contractsForm #contractTable .markedValue {
  color: blue;
}
#contractDiv #contractsForm #contractTable .noteColumn {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#contractDiv .groupingDiv {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 10px;
  background-color: #F4F9FF;
  padding: 10px;
  vertical-align: top;
  margin-right: 10px;
}
#contractDiv .groupingDiv #periodDropDown {
  width: 200px;
}
#contractDiv .groupingDiv #generateButton {
  margin-top: 19px;
}
#contractDiv .groupingDiv #markUpForm label {
  line-height: 22px;
}
#contractDiv .groupingDiv #markUpForm input[type=text] {
  text-align: right;
  width: 50px;
}
#contractDiv .groupingDiv #markUpForm #markUpButton {
  margin-top: 6px;
  display: block;
  float: right;
}

.contextMenuToggle {
  cursor: pointer;
  display: none;
}

.contextMenuTableCell {
  cursor: pointer;
  display: table-cell;
  color: #ffffff;
  background-color: #09A8A5;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  border: none;
  vertical-align: middle;
}
.contextMenuTableCell a, .contextMenuTableCell a:hover {
  color: #ffffff;
  text-decoration: none;
}
.contextMenuTableCell:hover {
  background-color: #0D8180;
}

.contextmenuTableCellSelected {
  background-color: #0D8180;
}

.contextMenuButton {
  color: #ffffff;
  background-color: #09A8A5;
  font-size: 1.4rem;
  border: none;
  height: 25px;
  vertical-align: middle;
}

.contextMenu {
  min-width: 100px;
  position: absolute;
  background: #09A8A5;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: none;
  padding: 4px 13px;
  z-index: 100;
}
.contextMenu li a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-width: thin;
  border-bottom-style: solid;
  text-decoration: none;
  cursor: pointer;
  color: white;
  border-bottom-color: #0D8180;
}
.contextMenu li a:hover {
  text-decoration: underline;
}
.contextMenu li label {
  color: lightgray;
  cursor: default;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 22px;
}

.ui-widget-content {
  border-color: #0D8180;
}

/* jGrowl overrides
------------------------------------------------------------------------*/
div.jGrowl-notification {
  white-space: normal !important;
  background-color: #09A8A5 !important;
  min-width: 280px !important;
  padding: 15px !important;
}

div.jGrowl-notification.error {
  background-color: #b94a48 !important;
}

div.jGrowl-closer {
  width: 280px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

div.jGrowl > .ui-state-highlight {
  background: inherit;
  color: inherit;
  border: inherit;
  min-height: 1.5em;
  height: auto !important;
}

div.jGrowl.center {
  top: 10px;
  width: 50%;
  left: 40%;
}

/* override styles
------------------------------------------------------------------------*/
.ui-widget-header {
  background: #0D8180 no-repeat;
}
.ui-widget-header span {
  color: #ffffff;
}

.ui-widget {
  font-size: 1.3rem;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.ui-tabs {
  z-index: 1;
}

.ui-dialog {
  position: fixed;
  overflow: visible;
}

.ui-dialog-title {
  height: 14px;
}

.ui-menu {
  list-style: none;
}

.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 2px 0.4em;
  line-height: 1.5;
  min-height: 0;
  font-weight: normal;
}

.ui-menu .ui-menu-item a.ui-state-focus {
  color: white;
  background: #09A8A5;
  border-width: 0 0 1px 0;
  border-bottom-color: #0D8180;
}

.daredevel-tree {
  border: none;
}
.daredevel-tree .daredevel-tree-anchor {
  cursor: pointer !important;
}
.daredevel-tree ul {
  padding-left: 40px !important;
}
.daredevel-tree ul input[type=checkbox] {
  margin-right: 6px;
  vertical-align: bottom;
}
.daredevel-tree ul span {
  line-height: 20px;
}

/* TimeSheet
------------------------------------------------------------------------*/
#eventBookingForm #billingDuration {
  font-weight: bold;
  color: green;
}
#eventBookingForm input:not([type=checkbox]), #eventBookingForm textarea {
  width: 380px;
}
#eventBookingForm select {
  width: 386px;
}
#eventBookingForm textarea:not([id=alertCommentTextArea]) {
  height: 100px;
}

#timeSheetPage {
  max-width: 650px;
}
#timeSheetPage div #userBeingEdited {
  display: inline-block;
  font-size: 1.3em;
  font-weight: 500;
  margin: 0 0 10px 0;
  vertical-align: middle;
  position: relative;
}

#topPanelControls {
  margin: 5px 2px 15px 0;
  text-align: center;
}
#topPanelControls div {
  display: inline-block;
}
#topPanelControls #totalTime {
  font-weight: 700;
  color: #666;
  width: 220px;
  padding: 0;
}
#topPanelControls #totalTime label {
  float: left;
  font-size: 1em;
  font-weight: bold;
}
#topPanelControls #totalTime label:first-of-type {
  margin-right: 2px;
}
#topPanelControls label:first-of-type {
  margin-right: 2px;
}
#topPanelControls #timeDivider {
  padding: 0;
}
#topPanelControls #timeDivider div {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.8em;
  width: 50px;
  padding: 2px 0 0 0;
  display: inline-block;
  border: 1px solid black;
  margin-right: -5px;
  height: 15px;
}
#topPanelControls #dayScrollerDiv {
  margin: 0 0 -10px 20px;
}
#topPanelControls #dayScrollerDiv img {
  display: inline-block;
  width: 25px;
  height: 30px;
  float: left;
}
#topPanelControls #dayScrollerDiv input {
  margin: 2px 3px 0 3px;
  font-weight: 600;
  font-size: 1.25em !important;
  float: left;
  display: inline-block;
  border: none;
  width: 200px;
  text-align: center;
}
#topPanelControls #dayScrollerDiv input:hover {
  cursor: pointer;
}
#topPanelControls .scrollArrow:hover {
  cursor: pointer;
}

.highlighted {
  background-color: #9999FF;
}

#buttonPanel {
  position: absolute;
  left: 100px;
  z-index: 2;
}
#buttonPanel div {
  position: relative;
  z-index: 3;
  display: inline-block;
  padding: 3px 6px;
  background-color: #E6E6D1;
  font-weight: 700;
  border: 1px solid black;
  margin-right: 5px;
  cursor: pointer;
}
#buttonPanel div:hover {
  cursor: pointer;
}

#timeSheetEntryGrid table {
  color: white;
  font-size: 1em;
  font-weight: normal;
  border: 1px solid black;
  padding: 0;
  table-layout: fixed;
  height: 1000px;
  border-collapse: collapse;
  width: 100%;
}
#timeSheetEntryGrid table .hourRow {
  border-top: 1px solid black !important;
}
#timeSheetEntryGrid table .collapseRow {
  border-top: none !important;
}
#timeSheetEntryGrid table tr.Hour {
  height: 14px !important;
}
#timeSheetEntryGrid table tr.HalfHour {
  height: 24px !important;
}
#timeSheetEntryGrid table tr.QuarterHour {
  height: 40px !important;
}
#timeSheetEntryGrid table tr.Overtime {
  background-color: #FFDFCA;
}
#timeSheetEntryGrid table tr.Sunday {
  background-color: #DEFFD3;
}
#timeSheetEntryGrid table tr.Normal {
  background-color: none;
}
#timeSheetEntryGrid table tr {
  padding: 10px !important;
  margin: 0;
  border-top: 1px solid #c2c2c2;
}
#timeSheetEntryGrid table tr .timeColumn {
  width: 10%;
  vertical-align: top;
}
#timeSheetEntryGrid table tr .timeColumn label {
  color: black;
  font-weight: bold;
  margin: 10px 0 0 10px;
}
#timeSheetEntryGrid table tr td.occupied {
  padding: 2px 0 2px 0;
}
#timeSheetEntryGrid table tr td.occupied div {
  background-color: #09A8A5;
  height: 100%;
  width: 98%;
  border: 1px solid black;
  position: relative;
  display: inline-block;
  font-weight: 700;
}
#timeSheetEntryGrid table tr td.occupied div .startStopTimeBlock {
  display: block;
}
#timeSheetEntryGrid table tr td.occupied div .startStopTimeBlock label {
  margin: 2px 0 0 0;
  font-weight: normal;
  display: block;
}
#timeSheetEntryGrid table tr td.occupied div .contextMenuButton {
  float: right;
  background-color: #0e6563;
}
#timeSheetEntryGrid table tr td.occupied div .contextMenu li {
  display: list-item;
}
#timeSheetEntryGrid table tr td.occupied div .returnedReasonLink, #timeSheetEntryGrid table tr td.occupied div .alertLink, #timeSheetEntryGrid table tr td.occupied div .hiddenTimeSheetInfoLink {
  float: right;
}
#timeSheetEntryGrid table tr td.occupied div.alert {
  background-color: #FF6480;
}
#timeSheetEntryGrid table tr td.occupied div.openCallOut {
  background-color: #84D4D2;
}
#timeSheetEntryGrid table tr td.occupied .timesheetEntryHeaderText {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}
#timeSheetEntryGrid table tr td.occupied label:first-of-type {
  margin: 10px;
}
#timeSheetEntryGrid table tr td.occupied .copyTimeSheetCheckBox {
  float: right;
}
#timeSheetEntryGrid table tr td.unoccupied label {
  display: inline-block;
  font-weight: bold;
  color: #c2c2c2;
}

#assistantDiv {
  display: inline-block;
  overflow-y: auto;
  width: 400px;
  max-height: 130px;
}
#assistantDiv label {
  display: block;
}
#assistantDiv input {
  top: 0;
}

/*TimeSheetEventBooking
-------------------------------------------------------------------------------------------*/
#timeSheetEventDiv #timeSheetEventButtonsDiv {
  margin: 10px 0 0 425px;
}

#preBuiltSubSystemDetailsDiv {
  width: 1000px;
}
#preBuiltSubSystemDetailsDiv .header {
  height: 28px;
}
#preBuiltSubSystemDetailsDiv .header .heading {
  font-weight: bold;
  font-size: 2rem;
}
#preBuiltSubSystemDetailsDiv .header a {
  margin-left: 20px;
}
#preBuiltSubSystemDetailsDiv .header a div {
  display: inline-block;
  width: 20px;
  height: 20px;
}
#preBuiltSubSystemDetailsDiv .header label {
  display: inline-block;
}
#preBuiltSubSystemDetailsDiv .details {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 12px;
}
#preBuiltSubSystemDetailsDiv .details tr td {
  display: table-cell;
  padding: 5px 0 5px 0;
  line-height: 20px;
}
#preBuiltSubSystemDetailsDiv .details #column1 {
  width: 160px;
  vertical-align: middle;
}
#preBuiltSubSystemDetailsDiv .details #column2 {
  width: 180px;
}
#preBuiltSubSystemDetailsDiv .details #column3 {
  width: 180px;
}

#preBuiltSubSystemReportDiv .headerDiv {
  margin: 0 0 10px 400px;
}
#preBuiltSubSystemReportDiv .headerDiv label {
  font-size: 1.6em;
  border-bottom: 1px solid black;
}
#preBuiltSubSystemReportDiv table {
  width: 96%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 10px;
  line-height: 20px;
}
#preBuiltSubSystemReportDiv table td {
  word-wrap: break-word;
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  vertical-align: middle;
}
#preBuiltSubSystemReportDiv table .descriptionColumn {
  width: 275px;
}
#preBuiltSubSystemReportDiv table .priceColumn {
  width: 75px;
}
#preBuiltSubSystemReportDiv table .quantityColumn {
  width: 75px;
}
#preBuiltSubSystemReportDiv table .valueColumn {
  width: 75px;
}
#preBuiltSubSystemReportDiv #headerTable {
  border: none;
}
#preBuiltSubSystemReportDiv #headerTable tr td {
  border: none;
}

#stockListReportDiv h1 {
  font-size: 18px;
  display: inline;
}
#stockListReportDiv table {
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 20px;
  line-height: 20px;
}
#stockListReportDiv table td {
  word-wrap: break-word;
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  vertical-align: middle;
}
#stockListReportDiv table .categoryColumn {
  width: 120px;
}
#stockListReportDiv table .descriptionColumn {
  width: 300px;
}
#stockListReportDiv table .partNumberColumn {
  width: 150px;
}
#stockListReportDiv table .quantityColumn {
  width: 55px;
}
#stockListReportDiv table .emptyColumn {
  width: 55px;
}

/* qTip
------------------------------------------------------------------------*/
.qtip-default {
  border-color: grey;
  color: black;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  font-size: 1.1em;
}

.hiddenInfoQtip {
  max-width: 250px !important;
}

.workInProgressReportQtip {
  max-width: 500px !important;
}

.qtip-content {
  padding: 10px 18px;
  font-weight: 500;
  word-wrap: break-word;
  white-space: pre-line;
}
.qtip-content .informationContent {
  display: block;
}
.qtip-content .informationContent label {
  display: block;
}

/* Sticky Table Headings
------------------------------------------------------------------------*/
.sticky-wrap {
  position: relative;
  margin-bottom: 1.5em;
}
.sticky-wrap .sticky-thead, .sticky-wrap .sticky-col {
  opacity: 0;
  position: fixed;
  top: 20px;
  transition: all 0.125s ease-in-out;
  z-index: 50;
  width: auto;
}
.sticky-wrap .sticky-thead {
  box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, 0.125);
  z-index: 75;
}
.sticky-wrap td, .sticky-wrap th {
  box-sizing: border-box;
}

/* Variance Report
------------------------------------------------------------------------*/
#groupDiv {
  font-weight: bold;
}

#varianceReport #varianceReportTable tr td {
  font-size: 1.2rem;
}
#varianceReport #varianceReportTable tr td label.Error {
  font-size: inherit;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid {
  width: 100%;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td:first-of-type {
  width: 200px;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td:first-of-type div {
  height: 20px;
  display: inline-block;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td:first-of-type div img {
  width: 100%;
  height: 100%;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td .printNoChargeButton, #varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td .printChargeButton {
  float: right;
  display: none;
}
#varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td .printNoChargeButton:hover, #varianceReport #varianceReportTable tr td .varianceDetailTotalsGrid tr td .printChargeButton:hover {
  cursor: pointer;
}
#varianceReport #varianceTable {
  margin-left: 180px;
}
#varianceReport #varianceTable tr td:first-of-type {
  font-weight: bold;
}
#varianceReport #varianceTable tr td {
  font-size: 1.2rem;
}
#varianceReport #varianceTable tr td label.Error {
  font-size: inherit;
}

.concurrentCheckBoxGroup {
  border-left: 1px solid grey;
  padding-left: 5px;
}

#groupCalloutsButton {
  margin-left: 50px;
}

#printReport {
  display: block;
  margin-bottom: 10px;
  width: 20px;
}

#editClientGroupForm .formDiv .fieldDiv label:first-of-type, #editClientGroupForm .formDivShortLabel .fieldDiv label:first-of-type, #editClientGroupForm .formDivMediumLabel .fieldDiv label:first-of-type, #editClientGroupForm .formDivWideLabel .fieldDiv label:first-of-type, #editClientGroupForm .formDivVeryWideLabel .fieldDiv label:first-of-type {
  width: 270px !important;
}

.clickableImage {
  margin-left: 5px;
}
.clickableImage:hover {
  cursor: pointer;
}

.closebutton {
  float: right;
}
.closebutton:hover {
  cursor: pointer;
}

#chromeWarningDiv {
  padding: 0;
  font-size: 16px;
  color: tomato;
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
}

#negativeWarningLabel {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 10px;
  display: inline-block;
}

#reportContent #workInProgressReportHeader {
  display: inline-block;
  margin-right: 50px;
  font-weight: bold;
}
#reportContent #backButton {
  display: none;
  width: 25px;
}
#reportContent #backButton:hover {
  cursor: pointer;
}

#showDetailDiv div {
  display: inline-block;
}

#jobPackingSlipItemsPrintDiv table {
  width: 96%;
  display: block;
  vertical-align: top;
  table-layout: fixed;
  white-space: normal;
  margin-top: 10px;
  line-height: 20px;
}
#jobPackingSlipItemsPrintDiv table td {
  word-wrap: break-word;
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  vertical-align: middle;
}
#jobPackingSlipItemsPrintDiv table #descriptionColumn {
  width: 360px;
}
#jobPackingSlipItemsPrintDiv table #commentColumn {
  width: 300px;
}
#jobPackingSlipItemsPrintDiv table #quantityColumn {
  width: 70px;
}
#jobPackingSlipItemsPrintDiv table #emptyColumn {
  width: 200px;
}

#stockListForm .wrapper {
  border: 1px solid #ccccca;
  display: inline-block;
  vertical-align: top;
}
#stockListForm .wrapper #search {
  margin: 0;
  border: 0;
  border-right: 1px solid #ccccca;
}
#stockListForm .wrapper .searchButton {
  margin: 0;
  padding: 1px 3px 0 1px;
  background-color: #ffffff;
  vertical-align: bottom;
  border: 0;
  cursor: pointer;
}

.inactive-user {
  color: red;
}

.radio-buttons {
  margin: 0px;
  padding: 0px;
}

/* Card grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 3fr));
  gap: 20px;
}

/* Card styling */
.grid-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s;
  position: relative;
  align-items: center;
  width: auto;
}

.drag-handle {
  cursor: move;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #888;
}

.grid-card:hover {
  transform: translateY(-10px);
}

/* Title and text styling inside the card */
.card-header-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.card-sub-heading {
  border: 1px dotted #000;
  padding: 6px 12px;
  font-size: 10px;
  border-radius: 5px;
  background-color: whitesmoke;
  display: block;
  max-width: 90%;
  margin: 8px auto;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.3;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .card-sub-heading {
    max-width: 95%;
    font-size: 9px;
    padding: 4px 8px;
  }
}
.card-text {
  color: #666;
  margin: 5px 0;
}

.form-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

/* Form styling */
.contact-form {
  width: 100%;
}

.form-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.form-item {
  margin-bottom: 20px;
}

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

.left {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.right {
  float: right;
  width: 48%;
}

.full-width {
  width: 100%;
  clear: both;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
}

.form-divider {
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

.req {
  color: red;
}

/* Clear floats after the form groups */
.contact-form::after {
  content: "";
  display: table;
  clear: both;
}

/* Import Export
------------------------------------------------------------------------*/
.import-container {
  max-width: auto;
  margin: 0 auto;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
}
.import-container #contentPanel {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}
.import-container .card-header {
  display: flex;
  flex-direction: column;
}
.import-container .card-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #111827;
}
.import-container .card-header .help-section {
  display: flex;
  flex-direction: column;
}
.import-container .card-header .help-section h4 {
  margin: 0 0 8px 0;
  color: #374151;
}
.import-container .card-header .help-section a {
  color: #2563eb;
  text-decoration: none;
  font-size: 1.2rem;
}
.import-container .card-header .help-section a:hover {
  text-decoration: underline;
}
.import-container .card-header .help-section h3 {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
  font-weight: 500;
}
.import-container .card-header .help-section label {
  font-size: 1rem;
}
.import-container .card-header .help-section label a {
  color: #2563eb;
  text-decoration: none;
}
.import-container .card-header .help-section label a:hover {
  text-decoration: underline;
}
.import-container .instructions {
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}
.import-container .instructions ol {
  padding-left: 24px;
  margin: 0;
}
.import-container .instructions li {
  margin-bottom: 12px;
  color: #374151;
  line-height: 1.5;
}
.import-container #downloadCsvIcons {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f3f4f6;
  border-radius: 4px;
  text-decoration: none;
  color: #374151;
  transition: background-color 0.2s;
}
.import-container #downloadCsvIcons:hover {
  background-color: #e5e7eb;
}
.import-container #downloadCsvIcons img {
  margin-left: 8px;
}
.import-container #uploadSection h2 {
  margin: 32px 0 16px 0;
}
.import-container #dropZone {
  border: 2px dashed #9ca3af;
  border-radius: 6px;
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.2s;
}
.import-container #dropZone:hover {
  border-color: #6b7280;
  background-color: #f3f4f6;
}
.import-container #dropZone.drag-active {
  border-color: #2563eb;
  background-color: #eff6ff;
}
.import-container #fileInput {
  display: none;
}
.import-container .upload-icon {
  width: 32px;
  height: 32px;
  color: #6b7280;
}
.import-container .upload-text {
  color: #374151;
  text-align: center;
}
.import-container .upload-subtext {
  font-size: 0.875rem;
  color: #6b7280;
}
.import-container .status-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  display: none;
}
.import-container .status-message.success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.import-container .status-message.error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.import-container .export-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.import-container .export-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}
.import-container .export-button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.import-container .export-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
}
.import-container .export-icon-wrapper.template {
  background-color: #e0f2fe;
  color: #0284c7;
}
.import-container .export-icon-wrapper.data {
  background-color: #dcfce7;
  color: #16a34a;
}
.import-container .export-icon-wrapper.custom {
  background-color: #fef3c7;
  color: #d97706;
}
.import-container .export-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.import-container .export-title {
  font-weight: 500;
  color: #111827;
  font-size: 1.2rem;
}
.import-container .export-description {
  color: #6b7280;
  font-size: 1rem;
}
.import-container .divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 24px 0;
}

/* Barcode scanning 
	---------------------------------------------------------------------*/
/* Barcode Scanner Styles */
/* Barcode Scanner Basic Styles */
#barcode-scanner-container {
  font-family: Arial, sans-serif;
  max-width: 640px;
  padding: 15px;
  transition: all 0.3s ease;
}

.scanner-header {
  margin-bottom: 15px;
}

.scanner-header h2 {
  margin: 0;
}

.scanner-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

#camera-select-container {
  display: none;
  width: 100%;
  margin-top: 10px;
}

#camera-select {
  padding: 10px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#barcode-scanner {
  width: 100%;
  height: 480px;
  position: relative;
  margin: 15px auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #000;
  display: none;
  max-width: 100%; /* Ensures it doesn't overflow on mobile */
}

#barcode-scanner video,
#barcode-scanner canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* Ensures video fills the container */
  position: absolute;
  top: 0;
  left: 0;
}

.scan-region {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 10;
}

/* Animated corners for the scan area */
.scan-corners {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.scan-corners::before,
.scan-corners::after,
.scan-corners span::before,
.scan-corners span::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #4CAF50;
  border-style: solid;
  border-width: 0;
}

/* Top left corner */
.scan-corners::before {
  top: 0;
  left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
}

/* Top right corner */
.scan-corners::after {
  top: 0;
  right: 0;
  border-top-width: 3px;
  border-right-width: 3px;
}

/* Bottom left corner */
.scan-corners span::before {
  bottom: 0;
  left: 0;
  border-bottom-width: 3px;
  border-left-width: 3px;
}

/* Bottom right corner */
.scan-corners span::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
}

.scan-box {
  position: absolute;
  border: 2px solid green;
  box-sizing: border-box;
}

#scanning-status {
  text-align: center;
  padding: 10px;
  margin: 10px 0;
  color: white;
  border-radius: 4px;
  font-size: 14px;
}

#result-container {
  margin-top: 15px;
  padding: 15px;
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
  border-radius: 4px;
  display: none;
}

#result-text {
  font-size: 18px;
  font-weight: bold;
  word-break: break-all;
}

/* Mobile controls that only show in fullscreen mode */
.mobile-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: none;
}

.mobile-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@keyframes scan {
  0% {
    top: 20%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 20%;
  }
}
/* Responsive design for mobile */
@media (max-width: 768px) {
  #barcode-scanner-container {
    padding: 10px;
  }
  .scanner-options {
    flex-direction: column;
  }
  .btn {
    width: 100%;
    max-width: 250px;
    margin-bottom: 10px;
  }
  #barcode-scanner {
    height: 300px;
    max-height: 80vh; /* Ensures it fits in the viewport */
  }
}
/*2FA*/
.two-factor-setup-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.setup-steps {
  margin-top: 20px;
}

.step {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.step h3 {
  color: #0D8180;
  margin-top: 0;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.qr-code-svg {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-code-svg svg {
  max-width: 100%;
  max-height: 100%;
}

.qr-code-error, .qr-code-fallback {
  width: 200px;
  height: 200px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  padding: 20px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
}
.qr-code-error p, .qr-code-fallback p {
  margin: 5px 0;
  font-size: 14px;
}
.qr-code-error small, .qr-code-fallback small {
  font-size: 12px;
  color: #999;
}

.backup-codes {
  margin-top: 15px;
}

.backup-codes-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 10px;
  border-radius: 3px;
  margin-bottom: 15px;
}

.backup-codes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 15px 0;
  padding: 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.backup-code {
  font-family: monospace;
  font-weight: bold;
  padding: 5px;
  background-color: white;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 3px;
}

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

.btn {
  margin-right: 10px;
}

/*2FA*/
/*Verify 2FA*/
.two-factor-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.two-factor-header {
  text-align: center;
  margin-bottom: 30px;
}

.two-factor-header h2 {
  color: #058583;
  margin-bottom: 10px;
}

.two-factor-header p {
  color: #666;
  font-size: 1.4rem;
}

.auth-section {
  margin-bottom: 25px;
}

.verification-input {
  width: 100% !important;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.5em;
  transition: border-color 0.3s ease;
}

.verification-input:focus {
  outline: none;
  border-color: #058583;
  box-shadow: 0 0 0 2px rgba(5, 133, 131, 0.1);
}

.backup-input {
  width: 100% !important;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1.4rem;
  transition: border-color 0.3s ease;
}

.backup-input:focus {
  outline: none;
  border-color: #058583;
  box-shadow: 0 0 0 2px rgba(5, 133, 131, 0.1);
}

.verify-btn {
  width: 100%;
  padding: 12px;
  background-color: #058583;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.verify-btn:hover {
  background-color: #047471;
}

.verify-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.toggle-method {
  text-align: center;
  margin-top: 20px;
}

.toggle-method a {
  color: #058583;
  text-decoration: none;
  font-size: 1.3rem;
}

.toggle-method a:hover {
  text-decoration: underline;
}

.back-link {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.back-link a {
  color: #058583;
  text-decoration: none;
  font-size: 1.3rem;
}

.back-link a:hover {
  text-decoration: underline;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid #f5c6cb;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.security-icon {
  font-size: 3rem;
  color: #058583;
  margin-bottom: 15px;
}

/* Manual Entry Section for 2FA Setup */
.manual-entry-section {
  margin-top: 20px;
}
.manual-entry-section h4 {
  color: #333;
  margin-bottom: 10px;
}

.manual-key-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 15px;
  margin-top: 10px;
}
.manual-key-container label {
  display: block;
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
  margin-top: 10px;
}
.manual-key-container label:first-child {
  margin-top: 0;
}

.manual-key-field {
  background-color: white;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 5px 0 10px 0;
  font-family: "Courier New", monospace;
  font-weight: bold;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.manual-key-field .manual-key-text {
  font-size: 14px;
  letter-spacing: 1px;
  flex: 1;
}
.manual-key-field .btn-copy-manual-key {
  margin-left: 10px;
  flex-shrink: 0;
}

.manual-entry-instructions {
  background-color: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}
.manual-entry-instructions small {
  line-height: 1.4;
}

/* QR Code styling improvements */
.qr-code-image, .qr-code-svg {
  max-width: 300px;
  height: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
}

.qr-code-container {
  text-align: center;
  margin: 15px 0;
}

.qr-code-error {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
  text-align: center;
}

/*Verify 2FA*/
/* Job BoQ - Existing Styles */
.boq-icon-row-container {
  position: relative;
  margin-bottom: -1px; /* Overlap with table border */
  width: 100%; /* Match table width */
  max-width: 100%;
  overflow: hidden;
}

.boq-icon-row {
  display: table;
  width: 100%;
  table-layout: fixed; /* Force equal column widths to match table */
  border-bottom: 1px solid #ddd;
  background: transparent; /* Remove any background */
}

/* Create table-like cells for alignment */
.boq-icon-row > div {
  display: table-cell;
  vertical-align: middle;
  padding: 5px 0;
}

.icon-spacer {
  /* This should match the Quote + Order columns width */
}

.claim-icons {
  display: table-cell;
  min-width: 160px;
  text-align: center;
  white-space: nowrap;
}

.add-claim-icon {
  text-align: right; /* Align the add icon to the right */
  padding-right: 10px; /* Add some padding from the edge */
}

.claim-icons {
  display: table-cell;
  min-width: 160px;
  text-align: right;
  vertical-align: bottom;
  padding: 0 6px 4px 6px;
  white-space: nowrap;
}

.claim-icons .save-claim-icon {
  display: inline-flex !important;
}
.claim-icons .delete-claim-icon {
  display: inline-flex !important;
}
.claim-icons .edit-claim-icon {
  display: inline-flex !important;
}

.actionIcon {
  width: 16px;
  height: 16px;
  margin: 0 3px;
  cursor: pointer;
}

#jobBoQReport {
  margin-top: 0 !important;
}

#jobBoQReport thead tr:first-child th {
  text-align: center !important;
}

/* Job BoQ - Additional Claim Styles */
/* Editable claim column styles */
.claim-quantity-input {
  max-width: 50px;
  padding: 2px 4px;
  border: 1px solid #ccc;
  text-align: right;
  max-width: 60px;
}

.claim-quantity-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.3);
}

/* Claim value cells */
.claim-value-cell {
  text-align: right;
  font-weight: 500;
  min-width: 80px;
}

/* New claim cells highlight */
.new-claim-cell {
  background-color: #f5f5f5 !important;
}

.new-claim-header {
  background-color: #f5f5f5 !important;
}

/* Save/tick icon styling */
.save-claim-icon img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(98%) contrast(97%);
}

/* Claim total cells */
.claim-total-cell {
  font-weight: bold;
}

.claim-total {
  font-weight: bold;
  min-width: 80px;
}

/* Icon transitions */
.claim-icons a {
  transition: opacity 0.2s ease;
}

.claim-icons a:hover {
  opacity: 0.7;
}

#jobBoQReport > td.numericField, #supplierInvoicesDiv #jobBoQReport > td.amountColumn, #orderInvoiceItemsDiv #jobBoQReport > td.amountColumn {
  justify-content: right;
}

/* Last Claim Column Highlighting - Elegant Gray Gradient */
#jobBoQReport:not(.print-mode) thead tr:first-child th:nth-last-child(2)[data-claim-index] {
  filter: brightness(1.15) !important;
  border-top: 3px solid rgba(0, 0, 0, 0.25) !important;
  border-left: 3px solid rgba(0, 0, 0, 0.25) !important;
  border-right: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) thead tr:nth-child(2) th:nth-last-child(4)[data-claim-index] {
  filter: brightness(1.15) !important;
  border-left: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) thead tr:nth-child(2) th:nth-last-child(3)[data-claim-index] {
  filter: brightness(1.15) !important;
  border-right: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) tbody tr td:nth-last-child(4)[data-claim-index] {
  background: rgba(0, 0, 0, 0.03) !important;
  border-left: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) tbody tr td:nth-last-child(3)[data-claim-index] {
  background: rgba(0, 0, 0, 0.03) !important;
  border-right: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) tfoot tr td:nth-last-child(4)[data-claim-index] {
  filter: brightness(0.85) !important;
  font-weight: bold;
  border-left: 3px solid rgba(0, 0, 0, 0.25) !important;
  border-bottom: 3px solid rgba(0, 0, 0, 0.25) !important;
}
#jobBoQReport:not(.print-mode) tfoot tr td:nth-last-child(3)[data-claim-index] {
  filter: brightness(0.85) !important;
  font-weight: bold;
  border-right: 3px solid rgba(0, 0, 0, 0.25) !important;
  border-bottom: 3px solid rgba(0, 0, 0, 0.25) !important;
}

/* Print styles */
@media print {
  /* Hide icon row when printing */
  .boq-icon-row-container {
    display: none !important;
  }
  /* Remove ONLY the last claim highlighting thick borders for print */
  #jobBoQReport thead tr:first-child th:nth-last-child(2)[data-claim-index] {
    border-top: 1px solid #bbb !important;
    border-left: 1px dotted #bbb !important;
    border-right: 1px dotted #bbb !important;
    filter: none !important;
  }
  #jobBoQReport thead tr:nth-child(2) th:nth-last-child(4)[data-claim-index] {
    border-left: 1px dotted #bbb !important;
    filter: none !important;
  }
  #jobBoQReport thead tr:nth-child(2) th:nth-last-child(3)[data-claim-index] {
    border-right: 1px dotted #bbb !important;
    filter: none !important;
  }
  #jobBoQReport tbody tr td:nth-last-child(4)[data-claim-index] {
    border-left: 1px dotted #bbb !important;
  }
  #jobBoQReport tbody tr td:nth-last-child(3)[data-claim-index] {
    border-right: 1px dotted #bbb !important;
  }
  #jobBoQReport tfoot tr td:nth-last-child(4)[data-claim-index] {
    border-left: 1px dotted #bbb !important;
    border-bottom: 1px dotted #bbb !important;
    filter: none !important;
  }
  #jobBoQReport tfoot tr td:nth-last-child(3)[data-claim-index] {
    border-right: 1px dotted #bbb !important;
    border-bottom: 1px dotted #bbb !important;
    filter: none !important;
  }
}
/* Logo Upload Component Styles */
.logo-upload-stacked {
  display: inline-block;
  vertical-align: top;
}
.logo-upload-stacked .logo-preview-block {
  margin-bottom: 10px;
}
.logo-upload-stacked .logo-preview-block .logo-image-block {
  max-width: 300px;
  max-height: 90px;
  border: 1px solid #ccc;
  padding: 5px;
  background-color: white;
  display: block;
}
.logo-upload-stacked .logo-preview-block .logo-error-message-block {
  color: #666;
  font-style: italic;
  margin-top: 5px;
}
.logo-upload-stacked .file-input-block {
  margin-top: 5px;
}
.logo-upload-stacked .file-input-block input[type=file] {
  width: auto;
}
.logo-upload-stacked .logo-buttons-block {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.logo-upload-stacked .logo-buttons-block .logo-btn {
  padding: 4px 12px;
  font-size: 11px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
}
.logo-upload-stacked .logo-buttons-block .logo-btn:hover {
  background-color: #e8e8e8;
}
.enhanced-scanner {
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.enhanced-scanner .scanner-header h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5em;
}
.enhanced-scanner .scanner-options {
  margin-bottom: 20px;
}
.enhanced-scanner .scanner-options .button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 15px;
}
.enhanced-scanner .scanner-options .quantity-input {
  text-align: center;
  margin: 15px 0;
}
.enhanced-scanner .scanner-options .quantity-input label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #495057;
}
.enhanced-scanner .scanner-options .quantity-field {
  width: 80px;
  text-align: center;
}
.enhanced-scanner .scanner-options .camera-controls {
  text-align: center;
  margin: 15px 0;
}
.enhanced-scanner .scanner-options .camera-controls label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
}
.enhanced-scanner .scanner-options .camera-dropdown {
  padding: 10px 15px;
  border: 2px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  min-width: 200px;
  max-width: 100%;
}
.enhanced-scanner .btn.pulse {
  animation: pulse 1s infinite;
}
.enhanced-scanner .scanner-viewport {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.enhanced-scanner .scanner-viewport video {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}
.enhanced-scanner .scanner-viewport .scan-region {
  position: relative;
  width: 100%;
  height: 100%;
}
.enhanced-scanner .scanner-viewport .drawingBuffer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.enhanced-scanner .status-display {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  margin: 15px 0;
  border-left: 4px solid #007bff;
}
.enhanced-scanner .result-section {
  background: #d4edda;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #c3e6cb;
}
.enhanced-scanner .result-section .result-text {
  font-size: 18px;
  font-weight: bold;
  color: #155724;
  margin: 10px 0;
}
@media (max-width: 768px) {
  .enhanced-scanner {
    padding: 10px;
  }
  .enhanced-scanner .scanner-header h2 {
    font-size: 1.3em;
  }
  .enhanced-scanner .scanner-options .button-group {
    flex-direction: column;
    align-items: center;
  }
  .enhanced-scanner .scanner-options .camera-dropdown {
    width: 100%;
  }
  .enhanced-scanner .btn {
    width: 100%;
    max-width: 250px;
    margin-bottom: 10px;
  }
  .enhanced-scanner .scanner-viewport {
    min-height: 250px;
  }
  .enhanced-scanner .scanner-controls .btn {
    display: block;
    width: 90%;
    max-width: 250px;
    margin: 5px auto;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}