html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

@font-face {
  font-family: "Dancing";
  src: url(../fonts/DancingScript-Bold.ttf);
}

.left-palettes-holder, .right_panel_big_container,.colorpaletteholder,#screen-size{visibility: hidden;}

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{
  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{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 30px;
  background: #ffffff;
  z-index: 10;
  padding-top: 20px;
}
.landing-error-message{
  color: blue;
}
#user-landing, .wot-popup{
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fcf9f1;
  z-index: 10;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

/* User Landing Background Grid */
#user-landing {
  position: relative;
}

.landing-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 1;
}

.bg-grid-item {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.bg-blue-bosspod {
  background-image: url('../assets-static/img/bg/blue-bosspod-700.png');
}

.bg-qpod {
  background-image: url('../assets-static/img/bg/qpod-700.png');
}

.bg-inside {
  background-image: url('../assets-static/img/bg/indide-700.png');
}

.bg-kitchen {
  background-image: url('../assets-static/img/bg/kitchen-700.png');
}

#user-landing .landing-form-container {
  position: relative;
  z-index: 2;
}

/* Mobile Background Grid - Single Column */
@media (max-width: 768px) {
  .landing-bg-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0;
  }
  
  .bg-grid-item {
    opacity: 0.4;
    background-size: cover;
    background-position: center;
  }
  
  /* Create a subtle gradient overlay for each mobile background */
  .bg-grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 20%, rgba(252, 249, 241, 0.3) 80%);
    z-index: 1;
  }
}

/* Extra small mobile - portrait phones */
@media (max-width: 480px) {
  .bg-grid-item {
    opacity: 0.25;
  }
  
  .bg-grid-item::before {
    background: linear-gradient(135deg, transparent 10%, rgba(252, 249, 241, 0.5) 70%);
  }
}

/* Hide left/right split - center everything */
.landing-left {
  display: none;
}

.landing-banner {
  display: none;
}

.banner-placeholder {
  display: none;
}

