/* Table of Contents
--------------------------------------------------------------------------------------------
- 1) Elements
- 2) Page Layout Elements
- 3) Page Header Flexbox Layout
- 4) Catalog Item Info Header CSS Grid Layout
- 5) Table Elements
- 6) Navigation
- 7) Messages
- 8) Action Sheet
- 9) Classes
- 10) Reports
- 11) ID Specific
----------------------------------------------------------------------------------------- */

/* 1) Elements.
----------------------------------------------------------------------------------------- */

:root {
  --black-default: #333;
  --close-icon: #980100;
  --off-white-default: #f5f5f5;
  --midnight-blue: #191970;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  background: var(--off-white-default);
  color: #333333;
  font-family: 'Roboto', sans-serif;
  margin: 0px;
}
a.submit-button {
  text-decoration: none;
}
a, a:visited {
  color: #0066cc;
}
button, .button {
  background-color: #2da562;
  border: none;
  border-radius: 1rem;
  color: #f5f5f5;
  cursor: pointer;
  display: inline-block;
  letter-spacing: 1px;
  outline: none;
  padding: .5rem 1rem;
  -webkit-transition: background 0.3s ease, color 0.3s linear;
  -moz-transition: background 0.3s ease, color 0.3s linear;
  -o-transition: background 0.3s ease, color 0.3s linear;
  transition: background 0.3s ease, color 0.3s linear;
}
button:hover, .button:hover {
  background-color: #1F793A;
}
button.delete, .button.delete {
  background-color: #8B0000;
}
button.delete:hover, .button.delete:hover {
  background-color: #5C020E;
}
button.grid-button,
.button.grid-button {
  padding: .25rem .5rem;
  border-radius: .5rem;
}
button.link-button, .button.link-button {
  background-color: #0066cc;
  color: #f5f5f5;
  text-decoration: none;
}
button.link-button:hover, .button.link-button:hover {
  background-color: #002BAF;
}
div.center, h1.center, h2.center, h3.center, h4.center {
  text-align: center;
}
div .float-right {
  float: right;
}
div .right-margin {
  margin-left: 16px;
}
div .float-left {
  float: left;
}
div .left-margin {
  margin-left: 16px;
}
div .heading {
  font-weight: bold;
  margin: 16px 0px 4px 0px;
  padding-bottom: 4px;
  text-align: center;
  border-bottom: solid 1px #cccccc;
}
h2 {
  font-style: normal;
  font-weight: 500;
}
h2 .item-number {
  margin-left: 8px;
  font-size: 1.25rem;
  font-weight: 400;
}
h3.completed {
  border-bottom: solid 1px #ccc;
  color: #006600;
  letter-spacing: 2px;
  margin: 0px 0px 8px 0px;
  padding-bottom: 10px;
  text-align: center;
}
input.right {
  text-align: right;
}
input.right-with-padding {
  text-align: right;
  padding-right: 4px;
}
label.field {
  display: block;
  float: left;
  text-align: right;
  width: 132px;
  margin-right: 8px;
  margin-top: 2px;
}

/* 2) Page Layout Elements.
----------------------------------------------------------------------------------------- */

#p-header {
  min-width: 1440px;
  text-align: left;
  width: 100%;
}
#page-header h2 {
  margin-top: 0;
  text-align: center;
}
#p-header-wrapper {
  display: flex;
  margin: auto;
  padding: .5em;
  width: 1440px;
}
#p-header-wrapper img {
  cursor: pointer;
  height: 36px;
}
#p-header-wrapper .logo {
  width: 10%;
}
#p-header-wrapper .main-nav {
  display: flex;
  align-items: center;
  width: 70%;
}
#p-header-wrapper .user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 20%;
}
#p-header-wrapper .user-info > * {
  display: inline-block;
  margin-left: .5em;
}
#p-body {
  width: 100%;
}
#p-body-wrapper {
  background-color: #FFFFFF;
  margin: auto;
  text-align: left;
  width: 1440px;
  min-height: 400px;
  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
}
#p-footer {
  font-size: .8rem;
  width: 100%;
}
#p-footer-wrapper {
  margin: auto;
  width: 1440px;
  text-align: center;
}
#p-login {
	background-color: #2da562;
	background-repeat: no-repeat;
	background-size: 100%;
}
#p-login-wrapper {
  padding: 120px 0px;
}
#page-content h1 {
  font-weight: 500;
}
#page-content section.position-left {
  width: 456px;
}
#page-content section h1 {
  font-weight: bold;
  margin: 16px 0px 4px 0px;
  padding-bottom: 4px;
  text-align: center;
  border-bottom: solid 1px #cccccc;
}
#page-content section p {
  /*outline: solid 1px red;*/
  margin: 8px 0px 0px 0px;
}
#users-search {
  margin-bottom: 16px;
}

