:root{--primary-color:#302ae6;--secondary-color:#536390;--font-color:#424242;--bg-color:#fff;--heading-color:#292922}[data-theme=dark]{--primary-color:#9a97f3;--secondary-color:#818cab;--font-color:#e1e1ff;--bg-color:#161625;--heading-color:#818cab}*{font-family:monospace}body,html{background-color:#fff;background-color:var(--bg-color);color:#424242;color:var(--font-color);height:100%;margin:0}a,a:visited{color:#302ae6;color:var(--primary-color)}.App{font-family:sans-serif;min-height:100vh;position:relative;text-align:center}.content{margin-bottom:-2.5rem;padding:1em 1em 2.5em}.footer{align-items:center;bottom:0;display:flex;height:2.5rem;justify-content:center;position:absolute;width:100%}.infoText{color:#536390;color:var(--secondary-color);margin:1em}.top{background:linear-gradient(90deg,cyan 10%,purple 40%,#ff1493 90%);height:10px;position:relative}h1{color:#536390;color:var(--secondary-color);font-size:2rem;text-transform:uppercase}:root{--link-color:#697fb3;--link-color-hover:#000;--input-color:#99a3ba;--input-border:#cdd9ed;--input-background:#fff;--input-placeholder:#cbd1dc;--input-border-focus:#275efe;--group-color:var(--input-color);--group-border:var(--input-border);--group-background:#eef4ff;--group-color-focus:#fff;--group-border-focus:var(--input-border-focus);--group-background-focus:#678efe}.colors-list{display:grid;margin:1em 0 0}.color-row{display:grid;grid-template-columns:minmax(80px,120px) 1fr 1fr 1fr 1fr}.colorItem{justify-self:start;line-height:2em}.colorItem>*{background:none}.absDiff,.bDiff,.gDiff,.rDiff{background:#ff00001a;line-height:2em;min-width:35px;width:100%}.gDiff{background:#00ff001a}.bDiff{background:#0000ff1a}.absDiff{background:#0000001a}.colors-list__color{border:0;color:#697fb3;color:var(--link-color);cursor:pointer;font-size:125%;line-height:65%;margin:.1rem .3rem;padding:.3rem .5rem .3rem 2.2rem;position:relative;text-align:right;text-transform:uppercase}.colors-list__color:hover{color:#000;color:var(--link-color-hover)}.colors-list__color:after{background:var(--color);border-radius:50px;box-shadow:0 0 0 1px #00000080;content:"";height:1.2rem;left:5px;position:absolute;top:1px;width:1.2rem}.colorInputContainer{display:inline-block}.colorInput{align-items:center;display:flex;position:relative}.colorInputField{display:flex;float:left;margin:5px 0;padding-right:15px;width:120px}.colorInput:first-child{margin-right:5px}.colorInput>input,.colorInput>label{border:1px solid #cdd9ed;border:1px solid var(--group-border);box-sizing:border-box;color:#99a3ba;color:var(--group-color);font-family:inherit;line-height:22px;margin:0;padding:6px;transition:background .3s ease,border .3s ease,color .3s ease}.colorInput>label{background:#eef4ff;background:var(--group-background);border-radius:6px 0 0 6px;font-weight:700;min-width:7em;text-align:center}.colorInput>input{background:#fff;background:var(--input-background);border-left:none;border-radius:0 6px 6px 0;color:#99a3ba;color:var(--input-color);min-width:90px;width:15vw}.colorInput>input::placeholder{color:#cbd1dc;color:var(--input-placeholder)}.colorInput>input:focus{border-color:#275efe;border-color:var(--input-border-focus);outline:none}.colorInput>input:hover{background:#f8f8ff}.colorInput:focus-within>label{background:#678efe;background:var(--group-background-focus);border-color:#275efe;border-color:var(--group-border-focus);color:#fff;color:var(--group-color-focus)}.clearInputBtn{background:none;border:none;color:#888;cursor:pointer;font-size:1.1em;line-height:1;padding:0;position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2}.header-row{background:#eef4ff;background:var(--group-background);border-bottom:1px solid #cdd9ed;border-bottom:1px solid var(--group-border);border-radius:6px 6px 0 0;color:#99a3ba;color:var(--group-color);padding:5px}.header-row>div{font-size:1.2em;font-weight:700;padding:0 5px}.colors-list{border:1px solid #cdd9ed;border:1px solid var(--group-border);border-radius:6px}.colors-list>.color-row:last-child>div:first-child{border-radius:0 0 0 6px}.colors-list>.color-row:last-child>div:last-child{border-radius:0 0 6px 0}
/*# sourceMappingURL=main.08931cf9.css.map*/