@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --clr-black: #161616;
  --clr-red: #E62432;
  --clr-yellow: #F1C21B;
  --fs-body: 24px;
}


#QR_slider {
  height: 100%;
}

/* ===== Slide Progress =====*/
.slide-progress {
  width: 460px;
}

.sp-cats {
  color: #525252;
  font-weight: 300;
  display: flex;
  margin-bottom: .5rem;
}

.sp-cats span[class^="cat"] {
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.sp-cats span[class^="cat"]::before {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2";
  content:'⌈';
  position: absolute;
  left: 3px;
  top: 2px;
}

.sp-cats span[class^="cat"]::after {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2";
  content:'⌉';
  position: absolute;
  right: 3px;
  top: 2px;
}

.sp-cats .cat1, .sp-cats .cat3 {
  width: 40%;
}

.sp-cats .cat2 {
  width: 30%;
}

ul.sp-ticks {
  --clr-tick: #f4f4f4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  position: relative;
}

ul.sp-ticks::before {
  content: '';
  height: 16px;
  width: 100%;
  border-radius: 16px;
  background-color: var(--clr-tick);
  position: absolute;
  z-index: 0;
  top: 9px;
}

ul.sp-ticks li::before {
  content: '';
  height: 26px;
  width: 26px;
  background-color: var(--clr-tick);
  border: 3px solid #FFF;
  /* outline: 2px solid var(--clr-tick); */
  box-shadow: 0 0 0 2px var(--clr-tick);
  display: block;
  border-radius: 48px;
  z-index: 1;
}

ul.sp-ticks li.active-tick::before {
  background-color: #E62432;
}

ul.sp-ticks li {
  display: inline-flex;
}

.slide {
  height: 100%;
}

.button {
  font-size: 20px;
  font-weight: 700;
  border-radius: 64px;
  transition: all .3s ease;
}

.top-row {
  border-bottom: 1px solid #707070;
  min-height: 112px;
  padding: 1rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.top-row h2 {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.slide-tabs {
  display: inline-block;
  float: right;
  min-height: 64px;
  background: rgba(0, 0, 0, .2);
}

section.main-row {
  display: flex;
  flex-wrap: nowrap;
  color: #525252;
  height: calc(100dvh - 243px); 
  /* ==with back button== 
  height: calc(100dvh - 243px);
  all main-row font-size: reduce to -4px */
  /* min-height: 830px; */
}

.main-row h4 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4; 
  margin: 0 0 2rem;
  padding: 0;
  text-wrap: balance;
}

.main-row .col-left,
.main-row .col-mid,
.main-row .col-right {
  display: inline-block;
  padding: 14px;
}

/* --- left column --- */
.col-left {
  width: 400px;
  flex: 0 0 400px;
  background-color: rgba(244, 244, 244, 1);
}

h4.item-name {
  text-align: center;
}

figure {
  margin: 0 1rem !important;
}

figure.item-img img {
  width: 100%;
  height: auto;
  border-radius: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  /*filter: grayscale(100%);*/
  margin-bottom: 2rem;
}

figure.item-img figcaption {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  position: relative;
  text-wrap: pretty;
  margin: 0 1rem;
}

figure.item-img figcaption::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0yMjguOSA3OS45TDUxLjggNDAzLjFDNDAuNiA0MjMuMyA1NS41IDQ0OCA3OC45IDQ0OGgzNTQuM2MyMy4zIDAgMzguMi0yNC43IDI3LjEtNDQuOUwyODMuMSA3OS45Yy0xMS43LTIxLjItNDIuNS0yMS4yLTU0LjIgMHpNMjczLjYgMjE0TDI3MCAzMzZoLTI4bC0zLjYtMTIyaDM1LjJ6TTI1NiA0MDIuNGMtMTAuNyAwLTE5LjEtOC4xLTE5LjEtMTguNHM4LjQtMTguNCAxOS4xLTE4LjQgMTkuMSA4LjEgMTkuMSAxOC40LTguNCAxOC40LTE5LjEgMTguNHoiIGZpbGw9IiNlNjI0MzIiLz48L3N2Zz4=);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -40px;
}

