.list-container{margin:auto;width:500px;height:500px;padding:1em;border-radius:.5em;background-color:#eaeaea}.list-virtual{margin:auto;width:100%;max-width:100%;height:100%;max-height:100%;overflow:hidden scroll}.list-virtual-item{color:#00f}body{background:#fff;font-family:roboto,sans-serif;color:#000;margin:0}.scrollbar-autohide{scrollbar-width:thin;scrollbar-color:transparent transparent;scroll-behavior:smooth}.scrollbar-autohide::-webkit-scrollbar{background-color:transparent;width:.5rem;height:.5rem;transform:rotate(90deg)}.scrollbar-autohide::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:transparent}.scrollbar-autohide:hover{scrollbar-color:auto}.scrollbar-autohide:hover::-webkit-scrollbar{background-color:transparent}.scrollbar-autohide:hover::-webkit-scrollbar-thumb{background-color:#c1c1c1}.app{border:1px #eee solid;width:100%;max-width:40rem;border-radius:.5rem;overflow:hidden}:root{--red: 255;--green: 0;--blue: 0;--hue: 0;--saturation: 100;--lightness: 50;--whiteness: 50;--blackness: 50;--black: #000;--white: #fff;--textColor: var(--black);will-change:var(--green)}input[type=range]{-webkit-appearance:none;background:#fff;border-radius:1rem;margin-bottom:.25rem;margin-top:.25rem}input[type=range]:focus{border:none;outline:none}input[type=range]:focus::-webkit-slider-thumb{border:.125rem solid #000;background:rgb(var(--red),var(--green),var(--blue))}input[type=range]:focus::-moz-range-thumb{transform:scale(2);border:.125rem solid #000;background:rgb(var(--red),var(--green),var(--blue))}input[type=range]:hover{border:none;outline:none}input[type=range]:hover::-webkit-slider-thumb{border:.12rem solid #000;background:rgb(var(--red),var(--green),var(--blue))}input[type=range]:hover::-moz-range-thumb{transform:scale(2);border:.125rem solid #000;background:rgb(var(--red),var(--green),var(--blue))}input[type=range]::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:1em;background:rgb(var(--red),var(--green),var(--blue))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgb(var(--red),var(--green),var(--blue));cursor:pointer;border-radius:3rem;width:.25rem;height:.25rem;transform:scale(4);transition:border .1s linear}input[type=range]::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.25rem;height:.25rem;outline:none;border-radius:1rem;transform:scale(4);background:rgb(var(--red),var(--green),var(--blue));border:0 solid #000}input[type=range]::-moz-focus-outer{border:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]::-webkit-outer-spin-button{height:1rem;width:1rem;background:red}.radio{color:#707070;font-weight:400}.radio input:checked~span{color:#005177;border-bottom:1px solid #005177}.radio input:disabled~span{color:#9a003f}.radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.wrapper{display:flex;justify-content:space-between}nav{height:3rem;background:#fff;border-bottom:1px #eee solid}#sidebar-left{background:#fff;border-right:1px #eee solid;height:100vh;flex:0 5 400px;transition:flex .2s cubic-bezier(.075,.82,.165,1)}#sidebar-left section{padding:1rem 1rem 0}#sidebar-right{background:#e6c4c4;height:100vh;flex:0 5 200px;transition:flex .2s cubic-bezier(.075,.82,.165,1)}#sidebar-right:hover{flex:5 50%}#middel{background:#fff;height:100vh;flex:3 0 40%;overflow-y:hidden}h1,h2{margin:1rem 0 .25rem}.gui{position:absolute}.descriptor{display:inline-block;color:#707070;font-weight:400;padding:0 0 .25rem}#loading{display:block;position:absolute;top:0;left:0;width:100%;height:100vh;background:#fff;z-index:1;line-height:100%;text-align:center}#colorswap{padding:.5rem 0 0}#colorswap input{outline:0;border-radius:1rem;margin:0 .3rem;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;width:2rem;height:2rem;background:#fff;display:inline-block;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),border-radius .2s cubic-bezier(.175,.885,.32,1.275);transition-delay:.1s}#colorswap input:after{font-family:Material Icons;color:var(--textColor);opacity:.7;content:"";position:absolute;display:block;padding:.3rem;font-size:1.25rem;transform:scale(.5);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),border-radius .2s cubic-bezier(.175,.885,.32,1.275)}#colorswap input:checked{transform:scale(1.2) translateY(1px);border-radius:.35rem}#colorswap input:checked:after{content:"build";transform:scale(1)}#colorswap input:hover{transform:scale(1.1);border-radius:.65rem}#colorswap input:hover:checked{transform:scale(1.2) translateY(1px);border-radius:.35rem}.colorspace .colorspace{background:#fff;border:1px #ddd solid;border-radius:.25rem;padding:.25rem .5rem;margin:.25rem 0}.colorspace .colorspace .row{display:flex;width:100%;padding-bottom:.25rem}.colorspace .row{display:flex;padding-bottom:.25rem}.colorspace label{flex:0 0 1rem;line-height:1}.colorspace input[type=range]{flex:5 6 50%;height:.6rem;border:1px #efefef solid}.colorspace input[type=number]{height:1rem;flex:0 5 100%;display:block;width:100%;background:transparent;color:#000;padding:.1rem;border:none}#red[type=range]{background:linear-gradient(to right,rgb(0,var(--green),var(--blue)),rgb(255,var(--green),var(--blue)));will-change:background}#green[type=range]{background:linear-gradient(to right,rgb(var(--red),0,var(--blue)),rgb(var(--red),255,var(--blue)));will-change:background}#blue[type=range]{background:linear-gradient(to right,rgb(var(--red),var(--green),0),rgb(var(--red),var(--green),255));will-change:background}#cyan[type=range]{background:linear-gradient(to right,rgb(calc(255 - var(--blackness) / 100 * 255),var(--green),var(--blue)),rgb(0,var(--green),var(--blue)));will-change:background}#magenta[type=range]{background:linear-gradient(to right,rgb(var(--red),calc(255 - var(--blackness) / 100 * 255),var(--blue)),rgb(var(--red),0,var(--blue)));will-change:background}#yellow[type=range]{background:linear-gradient(to right,rgb(var(--red),var(--green),calc(255 - var(--blackness) / 100 * 255)),rgb(var(--red),var(--green),0));will-change:background}.huepointer{pointer-events:none;padding-top:.5em}.huepointer:hover{background-image:linear-gradient(to right,transparent 0%,#008b00 calc(16.6666666667% - .125em),#333 calc(16.6666666667% - .125em),#333 calc(16.6666666667% + .125em),#ef0000 calc(16.6666666667% + .125em),transparent calc(33.3333333333% - .125em),#333 calc(33.3333333333% - .125em),#333 calc(33.3333333333% + .125em),transparent calc(33.3333333333% + .125em),#006efe calc(50% - .125em),#333 calc(50% - .125em),#333 calc(50% + .125em),#008b00 calc(50% + .125em),transparent calc(66.6666666667% - .125em),#333 calc(66.6666666667% - .125em),#333 calc(66.6666666667% + .125em),transparent calc(66.6666666667% + .125em),#ef0000 calc(83.3333333333% - .125em),#333 calc(83.3333333333% - .125em),#333 calc(83.3333333333% + .125em),#006efe calc(83.3333333333% + .125em),transparent 100%);background-position:0 -.3em;background-origin:content-box;background-size:100% .5em;background-repeat:repeat-x}#hue{pointer-events:auto}#hue[type=range]{background:linear-gradient(to right,hsl(0,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(60,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(120,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(180,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(240,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(300,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)),hsl(360,calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)));will-change:background}#saturation_1[type=range]{background:linear-gradient(to right,hsl(var(--hue),0%,calc(var(--lightness) * 1%)),hsl(var(--hue),100%,calc(var(--lightness) * 1%)));will-change:background}#saturation_2[type=range]{background:var(--saturation2);will-change:background}#lightness[type=range]{background:linear-gradient(to right,hsl(var(--hue),calc(var(--saturation) * 1%),0%),hsl(var(--hue),calc(var(--saturation) * 1%),50%),hsl(var(--hue),calc(var(--saturation) * 1%),100%));will-change:background}#value[type=range]{background:var(--value)}#blackness[type=range],#key[type=range]{background:var(--blackness);will-change:background}#whiteness[type=range]{background:var(--whiteness);will-change:background}#whiteness[type=range][value="100"]{background:red}#sidebar-right section{padding:.5rem}.preformatedcode{display:block;width:100%;background:#ddd;min-height:1rem;border-radius:.25rem;padding:1rem}#dialog-menues{width:100%;height:100vh}#notifications{position:absolute;left:0;top:0;z-index:10;right:0;width:100%;height:3rem;margin:auto;background:salmon;border-bottom:.2rem red solid;color:#000;display:none;padding:1rem}#notifications.active{display:block}#middel{position:relative}nav{display:flex;align-items:center;justify-items:center;justify-content:space-around}input.clr-in:invalid{outline:blue 1px solid}#viewrgb{height:100%;width:100%;max-width:100%;max-height:100%;display:block;overflow:hidden}#viewrgb canvas{width:100%;height:100%;max-width:100%;max-height:100%;display:block;background:#fff}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}*{box-sizing:border-box}#clr-search{padding:0;border:none;display:flex;align-items:center;justify-content:center}.material-icons.searchIcon{padding:0 0 0 1rem;display:flex;align-self:stretch;align-items:center;vertical-align:middle;color:#dcdcdc}#searchfield{padding:1rem 1rem 1rem .75rem;width:100%;margin:0;font-size:1rem;line-height:1;display:block;outline:none;border:none;background-color:#fff;color:#000}#searchfield::placeholder{color:#ccc}#output{margin:0;padding:0;list-style-type:none;display:block;height:100%;overflow-y:scroll;color:#707070;transition:opacity .2s cubic-bezier(.645,.045,.355,1)}#output[test="1"]{opacity:.5}#output li{box-sizing:content-box;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px #eee solid;content-visibility:auto;contain-intrinsic-size:3em}#message{text-align:left;padding:0 1em;border-bottom:1px #bbb solid;transition:all .2s cubic-bezier(.645,.045,.355,1);height:2em;overflow:hidden}#message>*{transition:opacity .2s cubic-bezier(.645,.045,.355,1)}#message:empty{color:transparent;height:0;padding:0 .75rem}#message:empty>*{opacity:0}#message>button{background:none;border:none;padding:0;outline:none;color:#2bbcff;font-weight:700;cursor:pointer;font-size:.93em}.colortest{align-items:center;justify-content:flex-start;background:none;padding:0;margin:0;border:none;width:auto;display:flex;flex:0 1 100%;outline:none;cursor:pointer}.colortest:hover .name>:first-child{display:none}.colortest:hover .name>:last-child{display:block}.colortest:hover .preview{transform:scale(1.2) translateY(1px);border-radius:.5rem}.colortest:hover .preview:after{content:"colorize";transform:scale(1)}li.active{background-color:#d6ffcb}li.active .preview{background:rgb(var(--red),var(--green),var(--blue))}li.active .preview:after{content:"check_small";transform:scale(1)}.numbers{display:inline;font-size:1rem;line-height:1;font-weight:700;font-size:1em}.numbers>span:nth-child(1){font-weight:bolder;color:#00000047;display:inline-block}.numbers>span:nth-child(3){color:#265700;display:inline-block}.numbers>span:nth-child(4){color:#005177;border-left:1px solid #efefef}.numbers>span:nth-child(2){color:#9a003f;border-right:1px solid #efefef}.preview{background:#999;height:2rem;margin:.5rem .75rem;border-radius:.25rem;border:none;box-sizing:border-box;outline:none;flex:0 0 2rem;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),border-radius .2s cubic-bezier(.175,.885,.32,1.275);transition-delay:.1s;will-change:background,transform}.preview:after{font-family:Material Icons;color:var(--textColor);opacity:.7;content:"";position:absolute;display:block;padding:.3rem .375rem;font-size:1.25rem;transform:scale(.5);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),border-radius .2s cubic-bezier(.175,.885,.32,1.275)}.preview:focus{border-radius:.5rem;border:2px solid #eee}.name{line-height:1;font-size:1em;flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#333}.name>:first-child{display:block}.name>:last-child{display:none}.name>button{background:none;border:none;padding:0;outline:none;color:#2bbcff;font-weight:700;cursor:pointer;font-size:.93em}.tags{font-size:.9rem;flex:0 0 auto;color:#707070}.tags>button{color:#707070;border:none;outline:none;margin:0 1rem 0 0;background-color:#f5f5f5;padding:.25rem;border-radius:.25rem;border:1px transparent solid;cursor:pointer}.tags>button:focus{background-color:#fff;color:#000;border:1px #707070 solid}.cmyk{display:none}@media only screen and (max-width: 800px){body,html{width:100%;height:100%;overflow:hidden;position:fixed}.wrapper{flex-direction:column-reverse;height:100%}#middel{position:initial;height:100%;width:100%;padding:.5em}#middel>nav{width:100%;height:3rem;flex:0 0 3rem}#output{width:100%;margin:0;overflow-x:hidden;overflow-y:scroll;max-width:100%}.cmyk,.hue{display:none}#clr-search{margin:0;max-width:100%}.material-icons.searchIcon{padding-left:1rem}#test{height:100;padding:0;border-radius:0;will-change:background,color}#test .grid{grid-template-columns:1fr}#colorswap{display:none}#sidebar-left{flex:0 0 auto;height:auto;padding-bottom:1rem;border-top:1px solid #eee}#sidebar-left>nav{display:none}}#test{background:rgb(var(--red),var(--green),var(--blue));color:var(--textColor);padding:1rem;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.5;font-variant-numeric:tabular-nums}#test *{opacity:.9}#test .bold{font-size:1.25rem;font-weight:700;opacity:.8}#test .digit{font-size:1rem;font-weight:700}#test .prefix{display:inline-block;width:5ch;opacity:1}.grid{display:grid;grid-column:-1;grid-row:-1;grid-template-columns:1fr 1fr;align-items:center}.pad{display:inline-block;width:1ch}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}#tabs{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr;grid-template-areas:"tab-buttons" "tab-content";width:100%;height:100%;max-height:100%;background:#f5f5f5}#tab-buttons{grid-area:tab-buttons;display:flex;flex-direction:row;width:100%;background:#f5f5f5;border-bottom:1px solid #ddd}#tab-buttons>button{flex:1 0 auto;text-align:center;padding:.5rem 0;cursor:pointer;color:#707070;font-weight:700;transition:background-color .2s ease-in-out,color .2s ease-in-out}#tab-content{grid-area:tab-content;display:flex;flex-direction:column;width:100%;max-height:100%;overflow:hidden;height:100%;overflow-y:auto}.tab{display:none;flex:1 0 auto;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;border:none;padding:0;margin:0}.tab.active{display:block}.color-search{background-color:#fff;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%}