#color-scheme-wrapper{display:flex;justify-content:space-between;flex-wrap:wrap}#color-scheme-wrapper .text-area-wrapper{flex-basis:10%;background:#202329;height:max-content}#color-scheme-wrapper .text-area-wrapper textarea{width:100%;height:60vh;padding:10px;background:var(--black-1)}#input-color-wrap{padding:10px 10px 0;border-bottom:1px solid #333}#set-distance-wrap{padding:10px;border-bottom:1px solid #333}#add-complement-wrap{padding:10px}#color-scheme-wrapper .result-area-wrapper{flex-grow:1;height:87.5vh;display:flex;flex-direction:column;gap:2%}#btn-clear{margin-left:auto}.wrapper-result{display:flex}.span-result{color:var(--yellow);font-size:16px;line-height:24px;margin-left:6px}#table-char-frequency table{border:none}#table-char-frequency tbody{display:flex;flex-direction:column;flex-wrap:wrap;max-height:60vh;border:none}#table-char-frequency tr{border:1px solid #333;width:max-content}#table-char-frequency .td-char,#table-char-frequency .td-count{padding:0 3px;border:none}#table-char-frequency .td-char{color:#fff}#table-char-frequency .td-count{color:var(--yellow)}#btn-wrapper{flex-basis:100%;display:flex;justify-content:flex-end;padding:6px 0}.pushed-div-wrapper{margin:0;flex-grow:1}.pushed-div-parent{display:flex;width:100%;height:100%}.pushed-div{flex-basis:0;flex-grow:1;position:relative;cursor:pointer;border:3px solid transparent}.pushed-div:hover{border:3px solid var(--yellow)}.pushed-div:hover::before{content:"CLICK TO COPY";position:absolute;top:75%;left:50%;transform:translateX(-50%);background-color:var(--black-1);color:#fff;display:block;padding:2px 4px;width:max-content;z-index:99999;font-size:11px;line-height:1;pointer-events:none}.color-scheme-label{color:#fff;font-size:11px;position:absolute;background:#1a1f24;margin:0;padding:0 4px 6px 0;z-index:999;line-height:.5;text-transform:uppercase}.feedback-span-sp{display:block}.hex-color-span{position:absolute;height:max-content;color:#fff;top:calc(50% - 12px);left:calc(50% - 29.4px);padding:0 3px;font-size:12px}.pushed-div:hover .hex-color-span{font-weight:700}@media screen and (max-width:768px){#color-scheme-wrapper{flex-wrap:wrap}#color-scheme-wrapper .text-area-wrapper{flex-basis:100%;display:flex;flex-wrap:wrap}#color-scheme-wrapper .text-area-wrapper #input-color-wrap,#color-scheme-wrapper .text-area-wrapper #set-distance-wrap{flex-basis:48%}.pushed-div-wrapper{position:relative}.pushed-div-parent{display:flex;flex-wrap:wrap}.pushed-div{flex-basis:22%;height:50px}.color-scheme-label{top:0;left:0}}