/* --- mid column --- */
.col-mid {
  flex-grow: 1;
  position: relative;
  padding-bottom: 100px !important;
}

.col-mid main {
  width: 90%;
  margin: 0 auto;
}

#QR_slider h4 span {
  font-weight: 300;
}

.col-mid fieldset {
  border: 0;
  margin: 0; 
  padding: 0;
}

.col-mid fieldset legend {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 2rem;
  text-wrap: pretty;
}

ul.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.checklist li {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  margin-bottom: 1.7rem;
}

ul.checklist input[type="checkbox"] {
  height: 28px;
  width: 28px;
  margin: 0 1rem 0 0;
}

ul.checklist input[type="checkbox"]:checked + label {
  font-weight: 600;
  transition: all .1s ease;
}

a.save-selection {
  display: none;
  text-decoration: none;
  color: #FFF;
  background-color: var(--clr-red);
  padding: 10px 32px;
  height: 66px;
  line-height: 1.8;
  position: absolute;
  bottom: 24px;
  right: 24px;
}

a.save-selection:hover {
  background-color: #161616;
}

/* --- right column --- */
.col-right {
  width: 400px;
  flex: 0 0 400px;
  background-color: rgba(244, 244, 244, 1);
  padding-bottom: 100px !important;
  position: relative;
}

.col-right p {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 4rem;
}

a.next-button {
  width: auto;
  text-decoration: none;
  color: #161616;
  background-color: #FFF;
  padding: 8px 8px 8px 32px;
  border: 1px solid #707070;
  position: absolute;
  bottom: 44px;
  display: flex;
  align-items: center;
}

a.next-button:hover {
  color:  var(--clr-red);
  border-color: var(--clr-red);
}

a.next-button::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iTGF5ZXJfMV8wMDAwMDA2MjE4NjI0Mzg3ODM3MDEyODc0MDAwMDAxMDIxNjg1OTkxNzYxMjY4MTYwMl8iPgoJCTxwYXRoIGZpbGw9IiNFNjI0MzIiIGQ9Ik0yNCwwQzEwLjcsMCwwLDEwLjcsMCwyNHMxMC43LDI0LDI0LDI0czI0LTEwLjcsMjQtMjRTMzcuMywwLDI0LDB6IE0yNiwzNGwtMS40LTEuNGw3LjYtNy42SDEydi0yaDIwLjIKCQkJbC03LjYtNy42TDI2LDE0bDEwLDEwTDI2LDM0eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=);
  height: 48px;
  width: 48px;
  margin-left: 1rem;
}

/* ===== Range Slider ====== */
datalist {
  display: flex;
  justify-content: space-around;
  width: 130%;
}

datalist option {
  display: inline-block;
  color: #6f6f6f;
  font-size: 16px;
  text-align: center;
  width: 25%;
  margin-top: 12px;
  transition: all .15s ease-in-out;
  border-right: 1px solid #999;
}

datalist option[selected] {
  color: #161616;
  font-weight: 700;
}

datalist option:first-child {
  text-indent: 10px;
}

datalist option:last-child {
  text-indent: -10px;
  border-right: 0;
}

/* QR slider */
.qr_slider {
  width: 70%;
}

.qr_slider [type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 13px;
  border-radius: 6px;
  background: #f4f4f4;
  outline: none;
  padding: 0 15%;
  margin: 0;
}

