:root {
  --black: #000;
  --dark-grey: #333;
  --ash-grey: #c4c4c4;
  --off-white: #f4f4f4;
  --white: #fff;
  --bright-yellow: #fff52c;
  --light-yellow: #fcf386;
  --dark-turquoise: #0097a7;
  --light-turquoise: #90f4ef;
  --bright-turquoise: #69e8e4;
  --pink: #ffb9ce;
  --red: #ff2222;
  --green: #00881b;

  --primary-background: var(--white);
  --secondary-background: var(--light-yellow);
  --tertiary-background: var(--off-white);
  --quaternary-background: var(--ash-grey);

  --link: var(--dark-turquoise);
  --secondary-link: var(--purple);

  --highlight: var(--bright-yellow);

  --body-text: var(--dark-grey);
  --primary-text: var(--black);

  --primary-button-background: var(--bright-yellow);
  --primary-button-hover-background: var(--light-yellow);
  --primary-button-text: var(--black);

  --secondary-button-background: var(--bright-turquoise);
  --secondary-button-hover-background: var(--light-turquoise);
  --secondary-button-selected-background: var(--dark-turquoise);
  --secondary-button-text: var(--black);

  --disabled-button-background: var(--ash-grey);
  --disabled-button-text: var(--off-white);

  --error: var(--red);
  --error-pulse-start: var(--white);
  --error-pulse-end: var(--pink);

  --success: var(--green);

  --primary-border: var(--dark-grey);
  --secondary-border: var(--ash-grey);








  --grey: #9b9b9d;
  --smoke-grey: #b7b7b7;

  --white: #ffffff;

  --yellow: #ead439;
  --rich-yellow: #ffe600;

  --pale-turquoise: #d9fff9;

  --dimmed-turquoise: #43ddd5;


  --purple: #c492ff;
  --pale-blue: #a4b8ff;
  --grass-green: #9aff7d;
  --gold: #fdd86a;

  --emerald: #1e9f77;


  --menu-item-background: var(--light-grey);
  --menu-item-highlight: var(--grey);
  --secondary-menu-item-highlight: var(--yellow);




  --secondary-text: var(--grey);
  --tertiary-text: var(--white);





  --tertiary-button-background: var(--grey);
  --tertiary-button-hover-background: var(--smoke-grey);
  --tertiary-button-active-background: var(--dark-grey);
  --tertiary-button-text: var(--white);


}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  color: var(--dark-grey);
}

a, a:visited {
  color: var(--link);
  transition: all 0.3s;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  text-decoration: underline;
}

#root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  min-height: 100%;
  flex-grow: 1;
}

.header, .footer {
  background: var(--secondary-background);
  padding: 20px;
  text-align: center;
  flex-shrink: 0;
}

.front-page-link {
  display: block;
  text-decoration: none;
}

.front-page-link:hover,
.front-page-link:focus,
.front-page-link:active {
  text-decoration: none;
}

.footer {
  position: relative;
  margin-top: 50px;
  padding: 10px;
}

.footer span {
  color: var(--primary-text);
  display: block;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
}

.navigation {
  text-align: center;
  padding: 10px;
}

.navigation-item {
  margin-left: 5px;
  font-size: 20px;
  padding: 10px;
  text-decoration: underline;
  cursor: pointer;
}

.navigation-item.selected {
  font-weight: bold;
}

.username-wrapper {
  display: block;
  position: relative;
  margin-top: 20px;
  font-family: 'Vollkorn';
  font-size: 20px;
  font-weight: 700;
  border-top: 1px solid var(--primary-border);
  padding-top: 20px;
  max-width: 790px;
  margin: 20px auto 0 auto;
}

.hello {
  color: var(--body-text);
}

.divider {
  margin: 0 10px;
  color: var(--primary-border);
}

.username {
  color: var(--primary-text);
}

.log-out, .user-info {
  color: var(--link);
  cursor: pointer;
}

.log-out:hover,
.user-info:hover,
.log-out:active,
.user-info:active {
  text-decoration: underline;
  cursor: pointer;
}

img.logo {
  width: 300px;
}

.link-wrapper {
  text-align: right;
}

.link-wrapper a {
  margin: 10px 10px 0 0;
  display: inline-block;
}

h1 {
  font-family: 'Permanent Marker', cursive;
  color: var(--primary-text);
  display: inline;
  font-size: 37px;
  margin-left: 10px;
  line-height: 1.9;
  vertical-align: top;
}

h2.form-heading, h2.table-heading {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  position: relative;
  top: 32px;
  background: var(--primary-background);
  display: inline-block;
  padding: 0 10px;
  color: var(--body-text);
  margin: 0 0 20px 40px;
}

h2.user-form-heading {
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: normal;
  margin: 30px 0;
}

