/*
 * Base structure
 */




:root {
    --mox-brand-lightblue: #bed9f6;
    --mox-login-darkblue: #082f64;
    --primary-color: hsl(356, 100%, 69%);
    --secondary-color: hsl(142, 80%, 40%);
}


.jqx-grid-columngroup-header
{
  font-weight: 700;
}

html, body {
  height: 100%;
}

body {
  /* Move down content because we have a fixed navbar that is 45px tall */
  padding-top: 50px;
  /* Leave space for fixed footer */ 
  padding-bottom: 20px;
  /* minimum height for entire application */ 
  min-height: 800px;
  position: relative;
  /* make sure IE doesn't use overlapping scrollbars */
  -ms-overflow-style: scrollbar !important;
  /* override the font-family setting from bootstrap */
  font-family: sans-serif;
}

/* container div for hosting all of the application pages - fits between nav bar and footer */
.application-host {
  width: 100%; 
  min-width: 1400px;
  position: absolute; 
  top: 50px;
  bottom: 20px;
}

.banner {
  visibility: hidden;
  display: none;
  height: 20px;
  width: 100%;
  font-size: 15px;
  text-align: center;
  white-space: pre;
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: yellow;
  border-width: 1px;
  border-style: none solid solid;
  border-color: #A4BED4 transparent;
  overflow: hidden;
}

.system-message {
  visibility: hidden;
  display: none;
  height: 30px;
  width: 100%;
  font-size: 1.4em;
  text-align: center;
  white-space: pre;
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: whitesmoke;
  border-width: 1px;
  border-style: none solid solid;
  border-color: #A4BED4 transparent;
  vertical-align: middle;
  overflow: hidden;
}

/* only banner on */
body.banner-on {
  /* increase padding by 20px to make room for banner */
  padding-top: 70px;
}

.banner-on .application-host {
  /* move down and shrink height by 20px to make room for banner */
  /* height: calc(100% - 90px); /* 100 percent - (navbar height + footer height) */
  top: 70px;
}

/* only system message on */
body.system-message-on {
    /* increase padding by 20px to make room for banner */
    padding-top: 70px;
}

.system-message-on .application-host {
    /* move down and shrink height by 20px to make room for banner */
    /* height: calc(100% - 90px); /* 100 percent - (navbar height + footer height) */
    top: 80px;
}

/* both system message and banner on at same time */
body.banner-on.system-message-on {
    /* increase padding by 20px to make room for banner */
    padding-top: 100px;
}

.banner-on.system-message-on .application-host {
    /* move down and shrink height by 20px to make room for banner */
    /* height: calc(100% - 90px); /* 100 percent - (navbar height + footer height) */
    top: 100px;
}

.banner-on .banner {
  visibility: visible;
  display: block;
}

.system-message-on .system-message {
    visibility: visible;
    display: block;
}

footer {
  /* make sure the footer sticks to the bottom when scrolling */
  position: fixed;
  bottom: 0;
  /* Set the fixed height of the footer here */
  height: 20px;
  width: 100%;
  z-index: 2500;
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: #E0E9F5;
  font-size: 12px;
  margin-bottom: 0;
  border-width: 1px 0 0 0;
  border-color: #A4BED4;
  border-style: solid;
}

.footer-msg {
  height: 100%;
  visibility: hidden;
  overflow: hidden; 
  white-space: pre; 
  text-align: center; 
  text-overflow: ellipsis; 
  padding: 0 10px; 
  background-color: lightgoldenrodyellow;
}

.footer-msg-on.footer-msg {
  visibility: visible;
}

.mb-preformat {
    white-space: pre;
}

.date-filter-picker {
    background: #e0e9f5;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #a4bed4;
    height: 33px;
    border-radius: 3px 4px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

div.mb-side-nav {
   display: inline-block; 
   height: calc(100% - 5px);
   vertical-align: top; 
   border-right: 1px solid #9FA5AB;
   box-shadow: 0px 3px 4px 0.2px #9FA5AB;
   background-color: #F9F9F9;
}

div.mb-side-nav-header {
   height: 30px;
   line-height: 30px;
   margin: 0;
   padding: 0; 
   font-size: 16px;
   text-align: center;
   border-bottom: 2px solid #ccc;
}

div.mb-side-nav-menu {
   height: calc(100% - 30px);
}

div.mb-side-nav-menu .jqx-panel {
   border: none;
}

div.mb-side-nav-menu .jqx-panel .jqx-widget-content {
   background-color: #f9f9f9;
}

div.mb-side-nav ul {
   list-style: none;
   margin: 0;
   padding: 0; 
   background-color: #fff;
}

div.mb-side-nav ul li {
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #ccc;
   color: #428bca; 
   cursor: pointer; 
}

div.mb-side-nav ul li:hover {
  background-color: #E0E9F5;  
  border-color: #A4BED4;   
}

div.mb-side-nav ul li.active > a,
div.mb-side-nav ul li.active > a:hover,
div.mb-side-nav ul li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #E0E9F5; 
}

div.mb-side-nav ul li a { 
   text-decoration: none; 
   display: block; 
   padding: 3px 10px 5px 20px;
}

/* override the bootstrap style for labels */
label {
  margin-bottom: 0px;
  font-weight: normal;
}

/* add an asterisk after the label text for inputs */
label.required {
  /* constrain the absolutely positioned pseudo */
  position: relative;
  /* create some space for the '*' */
  margin-right: .94em;
}

label.required:after {
  content:"*";
  color: red;
  font-family: "FontAwesome";
  font-size: 1.2em;
  display: block;
  visibility: hidden;
  position: absolute;
  right: -.6em;
  top: 0;
}

/* only show the asterisk when a parent element has the show-required class */
.show-required label.required:after {
    visibility: visible;
}

/* version for displaying symbol keys*/
label.mb-required-symbol:before {
  content:"*";
  color: red;
  font-family: "FontAwesome";
  font-size: 1.2em;
  display: block;
  position: absolute;
  left: 0px;
  top: 0;
}

/* control the styling of jqxTab tabsheets and tab labels */
.mb-tabsheet-list li:first-of-type {
  margin-left: 20px;
}

.mb-tab-count
{
  border-radius: 5px;
  background-color: #F6FBA9;
  padding: 0px 5px;
}

