nav {
  background-color: #e7e5d5;
  box-shadow: 0 5px 5px #888888;
  padding: 0 0.5rem !important; }
  nav li.nav-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; }
    nav li.nav-item:hover {
      background-color: #fff; }

.subscriptionForm .inner-row-div {
  text-align: center;
  border: 1px solid #5a471c; }

* {
  box-sizing: border-box; }

.clearSpacer {
  clear: both;
  height: 1px; }

h1, h2, h3 {
  margin-bottom: 25px; }

img {
  max-width: 100%;
  height: auto; }

#retailers img {
  max-width: 255px;
  height: auto; }
#retailers .row {
  margin-left: 50px; }

.productLines .row {
  margin-top: 25px;
  margin-bottom: 25px; }

#login .row {
  margin-bottom: 25px !important; }

#body {
  background-color: transparent;
  background-image: url("../images/paper-1468883.jpg");
  background-attachment: fixed;
  font-size: 1rem; }

#wrapper {
  -webkit-box-shadow: 8px 8px 19px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 8px 8px 19px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 8px 19px -8px rgba(0, 0, 0, 0.75); }

.divSpacing .col-4 {
  padding: 15px;
  text-align: right; }
.divSpacing .col-8 {
  padding: 15px; }

header {
  position: relative;
  background-color: #000;
  background-image: url("../images/MyTownWear_Banner.jpg");
  height: 220px; }
  header #logo {
    position: absolute;
    left: 25px;
    bottom: 25px; }

#accountHeader {
  display: none; }

#mainBody, #accountBox {
  min-height: 200px;
  background-color: #f7f5e9;
  padding: 50px; }

footer {
  min-height: 200px;
  border-top: 5px solid #5a471c;
  background-color: #e7e5d5;
  padding: 50px; }

#footerBottom a {
  color: #fff; }

.alignRight {
  text-align: right; }

.alignCenter {
  text-align: center; }

.btn, button {
  border: 1px solid #5a471c;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem; }
  .btn:hover, button:hover {
    background-color: #5a471c;
    color: #fff; }

.sidebar .btn {
  margin-bottom: 15px; }

div.dateSquare {
  float: left;
  background: #a6bfd7;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4f2e6;
  font-size: 11px;
  width: 60px;
  height: 60px;
  padding: 4px 0 4px 0;
  margin: 0 12px 0 0; }
  div.dateSquare p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 0 0 2px 0;
    line-height: 0.9em;
    color: #f4f2e6; }

.pressHL {
  width: 50%;
  float: left;
  padding: 25px; }
  .pressHL:nth-child(even) {
    clear: left; }
  .pressHL h2 {
    min-height: 60px;
    vertical-align: middle;
    margin-bottom: 25px; }
  .pressHL img {
    max-width: 100%;
    height: auto; }

/* floated photos/graphics --------------*/
.floatedPhotoRight {
  float: right;
  margin: 10px 0 5px 15px; }

.floatedPhotoRight img, .floatedPhotoLeft img {
  border: none;
  /*EDIT for style*/ }

.floatedPhotoRight p, .floatedPhotoLeft p, div.photoContainer p {
  margin: 0;
  padding: 5px 1px 0 1px;
  font-size: 12px;
  /*EDIT for style*/
  line-height: 1.2em;
  text-align: left; }

.floatedPhotoLeft {
  float: left;
  margin: 10px 15px 5px 0; }

div.photoContainer {
  text-align: center;
  margin-left: 50px;
  /*EDIT for style: match content area right margin*/ }

div.photoPair {
  margin: 20px auto 20px auto; }

.required {
  color: #ff0000;
  font-weight: 700; }

@media (max-width: 760px) {
  .container, .container-sm {
    max-width: 100%; }

  #mainBody {
    padding: 10px; } }
.colors {
  width: 100%; }
  .colors td {
    padding: 5px;
    width: 20%; }
    .colors td img {
      width: 100%;
      height: 25px; }

.postcard td {
  width: 10%; }

.flex-space-between {
  display: flex;
  justify-content: space-between; }

input[type=number] {
  text-align: right; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  /* Chrome, Edge */
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */ }

#record-table .col-md-9, #record-table .col-md-3 {
  float: left; }

.specialPrice input, .requiredQuantity input {
  width: 75px; }

.add-record-container {
  overflow: scroll; }

.colorSample {
  width: 40px; }

.colorSample img {
  width: 20px;
  height: 20px; }

