.finder{flex-direction:column;justify-content:center;gap:14px;display:flex}.finder .finder-main{flex-flow:wrap;justify-content:center;gap:8px;display:flex}.finder .finder-main #picker{flex-direction:row;flex-grow:1;flex-basis:324px;gap:8px;max-width:500px;display:flex}.finder .finder-main #picker>*{cursor:pointer;border:1px solid var(--color-content);box-sizing:border-box;position:relative}.finder .finder-main #picker>* .handle{z-index:10;pointer-events:none;background:#fff;border:2px solid #000;border-radius:50%;width:8px;height:8px;position:absolute;transform:translate(-6px,-6px)}.finder .finder-main #picker #map-saturation-value{background:linear-gradient(to bottom,transparent,black),linear-gradient(to right,transparent,hsl(var(--hue),100%,50%)),#fff;flex-grow:1;height:300px}.finder .finder-main #picker #map-saturation-value .handle{left:calc(var(--saturation)*1%);top:calc((100 - var(--value))*1%)}.finder .finder-main #picker #map-hue{background:linear-gradient(in hsl longer hue to bottom,red 0 100%);width:16px;height:300px}.finder .finder-main #picker #map-hue .handle{left:50%;top:calc(var(--hue)/360*100%)}.finder .finder-main #results{flex-direction:column;flex-grow:1000000;gap:4px;display:flex}@media screen and (max-width:800px){.finder .finder-main #results{width:100%}}.finder .finder-main #results .result{box-sizing:border-box;border:2px solid var(--color);flex-direction:column;justify-content:center;gap:2px;padding:8px 12px;display:flex;position:relative}@media screen and (min-width:800px){.finder .finder-main #results .result{border-left:16px solid var(--color);height:72px}.finder .finder-main #results .result .result-match{-webkit-user-select:none;user-select:none}.finder .finder-main #results .result .result-match:after{content:" match"}}@media screen and (max-width:800px){.finder .finder-main #results .result{border-right:16px solid var(--color)}}.finder .finder-main #results .result .result-product .result-product-supplier{opacity:.7}.finder .finder-main #results .result .result-data{flex-direction:row;gap:8px;font-size:18px;display:flex}.finder .finder-main #results .result .result-data .field{font-weight:700}.finder .finder-main #results .result .result-data .separator{opacity:.5;-webkit-user-select:none;user-select:none}.finder .finder-main #results .result .result-match{opacity:.5;font-size:16px;font-weight:400;position:absolute;bottom:6px;right:9px}.finder .finder-fields{flex-flow:wrap;justify-content:center;gap:14px;display:flex}@media screen and (max-width:800px){.finder .finder-fields{order:-1}}.finder .finder-fields #current-color{background:var(--color);border:1px solid var(--color-content);width:50px;height:50px}.finder .finder-fields input{text-align:center;box-sizing:border-box;height:24px}.finder .finder-fields input.large{width:80px}.finder .finder-fields input.medium{width:50px}.finder .finder-fields input.small{width:40px}.finder .finder-fields input[type=number]{appearance:textfield}.finder .finder-fields input[type=number]::-webkit-inner-spin-button{appearance:none}.finder .finder-fields input[type=number]::-webkit-outer-spin-button{appearance:none}.finder .finder-fields .finder-fields-color{flex-direction:row;gap:14px;height:52px;display:flex}.finder .finder-fields .finder-fields-color .field-set{flex-direction:column;justify-content:space-between;display:flex}.finder .finder-fields .finder-fields-color .field-set .fields{flex-direction:row;align-items:center;gap:4px;font-size:18px;line-height:0;display:flex}.finder .finder-fields .finder-fields-color .field-set .divider{background:var(--color-content);opacity:.2;height:1px}.finder .finder-fields .finder-fields-color .field-set .label{opacity:.5;font-size:16px;line-height:1}.finder .finder-fields .finder-fields-filter{display:flex}@media screen and (min-width:800px){.finder .finder-fields .finder-fields-filter{flex-direction:column;justify-content:space-between;align-items:end;margin-left:auto}}@media screen and (max-width:800px){.finder .finder-fields .finder-fields-filter{flex-direction:row;gap:8px;padding-right:20px}}.finder .finder-fields .finder-fields-filter .filter{opacity:.7;flex-direction:row;align-items:center;font-size:16px;line-height:1;display:flex}.finder .finder-fields .finder-fields-filter .filter.active{opacity:1}.finder .finder-fields .finder-fields-filter .filter.active .clear{visibility:visible}.finder .finder-fields .finder-fields-filter .filter.active .label{color:var(--color-primary);font-weight:700}.finder .finder-fields .finder-fields-filter .filter .clear{visibility:hidden;opacity:.5;width:20px;height:20px;color:var(--color-primary);justify-content:center;align-items:center;margin-right:2px;display:flex}.finder .finder-fields .finder-fields-filter .filter .clear svg{width:16px;height:16px;margin:auto 0}.finder .finder-fields .finder-fields-filter .filter .label{margin-right:6px}.finder .finder-fields .finder-fields-filter .filter .label .unit{opacity:.6;vertical-align:5%;font-size:12px}.finder .finder-fields .finder-fields-filter .filter .to{margin:0 3px;line-height:0}.finder .finder-suppliers #suppliers{flex-flow:wrap;display:flex}.finder .finder-suppliers #suppliers>div{flex-grow:1;flex-basis:33.3333%;min-width:250px}.finder .finder-suppliers #suppliers>div.note .name{text-underline-offset:3px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:1px}.finder .finder-notices{flex-direction:column;gap:6px;margin-top:4px;display:flex}.finder .finder-notices p{opacity:.5;margin:0;font-size:18px}.finder .finder-notices p svg{vertical-align:-25%;width:20px;margin-right:2px}