.editor-form-table
{
    margin-top: 10px;
    margin-bottom: 10px;
    table-layout: fixed;
}

.editor-form-table td,
.editor-form-table tr
{
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    vertical-align:middle;
}

.editor-form-table .mb-row
{
    height: 20px;
    line-height: 20px;
    border-spacing: 0px;
    border-collapse: collapse;
    vertical-align: middle;
}

.editor-form-table .mb-cell
{
    padding: 2px;
}

.display-form-table
{
    margin-top: 10px;
    margin-bottom: 5px;
    table-layout: fixed;
}

.display-form-table .mb-cell,
.display-form-table .mb-row
{
    height: 20px;
    line-height: 20px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    vertical-align: middle;
}

.display-form-table.condensed
{
    margin: 0;
}

.display-form-table.condensed .mb-cell,
.display-form-table.condensed .mb-row
{
    font-size: 12px;
    height: 16px;
    line-height: 18px;
}

table.data-grid-table {
    border-style: hidden;
    margin: 0px;
    table-layout: fixed;
}

table.data-grid-table th
{
    padding: 3px;
    border: 1px solid #a4bed4;
}

table.data-grid-table td,
table.data-grid-table tr
{
    padding: 3px;
    border: 1px solid #a4bed4;
}

table.data-grid-table.condensed
{
    margin: 0;
    font-size: 12px;
    line-height: 10px;
}

.display-label 
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #505050;
    font-weight: 200;
}

.highlight-warning-label 
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    font-weight: 200;
    padding: 1px;
    margin-bottom: 0px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* user defined label style */
.user-label 
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.password-rule{
    font-style: italic;
    text-align: left; 
    white-space: pre-wrap;
    color: #500000;
}

.accordion-heading 
{
    cursor: pointer;
    background-color: #E0E9F5;
    padding: 2px;
    border-color: #A4BED4;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-top-width: 1px;
    border-top-style: solid;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.accordion-inner{
    padding: 2px;
}

.accordion-toggle {
  display: table-row;
}

.accordion-toggle i {
  padding-left: 3px;
  padding-right: 5px;
  display: table-cell;
  width: 16px;
}

.note-type-label {
    display: table-cell;
    white-space: nowrap;
    padding-right: 10px;
    width: 150px
}

.note-text-excerpt 
{
    display: table-cell;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #505050;
    font-weight: 200;
}

.note-text-view {
    border-style: none;
    margin: 5px;
    white-space: pre-wrap;
}

.note-text-edit {
    width: 100%;
    border-style: solid;
    border-color: #A4BED4; 
    border-width: 1px;
    border-radius: 3px;
}

.note-text-edit:focus {
    border-color: #E49747;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
}

.notes-widget-container {
    padding: 4px 0px 2px 0px;
}

/* style button element as a link (actually like a menu button) */
button.link {
    overflow: visible; /* Shrinkwrap the text in IE7- */
    margin: 0;
    padding: 0px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #428bca;
    background: transparent;
    font: inherit; /* Inherit font settings (doesn’t work in IE7-) */
    line-height: 13px;
    text-decoration: none;
    cursor: pointer; /* Buttons don’t make the cursor change in all browsers */
    -moz-user-select: text; /* Make button text selectable in Gecko */
}

button.link:hover, button.link:focus {
    color: #2A6496;
    border: 1px solid;
    border-color: #a4bed4;
    background-color: #cfdde9;
}

button.link:focus {
    outline-offset: -1px;
    outline-style: dotted;
    outline-width: 1px;
}        

/* Remove mystery padding in Gecko browsers. See https://bugzilla.mozilla.org/show_bug.cgi?id=140562  */
button.link::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mox-line-counter {
    padding-top: 3px !important;
}

.mox-glyph-button
{
    height: 20px;
    margin: 1px 1px;
    padding: 1px 3px 0px 3px;
    border-width: 1px; 
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-style: solid;
    border-radius: 3px;
	border-color: #a4bed4;
	background-color:#ffffff;
    text-decoration: none;
    cursor: pointer; /* Buttons don’t make the cursor change in all browsers */
}

.mox-glyph-button:focus {
    border-color: #477396;
}

.mox-glyph-button:hover {
    border-color: #a4bed4;
    background-color:#cfdde9;
}

.mox-glyph-button:active {
    border-color: #5e8cb3;
    background-color:#cfdde9;
}

.mox-glyph-button:disabled {
    color: #aaa;
    border-color: #aaa;
    background-color: #f5f5f5;
}

table.mox-quote-table {
  table-layout: fixed;
  border-collapse: collapse;
  border-top-style: hidden; 
  /*border-style: hidden;             TODO: header needs only border-top-style hidden and tbody needs border-style hidden*/
  width: auto;
  margin: 0px;
}

table.mox-quote-table > thead {
  background-color: #e0e9f5;
  border-top-style: hidden;
}

table.mox-quote-table > thead > tr {
  height: 24px;
}

/*table.mox-quote-table,*/
table.mox-quote-table > thead > tr > th,
table.mox-quote-table > tbody > tr > td {
  border: 1px solid #a4bed4;
  text-align: left;
  padding: 0px;
}

table.mox-quote-table > tbody > tr.mox-service-item {
 min-height: 24px;
 /* SGP MBCMS-359 bold total line font-weight: bold; */
 
}

table.mox-quote-table > tbody > tr.mox-service-item-total {
 min-height: 24px;
 font-weight: bold;
}

table.mox-quote-table > thead > tr > th > div,
table.mox-quote-table > tbody > tr > td > div {
  padding: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.mox-quote-table > tbody > tr.mox-service-item > td:nth-child(1) > div {
    padding: 1px 3px;
}

table.mox-quote-table > tbody > tr:hover {
 background-color: #f5f5f5;
}

table.mox-line-item-table {
  table-layout: fixed;
  border-collapse: collapse;
  border-top-style: hidden; 
  width: auto;
  margin: 0px;
}

.mox-quote-table table.mox-line-item-table {
  border-style: hidden;
}

table.mox-line-item-table > thead.mox-line-item {
  background-color: #e0e9f5;
}

table.mox-line-item-table > thead > tr {
  height: 24px;
}

table.mox-line-item-table > thead > tr > th,
table.mox-line-item-table > tbody > tr > td {
  border: 1px solid #a4bed4;
  text-align: left;
  padding: 0px;
}

table.mox-line-item-table > tbody > tr {
  min-height: 24px;
}

table.mox-line-item-table > thead > tr > th > div,
table.mox-line-item-table > tbody > tr > td > div {
  padding: 3px;
}

table.mox-line-item-table > thead > tr > th div,
table.mox-line-item-table > tbody > tr > td div,
table.mox-line-item-table > thead > tr > th div span,
table.mox-line-item-table > tbody > tr > td div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.mox-line-item-table > tbody > tr > td:nth-child(1) > div {
    padding: 1px 3px;
}

.mox-line-item-table > tbody > tr:hover {
 background-color: #f5f5f5;
}

.mox-flex {
    display: flex;
}


.mox-flex-form {
  width: 100%; 
  margin: 0px;
  line-height: 24px; 
}

div.mox-flex-row {
    display: flex;
    padding: 2px 0px;
}

div.mox-flex-cell {
    padding: 0px 2px;
}

/* used as the outer container for system table edtitors and similar pages */
.mox-flex-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border: none;
    padding: 5px; 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

/* used inside mox-flex-column container for a div that grows to fill remaining vertical space */
.mox-flex-grow-container {
    flex: 1 1 200px;
    width: 100%;
}

/* lightweight container simulating look of jqxPanel */
.mox-display-panel {
  line-height: 22px;
  padding: 10px;
  margin: 0;
  border: 1px solid #a4bed4;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: border-box;
}

/* simulate a read-only text input for display of field values */
.mb-display-field {
  width: 100%;
  height: 22px;
  line-height: 22px;
  padding: 0 0 0 2px;
  margin: 0;
  border: 1px solid #a4bed4;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: content-box;
}

/* notification format based on bootstrap alert */
.notification {
  padding: 4px;
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
}

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

.notification-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.notification-success hr {
  border-top-color: #c9e2b3;
}
.notification-success .notification-link {
  color: #2b542c;
}
.notification-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.notification-info hr {
  border-top-color: #a6e1ec;
}
.notification-info .notification-link {
  color: #245269;
}
.notification-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.notification-warning hr {
  border-top-color: #f7e1b5;
}
.notification-warning .notification-link {
  color: #66512c;
}
.notification-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.notification-danger hr {
  border-top-color: #e4b9c0;
}
.notification-danger .notification-link {
  color: #843534;
}

/* styles for a label with a green check mark and green text */
.mb-checkbox-label {
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 2px 2px 20px;
}

.mb-checkbox-label label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: #3f7d3f;
}

.mb-checkbox-label label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
}

