body {
  margin: 0px;
  padding: 0px;
  font-family: 'Helvetica', 'Arial';
  font-size: 14px;
}

p{
  text-align:center;
  font-size: 20px;
  font-weight: bold;
}

.clear {
  clear: both;
}

.yellow {
  background-color: yellow;
}

.navbar {
  background-color: ghostwhite;
  border-bottom: 1px solid #102A89;
}

.navbar-left {
  float: left;
}

.navbar-left > img {
  display: inherit;
  margin: -13px 0px 0px 0px;
  height: 90px;
}

.navbar-right {
  float: right;
}

.login {
  display: block;
  border: 1px solid ghostwhite;
  margin: 40px auto 0px auto;
  box-shadow: 2px 2px 5px 0px #CCC;
  max-width: 300px;
  position: relative;
}

input[type=text], input[type=number], input[type=password], input[type=date], select {
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  margin-bottom: 5px;
  border-bottom: 2px solid #102A89;
}

label, input, select {
  display: block;
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  color: #102A89;
}

input[type=submit], input[type=button] {
  border: 0px;
  font-size: 20px;
  padding: 7px 0px;
  background-color: #102A89;
  color: ghostwhite;
  transition: background-color 0.5s linear;
  cursor: pointer;
}

label {
  font-size: 18px;
  margin-bottom: 5px;
}

.form-group {
  margin: 20px;
}

.button-group {
  display: block;
  margin-top: 40px;
}

input[type=submit]:hover, input[type=submit]:focus, input[type=button]:hover, input[type=button]:focus {
  background-color: ghostwhite;
  color: #102A89;
  box-shadow: 2px 2px 2px #CCC;
}

input[type=button]:active, input[type=button]:active {
  box-shadow: none;
}

input[type=text]:focus, input[type=password]:focus, input[type=button]:focus, input[type=date]:focus, select:focus {
  outline: none;
}

input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, select:focus {
  box-shadow: 2px 2px 2px #CCC;
}

.validation-summary {
  padding: 35px 0px 0px 0px;
}

.validation-summary-errors ul {
  list-style: none;
  margin: 0px;
  padding-left: 20px;
  display: inline-block;
}

.validation-summary-errors, .validation-summary-errors ul, .validation-summary-errors ul li {
  display: inline-block;
}

.validation-error {
  color: red;
}

