:root{--active-color: #007bff}#controls{position:absolute;width:100%;text-align:left;z-index:100;display:block}body{margin:0}.style-grey{background-color:#789}.input-overlay{position:absolute;top:50px;left:20px;background-color:#ffffffb3;padding:10px;z-index:999;border:none;border-radius:5px;max-height:calc(100vh - 100px);overflow:auto}input[type=color]{width:2em;height:2em}.key-input,.value-input{padding:2px;margin-right:2px;flex:1}.invalid-input{outline:2px solid red}.key-input{width:1em;text-align:center}.input-button{padding:4px 12px;background-color:var(--active-color);color:#fff;border:none;border-radius:5px;cursor:pointer}.input-button:hover{background-color:#0056b3}.rule{border:1px solid #ccc;padding:2px}.spinner-overlay{display:none;position:fixed;bottom:20px;right:20px}.spinner{width:50px;height:50px}svg{animation:2s linear infinite svg-animation;max-width:100px}@keyframes svg-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}circle{animation:1.4s ease-in-out infinite both circle-animation;display:block;fill:transparent;stroke:var(--active-color);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:280;stroke-width:10px;transform-origin:50% 50%}@keyframes circle-animation{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}to{stroke-dashoffset:280;transform:rotate(360deg)}}