/* 3) Page Header Flexbox Layout.
----------------------------------------------------------------------------------------- */

.page-header-with-flexbox {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.page-header-with-flexbox .flexbox-header-left {
  flex: 1;
  /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.page-header-with-flexbox .flexbox-header-middle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.page-header-with-flexbox .flexbox-header-left h2, .page-header-with-flexbox .flexbox-header-middle h2 {
  margin: 0;
}
.page-header-with-flexbox .flexbox-header-middle .menu {
  display: inline-block;
  position: relative;
}
.page-header-with-flexbox .flexbox-header-middle .filter-type-menu {
  position: absolute;
  margin-left: -1rem;
  margin-top: 8px;
  border: 1px solid #808080;
  z-index: 5000;
  background-color: white;
  text-align: left;
  visibility: hidden;
}
.page-header-with-flexbox .flexbox-header-middle .menu a {
  margin-right: .25rem;
}
.page-header-with-flexbox .flexbox-header-middle .filter-type-menu a {
  font-weight: 500;
  display: block;
  margin: 0.75em;
  padding: 0;
  text-decoration: none;
  border: none;
  min-width: 100px;
}
.page-header-with-flexbox .flexbox-header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /*outline: solid 1px red;*/
}

/* 4) Catalog Item Info Header CSS Grid Layout.
----------------------------------------------------------------------------------------- */

.catalog-item-info {
	display: grid;
	grid-gap: 3px;
	grid-template-columns: repeat(12, 1fr);
}

.catalog-item-info .data {
	grid-column: span 4;
}

.catalog-item-info .data.right {
	text-align: right;
}

.catalog-item-info .description {
	grid-column: span 8;
}

.catalog-item-info > div {
	font-weight: bold;
	padding: .15rem;
	/*outline: solid 1px red;*/
}

.catalog-item-info label {
	display: inline-block;
	font-weight: normal;
	margin-right: .5rem;
	min-width: 160px;
	text-align: right;
}

.catalog-item-info .item-data-value {
	display: inline-block;
	min-width: 60px;
	text-align: left;
}

/* 5) Table Elements.
----------------------------------------------------------------------------------------- */

table.data-entry {
  border-spacing: 2px;
  width: 100%;
}
table.data-entry th, table.data-entry td {
  padding: 2px;
}

/* 6) Navigation.
      Begin Navigation Bar Styling FROM http://www.cssnewbie.com/example/horizontal-menu/
----------------------------------------------------------------------------------------- */

#p-header-wrapper nav ul {
  font-style: normal;
  font-weight: 500;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
}
#p-header-wrapper nav li {
  float: left;
  margin: 0 .25em;
}
#p-header-wrapper nav li a {
  border-bottom: solid 3px rgba(255, 0, 0, 0);
  ;
  display: block;
  font-weight: 500;
  padding: .25em .5em;
  text-decoration: none;
  letter-spacing: .75px;
  color: #069;
  /*-webkit-transition: background 0.3s ease, color 0.3s linear;
  -moz-transition: background 0.3s ease, color 0.3s linear;
  -o-transition: background 0.3s ease, color 0.3s linear;
  transition: background 0.3s ease, color 0.3s linear;*/
  -webkit-transition: border 0.3s ease, color 0.3s ease;
  -moz-transition: border 0.3s ease, color 0.3s ease;
  -o-transition: border 0.3s ease, color 0.3s ease;
  transition: border 0.3s ease, color 0.3s ease;
}
#p-header-wrapper nav li a:hover {
  color: var(--midnight-blue);
  border-bottom: solid 3px var(--midnight-blue);
  /*background-color: #fff;*/
}

/* 7) Messages.
----------------------------------------------------------------------------------------- */

.message-area {
  font-weight: normal;
  margin: 4px 0px;
}
.message-area .error {
  color: #990000;
}
.validation-message {
  color: #990000;
}
.waiting-message {
  color: #333333;
  margin-top: 8px;
  text-align: center;
}