.dataTables_wrapper .dataTables_length {
  margin-bottom: 25px; }

.add-staff-container {
  margin-top: 25px; }

.bold-red {
  color: #cb3000;
  font-weight: bold; }

#staff-list form label,
#line-table form label,
#colors-table form label,
#size-table form label {
  width: 85px; }

.dataTables_paginate {
  margin-bottom: 25px; }

table.staff {
  width: 100%;
  margin-bottom: 25px; }
  table.staff th {
    padding: 0.75rem;
    background-color: #5a471c;
    color: #fff; }
  table.staff td {
    padding: 0.75rem;
    vertical-align: top; }
  table.staff tr {
    border-bottom: 1px solid #5a471c; }
  table.staff tr:nth-child(odd) {
    background-color: #fff; }
  table.staff tr:nth-child(even) {
    background-color: #f7f5e9; }
  table.staff .edit {
    width: auto;
    margin-left: auto;
    margin-right: auto; }

form.staffForm legend {
  font-size: 1rem !important;
  display: inline-block !important;
  width: auto !important;
  width: 150px !important; }
form.staffForm h2 {
  margin-left: 15px; }
form.staffForm div {
  padding: 10px; }
  form.staffForm div label {
    width: 150px;
    vertical-align: top; }
  form.staffForm div input[type=text] {
    padding: 15px;
    min-width: 50%; }
  form.staffForm div textarea {
    padding: 5px;
    min-width: 50%; }
  form.staffForm div select option {
    padding: 5px; }
  form.staffForm div fieldset label {
    width: 75px;
    vertical-align: top;
    display: inline-block;
    clear: none; }
  form.staffForm div fieldset input, form.staffForm div fieldset ladel {
    display: inline-block; }

p.alignRight input {
  display: inline-block; }

fieldset label {
  width: 75px;
  vertical-align: top;
  display: inline-block !important;
  clear: none; }
fieldset input, fieldset ladel {
  display: inline-block !important; }

form.topLabels legend {
  float: none;
  font-size: 1rem !important;
  display: block !important;
  width: auto !important;
  width: auto !important; }
form.topLabels div label {
  width: 100%;
  display: block;
  clear: both; }
form.topLabels div fieldset label {
  width: 75px;
  vertical-align: top;
  display: inline-block;
  clear: none; }

select,
option {
  padding: 5px; }

form.orderNotes textarea {
  padding: 5px;
  min-width: 100%; }

#addProduct label,
#add-item label {
  position: absolute;
  left: -1000px;
  top: -1000px; }
#addProduct select,
#add-item select {
  max-width: 200px; }
#addProduct input[type=text],
#addProduct input[type=number],
#add-item input[type=text],
#add-item input[type=number] {
  max-width: 75px; }

#retailer-table label {
  position: absolute;
  left: -1000px;
  top: -1000px; }
#retailer-table select {
  max-width: 200px; }
#retailer-table input[type=text] {
  max-width: 50px; }

.orderDetails div div.boxContainer {
  /*border: 2px solid $font-color;*/
  padding: 25px;
  margin: 5px; }

table.invoice {
  width: 100%; }
  table.invoice thead th {
    text-align: right; }
  table.invoice td {
    text-align: right; }

#pagination {
  text-align: center; }

table.staff table.childrow-edit-table tr,
table.staff table.childrow-edit-table tr:nth-child(odd),
table.staff table.childrow-edit-table tr:nth-child(even) {
  border: none;
  background-color: transparent; }
table.staff table.childrow-edit-table td {
  background-color: transparent; }

#order-details tr input[type=number] {
  max-width: 75px; }
#order-details tr select {
  max-width: 100px; }

#checkoutContainer {
  display: flex; }
  #checkoutContainer .cardBox {
    margin: 10px;
    background-color: rgba(90, 65, 32, 0.863);
    padding: 25px;
    /*min-width: 500px;*/
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    flex: 1; }
    #checkoutContainer .cardBox h2, #checkoutContainer .cardBox p {
      color: #fff; }
    #checkoutContainer .cardBox .btn {
      display: block;
      margin-left: auto;
      margin-right: auto;
      background: #5469d4;
      color: #fff; }

.message__messaging .message__promo-container .message__headline .tag--medium span.br {
  color: #fff; }
  .message__messaging .message__promo-container .message__headline .tag--medium span.br a {
    color: #fff; }

#paypal-button-container {
  display: block;
  background-color: transparent;
  clear: both;
  margin-left: auto;
  margin-right: auto; }

#checkout-form {
  	/*margin-top: 25px;
  	background-color: rgba(90, 65, 32, 0.863);
      width: 30vw;
      min-width: 500px;
      align-self: center;
      box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
      border-radius: 7px;
      padding: 40px;*/ }

