/* Overcomes LESS compile error with calc(). */
/*// Product selector.

@product-selector-bg-colour: fade(@branding-bg-colour, 95%);
@product-selector-button-bg-colour: white;
@product-selector-text-colour: @text-colour;
@product-selector-border-colour: @text-colour;
@product-selector-selected-border-colour: #c00;
@product-text-height: auto;
*/
@button-font-family : font-family: MatterMedium
@button-font-size: 14px;
@button-text-align : text-align: center;
@font-face {
  font-family: MatterLight;
  src: url('fonts/Matter-Light.woff'), url('/fonts/Matter-Light.woff2');
}
@font-face {
  font-family: MatterRegular;
  src: url('fonts/Matter-Regular.woff'), url('/fonts/Matter-Regular.woff2');
}
@font-face {
  font-family: MatterMedium;
  src: url('fonts/Matter-Medium.woff'), url('/fonts/Matter-Medium.woff2');
}
@font-face {
  font-family: MatterBold;
  src: url('fonts/Matter-Bold.woff'), url('/fonts/Matter-Bold.woff2');
}
/* Was having problems with the iPhone font not always being what the css specified (e.g. in 'm-phone-popup-message-text' class landscape).
It was changing correctly in Chrome browser but not on the iPhone.
This mentions a fix but not really sure why: https://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone. */
body {
  -webkit-text-size-adjust: 100%;
}
*:not(p) {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
*:not(i) {
  zzfont-family: 'Montserrat', sans-serif;
  font-family: 'MatterRegular', sans-serif;
  font-size: 12px;
  zline-height: 120%;
}
html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
body {
  s9overflow-x: auto;
  s9overflow-y: auto;
}
body.disable-horizontal-scrolling {
  s9overflow-x: hidden;
}
body.disable-vertical-scrolling {
  s9overflow-y: hidden;
}
.m-hide {
  display: none;
}
.m-hide-important {
  display: none !important;
}
body.m-phone .mm-tablet-only,
body.m-phone .mm-desktop-only,
body.m-tablet .mm-phone-only,
body.m-tablet .mm-desktop-only,
body.m-desktop .mm-phone-only,
body.m-desktop .mm-tablet-only,
body.m-desktop .mm-phone-or-tablet-only {
  display: none;
}
@media screen and (orientation: portrait) {
  body .mm-landscape-only {
    display: none !important;
  }
  body.m-tablet .mm-portrait-phone-only,
  body.m-desktop .mm-portrait-phone-only {
    display: none !important;
  }
  .mm-landscape-phone-only {
    display: none !important;
  }
}
@media screen and (orientation: landscape) {
  body .mm-portrait-only {
    display: none !important;
  }
  body.m-tablet .mm-landscape-phone-only,
  body.m-desktop .mm-landscape-phone-only {
    display: none !important;
  }
  .mm-portrait-phone-only {
    display: none !important;
  }
  body.m-phone .mm-not-landscape-phone-only {
    display: none !important;
  }
}
.m-page {
  width: 100%;
  height: 100%;
}
.m-main {
  position: relative;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
  top: 0;
  padding-top: 50px;
  height: 100%;
}
.m-scene-render {
  position: relative;
  display: none;
  qqposition: fixed;
  left: 0px;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
  qqqqheight: 100%;
  qqoverflow-x: scroll;
  qqoverflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* momentum scrolling. */
  zzbackground-color: blue;
  qqz-index: -1;
  font-size: 0;
  top: 0;
  height: calc(100% - 60px);
  overflow-x: auto;
  overflow-y: auto;
}
.m-scene-render.disable-horizontal-scrolling {
  overflow-x: hidden;
}
.m-scene-render.disable-vertical-scrolling {
  overflow-y: hidden;
}
.m-desktop .m-scene-render {
  text-align: center;
}
.m-scene-render {
  text-align: center;
}
.m-stock-room-container {
  width: 100%;
  height: 100%;
}
.m-prev-stock-room-icon,
.m-next-stock-room-icon {
  position: fixed;
  padding: 15px 5% 15px 5%;
  bottom: 75px;
  zzbackground-color: red;
  cursor: pointer;
}
.m-prev-stock-room-icon {
  left: 0;
}
.m-next-stock-room-icon {
  right: 0;
}
.visualizer-plugin-render-canvas.mm-fill-height,
.m-stock-room-image-canvas.mm-fill-height {
  width: auto;
  height: 100%;
}
.visualizer-plugin-render-canvas.mm-fill-width,
.m-stock-room-image-canvas.mm-fill-width {
  width: 100%;
  height: auto;
}
.qwerty-m-selectors {
  position: fixed;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
  width: 0;
  height: 0;
  /* qwerty
// Or tools events are blocked (need to set all popups to visibility: visible);
visibility: hidden;
zzpointer-events: none;
background-color: rgba(0,255,0,0.5);
*/
}
.m-popups-container {
  position: fixed;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  zzbackground-color: red;
}
.m-popups-container-dim {
  background-color: rgba(0, 0, 0, 0.25);
  zzbackground-color: red;
}
.m-popup-container {
  width: 310px;
  height: 438px;
  position: relative;
  left: 50%;
  margin-left: calc(-310px/2);
  margin-top: 40px;
  nono-top: 50%;
  nono-margin-top: calc(-438px/2);
  font-size: 0;
}
.nono-m-popup-container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
@media screen and (min-aspect-ratio: 13/9) {
  .m-phone .m-popup-container {
    width: 558px;
    height: 250px;
    left: 50%;
    margin-left: calc(-558px/2);
    margin-top: 20px;
    nono-margin-top: calc(-250px/2);
  }
}
.m-small-phone .m-popup-container {
  top: auto;
  margin-top: -45px;
}
.m-popup {
  position: relative;
  width: 100%;
  border-radius: 12px;
  text-align: center;
  background-color: white;
  display: inline-block;
  vertical-align: middle;
}
.m-small-phone .m-popup {
  background-color: #eee;
}
.m-close-button {
  position: absolute;
  width: 55px;
  top: -10px;
  right: -10px;
  padding: 15px;
  border-radius: 50px;
  background-color: white;
}
.m-small-phone .m-close-button {
  background-color: #eee;
}
.m-button-select {
  background-color: #B4C347;
  color: white;
  border-radius: 8px;
  font-family: MatterMedium;
  font-size: 14px;
  text-align: center;
  width: 80%;
  height: 50px;
  padding: 16px 0 0 0;
  margin: 15px 10% 15px 10%;
  cursor: pointer;
}
@media screen and (orientation: landscape) {
  .mm-phone .m-button-select {
    height: 40px;
    padding-top: 11px;
    width: 60%;
    margin-left: 20%;
  }
}
.m-desktop .zzzzzcm-popup-container,
.m-tablet .zzzzzcm-popup-container {
  margin-top: 50px;
}
.m-desktop .ssssm-popup,
.m-tablet .ssssm-popup {
  /*padding-left
ztop: 10%;
zleft: 50%;
zmargin-left: -187px;
zwidth: 375px;
zheight: 667px;*/
}
.m-desktop .ssssm-popup-container,
.m-tablet .ssssm-popup-container {
  position: relative;
  left: 50%;
  margin-left: -187px;
  width: 375px;
  height: 667px;
  zzbackground-color: green;
}
.m-message-popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 5;
  font-size: 0;
}
.m-message-popup::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.m-message {
  zzposition: fixed;
  position: relative;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  zzborder: 1px solid #444;
  border-radius: 12px;
  text-align: center;
  padding: 20px;
  background-color: #B4C347;
  display: inline-block;
  vertical-align: middle;
}
.m-message-loading-icon {
  width: 41px;
  height: 41px;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 16px;
  background-color: white;
}
.m-message-text {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 16px;
  color: white;
  zzbackground-color: yellow;
}
@media screen and (orientation: landscape) {
  .m-phone .m-message {
    top: 0px;
  }
}
.m-instruction-popup {
  position: fixed;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  top: 110px;
  zzborder: 1px solid #444;
  border-radius: 3px;
  text-align: center;
  padding: 20px;
  background-color: #B4C347;
  z-index: 5;
}
.m-instruction-text {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 16px;
  color: white;
}
@media screen and (orientation: landscape) {
  .m-phone .m-instruction-popup {
    top: 90px;
  }
}
.m-phone-popup .mm-parts {
  font-size: 0;
  /* Stop small inline gaps between groups. */
}
.m-phone-popup .mm-part-1 {
  zzbackground-color: green;
}
.m-phone-popup .mm-part-2 {
  text-align: left;
  zzbackground-color: blue;
}
.m-phone-popup .mm-image {
  margin-top: 15px;
  margin-bottom: 0px;
}
.m-phone-popup .mm-text {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: MatterMedium;
  font-size: 14px;
  line-height: 18px;
  color: #444;
  padding: 0 5px;
  zzbackground-color: yellow;
}
.m-phone-popup .mm-bold {
  font-weight: bold;
}
.m-phone-popup .m-button-select {
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 10px;
}
.m-phone-popup .m-button-select.mm-pair {
  zzwidth: 57%;
  margin-left: 37%;
  width: 25%;
}
.m-phone-popup .m-button-select.mm-small {
  position: absolute;
  right: 0;
  width: 25%;
}
.m-phone-popup .m-button-select:nth-child(4) {
  margin-bottom: 15px;
}
.m-phone-popup .mm-label {
  position: absolute;
  margin-left: 10%;
  text-align: center;
  width: 25%;
  font-family: MatterMedium;
  font-size: 12px;
  zzbackground-color: cyan;
}
.m-phone-popup .mm-label:nth-child(1) {
  padding-top: 5px;
}
@media screen and (orientation: landscape) {
  .m-phone .m-phone-popup .mm-part-1 {
    display: inline-block;
    width: 65%;
    margin-top: 10px;
    padding: 0;
    zzbackground-color: yellow;
  }
  .m-phone .m-phone-popup .mm-part-2 {
    display: inline-block;
    vertical-align: top;
    width: 35%;
    margin-top: 45px;
    zzbackground-color: yellow;
  }
  .m-phone .m-phone-popup .m-button-select:nth-child(6) {
    margin-left: 3%;
    width: 94%;
  }
  .m-phone .m-phone-popup .m-button-select.mm-pair {
    szzmargin-left: 3%;
    width: 28%;
  }
  .m-phone .m-phone-popup .zzzzm-button-select.mm-pair:nth-child(3) {
    line-height: 14px;
  }
  .m-phone .m-phone-popup .m-button-select.mm-small {
    position: absolute;
    right: -9%;
    width: 10%;
  }
  .m-phone .m-phone-popup .mm-label {
    margin-left: 0%;
    width: 12%;
    font-size: 10px;
  }
}
.m-scan-qr-code-popup .m-popup-container {
  width: 800px;
  height: 438px;
  left: 50%;
  margin-left: -400px;
  top: 5%;
  margin-top: 0;
}
.m-scan-qr-code-popup .m-popup {
  padding-top: 25px;
}
.m-scan-qr-code-popup .mm-qr-code-container {
  margin-top: 20px;
}
.m-scan-qr-code-popup .mm-qr-code-container img {
  margin-left: 40%;
  width: 20%;
}
.m-scan-qr-code-popup .mm-text {
  margin-top: 10px;
  margin-bottom: 0px;
  font-family: MatterMedium;
  font-size: 14px;
  color: #444;
  padding: 0 43px;
  zzbackground-color: yellow;
}
.m-scan-qr-code-popup .mm-text b {
  font-family: MatterMedium;
  font-size: 14px;
  color: #444;
}
.m-scan-qr-code-popup .mm-left {
  text-align: left;
}
.m-scan-qr-code-popup .mm-waiting,
.m-scan-qr-code-popup .mm-found {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 30px;
}
.m-scan-qr-code-popup .mm-waiting {
  color: red;
}
.m-scan-qr-code-popup .mm-found i {
  color: green;
}
.m-scan-qr-code-popup .m-button-select {
  margin-top: 10px;
}
@media screen and (orientation: landscape) {
  .m-phone .m-scan-qr-code-popup .m-phone-popup .mm-part-1 {
    display: inline-block;
    width: 50%;
    margin-top: 10px;
  }
  .m-phone .m-scan-qr-code-popup .m-phone-popup .mm-part-2 {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-top: 45px;
  }
}
.m-stairs-guidance-popup .mm-title {
  font-family: MatterMedium;
  font-size: 16px;
  line-height-size: 18px;
  color: #444;
  margin-top: 15px;
  margin-bottom: 2px;
  zzbackground-color: yellow;
}
.m-stairs-guidance-popup .mm-item {
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}
.m-stairs-guidance-popup .mm-text {
  margin-top: 6px;
  font-family: MatterMedium;
  font-size: 12px;
  margin-bottom: 0px;
}
.m-stairs-guidance-popup .mm-image {
  margin: 5px;
}
.m-stairs-guidance-popup .mm-image2 {
  margin: 5px;
  margin-left: 15px;
  width: 125px;
}
.m-stairs-guidance-popup .mm-image3 {
  margin: 5px;
  width: 100px;
}
@media screen and (orientation: landscape) {
  .m-phone .m-stairs-guidance-popup .mm-line-break {
    display: none;
  }
}
.m-uyo-stairs-continue-help {
  position: fixed;
  width: 60px;
  height: 60px;
  left: 50%;
  margin-left: -30px;
  bottom: 40px;
  border-radius: 90px;
  padding: 2px;
  background-color: white;
  text-align: center;
}
.m-uyo-stairs-continue-help .mm-ok-button {
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 90px;
  line-height: 22px;
}
.m-uyo-stairs-continue-help-last .mm-ok-button {
  line-height: 13px;
}
.m-uyo-stairs-stage1-help .mm-dim,
.m-uyo-stairs-stage2-help .mm-dim,
.m-uyo-stairs-stage3-help .mm-dim,
.m-uyo-stairs-stage4-help .mm-dim {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
.m-uyo-stairs-stage1-help .mm-container,
.m-uyo-stairs-stage2-help .mm-container,
.m-uyo-stairs-stage3-help .mm-container,
.m-uyo-stairs-stage4-help .mm-container {
  position: fixed;
  width: 290px;
  left: 50%;
  margin-left: -145px;
  top: 70px;
  border-radius: 10px;
  padding: 15px 25px 15px 25px;
  background-color: white;
}
.m-uyo-stairs-stage1-help .mm-text,
.m-uyo-stairs-stage2-help .mm-text,
.m-uyo-stairs-stage3-help .mm-text,
.m-uyo-stairs-stage4-help .mm-text {
  font-family: MatterMedium;
  font-size: 11px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  zzbackground-color: yellow;
}
.m-uyo-stairs-stage1-help .mm-text b,
.m-uyo-stairs-stage2-help .mm-text b,
.m-uyo-stairs-stage3-help .mm-text b,
.m-uyo-stairs-stage4-help .mm-text b {
  font-family: MatterBold;
  font-weight: bold;
}
.m-uyo-stairs-stage1-help .mm-image,
.m-uyo-stairs-stage2-help .mm-image,
.m-uyo-stairs-stage3-help .mm-image,
.m-uyo-stairs-stage4-help .mm-image {
  margin-top: 15px;
  margin-bottom: 15px;
}
.m-uyo-stairs-stage1-help .mm-ok-button,
.m-uyo-stairs-stage2-help .mm-ok-button,
.m-uyo-stairs-stage3-help .mm-ok-button,
.m-uyo-stairs-stage4-help .mm-ok-button {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 31%;
  width: 38%;
}
/*
@media screen and (orientation:landscape)
{

	.m-phone
	{

		.m-stairs-guidance-popup
		{

		.mm-line-break
		{
		display: none;
		}

		}

	}

}
*/
.m-before-take-photo-popup .mm-container {
  padding: 20px 10px 0px 10px;
}
.m-before-take-photo-popup .mm-title {
  margin: 0 35px 16px 35px;
  font-size: 16px;
  color: #444;
  font-family: MatterMedium;
  zzbackground-color: yellow;
}
.m-before-take-photo-popup .mm-text {
  margin-left: 30px;
  margin-right: 10px;
  text-align: left;
  font-size: 16px;
  color: #444;
  zzbackground-color: yellow;
}
@media screen and (orientation: landscape) {
  .m-phone .m-before-take-photo-popup .m-button-select {
    margin-left: 35%;
    width: 30%;
  }
}
.m-after-take-photo-popup .mm-container {
  padding: 20px 10px 0px 10px;
}
.m-after-take-photo-popup .mm-title {
  margin: 0 35px 16px 35px;
  font-size: 16px;
  color: #444;
  font-family: MatterMedium;
  zzbackground-color: yellow;
}
.m-after-take-photo-popup .mm-text {
  font-size: 16px;
  color: #444;
  zzbackground-color: yellow;
}
@media screen and (orientation: landscape) {
  .m-phone .m-after-take-photo-popup .m-button-select {
    margin-left: 35%;
    width: 30%;
  }
}
.m-after-render-popup .mm-container {
  padding: 20px 10px 0px 10px;
}
.m-after-render-popup .mm-title {
  margin: 0 35px 16px 35px;
  font-size: 16px;
  color: #444;
  font-family: MatterMedium;
  zzbackground-color: yellow;
}
.m-after-render-popup .mm-text {
  font-size: 16px;
  color: #444;
  zzbackground-color: yellow;
}
.m-after-render-popup .m-button-select.mm-order-sample {
  background-color: #88898A;
}
.m-after-render-popup .m-button-select.mm-find-retailer {
  background-color: #C2CAD4;
}
.m-after-render-popup .m-button-select.mm-save-to-favourites {
  background-color: #ECD4D5;
}
.m-after-render-popup .m-button-select {
  text-align: left;
}
.m-after-render-popup .m-button-select p {
  text-align: center;
  color: white;
  font-family: MatterMedium;
  font-size: 14px;
  margin-top: 0px;
}
.m-after-render-popup .m-button-select img {
  position: absolute;
  margin-left: 12px;
  margin-top: -1px;
}
@media screen and (orientation: landscape) {
  .m-phone .m-after-render-popup .m-button-select {
    margin-left: 35%;
    width: 30%;
  }
}
.m-product-not-allowed-popup .mm-title {
  font-family: MatterMedium;
  font-size: 16px;
  line-height-size: 18px;
  color: #444;
  margin: 35px 30px 10px 30px;
  zzbackground-color: yellow;
}
.m-patch-and-mask-popup .mm-container {
  padding: 30px 10px 0px 10px;
}
.m-patch-and-mask-popup .mm-title {
  margin-top: 0px;
  font-size: 16px;
  color: #444;
  font-family: MatterMedium;
  zzbackground-color: yellow;
}
.m-patch-and-mask-popup .mm-heading {
  text-align: left;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: bold;
  color: #444;
  zzbackground-color: yellow;
}
.m-patch-and-mask-popup .mm-text {
  margin-top: 0px;
  text-align: left;
  font-size: 12px;
  color: #444;
  zzbackground-color: yellow;
}
.m-patch-and-mask-popup .mm-patch-and-mask-buttons {
  font-size: 0;
  margin-bottom: 15px;
}
.m-patch-and-mask-popup .mm-patch-and-mask-button {
  display: inline-block;
  width: 40%;
  margin: 0 5%;
  color: black;
  border-radius: 8px;
  font-family: MatterMedium;
  font-size: 14px;
  text-align: center;
  height: 50px;
  zzpadding: 16px 0 0 0;
  background-color: #B4C347;
  cursor: pointer;
}
.m-patch-and-mask-popup .mm-button-icon {
  margin-top: 6px;
  height: 24px;
  color: #444;
  zzbackground-color: yellow;
}
.m-patch-and-mask-popup .mm-button-text {
  margin-top: 0px;
  font-size: 10px;
  color: black;
  zzbackground-color: cyan;
}
.m-header {
  position: fixed;
  ssz-index: 1;
  left: 0px;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: white;
}
.m-header .mm-logo {
  margin-left: 10px;
  margin-top: 5px;
  height: 42px;
}
.m-header .mm-menu {
  position: fixed;
  right: 0px;
  top: 0px;
  padding: 17px;
  text-size: 13px;
  cursor: pointer;
  zzbackground-color: cyan;
}
.m-header .mm-search {
  position: fixed;
  right: 65px;
  top: 0px;
  padding: 14px;
  text-size: 13px;
  cursor: pointer;
  zzbackground-color: cyan;
}
.m-header .mm-num-favourites {
  position: fixed;
  right: 4px;
  top: 4px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  text-align: center;
  padding-top: 2px;
  border-radius: 20px;
  background-color: red;
  color: white;
  pointer-events: none;
}
.m-header .mm-disabled {
  opacity: 0.5;
  cursor: default;
}
.m-select-product-popup .m-close-button {
  z-index: 1;
}
.m-select-product-popup .mm-parts {
  font-size: 0;
  /* Stop small inline gaps between groups. */
}
.m-select-product-popup .mm-part-1 {
  position: relative;
  zzbackground-color: green;
}
.m-select-product-popup .mm-search-container {
  position: relative;
  margin-top: 20px;
  margin-bottom: 5px;
}
.m-select-product-popup .mm-search-container input {
  margin: 0 15% 0 15%;
  font-size: 14px;
  width: 70%;
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #888;
}
.m-select-product-popup .mm-clear {
  position: absolute;
  right: 50px;
  bottom: 8px;
  font-size: 24px;
  color: #444;
  zzbackground-color: cyan;
  z-index: 10;
}
.m-select-product-popup .mm-match-container.mm-showing-stairs {
  display: inline-block;
  width: 15%;
  margin-right: 1px;
  zbackground-color: red;
}
.m-select-product-popup .mm-matches p,
.m-select-product-popup .mm-no-matches p {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.m-select-product-popup .mm-matches-inject {
  margin-bottom: 5px;
  font-size: 0px;
}
.m-select-product-popup .mm-match {
  width: 90%;
  height: 38px;
  display: table;
  text-align: center;
  margin: 3px 5% 3px 5%;
  padding: 0 5px;
  background-color: #B4C347;
}
.m-select-product-popup .mm-match p {
  color: white;
  display: table-cell;
  vertical-align: middle;
}
.m-select-product-popup .mm-help-button {
  position: absolute;
  right: 46px;
  top: 45px;
}
.m-select-product-popup .mm-title {
  margin-left: -24px;
  margin-top: 5px;
  margin-bottom: 0px;
  font-family: MatterRegular;
  font-size: 14px;
  line-height: 16px;
  color: #444;
  height: 19px;
  zzbackground-color: yellow;
}
.m-select-product-popup .mm-help-popup {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  zzbackground-color: blue;
}
.m-select-product-popup .mm-help-container {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.25);
  zzbackground-color: green;
}
.m-select-product-popup .mm-help {
  position: relative;
  margin-top: 100px;
  left: 50%;
  width: 280px;
  margin-left: -140px;
  padding: 30px 15px 15px 15px;
  border-radius: 12px;
  background-color: #B4C347;
}
.m-select-product-popup .mm-text {
  zpadding: 15px 15px;
  font-size: 14px;
  color: white;
  text-align: left;
}
.m-select-product-popup .mm-text span {
  font-size: 14px;
}
.m-select-product-popup .mm-help-close-button {
  position: absolute;
  width: 35px;
  top: 3px;
  right: 3px;
  background-color: transparent;
  padding: 5px;
  border-radius: 50px;
}
.m-select-product-popup .mm-part-2 {
  zzbackground-color: blue;
}
.m-select-product-popup .mm-product-code-padding {
  height: 22px;
  zzbackground-color: cyan;
}
.m-select-product-popup .mm-product-code {
  margin-top: 3px;
  margin-bottom: 0px;
  margin-left: 35%;
  width: 30%;
  height: 19px;
  color: white;
  text-align: center;
  font-size: 15px;
  zzbackground-color: green;
}
.m-select-product-popup .mm-product-code:not(.mm-valid) {
  color: red;
}
.m-select-product-popup .mm-product-code.mm-valid {
  color: #0B0;
}
.m-select-product-popup .mm-digits {
  font-size: 0;
  /* Stop small inline gaps between groups. */
  margin-bottom: 8px;
}
.m-select-product-popup .mm-group {
  font-size: 0;
  /* Stop small inline gaps between buttons. */
}
.m-select-product-popup .mm-digit-button {
  display: inline-block;
  font-family: MatterLight;
  font-size: 32px;
  width: 60px;
  height: 60px;
  padding-top: 9px;
  margin: 4px 10px 4px 10px;
  border-radius: 70px;
  background-color: #e4e4e4;
  vertical-align: top;
}
.m-select-product-popup .mm-digit-button.mm-disabled {
  opacity: 0.6;
}
.m-select-product-popup .mm-group:nth-child(4) {
  zzmargin-bottom: 10px;
}
.m-select-product-popup .mm-delete-button,
.m-select-product-popup .mm-ok-button {
  display: inline-block;
  width: 60px;
  height: 60px;
  top: 18px;
  margin: 5px 10px 5px 10px;
  border-radius: 70px;
  background-color: #e4e4e4;
  vertical-align: top;
}
.m-select-product-popup .mm-delete-button img {
  margin-left: -3px;
  margin-top: 18px;
}
.m-select-product-popup .mm-ok-button img {
  margin-top: 21px;
}
.m-select-product-popup .mm-ok-button.mm-valid {
  background-color: #B4C347;
}
.m-select-product-popup .mm-choose-from-favourites-button {
  margin-top: 5px;
  zzmargin-bottom: 20px;
  margin-bottom: 10px;
}
.m-select-product-popup .mm-standard-runners-button {
  zzmargin-top: -10px;
  margin-top: 5px;
}
.m-select-product-popup .mm-choose-from-favourites-button-container:nth-child(1) {
  display: none;
}
.m-small-phone .m-select-product-popup .mm-help-container {
  top: 0;
  height: 100%;
}
@media screen and (orientation: portrait) {
  .m-phone .m-select-product-popup .m-popup {
    margin-top: -30px;
  }
}
@media screen and (min-aspect-ratio: 13/9) {
  .m-phone .m-select-product-popup .mm-part-1 {
    display: inline-block;
    width: 50%;
  }
  .m-phone .m-select-product-popup .mm-title {
    margin-left: -22px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .m-phone .m-select-product-popup .mm-help-button {
    right: 32px;
    top: 80px;
  }
  .m-phone .m-select-product-popup .mm-help {
    margin-top: 6px;
  }
  .m-phone .m-select-product-popup .mm-choose-from-favourites-button {
    margin-top: 15px;
  }
  .m-phone .m-select-product-popup .mm-match {
    height: 31px;
  }
  .m-phone .m-select-product-popup .mm-part-2 {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }
  .m-phone .m-select-product-popup .mm-digits {
    padding: 7px 0 7px 0;
    margin-bottom: 0px;
  }
  .m-phone .m-select-product-popup .mm-digit-button,
  .m-phone .m-select-product-popup .mm-delete-button,
  .m-phone .m-select-product-popup .mm-ok-button {
    font-size: 26px;
    width: 45px;
    height: 45px;
    padding-top: 6px;
    margin: 4px 8px 4px 8px;
    zzbackground-color: yellow;
  }
  .m-phone .m-select-product-popup .mm-delete-button img {
    width: 25px;
    margin-top: 7px;
  }
  .m-phone .m-select-product-popup .mm-ok-button img {
    width: 21px;
    margin-top: 0px;
  }
}
.m-tools-container {
  position: fixed;
  margin-top: 50px;
  bottom: 0px;
  left: 5%;
  width: 90%;
  height: 60px;
  padding-bottom: 3px;
  zztext-align: right;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: white;
  font-size: 0;
}
.m-tools-container .m-tool-button {
  display: inline-block;
  width: 33.33%;
  height: 50px;
  text-align: center;
  margin-top: 3px;
  cursor: pointer;
  zzbackground-color: green;
}
.m-tools-container .m-tool-button.mm-shift-right {
  margin-left: 16.66%;
}
.m-tools-container .mm-icon {
  margin-top: 8px;
  zpadding: 7px 5px 3px 5px;
  zfont-size: 13px;
  height: 27px;
  color: #444;
  zzbackground-color: yellow;
}
.m-tools-container .mm-text {
  margin-top: 3px;
  font-size: 10px;
  color: black;
  zzbackground-color: cyan;
}
.m-tools-container .mm-disabled {
  opacity: 0.5;
  cursor: default;
}
.m-recently-used-products-container {
  position: fixed;
  margin-top: 50px;
  top: 0px;
  left: 0;
  width: 56px;
  padding-bottom: 3px;
  text-align: right;
  background-color: rgba(0, 0, 0, 0.5);
  zzbackground-color: yellow;
}
.m-recently-used-products-container .mm-product-thumbnail-container {
  float: left;
  right: 5px;
  width: 52px;
  height: 52px;
  text-align: center;
  margin-left: 2px;
  margin-top: 2px;
  cursor: pointer;
  zzbackground-color: #f1f1f1;
}
.m-recently-used-products-container .mm-background-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-size: 3200% 3200%;
  background-repeat: no-repeat;
  clip-path: inset(1px 1px 1px 1px);
}
.m-favourite-products-popup .mm-top {
  height: 30px;
  zzbackground-color: cyan;
}
.m-favourite-products-popup .mm-title {
  font-family: MatterMedium;
  font-size: 16px;
  line-height-size: 18px;
  color: #444;
  margin-top: 15px;
  margin-bottom: 2px;
  zzbackground-color: yellow;
}
.m-favourite-products-popup .sssssmm-title {
  zzpadding-top: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 18px;
  color: #444;
  text-align: center;
}
.m-favourite-products-popup .mm-favourite-products-list {
  height: 380px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll. */
  font-size: 0;
  /* Stop small inline gaps. */
  zzbackground-color: green;
  margin-bottom: 10px;
}
.m-favourite-products-popup .m-favourite-products-thumbnails-inject {
  font-size: 0;
  /* Stop small inline gaps. */
}
.m-favourite-products-popup .mm-product-thumbnail-container {
  position: relative;
  float: left;
  width: 48%;
  margin: 1%;
  vertical-align: top;
  padding: 4%;
  text-align: center;
  qqbackground-color: white;
  zzbackground-color: yellow;
  cursor: pointer;
}
.m-favourite-products-popup .mm-product-image {
  width: 40%;
  border-radius: 8px;
  vertical-align: top;
}
.m-favourite-products-popup .mm-product-background-image {
  zzzdisplay: inline-block;
  margin: 4% 4% 0 4%;
  width: 92%;
  height: 0;
  padding-bottom: 92%;
  zzzbackground-size: 3232% 3232%;
  background-size: 3200% 3200%;
  background-repeat: no-repeat;
  clip-path: inset(1px 1px 1px 1px);
}
.m-favourite-products-popup .mm-product-text {
  width: 100%;
  height: 27px;
  overflow: hidden;
  zzbackground-color: cyan;
}
.m-favourite-products-popup .mm-product-text p {
  padding-top: 2px;
  color: #444;
  font-size: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.m-favourite-products-popup .mm-delete-button {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 10px;
  padding: 5px;
  border: 1px solid #888;
  border-radius: 30px;
  background-color: white;
  z-index: 10;
}
@media screen and (orientation: landscape) {
  .m-phone .m-favourite-products-popup .mm-favourite-products-list {
    height: 193px;
  }
  .m-phone .m-favourite-products-popup .mm-product-thumbnail-container {
    width: 23%;
    margin: 1%;
    padding: 0;
  }
  .m-phone .m-favourite-products-popup .mm-delete-button {
    top: 0px;
    right: 0px;
  }
}
.m-standard-runners-popup .mm-top {
  height: 30px;
  zzbackground-color: cyan;
}
.m-standard-runners-popup .mm-title {
  font-family: MatterMedium;
  font-size: 16px;
  line-height-size: 18px;
  color: #444;
  margin-top: 15px;
  margin-bottom: 2px;
  zzbackground-color: yellow;
}
.m-standard-runners-popup .sssssmm-title {
  zzpadding-top: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 18px;
  color: #444;
  text-align: center;
}
.m-standard-runners-popup .mm-products-list {
  height: 380px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll. */
  font-size: 0;
  /* Stop small inline gaps. */
  zzbackground-color: green;
  margin-bottom: 10px;
}
.m-standard-runners-popup .m-favourite-products-thumbnails-inject {
  font-size: 0;
  /* Stop small inline gaps. */
}
.m-standard-runners-popup .mm-product-thumbnail-container {
  position: relative;
  float: left;
  width: 48%;
  margin: 1%;
  vertical-align: top;
  padding: 4%;
  text-align: center;
  qqbackground-color: white;
  zzbackground-color: yellow;
  cursor: pointer;
}
.m-standard-runners-popup .mm-product-image {
  width: 40%;
  border-radius: 8px;
  vertical-align: top;
}
.m-standard-runners-popup .mm-product-background-image {
  zzzdisplay: inline-block;
  margin: 4% 4% 0 4%;
  width: 92%;
  height: 0;
  padding-bottom: 92%;
  zzzbackground-size: 3232% 3232%;
  background-size: 3200% 3200%;
  background-repeat: no-repeat;
  clip-path: inset(1px 1px 1px 1px);
}
.m-standard-runners-popup .mm-product-text {
  width: 100%;
  height: 27px;
  overflow: hidden;
  zzbackground-color: cyan;
}
.m-standard-runners-popup .mm-product-text p {
  padding-top: 2px;
  color: #444;
  font-size: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.m-standard-runners-popup .mm-delete-button {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 10px;
  padding: 5px;
  border: 1px solid #888;
  border-radius: 30px;
  background-color: white;
  z-index: 10;
}
@media screen and (orientation: landscape) {
  .m-phone .m-favourite-products-popup .mm-products-list {
    height: 193px;
  }
  .m-phone .m-favourite-products-popup .mm-product-thumbnail-container {
    width: 23%;
    margin: 1%;
    padding: 0;
  }
  .m-phone .m-favourite-products-popup .mm-delete-button {
    top: 0px;
    right: 0px;
  }
}
.m-save-and-share-popup .mm-title {
  margin-top: 20px;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  font-family: MatterMedium;
  font-size: 16px;
  color: #444;
  zzbackground-color: yellow;
}
.m-save-and-share-popup .mm-parts {
  font-size: 0;
  /* Stop small inline gaps between groups. */
}
.m-save-and-share-popup .mm-heading {
  padding: 0 15px;
  font-size: 12px;
  margin-top: 16px;
  margin-bottom: 3px;
  color: #444;
  font-weight: bold;
  text-align: left;
  zzbackground-color: cyan;
}
.m-save-and-share-popup .mm-text {
  padding: 0 15px;
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: #444;
  text-align: left;
  zzbackground-color: cyan;
}
.m-save-and-share-popup .mm-email-button {
  text-decoration: none;
}
.m-save-and-share-popup .mm-preparing-email {
  margin-top: 33px;
  margin-bottom: 33px;
  text-align: center;
}
.m-save-and-share-popup .mm-close-button {
  margin: auto;
  margin-top: 15px;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  zzbackground-color: yellow;
}
.m-save-and-share-popup .mm-close-button i {
  margin-top: 2px;
  color: #444;
  zzbackground-color: cyan;
}
@media screen and (orientation: landscape) {
  .m-phone .m-save-and-share-popup .mm-part {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    zzbackground-color: yellow;
  }
  .m-phone .m-save-and-share-popup .mm-part:nth-child(3) {
    width: 100%;
  }
  .m-phone .m-save-and-share-popup .mm-title {
    margin-top: 10px;
  }
  .m-phone .m-save-and-share-popup .mm-heading,
  .m-phone .m-save-and-share-popup .mm-text {
    padding: 0 10px;
    font-size: 11px;
  }
  .m-phone .m-save-and-share-popup .mm-heading {
    margin-top: 5px;
  }
  .m-phone .m-save-and-share-popup .mm-part:nth-child(3) .mm-heading {
    text-align: center;
  }
  .m-phone .m-save-and-share-popup .m-button-select {
    margin-left: 30%;
    width: 40%;
    margin-top: 5px;
    margin-bottom: 10px;
  }
}
.m-intro-container {
  position: fixed;
  left: 0;
  top: 50px;
  margin: 0;
  width: 100%;
  height: calc(100% - 50px);
  font-size: 0;
  /* Stop small inline gaps. */
  background-image: url(images/home_img_desktop.jpg);
  background-repeat: no-repeat;
  background-position: center;
  qqbackground-size: auto 100%;
  background-size: cover;
}
.m-intro-container .mm-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.m-intro-container .mm-gui {
  position: relative;
  z-index: 1;
}
.m-intro-container .mm-part-1 {
  zzbackground-color: green;
}
.m-intro-container img {
  margin-top: 90px;
  margin-left: 30%;
  width: 40%;
}
.m-intro-container .mm-part-2 {
  zzbackground-color: blue;
}
.m-intro-container .mm-title {
  font-family: MatterMedium;
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 24px;
  color: white;
  text-align: center;
  zzbackground-color: cyan;
}
.m-intro-container p {
  font-size: 16px;
  line-height: 18px;
  color: white;
  text-align: center;
  margin-bottom: 30px;
  zzbackground-color: cyan;
}
.m-intro-container .m-button-select {
  margin-left: 25%;
  width: 50%;
}
.m-tablet .m-intro-container img {
  margin-top: 150px;
  margin-left: 37%;
  width: 26%;
}
.m-tablet .m-intro-container .mm-title {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 36px;
  line-height: 40px;
}
.m-tablet .m-intro-container p {
  font-size: 18px;
  line-height: 23px;
}
.m-tablet .m-intro-container .m-button-select {
  margin-left: 40%;
  width: 20%;
}
.m-desktop .m-intro-container {
  qqbackground-size: cover;
}
.m-desktop .m-intro-container img {
  margin-top: 150px;
  margin-left: 45%;
  width: 10%;
}
.m-desktop .m-intro-container .mm-title {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 36px;
  line-height: 40px;
}
.m-desktop .m-intro-container p {
  font-size: 18px;
  line-height: 23px;
}
.m-desktop .m-intro-container .m-button-select {
  margin-left: calc(50% - 70px);
  /* Overcomes LESS compile error with calc(). */
  margin-right: calc(50% - 70px);
  /* Overcomes LESS compile error with calc(). */
  width: 140px;
}
@media screen and (orientation: landscape) {
  .m-phone .m-intro-container {
    qqbackground-size: 100% auto;
  }
  .m-phone .m-intro-container .mm-gui {
    font-size: 0;
    /* Stop small inline gaps. */
  }
  .m-phone .m-intro-container .mm-part-1 {
    display: inline-block;
    width: 40%;
  }
  .m-phone .m-intro-container img {
    margin: 80px 0 0 25%;
    width: 50%;
  }
  .m-phone .m-intro-container .mm-part-2 {
    display: inline-block;
    vertical-align: top;
    width: 60%;
  }
  .m-phone .m-intro-container .mm-title {
    margin-top: 90px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 16px;
  }
  .m-phone .m-intro-container p {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 30px;
  }
  .m-tablet .m-intro-container img {
    margin-top: 80px;
    margin-left: 40%;
    width: 20%;
  }
  .m-tablet .m-intro-container .mm-title {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 40px;
  }
}
.m-menu {
  position: fixed;
  right: -100%;
  zztop: 50px;
  top: 0;
  width: 100%;
  zzheight: calc(100% - 50px);
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.001);
}
.m-menu-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 90px 10px 10px 10px;
  background-color: #B4C347;
}
.m-menu .m-close-button {
  top: 10px;
  right: 10px;
  background-color: transparent;
}
.zzzzm-menu-container .m-item {
  width: 100%;
}
.m-menu-container .m-menu-selector.mm-favourites img {
  width: 24px;
}
.m-visualizeit-logo {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10px;
  text-align: center;
  zzbackground-color: yellow;
}
.m-visualizeit-logo a {
  display: inline-block;
  width: 126px;
  height: 30px;
  padding-top: 5px;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #444;
  text-align: center;
}
.m-visualizeit-logo span {
  font-family: Arial, Segoe UI, Sans-Serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 20px;
  vertical-align: top;
  color: white;
  text-decoration: none;
  zzbackground-color: blue;
}
.m-visualizeit-logo img {
  vertical-align: top;
  zzbackground-color: red;
}
@media screen and (orientation: landscape) {
  .m-phone .m-menu-container {
    padding-top: 10px;
  }
  .m-phone .m-visualizeit-logo {
    padding-right: 10px;
    text-align: right;
  }
}
.m-menu-selector {
  color: white;
  height: 40px;
  width: 100%;
  padding-top: 10px;
  padding-left: 7px;
  cursor: pointer;
  zzmargin-bottom: 2px;
  zzbackground-color: blue;
}
.m-menu-selector:not(.mm-disabled) {
  cursor: pointer;
}
.mm-icon-container {
  display: inline-block;
  width: 40px;
  text-align: right;
  zzbackground-color: red;
}
.m-menu-selector img {
  margin-right: 13px;
  vertical-align: bottom;
  zzbackground-color: yellow;
}
.m-menu-selector span {
  font-size: 20px;
  zzline-height: 42px;
  vertical-align: bottom;
  zzbackground-color: cyan;
}
.m-menu-selector.mm-disabled {
  opacity: 0.6;
}
.m-small-phone .m-menu-selector {
  height: 35px;
}
@media screen and (orientation: landscape) {
  .qqm-menu-selector {
    height: 30px;
    padding-top: 5px;
  }
  .qqm-menu-selector i {
    font-size: 16px;
    min-width: 18px;
    zzbackground-color: cyan;
  }
  .qqm-menu-selector span {
    font-size: 16px;
    zzbackground-color: cyan;
  }
}