.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
    0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
    0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth
  .flatpickr-days
  .dayContainer:nth-child(n + 1)
  .flatpickr-day.inRange:nth-child(7n + 7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth
  .flatpickr-days
  .dayContainer:nth-child(n + 2)
  .flatpickr-day.inRange:nth-child(7n + 1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore*/
  left: 0; /*
      /*rtl:end:ignore*/
} /*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore*/
  right: 0; /*
      /*rtl:end:ignore*/
} /*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month
  .flatpickr-monthDropdown-months
  .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.gbbDiscountComponentProgressBarContainer {
    background: gray;
    display: block;
    position: relative;
    height: 20px;
    border-radius: 5px;
    width: 100%;
    margin: auto;
    width: 80%;
}

.gbbDiscountComponentProgressBar {
    /* background: rgb(0, 217, 255); */
    background: rgb(26, 240, 58);
    position: absolute;
    display: block !important;
    /* max-width: 100%; */
    height: 100%;
    border-radius: 5px;
}

.gbbDiscountComponentProgressBarAnimation {
    animation: progressAnimation 1s forwards;
    width: 100%;
}

.gbbDiscountComponentProgressBarRuleText {
    position: absolute;
    top: 22px;
    width: 6ch;
}

/* progressAnimation based on time */
@keyframes progressAnimation {
    0% {
        width: 0%;
    }

    10% {
        width: 10%;
    }

    20% {
        width: 20%;
    }

    30% {
        width: 30%;
    }

    40% {
        width: 40%;
    }

    50% {
        width: 50%;
    }

    60% {
        width: 60%;
    }

    70% {
        width: 70%;
    }

    80% {
        width: 80%;
    }

    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}


.gbbDiscountComponentProgressBarContainer {
    height: 10px;
}

.gbbDiscountComponent:not(:empty) {
    height: 40px;
}

.gbbStarSvgContainer {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -15px;
}


.gbbReviewPageDiscountAppliedLabel {
    display: grid;
    justify-content: end;
    grid-template-columns: max-content;
    font-size: 14px;
    font-weight: 600;
}

.gbbReviewPageDiscountAppliedWrapper:not(empty) {
    display: grid;
    justify-content: end;
}

.gbbReviewPageTotalCartValueLabel {
    display: grid;
    justify-content: end;
    grid-template-columns: max-content;
    font-size: 16px;
    font-weight: 600;
    text-align: end;
}


/* .gbbStarSvgContainer polygon.svgInnerBody{
    fill: white;
} */

.gbbStarActive polygon.svgInnerBody {
    fill: rgb(255, 255, 0) !important;
    /* add animation */
    /* animation: starAnimation 1s infinite; */
    /* put a transform and translate animation */

    transition: fill 0.5s;
}

@keyframes starAnimation {
    0% {
        fill: white;
    }

    50% {
        fill: rgb(58, 10, 232);
    }

    100% {
        fill: rgb(255, 255, 0);
    }
}


@media screen and (min-width: 1023px) {
    .gbbDiscountComponentProgressBarRuleText {
        position: absolute;
        top: 22px;
        width: max-content;
    }

    .gbbDiscountComponentProgressBarContainer {
        width: 80%;
    }

    .gbbReviewPageTotalCartValueLabel {

        font-size: 24px;

    }

    .gbbReviewPageDiscountAppliedLabel {
        font-size: 16px;
    }

}
.gbbCategoryHeaderContainer {
  display: grid;
  /* grid-auto-flow: column; */
  align-items: center;
  justify-content: start;
  grid-template-columns: 0.3fr 1fr 2fr;
}

.gbbCategoryImage {
  width: 150px;
  height: 100px;
  object-fit: contain;
}

.gbbCategoryContainer {
  padding: 5px;
  /* background: #f5f5f5; */
  border: 2px solid #C0C0C0;
  border-radius: 10px;
}

.gbbMultipleCategoriesContainerHTML {
  display: grid;
  grid-gap: 20px;
}

.gbbMultipleCategoriesPageHTML {
  margin: 20px 0;
}

.gbbCategoryHeaderContainer {
  cursor: pointer;
}

.gbbCategoryTitle {
  font-weight: 600;
}

.gbbCategoryContainerTab {
  width: fit-content;
  padding: 5px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.gbbCategoryTitlesContainer.gbbCategoryContainerTabUI {
  width: fit-content;
  display: grid;
  place-items: center;
}

.gbbMultipleCategoriesRibbonContainer,
.gbbMultipleCategoriesDropdownContainer {
  padding: 21px 15px;
  display: flex;
  place-content: start;
  flex-wrap: wrap;
  grid-gap: 10px;
  overflow-x: auto;
  top: 0;
  z-index: 2;
}

.gbbMultipleCategoriesDropdownContainer {
  border-radius: 4px;
}


.gbbCategoryContainer.gbbCategoryContainerTabUI,
.gbbMutipleCategoriesDropdown {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #3c3c3c;

  display: grid;
  flex-grow: 1;
}


.gbbMutipleCategoriesDropdown {
  background: black;
  color: white;
  padding: 10px;
  border-radius: 4px;
}


.gbbCategoryContainer.gbbCategoryContainerTabUI.gbbCategoryContainerTabUIActive {
  background-color: black;
  color: #F6F6F6;
}

.gbbCategorySubTitleForTabUI {
  display: none;
}

.gbbMultipleCategoriesActiveCategorySubtitle {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  font-weight: 900;
}

.gbbCategoryImageForTabUI {
  display: none;
}

.gbbCategoryTitlesContainer.gbbCategoryTitlesContainerForTabUI {
  display: grid;
  place-content: center;
}

.gbbCategoryHeaderContainerTabUI.gbbCategoryHeaderContainer {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}

/* .gbbMultipleCategoriesPageHTMLForTabUI{
  overflow-y: auto;
  max-height: 80vh;
} */
.gbbMultipleCategoriesContainerHTMLForTabUI {
  position: relative;
}

.gbbFiltersMainButtonWrapper {
  z-index: 1;
}

@media (min-width:600px) {
  .gbbCategoryContainer {
    padding: 10px 20px;
  }

  .gbbCategoryHeaderContainer {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }

  .gbbCategoryTitlesContainer.gbbCategoryTitlesContainerForTabUI {
    display: grid;
    place-content: center;
  }

  .gbbCategoryHeaderContainerTabUI.gbbCategoryHeaderContainer {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 600px) {

  .gbbMultipleCategoriesRibbonContainer,
  .gbbMultipleCategoriesDropdownContainer {
    padding: 21px 15px;
    place-content: start;
  }

  .gbbMultipleCategoriesDropdownContainer {
    display: flex;
  }


  .gbbMultipleCategoriesRibbonContainer {
    display: none;
  }

}

@media only screen and (min-width: 601px) {
  .gbbMultipleCategoriesDropdownContainer {
    display: none;
  }
}

.gbbMultipleCategoriesDropdownArrow {
  align-self: center;
  display: grid;
  position: absolute;
  right: 4%;
  pointer-events: none;
}

.gbbMultipleCategoriesDropdownArrow svg path {
  fill: white;
}

.gbbMutipleCategoriesDropdown {
  -webkit-appearance: none;
  /* Remove default arrow for WebKit browsers */
  -moz-appearance: none;
  /* Remove default arrow for Firefox */
  appearance: none;
  /* Remove default arrow for modern browsers */
}



.bannerAttached .gbbCategoryHeaderContainer :first-child,
.bannerAttached .gbbCategorySubTitle {
  display: none;
}

.bannerAttached .gbbCategoryImage {
  width: unset !important;
  height: unset !important;
  max-width: 100%;
}

.bannerAttached .gbbCategoryHeaderContainer {
  grid-template-columns: unset;
}

.gbbCategoryContainer.bannerAttached {
  background: #FFFFFF;
  border: unset;
}
.gbbProductsContainer,
.gbbProductsContainerV2 {
  margin: 15px 10px;

}

.gbbProductsItemsContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  font-size: 14px;
}

.gbbProductItem {
  display: grid;
  grid-template-rows: 2fr 0.1fr 0.5fr;
  background: #f1f2f3;
  /* padding: 10px; */
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}


.gbbProductItem {
  display: grid;
  grid-template-rows: 1fr 0.1fr 0.1fr;
  background: #F1F2F3;
  /* padding: 10px; */
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}



.gbbProductReadMore {
  display: grid;
  justify-self: end;
  padding: 10px;
  color: red;
  cursor: pointer;
}

.gbbProductDescriptionContainer {
  width: 100%;
}

.gbbProductDescriptionText {
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  font-size: 14px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  max-height: 200px;
  overflow-y: auto;
  /* -webkit-line-clamp: 4;
  text-overflow: ellipsis; */
}

.gbbProductVariantModalDetailsContainer {
  display: grid;
  grid-gap: 15px;
}

.gbbProductCardActionContainer {
  display: grid;
  grid-template-rows: min-content;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.gbbProductCardActionContainer .gbbProductButtonWrapper {
  width: 50%;
  justify-self: end;
  user-select: none;
}

.gbbProductVariantModalContentContainer {
  display: grid;
  grid-gap: 20px;
}

.gbbProductItemPrice {}

.gbbProductImageContainer {
  /* width: 140px;
  height: 140px; */
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gbbProductSliderNavigatior {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.gbbPrevImage,
.gbbNextImage {
  margin-left: 5px;
  position: absolute;
  top: 50%;
  width: 2px;
  padding: 16px;
  margin-top: -22px;
  color: #777676;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  margin-left: 5px;
  font-size: 16px;
  cursor: pointer !important;
}

.gbbNextImage {
  right: 3%;
}

.gbbPrevImage:hover,
.gbbNextImage:hover {
  /* background-color: rgb(124 121 121 / 80%);
  color: #ffff; */
  scale: 1.1;
}

.gbbFade {
  animation-name: gbbFade;
  animation-duration: 1.5s;
}

@keyframes gbbFade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

.gbbProductImageContainerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 150px;
  background: white;
}

.gbbProductVariantModalContentContainer .gbbProductImageContainerImg {
  max-height: 300px;
}

.gbbAddedToCartText {
  position: absolute;
  top: 5%;
  left: 5%;
  background: #000;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
}

.gbbProductQtyContainer {
  width: 60%;
  margin: 0% 10%;
}

.gbbProductQuantityHTML {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 15px;
  align-items: center;
}

.gbbProductQuantityAddButton,
.gbbProductQuantityRemoveButton {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  width: 35px;
  height: 35px;
  font-size: 24px;
  justify-self: center;
  cursor: pointer;
  position: relative;
  user-select: none;


}

.gbbProductQuantityAddButtonWrapper,
.gbbProductQuantityRemoveButtonWrapper {
  position: absolute;
  top: 16px;
  left: 18px;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}


.gbbProductQuantityAddButton {
  justify-self: right;
  -webkit-tap-highlight-color: transparent;
}

.gbbProductQuantityRemoveButton {
  justify-self: left;
  -webkit-tap-highlight-color: transparent;
}

.gbbProductQuantityLabel {
  text-align: center;
  font-size: 16px;
  user-select: none;
}

.gbbProductActionContainer {
  width: 100%;
  padding: 10px 10px;
  align-items: center;
  display: grid;
  grid-gap: 5px;
  padding-top: 5px;
}

.gbbProductAddButton {
  -webkit-tap-highlight-color: transparent;
  padding: 10px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

.gbbProductAddButton:active,
.gbbProductQuantityAddButton:active,
.gbbProductQuantityRemoveButton:active {
  transform: scale(0.95);
}

.gbbProductTextContainer,
.gbbProductCardTextContainer,
.gbbProductDynamicContentContainer {
  text-align: left;
  width: 100%;
  font-size: 12px;
  align-self: center;
  padding: 5px 10px;
}

.gbbProductCardTextContainer>div {
  font-weight: bold;
  padding: 0;
  font-size: 14px;
}

.gbbProductItemPrice {
  font-size: 12px;
  /* color: black; */
}

.gbbProductItemTitle {
  /* color: black; */
}

.gbbProductsLabel {
  margin: 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: #4f4b4b;
  margin-bottom: 20px;
}

.gbbProductQuantityHTMLContainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 0.2fr 0.2fr;
  grid-gap: 15px;
  -webkit-tap-highlight-color: transparent;
}

.gbbPageBannerImage {
  width: 100%;
}

.gbbAddProductsPageNavigationContainer,
.gbbChooseGiftBoxPageNavigationContainer,
.gbbPersonalizePageNavigationContainer {
  /* width: 100%; */
  position: relative;
  /* top: 15%; */
  /* transform: translate(0px, -45%); */
}

.gbbAddProductsPageHTML,
.gbbChooseGiftBoxPageHTML,
.gbbPersonalizePageHTML {
  /* position: relative;  */
  /* transform: translate(0px, -150px); */
}

.gbbPrecuratedBoxPageHTML {
  position: relative;
  transform: translate(0px, -100px);
}

/* .gbbAddProductsPageNavigationContainer .gbbNavigationItemsContainer::before{
  content: none;
}
.gbbChooseGiftBoxPageNavigationContainer .gbbNavigationItemsContainer::before{
  content: none;
}
.gbbPersonalizePageNavigationContainer .gbbNavigationItemsContainer::before{
  content: none;
} */
/* do it for other pages also */
/* .gbbAddProductsPageNavigationContainer .gbbNavigationItemsContainer{ 
  margin: 0 10%;
}
.gbbChooseGiftBoxPageNavigationContainer .gbbNavigationItemsContainer{ 
  /* margin: 0 10%; */
/* margin: 10%; */
/* } */
/* .gbbPersonalizePageNavigationContainer .gbbNavigationItemsContainer{ 
  margin: 0 10%;
}  */

.gbbChooseGiftBoxPageHeader,
.gbbAddProductsPageHeader {}

.gbbProductRemoveButton {
  background: rgb(237 159 159);
}

.gbbProductSoldOutButton {
  background: #d2cccc;
  pointer-events: none;
}

/********************PRODUCT VARIANTS MODAL*********************************/
.gbbDisabled {
  pointer-events: none;
  opacity: 0.2;
  /* background-color: black; */
}

.gbbProductVariantModalMainContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(24, 24, 24, 0.8);
  z-index: 1000000000;
}

.gbbProductVariantModalContainer {
  position: fixed;
  height: 100%;
  background: #ffff;
  overflow-y: auto;
  z-index: 100;
  display: grid;
  padding: 20px;
  border: 2px solid #b2b5b9;
  border-radius: 5px;
  grid-gap: 20px;
  overflow-x: hidden;
}

.gbbCartProductsMainContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(24, 24, 24, 0.8);
  z-index: 1000000000;
}

.gbbCartProductsContainerModal {
  position: fixed;
  z-index: 1000000000;
  transform: translate(0, -50%);
  background: #ffff;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  max-height: 95vh;
  /* left: 5vw;
  top: 5vh;
  right: 5vw; */
  left: 5vw;
  right: 5vw;
  top: 50vh;
}

.gbbCartProductsContainerHeader {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  justify-content: space-between;
  align-items: center;
}

.gbbCartProductsModalClose {
  justify-self: end;
  padding: 12px 10px;
  font-weight: bold;
  transform: rotate(45deg);
  font-size: 35px;
  position: absolute;
  top: -8px;
  right: 0px;
  color: #B2B5B9;
  cursor: pointer;
  user-select: none;
}

.gbbModalTotalContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}

.gbbModalTotalContainer .gbbFooterTotalContainer {
  text-align: unset;
}

.gbbModalTotalContainer .gbbFooterTotalLabel {
  justify-self: start;
  font-size: 16px;
  font-weight: 600;
}

.gbbModalTotalContainer .gbbFooterTotalValue {
  justify-self: end;
}

.gbbConditionNotificationToastMainContainer {
  position: fixed;
  top: 80%;
  transform: translate(-50%, -50%);
  background: #ffff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  z-index: 300;
}

.gbbConditionNotificationToast {
  position: absolute;
  left: 50%;
  bottom: 80%;
  right: 5%;
  transform: translate(-50%, -50%);
  background: #ffff;
  z-index: 99999999999;
  padding: 5px 15px;
  border-radius: 5px;
  width: 80%;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0, 0);
  }

  50% {
    transform: scale(0.5, 0.5);
  }

  100% {
    transform: scale(1, 1);
  }
}



.gbbProductVariantOptionValue {
  padding: 5px 15px;
  border: none;
  background: #f1f2f3;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.gbbProductVariantModalHeader {
  display: grid;
  grid-auto-flow: column;
}

.gbbProductVariantOptionLabel,
.gbbProductQuantityHeading {
  font-weight: bold;
  font-size: 14px;
}

.gbbProductVariantNotAvailableWarning {
  font-size: 14px;
  color: red;
  font-weight: bold;
  display: none;
}

.gbbProductVariantOptionValuesContainer {
  /* padding: 10px 0; */
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;
}

.gbbProductVariantAddButton {
  padding: 5px 10px;
  width: 100%;
  display: grid;
  justify-self: end;
  border: none;
  border-radius: 5px;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  align-items: center;
}

.gbbProductVariantAddButton:active {
  transform: scale(0.95);
}

/* .gbbProductVariantModalClose{
  justify-self: end;
  padding: 2px 10px;
  font-weight: bold;
  transform: rotate(45deg);
  font-size: 35px;
  position: absolute;
  top: -5px;
  right: 0px;
  color: #B2B5B9;
  cursor: pointer;
  user-select: none;
} */
.gbbProductVariantModalClose {
  justify-self: end;
  padding: 2px 10px;
  position: absolute;
  top: 5px;
  right: 0px;
  color: #B2B5B9;
  cursor: pointer;
  user-select: none;
}

.gbbProductVariantModalClose path {
  fill: #B2B5B9;
}

.gbbConditionNotificationClose {
  justify-self: end;
  transform: rotate(45deg);
  font-size: 35px;
  color: #ffff;
  cursor: pointer;
}

.gbbFooterProductPrice,
.gbbCartModalProductPrice {
  font-weight: bold;
}

.gbbFooterTotalValueContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-columns: repeat(2, min-content);
  justify-content: end;
}

.gbbFooterOriginalTotalValue,
.gbbSummaryPageBundleOriginalPrice {
  text-decoration: line-through;
}


.gbbDiscountMessage {
  text-align: center;
  font-size: 16px;
  color: black;
}

/* .gbbFooterProductsContainer::-webkit-scrollbar {
  width: 0.3rem;
}

.gbbFooterProductsContainer::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.gbbFooterProductsContainer::-webkit-scrollbar-thumb {
  background-color: darkgrey;
} */

/********FILTER PRODUCTS*******************************/
.gbbProductsFilterContainer {
  margin: 0 20px;
  cursor: pointer;
  /* margin-top: 70px; */
}

.gbbFiltersDropDownWrapper {
  display: grid;
  grid-template-columns: 1fr 50px;
  margin: 10px 0px;
  align-items: center;
}

.gbbFiltersDropDownButton {
  /* transform: rotate(180deg); */
  /* height: 30px; */
  display: grid;
  width: auto;
  cursor: pointer
}

.gbbProductsFilterHeader {
  cursor: pointer !important;
}

.gbbProductsFilterButton {
  color: #796c6c;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  background: #f1f2f3;
  font-weight: 500;
  font-weight: bold;
  margin: 10px 0;
  border-radius: 5px;
  cursor: pointer;
}

.gbbProductsFilterTagsContainer {
  /* width: min-content; */
  /* display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 30px; */
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #f1f2f3;
}

.gbbActiveFilter {
  background: #000000;
  color: #ffffff;
}

.gbbFilterTagContainer {
  /* padding: 0 10px; */
  background: #f1f2f3;
  border-radius: 5px;
  /* display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  height: min-content;
  justify-items: center; */
}

.gbbFilterTagText {
  color: black;
  padding: 5px 10px;
}

.gbbFilterTagRemoveSymbol {
  font-size: 14px;
  align-self: center;
}

.gbbFiltersSideBarContainer,
.gbbProductsFiltersMainContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 999999999;
  transition: transform 2s;
}

.gbbProductsFiltersMainContainer {
  background-color: rgba(24, 24, 24, 0.8);
  height: 100%;
}

.gbbProductsFiltersContainer {
  background: white;
  padding: 4%;
  height: 100%;
  width: 70%;
  transition: 0.5s;
  transform: translateX(-100%);
  overflow-y: auto;
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.gbbProductsFiltersContainerHeader {
  display: flex;
  justify-content: space-between;
  margin: 10px 0px;
  position: relative;
}

.gbbFilterDropDownButton {
  transform: rotate(180deg);
  height: 30px;
  width: auto;
  cursor: pointer;
}

.gbbProductsFiltersContainerHeaderLabels {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  align-items: center;
}

.gbbProductsFiltersClearLabel {
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
}

.gbbProductsFiltersContainerLabel {
  font-weight: 600;
  font-size: 16px;
}

.gbbFilterModalClose {
  justify-self: end;
  transform: rotate(45deg);
  font-size: 45px;
  position: absolute;
  top: -30px;
  right: 0px;
  color: #B2B5B9;
  cursor: pointer;
}

.gbbProductsFilterTagContainer {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gbbProductsFilterTagCheckbox {
  width: 16px;
  height: 16px;
}

.gbbFilterContainer {
  border-top: 1px solid #d5cccc;
  padding-bottom: 15px;
  cursor: pointer;
}

.gbbFilterTagsContainer {
  height: 85%;
  /* overflow-y: scroll; */
  overflow-y: auto;
}

.gbbFiltersSearchSortHeader {
  margin: 5px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.gbbFiltersMainButtonWrapper {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 15px;
  align-items: center;
  font-size: 14px;
  border: 1px solid #f1f2f3;
  padding: 0 20px;
  cursor: pointer;
}

/* Filters sidebar animation */
.gbbFiltersSideBarContainerSlideIn {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.gbbFiltersSideBarContainerSlideOut {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }

  100% {
    -webkit-transform: translateX(-100%);
  }
}

/* code for price filter from codepen ->  https://codepen.io/sln/pen/bqzRMq */
.gbbFilterPriceContainer {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
}

.gbbPriceFieldContainer {
  position: relative;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  background: rgba(248, 247, 244, 0.2);
  padding-top: 15px;
  border-radius: 3px;
}

.gbbPriceFieldContainer input[type=range] {
  position: absolute;
}

/* Reset style for input range */

.gbbPriceFieldContainer input[type=range] {
  width: 100%;
  height: 2px;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  border-radius: 5px;
  pointer-events: none;
  -webkit-appearance: none;
}

.gbbPriceFieldContainer input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.gbbPriceFieldContainer input[type=range]:active,
.gbbPriceFieldContainer input[type=range]:focus {
  outline: 0;
}

.gbbPriceFieldContainer input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  border-radius: 5px;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  color: transparent;
  border-radius: 5px;
}

/* Style toddler input range */

.gbbPriceFieldContainer input[type=range]::-webkit-slider-thumb {
  /* WebKit/Blink */
  position: relative;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  margin-top: -6px;
  background-color: #686662;
  cursor: pointer;
  cursor: pointer;
  pointer-events: all;
  z-index: 100;
}

.gbbPriceFieldContainer input[type=range]::-moz-range-thumb {
  /* Firefox */
  position: relative;
  appearance: none;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-top: -5px;
  background-color: #686662;
  cursor: pointer;
  cursor: pointer;
  pointer-events: all;
  z-index: 100;
}

.gbbPriceFieldContainer input[type=range]::-ms-thumb {
  /* IE */
  position: relative;
  appearance: none;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-top: -5px;
  background-color: #686662;
  cursor: pointer;
  cursor: pointer;
  pointer-events: all;
  z-index: 100;
}

/* Style track input range */

.gbbPriceFieldContainer input[type=range]::-webkit-slider-runnable-track {
  /* WebKit/Blink */
  width: 188px;
  height: 2px;
  cursor: pointer;
  background: #686662;
  border-radius: 5px;
}

.gbbPriceFieldContainer input[type=range]::-moz-range-track {
  /* Firefox */
  width: 188px;
  height: 2px;
  cursor: pointer;
  background: #686662;
  border-radius: 5px;
}

.gbbPriceFieldContainer input[type=range]::-ms-track {
  /* IE */
  width: 188px;
  height: 2px;
  cursor: pointer;
  background: #686662;
  border-radius: 5px;
}

/* Style for input value block */

.gbbPriceTextWrap {
  display: flex;
  justify-content: space-between;
  color: #686662;
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 400;
  margin: 5px 0;
}

.gbbPriceWrap1,
.gbbPriceWrap1 {
  display: flex;
}



.gbbPriceTextWrap #gbbPriceWrap1Input,
.gbbPriceTextWrap #gbbPriceWrap2Input {
  width: 30px;
  text-align: right;
  margin: 0;
  padding: 0;
  margin: 0 2px;
  background: 0;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 400;
}

.gbbPriceTextWrap label {
  text-align: right;
}

/* Style for active state input */

.gbbPriceFieldContainer input[type=range]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.5px #686662;
  transition-duration: 0.3s;
}

