.html-colors-group{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:1rem 0}.single-color-value{border:1px solid rgb(0 0 0 / .05);border-radius:16px;padding:2rem;box-shadow:0 2px 5px 0 rgb(0 0 0 / .2);transition:transform 0.3s ease,box-shadow 0.3s ease;display:flex;flex-direction:column;justify-content:center;min-height:220px;overflow:hidden;position:relative}.single-color-value:hover{transform:translateY(-5px);box-shadow:0 6px 10px rgb(0 0 0 / .06),0 15px 30px rgb(0 0 0 / .12)}.color-name,.color-value{margin:0;line-height:1.2;text-align:center}.color-name{font-weight:700;font-size:1.25rem}.color-value{font-weight:400;font-size:1.1rem;margin-top:.25rem;opacity:.9}@media (max-width:680px){.html-colors-group{grid-template-columns:1fr;row-gap:1.5rem;column-gap:0}.single-color-value{padding:1.5rem;min-height:180px;width:100%}.color-name{font-size:1.5rem}.color-value{font-size:1rem}}.html-colors-group:has(.filter-not-found){grid-template-columns:1fr}.single-color-value.light{color:#fff}.filter-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:30px;margin-bottom:10px;padding:0}.filter-search-wrapper{position:relative;flex:1 1 100%;max-width:100%;margin:10px 0}.filter-search-input{width:100%;padding:10px 12px 10px 38px;font-size:.95rem;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:50px;box-shadow:0 1px 6px 0 #20212447;transition:border-color 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease}.filter-search-input:hover{border-color:#999;box-shadow:0 1px 6px 0 #20212466}.filter-search-input:focus{border-color:var(--primary-color,#0d6efd);background-color:#fff;outline:none;box-shadow:0 0 0 3px #2a73cc55,inset 0 1px 2px rgb(0 0 0 / .2)}.filter-search-wrapper:focus-within .filter-search-icon{color:var(--primary-color,#0d6efd)}.filter-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.95rem;color:#888;pointer-events:none;line-height:1}.hide{display:none!important}.filter-not-found{width:100%;box-shadow:0 2px 5px 0 rgb(0 0 0 / .2)}.nothing-wrap{width:100%;margin:40px auto 30px;display:flex;flex-direction:column;align-items:center;justify-content:center}.nothing-title{font-size:1.25rem;font-weight:600;margin:12px 0 6px;color:#222;position:relative}.nothing-title::before{content:'\e96a';font-family:'tutsinsider';display:block;width:72px;height:72px;line-height:72px;margin:0 auto 14px;font-size:72px;color:#d9534f;border-radius:50%;box-shadow:0 0 0 4px #fff,0 2px 6px rgb(0 0 0 / .1)}.nothing-text{font-size:.96rem;color:#555;line-height:1.6;margin-top:4px}