.qr_slider [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin: -8px 0 0;
  width: 25px;
  height: 25px;
  border-radius: 64px;
  background: #F1C21B;
  /* outline: 4px solid #E62432; */
  box-shadow: 0 0 0 4px var(--clr-red);
  cursor: pointer;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.qr_slider [type="range"]::-webkit-slider-thumb:hover {
  background: #ed7631;
}

.qr_slider [type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 64px;
  background: #F1C21B;
  /* outline: 4px solid #E62432;  */
  box-shadow: 0 0 0 4px var(--clr-red);
  cursor: pointer;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.qr_slider [type="range"]::-moz-range-thumb:hover {
  background: #f9ca24;
}

/* remove border */
.qr_slider input::-moz-focus-inner, 
.qr_slider input::-moz-focus-outer {
  border: 0;
}

/* slider checkslides */
.qr_slider.checkslides [type="range"] {
  width: 143%;
  -webkit-appearance: none;
  height: 32px;
  border: 8px solid #FFF;
  border-radius: 32px;
  background: #f4f4f4;
  outline: none;
  padding: 0 14%;
  margin: 2rem 0 0;
}

.qr_slider.checkslides [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin: -8px 0 0;
  width: 32px;
  height: 32px;
  border-radius: 64px;
  /* outline: 8px solid #E62432; */
  box-shadow: 0 0 0 8px var(--clr-red);
}

.qr_slider.checkslides [type="range"]::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 64px;
  /* outline: 8px solid #E62432; */
  box-shadow: 0 0 0 8px var(--clr-red);
}

.qr_slider.checkslides datalist {
  width: calc(150% - 16px);
  padding: 0 16px;
}

.qr_slider.checkslides datalist option:last-child {
  text-indent: 0px;
}


/* ===== Result Slide ===== */ 
.top-row h2.title.result {
  font-size: 46px;
}

#result .main-row {
  background-image: url(https://retailkiosk.icondirect.com/wp-content/uploads/2024/06/result-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

#result .col-left {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent;
  background: linear-gradient(180deg, rgba(244,244,244,1) 40%, rgba(244,244,244,0.3) 100%);
  max-width: 400px;
}

#result .col-mid {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

#result .col-right {
  background-color: rgba(244, 244, 244, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 400px;
}

#result h4.item-name {
  text-align: left;
}

#result h4.item-name + p {
  font-size: 20px;
  text-indent: 30px;
  line-height: 1.2;
}

#result .score {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#result .score p {
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

#result .score h2 {
  margin: 0;
  padding: 0;
  font-size: 128px;
  font-weight: 200;
  line-height: 1;
  text-align: center;
}

#result a.start-over {
  width: auto;
  text-decoration: none;
  color: #161616;
  background-color: #FFF;
  padding: 4px 4px 4px 8px;
  border: 1px solid #707070;
  position: absolute;
  bottom: 24px;
  display: flex;
  align-items: center;
  left: -50px;
}

#result a.start-over::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0iI0U2MjQzMiIgZD0iTTI0LDBDMTAuNywwLDAsMTAuNywwLDI0czEwLjcsMjQsMjQsMjRzMjQtMTAuNywyNC0yNFMzNy4zLDAsMjQsMHogTTI2LjI4NywzNS4zNwoJYy01LjA4NSwwLTkuMjA4LTQuMTIyLTkuMjA4LTkuMjA4YzAtMC40ODQsMC4zOTMtMC44NzcsMC44NzctMC44NzdjMC40ODQsMCwwLjg3NywwLjM5MywwLjg3NywwLjg3NwoJYzAsNC4xMTcsMy4zMzcsNy40NTQsNy40NTQsNy40NTRzNy40NTQtMy4zMzcsNy40NTQtNy40NTRzLTMuMzM3LTcuNDU0LTcuNDU0LTcuNDU0SDE1Ljk4MWwyLjg4OCwyLjg4OAoJYzAuMzE0LDAuMzM3LDAuMzE0LDAuODU5LDAsMS4xOTZjLTAuMzMsMC4zNTQtMC44ODUsMC4zNzQtMS4yMzksMC4wNDRsLTQuMzg1LTQuMzg1Yy0wLjM0Mi0wLjM0Mi0wLjM0Mi0wLjg5NywwLTEuMjRsNC4zODUtNC4zODUKCWMwLjMzNy0wLjMxNCwwLjg1OS0wLjMxNCwxLjE5NiwwYzAuMzU0LDAuMzMsMC4zNzQsMC44ODUsMC4wNDQsMS4yMzlsLTIuODg4LDIuODg4aDEwLjMwN2M1LjA4NiwwLDkuMjA4LDQuMTIyLDkuMjA4LDkuMjA4CglTMzEuMzcyLDM1LjM3LDI2LjI4NywzNS4zN3oiLz4KPC9zdmc+Cg==);
  height: 48px;
  width: 48px;
  margin-left: .5rem;
}