.mb-checkbox-label label::after {
    color: #fff;
    font-family: 'FontAwesome';
    content: "\f00c";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
}

/* styles for a label with a red X circle and red text */
.mb-times-circle-label {
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 2px 2px 20px;
}

.mb-times-circle-label label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: #ba0000;
}

.mb-times-circle-label label::before {
    background-color: #ba0000;
    border-color: #fc0808;
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #ba0000;
    border-radius: 50%;
}

.mb-times-circle-label label::after {
    color: #fff;
    font-family: 'FontAwesome';
    content: "\f00d";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 1px;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
}

/* styles for a label with a yellow ellipsis in a circle and black text */
.mb-pending-label {
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 2px 2px 20px;
}

.mb-pending-label label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: #d79700;
}

.mb-pending-label label::before {
    background-color: transparent;
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
}

.mb-pending-label label::after {
    color: #ffb400;
    font-family: 'FontAwesome';
    content: "\f071";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    /*padding-left: 3px;
    padding-top: 1px;*/
    font-size: 1.2em;
}

/* styles for a label with a yellow ellipsis in a circle and black text */
.mb-next-label {
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 2px 2px 20px;
}

.mb-next-label label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: #000799;
}

.mb-next-label label::before {
    background-color: transparent;
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #000799;
    border-radius: 50%;
}

.mb-next-label label::after {
    color: #000799;
    font-family: 'FontAwesome';
    content: "\f04b";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 6px;
    padding-top: 2px;
    font-size: .8em;
}

/* styles for a label with a white "I" in a blue circle and blue text */
.mb-info-label {
  margin-bottom: 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 2px 2px 20px;
}

.mb-info-label label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: #000799;
}

.mb-info-label label::before {
    color: #000799;
    font-family: 'FontAwesome';
    content: "\f05a";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    top: 0;
    margin-left: -20px;
    margin-top: -3px;
    font-size: 18px;
}

/* css styles for the menu bar that gets embedded in the jqxGrid toolbar */
.grid-menu-bar {
  border: none; 
  width: 100%; 
  height: 20px; 
  line-height: 20px;
}

.grid-menu-bar .fa {
  line-height: inherit;
  vertical-align: middle;
  font-size: 14px;
}

.grid-menu-bar .fa-repeat {
  color: green;
  float: right; 
  margin: 0px 5px; 
}

.grid-menu-bar .fa-cog {
  color: black;
  margin-right: 4px;
}

.grid-menu-bar button {
  margin: 2px 10px 0px;
}

.grid-menu-bar .jqx-checkbox {
  margin: 2px 10px 0px 0px;
  color: #428bca;
  line-height: 14px; 
  float: left; 
  padding: 0px 4px;
  border: 1px transparent;
  border-radius: 3px;
}

.grid-menu-bar .jqx-checkbox:hover, .grid-menu-bar .jqx-checkbox:focus {
    color: #2A6496;
    background-color: #cfdde9;
}