/* 8) Action Sheet.
----------------------------------------------------------------------------------------- */
.action-button {
  background: #1b6ac9;
  border: solid 2px #f5f5f5;
  border-radius: 1rem;
  color: #f5f5f5;
  cursor: pointer;
  letter-spacing: 1px;
  outline: none;
  padding: .5rem 1rem;
  -webkit-transition: background 0.3s ease, color 0.3s linear;
  -moz-transition: background 0.3s ease, color 0.3s linear;
  -o-transition: background 0.3s ease, color 0.3s linear;
  transition: background 0.3s ease, color 0.3s linear;
}
.action-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.action-sheet {
	background: #1b6ac9;
	color: #fff;
	margin: auto;
	padding: .5rem 1rem;
	width: 60%;
}
.action-sheet label {
  min-width: 0 !important;
}
.action-sheet .textbox {
  display: inline-block;
}
.action-sheet-container {
	position: absolute;
	width: 100%;
}
.action-sheet-container h3 {
  float: left;
  font-weight: normal;
  letter-spacing: 1px;
}
.action-sheet .divider {
  border-top: solid 2px #185fb5;
}

.action-sheet a {
	color: #fff;
	display: inline-block;
	padding: .5rem;
	text-decoration: none;
	width: 100%;
}

.action-sheet a:hover {
	background: #144f97;
}
.action-sheet i.action-icon {
	margin-right: 1rem;
}
.action-sheet i.close-icon {
	font-size: 2rem;
}

.action-sheet .grid-container {
	grid-gap: .25rem;
	padding: .25rem 0;
}

.action-sheet .grid-container > div {
	text-align: left;
	padding: .15rem 0;
}

/* 9) Classes.
----------------------------------------------------------------------------------------- */

.addresses {
	background-color: #f5f5f5;
}
.address-card {
	background: #fff;
	padding: 1rem;
	line-height: 1.5rem;
}
.address-card > div.address-card-section {
	display: inline-block;
	vertical-align: top;
}
.address-number {
	font-weight: bold;
	font-size: 1.25rem;
	margin-right: 1rem;
}