figure.qr-code figcaption {
  margin-top: 2rem;
  font-size: 16px;
  line-height: 1.4;
  color: #6f6f6f;
  text-wrap: pretty;
}

ul.slide-rundown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  line-height: 22px !important;
}

ul.slide-rundown li {
  display: flex;
  width: 100%;
  padding: .75rem 0;
  /* margin-bottom: .5rem; */
  border-bottom: 1px solid #c6c6c6;
}

ul.slide-rundown li:last-child {
  border-bottom: 0;
}

ul.slide-rundown h5 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
  display: inline-block;
  width: 40%;
  margin: 0;
  padding: 0 2rem 0 0;
}

ul.slide-rundown .score-slider {
  display: inline-block;
  width: 60%;
}

ul.slide-rundown .qr_slider [type="range"] {
  height: 8px;
  width: 130%;
}

ul.slide-rundown .qr_slider [type="range"]::-webkit-slider-thumb {
  margin: -15px 0 0;
  width: 16px;
  height: 16px;
  /* outline: 3px solid #E62432; */
  box-shadow: 0 0 0 3px var(--clr-red);
}

ul.slide-rundown datalist {
  margin-top: -10px;
}

.sidecats {
  display: inline-flex;
  flex-direction: column;
  margin-left: 1rem;
  width: 13%;
}

.sidecats p {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

.sidecats p:nth-child(1) {
  height: 36%;
}

.sidecats p:nth-child(2) {
  height: 25.5%;
}

.sidecats p:nth-child(3) {
  height: 36%;
}

.sidecats p::before {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2";
  content:'⏌';
  position: absolute;
  left: 3px;
  top: 2px;
  rotate: -90deg;
}

.sidecats p::after {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2";
  content:'⎿';
  position: absolute;
  left: 3px;
  bottom: 2px;
  rotate: -90deg;
}

#result-notice {
  position: relative;
  line-height: 1.4;
}

#result-notice.critical {
  color: #E62432;
}

#result-notice.warning {
  color: #F3BB1B;
}

#result-notice.fair {
  color: #525252;
}

#result-notice.good {
  color: #3DC13C;
}

#result-notice.critical::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0yMjguOSA3OS45TDUxLjggNDAzLjFDNDAuNiA0MjMuMyA1NS41IDQ0OCA3OC45IDQ0OGgzNTQuM2MyMy4zIDAgMzguMi0yNC43IDI3LjEtNDQuOUwyODMuMSA3OS45Yy0xMS43LTIxLjItNDIuNS0yMS4yLTU0LjIgMHpNMjczLjYgMjE0TDI3MCAzMzZoLTI4bC0zLjYtMTIyaDM1LjJ6TTI1NiA0MDIuNGMtMTAuNyAwLTE5LjEtOC4xLTE5LjEtMTguNHM4LjQtMTguNCAxOS4xLTE4LjQgMTkuMSA4LjEgMTkuMSAxOC40LTguNCAxOC40LTE5LjEgMTguNHoiIGZpbGw9IiNlNjI0MzIiLz48L3N2Zz4=);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -64px;
  top: -2px;
  display: inline-block;
}

#result-notice.warning::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGZpbGw9IiNGM0JCMUIiIGQ9Ik0xMjAgMTM2VjgwYTggOCAwIDAgMSAxNiAwdjU2YTggOCAwIDAgMS0xNiAwbTExMi00NC40NXY3Mi45YTE1Ljg2IDE1Ljg2IDAgMCAxLTQuNjkgMTEuMzFsLTUxLjU1IDUxLjU1YTE1Ljg2IDE1Ljg2IDAgMCAxLTExLjMxIDQuNjloLTcyLjlhMTUuODYgMTUuODYgMCAwIDEtMTEuMzEtNC42OWwtNTEuNTUtNTEuNTVBMTUuODYgMTUuODYgMCAwIDEgMjQgMTY0LjQ1di03Mi45YTE1Ljg2IDE1Ljg2IDAgMCAxIDQuNjktMTEuMzFsNTEuNTUtNTEuNTVBMTUuODYgMTUuODYgMCAwIDEgOTEuNTUgMjRoNzIuOWExNS44NiAxNS44NiAwIDAgMSAxMS4zMSA0LjY5bDUxLjU1IDUxLjU1QTE1Ljg2IDE1Ljg2IDAgMCAxIDIzMiA5MS41NW0tMTYgMEwxNjQuNDUgNDBoLTcyLjlMNDAgOTEuNTV2NzIuOUw5MS41NSAyMTZoNzIuOUwyMTYgMTY0LjQ1Wk0xMjggMTYwYTEyIDEyIDAgMSAwIDEyIDEyYTEyIDEyIDAgMCAwLTEyLTEyIi8+PC9zdmc+);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -64px;
  top: -2px;
  display: inline-block;
}