.grid-menu-bar a.dropdown-toggle  {
  margin: 2px 10px 0px 0px;
  color: #428bca;
  line-height: 12px !important; 
  height: 15px;
  padding: 0px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.grid-menu-bar .dropdown-toggle:hover, .grid-menu-bar .dropdown-toggle:focus {
    color: #2A6496;
    border: 1px solid;
    border-color: #a4bed4;
    background-color: #cfdde9;
}

/* menu icon for drop down menu button */
.grid-menu-bar .dropdown-toggle .fa {
    line-height: inherit;
    vertical-align: baseline;
    font-size: 12px;
    padding-right: 5px;
}

/* caret icon for drop down menu button */
.grid-menu-bar .dropdown-toggle .caret {
    margin-left: 5px;
    vertical-align: baseline;
}

.grid-menu-bar ul.dropdown-menu  {
  min-width: initial;
}

/* override css from jqx-grid-toolbar */
.grid-menu-bar .dropdown-menu a:link, .grid-menu-bar .dropdown-menu a:visited  {
  margin: 0px;
  color: #333;
  font-size: 13px;
  line-height: 18px !important; 
  height: auto !important;
  padding: 3px 20px;
}

/* override css from jqx-grid-toolbar */
.grid-menu-bar .dropdown-menu a:hover, .grid-menu-bar .dropdown-menu a:focus  {
  color: #ffffff;
}

/* override bootstrap styles */
.grid-menu-bar .open > a.dropdown-toggle, .grid-menu-bar .open > a.dropdown-toggle:hover, .grid-menu-bar .open > a.dropdown-toggle:focus {
    color: #2A6496;
    border: 1px solid;
    border-color: #a4bed4;
    background-color: #cfdde9;
}

/* styles for the Custom Views dropdown menu */
.custom-view-menu-btn {
    float: left;
    margin: 0px 10px;
    list-style: none;
    padding-left: 0;
}

.modal-footer .jqx-button {
    margin: .25rem;
}

/* div containing a jqxGrid with square corners and top border only */
.jqxgrid-box-wrapper
{
    height: 100%; 
    padding: 2px 0px 4px 0px;
    position: relative;
}
.jqxgrid-box-wrapper > div
{
    border-left: 0px none; 
    border-right: 0px none; 
    border-bottom: 0px none; 
    border-radius: 0px;
}
/* div containing a jqxGrid with round corners */
.jqxgrid-rnd-wrapper
{
    height: 100%; 
    padding: 2px 2px 2px 0px;
}

/* grid settings flyout when used with the round style grid */
.gridsettings-rnd-flyout
{
    height: 100%; 
    float: left;
    display: none; 
    margin-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* grid settings flyout when used with the box style grid */
.gridsettings-box-flyout
{
    height: 100%; 
    float: left;
    display: none; 
    margin: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.gridsettings-box-flyout > div
{
    border-left: 0px none; 
    border-bottom: 0px none; 
    border-radius: 0px;
}

.gridsettings-title-bar {
  height: 19px; 
  line-height: 19px;
  width: 100%; 
  padding: 0px; 
  background-color: #E0E9F5;  
  text-align: center;
  vertical-align:middle;
}

.gridsettings-title-bar span {
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 1.4em;
  width: 20px;
}

.gridsettings-button-bar {
  height: 26px; 
  width: 100%; 
  padding: 0px; 
  border-top: 1px solid #a4bed4; 
}

.gridsettings-button-bar button {
  min-width: 50px; 
  margin: 5px 5px 0px;
}

.gridsettings-column-list {
  height: calc(100% - 44px);
  width: 100%; 
  margin-left: -1px;
  border-radius: 0px;
} 

.gridsettings-column-list .jqx-listbox {
  float: left; 
  margin: 0px;
  border-radius: 0px;
} 

/* default styles for inactive grid rows (for grids that don't use custom views) */
.mb-grid-row-inactive:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected),
.jqx-widget .mb-grid-row-inactive:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: rgb(96, 0, 0) !important;
    background-color: rgb(239, 239, 239) !important;
}

/* styles for all view content between the application header and footer */
.inner-view-container
{
    height: 100%; 
    width: 100%; 
    border: none; 
    padding: 5px;  /*6px 8px 6px 6px;*/
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

/* div containing a jqxMenu used as a toolbar */
.jqxmenu-rnd-wrapper
{
    padding: 2px 2px 2px 0px;
}

/* div containing a jqxTabs with round corners */
.jqxtabs-rnd-wrapper
{
    height: 100%; 
    padding: 2px 2px 2px 0px;
    position: relative;
}
.jqxtabs-rnd-wrapper > div
{
    border-radius: 3px;
}
.jqxtabs-rnd-wrapper:after {
   clear: both;
}

/* for divs containing a grid widget */
.grid-container
{
    padding: 2px 4px 4px 2px;
}

/* for divs containing a tabsheet widget */
.tabsheet-container
{
    padding: 0px 2px 0px 0px;
}

.tabsheet-wrapper > .jqx-tabs
{
  border: none;
  border-radius: 0px;
}

/* for divs containing a textarea widget (the widget also gets a -3 margin in the jqx classes) */
.textarea-container
{
    padding: 4px 2px 2px 4px;
}

/* don't allow resizing the text area */
.textarea-container textarea {
    resize: none;
}

textarea.jqx-input
{
    overflow: auto;
    border-width: 1px;
    margin: -3px -3px -3px -3px;
}

/* override the standard jqWidget fonts */
.jqx-widget,
.jqx-widget-content
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

/* override styles from scaffolding.less and vendor-prefixes.less that mess up jqWidgets sizing */
.jqx-grid-cell-filter-row, .jqx-grid-cell-filter-row div, .jqx-grid-cell-filter-row input {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* fix for filter row formatting in Firefox and Chrome - they use textarea, IE uses text for input */
.jqx-grid-cell-filter-row input[type=textarea].jqx-input {
    min-height: 16px;
    min-width: 16px;
    margin: 0px;
    border-width: 1px;
    border-style: solid;
    font-size: 13px;
    padding: 0px;
    padding-left:3px;
    padding-right: 3px;
}

/* condensed font size for jqWidgets controls */
.condensed .jqx-widget,
.condensed .jqx-widget-content
{
    font-size: 11px;
}

/* jqx grid styles for use with reference table editors */
.grid-cell-disabled {
    color: #c6c5c6;
    background-color: #f1f1f1;
}

.grid-cell-editrow {
    background-color: #ffffff;
}

.grid-cell-error {
    color: #F00 !important;
}

.loader {
    margin: 6px 8px 4px 8px;
    visibility: hidden;
}

.loader.active {
    visibility: visible;
}

span.title {
    background: url(/content/images/icon.png) no-repeat left center;
    -moz-background-size: 45px;
    -o-background-size: 45px;
    -webkit-background-size: 45px;
    background-size: 45px;
}

.page-splash
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.page-splash-message {
    position: relative;
	top: 45%;
	top: calc(50% - 10px);
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
	transform: translateY(-50%);
    margin: 0;
    padding: 0;
    text-align: center;
}

.page-progress-bar {
    margin: 10% 30% 0 30%;
}

.toastr {
    font-weight: normal;
}

.toastr-info
{
    background-color: #2f96b4;
}

.toastr-top-right {
    bottom: 50px;
}

/* highlight focused jqWidget input contols with border color and halo */
.jqx-fill-state-focus {
    border-color: #E49747;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
}

textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* IE 8+ */
}

.navbar-default {
    background-color: #E0E9F5;
}

.navbar-fixed-top {
    top: 0;
    min-width: 1400px;
    border-width: 1px 0;
    z-index: 5000;
    border-color: #A4BED4;
    position: fixed;
    right: 0;
    left: 0;
}
.navbar-fixed-bottom {
    bottom: 0;
    min-width: 1400px;
    margin-bottom: 0;
    border-width: 1px 0;
    z-index: 2500;
    border-color: #A4BED4;
    position: fixed;
    right: 0;
    left: 0;
}

.navbar{
    background-color: #E0E9F5; 
    min-height: 44px;
    margin-bottom: 0px;  
}

.navbar-brand {
    float: left;
	height: 26px;
    margin: 0;
    padding: 1px 10px 0px 10px;
}	

.mb-nav-tabs {
    list-style: none;
    border-bottom: 1px solid #A4BED4;
    cursor: pointer; 
    float: left !important;
    padding-left: 0px;
    margin-bottom: 0px;
}

.mb-nav-tabs > li {
  height: 24px;
  float: left;
  min-width: 50px;
  margin-bottom: -1px;
  margin-right: 2px;
}

.mb-nav-tabs > li > a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 1px; 
    padding-bottom: 1px;   
    line-height: 20px;
    border: 1px solid transparent;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.mb-nav-tabs > li:hover > a {
  background-color: #E0E9F5;  
  border-color: #A4BED4;   
  border-bottom-color: transparent;
}

.mb-nav-tabs > li.active > a,
.mb-nav-tabs > li.active > a:hover,
.mb-nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #E0E9F5;
  border: 1px solid #A4BED4;
  border-bottom-color: transparent;
}

.mb-nav-tab-item {
    color: #428BCA;
    font-size: 14px;
}

.sub-nav {
    display: none;
}

.sub-nav.active {
  display: block;
}

.mb-nav-tabs:hover > li.active > a {
  background-color: #FFFFFF;     
  border-bottom: 1px solid #A4BED4;   
}

.mb-nav-tabs > li.active:hover > a {
  background-color: #E0E9F5;      
  border-bottom-color: transparent;
}

/* override the theme for vertical style menu backgrounds */ 
.jqx-menu-vertical,
.jqx-menu-dropdown
{
    background-color: #FFFFFF;
	border-color: #E49747; 
}

/* MOX CMS navigation menu bar - wraps all nav tabs and sub-nav menus */
.mb-navbar 
{
    position: relative;
}

/* navigation bar for second level navigation items */
.sub-navbar
{
    clear: both; 
    height: 25px;
    margin: 0px; 
    padding: 0px; 
    overflow: hidden; 
    color: #428bca;
    background-color: #E0E9F5;
    border-width: 1px;
    border-style: none solid solid;
    border-color: #A4BED4 transparent;
}

.sub-nav 
{
    position: absolute;
    left: 160px;
    right: 0px;
    top: 26px;
    clear: both; 
    margin: 0; 
    overflow: hidden; 
    list-style-type: none; 
    padding-left: 0;
    color: #428BCA;
}

.banner-on .sub-nav {
  /* move down by 20px to make room for banner */
  top: 46px;
}

.system-message-on .sub-nav {
    /* move down by 20px to make room for system message */
    top: 56px;
}

.system-message-on.banner-on .sub-nav {
    /* move down by 40px to make room for system message and banner */
    top: 76px;
}

.sub-nav > li {
    float: left; 
    margin: 0px;
    padding: 0px;
    line-height: 24px;
    cursor: pointer; 
}

.sub-nav > li:hover {
    color: #2A6496;
    background-color: #cfdde9;
}

.sub-nav > li.active {
    line-height: 25px;
    color: #FFF;
    background: linear-gradient(to top, #0B4669 0%, #1275AE 50%, #1794DC 51%, #1691D8 78%, #98D2F4 100%) repeat scroll 0% 0% transparent;
}

.sub-nav > li > a {
    padding: 1px 15px 2px 15px;
    line-height: 13px;
    font-size: 13px;
    color: inherit;
    background: transparent;
    text-align: center;
    text-decoration: none;
}

/* dropdown menu for the top level navigation tabs */
.mb-nav-dropdown 
{
    display: none;
    z-index: 5000;
    position: absolute;
    top: 24px;
    clear: both; 
    margin: 0; 
    overflow: hidden; 
    list-style-type: none; 
    padding-left: 0;
    color: #428BCA;
    background-color: #ffffff;
    border: 1px solid #A4BED4;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px 1px rgba(128,128,128,1);
    -moz-box-shadow: 5px 5px 5px 1px rgba(128,128,128,1);
    box-shadow: 5px 5px 5px 1px rgba(128,128,128,1);
}

.banner-on .mb-nav-dropdown {
  /* move down by 20px to make room for banner */
  top: 44px;
}

.system-message-on .mb-nav-dropdown {
    /* move down by 20px to make room for system message */
    top: 54px;
}

.system-message-on.banner-on .mb-nav-dropdown {
    /* move down by 40px to make room for system message and banner */
    top: 74px;
}

.mb-nav-dropdown > li {
    margin: 0px;
    padding: 0px;
    line-height: 26px;
    cursor: pointer; 
}

.mb-nav-dropdown > li:hover {
    color: #2A6496;
    background-color: #cfdde9;
}

.mb-nav-dropdown > li > a {
    display:block;
    line-height: 26px;
    height: 26px;
    width: 100%;
    padding: 0px 15px;
    font-size: 14px;
    color: inherit;
    background: transparent;
    text-decoration: none;
}

/* special styling for the user menu dropdown button on the top navbar */
.mb-nav-user-dropdownbutton {
    font-size: 14px;
}

.mb-nav-user-dropdownbutton a:link, .mb-nav-user-dropdownbutton a:visited {
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
    line-height: 14px;
}

.mb-nav-user-dropdownbutton > li {
    line-height: 26px;
}

.mb-dropdownbutton {
    float: left; 
    margin-left: 8px; 
    margin-top: 2px; 
    margin-right: 8px;
}

.mb-dropdownbutton div.jqx-dropdownlist-content {
    padding-top: 3px;
}

.mb-dropdownbutton-content {
    padding: 2px;
 }

.mb-dropdownbutton-content div.jqx-button {
    margin-top: 2px;
}

.mb-dropdownbutton-content div.jqx-button img {
    float: left; 
    margin-left: 4px; 
    margin-right: 8px;
}

.mb-dropdownbutton-content div.jqx-button div {
    text-align: left; 
 }

.float-center {
  float: right;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.float-center > .subnav {
  position: relative;
  left: 50%;
}

.nav-pills > li {
    cursor: pointer; 
}

#dropdownNavMenu {
    padding-top: 4px;
    border: none;
    float: none;
    background-color: transparent;
}
	
#dropdownNavMenu > ul {
    padding: 0;
    border: none;
    float: none; 
}

#dropdownNavMenu > ul > li {
    padding: 0;
    border: none;
    width: 100%;
    color: #428bca;
    height: 16px;
}