.gbbPriceFieldContainer input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.5px #686662;
  transition-duration: 0.3s;
}

.gbbSortByDropDownSelect {
  cursor: pointer;
  padding: 5px 25px;
  border: 2px solid #f1f2f3;
  font-size: 14px;
}

/* style for search box */
.gbbSearchBarMainWrapper {
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  align-items: center;
  grid-column: 2;
  margin: 10px 0;
  justify-self: end;
  /* border-bottom: 1px solid #f1f2f3; */
  border-bottom: 1px solid #000000;
}

.gbbSearchBarIcon {
  width: fit-content;
  display: grid;
}

.gbbSearchBarInput {
  padding: 10px;
  font-size: 14px;
  border: none;
  box-shadow: none;
  outline: none;
  width: 100%;
  background-color: transparent;
}

.gbbSearchBarInput::placeholder {
  color: #c4c4c4;
}

/* .gbbSearchBarMainWrapper:focus-within{
  border-bottom: 1px solid #000000;
} */
.gbbProductsNotAvailable {
  text-align: center;
  font-size: 2rem;
  grid-column: 1 / -1;
}

/*******************FOOTER HTML****************************/
.gbbAddProductsPageFooterHTML,
.gbbChooseGiftBoxPageFooterHTML,
.gbbPersonalizePageFooterHTML,
.gbbPrecuratedBoxPageFooterHTML,
.gbbMultipleCategoriesPageFooterHTML {
  background: #D7D7D7;
  padding: 5px;
  position: sticky;
  bottom: 0;
  /* z-index: 999999; */
}

.gbbProductsFooterHTML {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  grid-gap: 20px;
  padding: 10px;
  position: relative;
  background: #D7D7D7;
  /* background: #f1f2f3;
  padding: 5px;
  position: sticky;
  bottom: 0; */
}

.gbbFooterProductsContainer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  grid-gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
}

.gbbCartModalProductsContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  /* overflow-x: auto; */
  overflow-y: auto;
  max-height: 70vh;
}

.gbbCartModalProductsContainer {
  grid-auto-flow: row;
}

.gbbFooterProductContainer,
.gbbCartModalProductContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  position: relative;
  padding: 5px;
}

.gbbCartModalProductContainer {
  grid-template-columns: 0.5fr 3fr;
}


.gbbFooterProductImageContainer {
  display: grid;
  width: 50px;
  height: 50px;
  border: 1px solid #cfc9c9;
  overflow: hidden;
}

.gbbCartProductImageContainer {
  display: grid;
  width: 80px;
  height: 80px;
  border: 1px solid #cfc9c9;
  overflow: hidden;
}

.gbbViewCartProductsLink {
  text-decoration: underline;
  cursor: pointer;
}

.gbbCartModalProductImage {
  width: 100%;
  height: 100%;
}

.gbbFooterProductRemoveButton,
.gbbCartModalProductRemoveButton {
  position: absolute;
  cursor: pointer;
}

.gbbCartProductImageContainer {
  object-fit: contain;
}

