/*

*/
.left-palettes-holder, .right_panel_big_container,.colorpaletteholder,#screen-size{visibility: hidden;}
#loading-wp{display: flex;}

body.body {
  color: #fff;
  background: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/*Overall structure*/
.code-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 1;
}
.left-palettes-holder {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 3;
  gap: 10px;
  width: 150px;
  position: absolute;
  left: 3px;
  bottom: 3px;
}
.colorpaletteholder {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 568px);
  z-index: 2;
  position: absolute;
  left: 153px;
  bottom: 3px;
}
.right_panel_big_container {
  max-height: 99vh;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

.options-box {
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
  border-radius: 5px;
  height: auto;
  margin-top: 0;
  margin-right: 0;
  position: static;
  overflow: visible;
  background: #0e0e0e;
}
.options-box .options-content{
  padding-top: 5px;
  font-size: 12px;
}
.left-palettes-holder .options-box {
  width: 100%;
}
.options-box.colour-labels{
  border-right:0
}
.options-box.bosspod-qpod-menu{
  width: 190px;
}

.options-box.additional-features{
  width: 210px;
}

.left-switch{
  display: flex;
    font-size: 12px;
    gap: 5px;
    justify-content: center;
    padding: 10px 0;
    border-bottom: 1px dotted;
}
.options-box .left-switch:last-child{
  border-bottom: 0;
}
.red-toggle{
  width: 30px;
  height: 18px;
  position: relative;
  background: #fff;
border-radius: 8px;
cursor: pointer;
}
.red-toggle .toggle-inner {
  width: 18px;
  height: 16px;
  border-radius: 50%;
  background-color: #de1624;
  position: absolute;
  left: 1px;
  top: 1px;
  transition: left 0.3s ease;
}
.red-toggle.active .toggle-inner {
  left: 10px;
}

/* Kitchen Type Selection Styles */
.kitchen-type-selection {
  padding: 15px 10px;
  border-bottom: 1px dotted;
}

.kitchen-type-heading {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  color: #fff;
}

.kitchen-type-heading .required {
  color: #de1624;
  font-weight: bold;
}

.kitchen-type-options {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

.kitchen-option {
  flex: 1;
  padding: 10px 6px;
  border: 2px solid #666;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #1a1a1a;
  position: relative;
}

.kitchen-option:hover {
  border-color: #de1624;
  background: #2a2a2a;
}

.kitchen-option.selected {
  border-color: #de1624;
  color: #fff;
  box-shadow: 0 4px 8px rgba(222, 22, 36, 0.3);
}

.kitchen-option.selected::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #de1624;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid #fff;
}

.option-visual {
  margin-bottom: 6px;
}

.cupboard-icon, .servery-icon {
  font-size: 24px;
  display: block;
}

.option-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}

.option-description {
  font-size: 10px;
  line-height: 12px;
  opacity: 0.8;
}

.kitchen-option.selected .option-description {
  opacity: 1;
}

.selection-note {
  font-size: 10px;
  text-align: center;
  color: #ccc;
  font-style: italic;
  animation: pulse-soft 2s ease-in-out infinite;
}

@keyframes pulse-soft {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Validation highlight animation */
.kitchen-type-selection.highlight-required {
  animation: highlight-shake 0.5s ease-in-out 3;
  border: 2px solid #de1624 !important;
  border-radius: 8px;
  background: rgba(222, 22, 36, 0.1);
}

@keyframes highlight-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}


#loading-wp{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 30px;
  background: #ffffff;
  z-index: 10;
  padding-top: 20px;
}

.loading-message {
  font-size: 24px;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 60%;
  padding: 0 20px;
  word-wrap: break-word;
  white-space: normal;
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: loading-message-breathe 3s ease-in-out infinite;
  transform-origin: center;
}

/* Breathing/pulsing animation for loading message */
@keyframes loading-message-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* New visual loading progress styles */
.loading-progress-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  width: 100%;
  position: relative; /* For positioning the percentage text */
}

.loading-pod-wrapper {
  position: relative;
  width: 600px; /* Desktop size - fixed */
  height: 400px; /* Desktop size - fixed */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #de1624; /* Desktop border */
  border-radius: 10px;
  padding: 20px;
}

.loading-pod-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0%) brightness(1); /* Start fully visible */
  transition: filter 0.3s ease;
}

.loading-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.loading-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Keep full width */
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%); /* Increased opacity from 0.9/0.7 to 0.95/0.9 */
  transition: clip-path 0.3s ease;
  /* clip-path will be updated by JavaScript to reveal from left to right */
}

.loading-percentage-text {
  position: absolute;
  top: 30px; /* Position above the wrapper */
  left: 10px; /* Position at the left of the wrapper */
  font-size: 48px; /* Increased from 24px for desktop */
  font-weight: bold;
  color: #de1624; /* Changed to specified color */
  z-index: 10;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Optional: adds shadow for better visibility */
}

.loading-indicator {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 16px;
  color: #333; /* Changed from #ccc to dark gray */
  background: rgba(255, 255, 255, 0.9); /* Changed from rgba(0, 0, 0, 0.7) to white with opacity */
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #ccc; /* Changed from #333 to light gray */
  display: none;
}

#loading-percent{
  padding-left: 10px;
}
.section {
  flex-flow: row;
  margin-top: 60px;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
}

.section.wotpod-qpod-selection {
  margin-top: 75px;
  overflow: visible;
}

.button {
  width: 150px;
  height: 60px;
}
.color-label-name{
  text-decoration: underline;
  font-size: 14px;
}
#Bosspod_Sel, #Qpod_Sel{
   transition: background-color 0.3s ease, color 0.3s ease;
}

.button.qpod_sel {
  filter: contrast(300%);
  background-image: url('../images/Qpod_120X60.png');
  background-position: 0 0;
  background-size: contain;
  width: 120px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  right: 500px;
}

.button.bosspod_sel {
  filter: contrast(300%);
  -webkit-text-fill-color: inherit;
  background-image: url('../images/Boss_Pod_120X60.png');
  background-position: 0 0;
  background-size: auto;
  background-clip: border-box;
  width: 120px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 500px;
}

.text-block {
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 20px;
  position: absolute;
  inset: auto 0% -35%;
}

.text-block.qpod_text {
  opacity: 1;
  filter: invert();
  mix-blend-mode: normal;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  top: -20px;
  left: -22%;
}

.text-block.boss_pod_text {
  opacity: 1;
  filter: invert();
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  top: -20px;
  left: -18%;
}