.landing-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: transparent;
}
.wot-popup-container{
 position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
  display: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modern form container */
.landing-form-container {
  max-width: 700px;
  width: 95%;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 10px 20px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  color: #222;
}
    .landing-form-container h1{
      text-align: center;
      font-family: 'Dancing', cursive;
      color: #de1624;
      font-size: 40px;
      margin-top: 30px;
    }
/* Logo styling */
.landing-logo {
  width: 220px;
  height: auto;
  margin: 0 auto 0px;
  display: block;
}

/* Welcome text */
.landing-welcome {
  text-align: center;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.landing-subtitle {
  text-align: center;
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 32px;
  line-height: 1.4;
}

/* Modern form styling */
.landing-form-group {
  margin-bottom: 24px;
  position: relative;
}

.landing-form-label {
  display: block;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.landing-form-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 16px;
  color: #2c3e50;
  background: #f8f9fa;
  transition: all 0.3s ease;
  outline: none;
  box-sizing: border-box;
}

.landing-form-input:focus {
  border-color: #de1624;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(222, 22, 36, 0.1);
  transform: translateY(-2px);
}

.landing-form-input::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

/* Modern button */
.landing-enter-btn {
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #de1624, #ff4757);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.landing-enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 24px rgba(222, 22, 36, 0.3),
    0 6px 12px rgba(222, 22, 36, 0.2);
}

.landing-enter-btn:active {
  transform: translateY(-1px);
}

.landing-enter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.landing-enter-btn:hover::before {
  left: 100%;
}

/* Desktop hint */
.landing-desktop-hint {
  text-align: center;
  color: #adb5bd;
  font-size: 18px;
  margin-top: 20px;
  font-style: italic;
}


.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('../assets-static/img/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('../assets-static/img/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('../assets-static/img/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('../assets-static/img/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('../assets-static/img/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 #222;
  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: 50px;
  height: 50px;
  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: 48px;
  height: 48px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tabs-menu {
  grid-column-gap: 3px;
  grid-row-gap: 4px;
  border: 0 solid #000;
  border-radius: 0;
  display: flex;
  overflow-x: 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('../assets-static/img/866-Pure-Black.png');
  background-position: 0 0;
  background-size: contain;
}

.others_color_palette_tabs_styling.other-color-palette-metal {
  background-image: url('../assets-static/img/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: 50px;
  height: 50px;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}
.color-picker-content-kitchen{
display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    justify-items: center;
    margin-bottom: 15px;
}
.color-picker-content-kitchen a{
  width: 120px; height: 90px; display: flex;
  cursor: pointer;
  background-size: cover;
  border-radius: 5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid transparent;
}

.color-picker-content-kitchen a:hover,
.color-picker-content-kitchen a.active {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 3px 3px 8px rgba(255, 0, 0, 1), -2px -2px 4px rgba(255, 0, 0, 0.8);
  border-color: #de1624;
}
#Kit_1C {
  background-image: url('../assets-static/img/1C.jpg');
  background-position: 0 0;
  background-size: auto;
  padding-top: 0;
  padding-bottom: 0;
}

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

#Kit_1D {
  background-image: url('../assets-static/img/1D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_1E {
  background-image: url('../assets-static/img/1E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_1F {
  background-image: url('../assets-static/img/1F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_2A {
  background-image: url('../assets-static/img/2A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_2B {
  background-image: url('../assets-static/img/2B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_2C {
  background-image: url('../assets-static/img/2C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_2D {
  background-image: url('../assets-static/img/2D.jpg');
  background-position: 0 0;
  background-size: contain;
}

#Kit_2E {
  background-image: url('../assets-static/img/2E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_2F {
  background-image: url('../assets-static/img/2F.jpg');
  background-position: 0 0;
  background-size: contain;
}

#Kit_3A {
  background-image: url('../assets-static/img/3A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_3B {
  background-image: url('../assets-static/img/3B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_3C {
  background-image: url('../assets-static/img/3C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_3D {
  background-image: url('../assets-static/img/3D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_3E {
  background-image: url('../assets-static/img/3E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_3F {
  background-image: url('../assets-static/img/3F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4A {
  background-image: url('../assets-static/img/4A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4B {
  background-image: url('../assets-static/img/4B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4C {
  background-image: url('../assets-static/img/4C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4D {
  background-image: url('../assets-static/img/4D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4E {
  background-image: url('../assets-static/img/4E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_4F {
  background-image: url('../assets-static/img/4F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5A {
  background-image: url('../assets-static/img/5A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5B {
  background-image: url('../assets-static/img/5B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5C {
  background-image: url('../assets-static/img/5C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5D {
  background-image: url('../assets-static/img/5D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5E {
  background-image: url('../assets-static/img/5E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_5F {
  background-image: url('../assets-static/img/5F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6A {
  background-image: url('../assets-static/img/6A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6B {
  background-image: url('../assets-static/img/6B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6C {
  background-image: url('../assets-static/img/6C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6D {
  background-image: url('../assets-static/img/6D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6E {
  background-image: url('../assets-static/img/6E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_6F {
  background-image: url('../assets-static/img/6F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7A {
  background-image: url('../assets-static/img/7A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7B {
  background-image: url('../assets-static/img/7B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7C {
  background-image: url('../assets-static/img/7C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7D {
  background-image: url('../assets-static/img/7D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7E {
  background-image: url('../assets-static/img/7E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_7F {
  background-image: url('../assets-static/img/7F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8A {
  background-image: url('../assets-static/img/8A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8A.w--current {
  border-style: solid;
  border-width: 4px;
}

#Kit_8B {
  background-image: url('../assets-static/img/8B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8C {
  background-image: url('../assets-static/img/8C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8D {
  background-image: url('../assets-static/img/8D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8E {
  background-image: url('../assets-static/img/8E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_8F {
  background-image: url('../assets-static/img/8F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9A {
  background-image: url('../assets-static/img/9A.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9B {
  background-image: url('../assets-static/img/9B.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9C {
  background-image: url('../assets-static/img/9C.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9D {
  background-image: url('../assets-static/img/9D.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9E {
  background-image: url('../assets-static/img/9E.jpg');
  background-position: 0 0;
  background-size: auto;
}

#Kit_9F {
  background-image: url('../assets-static/img/9F.jpg');
  background-position: 0 0;
  background-size: auto;
}

#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;
  flex-direction: column;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dotted #666;
}
.color-label-value{
  text-align: left;
  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;
}

.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;;
}
.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;
}




.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;}

 

#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;
}



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


/* 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;
}


/* 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;
}


.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;
}


.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;
}

#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;
}

/* Color Picker Panel */
.color-picker-panel {
  position: absolute;
  left: 160px;
  bottom: 0;
  width: 400px;
  height: 90vh;
  background-color: #eee;
  z-index: 5;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  display: none;
  flex-direction: column;
  border-left: 1px solid #ccc;
}

.color-picker-panel.open {
  display: flex;
}

.color-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #d0d0d0;
  border-bottom: 1px solid #ccc;
}

.color-picker-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.color-picker-close {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.color-picker-close:hover {
  background-color: #bbb;
  color: #333;
}

.color-picker-content {
  flex: 1;
  padding: 5px;
  overflow-y: auto;
}

.color-picker-content-kitchen {
  flex: 1;
  padding: 5px;
  overflow-y: auto;
}

/* Customize Button Styles */
.customize-btn {
  background-color: #de1624;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 7px 0px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin: 5px 0;
  width: 130px;
  transition: background-color 0.2s ease;
}

.customize-btn:hover {
  background-color: #b31217;
}

/* Update color label layout to accommodate button */


.color-label:last-child {
  border-bottom: none;
}

.color-label-left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.color-label-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
}

.color-label-name {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

.color-label-value {
  font-size: 12px;
  color: #ccc;
}

/* Color Picker Content Styles */
.color-picker-container {
  width: 100%;
  height: 100%;
}

.color-section {
  margin-bottom: 15px;
}

.color-picker-content .section-title {
  text-align: left;
  margin: 10px 0 7px 0;
  color: white;
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  padding: 10px 15px;
  border: 2px solid #333;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(50, 50, 50, 0.8));
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.color-picker-content .color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  justify-items: center;
  margin-bottom: 15px;
}

.color-picker-content .color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  padding: 2px;
  transition: transform 0.2s ease;
  cursor: pointer;
  border-radius: 5px;
  min-height: 110px;
}

.color-picker-content .color-swatch:hover,
.color-picker-content .color-swatch.active {
  transform: translateY(-3px);
}

.color-picker-content .swatch-image {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 400/310;
  object-fit: cover;
  transition: transform 0.2s ease, filter 0.2s ease;
  margin-bottom: 5px;
  border-radius: 3px;
}

.color-picker-content .color-swatch:hover .swatch-image,
.color-picker-content .color-swatch.active .swatch-image {
  transform: scale(1.05);
  filter: drop-shadow(3px 3px 8px rgba(255, 0, 0, 1)) drop-shadow(-2px -2px 4px rgba(255, 0, 0, 0.8));
}

.color-picker-content .swatch-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(50, 50, 50, 0.8));
  padding: 3px 6px;
  border-radius: 4px;
  width: 100%;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  box-sizing: border-box;
}

.loading {
  text-align: center;
  padding: 50px;
  font-size: 16px;
  color: #666;
}

/* Dynamic Horizontal Color Tiles */
.dynamic-color-tiles {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.color-category {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-category-heading {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  padding: 5px 10px;
  background: linear-gradient(135deg, #444, #222);
  border-radius: 5px;
  border: 1px solid #555;
}

.color-tiles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-tile {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.color-tile:hover {
  transform: scale(1.1);
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.color-tile.active {
  border-color: #ff4444;
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
  transform: scale(1.05);
}

.color-tile.active:hover {
  transform: scale(1.15);
}

.color-tile::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 20;
}

.color-tile:hover::after {
  opacity: 1;
}


.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#preparing-msg{
  z-index: -2;
}

#bottom-cover{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: #131313;
    z-index: 10000;
  }


  

  .mobile-controller-box{
    position: absolute;
    bottom: 0;
    right: 0;
  } 
  
  .mobile-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #000;
    border-top: 1px solid #fff;
    gap: 0;
}

.mobile-tabs .tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 40px;
    color: #fff;
    background: #666;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    margin: 0;
    border: none;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Create arrow shape */
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%);
    margin-right: -15px;
    z-index: 1;
}

.mobile-tabs .tab-button:first-child {
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    margin-left: 0;
}

.mobile-tabs .tab-button:last-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15px 50%);
    margin-right: 0;
}

.mobile-tabs .tab-button.active {
    background: #de1624;
    color: #fff;
    z-index: 3;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(222, 22, 36, 0.4);
}

.mobile-tabs .tab-button:not(.active):hover {
    background: #888;
    z-index: 2;
}

.mobile-tabs .tab-button .step-number {
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 1px;
    color: inherit;
    opacity: 0.9;
}

.mobile-tabs .tab-button .step-text {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
    word-break: break-word;
    max-width: 100%;
}

/* Remove progress indicator as arrows show progression */
.mobile-tabs::before {
    display: none;
}

/* Guest checkout popup styles moved to generate-popup.css */

.options-container.finalpricefieldholder{
  display: none;
}
#colours-guide{
position: absolute;
    right: 0;
    top: 10px;
    background: #de1624;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}

#colours-guide svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Colours Guide Popup Styles */
.wot-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
  display: none;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(30, 30, 30, 0.3));
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
}
.close-popup-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748B;
    z-index: 10;
}
.landing-form-container .close-popup-btn{
      top: -25px;
    right: -8px;
    background: #fff;
    color: #222;
}
.landing-form-container ol{
  padding-left: 25px;
   font-size: 15px;
  line-height: 18px;
}
.landing-form-container ol li{
  margin-bottom: 15px;
}
.landing-form-container p{
  font-size: 15px;
  line-height: 18px;
}
#start-building-btn{
  border: 0;
  padding: 10px 15px;
}

.wot-popup-content {
  position: relative;
  width: 1000px;
  height: auto;
  aspect-ratio: 16/9; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 
    0 32px 64px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (orientation: landscape){
  .wot-popup-content {
    max-height: 100%;
  }
}
@media (orientation: portrait){
  .wot-popup-content {
    max-width: 100%;
  }
}
.wot-popup-content .close-popup-btn{
    top: 0px;
    right: 0px;
    background: red;
    cursor: pointer;
    color: #fff;
    border-radius: 0;
}
.wot-popup-content iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wot-popup-header {
  padding: 24px 24px 20px 24px;
  text-align: center;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wot-popup-header span:first-child {
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  flex: 1;
}

.wot-popup-header .close-button {
  background: #de1624;
  color: white;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(222, 22, 36, 0.3);
}

.wot-popup-header .close-button:hover {
  background: #c01221;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(222, 22, 36, 0.4);
}

.wot-popup-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  color: #374151;
  line-height: 1.6;
}

.wot-popup-body p {
  margin: 0 0 16px 0;
  font-size: 16px;
}