.gbbFooterProductImage {
  /* max-width: 50px; */
  /* max-width: 40px;
  min-height: 40px; */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gbbFooterProductTextContainer {
  font-size: 12px;
  width: 100px;
}

.gbbCartModalProductTextContainer {
  font-size: 14px;
  /* width: 165px; */
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  justify-content: space-between;
  align-items: start;
  grid-gap: 10px;
}

.gbbCartProductsContainerHeaderLabel {
  justify-self: start;
  font-size: 16px;
  font-weight: bold;
}

.gbbProductsFooterHTMLForMobile .gbbFooterButtonsWrapper {
  grid-template-columns: 1fr 2fr;
}

.gbbFooterProductTitle {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.gbbCartModalProductTitle {
  width: 100%;
  text-align: left;
}

.gbbCartModalProductPriceQtyContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 5px;
}

.gbbFooterTotalLabel {
  color: black;
  font-size: 14px;
  line-height: 8px;
}

.gbbFooterTotalValue {
  color: black;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

.gbbFooterButtonsWrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: auto auto;
}

.gbbFooterBackButton,
.gbbFooterNextButton {
  font-size: 12px;
  padding: 8px;
  border: none;
  border-radius: 5px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.gbbFooterBackButton {
  background: grey;
  color: #ffff;
}

.gbbFooterBackButton:active {
  transform: scale(0.95);
}

.gbbFooterNextButton {
  color: #000;
  background: #000000;
  color: #ffffff;
  grid-column: 2 /-1;
}

.gbbFooterNextButton:active {
  transform: scale(0.95);
}

.gbbFooterTotalContainer {
  text-align: right;
}

.gbbFooterProductQtyPriceContainer,
.gbbCartModalProductQtyPriceContainer {
  display: flex;
  gap: 5px;
}

.gbbCartModalProductTitleQty {
  display: grid;
  justify-content: start;
  width: unset;
}

.gbbCartModalProductQuantity {
  justify-self: start;
}

.gbbAddedToCartText {
  position: absolute;
  top: 5%;
  left: 5%;
  background: black;
  color: #ffff;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 12px;
}

.gbbViewProductsLabelAndTotalContainer {
  display: grid;
  grid-template-columns: 1fr 0.4fr;
}

.gbbCartProductsContainerModal {
  display: grid;
  grid-gap: 10px;
}

.gbbAddProductsPageHTML .gbbProductsFilterContainer,
.gbbChooseGiftBoxPageHTML .gbbProductsFilterContainer,
.gbbPrecuratedBoxPageHTML .gbbProductsFilterContainer {
  /* margin-top: 120px; */
}

.gbbLoadMoreProductsButton {
  text-align: center;
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.gbbProductAllImagesContainer {
  display: none;
  max-height: 200px;
}

.gbbProductVariantModalImageTitleContainer {
  display: grid;
  grid-gap: 15px;
}

.gbbProductTileImageContainer {
  display: grid;
  justify-items: center;
  align-items: center;
}


@media (min-width:600px) {

  .gbbProductsItemsContainer {
    grid-template-columns: repeat(3, 1fr);

  }

  /* .gbbProductItem{
      grid-template-rows: 3fr 0.8fr 0.8fr;
  } */
  .gbbProductImageContainerImg {
    max-height: 180px;
  }

  .gbbAddProductsPageNavigationContainer,
  .gbbPersonalizePageNavigationContainer,
  .gbbChooseGiftBoxPageNavigationContainer {}

  .gbbAddProductsPageNavigationContainer,
  .gbbChooseGiftBoxPageNavigationContainer,
  .gbbPersonalizePageNavigationContainer {
    /* transform: translate(0px, -35%); */
  }

  .gbbProductTextContainer,
  .gbbProductItemPrice,
  .gbbProductDynamicContentContainer {
    font-size: 14px;
  }

  .gbbProductCardTextContainer>div {
    font-size: 18px;
  }

  .gbbProductActionContainer {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    grid-gap: max-content;
    width: 100%;
  }

  .gbbProductsFilterTagsContainer {}

  .gbbAddedToCartText {
    font-size: 14px;
  }

  .gbbAddProductsPageHeader,
  .gbbChooseGiftBoxPageHeader {}

  .gbbProductsFiltersContainerLabel {
    font-size: 20px;
  }

  .gbbFiltersMainButtonWrapper {
    font-size: 18px;
  }

  .gbbSortByDropDownSelect {
    font-size: 18px;
  }

  .gbbFiltersMainButtonWrapper {
    justify-self: start;
    padding: 5px 20px;
  }

  .gbbSortByDropDownContainer {
    justify-self: end;
  }

  .gbbProductsFiltersClearLabel {
    font-size: 14px;
  }

  .gbbProductVariantModalBodyContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    grid-gap: 15px;
  }

  .gbbProductVariantModalDetailsContainer {
    display: grid;
    grid-gap: 20px;
  }

  .gbbProductVariantOptionsContainer {
    display: grid;
    grid-gap: 15px;
  }

  .gbbProductVariantOptionLabel,
  .gbbProductQuantityHeading {
    font-weight: bold;
    font-size: 16px;
  }

  .gbbProductVariantOptionValue {
    font-size: 16px;
  }

  .gbbProductVariantAddButton {
    /* width: 50%; */
  }

  .gbbProductDescriptionText {
    max-height: 150px;
  }

  .gbbProductAllImagesContainer {
    display: grid;
    grid-gap: 5px;
    grid-auto-columns: min-content;
    grid-template-columns: repeat(4, 1fr);
    overflow-y: auto;
  }

  .gbbProductTileImageContainer {
    object-fit: contain;
  }

  .gbbProductTileImage {
    max-height: 70px;
  }
}

/* @media (min-width:768px) and (max-widthx:1023px){
  .gbbAddProductsPageNavigationContainer, .gbbChooseGiftBoxPageNavigationContainer{
      transform: translate(0px, -55%);
  }    
} */
@media (min-width:1024px) {
  .gbbProductVariantModalContainer {
    top: 40vh;
    left: 50vw !important;
    transform: translate(-50%, -50%);
    margin: 10vh 0;
    height: unset;
    grid-gap: 15px;
    max-height: 95vh;
  }

  .gbbProductImageContainerImg {
    max-height: 200px;
  }

  .gbbPrevImage,
  .gbbNextImage {
    font-size: 20px;
  }

  .gbbProductItem:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .gbbProductItem {
    grid-template-rows: 3fr 0.8fr 0.8fr;
  }

  .gbbProductImageContainer {
    /* width: 235px;
      height: 235px; */
  }

  .gbbProductsLabel {
    margin: 0 10px;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .gbbPageBannerImage {
    width: 100%;
    height: 10vw;
  }

  .gbbProductButton {
    padding: 10px;
  }

  .gbbFooterProductTextContainer {
    width: 150px;
    font-size: 12px;
  }

  .gbbFooterProductTitle {
    width: 150px;
  }

  .gbbFooterProductImage {
    /* min-height: 50px;
      max-width: 50px; */
  }

  .gbbFooterBackButton,
  .gbbFooterNextButton {
    font-size: 14px;
  }

  .gbbFooterTotalValue {
    font-size: 16px;
  }

  .gbbFooterTotalContainer {
    text-align: right;
  }

  .gbbFooterProductsContainer {
    grid-gap: 0;
  }

  .gbbProductsFilterContainer {
    margin: 0 20px;
    cursor: pointer;
    /* margin-top: 80px; */

  }

  .gbbChooseGiftBoxPageHTML .gbbProductsFilterContainer {
    /* margin-top: 0 !important; */
  }

  .gbbProductsFilterButton {
    color: #796c6c;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    background: #f1f2f3;
    font-weight: 500;
    font-weight: bold;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
  }

  .gbbProductsFilterTagsContainer {
    /* width: min-content; */

  }

  .gbbFilterTagContainer {
    /* padding: 0 10px; */
    background: #f1f2f3;
    border-radius: 5px;
    /* display: grid;
      grid-auto-flow: column;
      grid-gap: 10px;
      height: min-content; */
  }

  .gbbFilterTagText {
    color: black;
    padding: 5px 10px;
  }

  .gbbFilterTagRemoveSymbol {
    font-size: 14px;
    align-self: center;
  }

  .gbbProductsFilterTagsContainer {
    padding: 20px;
    border-radius: 5px;
  }

  .gbbPrevImage,
  .gbbNextImage {
    width: 5px;
  }

  .gbbAddProductsPageNavigationContainer,
  .gbbChooseGiftBoxPageNavigationContainer,
  .gbbPersonalizePageNavigationContainer {
    /* transform: translate(0px, -40%); */
  }

  .gbbProductTextContainer,
  .gbbProductItemPrice,
  .gbbProductCardTextContainer,
  .gbbProductDynamicContentContainer {
    font-size: 14px;
  }

  .gbbProductDynamicContentContainer {
    font-weight: 600;
  }

  .gbbChooseGiftBoxPageHeader {}

  .gbbAddProductsPageHeader {}

  .gbbProductsFiltersContainer {
    background: white;
    width: 25%;
  }

  .gbbConditionNotificationToast {
    width: max-content;
  }
}

@media(min-width:1192px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(4, 1fr);
  }

  .gbbProductImageContainerImg {
    max-height: 240px;
  }

  .gbbLoadMoreProductsButton {
    border: none;
    border-bottom: 1px solid black;
  }
}

@media(min-width:1600px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(5, 1fr);
  }

}

@media(min-width:1920px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media(min-width:2560px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media(min-width:3840px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media(min-width: 1023px) {

  .gbbProductItemOverLay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
  }


  .gbbOverLayIconContainer {
    display: block !important;
    width: 100%;
    height: 100%;
    background-image: url("https://d3ks0ngva6go34.cloudfront.net/storefront/overlay-image.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: center;
  }


  /* .gbbProductItem:hover .gbbProductItemOverLay{
    opacity: 0.8;
    display: flex !important;
  } */

  .gbbProductImageContainer:hover .gbbProductItemOverLay {
    opacity: 0.8;
    display: flex !important;
  }
}


.gbbProductFormText {
  margin: 0px;
  padding: 10px 18px;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  max-width: 100%;
  line-height: 1.2;
  border-radius: 2px;
  padding-bottom: 10px;
  border: 1px solid #A2A2A2;
  font-size: 14px !important;
}

.gbbProductVariantModalContainerWithPersonalization .gbbProductDescriptionContainer {
  display: none;
}

.gbbRequiredFieldMessage {
  color: red;
  margin: 0;
  padding: 0;
  font-size: 12px;

}

.gbbProductFormTextCharacterCount {
  font-size: 12px;
  color: #8c8c8c;
  text-align: end;
  grid-column: 2/-1;
}

.gbbProductFormValidationContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


/* For the main list container */
/* .gbbProductFormImageSelectorListContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
} */

/* For individual list items within the list container */
.gbbProductFormImageSelectorListItems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* For the label element */
.gbbProductFormImageSelectorListLabel {
  width: 100%;
  height: 125px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  align-self: center;
}

/* For individual list items */
.gbbProductFormImageSelectorListItem {
  position: relative;
}

/* For the input (radio button) element */
.personalizationImageInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

/* For the image element */
.personalizationImage {
  width: 100%;
  height: auto;
  height: 100%;
}

.gbbActiveImageSelectorListItem {
  border: 1px solid #000000;
  opacity: 0.5;
  padding: 10px;
  padding: 5px;
}

.gbbProductFormContainer {
  display: grid;
  grid-gap: 10px;
}

.gbbPersonalizationImageCaption {
  position: absolute;
  bottom: 5%;
  width: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.gbbActiveImageSelectorListItem .gbbPersonalizationImageCaption {
  opacity: 0;
  padding: 10px;
}


.gbbProductFormRadioListItems {
  display: flex;
  gap: 20px;
}

.personalizationRadioLabel {
  padding-left: 5px;
}

/* =============== NEW PRODUCT CARD DESIGN ============== */
.gbbProductsCardLayoutV2 .gbbProductTextContainer,
.gbbProductsCardLayoutV2 .gbbProductItemPricesContainer {
  text-align: center;
}

.gbbProductsCardLayoutV2 .gbbProductActionContainer {
  grid-template-columns: 1fr;
  padding: 0px;
  grid-template-rows: .5fr 45px;
  place-self: end;
}

.gbbProductsCardLayoutV2 .gbbProductItemPricesContainer {
  display: grid;
  grid-template-columns: auto auto;
  justify-self: center;
  gap: 10px;
}

.gbbProductsCardLayoutV2 .gbbProductItem {
  background: white;
  padding: 8px;
  grid-gap: 5px;
  border-radius: 12px;
  border: 1px solid #E3E3E3;
}

.gbbProductsCardLayoutV2 .gbbProductItem:has(.gbbReviewStarsContainer) {
  grid-template-rows: min-content;
}

.gbbProductsCardLayoutV2 .gbbProductItem:not(:hover) {
  box-shadow: none;
}

.gbbProductsCardLayoutV2 .gbbProductImageContainer {
  border-radius: 8px;
  overflow: hidden;
}

.gbbProductsCardLayoutV2 .gbbProductQuantityHTML,
.gbbProductVariantModalLayoutV2 .gbbProductQuantityHTML {
  height: 100%;
  padding: 5px;
  border-radius: 9px;
  place-items: center;
  background: #eeeeee;
}

.gbbProductsCardLayoutV2 .gbbProductTitleOnly {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
}

.gbbProductsCardLayoutV2 .gbbFooterButtonsWrapper {
  grid-template-columns: .5fr 1fr .5fr;
  width: 100%;
}

.gbbProductsCardLayoutV2 .gbbDiscountMessage {
  font-weight: bold;
}

.gbbProductsCardLayoutV2 .gbbFooterButtonsContainer {
  display: grid;
  justify-items: center;
  background: #f6f6f6;
  padding: 8px;
  border-radius: 12px;
}

.gbbProductsCardLayoutV2 .gbbFooterTotalContainer {
  display: grid;
  grid-template-columns: repeat(2, min-content);
  align-items: center;
  grid-gap: 10px;
  font-weight: bold;
  place-content: center;
}

.gbbProductsCardLayoutV2 .gbbFooterTotalValueContainer {
  justify-content: start;
}

.gbbProductsCardLayoutV2 .gbbFooterBackButton {
  color: black;
  border: 2px solid black;
  background: white;
}

.gbbProductsCardLayoutV2 .gbbFooterNextButton {
  grid-column: 3;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTML {
  grid-template-columns: 1fr;
  padding: 10px 0px;
  grid-gap: 8px;
}

.gbbProductsCardLayoutV2 .gbbDiscountFooterHTML {
  padding-top: 5px;
}

.gbbDiscountFooterHTML:has(.progressBarContainer) {
  display: grid;
  grid-gap: 10px;
}

.gbbProductsCardLayoutV2 .gbbDiscountMessageContainer {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  place-content: center;
  grid-gap: 10px;
  align-items: center;
  /* cursor: pointer; */
}

.gbbProductsCardLayoutV2 .gbbProductAddButton {
  border-radius: 10px;
  font-weight: bold;
}

.gbbProductsCardLayoutV2 .gbbShowBoxProductsToggle {
  height: 25px;
}

.gbbProductsCardLayoutV2 .gbbShowBoxProductsToggleContainer {
  display: flex;
  align-items: center;
}

.gbbProductsCardLayoutV2 .gbbShowBoxProductsToggleContainer>svg {
  height: 30px;
  width: 30px;
}

.gbbProductsCardLayoutV2 .gbbProductQuantityRemoveButton,
.gbbProductsCardLayoutV2 .gbbProductQuantityAddButton {
  border-radius: 6px;
  width: 100%;
}

.gbbProductsCardLayoutV2 .gbbProductQuantityAddButtonWrapper,
.gbbProductsCardLayoutV2 .gbbProductQuantityRemoveButtonWrapper {
  top: 50%;
  left: 50%;
}

.gbbProductsCardLayoutV2 .showBoxProductsInFooter {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  grid-gap: 10px;
  padding-top: 5px;
}

/* .gbbProductsCardLayoutV2 .gbbFooterProductsContainer{
  display: none;
} */
.gbbProductsCardLayoutV2 .gbbFooterTotalLabel {
  font-size: 16px;
}

.gbbProductsCardLayoutV2 .gbbPageFooterHTML {
  width: 80%;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterButtonsWrapper {
  grid-template-columns: .5fr 1.5fr .5fr;
  grid-gap: 10px;
}

.gbbProductsCardLayoutV2 .gbbAddProductsPageFooterHTML,
.gbbProductsCardLayoutV2 .gbbPersonalizePageFooterHTML {
  display: grid;
  justify-items: center;
  z-index: 2;
}

.gbbAddProductsPageFooterHTML {
  border-top: 1px solid #E3E3E3;
}

.progressBarContainer {
  display: flex;
  justify-content: center;
}

.progressBar {
  background-color: #C1E7C5;
  height: 7px;
  border-radius: 25px;
  overflow: hidden;
  width: 80%;
}

.gbbProductsCardLayoutV2 .progressBar {
  width: 100%;
}

.progressBarFill {
  height: 100%;
  width: 0%;
  background-color: #4caf50;
  transition: width 1s;
  /* animation: fillAnimation 2s forwards; */
  display: block !important;
}

.gbbProductsCardLayoutV2 .gbbFooterOriginalTotalValue {
  grid-column: 2;
}

.gbbProductsCardLayoutV2 .gbbFooterBackButton,
.gbbProductsCardLayoutV2 .gbbFooterNextButton {
  border-radius: 5px;
  font-weight: bold;
}

.gbbProductsCardLayoutV2 .gbbOverLayIconContainer {
  background-image: url("https://d3ks0ngva6go34.cloudfront.net/storefront/magnifier_new.svg");
}

.gbbProductsCardLayoutV2 .gbbProductItemPrice,
.gbbProductsCardLayoutV2 .gbbProductItemCompareAtPrice {
  font-size: 16px !important;
  font-weight: bold;
}

.gbbProductsCardLayoutV2 .gbbProductItem:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.12);
}

.gbbProductsCardLayoutV2 .gbbProductTextContainer {
  padding: 0px;
}

.gbbProductsCardLayoutV2 .gbbProductItem .gbbReviewStarsContainer {
  text-align: center;
}

.gbbProductVariantModalContainer .gbbReviewStarsContainer {
  font-size: 13px;
}

.gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButtonWrapper,
.gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButton {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  height: auto;
}

.gbbProductQuantityHTML.productMaxQuantityReached,
.gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButton {
  padding: 10px;
}

.gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButtonWrapper,
.gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButton,
.gbbProductQuantityHTML.productMaxQuantityReached {
  background-color: var(--gbb-product-card-button-text-color) !important;
  color: var(--gbb-product-card-button-color) !important;
}

.gbbProductQuantityHTML.productMaxQuantityReached {
  border: 1px solid var(--gbb-product-card-button-color);
}

.gbbDisabledForMaximumQuantityLimit {
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 900px) {
  .gbbProductsCardLayoutV2 .gbbPageFooterHTML {
    width: 100%;
  }

  .gbbProductsCardLayoutV2 .gbbDiscountMessageContainer {
    display: flex;
  }

  .gbbProductsCardLayoutV2 .gbbDiscountMessage,
  .gbbProductsCardLayoutV2 .gbbFooterTotalContainer {
    font-size: 14px;
  }

  .gbbProductsCardLayoutV2 .gbbProductTitleOnly {
    font-size: 14px;
    line-height: 18px;
  }

  .gbbProductsCardLayoutV2 .gbbProductItemPrice,
  .gbbProductsCardLayoutV2 .gbbProductItemCompareAtPrice {
    font-size: 14px !important;
  }

  .gbbProductsCardLayoutV2 .gbbProductAddButton {
    font-size: 12px;
  }

  .gbbProductsCardLayoutV2 .gbbProductItem {
    grid-gap: 8px;
  }

  .gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButtonWrapper,
  .gbbProductQuantityHTML.productMaxQuantityReached .gbbProductQuantityRemoveButton {
    font-size: 12px;
  }
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductsContainer {
  display: grid;
  max-height: 60vh;
  overflow-y: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: unset;
  grid-auto-flow: unset;
  padding-top: 5px;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductContainer {
  grid-template-columns: 65px 1fr;
  align-items: center;
  padding: 0px;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductImageContainer {
  height: 60px;
  width: 65px;
  border-radius: 8px;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductImage {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductRemoveButton {
  align-items: center;
  position: absolute;
  cursor: pointer;
  top: 0;
  height: 15px;
  display: flex;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductTextContainer {
  width: 100%;
  overflow: auto;
}

.gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbFooterProductTitle {
  font-size: 14px;
  width: 100%;
}

.gbbProductsCardLayoutV2 .gbbCartIconWithQuantityContainer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0px;
  display: flex;
  padding: 0px 10px;
  border-radius: 10px;
  font-size: 14px;
  align-items: center;
}

/* .gbbProductsCardLayoutV2 .gbbProductsFooterHTMLForMobile .gbbCartIconWithQuantityContainer {
  display: flex;
  padding: 0px 10px;
  border-radius: 10px;
  font-size: 14px;
  align-items: center;
} */
.gbbProductsCardLayoutV2 .gbbCartIconWithQuantityContainer>svg {
  height: 20px;
}

/* .gbbProductsCardLayoutV2 .gbbProductsFooterHTML.gbbProductsFooterHTMLForMobile {
  padding: 0px;
} */
/* NEW VARIANT MODAL */
.gbbProductVariantModalLayoutV2 .gbbProductItemPricesContainer {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 5px;
}

.gbbProductVariantModalLayoutV2 .gbbProductItemCompareAtPrice {
  grid-column: -1;
  grid-row: 1;
}

.gbbProductVariantModalLayoutV2 .gbbProductItemPrice {
  grid-column: 1;
  grid-row: 1;
}

.gbbProductVariantModalLayoutV2 .gbbProductQuantityHTMLContainer {
  grid-template-columns: .8fr 1.5fr;
  align-items: center;
}

.gbbProductVariantModalLayoutV2 .gbbProductQuantityAddButton,
.gbbProductVariantModalLayoutV2 .gbbProductQuantityRemoveButton {
  width: 55px;
  height: 30px;
}

.gbbProductVariantModalLayoutV2 .gbbProductQuantityAddButtonWrapper,
.gbbProductVariantModalLayoutV2 .gbbProductQuantityRemoveButtonWrapper {
  top: 50%;
  left: 50%;
}

.gbbProductVariantModalLayoutV2 .gbbProductCardTextContainer {
  display: grid;
  grid-gap: 5px;
}

.gbbProductVariantModalLayoutV2 .gbbProductDescriptionText {
  scrollbar-width: thin;
}

.gbbProductVariantModalLayoutV2 .gbbProductItemTitle {
  font-size: 20px;
}

.gbbProductVariantModalLayoutV2 .gbbProductItemCompareAtPrice {
  font-size: 15px;
}

.gbbProductVariantModalLayoutV2 .gbbProductItemPrice {
  font-size: 16px;
}

.gbbProductVariantModalLayoutV2 .gbbNextBtnContainer,
.gbbProductVariantModalLayoutV2 .gbbPrevBtnContainer {
  background: #eeee;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.gbbProductVariantModalLayoutV2 .gbbNextBtnContainer {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.gbbProductVariantModalLayoutV2 .gbbPrevBtnContainer {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.gbbProductVariantModalLayoutV2 .gbbProductImageContainerImg {
  border-radius: 10px;
}

.gbbProductVariantModalLayoutV2 .gbbProductTabImageContainer,
.gbbProductVariantModalLayoutV2 .gbbProductTabImageContainer img {
  border-radius: 8px;
}

.gbbProductVariantModalLayoutV2 .gbbProductCardActionContainer {
  grid-template-columns: 1fr;
  grid-gap: 0px;
}

.gbbProductVariantModalLayoutV2 .gbbProductVariantModalContainer {
  border: none;
}

.gbbProductVariantModalContainer.gbbVariantInventoryNotAvailable .gbbProductVariantAddButton {
  pointer-events: none;
  opacity: 0.5;
}

.gbbInventoryText {
  font-style: italic;
  font-size: 14px;
}

@media (max-width:430px) {
  .gbbProductsCardLayoutV2 .gbbProductItemPricesContainer {
    grid-template-columns: 1fr;
    gap: 0px;
  }

}

@media (max-width:330px) {
  .gbbProductsItemsContainer {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 1800px) {
  .gbbProductImageContainer img {
    object-fit: contain;
  }
}

/* @media (min-width: 486px) {
.gbbProductsItemsContainer[data-total-products="1"],
  .gbbProductsItemsContainer[data-total-products="2"],
  .gbbProductsItemsContainer[data-total-products="3"],
  .gbbProductsItemsContainer[data-total-products="4"] {
    display: flex;
    justify-content: center;
  } -- not using this block
.gbbProductsItemsContainerLessProducts{
  display: flex;
  justify-content: center;
}
  .gbbProductsItemsContainerLessProducts .gbbProductTitleOnly {
    word-wrap: break-word;
    max-width: 240px;
  }

  .gbbProductsItemsContainerLessProducts .gbbProductItem {
    min-width: 250px;
  }
} */

/* SLOTS */
.gbbSlotFooterProductsContainer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  grid-gap: 10px;
  padding: 5px 0px;
  overflow-x: auto;
  overflow-y: hidden;
  /* place-content: center; */
}

.gbbSlotFooterProductContainer {
  position: relative;
  height: 70px;
  width: 75px;
  border-radius: 8px;
  display: grid;
  place-content: center;
}

img.gbbSlotFooterProductImage {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.gbbSlotFooterProductImageContainer {
  height: 70px;
  width: 75px;
  margin: 0;
  border: 1px solid #cfc9c9;
  overflow: hidden;
  border-radius: 8px;
}

.gbbSlotFooterProductContainerEmpty {
  border: 1px dashed;
  background: #f1f1f1;
}

.gbbSlotFooterProductQuantity {
  position: absolute;
  bottom: 5%;
  font-size: 12px;
  right: 2%;
  background: black;
  color: white;
  padding: 0px 10px;
  border-radius: 10px;
}

.gbbSlotFooterProductRemoveButton {
  align-items: center;
  position: absolute;
  cursor: pointer;
  top: 0;
  /* right: -5px; */
  height: 15px;
  display: flex;
}

.gbbSlotFooterProductsContainerWrapper {
  display: grid;
  justify-content: center;
}

.gbbProductsFooterHTMLForMobile .gbbSlotFooterProductContainer,
.gbbProductsFooterHTMLForMobile .gbbSlotFooterProductImageContainer {
  height: 60px;
  width: 65px;
}

.gbbProductsFooterHTMLForMobile .gbbSlotFooterProductQuantity {
  font-size: 10px;
}

.gbbDiscountRibbon {
  background: red;
  color: white;
  font-weight: bold;
  width: fit-content;
  padding: 2px 8px;
  position: absolute;
  top: 25px;
  right: 0;
  font-size: 12px;
}

.gbbProductImageContainer .gbbProductImageContainerImg {
  display: none;
}

.gbbProductImageContainer .gbbProductImageContainerImg:first-child {
  display: block;
}

/* Wrapper */
.gbbVariantDropdownWrapper {
  position: relative;
  width: 100%;
}

/* Selected Variant */
.gbbSelectedVariant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  border: 1.5px solid #E3E3E3;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  gap: 5px;
}

.gbbSelectedVariant img,
.gbbVariantOption img {
  width: 25px;
  height: 25px;
  border-radius: 5px;


}

/* .gbbSelectedVariant img{ */
/* display: none; */
/* Hidden until a variant is selected */
/* } */

.gbbSelectedVariantTitle {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
}

/* Dropdown Options */
.gbbVariantOptionsContainer {
  position: absolute;
  width: 100%;
  background: white;
  border-color: #f3f3f3;
  border-width: 1px;
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  transition: max-height 0.3s ease-in-out;
  z-index: 10;
  border-style: none;
  overflow-y: scroll;
  top: 100%;
  margin: unset;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.gbbVariantOption {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  list-style: none;
  gap: 10px;
}


.gbbVariantOption:hover {
  background: #f9f9f9;
  z-index: -10;
}

.gbbChevronIcon {
  display: flex;
  align-items: center;
  transform: rotateX(180deg);
  transition: transform 0.3s ease-in-out;
}

.gbbChevronIcon .gbbChevronIconRotate {
  transform: rotateX(0deg);
}

.gbbVariantDropdownOpen .gbbVariantOptionsContainer {
  max-height: 200px;
  border-style: solid;
}

.gbbVariantDropdownOpen .gbbChevronIcon {
  transform: rotateX(0deg);
}

.gbbSelectedVariant.gbbDefaultSelectedVariant {
  border: 0px;
  padding-inline: 0px;
  background: transparent;
}

.gbbSelectedVariant[data-variant-id=""] {
  padding-left: 10px;
}

.gbbProductItem:has(.gbbVariantDropdownWrapper) .gbbVariantTitle {
  display: none;
}

.jdgm-prev-badge__text {
  visibility: visible !important;
}

@media (min-width: 600px) {
  .gbbProductItem:has(.gbbVariantDropdownWrapper) {
    grid-template-rows: 3fr 0.8fr .2fr 0.8fr;
  }
}

.gbbDrawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: grid;
  align-items: end;
}

.gbbDrawer[data-drawer-status="opened"] {
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gbbDrawerContentContainer {
  background: white;
  z-index: 10;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 1px solid #b0adad;
  height: 0%;
  transition: height .5s ease-in-out, transform .5s ease-out;
}

.gbbDrawer[data-drawer-status="opened"] .gbbDrawerContentContainer {
  height: fit-content;
  max-height: 80%;
}

.gbbDrawer[data-drawer-status="closed"] .gbbDrawerContentContainer {
  height: 0%;
  padding: 0px;
}

.gbbDrawer[data-drawer-status="closed"] {
  top: 100%;
  background: none;
  transition: top 0.5s ease-in-out;
}

.gbbDrawerHeader {
  display: grid;
  cursor: pointer;
  padding: 10px;
  grid-template-columns: .5fr 1fr auto;
  gap: 10px;
  position: sticky;
  top: 0;
  background: #ffffff;
  align-items: center;
  pointer-events: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom: 2px solid #e3e3e3;
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
}

.gbbDrawerProductTitle,
.gbbDrawerProductPrice {
  font-size: 18px;
  font-weight: bold;
}

.gbbDrawerCloseIcon {
  display: none;
  align-items: center;
  position: absolute;
  top: -50px;
  left: 50%;
  cursor: pointer;
  z-index: 10;
  transform: translateX(-50%);
}

.gbbDrawer[data-drawer-status="opened"] .gbbDrawerCloseIcon {
  display: grid;
}

.gbbDrawerProductImg {
  width: 100%;
  height: auto;
}

.gbbDrawerCloseIcon svg {
  height: 35px;
  width: 35px;
  background: black;
  border-radius: 50%;
}

.gbbDrawerBodyTitle {
  font-size: 20px;
}

.gbbVariantOptionDrawer {
  display: grid;
  grid-template-columns: 50px 1fr .2fr;
  gap: 8px;
  align-items: center;
  padding: 5px;
}
.gbbProductDefaultOptions{
  font-weight: bold;
  font-size: 16px;
}
img.gbbVariantImgDrawer {
  height: 45px;
  width: 50px;
  object-fit: contain;
}

p.gbbVariantLabelDrawer,
.gbbVariantPriceDrawer {
  font-size: 16px;
}

.gbbDrawerBody {
  padding: 10px;
  color: black;
}

.gbbVariantSelectionContainer {
  display: grid;
  gap: 5px;
  max-height: 50vh;
  overflow-y: scroll;
}

.gbbProductVariantModalMainContainer.gbbProductQuickView {

  .gbbProductCardActionContainer,
  .gbbProductVariantAddButton,
  .gbbProductQuantityHTMLContainer,
  .gbbVariantInventoryContainer,
  .gbbProductItemPricesContainer,
  .gbbProductVariantOptionsContainer {
    display: none !important;
  }
}

.gbbProductVariantModalMainContainer.gbbBoxSelectionMaxQtyLimitReached .gbbProductVariantAddButton {
  pointer-events: none;
  opacity: 0.5;
}

.gbbBodyOverflowHidden {
  overflow-y: hidden !important;
  height: 100vh;
}

/* Minimilistic Product Card */
.gbbModalWrapper.gbbClearCartItemsModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: grid;
  place-content: center;
}

.gbbClearCartItemsModal {

  .gbbModalContainer {
    background: white;
    width: fit-content;
    padding: 20px;
    display: grid;
    gap: 2rem;
    max-width: 500px;
    position: relative;
    border-radius: 5px;
  }

  .gbbModalCloseButton {
    display: grid;
    place-content: end;
  }

  .gbbModalCloseButton path {
    fill: #B2B5B9;
  }

  .gbbModalTitle {
    font-size: 24px;
    font-weight: bold;
  }

  .gbbModalContent {
    text-align: center;
    display: grid;
    place-items: center;
  }

  .gbbModalDescription {
    text-align: center;
    width: 75%;
    line-height: normal;
  }

  .gbbModalFooter {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 200px));
    gap: 1rem;
    place-content: center;
  }

  .gbbModalHeader {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .gbbModalCancelButton,
  .gbbModalConfirmButton {
    border: 1px solid;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    width: 150px;
    font-size: 14px;
  }

  .gbbModalConfirmButton {
    background: #FDECEA;
    gap: 1rem;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    place-content: center;
    color: #D13D54;
  }

  .gbbModalCancelButton {
    place-self: end;
  }

  .gbbModalDeleteIcon {
    display: flex;
  }
}
/* .gbbPageBody[data-discount-mode="FIXED_BUNDLE_PRICE"] .gbbProductItemCompareAtPrice,
.gbbPageBody[data-discount-mode="FIXED_BUNDLE_PRICE"] .gbbProductItemPrice,
.gbbPageBody[data-discount-mode="FIXED_BUNDLE_PRICE"] .gbbFooterProductCompareAtPrice,
.gbbPageBody[data-discount-mode="FIXED_BUNDLE_PRICE"] .gbbFooterProductPrice {
  display: none !important;
}   */
 /* TOGGLE BASED */
.gbbMinimilisticLayout {
  max-width: 1536px;
  margin: 0 auto;

  .gbbProductDynamicContentContainer {
    padding: 0px;
  }

  .gbbProductItem .gbbReviewStarsContainer {
    text-align: left;
  }

  .gbbProductActionContainer {
    grid-template-columns: 0.6fr .4fr;
    grid-template-rows: 1fr;
  }

  .gbbProductItemPricesContainer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0px;
    width: 100%;
  }

  .gbbProductTextContainer,
  .gbbProductItemPricesContainer {
    text-align: left;
    line-height: normal;
  }
  .gbbProductTextContainer,
  .gbbProductItemTitle,
  .gbbProductTitleOnly{
    height: 100%;
  }

  .gbbProductItemCompareAtPrice {
    font-size: 12px !important;
  }

  .gbbProductItemPrice {
    font-size: 16px !important;
  }

  .gbbProductAddButton svg path,
  .gbbProductQuantityAddButton svg path,
  .gbbProductQuantityRemoveButton svg path {
    fill: var(--gbb-product-card-button-text-color);
  }

  .gbbProductTitleOnly {
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 5px;
  }

  .gbbProductQuantityHTML {
    gap: 0px;
    color: white;
    border-radius: 25px;
    overflow: hidden;
    padding: 0px 10px;
  }

  .gbbProductAddButton {
    width: 35px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0px;
  }

  .gbbProductButtonWrapper {
    display: grid;
    place-items: flex-end;
    grid-column: 2;
  }

  /* .gbbProductItem,
  .gbbProductImageContainer{
    border-radius: 0px;
    border:0px;
  } */
  .gbbProductImageContainer img {
    object-fit: cover !important;
  }

  .gbbProductItem {
    gap: 8px;
    border-radius: 10px;
    border: none;
    outline: 2px solid #f1f2f3;
    grid-template-rows: 3fr 0.5fr 0.5fr;
  }

  .gbbProductItemTitle {
    display: grid;
    gap: 5px;
  }

  .gbbVariantTitle {
    font-weight: bold;
  }

  .gbbProductItem:hover {
    box-shadow: none;
  }

  .gbbProductItem:has(.gbbVariantDropdownWrapper) {
    grid-template-rows: 3fr 0.6fr .2fr 0.4fr;
  }

  .gbbProductItem:has(.gbbProductQuantityHTML) {
    outline: 2px solid var(--gbb-product-card-button-color);
  }

  .gbbProductQuantityAddButtonWrapper,
  .gbbProductQuantityRemoveButtonWrapper {
    display: grid;
    place-items: center;
  }

  .gbbOverLayIconContainer {
    background-size: 15%;
    margin: 10px 5px;
    background-position: right top;
  }

  .gbbProductItemOverLay {
    background: transparent;
  }

  .gbbMultipleCategoryBodyContainer {
    display: grid;
    grid-template-columns: 1fr .45fr;
    gap: 15px;
  }

  .gbbFooterBundleInfoContainer {
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr .2fr;
  }

  .gbbFooterClearItemsButtonWrapper {
    height: fit-content;
    display: grid;
    grid-auto-flow: column;
    padding: 5px 14px;
    outline: none;
    border: none;
    background: transparent;
    border-radius: 8px;
    /* border: 1px solid; */
    cursor: pointer;
    background: #FDECEA;
    color: #D13D54;
    font-size: 15px;
    /* border-radius: 99999px; */
  }

  .gbbFooterClearItemsIcon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gbbFooterBundleTitle {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
  }

  .gbbFooterBundleInfoContentContainer {
    display: grid;
    gap: 5px;
  }

  .gbbFooterBundleSubtext {
    font-size: 14px;
    line-height: 20px;
  }

  .gbbSideFooterHTML {
    background: var(--gbb-cart-footer-bg-color);
    color: var(--gbb-cart-footer-text-color);
    display: grid;
    gap: 5px;
  }

  .gbbDiscountMessageContainer {
    grid-template-columns: auto;
  }

  .gbbFooterBundleItemsContainer {
    display: grid;
    gap: 10px;
  }

  .gbbFooterProductWrapper {
    display: grid;
    gap: 9px;
    grid-template-columns: auto minmax(0, 1fr) .3fr;
    height: fit-content;
  }

  .gbbFooterVariantTitle {
    font-size: 12px;
  }

  .gbbFooterProductPriceContainer {
    display: grid;
    grid-template-columns: repeat(2, min-content);
    gap: 5px;
    place-items: baseline;
  }

  .gbbFooterProductCompareAtPrice {
    font-size: 14px;
    text-decoration: line-through;
  }

  .gbbFooterProductRemoveButtonWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    height: fit-content;
    width: fit-content;
    place-self: center;
    height: 40px;
    width: 40px;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
  }

  .gbbFooterProductRemoveButtonWrapper:hover {
    background-color: #FDECEA;
  }

  .gbbFooterProductRemoveButtonWrapper:empty {
    visibility: hidden;
  }

  .gbbFooterButtonsWrapper .gbbFooterTotalContainer {
    display: none;
  }
  .gbbProductsFooterHTMLForMobile .gbbFooterProductRemoveButton,
  .gbbFooterProductRemoveButton {
    height: fit-content;
    display: flex;
    position: unset;
  }

  .gbbFooterButtonsWrapper {
    grid-template-columns: min-content auto;
    gap: 5px;
  }

  .gbbFooterActionContainer {
    display: grid;
    grid-template-columns: .5fr .5fr;
    place-content: end;
    border-top: 1px solid #E3E3E3;
    padding-top: 15px;
    margin-top: 10px;
  }

  .gbbFooterNextButton {
    grid-column: 2;
    height: fit-content;
    align-self: end;
  }

  .gbbFooterTotalContainer {
    grid-template-columns: 1fr;
    place-content: start;
    text-align: start;
    grid-gap: 8px;
  }

  .gbbFooterTotalValue,
  .gbbFooterDiscountedTotalValue {
    font-size: 20px;
    line-height: 18px;
  }

  .gbbFooterOriginalTotalValue {
    font-size: 14px;
    line-height: 12px;
    align-self: end;
  }

  .gbbFooterBackButton {
    background: transparent !important;
    color: #000000 !important;
    border: none;
    outline: 1px solid #E3E3E3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100%; */
    place-self: end;
  }

  .gbbFooterProductActionContainer {
    display: grid;
    place-content: center;
    place-items: center;
    grid-template-columns: auto max-content;
    gap: 8px;
  }

  .gbbBoxSelectionWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
  }

  .gbbBoxSelectionWrapper[data-total-rules="2"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .gbbAddProductsPageFooterHTML {
    z-index: 9999;
  }

  .gbbFooterTotalLabel {
    line-height: normal;
  }

  .gbbBoxSelectionItem {
    border-radius: 5px;
    display: grid;
    align-items: center;
    line-height: normal;
    padding: 5px 0px;
    cursor: pointer;
    background-color: #ffffff;
    color: #000000;
    outline: 1px solid #e3e3e3;
  }

  .gbbBoxSelectionSubtext {
    font-size: 14px;
  }

  .gbbBoxSelectionHeading {
    font-weight: bold;
  }

  .gbbBoxSelectionItem.gbbBoxSelectionItemActive {
    background: #000000;
    color: white;
    outline: 1px solid #000000;
  }

  .gbbSlotFooterProductsContainerWrapper {
    justify-content: start;
    place-items: center;
    max-height: 35vh;
  }

  .gbbConditionNotificationToast {
    position: fixed;
    bottom: 5%;
  }

  .gbbBundleTotalWrapper {
    display: grid;
    grid-auto-flow: column;
    place-content: flex-start;
    gap: 5px;
    place-items: baseline;
  }

  .gbbDiscountPill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: greenyellow;
    color: #000000;
    /* color: var(--gbb-cart-footer-next-button-color); */
  }

  p.gbbDiscountPillText {
    line-height: normal;
    text-wrap-mode: nowrap;
  }

  .gbbCategoryToggleButton svg path {
    fill: #000000;
  }

  .gbbCategoryHeaderContainer {
    justify-content: space-between;
  }

  
  .gbbCategoryContainer {
    border-radius: 0px;
    border: none;
    border-bottom: 2px solid #c0c0c0;
    padding: 0px;
    display: grid;
    gap: 10px;
    padding-block: 14px;
  }
  .gbbCategoryContainer:first-child {
    padding-top: 0px;
  }
 .gbbProductsContainer{
    margin:0px;
 }
  img.gbbCategoryTabImage {
    height: 35px;
    width: 35px;
  }

  .gbbCategoryTabContainer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    padding: 10px;
  }

  .gbbCategoryTabContainer[data-is-active="true"] {
    border-bottom: 2px solid #000000;
  }

  .gbbCategoryTabContainer[data-is-active="true"] .gbbCategoryTabTitle {
    color: #000000;
  }

  .gbbCategoryTabTitle {
    font-weight: bold;
    color: #8A8A8A;
  }

  .gbbCategoryTitle {
    font-size: 18px;
  }

  .gbbCategoryToggleButton {
    display: grid;
  }

  .gbbCategoryContainer[data-is-active="false"] .gbbCategoryBodyContainer {
    height: 0px;
    transition: height 0.3s ease-in-out;
  }

  .gbbCategoryContainer[data-is-active="true"] .gbbCategoryBodyContainer {
    height: fit-content;
    transition: height 0.3s ease-in-out;
  }

  .gbbCategoryContainer[data-is-active="true"] .gbbCategoryToggleButton {
    display: none;
    rotate: 45deg;
    transition: rotate 0.3s ease-in-out;
  }

  .gbbMultipleCategoriesPageHTML[data-total-categories='1'] {

    .gbbMultipleCategoryHeaderContainer,
    .gbbMultipleCategoryBody .gbbCategoryHeaderContainer {
      display: none;
    }

    .gbbCategoryContainer {
      padding: 0px;
      border-bottom: none;
    }

  }

  .gbbMultipleCategoryTabsContainer {
    display: grid;
    grid-auto-flow: column;
    gap: 2rem;
    grid-auto-columns: max-content;
    /* border-bottom: 1px solid #E3E3E3; */
  }

  .gbbProductsFooterHTMLForMobile {
    .gbbFooterProductWrapper {
      grid-template-columns: .3fr minmax(150px, 1fr) .3fr;
    }
    /* .gbbSlotFooterProductContainer,
    .gbbSlotFooterProductImageContainer {
      height: 50px;
      width: 55px;
    } */
    .gbbSlotFooterProductsContainerWrapper {
      place-items: normal;
      max-height: unset;
      place-content: center;
    }
    .gbbFooterClearItemsButtonWrapper {
      font-size: 12px;
    }

    .gbbFooterBundleTitle {
      font-size: 20px;
      line-height: 18px;
    }

    .gbbFooterProductsContainer {
      gap: 10px;
      /* scrollbar-width: none; */
      /* -ms-overflow-style: none; */
    }

    .gbbFooterProductsContainer::-webkit-scrollbar {
      display: none;
    }

    .gbbFooterBundleSubtext {
      font-size: 12px;
    }

    .gbbFooterProductCompareAtPrice {
      font-size: 12px;
    }

    .gbbFooterBundleInfoContainer {
      padding-bottom: 10px;
      border-bottom: 1px solid #e3e3e3;
    }

    .gbbFooterBundleItemsContainer {
      max-height: 60vh;
    }
    .progressBar{
      height: 5px;
    }
    .gbbFooterActionContainer {
      grid-template-columns: 1fr;
      padding-top: 0px;
      margin-top: 0px;
      border-top: none;
    }
    .gbbFooterButtonsWrapper .gbbFooterTotalContainer{
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: auto;
    }
    .gbbFooterButtonsWrapper{
      gap: 0px;
      grid-template-columns:min-content auto;
    }
    .gbbFooterButtonsWrapper:has(.gbbFooterBackButton) {
      gap: 5px;
    }
    .gbbFooterTotalValueContainer {
      grid-column: 1;
    }
    .gbbFooterTotalLabel{
      display: none;
    }
    .gbbFooterNextButton {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: auto min-content auto;
      gap: 8px;
      place-content: center;
    }
    .gbbFooterBackButton,
    .gbbFooterNextButton {
      font-size: 14px;
      padding: 8px;
    }
    .gbbFooterTotalValue,
    .gbbFooterOriginalTotalValue,
    .gbbFooterDiscountedTotalValue{
      font-size: inherit;
      line-height: inherit;
      color: inherit !important;
    }
    .gbbFooterOriginalTotalValue{
      font-size: calc(1em - 2px);
      align-self: end;
      display: none;
    }
    .gbbFooterTotalContainer{
      gap: 4px;
    }   
    /* .gbbSlotFooterProductsContainerWrapper{
      display: none !important;
    } */
    .gbbSlotFooterProductsContainer {
      grid-template-columns: repeat(auto-fit, minmax(65px, 65px));
      grid-auto-columns: unset;
      overflow-y: hidden;
      grid-auto-flow: unset;
      gap: 8px;
    }
}
 .gbbPageFooterHTML[data-footer-bundle-total="0"] .gbbProductsFooterHTMLForMobile .gbbFooterTotalValue,
 .gbbPageFooterHTML[data-footer-bundle-total="0"] .gbbProductsFooterHTMLForMobile .gbbFooterDiscountedTotalValue,
 .gbbPageFooterHTML[data-footer-bundle-total="0"] .gbbProductsFooterHTMLForMobile .gbbFooterPriceSeperator {
   display: none;
 }
 
  /* Wrapper */
  .gbbMultipleCategoriesDropdownContainer {
    position: relative;
    width: 100%;
    padding: 0px;
    overflow: unset;
  }

  /* Selected Variant */
  .activeCategoryContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1.5px solid #E3E3E3;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    gap: 10px;
  }

  .gbbActiveCategoryContainer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
    border: 1px solid #e3e3e3;
    padding: 10px;
    flex-grow: 1;
    border-radius: 5px;
    background: #000000;
    color: #f3f3f3;
  }

  .gbbCategoryHeaderContainer {
    justify-content: space-between;
    grid-template-columns: unset;
    grid-auto-flow: column;
    /* padding: 15px 0px; */
    /* border-bottom: 2px solid #c0c0c0; */
  }

  .gbbMultipleCategoryHeaderContainer:has(.gbbMultipleCategoryTabsContainer) {
    overflow-x: auto;
    border-bottom: 1px solid #e3e3e3;
  }

  .gbbMultipleCategoriesDropdownContainer .gbbCategoryOptionsContainer {
    position: absolute;
    width: 100%;
    background: #000000;
    color: #ffffff;
    border-color: #f3f3f3;
    border-width: 1px;
    border-radius: 5px;
    max-height: 0;
    overflow-x: hidden;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    transition: max-height 0.3s ease-in-out;
    z-index: 10;
    border-style: none;
    overflow-y: auto;
    top: 100%;
  }

  .gbbMultipleCategoryHeaderContainer {
    background: var(--gbb-bundle-bg-color);    /* position: sticky; */
    /* top: 0px; */
    /* z-index: 99; */
  }

  .gbbMultiCategoryChevronIcon path {
    fill: #ffffff;
  }

  .gbbCategoryOption {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    list-style: none;
    gap: 10px;
  }


  .gbbCategoryOption:hover {
    z-index: -10;
  }

  .gbbMultiCategoryChevronIcon {
    display: flex;
    align-items: center;
    transform: rotateX(180deg);
    transition: transform 0.3s ease-in-out;
  }

  .gbbCategoryDropdownOpen .gbbCategoryOptionsContainer {
    max-height: 500px;
    border-style: solid;
  }

  .gbbCategoryDropdownOpen .gbbMultiCategoryChevronIcon {
    transform: rotateX(0deg);
  }

  .gbbMultipleCategoryHeaderContainer {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gbbEmptyProductCardTitle,
  .gbbEmptyVariantTitle,
  .gbbEmptyProductCardPrice,
  .gbbEmptyProductCardActionContainer,
  .gbbEmptyProductCardImageContainer {
    display: block !important;
    background: #e1e1e1;
    border-radius: 10px;
  }

  .gbbEmptyProductCardImageContainer {
    border: 2px dashed #a6a3a3;
    height: 100%;
    border-radius: 5px;
  }

  .gbbEmptyProductCard {
    display: grid;
    grid-template-columns: 75px 1fr .3fr;
    grid-template-rows: 75px;
    gap: 10px;
    align-items: center;
  }

  .gbbEmptyProductCardsContainer {
    display: grid;
    gap: 15px;
    grid-template-rows: min-content;
  }

  .gbbEmptyProductCardTitle {
    padding: 7px;
    width: 80%;
  }

  .gbbEmptyProductCardInfoContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .gbbEmptyVariantTitle {
    padding: 6px;
    width: 60%;
  }

  .gbbEmptyProductCardPrice {
    width: 25%;
    padding: 6px;
  }

  .gbbEmptyProductCardActionContainer {
    padding: 10px;
    height: fit-content;
  }

  .gbbFooterProductRemoveButtonWrapper.gbbRemoveButtonDisabled:hover {
    background-color: #e1e1e1;
  }

  .gbbRemoveButtonDisabled {
    path {
      fill: #ababab;
    }
  }
  @media (min-width: 1192px) {
    .gbbProductsItemsContainer {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media(min-width: 800px) and (max-width: 1024px) {
    .gbbProductsItemsContainer {
      grid-template-columns: repeat(2, 1fr);
    }

    .gbbMultipleCategoryBodyContainer {
      grid-template-columns: 1fr .7fr;
    }

  }

  /* @media(min-width: 768px){
    .gbbMultipleCategoryBodyContainer {
        grid-template-columns: 1fr;
      }
      
    } */
  /* screen more than 600px */
  @media (min-width: 800px) {
    .gbbBodyWrapper {
      margin: 0 2%;
    }

    .gbbSlotFooterProductsContainer {
      grid-template-columns: repeat(auto-fit, minmax(75px, 75px));
      max-width: 450px;
      grid-auto-columns: unset;
      overflow-y: scroll;
      grid-auto-flow: unset;
    }

    .gbbProductTitleOnly {
      font-size: 16px;
    }

    .gbbProductQuantityHTML {
      width: 70%;
    }

    .gbbAddProductsPageFooterHTML {
      display: none;
    }

    .gbbPageFooterHTML {
      width: 100%;
      height: fit-content;
      padding: 20px;
      border-radius: 10px;
      position: sticky;
      top: 10%;
      border: 1px solid #E3E3E3;
    }

    .gbbProductsContainer {
      margin-left: 0px;
      margin-right: 0px;
    }

    .gbbFooterProductsContainer {
      grid-template-columns: 1fr;
      grid-auto-flow: row;
      grid-template-rows: 75px;
      gap: 15px;
      max-height: 32vh;
      min-height: 260px;
      overflow-y: auto;
      padding-right: 10px;
      overflow-x: hidden;
    }

    .gbbFooterProductsContainer::-webkit-scrollbar {
      width: 4px;
    }

    .gbbFooterProductsContainer::-webkit-scrollbar-track {
      /* background: #e1e1e1; */
    }

    .gbbSlotFooterProductsContainer {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
.gbbFooterProductsContainer::-webkit-scrollbar-track {
  background: #dbdbdb;
  border-radius: 4px;
}

.gbbFooterProductsContainer::-webkit-scrollbar-thumb {
  background: #4a4a4a !important;
  border-radius: 4px;
}
    .gbbFooterProductsContainer:empty {
      display: block !important;
    }

    .gbbPersonalizePageFooterHTML {
      background-color: transparent !important;
    }

    .gbbFooterProductTitle {
      width: unset;
      font-weight: bold;
      line-height: 20px;
      font-size: 14px;
    }

    .gbbFooterProductPrice {
      font-size: 16px;
    }

    .gbbFooterProductImageContainer {
      width: 75px;
      height: 75px;
      border-radius: 10px;
    }
  }

  /* greather than 768px less than 1025 */
  @media (min-width: 768px) and (max-width: 1024px) {
    .gbbFooterProductImageContainer {
      width: 60px;
      height: 60px;
    }

    .gbbFooterVariantTitle {
      line-height: 15px;
    }

    /* .gbbFooterProductTitle {
          width: 200px;
        } */
    .gbbFooterProductPrice {
      font-size: 14px;
    }

    .gbbFooterProductCompareAtPrice {
      font-size: 12px;
    }

    .gbbFooterProductsContainer {
      gap: 8px;
      grid-template-rows: auto;
    }

    .gbbEmptyProductCard {
      grid-template-columns: 60px 1fr .3fr;
      grid-template-rows: 60px;
    }
  }

  @media (max-width: 768px) {
    .gbbMultipleCategoriesPageHTML:has(.gbbBoxSelectionWrapper) {
      display: grid;
      gap: 15px;
    }

    .gbbMultipleCategoriesContainerHTML {
      grid-gap: 15px;
    }

    .gbbMultipleCategoryBodyContainer {
      grid-template-columns: 1fr;
    }

    .gbbMultipleCategoriesDropdownContainer {
      padding-inline: unset;
    }

    .gbbBoxSelectionHeading {
      font-size: 14px;
    }

    .gbbBoxSelectionSubtext {
      font-size: 12px;
    }

    .gbbMultipleCategoriesDropdownContainer {
      display: none;
    }

    .gbbEmptyProductCard {
      grid-template-columns: 65px 1fr .3fr;
      grid-template-rows: 65px;
    }

    .gbbModalWrapper.gbbClearCartItemsModal {
      padding: 15px;
    }

    .gbbFooterBackButton svg {
      height: 22px;
      width: 22px;
    }

    .gbbProductActionContainer {
      grid-template-columns: 0.5fr .5fr;
      justify-content: space-between;
    }
    .gbbCartQuantity{
      white-space: nowrap;
    }
  }

  
}

@media (max-width: 600px) {
  .gbbSelectedVariantTitle{
    font-size: 12px;
  }
  .gbbModalWrapper.gbbClearCartItemsModal {
    padding: 15px;
  }
}

.gbbMinimilisticVariantModal {
  .gbbProductCardActionContainer {
    grid-template-columns: .5fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
  }

  .gbbProductDescriptionText {
    max-height: 300px;
  }

  .gbbProductVariantAddButton {
    grid-column: 2;
    height: fit-content;
    align-self: end;
  }

  .gbbProductItemPricesContainer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-row: 1;
    gap: 0px;
  }

  .gbbProductItemCompareAtPrice {
    grid-column: 1;
    line-height: normal;
  }

  .gbbProductItemPrice {
    grid-row: 2;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
  }

  .gbbProductQuantityHTMLContainer {
    grid-template-columns: auto min-content;
    place-self: start;
  }

  .gbbProductQuantityHTML {
    overflow: hidden;
    border-radius: 9999px;
    padding: unset;
    height: fit-content;
  }

  .gbbProductQuantityAddButton,
  .gbbProductQuantityRemoveButton {
    border-radius: 99px;
    display: grid;
    align-items: center;
    justify-content: center;
  }

  .gbbProductQuantityAddButton svg path,
  .gbbProductQuantityRemoveButton svg path {
    fill: var(--gbb-product-card-button-text-color);
  }

  @media (min-width: 601px) {
    .gbbProductVariantModalContentContainer {
      grid-gap: 0px;
    }

    .gbbProductVariantModalContainer {
      min-width: 1010px;
      max-width: 1400px;
    }

    .gbbProductVariantModalImageTitleContainer {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      align-self: flex-start;
      height: 100%;
      gap: 0px;
    }

    .gbbProductVariantModalImageTitleContainer:has(.gbbProductAllImagesContainer) {
      grid-template-columns: .2fr 1fr;
      gap: 15px;
    }

    .gbbProductImageContainer {
      grid-column: 2;
    }

    .gbbProductAllImagesContainer {
      grid-column: 1;
      grid-row: 1;
      grid-template-columns: auto;
      overflow: auto;
      scrollbar-width: none;
      max-height: unset;
      grid-auto-flow: row;
      grid-auto-rows: 75px;
    }

    .gbbProductImageContainerImg {
      max-height: unset;
      object-fit: contain;
    }
  }

  @media (max-width: 600px) {
    .gbbProductItemPrice {
      font-size: 18px;
    }
  }
}

.gbbBoxSelectionMaxQtyLimitReached .gbbProductQuantityAddButton,
.gbbBoxSelectionMaxQtyLimitReached .gbbProductAddButton {
  pointer-events: none;
  opacity: 0.5;
}

/* Subscription Widget */

/* Base radio styles */
.gbbSubscriptionPurchaseOptionRadioWrapper input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gbb-cart-footer-next-button-color);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

/* Radio checked state */
.gbbSubscriptionPurchaseOptionRadioWrapper input[type=radio]:checked:after {
  content: '';
  width: 10px;
  height: 10px;
  background:var(--gbb-cart-footer-next-button-color);
  border-radius: 50%;
  display: block;
}

/* Radio wrapper layout */
.gbbSubscriptionPurchaseOptionRadioWrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
}

/* Purchase option container */
.gbbSubscriptionPurchaseOption {
  padding: 15px 10px;
  border:1px solid #E3E3E3;
  cursor: pointer;
  border-radius: 7px;
  transition: border-color 0.2s ease;
  display: grid;
  gap: 5px;
}

/* Options wrapper */
.gbbSubscriptionPurchaseOptionsWrapper {
  display: grid;
  gap: 8px;
}

/* Radio label and subtitle */
.gbbSubscriptionPurchaseOptionRadioLabel,
.gbbSellingPlansDropdownSelected,
.gbbSellingPlansDropdownOption {
  font-size: 14px;
  cursor: pointer;
}

.gbbSubscriptionPurchaseOptionRadioLabel {
  transition: font-weight 0.2s ease;
}

.gbbSellingPlansDropdownOptionsContainer{
  position: absolute;
  width: 100%;
  background: white;
  border-radius: 5px;
  max-height: 0;
  border-width: 1px;
  border-color: #E3E3E3;
  overflow: hidden;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  z-index: 10;
  border-style: none;
  overflow-y: auto;
  top: 100%;
  margin: unset;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:max-height 0.3s ease-in-out,border-style 0.4s ease-in-out;
}

.gbbSellingPlansDropdownOptionsContainer .gbbSellingPlansDropdownOption:hover {
  background: #f9f9f9;
  z-index: -10;
}

.gbbSellingPlansDropdownOption {
  padding: 5px;
  display: grid;
  width: 100%;
  align-items: center;
  grid-template-columns: max-content auto;
  gap: 8px;
}

.gbbSellingPlansDropdownChevron {
  display: flex;
  align-items: center;
  transform: rotateX(180deg);
  transition: transform 0.3s ease-in-out;
}

.gbbSellingPlansDropdownContainer.gbbSellingPlansDropdownOpen{
  .gbbSellingPlansDropdownChevron {
      transform: rotateX(0deg);
    }
  .gbbSellingPlansDropdownOptionsContainer {
    max-height: 200px;
    border-style: solid;
  }
  .gbbSellingPlansDropdownSelected {
    border-bottom-right-radius: 0px;
    border-bottom: 0px;
    border-bottom-left-radius: 0px;
  }
} 

.gbbSellingPlansDropdownContainer {
  position: relative;
  margin-left: 25px;
}

.gbbSellingPlansDropdownSelected{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1.5px solid #E3E3E3;
    border-radius: 5px;
    background: #fff;
    user-select: none;
    gap: 5px;
}

.gbbSellingPlansDropdownDiscountPill {
  background: var(--gbb-cart-footer-next-button-color);
  color: var(--gbb-cart-footer-next-button-text-color);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  width: fit-content;
  text-align: center;
  display: flex;
  align-items: center;
  height: fit-content;
}

.gbbSellingPlansDropdownSelected .gbbSellingPlansDropdownOption{
  padding: 0px;
}

.gbbSubscriptionPurchaseOptionSubtitle {
  font-size: 12px;
}
.gbbSellingPlanHidden,
.gbbHideSubscriptionRadioInput input[type=radio]{  
  display: none !important; 
}
.gbbHideSubscriptionRadioInput .gbbSellingPlansDropdownContainer{
  margin-left: 0px;
}
.gbbProductsFooterHTMLForMobile:has(.gbbSubscriptionWidgetWrapper) .gbbFooterBundleItemsContainer {
  max-height: 75vh !important;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gbbFooterNextButton[data-select-subscription-plan-button="true"] {
  .gbbFooterPriceSeperator,
  .gbbBundleTotalWrapper{
    display: none;
  }
}
.gbbSellingPlansDropdownDiscountPill:empty{
  display: none;
}

/***************************************************Landing page CSS*******************************************************************/
* {
  margin: 0;
  padding: 0;
}

.gbbReviewPageHTMLContent {
  display: grid;
  grid-gap: 20px;
}

/* review page banner css */
.gbbReviewPageBanner {
  display: grid;
  position: relative;
}

.gbbReviewPageBannerImage {
  display: grid;
  object-fit: cover;
  width: 100%;
  /* width: 100vw; */
  height: 40vw;
  /*20vw for desktop*/
}

.gbbReviewPageBannerText {
  font-size: 14px;
  /* color: #fff; */
}

.gbbReviewPageBannerSubText {
  font-size: 12px;
  /* color: #fff; */
}

.ReviewPageBannerButton {
  padding: 10px;
  font-size: 12px;
  width: 100%;
  border-radius: 8px;
  border: 2px solid #ffff;
  cursor: pointer;
}

.gbbReviewPageBannerTextWrapper {
  /* position: absolute; */
  top: 55%;
  left: 8%;
  /* top: 20%;
    left: 10%; */
  width: max-content;
  display: grid;
  grid-template-rows: 0.2fr 0.4fr;
  grid-gap: 10px;
  grid-gap: 5px;
  justify-items: center;
  text-align: center;
  width: 70vw;
  padding: 10px;
}

.gbbReviewPageBodyContainer {
  display: grid;
  justify-self: center;
  width: 95%;
}

.gbbReviewPageTotalBlock {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto 2fr;
  border-radius: 5px;
  color: #000;
}

.gbbReviewPageTotalBlockPrice {
  display: grid;
  justify-self: center;
  align-self: center;
  padding: 5px 5px;
}

.gbbReviewPageTotalBlockPriceTitle {
  font-size: 12px;
}

.gbbReviewPageTotalBlockPriceValue {
  font-weight: 700;
}

.gbbReviewPageTotalBlockDelivery {
  display: grid;
  justify-self: center;
  align-self: center;
  padding: 5px 5px;
}

.gbbReviewPageTotalBlockDeliveryTitle {
  font-size: 12px;
}

.gbbReviewPageTotalBlockDeliveryTitleValue {
  font-weight: 700;
}

.gbbReviewPageTotalBlockActions {
  display: grid;
  /* grid-template-columns: 1fr auto auto; */
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  justify-items: end;
  grid-gap: 5px;
  /* padding: 5px 5px; */
  margin-top: 10px;
  justify-items: right;
  align-items: center;
}

.gbbReviewPageTotalBlockActionsBack {
  background-color: grey;
  padding: 5px 10px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  justify-self: left;
  font-size: 12px;
  cursor: pointer;
}

.gbbReviewPageTotalBlockActionsCheckout {
  padding: 5px 10px;
  text-align: center;
  color: #000;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
}

.gbbReviewPageProductList {
  /* padding-top: 20px; */
}

.gbbReviewPageProductListItems {
  display: grid;
  margin: 10px 0px;
  /* padding: 0px 10px; */
  border-top: 2px solid #f1f2f3;
  border-bottom: 2px solid #f1f2f3;
}

.gbbReviewPageProductListItem,
.gbbReviewPageProductItemsHeaders {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 2fr 1fr 1fr;
}

.gbbReviewPageProductListItem {
  font-size: 12px;
}

.gbbReviewPageProductListItemName,
.gbbReviewPageProductItemsHeadersProduct,
.gbbReviewPageProductItemsHeadersQuantity,
.gbbReviewPageProductItemsHeadersPrice {
  padding: 5px 5px;
  font-weight: 600;
}

.gbbReviewPageProductItemsHeadersProduct {
  text-align: left;
}

.gbbReviewPageProductItemsHeadersQuantity {
  text-align: center;
}

.gbbReviewPageProductItemsHeadersPrice {
  text-align: right;
}

.gbbReviewPageProductListItemQty {
  padding: 5px 5px;
  text-align: center;
}

.gbbReviewPageProductListItemPrice {
  padding: 5px 5px;
  text-align: right;
  display: grid;
  grid-template-columns: max-content;
  justify-content: end;
}

.gbbReviewPageProductListItemRemoveBtn {
  padding: 5px 5px;
  font-size: 12px;
  justify-self: end;
  cursor: pointer;
  color: #aba6a6;
}

.gbbReviewPageProductListTitle {
  font-size: 15px;
  font-weight: 600;
}

/**********ADD ON PRODUCTS HTML ****/
.gbbReviewPageHTMLContent .gbbProductItem {
  /* width: auto; */
  display: grid;
  width: 140px;
  grid-template-rows: 90px 0.1fr 0.1fr;
  grid-gap: 5px;
}

.gbbReviewPageHTMLContent .gbbProductsContainer {
  overflow-x: auto;
  display: grid;
  justify-self: center;
}

.gbbReviewPageHTMLContent .gbbProductsItemsContainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-gap: 10px;
  overflow-x: auto;
}

.gbbReviewPageHTMLContent .gbbProductTextContainer {
  align-self: normal;
}

.gbbReviewPageHTMLContent .gbbProductItemTitle {
  color: black;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 120px;
  display: block;
  overflow: hidden;
}

.gbbReviewPageHTMLContent .gbbProductImageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #cfc9c9;
  overflow: hidden;
}

.gbbReviewPageSubTotalCartWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gbbReviewPageSubTotalCart {
  text-align: end;
  grid-column: 2/3;
}

.gbbReviewPageSubTotalCartLabel {
  display: grid;
  font-size: 14px;
  font-weight: 600;
  justify-content: end;
  grid-template-columns: max-content;
}

.gbbReviewPageHTMLContent .gbbProductQuantityRemoveButton,
.gbbReviewPageHTMLContent .gbbProductQuantityAddButton {
  height: 25px;
  width: 25px;
  font-size: 14px;
}

.gbbReviewPageHTMLContent .gbbProductActionContainer {
  grid-auto-flow: row !important;
  grid-gap: 10px !important;
}

.gbbReviewPageHTMLContent .gbbPrevImage,
.gbbReviewPageHTMLContent .gbbNextImage {
  padding: 0;
  width: 2px;
  margin-top: 0;
  top: 40%;
  background: none;
  color: grey;
}

.gbbReviewPageBodyContainer {
  margin: 20px;
}

.gbbReviewPageHTMLContent .gbbNextImage {
  right: 10px;
}

@media only screen and (min-width: 600px) {
  .gbbReviewPageProductListTitle {
    font-size: 20px;
  }

  .gbbReviewPageProductListItem {
    font-size: 15px;
  }

  .gbbReviewPageBannerImage {
    height: 22vw;
  }

  .gbbReviewPageBannerTextWrapper {
    /* width: 30vw;
        top: 15%; */
    width: 40vw;
    top: 50%;
    left: 20%;
  }

  .gbbReviewPageBodyContainer {
    width: 80%;
    margin: 20px;
  }

  .gbbReviewPageTotalBlockPrice {
    padding: 5px 20px;
  }

  .gbbReviewPageTotalBlockDelivery {
    padding: 5px 20px;
  }

  .gbbReviewPageTotalBlockActionsBack {
    font-size: 14px;
    /* grid-column: 2/2; */
  }

  .gbbReviewPageTotalBlockActionsCheckout {
    font-size: 16px;
    width: 80%;
    /* grid-column: 3/3; */
  }

  .gbbReviewPageTotalBlockActions {
    /* grid-template-columns: 2fr auto auto; */
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    /* padding: 5px 15px; */
    /* padding: 5px 5px; */
  }

  /* .gbbReviewPageHTMLContent .gbbProductItem{
        grid-template-rows: auto;
    } */
  .gbbReviewPageHTMLContent .gbbProductItem {
    display: grid;
    width: 170px;
    grid-template-rows: 110px 0.1fr 0.1fr;
    grid-gap: 5px;
  }
}

@media (min-width: 1023px) {
  .gbbReviewPageProductListItem {
    font-size: 16px;
  }

  .gbbReviewPageTotalBlockActionsBack {
    font-size: 16px;
  }

  .gbbReviewPageSubTotalCartLabel {
    font-size: 16px;
  }

  .gbbReviewPageDiscountAppliedLabel {
    font-size: 16px;
  }

  .gbbReviewPageTotalBlockActionsCheckout {
    font-size: 16px;
    width: 60%;
  }

  .gbbReviewPageBannerTextWrapper {
    width: 35vw;
  }

  .gbbReviewPageBannerImage {
    height: 18vw;
  }

  .gbbBodyWrapper {
    margin: 0 10%;
  }

  .gbbReviewPageBannerTextWrapper {
    /* grid-gap: 14px; */
    top: 55%;
    left: 20%;
  }

  .gbbReviewPageBannerText {
    font-size: 22px;
  }

  .gbbReviewPageBannerSubText {
    font-size: 15px;
    /* width: 45%; */
  }

  .gbbReviewPageBannerButtonWrapper {}

  .ReviewPageBannerButton {
    padding: 12px;
    font-size: 18px;
    width: 100%;
  }

  .gbbReviewPageTotalBlockActions {
    /* grid-template-columns: 3fr auto auto; */
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    margin-top: 10px;
    /* padding: 5px 15px; */
    /* padding: 5px 5px; */
  }

  .gbbReviewPageHTMLContent .gbbProductsItemsContainer {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .gbbReviewPageHTMLContent .gbbProductItem {}
}

@media (min-width: 1192px) {
  .gbbReviewPagePrecuratedBoxesLabel {
    font-size: 18px;
  }

  /* .gbbNavigationItemsContainer::before{
        top: 45px;
    } */
}

/* this  {is the css code */
.gbbBundleQuantityHTMLContainer {
  grid-template-columns: 0fr 0fr;
  grid-gap: 0px;
  display: grid;
  grid-auto-flow: column;
  -webkit-tap-highlight-color: transparent;
}

.gbbBundleChangeButton {
  padding-left: 9px;
  background: #51d5c7;
  border: none;
  border-radius: 5px;
  width: 35px;
  height: 35px;
  font-size: 24px;
  justify-self: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.gbbBundleQuantityWrapper {
  width: 100%;
  display: flex;
  justify-content: end;
  flex-direction: row;
}

/* bundle from product */
.gbbBundleQuantityHTML {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 15px;
  align-items: center;
}

.gbbBundleQuantityHeading {
  font-weight: bold;
  font-size: 14px;
}

.gbbBundleQuantityLabel {
  text-align: center;
  font-size: 16px;
  user-select: none;
}
.gbbSummaryPageHTML {
  margin-bottom: 100px;
}

.gbbSummaryPageBodyWrapper {
  display: grid;
  grid-gap: 10px;
}

.gbbSummaryPageBundleDetailsContainer {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  align-items: start;
}

.gbbSummaryPageBundleDetails {
  display: grid;
  grid-gap: 5px;
}

.gbbSummaryPageBundleDetailsHTML {
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #f1f2f3;
  margin-bottom: 10px;
  /* grid-column: 1/3; */
}

.gbbSummaryPageBundleImage {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.gbbSummaryPageBundleImageContainer {
  display: grid;
  justify-content: center;
}

.gbbSummaryPageProductListItemName {
  color: #848484;
  font-weight: 600;
}

.gbbSummaryPageProductListItemName,
.gbbSummaryPageProductQtyPriceContainer {
  /* padding: 5px 5px; */
  font-size: 12px;
  text-wrap: balance;

}

.gbbSummaryPageProductTitleQtyPriceContainer {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
}

.gbbSummaryPageProductQtyPriceContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.gbbSummaryPageBundleQuantityAddButton {
  justify-self: right;
  -webkit-tap-highlight-color: transparent;
}

.gbbSummaryPageBundleQuantityRemoveButton {
  justify-self: left;
  -webkit-tap-highlight-color: transparent;
}

.gbbSummaryPageBundleQuantityAddButton:active,
.gbbSummaryPageBundleQuantityRemoveButton:active {
  transform: scale(0.95);
}

.gbbSummaryPageQuantityAddButtonWrapper,
.gbbSummaryPageQuantityRemoveButtonWrapper {
  position: absolute;
  top: 10px;
  left: 11px;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.gbbSummaryPageBundleQuantityAddButton,
.gbbSummaryPageBundleQuantityRemoveButton {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  justify-self: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.gbbSummaryPageBundleQuantityAddButton {
  justify-self: right;
  -webkit-tap-highlight-color: transparent;
}

.gbbSummaryPageBundleQuantityRemoveButton {
  justify-self: left;
  -webkit-tap-highlight-color: transparent;
}

.gbbSummaryPageBundleQuantityAddButton {}

.gbbSummaryPageBundleItemsLabel {
  font-size: 14px;
}

.gbbSummaryPageBundleTitle {
  font-size: 14px;
  font-weight: 700;
}

.gbbSummaryPageBundleQuantityContainer {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 15px;
  align-items: center;
  width: 20px;
}

.gbbSummaryPageBundleQuantityText {
  text-align: center;
}

.gbbSummaryPageProductListItemPrice {
  font-weight: 600;
  justify-self: end;
}

.gbbSummaryPageProductListItemQty {
  justify-self: end;
}

.gbbOrderDetailsHTMl,
.gbbSummaryPageSubscriptionHTML {
  padding: 15px;
  display: grid;
  grid-gap: 10px;
  background: #f1f2f3;
}

.gbbOrderDetailsHeading,
.gbbScheduleDeliveryHeadingLabel {
  font-weight: 600;
}

.gbbSummaryPageSubTotalCart,
.gbbSummaryPageDiscountAppliedContainer,
.gbbSummaryPageTotalCartValueContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gbbSummaryPageSubTotalCartLabel,
.gbbSummaryPageDiscountAppliedLabel,
.gbbSummaryPageTotalCartValueLabel {
  font-weight: 600;
  color: #848484;
}

.gbbScheduleDeliveryDateLabel {
  font-weight: 600;
}

.gbbSummaryPageSubTotalValue,
.gbbSummaryPageDiscountAppliedValue,
.gbbSummaryPageTotalCartValue {
  justify-self: end;
  font-weight: 600;
}

.gbbSummaryPageBundleProductsMainContainer {
  /* display: grid; */
  /* align-items: center; */
  /* grid-column: span 2; */
  /* grid-column-start: 2; */
  white-space: nowrap;
}

.gbbSummaryPageBundleImageTitleContainer {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  align-items: center;
}

/* .gbbSummaryPageBundleProductsContainer{
    grid-column: 2;
} */
.gbbSummaryPageBundlePriceLabel {
  font-weight: 600;
  text-align: end;
  justify-self: end;
}

.gbbSummaryPageBundleRemoveButton {
  font-size: 14px;
  color: #ce6b6b;
  text-align: end;
  cursor: pointer;
}

.gbbSummaryPageBundlePriceContainer {
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-gap: 5px;
}

.gbbSummaryPageBundleDiscountedPrice {
  font-weight: 600;
  justify-self: end;
}

.gbbSummaryPageActionButtons {
  display: grid;
  /* grid-template-columns: 0.4fr 1fr; */
  grid-gap: 10px;
}

.gbbSummaryPageBackButton {
  background-color: grey;
  padding: 10px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  display: grid;
  align-self: center;
}

.gbbSummaryPageCheckoutButton,
.gbbSummaryPageCreateNewBoxButton,
.gbbUnavailableProductsModalFooterBackBtn,
.gbbUnavailableProductsModalFooterCheckoutBtn {
  padding: 10px 10px;
  text-align: center;
  color: #000;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
  background: black;
  color: white;
  border: none;
}

.gbbUnavailableProductsModalFooter {
  display: grid;
  grid-gap: 10px;
}

.gbbSummaryPageBanner {
  display: grid;
  position: relative;
}

.gbbSummaryPageBannerImage {
  display: grid;
  object-fit: cover;
  width: 100%;
  /* width: 100vw; */
  height: 40vw;
  /*20vw for desktop*/
}

.gbbSummaryPageBannerText {
  font-size: 14px;
  /* color: #fff; */
}

.gbbSummaryPageBannerSubText {
  font-size: 12px;
  /* color: #fff; */
}

.gbbSummaryPageBannerTextWrapper {
  /* position: absolute; */
  top: 55%;
  left: 8%;
  /* top: 20%;
      left: 10%; */
  width: max-content;
  display: grid;
  grid-template-rows: 0.2fr 0.4fr;
  grid-gap: 10px;
  grid-gap: 5px;
  justify-items: center;
  text-align: center;
  width: 70vw;
  padding: 40px 10px;
}

.gbbSummaryPageBannerText {
  font-size: 14px;
  /* color: #fff; */
}

.gbbSummaryPageBannerSubText {
  font-size: 12px;
  /* color: #fff; */
}

.gbbScheduleDeliveryWrapper {
  display: grid;
  grid-gap: 10px;
  padding: 15px;
  background: #f1f2f3;
}

.gbbSummaryPageDeliverOrderDetailsDiv {
  /* padding: 10px;
    background: #f1f2f3; */
}

.gbbSummaryPageBundleTitleContainer {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gbbEmptySummaryPageWrapper {
  margin-bottom: 100px;
}

.gbbEmptySummaryPageWrapper,
.gbbEmptySummaryPageBannerTextWrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
}

.EmptySummaryPageAction {
  text-align: center;
  padding: 10px;
  background: black;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.gbbEmptySummaryPageBannerText {
  text-align: center;
}

.gbbEmptySummaryPageBannerImage {
  width: 250px;
  height: 250px;
  object-fit: contain;
}

.gbbOrderSubtotalTotalContainer {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
}

.gbbSummaryPageBundleQuantity {
  justify-self: end;
}

.gbbSummaryPageBundleItemsLabel {
  color: #848484;
}

.gbbSummaryPageBundleItemsLabel {
  display: none;
}

.gbbSummaryPageBundleDetailsWithProducts {
  display: grid;
  grid-template-rows: min-content;
  grid-gap: 10px;
  overflow-wrap: break-word;

}

.gbbFooterDiscountedTotalValue,
.gbbFooterOriginalTotalValue,
.gbbFooterTotalLabel {
  white-space: nowrap !important;
}

.gbbSummaryPageDiscountAppliedWrapper {
  display: grid;
  grid-gap: 10px;
}

.gbbSummaryPageOneTimeSubscriptionDiv,
.gbbSummaryPageSubscriptionAndSaveInputAndLabel {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-gap: 10px;
  align-items: center;
}

.gbbSubscriptionDropDownSelect {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbc2c2;
  border-radius: 5px;
  border: 1px solid #D3D5D6;
}

.gbbSummaryPageSubscriptionAndSaveDiv {
  display: grid;
  grid-gap: 10px;
}

.gbbSummaryPageOneTimeSubscriptionInput,
.gbbSummaryPageSubscriptionAndSaveInput {
  width: 15px;
}

.gbbSummaryPageSubscriptionAndSaveLabel,
.gbbSummaryPageOneTimeSubscriptionLabel {
  cursor: pointer;
}

.gbbSubscriptionDeliveryFrequencyLabel {
  font-size: 12px;
  text-transform: uppercase;
}

/* .gbbSummaryPageCreateNewBoxButtonWrapper{
    padding: 5px 10px;
    width: fit-content;
    background: black;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    /* text-decoration: underline; 
    border-radius: 5px;
  }*/
.gbbSummaryPageBundleEditButton {
  font-size: 14px;
  text-align: end;
  cursor: pointer;
  /* text-decoration: underline; */
  font-weight: bold;
}

.gbbSummaryPageBundleEditRemoveButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: 10px;
}

.gbbPreparingBundleMainContainer,
.gbbUnavailableProductsMainContainer,
.gbbActivatePricingMainContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(24, 24, 24, 0.8);
  z-index: 1000000000;
}

.gbbPreparingBundleContainerModal {
  position: fixed;
  z-index: 1000000000;
  transform: translate(0, -50%);
  background: #ffff;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  max-height: 95vh;
  /* left: 5vw;
    top: 5vh;
    right: 5vw; */
  left: 25vw;
  right: 25vw;
  top: 50vh;
  display: grid;
  grid-gap: 10px;
  justify-content: center;
}

@media screen and (min-width: 600px) {
  .gbbPreparingBundleContainerModal {
    left: 35vw;
    right: 35vw;
  }

}

.gbbUnavailableProductsContainerModal {
  position: fixed;
  z-index: 1000000000;
  transform: translate(0, -50%);
  background: #ffff;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  max-height: 95vh;
  /* left: 5vw;
    top: 5vh;
    right: 5vw; */
  left: 20vw;
  right: 20vw;
  top: 50vh;
  display: grid;
  grid-gap: 10px;
}

.gbbPreparingBundleHeader {
  font-weight: 600;
  font-size: 14px;
}

.gbbPreparingBundleGif {
  width: 120px;
  max-width: 100%;
}

.gbbUnavailableProductsModalDiscountsMayNotApplyText {
  color: grey;
}

.gbbActivatePricingContainerModal {
  position: fixed;
  z-index: 1000000000;
  transform: translate(-50%, -50%);
  background: #ffff;
  border-radius: 5px;
  text-align: center;
  padding: 2rem 1rem;
  max-height: 95vh;
  left: 50%;
  top: 50%;
  display: grid;
  grid-gap: 10px;
  width: 300px;
}

.gbbActivatePricingImg {
  width: 150px;
  height: 150px;
}

.gbbActivatePricingHeader {
  font-weight: 600;
  font-size: 1.7rem;
  color: #8C4444;
  line-height: initial;
}

.gbbActivatePricingDescription {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: initial;
}

.gbbActivatePricingButton {
  background-color: #8C4444;
  color: #ffffff;
  border-radius: 5px;
  padding: 1rem 2.5rem;
  font-weight: 550;
  cursor: pointer;
  border: none;
}

.gbbActivatePricingNoteContainer {
  font-size: 1.2rem;
}

.gbbActivatePricingPoweredByContainer {
  display: grid;
  justify-items: end;
  font-size: 1.1rem;
}


@media (min-width: 600px) {
  .gbbSummaryPageBannerImage {
    height: 22vw;
  }

  .gbbSummaryPageBundleItemsLabel {
    display: block;
  }

  .gbbSummaryPageBannerTextWrapper {
    /* width: 30vw;
            top: 15%; */
    width: 40vw;
    top: 50%;
    left: 20%;
  }

  .gbbSummaryPageProductListItemName,
  .gbbSummaryPageProductQtyPriceContainer {
    font-size: 14px;
  }

  .gbbSummaryPageBundleTitle {
    font-size: 16px;
  }

  .gbbSummaryPageBundleImage {
    width: 100px;
    height: 100px;
  }

  .gbbSummaryPageBundleQuantityAddButton,
  .gbbSummaryPageBundleQuantityRemoveButton {
    width: 25px;
    height: 25px;
  }

  .gbbSummaryPageQuantityAddButtonWrapper,
  .gbbSummaryPageQuantityRemoveButtonWrapper {
    top: 12px;
    left: 13px;
  }

  .gbbSummaryPageOneTimeSubscriptionInput,
  .gbbSummaryPageSubscriptionAndSaveInput {
    width: 20px;
    height: 20px;
  }

  .gbbPreparingBundleGif {
    width: 150px;
  }

  .gbbActivatePricingContainerModal {
    width: 500px;
  }
}

@media (min-width: 1023px) {
  .gbbSummaryPageBodyWrapper {
    margin: 0 20px;
  }

  .gbbSummaryPageBannerImage {
    height: 18vw;
  }

  .gbbSummaryPageBannerText {
    font-size: 22px;
  }

  .gbbSummaryPageBannerSubText {
    font-size: 15px;
    /* width: 45%; */
  }

  .gbbSummaryPageBannerTextWrapper {
    width: 35vw;
    top: 55%;
    left: 20%;
  }

  .gbbSummaryPageBannerText {
    font-size: 22px;
  }

  .gbbSummaryPageBannerSubText {
    font-size: 15px;
    /* width: 45%; */
  }

  .gbbSummaryPageBodyWrapper {
    grid-template-columns: 1fr 0.5fr;
  }

  .gbbSummaryPageBundleDetailsHTML {
    /* grid-row-start: 1;
        grid-row-end: span 2; */
  }

  .gbbSummaryPageDeliverOrderDetailsDiv {
    /* height: 100%; */
  }

  .gbbSummaryPageOrderDetailsUI {
    grid-column-start: 2;
  }

  .gbbSummaryPageBundlePriceContainer {
    /* grid-template-columns: 1fr 0.3fr; */
    grid-gap: 10px;
  }

  .gbbSummaryPageBundlePriceLabel {
    /* text-align: unset; */
  }

  .gbbPreparingBundleGif {
    width: 200px;
  }

  .gbbUnavailableProductsContainerModal {
    left: 30vw;
    right: 30vw;
  }

  .gbbUnavailableProductsModalFooter {
    grid-template-columns: 1fr 1fr;
  }
}

.gbbSummaryPageWrapper.gbbSubscriptionBundle .gbbSummaryPageCreateNewBoxButton {
  display: none;
  /*--- TEMP FIX ----*/
}

.gbbSummaryPageBundleSubscriptionDetails {
  font-size: 14px;
}

.gbbSummaryPageBundleProductsContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gbbProductSubscriptionDropdownContainer {
  width: max-content;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: transparent;
}

.gbbProductSubscriptionDropdownLabel {
  font-size: 14px;
}

.gbbProductSubscriptionSelect {
  width: 200px;
  padding: 5px;
}
:root {
    --gbb-gbbSubscriptionBundle-purchase-option-active-color: #2B2B2B;
    --gbb-gbbSubscriptionBundle-purchase-option-active-bg-color: #FFFFFF;
    --gbb-gbbSubscriptionBundle-purchase-option-inactive-color: #888888;
    --gbb-gbbSubscriptionBundle-purchase-option-inactive-bg-color: #F0F0F0;
    --gbb-gbbSubscriptionBundle-purchase-option-stroke-radius: 8px;
    --gbb-gbbSubscriptionBundle-purchase-option-stroke-color: #D5D5D5;
    --gbb-gbbSubscriptionBundle-purchase-option-stroke-width: 2px;

    --gbb-gbbSubscriptionBundle-selling-plan-navigation-active-bg-color: #FFFFFF;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-active-title-color: #333333;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-title-color: #333333;

    --gbb-gbbSubscriptionBundle-page-title-color: #000000;
    --gbb-gbbSubscriptionBundle-page-title-font-weight: bold;
    --gbb-gbbSubscriptionBundle-header-bg-color: #EDEDED;

    --gbb-gbbSubscriptionBundle-selling-plan-navigation-next-prev-icon-bg-color: #2B2B2B;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-active-discount-pill-bg-color: #CAE983;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-active-discount-pill-text-color: #000000;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-discount-pill-text-color: #000000;
    --gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-discount-pill-bg-color: #9D9D9D;

    --gbb-gbbSubscriptionBundle-product-discount-ribbon-bg-color: #FF0000;
    --gbb-gbbSubscriptionBundle-product-discount-ribbon-text-color: #FFFFFF;

    --gbb-gbbSubscriptionBundle-subscription-frequency-label-text-color: #333333;
    --gbb-gbbSubscriptionBundle-subscription-frequency-label-font-weight: bold;
    --gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-color: #B7B7B7;
    --gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-width: 2px;
    --gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-radius: 10px;
}

.gbbPurchaseOptionsWrapper {
    display: grid;
    place-content: center;
    gap: 5px;
}

.gbbPurchaseOptionsTitle {
    color: var(--gbb-gbbSubscriptionBundle-subscription-frequency-label-text-color);
    text-align: center;
    font-weight: var(--gbb-gbbSubscriptionBundle-subscription-frequency-label-font-weight);
}

.gbbPurchaseOptionsButtonWrapper {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    place-content: center;
}

.gbbPurchaseOption {
    padding: 6px 14px;
    font-weight: bold;
    text-transform: capitalize;
    cursor: pointer;
    /* border:var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-width) solid var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-color); */
    background-color: var(--gbb-gbbSubscriptionBundle-purchase-option-inactive-bg-color);
    color: var(--gbb-gbbSubscriptionBundle-purchase-option-inactive-color);
}

.gbbPurchaseOption {
    width: fit-content;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.7);
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 300ms;
    transition-property: color, background-color, box-shadow;
    display: flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px 1px 1px 0px;
    outline: none;
    justify-content: center;
}

.gbbPurchaseOption.active {
    background-color: #2d6737;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.23) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.gbbPurchaseOption.active .gbbPurchaseOptionTextContent {
    transform: translateY(-2px);
}

.gbbPurchaseOption.active:hover {
    /* background-color: #34723f; */
    box-shadow: rgba(0, 0, 0, 0.26) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.15) 0px;
}

.gbbPurchaseOption:hover .gbbPurchaseOptionTextContent {
    transform: translateY(-2px);
}

.gbbPurchaseOption:hover {
    background-color: #2c2c2c;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.23) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.gbbPurchaseOption .gbbPurchaseOptionTextContent {
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 300ms;
    transition-property: transform;
    transform: translateY(0px);
}

.gbbPurchaseOption:hover .gbbPurchaseOptionTextContent {
    transform: translateY(-2px);
}

.gbbPurchaseOption:first-child {
    border-top-left-radius: var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-radius);
    border-bottom-left-radius: var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-radius);
}

.gbbPurchaseOption:last-child {
    border-top-right-radius: var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-radius);
    border-bottom-right-radius: var(--gbb-gbbSubscriptionBundle-purchase-option-stroke-radius);
}

.gbbPurchaseOption.active {
    background-color: var(--gbb-gbbSubscriptionBundle-purchase-option-active-bg-color);
    color: var(--gbb-gbbSubscriptionBundle-purchase-option-active-color);
}

.gbbSellingPlansNavigationTabsContainer {
    display: grid;
    grid-auto-flow: column;
    overflow-x: scroll;
    grid-auto-columns: 25%;
    /* make it dynamic width tabs */
    scrollbar-width: none;
}

.gbbSellingPlanNavigationDiscountText {
    font-size: 12px;
    background: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-discount-pill-bg-color);
    color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-discount-pill-text-color);
    width: fit-content;
    padding: 2px 10px;
    border-radius: 12px;
}