.mb-hidden {
    visibility: hidden;
}

.mb-tbl {
  display: table;
  table-layout: fixed;
}
.mb-row {
  display: table-row;
}

.mb-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.mb-row > span {
  padding-right: 10px;
}

.mb-receiving-input .mb-row .jqx-checkbox {
  margin-top: 4px;
}	
.mb-receiving-input span.mb-cell  {
  min-width: 80px;
}
.mb-receiving-input div.jqx-button {
  height: 16px;
  padding-left: 6px; 
  padding-right: 6px; 
  margin: 8px;
}
.mb-receiving-input div.jqx-button img {
  float: left; 
  margin-right: 5px;
}
.mb-receiving-input .jqx-button div {
  float: left; 
  line-height: 17px;
  height: 16px;
}

/* styles for the detail page refresh icon */
.mb-detail-refresh-icon {
  position: absolute; 
  top: 5px; 
  right: 2px;
}

.mb-detail-refresh-icon .fa-repeat {
  line-height: 28px;
  font-size: 16px;
  color: green;
  float: right; 
  margin: 0px 10px; 
}

/* styles for jqxButton with image on the left */
.mb-button-bar {
  border: 1px solid #A4BED4; 
  background-color: #E0E9F5;
  border-radius: 3px;
  width: 100%; 
  overflow: auto;
}