.login i {
  font-family: "FontAwesome";
  font-style: normal;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 100%;
  text-align: center;
  font-size: 32px;
  position: absolute;
  color: #102A89;
  top: -25px;
  left: 20px;
  background-color: ghostwhite;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.login i::before {
  content: "\f090";
}

.navbar-right {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.navbar-right li {
  line-height: 78px;
  width: 40px;
  display: inline-block;
  vertical-align: middle;
}

.navbar-right a {
  font-family: "FontAwesome";
  font-style: normal;
  display: block;
  text-align: center;
  font-size: 32px;
  color: #102A89;
  background-color: ghostwhite;
  text-decoration: none;
  transition: font-size 0.2s linear;
}

.navbar-right a:hover {
  font-size: 38px;
}

.navbar-right .logout a::before {
  content: "\f08b";
}

.navbar-right .profile a::before {
  content: "\f007";
}

.navbar-right .navbar-collapse a::before {
  content: "\f0c9";
}

@media (min-width: 730px) {
  .manage {
    display: table;
    margin: 0 auto;
  }

  .twosplit .form-group {
    display: inline-block;
    width: 322px;
  }

  .nosplit .form-group {
    display: inline-block;
    width: 688px;
  }

  .unevensplit .form-group {
    display: inline-block;
  }

  .manage .city {
    width: 404px;
  }

  .manage .state {
    width: 91px;
  }

  .manage .zipcode {
    width: 105px;
  }

  .manage .user-name {
    width: 130px;
  }

  .manage .email {
    width: 315px;
  }

  .manage .phone {
    width: 150px;
  }

  .threesplit .form-group {
    display: inline-block;
    width: 200px;
  }

  .foursplit .form-group {
    display: inline-block;
    width: 139px;
  }
}

.disabled {
  opacity: .5;
  position: relative;
}

.disabled::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: ' ';
}

.manage-password {
  display: table;
  width: 300px;
  margin: 0 auto;
}

.manage-password-buttons input[type=button], .manage-password-buttons input[type=submit] {
  width: 108px;
}

.manage-password-buttons .form-group {
  display: inline-block;
}

.search-employee {
  text-align: left;
}

.search-code {
  width: 95px;
  text-align: center;
}

.search-division {
  width: 70px;
  text-align: center;
}

.search-font-button {
  text-align: center;
  font-family: 'FontAwesome';
  cursor: pointer;
}

.search-table div.info-button {
    text-align: center;
    position: relative;
    font-family: 'FontAwesome';
    cursor: pointer;
    overflow: visible;
    white-space: normal;
}

.search-table div.info-button .save-info {
    position: absolute;
    text-align: left;
    top: 1em;
    right: 1em;
    width: max-content;
    color: white;
    min-width: 300px;
    background-color: #102A89;
    font-family: 'Helvetica', 'Arial';
    font-size: 14px;
    padding: 0.5em;
    border: 2px solid white;
}

.search-delete {
  color: red;
}

search-save {
  color: blue;
}

.search-add {
  color: green;
}

.search-select-all{
  color: red;
  font-size:18px;
}

.search-table table {
  margin: 10px auto;
  border-collapse: collapse;
  color: #102A89;
}

.search-table table thead {
  background-color: ghostwhite;
}

.search-table table th {
  padding: 8px 0px;
}

.search-table table tbody tr {
  border-top: 1px solid black;
}

.search-table table tbody tr:nth-child(2n) {
  background-color: #f7f7f7;
}

.search-table table div {
  padding: 0px 3px;
  border-right: 1px solid black;
}

.search-table table th div {
  position: relative;
}

.search-table table th:last-child div, .search-table table td:last-child div {
  border-right: none;
}

.search-table table tbody tr:hover {
  background-color: #102A89;
  color: ghostwhite;
  cursor: pointer;
}

.blur-out {
  display: block;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  padding: 0;
  margin: 0;
  z-index: 1010;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

#loading, .overlay {
  display: none;
  position: relative;
}

  #loading > img {
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100px;
    z-index: 10011;
  }

.overlay-content {
  padding: 5px;
  border: 13px solid #F0F0F0;
  background: white;
  border-top: 35px solid #F0F0F0;
}

.overlay-container {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1011;
}

.overlay-container i {
  font-family: "FontAwesome";
  position: absolute;
  top: 8px;
  right: 9px;
  color: rgb(255,0,0);
  font-style: normal;
  font-size: 19px;
}

.overlay-container i:hover {
  color: rgb(207,131,115);
}

.overlay-container i:active {
  color: rgb(148,96,85);
}

.overlay-container i::after {
  content: '\f2d3';
}

.nolink{
  cursor: default;
}

nav a {
  text-decoration: none;
  color: #102A89;
  display: block;
}

nav ul {
  list-style: none;
  position: relative;
  text-align: left;
  margin: 0 auto;
  padding: 5px 0px;
  display: table;
}
nav li {
  float: left;
}

nav {
  position: relative;
  background-color: ghostwhite;
  text-align: center;
  letter-spacing: 1px;
  -webkit-box-shadow: 2px 2px 3px #888;
  -moz-box-shadow: 2px 2px 3px #888;
  box-shadow: 2px 2px 3px #888;
}

/* prime */
nav ul.primary li a {
  display: block;
  padding: 5px 20px;
  border-right: 1px solid #102A89;
}

nav ul.primary li:last-child a {
  border-right: none;
}

nav ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 0 #BEBEBE;
  padding: 0px;
  margin: 0px;
  display: none;
}

nav ul.sub li {
  float: none;
  margin: 0;
}

nav ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 10px 15px;
}

nav ul.sub li:last-child a {
  border-bottom: none;
}

