#room-painter{font-family:sans-serif;text-align:center}.room-tabs{display:flex;justify-content:center;align-items:flex-start;gap:20px}.category-block{display:flex;justify-content:center;align-items:flex-start;gap:30px;flex-wrap:wrap}.color-categories{text-align:center}.color-segment-container{display:flex;flex-direction:column;justify-content:flex-start;cursor:pointer;text-align:center}.color-segment{display:flex;margin-bottom:10px}.color-segment-container .color-segment .color-box{flex:1;height:30px;width:35px}.color-segment-container .color-segment .color-box.first{border-radius:6px 0 0 6px}.color-segment-container .color-segment .color-box.third{border-radius:0 6px 6px 0}.color-segment-container .color-segment:hover .color-box{transform:scale(1.2);transition:transform 0.2s ease-in}.room-tabs button,.color-categories button{padding:10px 15px;margin:5px;cursor:pointer;border:none;border-radius:6px;transition:background 0.3s;color:#000;background:#fff0;min-height:50px}.room-tabs .active,.color-categories button:hover{background:#f3f3f3}.room-preview{position:relative;width:100%;background:#fff;transition:background-color 0.4s ease}.room-preview .room-bg{position:relative;display:flex;align-items:center;justify-content:center}.room-preview .room-bg .painter-container{position:absolute;top:30%;left:68%;display:flex}.room-preview .room-bg .painter-container .painter-wrapper{padding:24px 16px;border-radius:8px 0 0 8px;display:flex;justify-content:center;align-items:center;min-height:100%}.room-preview .room-bg .painter-container .painter-code{padding:2px 8px;border-radius:0 8px 8px 0;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:138px}.room-preview .room-bg .painter-container .painter-code-title{font-size:14px;font-weight:400}.room-preview .room-bg .painter-container .painter-code-description{font-size:12px;font-weight:400}.painter-container #painter{height:16px;position:absolute;top:35%;left:40%;z-index:9}.painter-relative{position:relative}.room-image{max-height:100%}.color-swatches{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center}h6.cs-h6{color:#000;font-size:12px;font-weight:400;line-height:1em}.color-swatch{width:100px;height:50px;cursor:pointer;transition:transform 0.2s}.color-swatch:hover{transform:scale(1.2)}.color-ui{display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative}.color-segment-row{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:nowrap;z-index:1;width:100%;padding:10px;overflow-x:scroll}.color-segment{cursor:pointer;text-align:center}.color-label{font-size:11px;font-weight:500}.color-swatches-row{position:relative;min-height:300px;width:100%}.color-swatches{display:none;flex-wrap:wrap;gap:6px;position:absolute;left:0;top:0;width:100%}.color-swatch{width:40px;height:40px;border-radius:4px;cursor:pointer}@media screen and (max-width:767.9px){.room-image{height:450px}.color-segment-row{justify-content:flex-start}}@media screen and (max-width:479px){.room-tabs{gap:10px;min-height:130px}.room-preview .room-bg .painter-container{top:-15%;left:29%}.room-image{height:280px}.color-swatches-row{min-height:600px}}