:root {
  --pp-primary-blue: #1f59b5;
  --pp-stock-green: #2dbf46;
  --pp-stock-orange: #efb220;
  --pp-alt-bg-yellow: #fcf2ca;
  --pp-border-gray: #cacaca;
  --pp-text-gray: #5e5e5e;
  --pp-text-light-gray: #b8b8b8;
  --pp-text-muted: #c5c5c5;
  --pp-color-danger: red;
  --pp-color-white: white;
  --pp-spacing-xs: 5px;
  --pp-spacing-sm: 10px;
  --pp-spacing-md: 15px;
  --pp-spacing-lg: 20px;
  --pp-radius-sm: 7px;
  --pp-font-size-md: 18px;
  --pp-font-size-lg: 20px;
}

div.alternatieven {
  padding: var(--pp-spacing-xs) 0;
  margin-top: var(--pp-spacing-sm);
  clear: both;
}

h1.alternatiefType {
  font-size: 17px;
  margin: var(--pp-spacing-lg) 0 var(--pp-spacing-sm) 0;
  font-weight: bold;
  color: var(--pp-text-gray);
}

div.alternatiefItem {
  display: flex;
  margin-bottom: var(--pp-spacing-lg);
  padding: var(--pp-spacing-lg);
  background-color: var(--pp-alt-bg-yellow);
  border: 1px solid var(--pp-border-gray);
  position: relative;
}

div.alternatiefItem div.col1,
div.alternatiefItem div.col2,
div.alternatiefItem div.col3 {
  width: 33.33%;
}

div.alternatiefItem div.col2 {
  text-align: right;
  padding-right: var(--pp-spacing-lg);
}

div.alternatiefItem img {
  margin-right: var(--pp-spacing-md);
  float: left;
  width: 160px;
}

div.alternatiefItem h1 {
  margin: 0 0 var(--pp-spacing-xs) 0;
  padding: 0;
  font-size: var(--pp-font-size-lg);
  font-weight: bold;
}

div.alternatiefItem h1 a {
  text-decoration: none;
  color: var(--pp-primary-blue);
}

div.alternatiefItem p.prijs {
  font-size: 22px;
  font-weight: bold;
  color: var(--pp-text-gray);
  margin: 0;
}

div.alternatiefItem p.btw {
  margin: 0;
  font-size: 14px;
  color: var(--pp-text-light-gray);
}

div.alternatiefItem p.inc_btw {
  color: var(--pp-text-light-gray);
  margin: 0;
  font-size: 11px;
}

div.alternatiefItem p.btw span.inc_btw_price,
div.alternatiefItem p.btw span.inc_btw_label {
  color: var(--pp-text-light-gray);
  font-size: 11px;
}

div.alternatiefItem p.besparing {
  font-size: var(--pp-font-size-md);
  font-weight: bold;
  margin-top: var(--pp-spacing-sm);
  color: #333;
}

div.alternatiefItem p.besparing span.material-icons {
  vertical-align: middle;
  color: var(--pp-color-danger);
  margin-right: var(--pp-spacing-xs);
  font-size: var(--pp-spacing-lg);
}

div.alternatiefItem p.kortingContainer {
  margin: 0 0 var(--pp-spacing-xs) 0;
}

div.alternatiefItem p.kortingContainer span.korting {
  color: var(--pp-color-danger);
  font-weight: bold;
}

div.alternatiefItem p.kortingContainer span.brutoPrijs {
  color: var(--pp-text-muted);
  font-weight: bold;
  margin-right: var(--pp-spacing-xs);
  text-decoration: line-through;
}

div.alternatiefItem form.itemAdd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

div.alternatiefItem form.itemAdd p.voorraad-status {
  margin: 0 0 var(--pp-spacing-sm) 0;
  padding: var(--pp-radius-sm) var(--pp-spacing-md);
  min-width: 180px;
  color: var(--pp-color-white);
  font-weight: bold;
  display: flex;
  align-items: center;
}

div.alternatiefItem form.itemAdd p.voorraad-status span {
  color: var(--pp-color-white);
}

div.alternatiefItem form.itemAdd p.voorraad-status span.material-icons {
  margin-right: 8px;
  font-size: var(--pp-font-size-md);
  color: var(--pp-color-white);
}

div.alternatiefItem form.itemAdd p.voorraad-status.leverbaar {
  background-color: var(--pp-stock-green);
}

div.alternatiefItem form.itemAdd p.voorraad-status.vertraagd-leverbaar {
  background-color: var(--pp-stock-orange);
}

div.alternatiefItem div.shopping-inputs {
  display: flex;
  align-items: center;
}

div.alternatiefItem div.quantity-buttons input {
  background-color: var(--pp-color-white);
}

div.alternatiefItem input.shopping-cart {
  background-color: var(--pp-primary-blue);
  border: none;
  border-radius: var(--pp-radius-sm);
  cursor: pointer;
  margin-left: var(--pp-spacing-sm);
  color: var(--pp-color-white);
  font-size: 24px;
  padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 60px;
}

@media only screen and (max-width: 800px) {
  div.alternatiefItem {
    flex-wrap: wrap;
  }
  div.alternatiefItem div.col1,
  div.alternatiefItem div.col2,
  div.alternatiefItem div.col3 {
    width: 100%;
    text-align: left !important;
    margin-bottom: var(--pp-spacing-md);
  }
  div.alternatiefItem form.itemAdd {
    align-items: flex-start;
  }
}