.gbbSellingPlanNavigationTab.active .gbbSellingPlanNavigationDiscountText {
    background-color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-active-discount-pill-bg-color);
    color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-active-discount-pill-text-color);
}

.gbbSellingPlanNavigationTab {
    display: grid;
    place-content: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 10px;
    place-items: center;
    border-top-left-radius: var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-radius);
    border-top-right-radius: var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-radius);
    border-bottom: var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-width) solid var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-color);
}

.gbbSellingPlansNavigationTitle {
    color: var(--gbb-gbbSubscriptionBundle-page-title-color);
    font-weight: var(--gbb-gbbSubscriptionBundle-page-title-font-weight);
}

.gbbSellingPlanNavigationTab.active {
    background-color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-active-bg-color);
    border: var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-width) solid var(--gbb-gbbSubscriptionBundle-selling-plans-navigation-stroke-color);
    border-bottom: none;
}

.gbbSellingPlanNavigationTabTitle {
    color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-inactive-title-color)
}

.gbbSellingPlanNavigationTabTitle.active {
    color: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-active-title-color);
}

.gbbSellingPlansNavigationWrapper {
    display: grid;
    text-align: center;
    gap: 10px;
}

.gbbSubscriptionBundleWrapper {
    display: grid;
    gap: 20px;
    margin: 0 -12.5%;
    background: var(--gbb-gbbSubscriptionBundle-header-bg-color);
}