#checkout-form input {
  padding: 5px;
  background-color: #30313d;
  border-radius: var(--borderRadius);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  border: 1px solid #30313d;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 1px 6px rgba(0, 0, 0, 0.25); }

#card-field-submit-button {
  background: #5469d4;
  font-family: Arial, sans-serif;
  color: #ffffff;
  border-radius: 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%; }

#card-expiry-field-container, #card-cvv-field-container {
  width: 50%;
  float: left; }

.theOrderSummary .invoice-wrapper {
  float: right; }
  .theOrderSummary .invoice-wrapper .invoice td, .theOrderSummary .invoice-wrapper .invoice th {
    white-space: nowrap;
    padding-right: 10px;
    width: auto; }

#orders .row {
  margin-top: 25px;
  margin-bottom: 25px; }

.warningMessage {
  font-size: 1.5rem;
  color: #ff0000;
  font-weight: 700; }

.description {
  text-align: center; }
  .description img {
    max-height: 215px;
    width: auto; }

.orderForm label {
  display: none; }
.orderForm th {
  text-align: center; }
.orderForm tbody th {
  font-weight: 400;
  padding: 10px; }
.orderForm td {
  padding: 10px; }
  .orderForm td input {
    width: 50px; }

#orderSummaryForm th, #orderSummaryForm td {
  text-align: center; }
#orderSummaryForm tr.summaryRow, #orderSummaryForm tr.summaryRow:nth-child(odd), #orderSummaryForm tr.summaryRow:nth-child(even) {
  text-align: right;
  background-color: transparent;
  border: none; }

.checkOut label {
  width: 225px;
  text-align: right;
  padding-right: 15px; }
.checkOut label.textAreaLabel {
  width: 100%;
  text-align: left; }
.checkOut fieldset label {
  width: auto; }
.checkOut div {
  margin-top: 5px;
  margin-bottom: 5px; }
.checkOut h1 {
  margin-bottom: 25px; }
.checkOut h2 {
  margin-top: 50px;
  margin-bottom: 25px; }
.checkOut .indent {
  margin-left: 5%; }

/* Style the tab */
.tab {
  position: relative;
  margin-bottom: -1px;
  z-index: 20;
  overflow: hidden;
  /*border: 1px solid #ccc;
  background-color: #f1f1f1;*/ }

/* Style the buttons that are used to open the tab content */
.tab button.tablinks {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  background-color: #5a471c;
  color: #fff;
  margin-left: 2px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

/* Change background color of buttons on hover */
.tab button:hover, .tab button.active {
  background-color: #f7f5e9;
  color: #5a471c;
  border: 1px solid #5a471c;
  border-bottom: 0; }

/* Create an active/current tablink class */
.tab button.tablinks.active {
  background-color: #f7f5e9;
  color: #5a471c;
  border: 1px solid #5a471c;
  border-bottom: 0; }

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 50px 25px;
  border: 1px solid #5a471c; }

form.become-retailer legend {
  font-size: 1rem !important;
  display: inline-block !important;
  width: auto !important;
  width: 150px !important; }
form.become-retailer h2 {
  margin-left: 15px; }
form.become-retailer div {
  padding: 10px; }
  form.become-retailer div label {
    width: 350px;
    vertical-align: top; }
  form.become-retailer div input[type=text] {
    padding: 5px;
    min-width: 50%; }
  form.become-retailer div textarea {
    padding: 5px;
    min-width: 50%; }
  form.become-retailer div select option {
    padding: 5px; }
  form.become-retailer div fieldset label {
    width: 75px;
    vertical-align: top;
    display: inline-block;
    clear: none; }
  form.become-retailer div fieldset input, form.become-retailer div fieldset ladel {
    display: inline-block; }

p.alignRight input {
  display: inline-block; }

fieldset label {
  width: 75px;
  vertical-align: top;
  display: inline-block !important;
  clear: none; }
fieldset input, fieldset ladel {
  display: inline-block !important; }

.crimson td {
  background-image: url("../images/colors/CRIMSON.png"); }
.crimson td.count {
  background-image: none; }

.ice-blue td {
  background-image: url("../images/colors/iceBlue.png"); }
.ice-blue td.count {
  background-image: none; }