#result-notice.fair::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGZpbGw9IiM1MjUyNTIiIGQ9Ik0xNzYgMTI4YTggOCAwIDAgMS04IDhIODhhOCA4IDAgMCAxIDAtMTZoODBhOCA4IDAgMCAxIDggOG01NiAwQTEwNCAxMDQgMCAxIDEgMTI4IDI0YTEwNC4xMSAxMDQuMTEgMCAwIDEgMTA0IDEwNG0tMTYgMGE4OCA4OCAwIDEgMC04OCA4OGE4OC4xIDg4LjEgMCAwIDAgODgtODgiLz48L3N2Zz4=);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -64px;
  top: -2px;
  display: inline-block;
}

#result-notice.good::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGZpbGw9IiMzREMxM0MiIGQ9Ik0xNzMuNjYgOTguMzRhOCA4IDAgMCAxIDAgMTEuMzJsLTU2IDU2YTggOCAwIDAgMS0xMS4zMiAwbC0yNC0yNGE4IDggMCAwIDEgMTEuMzItMTEuMzJMMTEyIDE0OC42OWw1MC4zNC01MC4zNWE4IDggMCAwIDEgMTEuMzIgME0yMzIgMTI4QTEwNCAxMDQgMCAxIDEgMTI4IDI0YTEwNC4xMSAxMDQuMTEgMCAwIDEgMTA0IDEwNG0tMTYgMGE4OCA4OCAwIDEgMC04OCA4OGE4OC4xIDg4LjEgMCAwIDAgODgtODgiLz48L3N2Zz4=);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -64px;
  top: -2px;
  display: inline-block;
}

#result-notice.unsure::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNiAyYTE0IDE0IDAgMSAwIDE0IDE0QTE0IDE0IDAgMCAwIDE2IDJabTAgMjZhMTIgMTIgMCAxIDEgMTItMTJhMTIgMTIgMCAwIDEtMTIgMTJaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIyMy41IiByPSIxLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE3IDhoLTEuNWE0LjQ5IDQuNDkgMCAwIDAtNC41IDQuNXYuNWgydi0uNWEyLjUgMi41IDAgMCAxIDIuNS0yLjVIMTdhMi41IDIuNSAwIDAgMSAwIDVoLTJ2NC41aDJWMTdhNC41IDQuNSAwIDAgMCAwLTlaIi8+PC9zdmc+);
  position: absolute;
  height: 32px;
  width: 32px;
  left: -64px;
  top: -2px;
  display: inline-block;
}

button.next-result {
  width: auto;
  font-size: 24px;
  font-weight: 700 !important;
  border-radius: 64px;
  text-decoration: none;
  color: #161616;
  background-color: #FFF;
  padding: 8px 8px 8px 32px;
  border: 1px solid #707070;
  position: absolute;
  bottom: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

button.next-result::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iTGF5ZXJfMV8wMDAwMDA2MjE4NjI0Mzg3ODM3MDEyODc0MDAwMDAxMDIxNjg1OTkxNzYxMjY4MTYwMl8iPgoJCTxwYXRoIGZpbGw9IiNFNjI0MzIiIGQ9Ik0yNCwwQzEwLjcsMCwwLDEwLjcsMCwyNHMxMC43LDI0LDI0LDI0czI0LTEwLjcsMjQtMjRTMzcuMywwLDI0LDB6IE0yNiwzNGwtMS40LTEuNGw3LjYtNy42SDEydi0yaDIwLjIKCQkJbC03LjYtNy42TDI2LDE0bDEwLDEwTDI2LDM0eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=);
  height: 48px;
  width: 48px;
  margin-left: 1rem;
}