.gbbSellingPlansNavigationItemsWrapper {
    display: grid;
    align-items: center;
    gap: 20px;
}

.gbbSellingPlanNextNavigationIconWrapper {
    transform: rotate(180deg);
}

.gbbSellingPlanNextNavigationIconWrapper,
.gbbSellingPlanPrevNavigationIconWrapper {
    cursor: pointer;
}

.gbbSellingPlanNextNavigationIconWrapper svg g,
.gbbSellingPlanPrevNavigationIconWrapper svg g {
    fill: var(--gbb-gbbSubscriptionBundle-selling-plan-navigation-next-prev-icon-bg-color);
}

.gbbSellingPlansNavigationItemsWrapper:has(.gbbSellingPlanNextNavigationIconWrapper) {
    grid-template-columns: 30px 1fr 30px;
    padding: 0px 20px;
}

.gbbSubscriptionDiscountContent {
    background: var(--gbb-gbbSubscriptionBundle-product-discount-ribbon-bg-color);
    color: var(--gbb-gbbSubscriptionBundle-product-discount-ribbon-text-color);
    font-weight: bold;
    width: fit-content;
    padding: 2px 8px;
    position: absolute;
    top: 25px;
    right: 0;
    font-size: 12px;
}

.gbbPageBody:has(.gbbSubscriptionBundleWrapper) {
    padding: 0px !important;
}

.gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="2"] .gbbSellingPlansNavigationTabsContainer,
.gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="3"] .gbbSellingPlansNavigationTabsContainer,
.gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="1"] .gbbSellingPlansNavigationTabsContainer {
    justify-content: center;
}

.gbbSubscriptionBundleWrapper:not(:has(.gbbSellingPlansNavigationWrapper)) {
    padding-bottom: 20px;
}

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

    .gbbPurchaseOption .gbbPurchaseOptionTextContent {
        font-size: 12px;
    }

    .gbbSellingPlansNavigationTabsContainer {
        grid-auto-columns: 33%;
    }

    .gbbSellingPlansNavigationItemsWrapper:has(.gbbSellingPlanNextNavigationIconWrapper) {
        padding: 0px 5px;
    }

    .gbbSellingPlansNavigationItemsWrapper:has(.gbbSellingPlanNextNavigationIconWrapper) .gbbSellingPlansNavigationTabsContainer {
        grid-auto-columns: 100%;
    }

    .gbbSellingPlanNavigationTab {
        padding: 5px;
    }

    .gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="2"] .gbbSellingPlansNavigationTabsContainer,
    .gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="3"] .gbbSellingPlansNavigationTabsContainer,
    .gbbSellingPlansNavigationItemsWrapper[data-total-selling-plans="1"] .gbbSellingPlansNavigationTabsContainer {
        justify-content: normal;
    }
}

@media only screen and (max-width: 1020px) {
    .gbbSubscriptionBundleWrapper {
        margin: 0px;
    }
}
/***************************************************Landing page CSS*******************************************************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

main {
    padding: 0 !important;
}

p {
    padding: 0;
    margin: 0;
}

/* landing page banner css */
.gbbLandingPageBanner {
    display: grid;
    position: relative;
}

.gbbLandingPageBannerImage {
    display: grid;
    object-fit: cover;
    width: 100vw;
    height: 25vw;
    /*20vw for desktop*/
}

.gbbLandingPageBannerText {
    font-size: 14px;
    color: black;
    text-align: center;
    margin: 2% 0%;
}

.gbbLandingPageBannerSubText {
    font-size: 12px;
    color: #fff;
}

.landingPageBannerButton {
    padding: 10px;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    width: 50%;
    margin: 2% 0%;
}

.landingPageBannerButton:active {
    transform: scale(0.95);
}

.gbbMainPrecuratedBoxesContainer {
    margin: 10% 0%;
}

.gbbLandingPageBannerTextWrapper {
    position: absolute;
    top: 12%;
    left: 7%;
    width: max-content;
    display: grid;
    grid-template-rows: 0.2fr 0.4fr 0.2fr;
    grid-gap: 10px;
    justify-items: center;
    text-align: center;
}

/* landing page - navigation css */
.gbbNavigationItemsContainer {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    justify-content: center;
    position: relative;
    margin: 2% 2%;
}

.gbbLandingPageNavigationItemsContainer {
    margin: 2% 2%;
}

.gbbNavigationItem {
    cursor: pointer;
}

.gbbLandingPageNavigationItemsContainer::before {
    /* content: '';
    position: absolute;
    border-top: 5px solid #f1f2f3;
    left: 0;
    right: 0;
    top: 45px;
    z-index: -1; */
}

.gbbNavigationItem {
    justify-content: center;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.gbbNavigationItemsContainer::before {
    content: '';
    position: absolute;
    border-top: 2px solid #d4d5d6;
    left: 0px;
    right: 0px;
    top: 22px;
    z-index: 0;
}


.gbbPreviousNavigationItemsButton,
.gbbNextNavigationItemsButton {
    cursor: pointer;
    display: grid;
    justify-items: center;
    align-items: center;
    position: absolute;
    top: 10px;
    border-radius: 50%;
}

.gbbPreviousNavigationItemsButton {
    left: -12px;
}

.gbbNextNavigationItemsButton {
    right: -12px;

    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    /* rotate: 180deg; */
}


.gbbNavigationItemsContainer {
    display: grid;
    justify-items: center;
}

.gbbNavigationStepContainer {
    display: grid;
    grid-template-rows: 1fr 0.2fr;
    justify-content: center;
    align-items: center;
}

.gbbNavigationImage {
    width: 100%;
    height: 100%;
}

.gbbNavigationStepImgContainer {
    background: white;
    text-align: center;
    border: 2px solid #d4d5d6;
    border-radius: 50%;
    padding: 4px;
    display: grid;
    align-items: center;
    justify-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.gbbNavigationTitle {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.gbbNavigationTitleContainer {
    display: grid;
    /* justify-content: center; */
    align-items: center;
    /* width: 100%; */
    /* padding: 7px 25px; */
    /* text-align: center; */
}

/* landing page - precurated boxes css */
.gbbLandingPagePrecuratedBoxes {
    margin: 20px 10px;
    display: grid;
    grid-gap: 20px;
}

.gbbLandingPagePrecuratedBoxesLabel {
    font-size: 16px;
}

.gbbLandingPagePrecuratedBoxesCardWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
}

.gbbPrecuratedBoxesCard {
    display: grid;
    grid-template-rows: 1fr 0.2fr;
    justify-content: center;
    background: #f1f2f3;
    padding: 20px;
    font-size: 16px;
    grid-gap: 15px;
}

.gbbPrecuratedBoxesCardImageContainer {
    width: 120px;
    height: 120px;
}

.gbbPrecuratedBoxesCardImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gbbPrecuratedBoxesCardText {
    text-align: center;
}

.activeNavItem {
    border: 4px solid #ffffff;
}

.gbbLandingPageBannerButtonWrapper {
    text-align: center;
    display: grid;
    place-items: center;
}

.gbbPageHeader {
    position: relative;
}

.gbbPageHeaderText {
    position: absolute;
    top: 10%;
    z-index: 100;
    left: 30%;
    color: white;
    font-size: 16px;
    font-size: 14px;
}

.gbbtickMark {
    border: none;
    position: absolute;
    top: 5px;
}

.gbbtickMarkPseudo::before {
    display: block !important;
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #ffffff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

.gbbtickMarkPseudo::after {
    display: block !important;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}

.checkmark {
    display: inline-block;
    width: 22px;
    height: 22px;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmarkStem {
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ccc;
    left: 11px;
    top: 6px;
}

.checkmarKick {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #ccc;
    left: 8px;
    top: 12px;
}

.gbbPageHeader {
    position: relative;
}

.gbbPageHeader:after {
    /* content: " ";
    position: absolute;
    width: 75%;
    left: 10%;
    bottom: 10%;
    height: 50px;
    z-index: -1;
    -moz-box-shadow: 0px 4px #d4d5d6;
    -webkit-box-shadow: 0px 4px #d4d5d6;
    box-shadow: 0px 4px #d4d5d6; */
    /* right: 10px; */

}

/* .gbbPrecuratedPageHeader, .gbbPageHeaderWithoutLine{
    position: relative;
}
.gbbPageHeaderWithoutLine:after{
    display: none !important;
} */
.gbbAddProductPageSubtext,
.gbbPrecuratedBoxPageSubtext,
.gbbPersonalizePageSubtext,
.gbbChooseBoxPageSubtext,
.gbbMultipleCategoriesPageSubtext {
    font-size: 14px;
    color: black;
}

.page-container {
    overflow: unset !important;
}

#dummy-chat-button-iframe {
    display: none !important;
}

#dummy-chat-button {
    display: none !important;
}

@media (min-width:600px) {
    .gbbNavigationItemsContainer {
        margin: 2% 10%;
    }

    .gbbLandingPageBannerImage {
        height: 20vw;
    }

    .gbbNavigationTitleContainer {
        padding: 8px 0px;
    }

    .gbbNavigationTitle {
        font-size: 14px;
    }

    .landingPageBannerButton {
        width: 40%;
    }

    .gbbPageHeaderText {
        top: 15%;
        left: 35%;
        font-size: 16px;
    }

    .gbbPageHeader:after {
        bottom: 7%;
    }

    .gbbAddProductPageSubtext,
    .gbbPrecuratedBoxPageSubtext,
    .gbbPersonalizePageSubtext,
    .gbbChooseBoxPageSubtext,
    .gbbMultipleCategoriesPageSubtext {
        font-size: 18px;
        color: black;
    }

}

@media (min-width:1024px) {
    .gbbtickMark {
        /* top: 4%; */
    }

    .gbbLandingPageBannerImage {
        height: 18vw;
        width: 78vw;
    }

    .gbbBodyWrapper {
        margin: 0 10%;
    }

    .gbbPreviousNavigationItemsButton {
        left: -24px;
    }

    .gbbNextNavigationItemsButton {
        right: -24px;
    }

    .gbbMainPrecuratedBoxesContainer {
        margin: 5% 0%;
    }

    .gbbLandingPageBannerTextWrapper {
        grid-gap: 14px;
        top: 16%;
        left: 8%;
    }

    .gbbLandingPageBannerText {
        font-size: 25px;
    }

    .gbbLandingPageBannerSubText {
        font-size: 17px;
        /* width: 45%; */
    }

    .landingPageBannerButton {
        padding: 12px;
        font-size: 18px;
        width: 40%;
        border-radius: 10px;
    }

    .gbbNavigationItemsContainer {
        margin: 2% 20%;
        /* grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); */
    }

    /* .gbbNavigationStepImgContainer{
        height: 100px;
        width: 100px;
    } */
    .gbbNavigationImage {
        width: 100%;
        height: 100%;
    }

    .gbbLandingPagePrecuratedBoxesLabel {
        font-size: 18px;
    }

    .gbbLandingPagePrecuratedBoxesCardWrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 15px;
    }

    .gbbAddProductPageSubtext,
    .gbbPrecuratedBoxPageSubtext,
    .gbbPersonalizePageWrapper,
    .gbbChooseBoxPageSubtext,
    .gbbMultipleCategoriesPageSubtext {
        font-size: 18px;
    }

    .gbbNavigationItemsContainer::before {
        /* top: 30%; */
    }

    .gbbNavigationItem {
        /* width: 100px;         */
    }

    .gbbNavigationTitleContainer {
        justify-content: normal;
        padding: 4px 2px;
        text-align: center;
    }

    .gbbPrecuratedBoxesCard {
        padding: 10px;
    }

    .gbbPrecuratedBoxesCardImageContainer {
        width: 235px;
        height: 235px;
    }

    .gbbPageHeaderText {
        top: 25%;
        left: 40%;

    }
}

.gbbAddProductPageSubtextWrapper:not(:empty),
.gbbPrecuratedBoxPageSubtextWrapper:not(:empty),
.gbbPersonalizePageSubtextWrapper:not(:empty),
.gbbChooseBoxPageSubtextWrapper:not(:empty),
.gbbMultipleCategoriesPageSubtextWrapper:not(:empty) {
    display: grid;
    margin: 10px;
    justify-content: center;
    text-align: center;
}



.gbbAddProductPageSubtext,
.gbbPrecuratedBoxPageSubtext,
.gbbChooseBoxPageSubtext,
.gbbMultipleCategoriesPageSubtext {
    font-size: 18px;
}

@media(min-width:1192px) {
    .gbbLandingPagePrecuratedBoxesLabel {
        font-size: 18px;
    }

    .gbbNavigationItemsContainer::before {
        /* top: 45px; */
    }
}






/* .gbbLoadingScreen {
    display: grid;
    place-items: center;
    height: 80vh;
    margin: 0 auto;
    text-align: -webkit-center;
  } */
/* .gbbLoadingScreenSpinner {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid rgb(117, 117, 122);
    border-bottom: 16px solid rgb(117, 117, 122);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  } */
/* 
  .gbbLoadingSkeleon {
    opacity: .7;
    animation: skeleton-loading 1s linear infinite alternate;
  }
  .gbbLoadingSkeleon .skeleton-text {
    width: 100%;
    height: .5rem;
    margin-bottom: .25rem;
    border-radius: .125rem;
  }
  .gbbLoadingSkeleon .skeleton-text:last-child {
    margin-bottom: 0;
    width: 80%;
  }

  @keyframes skeleton-loading {
    0% {
      background-color: hsl(200, 20%, 70%);
    }
  100% {
      background-color: hsl(200, 20%, 95%);
    }
  }

  .gbbLoadingScreenSpinner {    
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 80%
      ),
      lightgray;
    background-repeat: repeat-y;
    background-position: 0 0;
    animation: shine 1s infinite;
  }


  @keyframes shine {
    to {
      background-position: 100% 0;
    } 
  /* } */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.gbbNavigationStepsContainer {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
    display: table;
}

.gbbNavigationStep {
    cursor: pointer;
    margin: 0 15px;
    text-align: center;
    display: table-cell;
    opacity: 0.6;
    color: rgba(58, 58, 58, 1);
}

.gbbProgressBar {
    display: block !important;
    border-bottom: solid 2px rgba(217, 225, 230, 1);
}

.gbbStepActive {
    opacity: 1;
    font-family: bold;
}

.gbbStepCompleted {
    opacity: 1;
}

.gbbNavigationStepCircle {
    display: block !important;
    margin: 0 auto;
    margin-top: -7px;
    width: 12px;
    height: 12px;
    background: white;
    border: solid 2px;
    border-radius: 50%;
}

.gbbNavigationContainerV2 {
    margin: 5% 15px;
}


.landingPageBannerButton,
.gbbProductAddButton,
.gbbProductQuantityRemoveButton,
.gbbProductQuantityAddButton,
.gbbProductVariantOptionValue,
.gbbProductVariantAddButton,
.gbbFooterNextButton,
.gbbFooterBackButton,
.gbbCustomerUploadsActionButton,
.gbbProductAddButton {
    cursor: pointer;
    user-select: none;
}

.gbbLoadingScreen {
    user-select: none;
    z-index: 1;
    /* background: #fff; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
}




.gbbHideScrollBar {
    overflow: hidden;
}

.gbbPageBody {
    height: 100%;
    padding: 10px;
}


.gbbProductItemCompareAtPrice {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
}

.gbbProductVariantOptionContainerHidden {
    display: none;
}

.gbbFooterOriginalTotalValue {
    color: #625f5f;
}


.gbbTagsAndPillHTMLContainer {
    display: inline;
}


.gbbProductTabImageContainer img {
    width: 100%;
    height: 100%;
}

.gbbMobileImageBanner,
.gbbDesktopImageBanner {
    width: 100%;
}

.gbbProductQuantityInput {
    width: 48px;
    font-size: 16px;
    padding: 4px;
    border-radius: 5px;
}

.gbbProductQuantityInput {
    text-align: center;
}

.gbbProductQuantityInput::-webkit-outer-spin-button,
.gbbProductQuantityInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* Mobile styles */
@media (max-width: 600px) {
    .gbbMobileImageBanner {
        display: block;
    }

    .gbbDesktopImageBanner {
        display: none;
    }

    .gbbProductQuantityHTML {
        grid-gap: 8px;
    }

    .gbbProductQuantityInput {
        width: 64px;
    }

    .gbbProductVariantModalDetailsContainer .gbbProductQuantityHTML {
        grid-gap: 8px;
    }
}

/* Desktop styles */
@media (min-width: 601px) {
    .gbbMobileImageBanner {
        display: none;
    }

    .gbbDesktopImageBanner {
        display: block;
    }
}

.gbbAddProductPageBanners:empty,
.gbbBundleBanners:empty {
    display: none;
}


.gbbProductsCardLayoutV2 .gbbNavigationItemsContainer::before {
    content: none;
}

.gbbProductsCardLayoutV2 .gbbStepsProgressBarContainer {
    width: 100%;
    height: 6px;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    top: 17px;
}

.gbbProductsCardLayoutV2 .gbbStepsProgressBar {
    width: 100%;
    background: #eeeeee;
    height: 100%;
}

.gbbProductsCardLayoutV2 .gbbStepsProgressBarFilled {
    display: block !important;
    background: black;
    width: 10%;
    height: 100%;
}

.gbbBundle-HTML footer,
.gbbBundle-HTML .footer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 3s, visibility 3s;
    animation: showElement 3s forwards;
}

@keyframes showElement {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}
 /* Addons */
:root {
  --gbb-addons-eligible-tier-messaging-bg-color: #55BD47;
  --gbb-addons-ineligible-tier-messaging-bg-color: #BBBBBB;
}
.gbbPersonalizePageWrapper {
  /* margin: 10% 25%; */
}

.gbbPersonalizePageHTML {
  margin: 5% 5%;
  display: grid;
  grid-gap: 40px;
  position: relative;
  transform: translate(0px, -5%);
}

.gbbPersonalizePageHTMLContent {
  display: grid;
  grid-gap: 20px;
}

.greetingCardAllImagesContainer {
  display: grid;
  /* grid-template-columns: repeat(2,1fr); */
  grid-gap: 15px;
  padding: 10px;
  background: white;
}


.gbbGreetingCardContainer,
.gbbGiftWrapContainer {
  display: grid;
  grid-gap: 10px;
}

.gbbGreetingCardImg,
.gbbGiftWrapImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.greetingCardPreviewImage {
  height: 100px;
  width: 150px;
}

/* .greetingCardImage,.gbbGreetingCardListWrapper{ */
.greetingCardImage,
.giftWrapImage {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  object-fit: cover;
  /* border: 2px solid white; */
  /* padding: 5px; */
  background: white;
}

.greetingCardWrapper,
.giftWrapWrapper {
  overflow-x: hidden;
  /* overflow-y: auto; */
  /* overflow-y: auto; */
  padding-right: 5px;
  height: auto;
  /* max-height: 400px; */
  max-height: 350px;
  /* padding: 5px 10px; */
  /* border: 2px solid #D3D5D6; */
  border-radius: 5px;
}

.gbbGreetingCardShowAllImagesButtonWrapper {
  padding: 10px;
  background: white;
  height: fit-content;
}

.gbbGreetingCardShowAllImagesButton {
  padding: 10px;
  border-radius: 5%;
}

.gbbGreetingCardDropDownWrapper,
.gbbGiftWrapDropDownWrapper {
  display: grid;
  /* grid-template-columns : 1fr; */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  padding: 0px 10px;
  border-radius: 5px;
  /* 
    border: 2px solid #D3D5D6;
    padding: 5px; */
}

.gbb_checkmark {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.gbb_checkmark {
  top: 50%;
  left: 50%;
  transform: rotate(45deg) translate(-50%, -50%);
}



.gbb_checkmark_circle {
  /* display:block;
    position: absolute;
    width:22px;
    height:22px;
    background-color: green;
    border-radius:11px;
    left:0;
    top:0;
    opacity:0.5; */

  display: block !important;
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #026a02;
  border-radius: 50%;
  left: -6px;
  top: 0px;
}




.gbb_checkmark_stem {
  display: block !important;
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #fff;
  left: 11px;
  top: 6px;
}

.gbb_checkmark_stem {
  height: 20px;
}

.gbb_checkmark_kick {
  display: block !important;
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #fff;
  left: 8px;
  top: 12px;
}

.gbb_checkmark_kick {
  width: 9px;
  background-color: #fff;
  left: 3px;
  top: 23px;
}



.gbbGreetingCardImageList .greetingCardLabel input:checked,
.giftWrapImageList .giftWrapLabel input:checked {
  border: 2px solid #A96668;
  border-radius: 5px;
}

.gbbGreetingCardImageList .gbbGreetingCardImageLabel img,
.giftWrapImageList .giftWrapImageLabel img {
  max-width: 100%;
  width: 100%;
  /* width: -moz-available;           */
  /* WebKit-based browsers will ignore this. */
}

.gbbGreetingCardImageLabel,
.giftWrapImageLabel {
  width: 100%;
  height: 150px;
  height: 125px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  align-self: center;
}


.gbbGreetingCardImageList,
.giftWrapImageList {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.gbbGreetingCardImageList .gbbGreetingCardImageLabel,
.giftWrapImageList .giftWrapImageLabel {
  /* gbbGreetingCardImageList .gbbGreetingCardImageLabel, */
  /* border: 1px solid #D3D5D6; */

}

.gbbActiveGreetingCard {
  opacity: 0.5;
}

.greetingCardImageInput,
.giftWrapImageInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}


.gbbBodyWrapper ::-webkit-scrollbar {
  height: 4px;
  width: 3px;
}

/* Track */
.gbbBodyWrapper ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.gbbBodyWrapper ::-webkit-scrollbar-thumb {
  background: #2c2c2c 0% 0% no-repeat padding-box;
}

/* Handle on hover */
.gbbBodyWrapper ::-webkit-scrollbar-thumb:hover {
  background: #000000 0% 0% no-repeat padding-box;
}



.greetingCardDropDownWrapper {
  cursor: pointer;
}


.gbbDisabled {
  pointer-events: none;
  opacity: 0.5;
}

.gbbEmailAddressWrapper {
  display: grid;
  /* background: white;     */
  background: none;
}



.gbbScheduleDeliveryDatePicker {
  display: grid;
  padding: 5px 10px;
  font-weight: 500;
  background: white;
  /* width: 100%; */
  border-radius: 5px;
  border: 1px solid #D3D5D6;
}




.greetingCardWrapper::-webkit-scrollbar,
.giftWrapWrapper::-webkit-scrollbar {
  width: 0.3rem;
}

.greetingCardWrapper::-webkit-scrollbar-track,
.giftWrapWrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.greetingCardWrapper::-webkit-scrollbar-thumb,
.giftWrapWrapper::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: rgb(26, 24, 24);
}


.gbbGreetingCardDropDownButton,
.gbbGiftWrapDropDownButton {
  transform: rotate(180deg);
  justify-self: self-end;
  height: 30px;
  width: auto;
  cursor: pointer
}


.gbbJustOneProduct {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 10px 0px;
  background: white;
}

.gbbClearSelectionButton {
  border: none;
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
  justify-self: end;
}


.greetingCardImgWrapper,
.giftWrapImgWrapper {
  height: 250px;
  overflow: hidden;
}


.gbbGreetingCardCheckboxPrice,
.gbbGiftWrapCheckboxPrice {
  justify-self: right;
}

.gbbVideoHasAlreadyBeenRecorded {
  color: #007F60;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: #f1f2f3;
}


.gbbVideoMsgButtonGroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.gbbVideoMsgReRecordButton,
.gbbVideoMsgSaveButton {
  background: #f1f2f3;
  border: 1px solid #D3D5D6;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
}

.gbbVideoMsgSaveButton {
  grid-column: 2/3;
  padding: 5px;
}

.gbbVariantDetailsWrapper {
  /* position: absolute;
  bottom: 10%;
  right: 25%;
  background: black;
  color: white; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* background-color: rgb(189, 183, 183) ; */
  /* grid-gap: 10px; */
  /* justify-items: center; */
}

.greetingCardImageAndDetailsWrapper {
  display: grid;
  /* grid-template-rows: 3fr 0.5fr; */
  /* grid-gap: 10px; */
  /* border: 2px solid #D3D5D6; */
  border-radius: 5px;
  padding: 5px 5px;
  background-color: rgb(241, 242, 243);
  /* padding: 5px;
  justify-content: center; */
}

.gbbScheduleDeliveryHTML {
  /* grid-column: 2/3; */
}

.gbbScheduleMessageDeliveryWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  width: 100%;
  max-width: 100%;
}