h2.form-subheading {
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: normal;
  font-size: 18px;
  margin: 30px 0;
}

h2.vendor-products-table-heading {
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 20px;
}

.vendor-products-table {
  margin: 50px 0 0;
}

.form-heading.small {
  font-size: 18px;
  top: 29px;
}

.login-wrapper, .signup-wrapper, .password-reset-wrapper {
  margin: 0 auto;
  margin-top: 50px;
}

.login-wrapper .info-message {
  text-align: center;
}

.login-wrapper {
  width: 380px;
}

.signup-wrapper {
  width: 600px;
}

.form-section {
  margin-bottom: 40px;
}

.form-value-list {
  display: block;
  font-family: 'Lato', sans-serif;
  line-height: 2;
}

.signup-wrapper textarea {
  width: 100%;
  height: 150px;
  resize: none;
}

.password-reset-wrapper {
  width: 480px;
}

.login-submit-wrapper {
  text-align: center;
  margin: 30px 0;
}

.table-link {
  cursor: pointer;
  color: var(--link);
  font-weight: bold;
}

.table-link:hover {
  text-decoration: underline;
}

#frontpage-container {
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px;
}

#campaigns-products-container {
  margin-bottom: 50px;
}

#products-table-container.loading:before,
#suppliers-table-container.loading:before,
#shopify-products-container.loading:before {
  top: 60px;
}

#product-form-container.loading:before {
  margin: 50px 0;
}

#campaigns-products-container.loading:before {
  top: 100px;
}

.fields-container {
  overflow: auto;
}

.control-buttons {
  margin-top: 30px;
  text-align: center;
}

.control-button {
  margin-left: 10px;
}

.products-table {
  width: 600px;
  margin: 20px auto;
}

.suppliers-table {
  width: 800px;
  margin: 20px auto;
  font-family: 'Lato', sans-serif;
}

.campaign-product-table {
  width: 800px;
  margin: 10px auto 0;
  font-family: 'Lato', sans-serif;
}

.campaign-product-table th.product-name {
  width: 40%;
}

.campaign-product-table th.discount-percentage {
  width: 25%;
}

.campaign-product-table th.extra-info {
  width: 35%;
}

.products-table thead, .suppliers-table thead, .campaign-product-table thead {
  text-align: left;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
}

.campaign-product-table-container {
  margin: 0 auto 20px;
  width: 800px;
  padding: 20px;
}

.products-table thead th {
  width: 300px;
}

.products-table tbody, .suppliers-table tbody, .campaign-product-table thead {
  text-align: left;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

.products-table tr {
  height: 24px;
}

.suppliers-table tr .loading:before {
  font-size: 3px;
  left: 10px;
}

.suppliers-table .checkbox-cell {
  position: relative;
}

.suppliers-table .checkbox-cell input {
  position: absolute;
  top: 4px;
}

h2.product-title {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 30px;
  font-family: 'Work Sans', sans-serif;
}

.fields-container {
  overflow: auto;
}

th, td {
  padding: 5px 15px;
}

.variant-link {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  color: var(--link);
  transition: all 0.3s;
}

.variant-link:hover {
  text-decoration: underline;
}

.order-data-link {
  color: var(--secondary-link);
}

.order-data-link:hover {
  text-decoration: underline;
}

.add-variant-link {
  font-weight: bold;
  color: var(--link);
}

.add-variant-link:hover {
  text-decoration: underline;
}

.product-row {
  margin-bottom: 10px;
}

.form {
  text-align: center !important;
}

.product-form-wrapper {
  text-align: center;
}

.modal {
  max-width: 1100px !important;
  text-align: center;
  margin: 121px auto;
  background: var(--primary-background);
  outline: none;
  border: 1px solid var(--primary-border);
}

.modal.comparison-view-container {
  max-width: 2000px !important;
}

.modal.comparison-view-container #shopify-product-container {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  margin-top: 15px;
  padding: 10px 20px 10px 10px;
  text-align: center;
}

.modal.comparison-view-container #product-form-container {
  width: 60%;
  display: inline-block;
}

.shopify-product-heading {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  margin: 10px 0 30px 0;
}

.shopify-product-loading {
  position: relative;
  top: 50px;
}

#shopify-product-container .field-content {
  font-family: 'Lato', sans-serif;
  height: 51px;
}

#shopify-product-container .field-content.image-field {
  height: auto;
  min-height: 105px;
  margin: 20px 0;
}

#shopify-product-container .product-image-container {
  position: relative;
  display: inline-block;
  width: 100px;
  margin-left: 10px;
}

#shopify-product-container .product-image {
  width: 100%;
}

#shopify-product-container .field-content.image-field.product-images {
  margin-top: 39px;
}

#shopify-product-container .field-content.image-field.variant-image {
  margin: 71px 0 32px 0;
}