@media only screen and (min-width: 736px) {
  .navbar-collapse {
    display: none !important;
  }

  /* clear'n floats */
  nav ul:after {
    clear: both;
  }

  nav ul:before, nav ul:after {
    content: " ";
    display: table;
  }

  nav ul.primary li a:hover {
    color: #000;
  }

  /* subs */
    
  nav ul.sub li a:hover {
    color: #000;
    background: #eeeeee;
  }

  /* sub display */
  nav ul.primary li:hover ul {
    display: block;
    background: #fff;
  }

  /* keeps the tab background white */
  nav ul.primary li:hover a {
    background: #fff;
    color: #616;
    text-shadow: none;
  }

  nav ul.primary li:hover > a {
    color: #000;
  }
}

@media only screen and (max-width: 735px) {
  .navbar-collapse{
    display: block;
  }
  
  #nav-menu{
    display: none;
  }
  
  nav ul {
    display: block;
  }

  nav li {
    float: none;
  }

  nav ul.sub {
    display: block;
    position: static;
    box-shadow: none;
    width: 100%;
  }

  nav ul.sub li a {
    border-bottom: 1px dotted black;
  }

  .main {
    background-color: #102A89;
    color: ghostwhite;
    border-bottom: 1px solid black;
    padding: 12px 10px !important;
  }

  .primary {
    padding: 0px;
  }
}

.customer-edit .division {
  display: inline-block;
  width: 60px;
}

.customer-edit .customer-number {
  display: inline-block;
  width: 130px;
}

.customer-number-split {
  display: inline-block;
  width: 28px;
  text-align: center;
}

.customer-left {
  width: 260px;
  display: inline-block;
  vertical-align: top;
}

.customer-right {
  width: 470px;
  display: inline-block;
  vertical-align: top;
}

.customer-discount > label {
  display: inline-block;
  width: auto;
}

.customer-discount > input[type=text] {
  display: inline-block;
  width: 45px;
  margin: 0px 12px;
}

.customer-update-price-book > input[type=checkbox], .customer-update-price-book > label {
  display: inline-block;
  width: auto;
}

.customer-edit {
  display: table;
  margin: 0 auto;
}

.customer-edit .city {
  width: 200px;
}

.customer-edit .state {
  width: 50px;
}

.customer-edit .zipcode {
  width: 90px;
}

.pagination {
  display: table;
  list-style: none;
  margin: 0px auto;
  padding: 0px;
}

.pagination > li {
  display: inline-block;
  padding: 4px 0px;
}

.pagination > li:hover a, .pagination > li.selected a {
  background-color: #102A89;
  color: ghostwhite;
}

.pagination > li {
  background-color: ghostwhite;
  color: #102A89;
}

.pagination > li > div {
  border: 1px solid transparent;
  border-right-color: #102A89;
  padding: 0px 4px;
}

.pagination > li > div > a {
  width: 30px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 7px 0px;
}

.pagination > li:last-child > div {
  border-right-color: transparent;
}

.customer-currency {
  width: 60px;
}

.customer-currency-small {
  width: 40px;
}

.customer-item-number {
  width: 145px;
}

.customer-price-book {
}

.customer-adjustment-other {
  cursor: pointer;
}

.customer-price-book select, .customer-price-book input {
  margin-bottom: 0px;
}

.customer-price-book tr:hover {
  background-color: initial !important;
  color: initial !important;
  cursor: initial !important;
}

.adjustment-date {
  width: 140px;
}

.adjustment-type {
  width: 85px;
}

.adjustment-description {
  width: 225px;
}

.adjustment-amount {
  width: 70px;
}

.customer-search-number {
  text-align: left;
  width: 100px;
}

.customer-search-name {
  text-align: left;
  width: 100%;
}

.customer-search-city {
  text-align: left;
  width: 175px;
}

.customer-search-state {
  text-align: left;
  width: 55px;
}

td > div.customer-search-state {
  text-align: center;
}

.search-grid {
  padding: 5px;
}

.search-grid-dsc::after {
  border-top: 5px solid #ccc;
}

.search-grid-asc::after {
  border-bottom: 5px solid #ccc;
}