ul.slide-rundown datalist option {
  font-size: 22px;
}

#result a.search-parts::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0iI0U2MjQzMiIgZD0iTTI0LDBDMTAuNywwLDAsMTAuNywwLDI0czEwLjcsMjQsMjQsMjRzMjQtMTAuNywyNC0yNFMzNy4zLDAsMjQsMHogTTEyLjUzMiwxNC45MzNoNy40ODEKCWMtMC4yNCwwLjQ2OS0wLjQzMywwLjk2LTAuNTc2LDEuNDY3aC02LjkwNGMtMC40MDUsMC0wLjczMy0wLjMyOC0wLjczMy0wLjczM0MxMS43OTgsMTUuMjYxLDEyLjEyNywxNC45MzMsMTIuNTMyLDE0LjkzM3oKCSBNMTIuNTMyLDIwLjhoNi45MDRjMC4xNDQsMC41MDcsMC4zMzcsMC45OTgsMC41NzYsMS40NjdoLTcuNDgxYy0wLjQwNSwwLTAuNzMzLTAuMzI4LTAuNzMzLTAuNzMzCglDMTEuNzk4LDIxLjEyOCwxMi4xMjcsMjAuOCwxMi41MzIsMjAuOHogTTEyLjUzMiwyNi42NjdoMTQuNjk4aDQuOTI3bDEuNDY3LDEuNDY3SDEyLjUzMmMtMC40MDUsMC0wLjczMy0wLjMyOC0wLjczMy0wLjczMwoJUzEyLjEyNywyNi42NjcsMTIuNTMyLDI2LjY2N3ogTTM0LjUzNCwzNC4wMDFIMTIuNTMyYy0wLjQwNSwwLTAuNzMzLTAuMzI4LTAuNzMzLTAuNzMzYzAtMC40MDUsMC4zMjgtMC43MzMsMC43MzMtMC43MzNoMjIuMDAyCgljMC40MDUsMCwwLjczMywwLjMyOCwwLjczMywwLjczM0MzNS4yNjcsMzMuNjczLDM0LjkzOSwzNC4wMDEsMzQuNTM0LDM0LjAwMXogTTM3Ljk4NywyOS4zODdjLTAuMjg3LDAuMjg3LTAuNzUyLDAuMjg3LTEuMDM5LDAKCWwtNS42MjgtNS42M2MtMS4xNjksMC45MzctMi42MjIsMS40NDYtNC4xMiwxLjQ0M2MtMS40OTcsMC0yLjk1LTAuNTEtNC4xMi0xLjQ0NWMtMi44NDctMi4yNzYtMy4zMS02LjQzLTEuMDM0LTkuMjc3CgljMi4yNzYtMi44NDcsNi40My0zLjMxLDkuMjc3LTEuMDM0YzIuODQ3LDIuMjc2LDMuMzEsNi40MywxLjAzNCw5LjI3N2w1LjYzLDUuNjI3QzM4LjI3MywyOC42MzUsMzguMjczLDI5LjEsMzcuOTg3LDI5LjM4N3oKCSBNMzIuMzM0LDE4LjZjMCwyLjgzNS0yLjI5OSw1LjEzNC01LjEzNCw1LjEzNGMtMi44MzUsMC01LjEzNC0yLjI5OS01LjEzNC01LjEzNGMwLTIuODM1LDIuMjk4LTUuMTM0LDUuMTM0LTUuMTM0CglDMzAuMDM1LDEzLjQ2NiwzMi4zMzQsMTUuNzY0LDMyLjMzNCwxOC42eiIvPgo8L3N2Zz4K);
  height: 48px;
  width: 48px;
  margin-left: .5rem;
}