.admin-setting {
  background-color: #f5f5f5;
  border: 1px solid #C0C0C0;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-setting:last-child {
  margin-bottom: 0;
}
.admin-setting .header {
  border-bottom: dotted 1px #c0c0c0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.admin-setting .header h3 {
  margin: 0;
  text-align: center;
}
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.bom-add-container {
  background-color: #F7F7F7;
  border: 1px solid #dedede;
}
.bom-container {
  width: 100%;
  margin-top: 12px;
}
.bom-content {
  padding: 8px 24px;
}
.bom-content .buttons {
  border-top: solid 1px #808080;
  padding-top: 1rem;
}
.bom-info-button {
  cursor: pointer;
}
.bom-items {
  padding: 0px 6px;
}
.bom-title {
  font-weight: bold;
  color: #808080;
  border-bottom: solid 1px #808080;
  padding: 4px 8px;
  margin-bottom: 4px;
  text-align: left;
}
.bom-wrapper {
  width: 100%;
  margin: 0px auto;
  background-color: #FFFFCC;
  border: 1px solid #dcd9d3;
}
.button.search {
  margin: 0px 12px 0px 4px;
}
.button-top-left {
  float: left;
  margin-top: -40px;
}
.button-top-right {
  float: right;
  margin-top: -40px;
}
.buttons {
  padding: .75rem 0;
}
.buttons.center {
  text-align: center;
}
.catalog-detail {
  border: solid 1px #cccccc;
  margin-top: 16px;
  padding: 1rem;
}
.center-outer {
  float: right;
  right: 50%;
  position: relative;
}
.center-inner {
  float: right;
  right: -50%;
  position: relative;
}
.checkbox {
  line-height: 1.5rem;
}
.checkbox input {
  float: left;
  margin-top: 4px;
  padding-top: 3px;
}
.checkbox label {
  float: left;
  margin-left: 4px;
}
.clear-fix {
  clear: both;
}
.content-action {
  background-color: #f8f8ff;
  border-radius: .25rem;
  border: solid 1px #dcdcdc;
  margin: .5rem 0;
  padding: .5rem;
}
.content-action h3 {
  margin: 0 0 .5rem 0;
  padding: 0;
}
.content-action-close {
  float: right;
  color: var(--close-icon);
  text-decoration: underline;
  cursor: pointer;
}
.content-action-close .close-icon {
	color: #980100;
	font-size: 2rem;
	margin: 0 .25rem;
}
.content-add-po-item-desc {
  padding: 0px 12px;
  min-width: 455px;
}
.content-add-quote-item-desc {
  padding: 0px 12px;
  min-width: 336px;
}
.content-area {
  padding: 16px;
}
.content-background {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  padding-top: 2px;
  border: solid 1px #ccc;
}
.content-header {
  background-color: #f5f5dc;
  border: solid 1px #BDB76B;
  padding: 1rem;
}
.content-main {
  margin-top: 16px;
}
.content-no-data {
  background-color: #f5f5f5;
  padding: 1rem;
  margin: 1rem 0;
  line-height: 1.5rem;
}
.cursor-pointer {
  cursor: pointer;
}
.dashboards {
  display: flex;
  justify-content: space-between;
}
.dashboard {
  border: 1px solid #C0C0C0;
  padding: 1rem;
  margin: 0 .5rem 1rem .5rem;
  background-color: #F9F7F6;
  width: 100%;
}
.dashboard:first-child {
  margin-left: 0;
}
.dashboard.last {
  margin-right: 0;
}
.data-item {
  border-top: solid 1px #999999;
}
.data-label {
  margin-right: 16px;
}
.data-layout {
  border-collapse: collapse;
  border-spacing: 0;
}
.data-layout td {
  vertical-align: middle;
  padding: 3px 4px;
}
.data-value {
  font-weight: bold;
}
.dashboard-button {
  margin-top: 12px;
  text-align: center;
}
.dashboard-customer-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}
.dashboard-customer-name.larger {
  width: 120px;
}
.dashboard-po-number {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90px;
}
.date-range {
  padding: 1rem;
  text-align: center;
}
.date-range input {
  margin: 0 .5rem;
}
.disabled {
  background-color: #f5f5f5;
}
.font-medium {
	font-size: .9rem;
}
.font-smaller {
  font-size: .9rem;
}
.h3-header {
  border-bottom: solid 1px #cccccc;
  margin-bottom: 8px;
  padding-bottom: 0px;
}
.h3-header h3 {
  margin: 0 0 .25em 0;
}
.header-row {
  border-top: solid 2px #666666;
}
.hidden {
  display: none;
}
.invoice-payments {
  float: left;
  border: solid 1px #666;
  margin-top: 12px;
  padding: 0px 8px 8px 8px;
}
.form-container {
  margin: auto;
  width: 400px;
  margin-top: 32px;
  background-color: #fff;
  -moz-background-clip: padding;
  /*background-blend-mode: multiply;*/
  /*-webkit-background-clip: padding;*/
  /*background-clip: padding-box;
  border: 1rem solid rgba(245, 245, 245, 0.25);
  border-radius: .5rem;*/
}
.link-area {
  color: #0066cc;
  cursor: pointer;
  text-decoration: underline;
}
.link-area.button {
  color: #f5f5f5;
  text-decoration: none;
}
.link-area.button i {
  color: #f5f5f5;
}
.link-area.cancel, .link-area.cancel i {
  color: #990000;
}
.link-area i {
  color: #333;
  cursor: pointer;
}
.link-area.save i {
  color: #006400;
}
.link-area:hover {
  text-decoration: none;
}
.link-vertical-align {
  display: flex !important;
  align-items: center;
}
.list-header-row {
  border-bottom: solid 1px #666666;
}
.more-link {
  border-top: solid 1px #c0c0c0;
  margin-top: .25rem;
  padding: .5rem;
  text-align: center;
}
.paging-area {
  text-align: center;
  /*outline: solid 1px red;*/
}
.paging-buttons {
  border-top: dotted 1px #c0c0c0;
  margin-top: 1rem;
  padding-top: 1rem;
}
.paging-info {
  margin-top: .5rem;
  font-weight: bold;
}
.position-left {
  float: left;
}
.position-right {
  float: right;
}
.required-field {
  color: red;
}
#scorecard .note {
  margin-bottom: .75rem;
  text-align: center;
}
#scorecard h2 {
  margin-bottom: 0;
}
.scorecard-item {
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  float: left;
  padding: 1rem;
  text-align: center;
  width: 50%;
}
.scorecard-item.right {
  border-right: none;
}
.scorecard-item.top {
  border-top: solid 1px #ccc;
}
.scorecard-value {
  font-weight: bold;
  margin-left: .5rem;
  margin-right: .5rem;
}
.search-box {
  border: solid 2px #ccc;
  margin-bottom: 1rem;
  padding: 1rem;
}

/*  Use Font Awesome Icon in Placeholder
    https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder */

.search-magnify-glass {
  font-family: FontAwesome, 'Roboto', sans-serif;
  font-size: .9rem;
  font-style: normal;
  font-weight: normal;
  padding: .5rem;
  text-decoration: inherit;
  width: 280px;
}
.ship-to-address {
  float: left;
  margin-left: 48px;
}
.ship-to-address .header-label {
  font-weight: bold;
  text-decoration: underline;
  padding-bottom: 4px;
}
.ship-to-address div {
  margin-top: 4px;
}
.submit-button {
  background-color: #2da562;
  border: none;
  border-radius: 1rem;
  color: #f5f5f5;
  cursor: pointer;
  letter-spacing: 1px;
  outline: none;
  padding: .5rem 1rem;
  -webkit-transition: background 0.3s ease, color 0.3s linear;
  -moz-transition: background 0.3s ease, color 0.3s linear;
  -o-transition: background 0.3s ease, color 0.3s linear;
  transition: background 0.3s ease, color 0.3s linear;
}
.submit-button:hover {
  background-color: #1F793A;
}
.submit-button.delete {
  background-color: #8B0000;
}
.submit-button.delete:hover {
  background-color: #5C020E;
}
.submit-button.left-margin {
  margin-left: 16px;
}
.submit-section {
  border-top: dotted 1px #ccc;
  margin-top: 12px;
  padding-top: 12px;
  text-align: center;
}
.table-parent {
  display: table;
}
.table-child {
  display: table-cell;
  vertical-align: middle;
}
.taxable-indicator {
  margin-left: 8px;
  font-weight: normal;
}
.textarea-notes {
  width: 100%;
  height: 60px;
}
.textbox {
  border: 1px solid #92AFB1;
  padding: 5px 3px 5px 10px;
  width: 240px;
  line-height: 1.2rem;
}
.textbox.small {
  width: 60px;
}
.textbox.date {
  cursor: pointer;
  text-align: center;
  width: 120px;
}
.textbox-auto {
  border: 1px solid #92AFB1;
  padding: 5px 3px 5px 10px;
  line-height: 1.2rem;
}
.textbox.max-width {
  width: 100%;
}
.textbox-address {
  width: 600px;
}
.textbox-date {
  cursor: pointer;
  width: 100px;
  text-align: center;
}
.textbox-number {
  text-align: right;
  width: 80px;
}
.textbox-number-small {
  border: 1px solid #92AFB1;
  padding: 5px 3px 5px 10px;
  width: 40px;
  line-height: 1.2rem;
  text-align: right;
  width: 50px;
}
.textbox-wide {
  width: 240px;
}
.textbox-wider {
  width: 280px;
}
.total-amount {
  font-weight: 500;
}
.trash-icon {
  border: 0;
  padding: 0;
  margin: 0;
  height: 16px;
}
.two-up {
  float: left;
  margin-left: 1.5rem;
  width: 48%;
}
.two-up:first-child {
  margin-left: 0;
}
.user-list {
  padding-bottom: 2em;
}

/* 10) Reports.
----------------------------------------------------------------------------------------- */

.report-layout {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
}
.report-layout.auto-width {
  width: auto;
}
.report-layout.top td {
  vertical-align: top;
}
.report-layout th {
  text-align: center;
  vertical-align: bottom;
  padding: 4px;
}
.report-layout th.left {
  text-align: left;
}
.report-layout th.right {
  text-align: right;
}
.report-layout td {
  text-align: center;
  vertical-align: middle;
  padding: 3px 4px;
}
.report-layout td.data-label {
  width: 160px;
}
.report-layout td.left {
  text-align: left;
}
.report-layout td.right {
  text-align: right;
}
.report-layout td.top {
  vertical-align: top;
  padding-top: 4px;
}
.report-layout tr.alt-row {
  background-color: #f5f5dc;
}

/* 11) ID Specific.
----------------------------------------------------------------------------------------- */

#administration {
  background-color: #242b31;
  color: #f5f5f5;
  text-align: center;
}
#administration nav {
  float: left;
  padding: 1rem;
  width: 20%;
}
#administration nav h1 {
  color: #ccc;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 0;
  padding-top: 0;
}
#administration nav ul {
  border-top: solid 1px #ccc;
  list-style-type: none;
  margin: 0;
  padding: 1rem 0;
  text-align: left;
}
#administration nav li {
  margin: 0;
  padding: 0;
}
#administration nav li a {
  display: block;
  color: #ccc;
  padding: 8px 0 8px 16px;
  /*text-decoration: none;*/
  /*outline: solid 1px red;*/
}
#administration nav li a:hover {
  /*background-color: #ccc;*/
  text-decoration: none;
}
#administration .settings {
  background-color: #f5efe6;
  color: #333;
  float: right;
  min-height: 400px;
  padding: 1rem;
  width: 80%;
}
#invoice-fields {
  border-top: 1px dotted #ccc;
  margin-top: 8px;
  padding-top: 8px;
}
#invoice-fields .field-entry {
  margin-top: 8px;
  text-align: center;
}
#invoice-fields .field-entry .field-label {
  font-weight: bold;
  text-align: left;
}
#invoice-fields .field-entry .field-data {
  margin-top: 2px;
  text-align: left;
}
#lnkUpdateQuantity i {
  margin-left: .25rem;
}