#shopify-product-container .field-content.textarea {
  height: 407px;
  overflow: auto;
  margin-bottom: 4px;
}

@media only screen and (max-width: 600px) {
  .modal {
    margin: 0;
  }
}

.close {
  position: relative;
  top: 20px;
  right: 50px;
  height: 30px;
  width: 30px;
  float: right;
  z-index: 10;
  padding: 10px;
  font-size: 30px;
  color: var(--body-text);
  background: var(--primary-background);
  border: 1px solid var(--primary-border);
  border-radius: 26px;
  cursor: pointer;
  font-family: 'Permanent Marker', cursive;
  line-height: 1;
  transition: color 0.3s, background-color 0.3s;
}

.close:hover {
  background: var(--tertiary-background);
}

#create-best-before-product-form .product-form-inputs-wrapper {
  max-width: 700px;
}

#create-best-before-product-form .input-wrapper input {
  width: 300px;
}

#create-best-before-product-form .input-wrapper select {
  width: 314px;
}

.product-form-inputs-wrapper {
  max-width: 920px;
  margin: 0 auto 20px;
  border: 1px solid var(--primary-border);
  padding: 25px;
  background: var(--primary-background);
}

.inputs-wrapper {
  display: inline-block;
  width: 50%;
}

.inputs-wrapper.first {
  float: left;
}

@media only screen and (max-width: 900px) {
  .inputs-wrapper {
    width: 100%;
  }
}

.input-wrapper {
  margin-top: 15px;
  text-align: left;
  line-height: 2.2;
  padding-left: 7px;
  margin-right: 7px;
  border-radius: 3px;
  transition: background 0.4s;
}

.input-wrapper label {
  font-family: 'Lato', sans-serif;
  color: var(--body-text);
}

.fields-container .input-wrapper label, .fields-container .field-name {
  font-size: 13px;
}

.fields-container .field-wrapper .field-value-wrapper {
  width: 71%;
}

.input-wrapper input, .input-wrapper select, .input-wrapper .search-select {
  float: right;
  height: 22px;
  padding: 5px;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
}

.input-wrapper .search-select {
  width: 71.6%;
  padding: 0;
}

.input-wrapper .search-select > div {
  height: 100%;
  box-shadow: none;
  border-color: var(--secondary-border);
  border-radius: 0;
}

#product-form .input-wrapper input {
  width: 70%;
}

#product-form .input-wrapper.textarea {
  height: 400px;
}

#product-form .input-wrapper textarea {
  float: right;
  width: 70.9%;
  height: 100%;
  resize: none;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
}

#product-form .input-wrapper.images {
  display: table;
  width: 98%;
}

#product-form .input-wrapper.images .product-images {
  float: right;
  width: 72%;
  min-height: 123px;
}

#product-form .input-wrapper.images .product-image-container {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  margin-right: 10px;
  width: 100px;
}

#product-form .input-wrapper.images .product-image {
  width: 100%;
}

#product-form .input-wrapper.images .remove-image {
  width: 15px;
  height: 15px;
  position: absolute;
  top: -10px;
  font-size: 25px;
  right: 0;
  text-align: center;
  line-height: 0.5;
}

.input-wrapper input {
  width: 200px;
}

.input-wrapper select {
  width: 214px;
  height: 35px;
}

.form-error {
  font-size: 12px;
  position: relative;
  display: block;
  color: var(--red);
}

.input-wrapper.has-error {
  animation: pulse 2s 1;
}

.input-wrapper.changed input:not([type="file"]),
.input-wrapper.changed textarea,
.input-wrapper.changed select,
.input-wrapper.changed .product-images,
.input-wrapper.changed .search-select > div {
  outline: 4px solid var(--highlight) !important;
}

@keyframes pulse {
  0% {
    background-color: var(--error-pulse-start);
  }

  50% {
    background-color: var(--error-pulse-end);
  }

  100% {
    background-color: var(--error-pulse-start);
  }
}

.submit-wrapper {
  text-align: center;
  margin-top: 30px;
}

.submit-wrapper.loading {
  margin-top: 50px;
  margin-bottom: 20px;
}

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

.button {
  font-family: 'Lexend Deca', sans-serif;
  border: none;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 3px;
  text-align: center;
  display: inline-block;
  line-height: 1;
  transition: all 0.3s;
  cursor: pointer;
  outline: none;
}

.form-add-remove-buttons {
  float: right;
  margin: 0 -70px 0 0;
  width: 70px;
}

.add-remove-form-field-button {
  font-size: 14px;
  width: 30px;
  padding: 10px;
  margin-left: 5px;
}

.button--primary {
  background: var(--primary-button-background);
  color: var(--primary-button-text);
}