.mb-button-bar .jqx-input {
    margin: 2px 6px;
    height: 22px;
}

.mb-button-bar label {
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    float: left;
}

.mb-button-bar .fa-repeat {
  line-height: 28px;
  font-size: 16px;
  color: green;
  float: right; 
  margin: 0px 10px; 
}

.mb-button-spacer {
  width: 50px;
  height: 20px;
  overflow: hidden; 
}

.mb-button-left .jqx-button,
.mb-button-left .mb-button-spacer {
  float: left; 
}

.mb-button-right .jqx-button,
.mb-button-right .jqx-input,
.mb-button-right .jqx-widget,
.mb-button-right div {
  float: right; 
}

.mb-img-button div.jqx-button {
  display: table; 
  height: 16px;
  padding-left: 6px; 
  padding-right: 6px; 
  margin: 2px;
}

.mb-button-bar.mb-img-button div.jqx-button {
  border-color: transparent;
}

.mb-button-bar.mb-img-button div.jqx-button:hover {
  border-color: #A4BED4;
}

.mb-img-button input.jqx-button {
  height: 24px;
  padding-left: 6px; 
  padding-right: 6px; 
  margin: 2px;
}

.mb-img-button .jqx-fill-state-disabled {
  background-color: #E0E9F5;
}

.mb-button-bar.mb-img-button .jqx-button.jqx-fill-state-disabled:hover {
  border-color: transparent;
}

.mb-img-button .jqx-button div {
  float: left; 
  line-height: 17px;
  height: 16px;
}

.mb-img-button img {
  float: left; 
  margin-right: 5px;
}

/* styles for custom dialogs */
.modal-header {
    padding: 10px 15px;
}
.modal-header div
 {
    font-size: 24px;
}

/* font style for middle section of dialogs */
.modal-body
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
}

.mb-approval-dialog.messageBox {
    min-width: 320px;
}

.mb-approval-dialog .message {
    max-width: 480px;
}

.mb-login-dialog .message {
    max-width: 360px;
}

.mb-login-dialog hr {
    margin: 6px 0;
}

.mb-review-dialog .message {
    max-width: 400px;
}

.mb-extension-dialog .message {
    max-width: 400px;
}

.mb-extension-dialog hr {
    margin: 6px 0;
}

.mb-workordermulti-dialog.messageBox{
    min-width: 845px;
}

.mb-workordermulti-dialog .modal-body {
    padding: 5px;
}

.mb-workordermulti-dialog .message {
    max-width: 1000px;
}

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A4A4BD;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 10000;
}

#workOrderAddNewPanel {
    box-shadow: 0 0 10px 0 #222;
    -webkit-box-shadow: 0 0 10px 0 #222;
    -moz-box-shadow: 0 0 10px 0 #222;
    display: none;
    position: absolute;
    z-index: 10000;
}

#modal-background.active, #workOrderAddNewPanel.active {
    display: block;
}

.system-table-title {
  font-size: 18px;
  padding-left: 5px;  
}

.system-table-instruction {
  font-size: 13px;
  padding-left: 5px;  
}

/* indicator for batch editor fields with a value in common for all records */
.common { 
  border: solid 1px green; 
  color: blue; 
}

/* indicator for batch editor fields with a mixed values in records */
.mixed { 
  border: solid 1px plum; 
}

/* style for editor fields with the dirty flag set */
.changed { 
  border: solid 1px red; 
}

 div.mixed.jqx-checkbox,
 div.changed.jqx-checkbox { 
  height: 16px !important;
}

