/* Fine grid-spacing control in the pattern import alignment step. */
.pattern-grid-size-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px;border:1px solid #dce7f7;border-radius:8px;background:#f6f9ff}
.pattern-grid-size-control>div:first-child{display:flex;min-width:0;flex-direction:column;gap:2px}
.pattern-grid-size-control strong{color:#1f3d68;font-size:13px}
.pattern-grid-size-control small{color:#667085;font-size:11px}
.pattern-grid-size-stepper{display:grid;grid-template-columns:38px minmax(78px,auto) 38px;align-items:center;flex:0 0 auto}
.pattern-grid-size-stepper button{width:38px;height:38px;border:1px solid #c6d6ee;background:#fff;color:#1769e0;font-size:22px;line-height:1}
.pattern-grid-size-stepper button:first-child{border-radius:7px 0 0 7px}
.pattern-grid-size-stepper button:last-child{border-radius:0 7px 7px 0}
.pattern-grid-size-stepper output{height:38px;display:grid;place-items:center;border-top:1px solid #c6d6ee;border-bottom:1px solid #c6d6ee;background:#fff;color:#172033;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:600px){.pattern-grid-size-control{margin-top:8px;padding:9px}.pattern-grid-size-control small{font-size:10px}.pattern-grid-size-stepper{grid-template-columns:36px minmax(72px,auto) 36px}.pattern-grid-size-stepper button,.pattern-grid-size-stepper output{height:36px}.pattern-grid-size-stepper button{width:36px}}
@media(max-width:380px){.pattern-grid-size-control small{display:none}}