a.button.search-parts {
  width: auto;
  text-decoration: none;
  color: #161616;
  background-color: #FFF;
  padding: 4px 4px 4px 8px;
  border: 1px solid #707070;
  position: absolute;
  bottom: 24px;
  display: flex;
  align-items: center;
   right: 168px;
}
a.button.contact-us {
  width: auto;
  text-decoration: none;
  color: #161616;
  background-color: #FFF;
  padding: 4px 4px 4px 8px;
  border: 1px solid #707070;
  position: absolute;
  bottom: 24px;
  display: flex;
  align-items: center;
  right:15px;
}
#result a.contact-us::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGNGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTZhNjM5NiwgMjAyNC8wMy8xMi0wNzo0ODoyMyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEyIChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMTEtMDVUMTY6NDk6MTUtMDY6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTExLTA1VDE2OjU5OjM3LTA2OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTExLTA1VDE2OjU5OjM3LTA2OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjZTczNGE3Ni05NmI1LWFkNDctYTUwMy03YWE3MGE2N2NjZDMiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyMjg5YWM0OS1jZWNkLThiNDctYjJjMS0wMzg3MWJlYWJmMjgiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYmEyNDMxMy01ZmQ1LTNjNDMtYWM1OC1mOGY0MmUwY2JiZjIiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjNiYTI0MzEzLTVmZDUtM2M0My1hYzU4LWY4ZjQyZTBjYmJmMiIgc3RFdnQ6d2hlbj0iMjAyNC0xMS0wNVQxNjo0OToxNS0wNjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEyIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZTczNGE3Ni05NmI1LWFkNDctYTUwMy03YWE3MGE2N2NjZDMiIHN0RXZ0OndoZW49IjIwMjQtMTEtMDVUMTY6NTk6MzctMDY6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xMiAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+l9k/ogAADElJREFUaIHNmnmAVNWVxn/3vVf1qrqW3psWaIPQypLAsNOyiiwDuEQEDcKYBscRMyaKQQUl7hmCxrgkotGRaOuohOAygcjSAqMICsi+SbCBEYGmqaa7lq7lbTd/FKJML3T3oPL9WXXuOd+599zzzj33Cuk4nIYQyJSB9fkBZCQCuo6rW2eMjVtQcnMRHjfW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);
  height: 48px;
  width: 48px;
  margin-left: .5rem;
}

@supports (-webkit-touch-callout: none) {
    datalist {
	  display: block;
      background-image: url('https://retailkiosk.icondirect.com/wp-content/uploads/2025/05/datalist-ios-bg.svg');
      background-repeat: no-repeat;
      background-size: contain;
      min-height: 2rem;
    }
  }


/* --- Media Queries --- */

@media (max-width: 1200px) {
  #viewport-wrap { /* remove on prod */
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: clip;
    margin: 0px;
  }
  .top-row {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: .5rem .5rem 1rem;
    border-bottom: 1px solid #CCC;
  }
  .top-row h2 {
    display: block;
    flex: 1 1 100%;
    text-align: center;
    font-size: 40px;
  }
  ul.sp-ticks::before {
    height: 8px;
  }
  ul.sp-ticks li::before {
    height: 16px;
    width: 16px;
  }
  section.main-row {
    flex-wrap: wrap;
  }
  .col-left {
    display: block;
    width: max-content;
    flex: 1 0 0%;
    padding: 0px !important;
    position: relative;
  }
  h4.item-name {
    width: 100%;
    text-align: center;
    z-index: 9;
    position: absolute;
    padding: 8px 0;
    background-color: rgba(244, 244, 244, .7);
  }
  figure.item-img {
    z-index: 1;
    margin: 0px !important;
  }
  figure.item-img img {
    border-radius: 0%;
    aspect-ratio: unset;
    height: 30vh;
    margin-bottom: 0px;
  }
  figcaption {
    color: #333;
    display: flex;
    align-items: center;
    padding-left: 8px;
    margin: 1rem !important;
  }
  figure.item-img figcaption::before {
    position: relative;
    left: -10px
  }
  .col-mid {
    padding-bottom: 0px !important;
  }
  .col-mid main {
    width: 98%;
  }
  .col-mid h4 {
    font-size: 18px;
    margin-bottom: 1rem;
    padding-bottom: inherit !important;
  }
  ul.checklist li {
    font-size: 20px;
    line-height: 1.4;
  }
  .col-right {
    display: block;
    width: max-content;
    min-height: 130px;
    flex: 1 0 0%;
    padding: 14px 14px 48px !important;
    position: relative;
    
  }
  .col-right h4 {
    font-size: 18px;
    margin-bottom: 1rem;
  }
  .col-right p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  a.next-button, button.next-result {
    right: 24px;
    font-size: 20px !important;
  }
  .qr_slider.checkslides datalist {
    width: 100%;
    padding: 0 8px;
  }
  .qr_slider.checkslides [type="range"] {
    margin: 0px;
    width: 100%;
    height: 4px;
    padding: 0px 12%;
    border-width: 4px;
  }
  .qr_slider.checkslides [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin: -16px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 64px;
    /* outline: 4px solid #E62432; */
    box-shadow: 0 0 0 4px var(--clr-red);
  }
  .qr_slider.checkslides [type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 64px;
    /* outline: 4px solid #E62432;  */
    box-shadow: 0 0 0 4px var(--clr-red);
  }

  #result {
    .result-btn-group {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 2rem auto;
    }
    .main-row { background-image: none; }
    a.start-over, a.button.search-parts, a.button.contact-us { position: initial; padding-inline-start: 1rem; }
    .qr_slider.checkslides [type="range"] { height: 16px; }
    ul.slide-rundown datalist option { font-size: 16px; }
    .score-slider datalist option { font-size: 20px; }
    .col-right {
      width: 100% !important; 
      flex: 1 1 100% !important;
      background-image: url(https://retailkiosk.icondirect.com/wp-content/uploads/2024/06/result-bg.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: center;
      background-position-y: 95%;
    }
    .col-right .qr_slider { width: 100%; margin: 0 auto; }
    figcaption { justify-content: center; }
    .score-text {
      text-align: center;
	  text-wrap: pretty;
      p span { font-size: 150%; }
    }
  }
  
}