/* font style for values that are mixed and haven't been changed */
.mixed.jqx-input { 
  font-style: italic !important; 
  color: #9FA5AB !important;
  text-indent: 0.5em !important;
}

/* reset the font style to inherited if the value is changed by user */
.changed.jqx-input { 
  font-style: inherit !important; 
  /*font-weight: 600;*/
  color: inherit !important;
  text-indent: inherit !important;
}

input[data-error="true"] {
  color: red !important;
}

input[data-error="true"].mixed {
  color: red !important;
}

input[data-error="true"].changed {
  color: red !important;
}

/* styles the text color of invalid min/max jqx number input */
.jqx-input-invalid > input {
    color: red !important;
}

/* class to indicate inactive organizations in the tree view*/
span.mb-org-inactive {
  font-style: italic;
  color: grey;
}

span.mb-org-inactive::after {
  font-style: normal;
  font-size: 0.9em;
  color: red;
  padding-left: 5px;
  content: " [INACTIVE]";
}

 div.mb-mixed-data.jqx-checkbox,
 div.mb-changed.jqx-checkbox { 
  height: 16px !important;
}

 /* overlay for mixed values in date inputs */
.mb-date-overlay {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 20px;
    bottom: 1px;
    pointer-events: none;
    background-color: rgb(255, 255, 255);
    display: none;
}

.mb-date-overlay::after {
    content: "<Multiple Values>";
    font-style: italic;
    font-weight: 400;
    text-indent: 0.5em;
    pointer-events: none;
    color: indigo;
    display: block;
    position: absolute;
    left: 0px;
    top: 2px;
}

.mb-mixed-data .mb-date-overlay {
    display: block;
}

.mb-multi-date-group:focus-within .mb-date-overlay {
    display: none;
}

.mb-changed .mb-date-overlay {
    display: none;
}

.mb-multi-date-group {
    position: relative;
}

/* font style for values that are mixed and haven't been changed */
.mb-mixed-data .jqx-input { 
  font-style: italic !important; 
  color: indigo !important;
  text-indent: 0.5em !important;
}
.mb-mixed-data .mb-panel-section {
  font-style: italic !important;
  color: indigo !important;
}

/* reset the font style to inherited if the value is changed by user */
.mb-changed .mb-panel-section,
.mb-changed .jqx-input { 
  font-style: inherit !important; 
  color: inherit !important;
  text-indent: inherit !important;
}

label.mb-edit-status, 
label.mb-mixed-data-symbol,
label.mb-changed-symbol,
label.mb-required-symbol {
  position: relative;
  padding-left: 1em;
}

.mb-changed label.mb-edit-status {
  font-weight: 600;
}

/* if data is mixed, show the mixed data indicator */
.mb-mixed-data label.mb-edit-status:before,
label.mb-mixed-data-symbol:before {
  content:"\2260";
  color: indigo;
  font-family: Arial;
  font-weight: bold;
  font-size: 1em;
  display: block;
  position: absolute;
  left: 3px;
  top: 0;
}

/* if data is changed, show the changed indicator (overrides the mixed data indicator) */
.mb-changed label.mb-edit-status:before,
label.mb-changed-symbol:before {
  content: "\0394";
  font-family: Arial;
  font-weight: bold;
  color: green;
  font-size: 1em;
  display: block;
  position: absolute;
  left: 1.5px;
  top: 0;
}

input[mb-data-error="true"][class~="jqx-input"] {
  color: red !important;
}

.mb-mixed-data input[mb-data-error="true"] {
  color: red !important;
}

.mb-changed input[mb-data-error="true"] {
  color: red !important;
}

/*applied to the ComboBox's content when the widget is disabled.*/
.jqx-combobox-content-disabled
{
    color: #000 !important;
}

/* decrease padding between menu items for autocomplete picklist */
.jqx-menu-item {
    padding: 2px 8px 2px 8px;
}

/* make anchor elements in jqx menus use black text by default*/
.jqx-menu-item a {
    color: #000 !important;
}

/* styles for dashboard widgets */
.dashboard-widget-column {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}

.dashboard-event-item {
    margin: -3px;
    border: 1px solid #A4BED4;
    cursor: default;
    /*-moz-box-shadow: 0px 0px 1px rgba(200, 200, 200, 250);*/
    font-size: 11px;
    line-height: 14px;
    text-align: left;
    padding: 5px;
}

.dashboard-widget-container {
    margin: 5px 5px 5px 5px;
    border: 2px solid white;
    cursor: default;
    /*background: #E0E9F5;*/
    text-align: left;
    color: #111;
    padding: 0px;
    background-color: white;
}

.dashboard-widget-header {
    overflow: hidden;
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-weight: bold;
    white-space: nowrap;
}

/* this class should only be used for the dashboard widget view */
.dashboard-widget-header .dashboard-widget-title {
    font-size: 12px;
    float: left;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 75%;
}

.dashboard-widget-header .dashboard-widget-buttons {
    float: right;
    padding-right: 6px;
    width: 40px;
    font-size: 11px;
    text-align: right;
    cursor: default;
}

.dashboard-widget-content {
    padding: 0;
    color: #000000;
    font-weight: normal;
    border-color: #A4BED4;
    border-style: solid;
    border-top-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    line-height: 1em;
    overflow: hidden;
    background-color: #ffffff;
}

.dashboard-widget-listbox {
    border: none !important;
}

.dash-jqx-noborder.jqx-panel{
    border: none !important;
}

.sortable-container {
    float: left;
    min-height: 100px;
    min-width: 100px;
}

.sortable-placeholder {
    border-radius: 5px;
    background-color: #F9F9F9;      
    border: lightgray dashed 2px;
}