.gbbScheduleMessageDeliveryHTML {
  display: grid;
  grid-gap: 10px;
}

.gbbScheduleMessageSendNowContainer,
.gbbScheduleMessageSendLaterContainer {
  box-shadow: none;
  display: inline-block;
  justify-content: center;
  cursor: pointer;
  line-height: 30px;
  margin: 0px;
  padding: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  color: #585858;
  border: 1px solid #f3f3f3;
  /* border-top: 0 solid #f3f3f3; */
  transition: transform .2s;
  font-family: inherit;
  /* background: none; */
}

.gbbScheduleMessageSendNowContainer:hover,
.gbbScheduleMessageSendLaterContainer:hover {

  transform: scale(0.95);

}

.gbbScheduleMessageDatePicker {
  width: 100%;
  padding: 10px;
  border: 1px solid #a6a6a6;
  display: none;
}

.gbbGiftMessageV2RequiredWarning {
  color: #ff0000;
  font-size: 14px;
}

.gbbGiftMessageV2ToFromContainer {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  margin-bottom: 10px;
}

.gbbGiftMessageV2FromField,
.gbbGiftMessageV2ToField {
  padding: 10px 18px;
  padding-bottom: 10px;
  border-radius: 2px;
  border: 1px solid #A2A2A2;
  width: unset;
}