.search-grid tr {
  cursor: pointer;
}

.search-grid-asc::after, .search-grid-dsc::after {
  content: "";
  right: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  top: 7px;
}

.search-grid thead th {
  position: relative;
}

#customer-manage{
  width: 730px;
}

.search-pricelevel-code {
  width: 70px;
}

.search-pricelevel-description {
  width: 460px;
}

.search-pricelevel-type {
  width: 100px;
}

.search-pricelevel-amount {
  width: 100px;
}

.pricelevel-code {
  width: 50px;
}

.pricelevel-code > label {
  text-align: center;
}

.pricelevel-evensplit {
  width: 125px;
}

.pricelevel-description {
  width: 390px !important;
}

#pricelevel-edit .twosplit {
  text-align: center;
}

#pricelevel-edit .twosplit > input[type=button] {
  width: 48%;
  display: inline-block;
}

.invoice-info-table td {
  font-size: 16px;
}

  .invoice-info-table td:first-child {
    text-align: right;
  }

.invoice-info-table label, .invoice-info-table input[type=radio], .invoice-info-table input[type=checkbox] {
  display: inline-block;
  width: initial;
  font-size: 16px;
}

.invoice-info-table input[type=text], .invoice-info-table input[type=number] {
  width: 85px;
}

.search-table div {
  white-space: nowrap;
  overflow: hidden;
}

.invoice-grid-comments {
  width: 255px;
}

.invoice-grid-subtotal {
  width: 85px;
  text-align: center;
}

.invoice-grid-price {
  width: 60px;
  text-align: center;
}

.invoice-grid-quantity {
  width: 40px;
  text-align: center;
}

.invoice-grid-item {
  width: 260px;
}

tbody .invoice-grid-price, tbody .invoice-grid-subtotal {
  text-align: right;
}

.invoice-info-table input[type=button] {
  padding: 4px 0px;
  font-size: 16px;
}

.invoice-info-table .twosplit {
  text-align: center !important;
}

.invoice-info-table .twosplit input[type=button], .warehouseorder-info-table .twosplit input[type=button] {
  display: inline-block;
  width: 48%;
}

.adjustment-invoice-amount {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

.invoice-return {
  color: red;
}

.invoice-subtext {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 185px;
  z-index: -1;
}

.search-invoice-grid thead {
  display: block;
}

.search-invoice-grid tbody {
  max-height: 300px;
  display: block;
  overflow-y: scroll;
}

.warehouseorder-info-table td {
  font-size: 16px;
}

.warehouseorder-info-table td:first-child {
  text-align: right;
}

.warehouseorder-info-table label, .warehouseorder-info-table input[type=radio], .warehouseorder-info-table input[type=checkbox] {
  display: inline-block;
  width: initial;
  font-size: 16px;
}

.warehouseorder-info-table input[type=text] {
  width: 85px;
}

.search-table div {
  overflow: hidden;
}

.warehouseorder-grid-comments {
  width: 200px;
}

.warehouseorder-grid-quantityBackOrdered {
  width: 90px;
  text-align: center;
}

.warehouseorder-grid-quantityShipped {
  width: 55px;
  text-align: center;
}

.warehouseorder-grid-quantity {
  width: 40px;
  text-align: center;
}

.warehouseorder-grid-item {
  width: 250px;
}

tbody .warehouseorder-grid-price, tbody .warehouseorder-grid-subtotal {
  text-align: right;
}

.warehouseorder-info-table input[type=button] {
  padding: 4px 0px;
  font-size: 16px;
}

.warehouseorder-info-table .twosplit {
  text-align: center !important;
}

.search-warehouse-grid thead {
  display: block;
}

.search-warehouse-grid tbody {
  max-height: 300px;
  display: block;
  overflow-y: scroll;
}

.autocomplete {
  position: relative;
}

.autocomplete > ul {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 440px;
  max-height: 110px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.autocomplete > ul > li {
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
  
.autocomplete > ul > li:hover{
  background-color: #102A89;
  color: ghostwhite;
}

.red {
  background-color: red;
}

.none {
  background-color: none;
}