@media (max-width: 640px) {
  .top-row h2 {
    font-size: 24px;
    line-height: 1.2;
    text-wrap: balance;
  }
  ul.sp-ticks::before {
    height: 4px;
    top: 7px;
  }
  ul.sp-ticks li::before {
    height: 12px;
    width: 12px;
  }
  .main-row h4 {
    font-size: 18px;
  }
  figure.item-img figcaption {
    font-size: 14px;
  }
  .col-mid h4 {
    font-size: 18px;
  }
  .col-mid fieldset legend {
    font-size: 24px;
  }
  ul.checklist li {
    font-size: 18px;
    line-height: 1.4;
  }
  .col-right {
    min-height: 200px;
    padding: 14px 14px 72px !important;
  }
  a.next-button, button.next-result {
    flex-direction: column-reverse;
    padding: 8px 10px !important;
    aspect-ratio: 1;
    background-color: #e62432;
    color: #FFFFFF !important;
    font-weight: 400 !important;
    /* outline: 4px solid #FFF; */
    box-shadow: 0 0 0 4px #FFFFFF;
    bottom: 72px;
  }
  a.next-button::after, button.next-result::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGNsYXNzPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03NTQuNzUyIDQ4MEgxNjBhMzIgMzIgMCAxIDAgMCA2NGg1OTQuNzUyTDUyMS4zNDQgNzc3LjM0NGEzMiAzMiAwIDAgMCA0NS4zMTIgNDUuMzEybDI4OC0yODhhMzIgMzIgMCAwIDAgMC00NS4zMTJsLTI4OC0yODhhMzIgMzIgMCAxIDAtNDUuMzEyIDQ1LjMxMnoiLz48L3N2Zz4=');
    height: 24px;
    width: 24px;
    margin-left: 0rem;
    margin-bottom: -4px;
  }
  datalist option:first-child { text-indent: 0; }
  datalist option { font-size: 14px; }
  ul.slide-rundown h5 { font-size: 18px; }
  ul.slide-rundown datalist option { font-size: 16px; }
  #result {
    .result-btn-group { gap: 1.5rem; margin: 2rem auto; }
    .result-btn-group a { width: 55%; justify-content: space-between; padding-inline-start: 1.5rem; }
    figcaption.qr-caption { font-size: 18px !important; }
    ul.slide-rundown datalist option { font-size: 14px; }
    .score-slider datalist option { font-size: 18px; }
    datalist option:last-child { text-indent: 0px; }
  }
}