.paint-scheme {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  color: #1d1d1d;
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-color: #fff;
  background-image: linear-gradient(#000, #777 50%, #000);
  background-clip: border-box;
  border: 1px solid #fff;
  border-radius: 10px;
  flex-flow: column wrap;
  order: -1;
  place-content: center;
  align-self: auto;
  align-items: center;
  width: 110px;
  height: 40px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: static;
  top: -10px;
}

.paintschemepartselectbuttons {
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px;
  width: 100px;
  height: 25px;
}

.paintschemepartselectbuttons.colorschemesidepanelbutton {
  background-image: none;
  border-width: 0;
}

.paintschemepartselectbuttons.colorschemeroofpanelbutton, .paintschemepartselectbuttons.colorschememiscbutton {
  background-image: linear-gradient(#777, #000 50%, #777);
}
html, body{
  width: 100%; height: 100%;
  margin: 0; padding: 0; overflow: hidden;
}
.special-note{
  font-size: 18px;
  font-weight: 700;
  padding: 12px 15px;
  color: #de1624;
  text-align: center;
  animation: special-note-pulse 3s ease-in-out infinite;
  position: relative;
}

/* Add pulsing animation for the special note */
@keyframes special-note-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Add a subtle glow effect */
.special-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: special-note-shine 4s ease-in-out infinite;
}

@keyframes special-note-shine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
.special-link{
margin-bottom: 50px;

}
.special-link a{
color: #ccc;
font-size: 16px;
font-weight: 700;
}
.builder-header{
display: flex;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.builder-header-right{
  display: flex;
  color: #ccc;
  font-size: 18px;
  align-items: center;
  margin-left: 10px;
}

.wotpod-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    padding: 10px;
    flex-direction: column;
}
.wotpod-title .logo {
  background-image: url('../images/Logo_Optimized.png');
  background-position: 0 0;
  background-size: contain;
  width: 150px;
  height: 60px;
}
.wotpod-title .builder{
  color: #de1624;
    font-weight: 700;
    font-size: 23px;
    margin-top: 3px;
}

.options-container-holder {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  color: #1d1d1d;
  background-color: #fff;
  background-image: repeating-linear-gradient(#000, #878787 53%, #000);
  border: 1px solid #fff;
  border-radius: 10px;
  flex-flow: column-reverse;
  flex: 0 auto;
  order: -1;
  place-content: center;
  align-self: auto;
  align-items: center;
  width: 195px;
  height: 620px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  line-height: 21px;
  display: flex;
  position: static;
  inset: 1% 0% 0% auto;
}

.option {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: #c5c5c5;
  border: 1px solid #000;
  border-radius: 5px;
  flex-flow: column-reverse wrap;
  order: -1;
  place-content: flex-end center;
  align-self: center;
  align-items: stretch;
  width: 210px;
  height: 30px;
  margin-left: 0;
  display: flex;
  position: static;
  inset: 0%;
}

.option.cyclerack {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
  border-width: 1px;
  flex-flow: column-reverse wrap;
  order: 0;
  align-content: flex-end;
  width: 180px;
  height: 30px;
}

.option.toprack {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
  border-width: 1px;
  flex-flow: column-reverse wrap;
  order: 0;
  place-content: flex-end space-around;
  align-self: auto;
  align-items: stretch;
  width: 180px;
  height: 30px;
}

.option.sidetable {
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
  order: 0;
  width: 180px;
}

.option.awning {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: #3d3d3d;
  background-image: linear-gradient(#444, #080808 50%, #444);
  border-radius: 9px;
  flex-flow: column-reverse;
  flex: none;
  order: -1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: space-around center;
  align-self: center;
  align-items: center;
  width: 180px;
  height: 160px;
  display: flex;
  overflow: visible;
}

.option.waterheater, .option.ladder, .option.sidewindow, .option.frontbox {
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
  order: 0;
  width: 180px;
}

.option.totalprice {
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
  width: 180px;
}

.text-block-14 {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: #181818;
  text-align: center;
  flex-flow: column-reverse wrap;
  flex: none;
  order: -1;
  place-content: flex-end center;
  align-self: auto;
  align-items: center;
  height: 30px;
  margin-top: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  display: flex;
  position: static;
}

.text-block-14.awningtext {
  color: #fff;
  order: 1;
  align-self: center;
  height: 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 0;
}

.kitchenlayoutright {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: #333;
  background-color: #fff;
  background-image: linear-gradient(#000, #777 50%, #000);
  border: 1px solid #fff;
  border-radius: 10px;
  flex-flow: wrap;
  flex: none;
  place-content: center;
  align-items: center;
  width: 110px;
  height: 280px;
  margin-top: 0;
  margin-left: 0;
  display: flex;
  position: static;
  inset: 63% auto 0% 0%;
}

.dooropenclickbuttoncontainer {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  background-color: #c5c5c5;
  background-image: linear-gradient(#5f5f5f, #fff 50%, #5f5f5f);
  border: 1px solid #fff;
  border-radius: 10px;
  flex-flow: wrap;
  place-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  display: flex;
}

.doorbutton {
  background-color: #fff;
  background-image: url('../images/Door_Open.png');
  background-position: 0 0;
  background-size: auto;
  width: 60px;
  height: 20px;
}

.doorbutton.doorbuttonopen {
  background-position: 50%;
  background-size: contain;
  background-attachment: scroll;
  border: 1px solid #000;
  border-radius: 5px;
  order: 0;
  align-self: center;
  width: 40px;
  height: 20px;
}

.doorbutton.doorbuttonclose {
  text-align: center;
  background-image: url('../images/Door_Close.png');
  background-position: 50%;
  background-size: contain;
  border: 1px solid #000;
  border-radius: 5px;
  width: 40px;
  height: 20px;
}

.text-block-18 {
  color: #181818;
  text-align: center;
  border: 0 solid #181818;
  order: -1;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
  position: static;
}

.container-7 {
  background-color: #575757;
  border: 1px solid #000;
  border-radius: 10px;
  width: 140px;
  height: 160px;
}

.container-7.layoutselection {
  grid-column-gap: 0px;
  grid-row-gap: 2px;
  background-color: #c5c5c5;
  background-image: linear-gradient(#5f5f5f, #000 50%, #5f5f5f);
  border-color: #fff;
  flex-flow: wrap-reverse;
  place-content: center;
  align-self: stretch;
  align-items: center;
  width: 100px;
  height: 80px;
  display: flex;
  position: static;
}

.container-7.layoutselection.kitchenfridge {
  align-content: flex-end;
  height: 100px;
}

.container-7.cabinetcolorselection {
  background-image: linear-gradient(#777, #000 50%, #777);
  border-color: #fff;
  border-radius: 5px;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100px;
  height: 30px;
  line-height: 50px;
  display: flex;
}

.body {
  box-sizing: content-box;
  object-fit: fill;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
  overflow: hidden;
  position: relative;
}

.div-block-21 {
  background-color: #646464;
  border: 1px solid #000;
  border-radius: 5px;
  order: -1;
  justify-content: center;
  align-self: flex-end;
  align-items: center;
  width: 100px;
  height: 140px;
  display: flex;
}

.div-block-21.dooroptions {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  object-fit: fill;
  background-color: #3d3d3d;
  background-image: linear-gradient(#444, #080808 50%, #444);
  flex-flow: column wrap;
  flex: 0 auto;
  order: -1;
  place-content: center;
  align-self: center;
  align-items: center;
  width: 180px;
  height: 135px;
}

.text-block-19 {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.text-block-19.doortext {
  color: #fff;
  order: -1;
  font-weight: 400;
}

.div-block-26 {
  box-sizing: border-box;
  object-fit: contain;
  background-color: #fff;
  border-radius: 8px;
  flex: none;
  order: 1;
  justify-content: flex-start;
  align-self: stretch;
  align-items: center;
  width: 30px;
  line-height: 10px;
  display: flex;
  height: 18px;;
}

.div-block-26.togglebutton {
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  width: 18px;
  height: 16px;
  margin-top: 1px;
  position: static;
  -webkit-transform: translate3d(-11px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
   -moz-transform: translate3d(-9px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
   -ms-transform: translate3d(-9px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  transform: translate3d(-11px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  background-color: rgb(0, 0, 0);
    background-color: #696969;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.div-block-26.togglebutton.active{
  transform: translate3d(-1px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  /*background-color: rgb(0, 115, 255); */
  background-color: #de1624;
  border: 0;
}

.div-block-26.cycleracktoggle, .div-block-26.topracktoggle, .div-block-26.laddertoggle {
  margin-right: 5px;
}

.div-block-26.tyretypetoggle, .div-block-26.sparetyretoggle {
  margin-right: 0;
}

.div-block-26.waterheatertoggle, .div-block-26.sidetabletoggle {
  margin-right: 5px;
}

.div-block-26.sidewindowtoggle {
  flex-flow: row;
  justify-content: flex-end;
  align-self: center;
  align-items: center;
  margin-right: 0;
}

.text-block-20 {
  color: #fff;
  order: -1;
  align-self: auto;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.text-block-20.sidewindowpricetext {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.text-block-20.fboxbigtext, .text-block-20.offroadtyretext, .text-block-20.sparetyreofftext {
  order: 1;
  margin-right: 5px;
}

.text-block-20.totalpricetext {
  text-transform: uppercase;
  padding-right: 20px;
  font-size: 14px;
  text-decoration: none;
}

.optionspriceholder {
  width: 100px;
  height: 630px;
  margin-top: 46px;
  margin-left: 1178px;
  margin-right: 0;
  display: flex;
  position: absolute;
}

.optionspriceholder.options-container-holder {
  flex: 0 auto;
  order: 1;
  width: 70px;
  height: 620px;
  margin-top: 0;
  margin-left: 0;
  position: static;
}

.prices {
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777 99%, #fff);
  border: 1px solid #000;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 30px;
  display: flex;
}

.prices.sidewindowprice {
  background-color: #3d3d3d;
  background-image: linear-gradient(#777, #222 50%, #777);
}

.prices.cyclerackprice, .prices.ladderprice {
  background-image: linear-gradient(#777, #222 50%, #777);
}

.prices.frontboxprice, .prices.tyreprice, .prices.sparetireprice, .prices.water-heaterprice, .prices.side-tableprice {
  background-color: #3d3d3d;
}

.prices.door-sizeprice {
  background-color: #3d3d3d;
  background-image: linear-gradient(#444, #080808 50%, #444);
  height: 135px;
}

.prices.awningprice {
  background-color: #3d3d3d;
  background-image: linear-gradient(#444, #080808 50%, #444);
  height: 160px;
}

.prices.totalpricedollarholder {
  background-color: #3d3d3d;
}

.pricestext.sidewindowpricetext, .pricestext.cyclerackpricetext, .pricestext.ladderpricetext, .pricestext.top-rackpricetext, .pricestext.frontboxpricetext, .pricestext.tyrepricetext, .pricestext.sparetirepricetext, .pricestext.water-heaterpricetext, .pricestext.side-tablepricetext, .pricestext.door-sizepricetext, .pricestext.awningpricetext, .pricestext.totalpricedollartext {
  color: #fff;
}

.optionspaletteholder {
  flex-flow: wrap;
  place-content: stretch center;
  align-items: flex-start;
  width: 270px;
  height: 630px;
  margin-top: 66px;
  margin-right: 600px;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
  overflow: hidden;
}



.colorschemepalette {
  width: 100%;
  display: flex;
}

.colorpanel-heading {
  background-image: linear-gradient(#777, #1b1b1b 50%, #777);
  border-width: 2px;
  border-color: #fff;
  position: static;
      align-items: center;
    display: none
;
    width: 60px;
    padding-left: 5px;
}
/*
.colorschemepalette.roof {
  background-image: linear-gradient(#777, #1b1b1b 50%, #777);
  border-width: 2px;
  border-color: #fff;
  height: 60px;
  display: flex;
  position: static;
  bottom: 9%;
}*/

.tabs-content-2 {
  border: 1px solid #000;
  border-radius: 5px;
  flex: none;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 60px;
  display: flex;
}

.tabs-content-2.tabmenucontentsidepanel, .tabs-content-2.tabmenucontentroof {
  order: 0;
  width: 300px;
}

.colorpaltettebuttonstyling {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  border: 1px solid #000;
  border-radius: 10px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  cursor: pointer;
}

.colorpaltettebuttonstyling.w--current, .kitchencolortabbuttonsstyling.w--current {
  border-width: 2px;
  border-color: #de1624;
  box-shadow: 1px 1px 8px #de1624;
  width: 38px;
  height: 38px;
}

.colorpaltettebuttonstyling._801-silver-metallic {
  background-image: url('../images/801-Silver-Metallic.png');
  background-position: 0 0;
  background-size: contain;
  font-size: 12px;
}

.colorpaltettebuttonstyling._801-silver-metallic.w--current {
  background-image: url('../images/801-Silver-Metallic.png');
  background-position: 0 0;
  background-size: contain;
  border-width: 2px;
}

.colorpaltettebuttonstyling._802-silver-grey_sp {
  background-image: url('../images/802-silver-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._803pearl-grey, .colorpaltettebuttonstyling._803pearl-grey.w--current {
  background-image: url('../images/803Pearl-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._804-champagne-gold {
  background-image: url('../images/804-Champagne-Gold.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._805-rat-silver {
  background-image: url('../images/805-Rat-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._806-seaweed-silver {
  background-image: url('../images/806-Seaweed-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._807-champagne-silver {
  background-image: url('../images/807-Champagne-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._808-coffee-champagne {
  background-image: url('../images/808-Coffee-Champagne.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._809-sparkle-gold {
  background-image: url('../images/809-Sparkle-Gold.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._810-pure-gold {
  background-image: url('../images/810-Pure-Gold.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._811-brass {
  background-image: url('../images/811-Brass.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._812-bright-brass-metallic {
  background-image: url('../images/812-Bright-Brass-Metallic.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._813-pure-white {
  background-image: url('../images/813-Pure-White.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._814-milk-white {
  background-image: url('../images/814-Milk-White.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._815-ivory-white {
  background-image: url('../images/815-Ivory-White.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._816-off-white {
  background-image: url('../images/816-Off-White.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._817-beige {
  background-image: url('../images/817-Beige.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._818-light-grey {
  background-image: url('../images/818-Light-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._819-buff {
  background-image: url('../images/819-Buff.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._820-yellow-cream {
  background-image: url('../images/820-Yellow-Cream.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._821-pure-yellow {
  background-image: url('../images/821-Pure-Yellow.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._822-lemon-yellow {
  background-image: url('../images/822-Lemon-Yellow.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._823-saffron-yellow {
  background-image: url('../images/823-Saffron-Yellow.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._824-jacinth {
  background-image: url('../images/824-Jacinth.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._825-pink {
  background-image: url('../images/825-Pink.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._826-scarlet {
  background-image: url('../images/826-Scarlet.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._827-hair-red {
  background-image: url('../images/827-Hair-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._828-rose-red {
  background-image: url('../images/828-Rose-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._829-chinese-red {
  background-image: url('../images/829-Chinese-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._830-pure-red {
  background-image: url('../images/830-Pure-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._831-violet-ash {
  background-image: url('../images/831-Violet-Ash.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._832-violet-red {
  background-image: url('../images/832-Violet-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._833-pale-rose {
  background-image: url('../images/833-Pale-Rose.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._834-dark-rose {
  background-image: url('../images/834-Dark-Rose.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._835-wine-red {
  background-image: url('../images/835-Wine-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._836-henna {
  background-image: url('../images/836-Henna.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._837-light-cyan {
  background-image: url('../images/837-Light-Cyan.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._838-yellow-green {
  background-image: url('../images/838-Yellow-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._839-telecom-green {
  background-image: url('../images/839-Telecom-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._840-apple-green {
  background-image: url('../images/840-Apple-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._841-jade-green {
  background-image: url('../images/841-Jade-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._842-post-green {
  background-image: url('../images/842-Post-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._843-pink-blue {
  background-image: url('../images/843-Pink-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._844-sky-blue {
  background-image: url('../images/844-Sky-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._845-lake-blue {
  background-image: url('../images/845-Lake-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._846-finland-green {
  background-image: url('../images/846-Finland-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._847-grid-green, .colorpaltettebuttonstyling._847-grid-green.w--current {
  background-image: url('../images/847-Grid-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._848-black-green {
  background-image: url('../images/848-Black-Green.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._849-light-blue {
  background-image: url('../images/849-Light-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._850-telecom-blue {
  background-image: url('../images/850-Telecom-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._851-deep-blue {
  background-image: url('../images/851-Deep-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._852-police-blue {
  background-image: url('../images/852-Police-Blue.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._853-lilac {
  background-image: url('../images/853-Lilac.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._854-profile-grey {
  background-image: url('../images/854-Profile-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._855-bank-grey {
  background-image: url('../images/855-Bank-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._856-dark-grey {
  background-image: url('../images/856-Dark-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._857-pale-silver {
  background-image: url('../images/857-Pale-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._858-dark-grey-silver {
  background-image: url('../images/858-Dark-Grey-SIlver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._859-coffee-silver {
  background-image: url('../images/859-Coffee-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._860-sparkle-black {
  background-image: url('../images/860-Sparkle-Black.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._861-brushed-steel {
  background-image: url('../images/861-Brushed-Steel.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._862-brushed-grey {
  background-image: url('../images/862-Brushed-Grey.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._863-brushed-purple {
  background-image: url('../images/863-Brushed-Purple.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._864-light-coffee {
  background-image: url('../images/864-Light-Coffee.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._865-coffee_sp {
  background-image: url('../images/865-Coffee.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._866-pure-black_sp {
  background-image: url('../images/866-Pure-Black.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._867-brushed-silver {
  background-image: url('../images/867-Brushed-Silver.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._868-brushed-gold {
  background-image: url('../images/868-Brushed-Gold.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._869-brushed-brown {
  background-image: url('../images/869-Brushed-Brown.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._870-brushed-copper {
  background-image: url('../images/870-Brushed-Copper.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._871-brushed-red {
  background-image: url('../images/871-Brushed-Red.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling._872-brushed-black {
  background-image: url('../images/872-Brushed-Black.png');
  background-position: 0 0;
  background-size: contain;
}

.colorpaltettebuttonstyling.sidepanel_beigeclothpattern {
  background-image: url('../images/BeigeClothPattern_Seamless.jpg');
  background-position: 50%;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_suedeclothpattern {
  background-image: url('../images/SuedeClothPattern_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_hoar-limestone {
  background-image: url('../images/Hoar-Limestone_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_graystone {
  background-image: url('../images/GrayStone_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_gray-pock {
  background-image: url('../images/Gray-Pock_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_brassmarble {
  background-image: url('../images/BrassMarble_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_whitegrayterrazo {
  background-image: url('../images/WhiteGrayTErrazo_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_lightgrayterrazo {
  background-image: url('../images/LightGrayTerrazo_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_ironrustpattern {
  background-image: url('../images/IronRustPattern_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_midgrayterrazo {
  background-image: url('../images/MidGrayTerrazo_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_blackgrayterrazo {
  background-image: url('../images/BlackGrayTerrazo_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_silverhazepattern {
  background-image: url('../images/SilverhazePattern_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_cementgray {
  background-image: url('../images/CementGray_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_barregray {
  background-image: url('../images/BarreGray_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.colorpaltettebuttonstyling.sidepanel_landscapepattern {
  background-image: url('../images/LandscapePattern_Seamless.jpg');
  background-position: 0 0;
  background-size: auto;
}

.tabs-menu {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  border: 0 solid #000;
  border-radius: 0;
  display: flex;
  overflow: scroll;
  max-width: 100%;
  scrollbar-color:#de1624 #ccc;
}

.colors_name_styling {
  direction: ltr;
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #fff;
  text-transform: capitalize;
  text-overflow: ellipsis;
  column-count: auto;
  white-space: nowrap;
  word-break: break-all;
  overflow-wrap: break-word;
  flex: none;
  width: 300px;
  height: 20px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}

.text-block-21 {
  color: #fff;
  order: -1;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
}

.text-block-21.muthutextstyle {
  align-self: center;
  padding-bottom: 6px;
  font-size: 14px;
}

.text-block-22 {
  color: #fff;
  text-align: center;
  order: -1;
  line-height: 15px;
}

.text-block-22.muthutextstyle {
  margin-top: -2px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 700;
}

.colorschemebuttonstext {
  color: #fff;
}

.layoouttabbuttonstyle {
  background-color: red;
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #000;
  border-radius: 5px;
  order: 0;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 25px;
  padding-left: 0;
  padding-right: 0;
  line-height: 20px;
  display: flex;
}

.layoouttabbuttonstyle.w--current {
  background-image: linear-gradient(#777, #000 50%, #777);
  border-width: 1px;
  border-color: #de1624;
}

.layoouttabbuttonstyle.awningbuttontabs, .layoouttabbuttonstyle._1180x950, .layoouttabbuttonstyle._1180x650, .layoouttabbuttonstyle._900x800 {
  width: 100px;
}

.layoouttabbuttonstyle._900x650 {
  background-image: linear-gradient(#777, #000 50%, #777);
  width: 100px;
}

.tabs-menu-2 {
  flex-flow: column-reverse;
  justify-content: center;
  align-items: center;
  width: 100px;
  display: flex;
}

.tabs-menu-2.doorbuttoncontainer {
  width: 120px;
  display: flex;
}

.tabs {
  width: 80px;
}

.tabs.awningbuttontabs {
  width: 100px;
  display: flex;
}

.tabs.doorsize {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-block-25 {
  color: #fff;
  align-self: center;
}

.text-block-25.awningtextsize {
  font-size: 12px;
}

.others_color_palette_tabs_styling {
  border: 1px solid #000;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
}

.others_color_palette_tabs_styling.w--current {
  border-width: 2px;
  border-color: #de1624;
}

.others_color_palette_tabs_styling.others-color-palette-black {
  background-color: #070707;
}

.others_color_palette_tabs_styling.others-color-palette-black.w--current {
  background-image: url('../images/866-Pure-Black.png');
  background-position: 0 0;
  background-size: contain;
}

.others_color_palette_tabs_styling.other-color-palette-metal {
  background-image: url('../images/Armoured_Plate_50X50.png');
  background-position: 0 0;
  background-size: contain;
}

.others_colorpalette_text {
  background-image: linear-gradient(#777, #1b1b1b 52%, #777);
  border: 1px solid #000;
  border-radius: 5px;
  flex: none;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 60px;
  display: flex;
}

.tabs-menu-4 {
  flex: none;
  order: -1;
  justify-content: flex-start;
  margin-right: 4px;
  display: flex;
}

.tabs-2 {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  background-image: linear-gradient(#000, #fff 50%, #000);
  border: 1px solid #fff;
  border-radius: 5px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 260px;
  display: flex;
  position: absolute;
  inset: auto 0% 18% 40%;
}

.tabs-2.otherscolorselection {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: linear-gradient(#000, #fff 50%, #000);
  border-width: 1px;
  flex: none;
  justify-content: flex-end;
  width: 390px;
  height: 60px;
  margin-top: 0;
  margin-bottom: 0;
  position: static;
  inset: auto 0% 27%;
}

.kitchen_color_tabs {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: linear-gradient(#777, #1b1b1b 50%, #777);
  border: 2px solid #fff;
  border-radius: 5px;
  flex-flow: row;
  place-content: flex-start;
  align-self: auto;
  align-items: center;
  width: 770px;
  max-width: none;
  height: 60px;
  margin-top: 0;
  display: flex;
  position: static;
  inset: auto 0% 18%;
  overflow: visible;
}

.kitchencolortabbuttoncontainer {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 0 auto;
  order: -1;
  justify-content: flex-start;
  align-items: center;
  width: 470px;
  height: 60px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  overflow: auto;
}

.kitchencolortabcontentcontainer {
  background-color: #fff0;
  border: 1px solid #000;
  border-radius: 5px;
  flex: none;
  order: 0;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 60px;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: static;
}

.kitchencolortabbuttonsstyling {
  border: 1px solid #000;
  border-radius: 10px;
  flex: none;
  width: 40px;
  height: 40px;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}

.kitchencolortabbuttonsstyling.kit_1c {
  background-image: url('../images/1C.jpg');
  background-position: 0 0;
  background-size: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.kitchencolortabbuttonsstyling.kit_1c.w--current {
  border-width: 2px;
  border-color: #de1624;
}

.kitchencolortabbuttonsstyling.kit_1d {
  background-image: url('../images/1D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_1e {
  background-image: url('../images/1E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_1f {
  background-image: url('../images/1F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_2a {
  background-image: url('../images/2A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_2b {
  background-image: url('../images/2B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_2c {
  background-image: url('../images/2C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_2d {
  background-image: url('../images/2D.jpg');
  background-position: 0 0;
  background-size: contain;
}

.kitchencolortabbuttonsstyling.kit_2e {
  background-image: url('../images/2E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_2f {
  background-image: url('../images/2F.jpg');
  background-position: 0 0;
  background-size: contain;
}

.kitchencolortabbuttonsstyling.kit_3a {
  background-image: url('../images/3A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_3b {
  background-image: url('../images/3B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_3c {
  background-image: url('../images/3C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_3d {
  background-image: url('../images/3D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_3e {
  background-image: url('../images/3E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_3f {
  background-image: url('../images/3F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4a {
  background-image: url('../images/4A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4b {
  background-image: url('../images/4B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4c {
  background-image: url('../images/4C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4d {
  background-image: url('../images/4D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4e {
  background-image: url('../images/4E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_4f {
  background-image: url('../images/4F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5a {
  background-image: url('../images/5A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5b {
  background-image: url('../images/5B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5c {
  background-image: url('../images/5C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5d {
  background-image: url('../images/5D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5e {
  background-image: url('../images/5E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_5f {
  background-image: url('../images/5F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6a {
  background-image: url('../images/6A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6b {
  background-image: url('../images/6B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6c {
  background-image: url('../images/6C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6d {
  background-image: url('../images/6D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6e {
  background-image: url('../images/6E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_6f {
  background-image: url('../images/6F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7a {
  background-image: url('../images/7A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7b {
  background-image: url('../images/7B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7c {
  background-image: url('../images/7C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7d {
  background-image: url('../images/7D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7e {
  background-image: url('../images/7E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_7f {
  background-image: url('../images/7F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8a {
  background-image: url('../images/8A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8a.w--current {
  border-style: solid;
  border-width: 4px;
}

.kitchencolortabbuttonsstyling.kit_8b {
  background-image: url('../images/8B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8c {
  background-image: url('../images/8C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8d {
  background-image: url('../images/8D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8e {
  background-image: url('../images/8E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_8f {
  background-image: url('../images/8F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9a {
  background-image: url('../images/9A.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9b {
  background-image: url('../images/9B.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9c {
  background-image: url('../images/9C.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9d {
  background-image: url('../images/9D.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9e {
  background-image: url('../images/9E.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9f {
  background-image: url('../images/9F.jpg');
  background-position: 0 0;
  background-size: auto;
}

.kitchencolortabbuttonsstyling.kit_9f.w--current {
  border-width: 2px;
  border-color: #de1624;
}

.kitchentypetab {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 60px;
  display: flex;
}

.kitchentypetabbuttonholder {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  border: 0 solid #fff;
  border-radius: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.kitchentypetabbutton_normal {
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px;
  justify-content: center;
  width: 80px;
  height: 25px;
  line-height: 0;
  display: flex;
}

.kitchentypetabbutton_normal.w--current {
  border-width: 2px;
  border-color: #de1624;
  justify-content: center;
  display: flex;
}

.kitchentypetabbutton_offroad {
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px;
  justify-content: center;
  width: 80px;
  height: 25px;
  display: flex;
}

.kitchentypetabbutton_offroad.w--current {
  border-width: 2px;
  border-color: #de1624;
}

.kitchentypetabbutton_normal_text {
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.kitchentypetabbutton_offroad_textl {
  color: #fff;
  line-height: 0;
}

.div-block-27 {
  justify-content: center;
  width: 80px;
  height: 20px;
  display: flex;
}

.text-block-26 {
  color: #fff;
  font-family: Bitter, serif;
  font-weight: 400;
  line-height: 25px;
}


.options-box.awning{
  margin-top: 20px;
  display: none;
}
.picture{
  display: flex;
  justify-content: flex-end;
}
#take-picture{ margin-right: 20px; }
.color-labels-inner{
  display: flex;
  flex-direction: column;
}
.color-label{
  border-top: 1px dotted #fff;
  text-align: center;
  padding: 2px 0 11px 0;
}
.color-label-value{
  font-size: 11px;
}
.options-box.bosspod_qpod_menu {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  border-width: 1px;
  flex-flow: wrap;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  width: 220px;
  height: 620px;
  margin-top: 0;
  margin-right: 0;
  position: static;
}

.options-container {
/*  background-image: linear-gradient(#777, #222 50%, #777);*/

  width: 100%;
  display: flex;
  padding: 5px 0;
  border-bottom: 1px dotted;
}
.optionsbuttonsholder .options-container:nth-child(odd){
}

.optionspalettebutton {
  /*border: 1px solid #fff;
  width: 150px;
  height: 27px; /* Changed from 32px */
}

.optionspalettebutton.name {
  -webkit-text-fill-color: inherit;
  /*background-image: linear-gradient(#777, #000 50%, #777); */
  background-clip: border-box;
  border-width: 1px;
  justify-content: flex-end;
  align-items: center;
  width: 77%;
  padding-right: 5px;
  display: flex;
  position: relative;
  border-right: 0;
}
.optionspalettebutton.price {
  justify-content: center;
  width: 23%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}
.optionspalettebutton.price .optionspalettetextstyling{
  font-size: 12px;
}
 .tooltip{
 position: absolute;
 right: 80%;
 background: #fff;
 color: #222;
 padding: 10px;
 z-index: 1;
}

.optionspalettebutton.name.totalpricefield {
  width: 40%;
}

.optionspalettebutton.price.finalpricefield {

  width: 60%;;
}

.optionspalettetextstyling {
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding-right: 5px;
}

.totalpricecontainer .optionspalettetextstyling{
  font-size: 15px;

}

.options-heading {
  color: #fff;
  background-color: red;
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  padding-left: 10px;
  align-items: center;
  height: 35px;
  font-size: 15px;
  font-weight: 700;
  line-height: 0;
  display: flex;
  position: relative;
}

.options-sub-heading{
   display: flex;
   justify-content: center;
   width: 100%;
   color: #fff;
   font-size: 12px;
   height: 16px;
   margin-top: 8px;;
}
/*
@media(max-width:640px){
.options-heading {
  cursor: pointer;
}
.options-heading::after {
      content: '';
    position: absolute;
    right: 10px;
 
    transform: translateY(-50%) rotate(0deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
   transform: translateY(0%) rotate(-135deg);
  }
  
.options-heading.collapsed::after {
  transform: translateY(0%) rotate(45deg);
   top: 10px;
}
}
*/
.options-heading.selectyourpodtype {
  border-radius: 0;
  width: 204px;
}



.all-options {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  max-height: calc(100vh - 110px);
  background: #0e0e0e;
}

.totalpricecontainer {
  align-items: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  border-top: 2px solid #fff;
  border-radius: 0 0 5px 5px;
}

.pod-_details_container {
    display: flex;
    width: 50%;
    flex-direction: column;
    padding-left: 10px;
    gap: 4px;
}

.pod_details_individual_items {
  color: #fff;
  text-align: left;
  align-self: auto;
  align-items: center;
  justify-content: left;
  padding-left: 10px;
  width: 100px;
  height: 25px;
  font-size: 12px;
  line-height: 0;
  display: flex;
}
.pod-_details_container .inclusions{
  font-size: 12px;
}
.pod-_details_container .inclusions .inc{
  text-decoration: underline;
  font-size: 14px;
}
.inclusions.base-price{
      line-height: 17px;
    font-size: 14px;
}
.pod_details_individual_items.header_container {
  border-width: 1px;
  border-radius: 1px;
  justify-content: center;
  height: 35px;
  font-size: 15px;
}

.pod_details_individual_items.bosspoddefaults {
  text-align: center;
  border-width: 1px;
  justify-content: left;
}

.pod_details_individual_items.base-price {
  flex-flow: column;
  align-self: center;
  height: 34px;
  margin-top: 2px;
  font-size: 20px;
}

.text-block-27 {
  text-align: center;
  flex-flow: column;
  flex: none;
  order: 1;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  position: relative;
}

.text-block-27.bosspod_default_text {
  text-decoration: underline;
}

.text-block-27.bp-amount {
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
}

.text-block-27.bp-label {
  align-self: center;
  margin-top: 8px;
  font-size: 14px;
}

.text-block-28 {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 15px;
}

.pods-includes.select-pod {
  width: 100%;
  display: flex;
  padding-bottom: 3px;
  overflow-y: auto;
  max-height: calc(100vh - 104px);
}

.select-pod-heading {
  order: -1;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 40px;
  display: flex;
}


.optionsbuttonsholder.bosspoditems {
  border: 1px #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 98%;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow-x: visible;
}

.optionsbuttonsholder.qpod_items {
  border: 1px solid #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.opod_option_heading {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px;
  width: 99%;
  height: 25px;
  display: flex;
}

.qpod_options_button_holder {
  width: 100%;
  height: auto;
  overflow: auto;
}

.text-block-29 {
  color: #fff;
  padding-left: 5px;
}

.div-block-31 {
  width: 250px;
}

#AwningONOF {
  background-image: linear-gradient(#777, #000 50%, #777);
  border: 1px solid #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 30px;
  display: flex;
}

.red-button {
   background-color: #de1624;
    border-radius: 7px;
    margin: 5px 0 10px;
    text-align: center;
    font-size: 16px;
    padding: 10px 15px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

/* Pulsing animation for Generate Quote button */
#gen-free-quote {
    animation: generate-quote-pulse 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes generate-quote-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(222, 22, 36, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(222, 22, 36, 0);
    }
}

/* Pause animation on hover */
#gen-free-quote:hover {
    animation-play-state: paused;
}

.red-button.small{
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 3px;
}
.red-switch-btns{
  display: flex;
  justify-content: center;
  padding: 5px 0 0 0;
}
.red-switch-btns.small{
  padding-top: 0;
}
.red-switch-btns.verticle{
  flex-direction: column;
      width: 80%;
    justify-content: center;
    margin: 3px 10% 10px;
}

.red-switch{
  background-color: transparent;
  border: 2px solid #de1624;
    margin: 5px 0 10px;
    text-align: center;
    font-size: 16px;
    padding: 5px 10px;
    cursor: pointer;
}
.red-switch-btns.small .red-switch{

  border-color: #7e696a;
}
.red-switch-btns.verticle .red-switch{
  margin: 0;
}
.red-switch.active{
  background-color: #de1624;
  font-weight: 700;
}

.red-switch-btns.small .red-switch.active{
  background: #7e696a;
}

.red-switch-btns .red-switch:first-child{
  border-radius: 10px 0 0 10px;
}

.red-switch-btns .red-switch:last-child{
  border-radius: 0 10px 10px 0;
}
.red-switch-btns.verticle .red-switch:first-child{
  border-radius: 5px 5px 0 0;
}

.red-switch-btns.verticle .red-switch:last-child{
  border-radius: 0 0 5px 5px;
}
.red-switch-btns.verticle .red-switch:not(:last-child){
  border-bottom: 0;
}
.red-switch.small{
    font-size: 12px;
    padding: 2px 7px;
}
.red-switch.inactive{
  background-color: white;
  color: #de1624;
}
.free-quote-button-text {
  color: #fff;
}


.fridge-qpod{
  display: none;
}




.messagebox {
  background-color: red;
  flex: none;
  width: 420px;
  height: 100px;
  position: absolute;
  display: none;
}

.messagebox.options-heading {
  order: 1;
  margin-top: 40px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
}

.text-block-31 {
  font-size: 12px;
}

.text-block-32 {
  justify-content: center;
  align-items: center;
  width: 450px;
  font-weight: 400;
  line-height: 16px;
  display: flex;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .button.qpod_sel {
    left: 20%;
  }

  .button.bosspod_sel {
    right: 20%;
  }

  .kitchenlayoutright {
    align-content: center;
  }
}

@media screen and (max-width: 767px) {
  .button.qpod_sel {
    left: 22%;
  }

  .button.bosspod_sel {
    right: 22%;
  }
}

@media screen and (max-width: 479px) {
  .button.qpod_sel {
    left: 10%;
  }

  .button.bosspod_sel {
    right: 10%;
  }

  .text-block.qpod_text, .text-block.boss_pod_text {
    font-size: 15px;
    left: -11%;
  }
}

.sidewindowtoggle.add-on-opt{
  cursor: pointer;
}
#view-picture{ display: none;}

.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #000000d1;
}
#screenshot-picture{ display: none; }
.popup-header{
    padding: 10px;
    color: #000;
    background: #fff;
    border-bottom: 2px solid;
    font-size: 16px;
    line-height: 30px;
}
.popup-header .red-button{
  display: inline-block;
  padding: 3px 10px;
}
.popup-content {
  position: relative;
  margin: 2% auto;
  width: 90%;
  height: 90%;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #fff;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 20px;
  color: red;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  display: none;
}

.close-button:hover {
  color: #999;
}

#pictures-area {
 width: 100%;
    height: calc(100% - 50px);
    margin-top: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pictures-area img { box-shadow: 0 0 10px #000;}

@media(orientation: landscape) {
  #pictures-area img {
    height: 80%;
  }
}
@media(orientation: portrait) {
  #pictures-area img {
    width: 90%;
  }
} 

#tooltip-box {
  position: fixed;
  background: #ddd;
  color: #000;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 4; /* Show behind hovered elements */
  display: none;
  pointer-events: none;
  max-width: 500px;
  word-wrap: break-word;
}
#screen-size{
   position: fixed;
   z-index: 1;
   background: transparent;
   color: #fff;
   top:8px;
   right:60px;
}



    .generate-free-quote, #Bosspod_Sel, #Qpod_Sel{
      cursor: pointer;
    }
.hide{
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Desktop-only and mobile-only utility classes */
/* Default desktop behavior: show desktop content, hide mobile content */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

.mobile-controls{
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: auto;
}

@media (max-width: 640px) or (max-height: 640px) {

  #loading-wp{
    font-size: 16px;
    line-height: 22px;
    padding-top: 5px;
  }
  
  .loading-message {
    font-size: 18px;
    margin-bottom: 20px;
    max-width: 90%;
    padding: 0 15px;
  }
  
  /* Mobile styles for loading progress */
  .loading-progress-container {
    margin: 20px 0;
    width: 80%; /* Set to 80% of screen width for mobile portrait */
  }
  
  .loading-pod-wrapper {
    width: 80%; /* Changed from fixed 200px to 100% of container */
    height: auto; /* Changed from fixed 130px to auto height */
    max-width: 300px; /* Added max-width for larger screens */
    aspect-ratio: 3/2; /* Maintain aspect ratio (600x400 desktop ratio) */
    border: 2px solid #de1624; /* Moved border here for mobile */
    border-radius: 8px;
    padding: 15px;
  }
  
  .loading-percentage-text {
    font-size: 18px;
    top: 10px; /* Changed to match desktop positioning */
    left: 0px; /* Changed to match desktop positioning */
  }
  
  .loading-indicator {
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    padding: 6px 12px;
  }
  
  /* Hide desktop special note on mobile */
  .colorpaletteholder .special-note {
    display: none;
  }
  
  /* Show mobile special note on mobile */
  .special-note.mobile-only {
    display: block;
    font-size: 12px;
    padding: 6px 8px;
    margin: 3px 5px;
    animation: special-note-pulse 4s ease-in-out infinite;
    order: -1;
    position: relative;
    z-index: 5;
  }
  
  .left-palettes-holder {
    display: flex;
    flex-direction: column;
  }
  
  .special-note {
    order: -1;
  }
  
  .totalpricecontainer{
    flex-direction: row;
    justify-content: space-around;
  }
  .options-container.finalpricefieldholder{
    width: 55%;
  }
  .optionspalettebutton.name.totalpricefield{
    width: 50%;
  }
  .options-heading {
    height: 19px;
    font-size: 12px;
  }
  .options-container{
    border-bottom: none;
    padding: 2px;
  }
  .builder-header-right{
    font-size: 12px;
    line-height: 16px;
  }
  .wotpod-title .builder{
    font-size: 15px;
    margin-top: 0;
  }
  .pod-_details_container, .optionsbuttonsholder.bosspoditems, .qpod_options_button_holder{
    display: grid;
    padding-left: 10px;
    font-size: 11px;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    padding: 5px;
  }
  .pod-_details_container .inclusions, .optionspalettetextstyling{
    font-size: 11px;
  }
  .opod_option_heading{
    font-size: 11px;
    height: 16px;
    line-height: 14px;
  }
.red-button{
  padding: 5px;
}

.tabs-menu{
  margin-bottom: 3px;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}
.tabs-menu.tabmenukitchen {
  height: 160px;
}

  .color-label{
    display: flex;
    padding: 4px;
    gap: 10px;
    background: #000;
  }

  /* Hide door open/close toggle on mobile since it's controlled automatically via tabs */
  .door-open-close {
    display: none;
  }

  /* Hide desktop-only content on mobile */
  .desktop-only {
    display: none;
  }

  /* Show mobile-only content on mobile */
  .mobile-only {
    display: block;
  }

}

@media (max-height: 640px) and (orientation: landscape) {
  .builder-header-right {
    align-items: flex-start;
    width: 22vw;
    margin-top: 10px;
    margin-left: 4px;
}

}

/* Mobile-only special note - hidden on desktop */
.special-note.mobile-only {
  display: none;
}

@media (max-width: 640px) or (max-height: 640px) {

  #loading-wp{
    font-size: 16px;
    line-height: 22px;
  }
  
  .loading-message {
    font-size: 18px;
    margin-bottom: 20px;
    max-width: 90%;
    padding: 0 15px;
  }
  
  /* Mobile styles for loading progress */
  .loading-progress-container {
    margin: 20px 0;
  }
  
  .loading-pod-wrapper {
    width: 80%; /* Changed from fixed 200px to 100% of container */
    height: auto; /* Changed from fixed 130px to auto height */
    max-width: 300px; /* Added max-width for larger screens */
    aspect-ratio: 3/2; /* Maintain aspect ratio (600x400 desktop ratio) */
    border: 2px solid #de1624; /* Moved border here for mobile */
    border-radius: 8px;
    padding: 15px;
  }
  
  .loading-indicator {
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    padding: 6px 12px;
  }
  
  /* Hide desktop special note on mobile */
  .colorpaletteholder .special-note {
    display: none;
  }
  
  /* Show mobile special note on mobile */
  .special-note.mobile-only {
    display: block;
    font-size: 12px;
    padding: 6px 8px;
    margin: 3px 5px;
    animation: special-note-pulse 4s ease-in-out infinite;
    order: -1;
    position: relative;
    z-index: 5;
  }
}

/* Name input section styling */
.loading-name-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px; /* 20px below the loading-pod-wrapper */
  width: 100%;
  max-width: 400px;
}

.loading-name-label {
  font-size: 18px;
  font-weight: 500;
  color: #de1624; /* Changed to red color */
  margin-bottom: 3px; /* Reduced margin to be closer */
  text-align: left; /* Changed to left alignment */
  align-self: flex-start; /* Align to the left side of the container */
  margin-left: 2px; /* Small left margin for alignment */
}

.input-with-button {
  position: relative;
  display: inline-block;
  width: 100%;

}

.loading-name-input {
  padding: 12px 60px 12px 16px; /* Extra padding on right for button */
  border: 2px solid #de1624;
  border-radius: 8px;
  font-size: 18px;
  font-family: inherit;
  background: white;
  color: #333;
  width: 100%;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.loading-name-input:focus {
  border-color: #b31217;
  box-shadow: 0 0 5px rgba(222, 22, 36, 0.3);
}

.loading-arrow-button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: #de1624;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: white;
  font-size: 20px;
  font-weight: 500;
  min-width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-arrow-button:hover {
  background: #b31217;
}

.loading-arrow-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.loading-arrow-button.disabled:hover {
  background: #de1624; /* Keep original color when disabled */
}

/* Desktop orientation hint */
.desktop-hint {
  font-size: 16px;
  color: #000;
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  opacity: 0.7;
  display: none;
}

/* Mobile responsive styling */
@media (max-width: 640px) or (max-height: 640px) {
  .loading-name-section {
    margin-top: 30px; /* Slightly less margin for mobile */
  }
  
  .loading-name-label {
    font-size: 16px;
    margin-left: 1px; /* Smaller left margin for mobile */
  }
  
  .loading-name-input {
    padding: 10px 50px 10px 12px; /* Smaller padding for mobile */
    font-size: 14px;
  }
  
  .loading-arrow-button {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 40px;
    height: 32px;
  }

  .desktop-hint {
    display: block;
    font-size: 16px;
    margin-top: 15px;
  }
}

/* Top promotion message styling */
.loading-message-bottom {
  position: static;
  width: 100%;
  font-size: 20px;
  color: #222;
  text-align: center;
  font-weight: 400;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  max-width: 90%;
  z-index: 11;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.loading-message-bottom:hover {
  opacity: 1;
}

/* Mobile responsive for top message */
@media (max-width: 640px) or (max-height: 640px) {
  .loading-message-bottom {
    font-size: 16px;
    line-height: 1.3;
    padding: 0;
    margin-bottom: 15px;
    max-width: 95%;
  }
}

.drag-rotate-hint {
  display: flex;
  align-items: center;
  color: #de1624;
  font-size: 15px;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 8px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  user-select: none;
}

@media (max-width: 640px), (max-height: 640px) {
  .drag-rotate-hint {
    font-size: 13px;
    margin-bottom: 4px;
  }
}

.reset-view-button {
  display: none; /* Hidden for now */
  background-color: #de1624;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.3s ease;
}

.reset-view-button:hover {
  background-color: #b31217;
}

@media (max-width: 640px), (max-height: 640px) {
  .reset-view-button {
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 4px;
  }
}
#screenshot-loading-message{
  display: flex;
      align-items: center;
      justify-content: center;
      background: rgb(240, 240, 240);
      border: 2px dashed rgb(204, 204, 204);
      padding: 20px;
      text-align: center;
      font-size: 14px;
      color: rgb(102, 102, 102);
      font-weight: bold;
}