.dash-info-text {
    font-size: 14px;
/*    line-height: 16px;*/
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* placholder used with dropdown button when there is no content */
.mg-dropdown-placeholder {
    display: none; 
    text-align: center;
    vertical-align: middle;
    color: #900;
    line-height: 22px;
    height: 22px !important;
}

 /* class added stop modal blockout stop hide application datalist from view */
.mg-incognito-blockout {
    opacity: 0.95 !important;
    background: lightgray;
    background-image: url("images/mox-70-26.png");
}

/* used to force jqxInput to use border-box sizing and force 100% width */
.mox-jqx-input-box .jqx-input {
    box-sizing: border-box;
    width: 100% !important;
}

/* used to group a jqxInput with a span containing an icon that launches a dialog */
.mb-input-lookup-group {
    position: relative;
}

.mb-input-lookup-group .jqx-input {
    box-sizing: border-box;
    width: 100% !important;
}

.show-required .mb-input-lookup-group .jqx-input {
    padding-right: 1.4em;
}

.mb-input-lookup-group span {
    position: absolute;
    top: 0;
    right: 0.25em;
    border-left: 1px solid rgb(164, 190, 212);
    padding-left: 2px;
    line-height: 24px;
    color: rgb(164, 190, 212);
    cursor: pointer;
    visibility: hidden;
    text-align: center;
}

.show-required .mb-input-lookup-group span {
    visibility: visible;
}

/* used to group a jqxInput with a span containing an icon that launches a dialog */
/* for search input on right end of tool bar */
.mb-input-search-group {
    position: relative;
    margin: 2px 6px;
}

.mb-input-search-group .jqx-input {
    box-sizing: border-box;
    width: 100% !important;
    padding-right: 1.4em;
    margin: 0 !important;
}

.mb-input-search-group span {
    position: absolute;
    top: 0;
    right: 0.25em;
    border-left: 1px solid rgb(164, 190, 212);
    padding-left: 2px;
    line-height: 24px;
    color: rgb(164, 190, 212);
    cursor: pointer;
    visibility: visible;
}

/* style for the search mode select dropdown */
.mb-search-select {
    margin-top: 2px; 
    margin-left: 5px; 
    margin-right: 0px;    
}

/* style for images used as icons in the header column of jqxGrids */
.mb-grid-header-icon {
    float: left;
    margin: 5px;
    height: 16px;
    width: 16px;
}

.mb-tooltip-wrapper {
    cursor: pointer;
    color: grey; 
    font-size: 11pt; 
    padding-right: 0.5em;
    padding-left: 0.5em;
}

.mb-tooltip-content {
    /*background-color: white;*/
}

.jqx-tooltip-text {
    background-color: white;
    text-align: left;
    padding: 10px;    -webkit-box-shadow: 3px 3px 3px 0px rgba(92,92,92,1);
    -moz-box-shadow: 3px 3px 3px 0px rgba(92,92,92,1);
    box-shadow: 3px 3px 3px 0px rgba(92,92,92,1);
}

/* Temporary fix for Firefox 37 breaking jqxDropDownList function .*/
.jqx-listitem-state-normal
{
    overflow: visible;
}

/* styles for the show/hide password button */
.showPassword + button {
    font: normal 1em/1.5 arial,helvetica,sans-serif;
    position: relative;
    float: left;
    width: 1.6em;
    margin-left: -1.6em;
    padding: 0.45em 0;
    font-size: 1.0em;
    line-height: 1.0em;
    text-align: center;
    border: none;
    background: transparent;
    transition: transform 0.3s;
    transform-origin: center;
}

.showPassword + button:focus {
    outline: none;
    font-weight: bold;
    text-shadow: 0 0 0.2em #5AF;
}

.showPassword + button:hover {
    transform: scale(1.5);
}

.showPassword[type="text"] + button:after {
    content: "\2215";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 1.6em;
    text-align: center;
    text-shadow: -0.1em 0 0 #FFF, 0.1em 0 0 #FFF;
    color: #F00;
}

/* styling for the floating header section on the login page */
.login-page-header {
    position: absolute;
    top: -50px;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: #F4F6F9;
    overflow: hidden;
    border-style: none;
    font-weight: 500;
    font-size: 2.4em;
    line-height: 50px;
}

.login-page-header div {
    margin: 0px auto;
    overflow: hidden;
    width: fit-content;
    background-color: red;
}

.login-page-header img {
    width: 140px;
    height: 50px;
    vertical-align: middle;
    float: left;
    margin: 0px 20px;
    border: none;
}

/* add additonal styling to the panel on the login page */
.login-page-panel {
    display: flex;
    width: fit-content;
    margin: auto;
    background-color: #ffffff;
    overflow: hidden;
    line-height: 22px;
    padding: 10px;
    border: 2px solid var(--mox-brand-lightblue);
    border-radius: 15px;
    /*box-shadow: 0 0 8px 0.5rem #a4bed4;*/
    box-sizing: border-box;
}

.mox-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: unset;
    overflow: hidden;
    padding: 50px;
    margin: 20px 0px;
    border-right-style: solid;
    border-right-width: 3px;
    border-right-color: var(--mox-brand-lightblue);
}

.mox-brand div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 240px;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 420px;
    overflow: hidden;
    padding: 40px;
    margin: 0px;
}

.btn-login {
    width: 100%;
    color: #fff;
    background-color: var(--mox-login-darkblue);
    border-color: var(--mox-login-darkblue);
}

.btn-login:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-login:focus, .btn-login.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-login.disabled, .btn-login:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-login:not(:disabled):not(.disabled):active, .btn-login:not(:disabled):not(.disabled).active, .show > .btn-login.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf;
}

.btn-login:not(:disabled):not(.disabled):active:focus, .btn-login:not(:disabled):not(.disabled).active:focus, .show > .btn-login.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/* style username and password inputs on login page */
.login-input-lg {
    display: block;
    float: left;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-width: 1px;
    border-color: #a4bed4;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* highlight focused MOX input contols with border color and halo */
.login-input-lg:focus {
    border-color: #E49747;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(228, 121, 17, 0.5);
}

.login-input-lg + button {
    font-size: 1.25em;
}

/* highlight input marked with ko.valdation error */
input.validationElement {
    background-color: #ffebee;
}

/* style the ko validation message */
span.validationMessage {
    color: red;
    font-size: 0.8em;
    font-style: italic;
}

.orderitemreceivedcell {
    /*background-color: #ffffe0;*/
    background-color: #D6FCCC;
}

.serviceoptionsectionbreak {
    border-bottom-width: 1px;
    border-bottom-color: lightgray;
    border-bottom-style: solid;
    margin-bottom: 10px;
}

.serviceoptionsectionnoline {
    margin-bottom: 10px;
}

.notereplybutton {
    background: none !important;
    border: none;
    color: #069;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}