@media (min-width:600px) {
  .gbbPersonalizePageHTML {
    margin: 10% 0%;
  }

  .gbbGiftMessageV2ToFromContainer {
    grid-template-columns: 1fr 1fr;
  }

  .gbbGreetingCardImageLabel,
  .giftWrapImageLabel {
    width: 100%;
    height: 150px;
  }

  .gbbScheduleDeliveryDatePicker {

    padding: 8px 10px;

  }

  .gbbGreetingCardImageList {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (min-width:1024px) {
  .gbbPersonalizePageHTML {
    position: relative;
    transform: translate(0px, -10%);
  }

  .gbbGiftMessageV2InputFieldsDiv textarea {
    height: 130px;
  }

  .gbbJustOneProduct .gbbGreetingCardImageLabel,
  .gbbJustOneProduct .giftWrapImageLabel {
    width: 100%;
    height: 200px;
  }

  .gbbGreetingCardImageList,
  .giftWrapImageList {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
}


.gbbVariantPrice {
  justify-self: right;
}


.gbbGiftMessageCounterEle:not(:empty),
.gbbGiftMessageCounterEle:not(:empty) {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 5px;
  text-align: end;
}


.gbbCustomerUploadsListItemInput {
  display: none;
}


.gbbCustomerUploadsList {
  display: grid;
  grid-gap: 15px;
}

.gbbCustomerUploadsListItem {
  display: grid;
  grid-template-columns: 2fr 1fr 25px;
  grid-gap: 10px;
  margin-bottom: 10px;
}


.gbbCustomerUploadsErrorMsg:not(:empty) {
  display: block;
  color: red
}


.gbbCustomerUploadButton {
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  /* width: min-content; */
  border-radius: 5px;
  justify-self: end;
  text-align: center;
  cursor: pointer;
  user-select: none;
}


.gbbCustomerUploadsActionButton {
  font-size: 14px;
  justify-self: end;
}


.gbbCustomerUploadsRemoveButton {
  grid-column: 3/4;
  align-self: end;
  cursor: pointer;
  user-select: none;
}



.gbbCustomerUploadPreviewButton {
  /* underline and blue color */
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  /* width: min-content; */
  border-radius: 5px;
  justify-self: end;
  text-align: center;
  cursor: pointer;
  user-select: none;
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
  color: blue;
}

.gbbCustomerUploadButton {}

.gbbCustomerUploadsRemoveButton svg {
  /* background: #cf1a1a;
  border-radius: 50%;
  stroke: 0;
  border: 1px solid white;
  fill: white; */
}

.gbbCustomerUploadsMainText {
  /* font-size: 15px; */
  font-weight: 600;
}

.gbbCustomerUploadsDivider {
  display: block !important;
  border: 1px solid #A2A2A2 !important;
  height: 0px;
  opacity: 0.5;
}


/* PRODUCT ADDONS */
.gbbAddonDiscountRibbon {
  background: blue;
  color: white;
  border-radius: 5px 0px 0px 5px;
}

.notEligibleForAddons .gbbProductItem {
  pointer-events: none;
  opacity: 0.5;
}

.gbbPersonalizePageHTML:has(.gbbAddonProductsWrapper) {
  transform: translate(0px, 0px);
  margin: 0% 0%;
}

.gbbAddonProductsSectionTitle {
  font-weight: 600;
}

.gbbProductItem[free-addon-product="true"] .gbbProductItemPricesContainer {
  display: none;
}

.gbbProductItem[free-addon-product="true"] .gbbProductActionContainer {
  grid-template-rows: auto;
}

.gbbPersonalizePageBodyWrapper {
  display: grid;
  grid-template-columns: 1fr .45fr;
  gap: 15px;
}
.gbbAddonTierContainer {
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid #c0c0c0;
  padding: 0px;
  display: grid;
  gap: 10px;
  padding-block: 14px;
}

.gbbAddonTierContainer:first-child {
  padding-top: 0px;
}
.gbbAddonTierContainer:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}
.gbbProductsContainer {
  margin: 0px;
}
 .gbbAddonTierContainer[data-is-active="false"] .gbbAddonTierBodyContainer {
   height: 0px;
   transition: height 0.3s ease-in-out;
 }

 .gbbAddonTierContainer[data-is-active="true"] .gbbAddonTierBodyContainer {
   height: fit-content;
   transition: height 0.3s ease-in-out;
 }

 .gbbAddonTierContainer1[data-is-active="true"] .gbbAddonTierToggleButton {
   rotate: 45deg;
   transition: rotate 0.3s ease-in-out;
 }

.gbbAddonTierHeaderContainer {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: unset;
  grid-auto-flow: column;
  cursor: pointer;
}

 .gbbAddonTierToggleButton svg{
  height: 25px;
  width: 25px;
  path {
      fill: #000000;
    }
 }

 .gbbAddonTierTitle {
   font-size: 18px;
   font-weight: 600;
 }
.gbbAddonTierToggleButton{
  display: grid;
}

.gbbAddonProductsContainer .gbbOverLayIconContainer {
  background-position: left top;
}

.gbbAddonsMultiTierFooter {
  .gbbFooterProductsContainer,.gbbSlotFooterProductsContainerWrapper {
    min-height: 25vh;
    max-height: 25vh;
  }
  .gbbSlotFooterProductsContainerWrapper{
    place-items: unset;
  }
  .gbbSlotFooterProductsContainer{
    justify-content: center;
  }

  .gbbAddonsMessagingContainer {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin-top: 10px;
    /* padding: 10px 15px; */
    /* background: #e1e1e130; */
    /* border-radius: 8px; */
    /* border: 2px solid #cfcfcf78; */
  }

  .gbbAddonsTierMessagingContainer {
    display: grid;
    gap: 6px;
    /* min-height: 120px; */
    max-height: 120px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-auto-rows: max-content;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
.gbbAddonsMessagingContainer[data-total-tiers="1"] .gbbAddonsTierMessagingContainer {
  min-height: fit-content;
  max-height: fit-content;
  overflow: unset;
}
  .gbbAddonsTitle {
    position: relative;
    overflow: hidden;
    font-weight: 600;
  }

  .gbbAddonsTitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    margin-left: 6px;
    background-color: var(--gbb-addon-products-ineligible-tier-messaging-bg-color);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
  }

  .gbbAddonsTierMessageContainer {
    display: grid;
    grid-template-columns: 1fr .1fr;
    align-items: center;
    gap: 6px;
    padding: 10px;
  }

  .gbbAddonsTierMessage {
    font-size: 13px;
    overflow-wrap: anywhere;
    /* white-space: normal; */
  }


  .gbbAddonsTierMessagingWrapper {
    border: 2px solid #D9D9D9;
    border-radius: 8px;
    height: fit-content;
    /* background-color: white; */
    overflow: hidden;
  }

  .gbbAddonsTierSvg {
    display: grid;
  }

  .gbbAddonsTierSvg svg {
    width: 25px;
    height: 25px;
  }

  .gbbAddonsTierBottomBarUI {
    display: block !important;
    background: var(--gbb-addons-ineligible-tier-messaging-bg-color);
    padding: 4px;
  }

  .gbbAddonsTierSvg svg path {
    fill: #747373;
  }

  .gbbFooterBundleItemsContainer {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* .gbbAddonsTierMessagingWrapper[data-eligible-tier="true"] { */
  .gbbEligibleAddonTier{
    border-color: var(--gbb-addons-eligible-tier-messaging-bg-color);
  
    .gbbAddonsTierBottomBarUI {
      background: var(--gbb-addons-eligible-tier-messaging-bg-color);
    }

    .gbbAddonsTierSvg svg path {
      fill: var(--gbb-addons-eligible-tier-messaging-bg-color);
    }
    
  }
.gbbAddonsTierMessagingBorderOverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 2px solid var(--gbb-addons-eligible-tier-messaging-bg-color);
  box-sizing: border-box;
  z-index: 100;
  border-radius: 8px;
  pointer-events: none;
  mask: linear-gradient(90deg, black 0%, transparent 0%);
  -webkit-mask: linear-gradient(90deg, black 0%, transparent 0%);
  /* margin: 2px; */
}
.gbbAddonsTierMessagingBottomBarOverlay{
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: var(--gbb-addons-eligible-tier-messaging-bg-color);
  box-sizing: border-box;
}
  @media (max-width: 600px) {
    .gbbFooterBundleItemsContainer {
      max-height: 75vh !important;
      overflow-y: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .gbbAddonsTierMessagingContainer{
      max-height: unset;
    }
    .gbbFooterProductsContainer,
    .gbbSlotFooterProductsContainerWrapper{
      min-height: unset;
    }
  }
}

@media (min-width: 610px) {
  .gbbPersonalizePageWrapper {
    font-size: unset;
  }
}

/* PRODUCT ADDONS */
:root {
    /* Banners */
    --gbb-landing-page-image-src: url(https://d3ks0ngva6go34.cloudfront.net/public/banners/landing_page_bannerv2.png);
    --gbb-page-banner-image-src: url(https://d3ks0ngva6go34.cloudfront.net/public/banners/page_banner_temp.png);
    --gbb-product-review-image-src: url(https://d3ks0ngva6go34.cloudfront.net/public/banners/landing_page_bannerv2.png);

    /* Colors */
    --gbb-primary-color: blue;
    --gbb-secondary-color: aqua;
    --gbb-text-color: black;
    --gbb-disabled-color: gray;
    --gbb-product-box-color: blue;

    /* Landing Page */
    --gbb-landing-page-text-color: #000000;
    --gbb-landing-page-button-bg-color: #000000;
    --gbb-landing-page-button-text-color: #ffffff;

    /* Cart Footer */
    --gbb-cart-footer-bg-color: #ffffff;
    --gbb-cart-footer-buttons-container-bg-color: #f6f6f6;
    --gbb-cart-footer-border-radius: 0px;
    --gbb-cart-footer-product-image-border-radius: 0px;
    --gbb-cart-footer-buttons-container-border-radius: 9px;
    --gbb-cart-footer-show-hide-prices: visible;
    --gbb-cart-footer-text-color: #000000;
    --gbb-cart-footer-strikethrough-price-color: #8D8D8D;
    --gbb-cart-footer-final-price-font-thickness: bold;
    --gbb-cart-footer-strikethrough-price-font-thickness: regular;
    --gbb-cart-footer-back-button-color: #6d7175;
    --gbb-cart-footer-back-button-text-color: #FFFFFF;
    --gbb-cart-footer-back-button-border-color: #000000;
    --gbb-cart-footer-back-button-border-thickness: 2px;
    --gbb-cart-footer-next-button-text-color: #ffffff;
    --gbb-cart-footer-next-button-color: #000000;
    --gbb-cart-footer-next-button-border-color: #000000;
    --gbb-cart-footer-next-button-border-thickness: 2px;
    --gbb-cart-footer-buttons-border-radius: 9px;
    --gbb-cart-footer-buttons-padding: 10px;
    --gbb-cart-footer-discount-progress-bar-empty-color: #C1E7C5;
    --gbb-cart-footer-discount-progress-bar-filled-color: #15A524;
    --gbb-cart-footer-discount-text-visibility: visible;

    /* Product Card */
    --gbb-product-card-bg-color: #f1f2f3;
    --gbb-product-card-border-radius: 12px;
    --gbb-product-card-image-border-radius: 8px;
    --gbb-product-card-image-fit: cover;
    --gbb-product-card-per-row-xtra-large-screen: 6;
    --gbb-product-card-per-row-large-screen: 4;
    --gbb-product-card-text-color: #252525;
    --gbb-product-card-title-font-size: 19px;
    --gbb-product-card-title-font-weight: regular;
    --gbb-product-card-final-price-visibility: block;
    --gbb-product-card-compare-at-price-font-size: 20px;
    --gbb-product-card-compare-at-price-font-weight: regular;
    --gbb-product-card-compare-at-price-visibility: block;
    --gbb-product-card-final-price-font-size: 18px;
    --gbb-product-card-final-price-font-color: #252525;
    --gbb-product-card-final-price-font-weight: bold;
    --gbb-product-card-button-color: #000000;
    --gbb-product-card-button-text-color: #ffffff;
    --gbb-product-card-button-border-radius: 10px;
    --gbb-product-card-allow-only-one-quantity: block;
    --gbb-product-card-quantity-selector-bg-color: #EEEEEE;
    --gbb-product-card-quantity-selector-btns-bg-color: #000000;
    --gbb-product-card-quantity-selector-text-color: #000000;
    --gbb-product-card-quantity-selector-border-radius: 8px;
    --gbb-product-card-quantity-selector-button-text-color: #ffffff;

    /* Navigation Banner */
    --gbb-navigation-banner-title-color: #ffffff;
    --gbb-navigation-banner-text-color: #ffffff;
    --gbb-navigation-banner-step-completion-color: #000000;
    --gbb-navigation-banner-step-done-color: #000000;
    --gbb-navigation-banner-step-text-color: #000000;
    --gbb-navigation-banner-step-progress-bar-filled-color: #1E1E1E;
    --gbb-navigation-banner-step-progress-bar-empty-color: #cccccc;
    --gbb-navigation-banner-step-text-font-size: 20px;
    --gbb-navigation-check-color: #ffffff;
    --gbb-navigation-banner-step-completed-border-color: #000000;
    --gbb-navigation-banner-step-completed-border-width: 2px;
    --gbb-navigation-banner-step-incomplete-bg-color: #FFFFFF;
    --gbb-navigation-banner-step-incomplete-border-color: #000000;
    --gbb-navigation-banner-step-incomplete-border-width: 2px;
    --gbb-navigation-banner-tabs-active-bg-color: #000000;
    --gbb-navigation-banner-tabs-active-text-color: #F6f6f6;
    --gbb-navigation-banner-tabs-inactive-bg-color: #FFFFFF;
    --gbb-navigation-banner-tabs-inactive-text-color: #000000;
    --gbb-navigation-banner-tabs-border-color: #3c3c3c;
    --gbb-navigation-banner-tabs-corner-radius: 5px;

    /* Summary Block */
    --gbb-summary-block-add-to-cart-button-color: #000000;
    --gbb-summary-block-add-to-cart-button-text-color: #ffffff;
    --gbb-summary-block-back-button-color: #252525;
    --gbb-summary-block-back-button-text-color: #ffffff;

    /* Category Block */
    --gbb-category-bg-color: #f5f5f5;
    --gbb-tab-active-bg-color: #000000;
    --gbb-tab-active-text-color: #F6f6f6;
    --gbb-tab-inactive-bg-color: #FFFFFF;
    --gbb-tab-inactive-text-color: #000000;

    /* Quick Settings */
    --gbb-quick-settings-primary-color: #000000;
    --gbb-quick-settings-button-bg-color: #000000;
    --gbb-quick-settings-button-text-color: #ffffff;

    /* General Settings */
    --gbb-condition-toast-bg-color: #000000;
    --gbb-condition-toast-text-color: #ffffff;
    --gbb-scroll-bar-color: #F6F6F6;
    --gbb-icon-text-color: #1d1d1b;
    --gbb-icon-bg-color: #ffffff;
    --gbb-product-page-title-color: #000000;
    --gbb-bundle-bg-color: #ffffff;
}


.gbbNewPageCustomization.gbbProductsCardLayoutV2 {

    /* CART FOOTER COLOR CONFIG */
    .gbbProductsFooterHTML,
    .gbbAddProductsPageFooterHTML,
    .gbbPersonalizePageFooterHTML {
        background-color: var(--gbb-cart-footer-bg-color);
        border-radius: var(--gbb-cart-footer-border-radius);
    }

    .gbbFooterButtonsWrapper {
        background-color: var(--gbb-cart-footer-buttons-container-bg-color);
        border-radius: var(--gbb-cart-footer-buttons-container-border-radius);
    }

    .gbbFooterTotalContainer {
        visibility: var(--gbb-cart-footer-show-hide-prices);
    }

    .gbbFooterProductImageContainer {
        border-radius: var(--gbb-cart-footer-product-image-border-radius);
    }

    .gbbFooterDiscountedTotalValue {
        font-weight: var(--gbb-cart-footer-final-price-font-thickness);
        color: var(--gbb-cart-footer-final-price-font-color);
    }

    .gbbFooterOriginalTotalValue {
        color: var(--gbb-cart-footer-strikethrough-price-color);
        font-weight: var(---gbb-cart-footer-strikethrough-price-font-thickness);
    }

    .gbbFooterBackButton {
        background-color: var(--gbb-cart-footer-back-button-color);
        color: var(--gbb-cart-footer-back-button-text-color);
        border: var(--gbb-cart-footer-back-button-border-thickness) solid var(--gbb-cart-footer-back-button-border-color);

    }

    .gbbFooterNextButton {
        background-color: var(--gbb-cart-footer-next-button-color);
        color: var(--gbb-cart-footer-back-button-text-color);
        border: var(--gbb-cart-footer-next-button-border-thickness) solid var(--gbb-cart-footer-next-button-border-color);

    }

    .gbbFooterBackButton,
    .gbbFooterNextButton {
        border-radius: var(--gbb-cart-footer-buttons-border-radius);
        padding: var(--gbb-cart-footer-buttons-padding);
    }

    .progressBar {
        background-color: var(--gbb-cart-footer-discount-progress-bar-empty-color);
    }

    .progressBarFill {
        background-color: var(--gbb-cart-footer-discount-progress-bar-filled-color);
    }

    .gbbDiscountMessage {
        color: var(--cart-footer-discount-text-color);
        visibility: var(--gbb-cart-footer-discount-text-visibility)
    }


    /* CART FOOTER COLOR CONFIG */

    /* PRODUCT CARD COLOR CONFIG */
    .gbbProductItem {
        background-color: var(--gbb-product-card-bg-color);
        border-radius: var(--gbb-product-card-border-radius);
    }

    .gbbProductQuantityAddButton {
        display: var(--gbb-product-card-allow-only-one-quantity);
        border-radius: var(--gbb-product-card-quantity-selector-border-radius);
    }

    .gbbProductItemPrice {
        display: var(--gbb-product-card-final-price-visibility);
    }

    .gbbProductImageContainer {
        border-radius: var(--gbb-product-card-image-border-radius);
    }

    .gbbProductImageContainerImg {
        object-fit: var(--gbb-product-card-image-fit);
    }

    .gbbProductTextContainer {
        color: var(--gbb-product-card-text-color);
    }

    .gbbProductTitleOnly {
        font-size: var(--gbb-product-card-title-font-size);
        font-weight: var(--gbb-product-card-title-font-weight);
    }

    .gbbProductItemCompareAtPrice {
        color: var(--gbb-product-card-compare-at-price-font-color);
        font-size: var(--gbb-product-card-compare-at-price-font-size);
        font-weight: var(--gbb-product-card-compare-at-price-font-weight);
        display: var(--gbb-product-card-compare-at-price-visibility);
    }

    .gbbProductItemPrice {
        color: var(--gbb-product-card-final-price-font-color);
        font-size: var(--gbb-product-card-final-price-font-size);
        font-weight: var(--gbb-product-card-final-price-font-weight);
    }

    .gbbProductAddButton {
        background-color: var(--gbb-product-card-button-color);
        color: var(--gbb-product-card-button-text-color);
        border-radius: var(--gbb-product-card-button-border-radius);
    }

    .gbbProductQuantityHTML {
        background-color: var(--gbb-product-card-quantity-selector-bg-color);
        color: var(--gbb-product-card-quantity-selector-text-color);
        border-radius: var(--gbb-product-card-button-border-radius);
    }

    .gbbProductQuantityRemoveButton {
        background-color: var(--gbb-product-card-quantity-selector-btns-bg-color);
        color: var(--gbb-product-card-quantity-selector-button-text-color);
        border-radius: var(--gbb-product-card-quantity-selector-border-radius);
    }

    /* productCardQuantitySelectorButtonTextColor */
    @media screen and (min-width: 1921px) {
        .gbbProductsItemsContainer {
            grid-template-columns: repeat(var(--gbb-product-card-per-row-xtra-large-screen), 1fr);
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1920px) {
        .gbbProductsItemsContainer {
            grid-template-columns: repeat(var(--gbb-product-card-per-row-large-screen), 1fr);
        }
    }

    /* PRODUCT CARD COLOR CONFIG */

    /* Navigation */

    .gbbNavigationTitle {
        color: var(--gbb-navigation-banner-text-color);
        font-size: var(--gbb-navigation-banner-step-text-font-size);
    }

    .gbbStepsProgressBar {
        background-color: var(--gbb-navigation-banner-step-progress-bar-empty-color);
    }

    .gbbStepsProgressBarFilled {
        background-color: var(--gbb-navigation-banner-step-progress-bar-filled-color);
    }

    .gbbCategoryContainerTabUI {
        background-color: var(--gbb-navigation-banner-tabs-inactive-bg-color);
        color: var(--gbb-navigation-banner-tabs-inactive-text-color);
        border: 1px solid var(--gbb-navigation-banner-tabs-border-color);
        border-radius: var(--gbb-navigation-banner-tabs-corner-radius);
    }

    .gbbCategoryContainerTabUIActive {
        background-color: var(--gbb-navigation-banner-tabs-active-bg-color);
        color: var(--gbb-navigation-banner-tabs-active-text-color);
    }

    .gbbtickMark svg>path {
        fill: var(--gbb-navigation-banner-step-done-color);
    }

    /* gbbNavigationStepImgContainer class which doesnt includes gbbNavigationStepImgContainerActive */

    .gbbNavigationStepImgContainer:not(.gbbNavigationStepImgContainerActive) {
        border: var(--gbb-navigation-banner-step-incomplete-border-width) solid var(--gbb-navigation-banner-step-incomplete-border-color);
        background-color: var(--gbb-navigation-banner-step-incomplete-bg-color);
    }

    .gbbNavigationStepImgContainerActive {
        border: var(--gbb-navigation-banner-step-completed-border-width) solid var(--gbb-navigation-banner-step-completion-color);
        /* background-color: var(--gbb-navigation-banner-step-completion-color); */
    }

    /* Navigation */

    /*const cssVariables=[ '
--gbb-navigation-banner-title-color',
'--gbb-navigation-banner-step-text-color',
];*/

}

.gbbNewPageCustomization.gbbProductVariantModalLayoutV2 {
    .gbbProductVariantAddButton {
        background-color: var(--gbb-product-card-button-color);
        color: var(--gbb-product-card-button-text-color);
        border-radius: var(--gbb-product-card-button-border-radius);

    }

    .gbbProductQuantityHTML {
        background-color: var(--gbb-product-card-quantity-selector-bg-color);
        color: var(--gbb-product-card-quantity-selector-text-color);
        border-radius: var(--gbb-product-card-quantity-selector-border-radius);
    }

    .gbbProductQuantityAddButton {
        display: var(--gbb-product-card-allow-only-one-quantity);
        border-radius: var(--gbb-product-card-quantity-selector-border-radius);
    }

    .gbbProductQuantityRemoveButton {
        background-color: var(--gbb-product-card-quantity-selector-btns-bg-color);
        color: var(--gbb-product-card-quantity-selector-button-text-color);
        border-radius: var(--gbb-product-card-quantity-selector-border-radius);
    }
}
.gbbGiftMessageV2InputFieldsDiv textarea {
    margin:0px;
    padding: 10px 18px;
    width: 100%;
    border: 1px solid #cccccc;
    /* background-color:#f1f2f3; */
    /* background-color: #ffffff; */
    color: #000000;
    max-width: 100%;
    line-height: 1.2;
    border-radius: 2px;
    padding-bottom: 10px;
    max-height: 170px !important;
    min-height:50px !important;
    border: 1px solid #A2A2A2;
    resize: none;
    width: 100%;
    height: 130px;
    padding: 10px;
    background: none;
}


.gbbGiftMessageV2Divider{
    display: block !important;
    border: 1px solid #A2A2A2 !important;
    height: 0px;
    opacity: 0.5;
 }
.gbbGiftMessageV2Label{
    text-align: left;
    letter-spacing: 0px;
    display: block;
    color: #000000;
    padding-bottom: 10px;
    opacity: 1;
}

.gbbGiftMessageV2{
    display: grid;
    grid-template-rows: 0.6fr;
    grid-gap: 10px;
}
.gbbVideoMessageCheckboxRow{
    display: grid;
    grid-auto-flow: column;
    padding: 5px;
    /* background-color: #f1f2f3; */
}
.gbbVideoMsgCheckboxLabel{
    text-align: left;
    letter-spacing: 0px;
    color: #000000;
}
 .gbbVideoMsgCheckboxWrapper {
    position: relative;
    display: inline-block;
    width: 44px;
    justify-self: end;
    height: 26px;
  }
.gbbVideoMsgCheckboxField { 
  width: 0px;
  height: 0px;
}

.gbbVideoMsgToggle input{ 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
.gbbVideoMsgSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid black;    
    -webkit-transition: .4s;
    transition: .4s;
  }
  
 .gbbVideoMsgSlider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    top:2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
   input:checked + .gbbVideoMsgSlider {
    background-color: black;
  }
  
 input:checked + .gbbVideoMsgSlider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    
    transform: translateX(16px);
  }
  
 
 
  /* Rounded sliders */
  .slider.round, .gbbVideoMsgSlider {
    border-radius: 34px;
  }
  
  .slider.round:before, .gbbVideoMsgSlider:before {
    border-radius: 50%;
    border: 1px solid black;
  }


  /* ============================================================================video message  */
  .gbbVideoPlayerHide {
    display: none !important;
  }

  .gbbVideoMsgPlayerWrapper {
    /* height: 100vh; */
    z-index: 10000000000000;
    display: none;
    align-items: center;
    justify-items: center;
    width: 100%;
    /* position: fixed; */
    top: 30px;
    margin: 10px auto;
  }

  .gbbRecorder {
  
    width: 100%;
    min-height: 250px;
    position: relative;
    border-radius: 2%;
    overflow: hidden;
  }

  .gbbVideoPlayer,
  .gbbVideoPlayerRecording {
    width: 100%;
    height: auto;
  }
 
  .gbbRecorderCloseBtn {
    position: absolute;
    z-index: 1;
    left: 2%;
    top: 5%;
    background: transparent;
    border: none;
    display: none;
  }

  .gbbRecorderCloseBtn img {
    height: 30px;
    width: 30px;
    filter: invert(90%);
    cursor: pointer;
  }

  .gbbVideoPlayerStartBtn,
  .gbbVideoPlayerStopBtn {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
  }

  .gbbVideoPlayerStartBtn {
    background-color: white;
  }

  .gbbVideoPlayerStopBtn {
    background-color: red;
  }

  .gbbVideoPlayerRedDot,
  .gbbVideoPlayerRedSquare {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .gbbVideoPlayerRedDot {
    background-color: red;
    border-radius: 50%;
  }

  .gbbVideoPlayerRedSquare {
    background-color: white;
    border-radius: 10%;
  }

  .gbbPermissionDenied {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
  }

  .gbbVideoPlayerTimeLeft {
    position: absolute;
    bottom: 4%;
    right: 4%;
    color: white;
    font-size: 12px;
    background: black;
    padding: 4px;
    color: white;
    opacity: 0.7;  
  }

  .gbbVideoPlayerStatus {
    position: absolute;
    bottom: 4%;
    left: 4%;
    font-size: 12px;
    padding: 4px;
    background-color: black;
    color: white;
    opacity: 0.7;
  }

  

  .gbbVideoPlayerControls {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    justify-content: space-evenly;
    align-items: center;
  }

  .gbbLoadingHeading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    font-size: 20px;
  }

  .gbbUploadingVideoHeading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #e3dada;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
  }

  .gbbVideoPlayerControlsAcceptBtnDiv, 
  .gbbVideoPlayerControlsPlayBtnDiv, 
  .gbbVideoPlayerControlsReStartBtnDiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .gbbVideoPlayerControlsReStartBtnDiv,
  .gbbVideoPlayerControlsAcceptBtnDiv{
    display: none;
  }

  .gbbVideoPlayerControlsBtnDivInfo{
    font-size: 12px;
    color: white;
    margin: 0 0 8px 0; 
  }

  .gbbVideoPlayerControlsAcceptBtn,
  .gbbVideoPlayerControlsPlayBtn,
  .gbbVideoPlayerControlsReStartBtn {
    background-color: transparent;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    cursor: pointer;
    border:0;
    /* margin-right: 20px; */
  }

  old.gbbVideoPlayerControlsAcceptBtn {
    border: 5px solid #3ce669;
  }

  old.gbbVideoPlayerControlsPlayBtn {
    border: 5px solid #d3d3d3;
  }

  old.gbbVideoPlayerControlsReStartBtn {
    border: 5px solid #e03838;
  }

  .gbbVideoPlayerControlsAcceptBtnImg,
  .gbbVideoPlayerControlsPlayBtnImg,
  .gbbVideoPlayerControlsReStartBtnImg {
    height: auto;
    width: 100%;
  }

  old.gbbVideoPlayerControlsAcceptBtnImg {
    filter: invert(69%) sepia(59%) saturate(537%) hue-rotate(80deg) brightness(98%) contrast(93%);
  }

  old.gbbVideoPlayerControlsPlayBtnImg {
    filter: invert(100%) sepia(0) saturate(7500%) hue-rotate(116deg) brightness(80%) contrast(109%);
  }

  old.gbbVideoPlayerControlsReStartBtnImg {
    filter: invert(23%) sepia(77%) saturate(3858%) hue-rotate(348deg) brightness(98%) contrast(80%);
  }

  /* 500px and down */
  @media only screen and (max-width: 600px) {
    .gbbVideoPlayerRecording {
      object-fit: cover;
      height: 100%;
    }
    .gbbRecorder {
      min-height: 36vh;
    }
    .gbbVideoPlayer,
  .gbbVideoPlayerRecording{
    width: 100%;
    object-fit: cover;
    position: absolute;
    height: 100%;
  }
    .gbbVideoPlayerControlsAcceptBtn,
    .gbbVideoPlayerControlsPlayBtn,
    .gbbVideoPlayerControlsReStartBtn {
      height: 50px;
      width: 50px;
    }

    .gbbVideoPlayerControlsAcceptBtnImg,
    .gbbVideoPlayerControlsPlayBtnImg,
    .gbbVideoPlayerControlsReStartBtnImg {
      height: 40px;
      width: 40px;
    }
  }

  /* 350px and down */
  @media only screen and (max-width: 600px) {
    .gbbVideoPlayerStartBtn,
    .gbbVideoPlayerStopBtn {
      height: 40px;
      width: 40px;
    }

    .gbbVideoPlayerRedDot,
    .gbbVideoPlayerRedSquare {
      width: 10px;
      height: 10px;
    }
    .gbbGiftMessageV2InputFieldsDiv textarea {
      height: 80px;
    }

  }
  .gbbGiftCardMessageContent{
    overflow-y:auto;
  }

  
  /* Track */
  .gbbGiftCardMessageContent  ::-webkit-scrollbar-track,.gbbGreetingCardListWrapper ::-webkit-scrollbar-track  {
    background: #f1f1f1; 
  }
   
  /* Handle */
   .gbbGiftCardMessageContent  ::-webkit-scrollbar-thumb,.gbbGreetingCardListWrapper ::-webkit-scrollbar-thumb{
    background: #2c2c2c 0% 0% no-repeat padding-box;
  }



  
  /* Handle on hover */
  .gbbGiftCardMessageContent  ::-webkit-scrollbar-thumb:hover, .gbbGreetingCardListWrapper ::-webkit-scrollbar-thumb:hover {
    background: #000000 0% 0% no-repeat padding-box;
  }

  /* Extra small devices (phones, 600px and down) */
  /* @media only screen and (max-width: 800px) {
    .gbbRecorder {
      width: 375px;
      height: 650px;
      background-color: black;
    }

    .gbbVideoPlayer,
    .gbbVideoPlayerRecording {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .gbbVideoPlayerRecording {
      object-fit: contain;
    }

    .gbbVideoPlayerControls {
      width: 80%;
    }

    .gbbVideoPlayerControlsAcceptBtn,
    .gbbVideoPlayerControlsPlayBtn,
    .gbbVideoPlayerControlsReStartBtn {
      margin-right: 7px;
    }

    .gbbVideoPlayerTimeLeft,
    .gbbVideoPlayerStatus {
      font-size: 18px;
      background-color: rgba(0,0,0,0.2);
      padding: 2px 4px;
    }

  } */


  /* @media only screen and (max-width: 850px) {} */

  /* Small devices (portrait tablets and large phones, 600px and up) */
  /* @media only screen and (min-width: 600px) {} */

  /* Medium devices (landscape tablets, 768px and up) */
  /* @media only screen and (min-width: 768px) {} */

  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 900px) {
    .gbbRecorder {
      min-height: 180px;
      height: 100%;
    }
    .gbbRecord,.gbbRecorded{
      height: 100%;
    }
    .gbbVideoPlayer, .gbbVideoPlayerRecording{
      width: 100%;
      object-fit: cover;
      height: 100%;
    }
    .gbbVideoMsgPlayerWrapper{
      height: auto;  
    }
   
    .gbbGiftCardMessageContent{
      max-height: 350px;
    } 

  }

  /* Extra large devices (large laptops and desktops, 1200px and up) */
  /* @media only screen and (min-width: 1200px) {}  */


  .giftMessageDeliveryInfo{
    font-size: 12px;
    /* font-style: italic; */
    color: #8c8c8c;    
  }
  
.gbbVideoMsgEmailField{
  margin: 0px;
  padding: 10px 18px;
  /* width: 100%; */
  /* background-color: #ffffff; */
  color: #000000;
  max-width: 100%;
  line-height: 1.2;
  border-radius: 2px;
  padding-bottom: 10px;
  border: 1px solid #A2A2A2;
  font-size: 14px !important;
  background: none;
}



.gbbEmailValidationError{
  color: #ff0000;
  font-size: 14px;
  margin-top: 5px;
}

.gbbVideoMessageHTML{
    height: fit-content;
    /* background: #f1f2f3; */
    /* background-color: white; */
    background: none;
    display: grid;
    grid-gap: 5px;
}


.gbbGreetingCardDropDownWrapper,.gbbGiftWrapDropDownWrapper,
.gbbGiftMessageV2Label,.gbbScheduleDeliveryDateLabel,
.gbbEmailAddressLabelField{
  font-weight: 600;
}