@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
.croppr-container *{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.croppr-container img{vertical-align:middle;max-width:100%}.croppr{position:relative;display:inline-block}.croppr-overlay{background:rgba(0,0,0,.5);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;cursor:crosshair}.croppr-region{border:1px dashed rgba(0,0,0,.5);position:absolute;z-index:3;cursor:move;top:0}.croppr-imageClipped{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.croppr-handle{border:1px solid #000;background-color:#fff;width:10px;height:10px;position:absolute;z-index:4;top:0}.com-wrapper *{box-sizing:border-box}.com-wrapper{width:100%;height:90vh;background-color:var(--bg-color);padding:var(--main-padding);max-width:1512px;display:flex;align-items:flex-start;border:1px solid var(--border-gray);border-radius:var(--radius-big)}.com-wrapper .croppr-container *{max-height:90vh}@media screen and (max-width: 1700px){.com-wrapper{padding:calc(2*var(--main-padding))}}@media screen and (max-width: 800px){.com-wrapper{padding:0;border:0;border-radius:0px}}.com-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000;overflow-y:scroll}@media(max-height: 800px){.com-overlay{align-items:flex-start}}.com-wrapper .menu,.com-wrapper .croppr-submenu{overflow:auto}.com-wrapper .main-grid,.material-editor-content{display:flex;width:100%;height:100%;max-height:100%;gap:var(--main-padding)}.com-wrapper .material-editor-content{background-color:#fefefe;position:relative;justify-content:space-between;height:100%}.com-wrapper .croppr-submenu{margin:0}.com-wrapper .menu,.com-wrapper .croppr-submenu{background-color:#fff;display:flex;flex-direction:column;min-width:440px;box-shadow:0 2px 7px 0 rgba(0,0,0,.1);max-height:100% !important;border-radius:var(--radius-big);border:1px solid var(--border-gray)}.com-wrapper .exit-com-wrapper,.com-wrapper .back-button-wrapper{display:flex}.com-wrapper .back-button-wrapper,.com-wrapper .back-com-wrapper{width:100%}.com-wrapper .menu-header-wrapper,.com-wrapper .menu-footer-wrapper{display:flex;justify-content:flex-start;align-items:center;gap:var(--main-margin)}.com-wrapper .menu-footer-wrapper{width:100%}.com-wrapper .menu-header-wrapper.menu-header-wrapper--space-between{justify-content:space-between}.com-wrapper #material-type-container,.com-wrapper #shader-type-container,.com-wrapper #mapping-strategies-container{display:flex;flex-wrap:wrap}.com-wrapper .back-com-wrapper.hidden{display:none}.com-wrapper .menu-header{border-bottom:1px dashed var(--border-gray);padding:var(--main-padding) var(--big-padding) var(--main-padding)}.com-wrapper .menu-inner{padding:var(--main-padding) var(--big-padding);display:flex;flex-direction:column;justify-content:space-between}.com-wrapper .menu-inner-material-editor{padding:var(--main-padding) var(--big-padding)}.com-wrapper .menu-footer{border-top:1px dashed var(--border-gray);padding:var(--main-padding) var(--big-padding) var(--main-padding);margin-top:auto;display:flex;gap:var(--main-margin);position:sticky;bottom:0;background-color:#fff}.com-wrapper h1,.com-wrapper h2,.com-wrapper h3,.com-wrapper h4,.com-wrapper h5,.com-wrapper h6,.com-wrapper p,.com-wrapper label,.com-wrapper span,.com-wrapper input,.com-wrapper select,.com-wrapper *{color:var(--content-primary);font-family:"Inter",sans-serif;font-optical-sizing:auto;font-style:normal}.com-wrapper #pattern-finder-description-wrapper{display:flex;gap:10px}.com-wrapper .menu h1,.com-wrapper .croppr-submenu h1{margin:0;text-align:left;font-size:var(--h1-desktop-font-size-alternative);line-height:var(--h1-desktop-line-height);font-weight:var(--heading-font-weight);letter-spacing:var(--letter-spacing)}.com-wrapper .croppr-submenu h2{margin:0;text-align:left;font-weight:var(--heading-font-weight);font-size:var(--h1-desktop-font-size-alternative)}.com-wrapper .menu h2{font-size:var(--h2-desktop-font-size);line-height:var(--h2-desktop-line-height);font-weight:var(--heading-font-weight);letter-spacing:var(--letter-spacing)}.com-wrapper h3,.com-wrapper .menu h3{font-size:18px;line-height:32px;letter-spacing:-1px;font-weight:600}.com-wrapper p.paragraph-tiny{font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height);letter-spacing:1px}.com-wrapper .canvas-render-wrapper{width:100%;display:block;margin:0 auto;position:relative;position:sticky;top:0;margin:0 auto;display:flex}.com-wrapper .croppr-container{display:grid;grid-template-columns:1fr}.com-wrapper #texture-canvas{display:none}.com-wrapper .texture-croppr-wrapper,.com-wrapper .measurement-view-wrapper{padding:0 var(--main-padding);width:100%;max-height:100%;min-height:350px;display:flex;justify-content:center;align-items:center}.com-wrapper #texture-croppr-wrapper-id.hidden,.com-wrapper #measurement-view-wrapper-id.hidden,.com-wrapper #texture-width-wrapper-id.hidden,.com-wrapper #cta-choose-file-wrapper-id.hidden{display:none}.com-wrapper .text-block{border:1px solid #cdddff;border-radius:var(--radius-small);background-color:#f5f8ff;margin-top:calc(4*var(--main-margin));margin-bottom:var(--main-margin)}.com-wrapper .text-block p{padding:var(--main-padding) calc(2*var(--main-padding));margin:var(--main-margin) 0 0}.com-wrapper .text-block p span{color:#113997;font-weight:600;font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height)}.com-wrapper #disclaimer-heading-id{display:flex;gap:var(--main-padding)}.com-wrapper .text-block ul{list-style-type:disc;margin-top:calc(.5*var(--main-margin))}.com-wrapper .text-block li{margin-bottom:var(--main-margin);font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height);color:#555f6d;padding-right:calc(2*var(--main-padding))}.com-wrapper #render-canvas{outline:none;width:100%;height:100%;background-color:#fff;border-radius:var(--radius-big);aspect-ratio:1/1;height:100%;width:auto;margin:auto;border:1px solid #e8e8e8;max-width:100%}.com-wrapper #measurements-preview-canvas{max-height:100% !important;max-width:100%;width:auto;height:auto;flex-grow:1;flex-shrink:1;object-fit:contain}.com-wrapper #material-editor-container{display:none;z-index:1;left:0;top:0;width:100%;height:100%}.com-wrapper #material-aligment-container.hidden,.com-wrapper #canvas-main-menu-footer.hidden,.com-wrapper #name-selected-material-container.hidden,.com-wrapper #add-image-wrapper.hidden,.com-wrapper #disclaimer-id.hidden,.com-wrapper .menu-footer.cta-choose-file-wrapper.hidden{display:none}.com-wrapper .croppr-container img{max-height:100% !important}.com-wrapper .img-magnifier-container{position:relative}.com-wrapper .img-magnifier-glass{position:absolute;border:3px solid #000;border-radius:50%;cursor:none;width:60px;height:60px;z-index:5}.com-wrapper .canvas-main-menu-wrapper{background-color:#f7f7f7}.com-wrapper .img-magnifier-glass::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:3px;height:3px;background-color:red;border-radius:50%}.com-wrapper p.menu-description{max-width:300px;font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height)}.com-wrapper .help-lines-switch-wrapper{display:flex;align-items:center;padding-bottom:var(--main-padding)}.com-wrapper .inline-label{padding-left:var(--main-padding);font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height)}.com-wrapper .pattern-finder-button-wrapper{width:auto;padding:var(--main-padding) calc(2*var(--main-padding));justify-content:space-between;align-items:center;border-radius:var(--radius-small);background-color:var(--light-blue)}.com-wrapper p.paragraph-tiny.pattern-finder-description{letter-spacing:0;font-size:12px;line-height:18px;letter-spacing:0;margin:0;background-color:var(--light-blue);color:#fff}@media screen and (max-width: 800px){.com-wrapper .main-grid,.com-wrapper .material-editor-content{flex-direction:column;height:auto;max-height:unset}.com-wrapper .menu-inner{margin-bottom:var(--header-height)}.com-wrapper .menu,.com-wrapper .croppr-submenu{border-radius:0}.com-wrapper .croppr-submenu{border:0}.com-wrapper .text-block{padding-right:var(--main-padding);position:static;width:100%}.com-wrapper .texture-croppr-wrapper{margin-top:181px;padding:0 calc(4*var(--main-padding))}.com-wrapper .material-editor-content{-webkit-background-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);gap:0}.com-wrapper .main-grid{max-height:100%}.com-wrapper #pattern-preview-canvas{max-width:100%;width:100%}.com-wrapper #measurement-view-wrapper-id{margin-top:var(--header-height)}.com-wrapper p.paragraph-tiny.pattern-finder-description{margin:0 0 var(--main-margin)}.com-wrapper .menu,.com-wrapper .croppr-submenu{margin:0 auto;width:100%;min-height:370px;max-height:100% !important}.com-wrapper .menu,.com-wrapper .croppr-submenu{min-width:380px}.com-wrapper .canvas-render-wrapper{position:relative}.com-wrapper #render-canvas{min-height:550px;height:550px}.com-wrapper{width:100%;height:100%;background-color:var(--bg-color);position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;overflow-x:hidden}.com-wrapper p.menu-description{max-width:100%}.com-wrapper .pattern-finder-button-wrapper{position:absolute;display:flex;justify-content:flex-start;width:100%;border-radius:0;flex-direction:column;justify-content:flex-start;align-items:flex-start;top:65px;left:0}.com-wrapper .menu-header{position:absolute;width:100%;background-color:#fff;top:0;margin-top:0}.com-wrapper .main-grid{position:relative;z-index:1000;overflow:visible}.com-wrapper .canvas-render-wrapper{margin-top:var(--header-height)}.com-wrapper #add-image-wrapper{display:none}.com-wrapper .text-block{margin-top:var(--main-margin)}.com-wrapper .menu-footer{margin-top:0;position:fixed;bottom:0;width:100%;z-index:5}.com-wrapper .menu-inner-material-editor{margin-bottom:90px;border:0}.com-wrapper .measurement-view-wrapper{box-shadow:none}}@media screen and (max-width: 500px){.com-wrapper #render-canvas{min-height:400px;height:400px}.com-wrapper .texture-croppr-wrapper{padding:0 calc(2*var(--main-padding))}}@media only screen and (max-width: 800px)and (orientation: landscape){.com-wrapper .canvas-render-wrapper,.com-wrapper .measurement-view-wrapper{width:calc(100% - 130px);margin:auto}.com-wrapper #render-canvas{min-height:450px;height:450px}}:root{--white: #ffffff;--green: #3DA497;--dark-green: #097C69;--content-primary: #272E35;--border-gray: #CFD6DD;--gray: #a4adb5;--lightgray: #dfdfdf;--Action-Neutral-Subtle-Normal: #F0F3F5;--Interaction-Border-Neutral-Normal: #CFD6DD;--Content-Secondary: #555F6D;--secondary-button-text-color: #4A545E;--light-blue: #3062D4;--h1-desktop-font-size: 24px;--h1-desktop-line-height: 36px;--h1-desktop-font-size-alternative: 19px;--h2-desktop-font-size: 18px;--h2-desktop-line-height: 32px;--heading-font-weight: 600;--letter-spacing: -2%;--button-font-size: 16px;--button-line-height: 28px;--button-disabled: #0d617588;--main-margin: 10px;--main-padding: 10px;--big-padding: 24px;--radius-small: 5px;--radius-normal: 10px;--radius-big: 12px;--bg-color: #F5F7F9;--paragraph-tiny-font-size: 14px;--paragraph-tiny-line-height: 20px;--paragraph-font-size: 16px;--paragraph-line-height: 28px;--header-height: 65px}.com-wrapper button{background-color:var(--green);border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;padding:var(--main-padding);margin:var(--main-margin) 0;border-radius:var(--radius-small);width:100%;font-size:var(--button-font-size);line-height:var(--line-height)}.com-wrapper button.secondary{background-color:#fff;border:1px solid #cfd6dd;color:var(--secondary-button-text-color)}.com-wrapper .croppr-handle{border:1px solid #fff;background-color:var(--dark-green);width:30px;height:30px;position:absolute;z-index:4;left:0;top:0;border-radius:100px}.com-wrapper button:hover,.com-wrapper #exit-com-button:hover,.com-wrapper #back-button-material-editor:hover{cursor:pointer}.com-wrapper #crop-button.hidden,.com-wrapper #back-button-material-editor.hidden,.com-wrapper #previous-step-measurements.hidden,.com-wrapper #next-step-measurements.hidden,.com-wrapper #back-button-wrapper-id.hidden,.com-wrapper #pattern-finder-button-wrapper-id.hidden{display:none}.com-wrapper button:disabled{background-color:var(--button-disabled)}.com-wrapper .image-button{background-color:rgba(0,0,0,0);border:none;cursor:pointer;padding:0;margin:0}.com-wrapper .rotate-button{display:flex;gap:10px;width:auto;height:44px;padding:0;margin:0;background:none;position:absolute;left:40px;bottom:40px}.com-wrapper .close{background-color:#fff;border:1px solid #cfd6dd;color:#4a545e}.com-wrapper .close:hover,.com-wrapper .close:focus{color:#000;text-decoration:none;cursor:pointer}.com-wrapper .image-button-inner-icon{border:1px solid var(--gray);padding:var(--main-padding);border-radius:var(--radius-small);pointer-events:none}.com-wrapper .image-button-inner-icon.active{border:2px solid var(--content-primary);position:relative}.com-wrapper .image-button-inner-icon.active::after{content:"";position:absolute;width:20px;height:20px;bottom:10px;right:5px;background-size:contain;background-repeat:no-repeat}.com-wrapper .image-button.shader-type-buttons,.com-wrapper .image-button.material-type-buttons,.com-wrapper .image-button.mapping-strategies-buttons,.com-wrapper .image-button{background-color:#fff;display:flex}.com-wrapper .shader-button-wrapper{margin-right:var(--main-margin)}.com-wrapper .shader-button-wrapper .button-name{font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height);text-align:left}.com-wrapper .image-button.shader-type-buttons.hidden{display:none}.com-wrapper #pattern-finder-button-id{width:fit-content;font-size:var(--paragraph-tiny-font-size);line-height:8px;display:flex;align-items:center;gap:10px;padding:calc(.5*var(--main-padding)) var(--main-padding)}@media screen and (max-width: 800px){.com-wrapper .rotate-button{left:50%;transform:translateX(-70px);bottom:20px}}.com-wrapper .help-lines-switch{position:relative;display:inline-block;width:36px;height:20px}.com-wrapper #help-lines-switch-id{opacity:0;width:0;height:0}.com-wrapper .help-lines-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0px;background-color:#ccc;transition:.4s;border-radius:34px}.com-wrapper .help-lines-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}.com-wrapper #help-lines-switch-id:checked+.help-lines-slider{background-color:var(--dark-green)}.com-wrapper #help-lines-switch-id:checked+.help-lines-slider:before{transform:translateX(16px)}.com-wrapper .overlay-dialog{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:10}.com-wrapper .overlay-dialog.hidden{display:none}.com-wrapper .loading-dialog,.com-wrapper .dialog{background-color:#fff;border-radius:var(--radius-normal);padding:var(--big-padding) calc(2.5*var(--big-padding)) calc(.5*var(--big-padding));box-shadow:0 4px 8px rgba(0,0,0,.1);text-align:center;position:relative;margin:auto var(--main-margin)}.com-wrapper .loading-dialog.hidden{display:none}.com-wrapper .dialog{max-width:420px}.com-wrapper .loading-dialog p.paragraph-tiny,.com-wrapper .dialog{color:var(--Content-Secondary);letter-spacing:0}.com-wrapper .spinner{border:2px solid rgba(0,0,0,.1);border-top:2px solid var(--dark-green);border-radius:50%;width:32px;height:32px;animation:spin 1s linear infinite;margin:0 auto 20px}.com-wrapper .dialog-header{display:flex;justify-content:center;align-items:center}.com-wrapper .dialog-title{margin:0;font-size:var(--h1-desktop-font-size);line-height:var(--h1-desktop-line-height)}.com-wrapper .dialog-icon{width:128px;height:128px;margin:calc(3*var(--main-margin)) auto calc(3*var(--main-margin))}.com-wrapper .dialog-close{cursor:pointer;font-size:23px;position:absolute;right:20px;top:20px;background:#ededed;border-radius:var(--radius-small);width:30px;height:30px;padding:0;margin:0;color:var(--secondary-button-text-color)}.com-wrapper .dialog-description{margin:20px 0;margin:var(--main-margin) 0;font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height);color:var(--Content-Secondary)}.com-wrapper .dialog-buttons{display:flex;justify-content:space-between;gap:var(--main-margin)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media screen and (max-width: 800px){.com-wrapper .loading-dialog,.com-wrapper .dialog{margin:50vh var(--main-margin) auto;transform:translateY(-50%)}}.com-wrapper .upload-area{width:100%;height:300px;border:1px dashed var(--Interaction-Border-Neutral-Normal);border-radius:var(--radius-small);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--Content-Primary, #272E35);margin:var(--main-margin) auto;padding:10px;cursor:pointer;transition:background-color .3s;background-color:var(--Action-Neutral-Subtle-Normal);font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height);font-feature-settings:"liga" off,"clig" off;font-size:14px;font-style:normal;font-weight:450;letter-spacing:.28px}.com-wrapper .upload-area.dragover{background-color:#f1f1f1;border-color:var(--green)}.com-wrapper .upload-area input[type=file]{display:none}.com-wrapper .upload-area p{margin:0;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}.com-wrapper .upload-area:hover{cursor:auto}.com-wrapper .upload-button{padding-bottom:8px}.com-wrapper .choose-file{color:var(--green);text-decoration:underline;cursor:pointer;font-weight:700}.com-wrapper .choose-file--subtitle{font-size:12px;font-style:normal;font-weight:450;line-height:20px;letter-spacing:.24px;color:var(--Content-Secondary, #555F6D)}.com-wrapper #fileList{text-align:center}@media screen and (max-width: 1200px){.com-wrapper .upload-area{height:220px}}@media screen and (max-width: 800px){.com-wrapper .upload-area{height:100px}.com-wrapper .upload-area p{font-size:var(--paragraph-tiny-font-size);line-height:var(--paragraph-tiny-line-height)}}.com-wrapper .text-input,.area-input{width:100%;padding:var(--main-padding);border:1px solid var(--border-gray);border-radius:var(--radius-small)}.com-wrapper .area-input{width:auto;margin:0;text-align:center}.com-wrapper .text-input:focus,.area-input:focus{outline:1px solid var(--green)}.com-wrapper .input-container{position:relative}.com-wrapper .unit{color:var(--gray);font-size:14px}.com-wrapper #texture-size::-webkit-inner-spin-button,.com-wrapper #texture-size::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.com-wrapper #texture-size{-moz-appearance:textfield}.com-wrapper .pattern-preview-wrapper{width:100%;display:inline-block}.com-wrapper #pattern-preview{width:100%;height:290px;background-position:50% 50%;background-size:33%;background-size:contain}.com-wrapper #pattern-preview-wrapper-id.hidden{display:none}@media screen and (max-width: 800px){.com-wrapper #pattern-preview{height:200px}}.com-wrapper input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:linear-gradient(to right, var(--green) 0%, var(--gray) 0%);border-radius:5px;outline:none;transition:background .3s}.com-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--dark-green);border-radius:50%;cursor:pointer}.com-wrapper input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--green);border-radius:50%;cursor:pointer}.com-wrapper .slider-container{position:relative}@media only screen and (min-width: 801)and (max-width: 1399px){.com-wrapper .slider{height:6px}.com-wrapper input[type=range]::-webkit-slider-thumb{width:26px;height:26px}.com-wrapper input[type=range]::-moz-range-thumb{width:26px;height:26px}}@media only screen and (min-width: 768px)and (max-width: 1024px)and (-webkit-min-device-pixel-ratio: 2),only screen and (min-width: 1024px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2){.com-wrapper input[type=range]::-webkit-slider-thumb{width:26px;height:26px}.com-wrapper input[type=range]::-moz-range-thumb{width:26px;height:26px}}@media screen and (max-width: 800px){.com-wrapper .slider{height:6px}.com-wrapper input[type=range]::-webkit-slider-thumb{width:26px;height:26px}.com-wrapper input[type=range]::-moz-range-thumb{width:26px;height:26px}}.com-wrapper .grasscloth-editor-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff;box-shadow:0 2px 7px 0 rgba(0,0,0,.1)}.com-wrapper .grasscloth-editor-header{border-bottom:1px dashed var(--border-gray);padding:var(--main-padding) var(--big-padding)}.com-wrapper .grasscloth-editor-body{display:flex;gap:var(--big-padding);padding:var(--big-padding);overflow:auto;flex:1}.com-wrapper .grasscloth-editor-left{flex:1;min-width:0}.com-wrapper .grasscloth-editor-right{flex:0 0 400px;display:flex;flex-direction:column}.com-wrapper .grasscloth-editor-footer{border-top:1px dashed var(--border-gray);padding:var(--main-padding) var(--big-padding);margin-top:auto;position:sticky;bottom:0;background-color:#fff}.com-wrapper .color-palette-section{margin-bottom:calc(2*var(--main-margin))}.com-wrapper .color-palette-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));gap:var(--main-margin);margin-top:var(--main-margin)}.com-wrapper .swatch-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.com-wrapper .color-swatch{width:55px;height:55px;border-radius:var(--radius-small);border:2px solid var(--border-gray);cursor:pointer;transition:border-color .15s ease,transform .15s ease;padding:0}.com-wrapper .color-swatch:hover{border-color:var(--dark-green);transform:scale(1.08)}.com-wrapper .color-swatch.active{border-color:var(--dark-green);border-width:3px;box-shadow:0 0 0 2px var(--dark-green)}.com-wrapper .swatch-label{font-size:11px;line-height:14px;text-align:center;color:var(--Content-Secondary);overflow:hidden;text-overflow:ellipsis;max-width:120px}.com-wrapper .color-preview-section{margin-bottom:calc(2*var(--main-margin))}.com-wrapper #color-preview-canvas{width:100%;max-width:380px;height:auto;border:1px solid var(--border-gray);border-radius:var(--radius-small)}.com-wrapper .grasscloth-name-section{margin-top:calc(2*var(--main-margin))}.com-wrapper .com-name-error{display:block;margin-top:6px;font-size:12px;color:#d93025}.com-wrapper .text-input.input-error{border-color:#d93025;outline-color:#d93025}.com-wrapper .grasscloth-upload-section{margin-bottom:calc(2*var(--main-margin))}.com-wrapper .grasscloth-upload-area{width:100%;border:1px dashed var(--Interaction-Border-Neutral-Normal);border-radius:var(--radius-small);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--Content-Primary, #272E35);margin:var(--main-margin) auto;padding:calc(2*var(--main-padding));cursor:pointer;transition:background-color .3s;background-color:var(--Action-Neutral-Subtle-Normal);font-size:14px;font-style:normal;font-weight:450;letter-spacing:.28px}.com-wrapper .grasscloth-upload-area.dragover{background-color:#f1f1f1;border-color:var(--green)}.com-wrapper .grasscloth-upload-area p{margin:0;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}.com-wrapper .grasscloth-upload-icon{padding-bottom:8px}.com-wrapper .grasscloth-choose-file{color:var(--green);text-decoration:underline;cursor:pointer;font-weight:700}.com-wrapper .grasscloth-choose-file--subtitle{font-size:12px;font-style:normal;font-weight:450;line-height:20px;letter-spacing:.24px;color:var(--Content-Secondary, #555F6D)}.com-wrapper .grasscloth-upload-thumbnail{display:flex;align-items:center;gap:var(--main-margin);margin-top:var(--main-margin);padding:var(--main-margin);border:1px solid var(--border-gray);border-radius:var(--radius-small);max-width:110px}.com-wrapper .grasscloth-thumb-img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-small);flex-shrink:0}.com-wrapper .grasscloth-clear-btn{margin-left:auto;background:none;border:none;cursor:pointer;font-size:16px;color:var(--Content-Secondary);line-height:1;padding:4px;border-radius:var(--radius-small);transition:color .15s ease}.com-wrapper .grasscloth-clear-btn:hover{color:var(--Content-Primary, #333)}@media screen and (max-width: 800px){.com-wrapper .grasscloth-editor-body{flex-direction:column}.com-wrapper .grasscloth-editor-right{flex:none;width:100%}.com-wrapper .color-palette-grid{grid-template-columns:repeat(auto-fill, minmax(60px, 1fr))}}@media screen and (max-width: 500px){.com-wrapper .color-swatch{width:48px;height:48px}}.com-wrapper .grasscloth-editor-layout{box-shadow:none;background-color:var(--bg-color)}.com-wrapper .grasscloth-editor-footer{background-color:var(--bg-color)}.com-wrapper #color-preview-canvas{border-radius:var(--radius-big)}.com-wrapper .grasscloth-upload-area{border-radius:var(--radius-big)}.com-wrapper .grasscloth-upload-thumbnail{border-radius:var(--radius-big)}