.button--primary:hover {
  background: var(--primary-button-hover-background);
}

.button--secondary {
  background: var(--secondary-button-background);
  color: var(--secondary-button-text);
}

.button--secondary:hover {
  background: var(--secondary-button-hover-background);
}

.button--secondary.selected {
  background: var(--secondary-button-selected-background);
}

.button:disabled,
input[type="submit"]:disabled {
  background: var(--disabled-button-background);
  color: var(--disabled-button-color);
}

.info-message {
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
}

.product-form-inputs-wrapper .info-message {
  margin-top: 30px;
}

.products-info {
  margin-top: 20px;
}

.info-message .success {
  color: var(--green);
  font-weight: bold;
}

.info-message .error {
  color: var(--red);
  font-weight: bold;
}

.loading:before {
  position: relative;
  font-size: 7px;
}

.supplier-info-wrapper {
  width: 600px;
  margin: 0 auto;
}

.supplier-table, .product-table {
  margin: 30px auto;
  text-align: left;
  font-family: 'Lato', sans-serif;
}

.bold-table-title tr td:first-child {
  font-weight: bold;
}

.product-table tr td {
  vertical-align: initial;
}

.ReactModal__Overlay {
  overflow: scroll;
}

body.ReactModal__Body--open {
  overflow: hidden;
}

.vendor-wrapper {
  text-align: center;
  margin: 20px 0;
}

.vendor-wrapper span {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  margin-right: 10px;
}

.vendor-wrapper select {
  font-family: 'Lato', sans-serif;
  height: 30px;
  font-size: 15px;
}

.field-wrapper {
  font-family: 'Lato', sans-serif;
  height: 25px;
  margin: 15px 7px;
}

.field-wrapper .field-name-wrapper {
  display: inline-block;
  float: left;
}

.field-wrapper .field-value-wrapper {
  display: inline-block;
  width: 36%;
  float: right;
  text-align: left;
}

.field-wrapper.read-only-textarea {
  height: auto;
  margin: 30px 7px;
  text-align: left
}

.field-wrapper.read-only-textarea .field-name-wrapper {
  float: none;
}

.field-wrapper.read-only-textarea .field-value-wrapper {
  float: none;
  width: 100%;
  font-weight: bold;
  margin-top: 10px;
}

.page-description, .section-description  {
  width: 800px;
  text-align: center;
  margin: 0 auto;
  border-bottom: 1px solid ;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
}

.section-description {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  margin-bottom: 40px;
}

.body-content h2 {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  text-align: center;
}

.body-content p {
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
}

#order-data-container {
  padding: 0 50px;
}

#order-info-form-container, #campaign-data-table-container, #campaign-data-form-container, #campaign-form-container {
  border: 1px solid var(--secondary-border);
  margin: 20px;
}

h2.campaign-form-heading {
  text-align: center;
  font-family: 'Lato', sans-serif;
  margin: 10px auto;
  padding: 5px;
}

h2.campaign-heading, h2.campaigns-heading {
  text-align: center;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  padding: 5px;
}

h2.campaign-heading {
  font-size: 20px;
  background: var(--quaternary-background);
  color: var(--primary-text);
}

h2.campaign-heading.active {
  background: var(--secondary-background);
}

#campaign-data-table-container {
  padding: 20px;
}

#campaign-data-table {
  font-family: 'Lato', sans-serif;
  text-align: left;
  margin: 30px auto 0;
}

#campaign-data-table tbody tr.active {
  background: var(--secondary-background);
  color: var(--primary-text);
}

.order-info-form-inputs-wrapper, .campaign-data-form-inputs-wrapper, .campaign-form-inputs-wrapper {
  padding: 20px;
  width: 60%;
  margin: 0 auto;
}

#order-info-form .field-value, #campaign-data-form .field-value {
  float: right;
}

#order-info-form textarea, #campaign-data-form textarea {
  float: right;
  resize: none;
  width: 200px;
  height: 100px;
}

#order-data-container h2.main-heading {
  margin: 0;
}

#order-data-container h2 {
  margin: 20px 0 40px;
}

#order-data-container .loading {
  height: 150px;
}

.remove-campaign {
  text-align: center;
}

.remove-campaign span {
  background: var(--red);
  color: var(--primary-background);
  cursor: pointer;
  font-family: 'Permanent Marker', cursive;
  border-radius: 15px;
  width: 25px;
  display: inline-block;
  transition: all 0.3s;
}

.remove-campaign span:hover {
  background: var(--primary-text);
}

.no-campaigns {
  margin: 20px auto;
  text-align: center;
  display: block;
  font-family: 'Lato', sans-serif;
}

.react-datepicker-wrapper {
  width: 200px;
  float: right;
}

.recaptcha-container {
  width: 50%;
  margin: 0 auto;
}