*{box-sizing:border-box;font-family:sans-serif}body{padding:0;margin:0;background-color:#f4f4f4}.header{max-width:initial;margin-left:20px;margin-right:20px}#image-color{height:50px;position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:bold;text-shadow:0 0 3px black}div#monochrome-logos{display:flex;align-items:flex-start;position:absolute;left:0;top:40px;right:0;bottom:0}.settings-container{padding:40px 20px;background-color:#25253a;color:#fff;height:100%;flex:300px 0 0;overflow-y:auto}.separator{height:1px;background:#fff;opacity:.5}.logos-container{position:relative;height:100%;display:flex;align-items:center;flex-grow:1;background:url(/kit-creator/tools/monochrome-logos/static/checker.svg);background-size:30px 30px;cursor:crosshair}.logo-container,.result-container{padding:100px;width:50%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.logos-switcher,.settings-mode{display:none}canvas{height:100%;width:100%;object-fit:contain}div#image-chooser-mobile{position:absolute;background:rgba(0,0,0,0.8);left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.image-chooser-mobile-preview{width:200px;height:100px;z-index:1}.image-chooser-mobile-buttons{margin-top:20px;z-index:1}.image-chooser-mobile-clicktrap{position:absolute;top:0;right:0;left:0;bottom:0}.button{display:inline-flex;align-items:center;font-size:16px;background-color:#f0f0f0;color:#000;padding:5px;border-radius:5px;transition:background-color 100ms ease-in-out;text-decoration:none;border:0;font-weight:normal;cursor:default}.button:hover{background-color:#fff}.button.selected{background-color:silver}.color_picker_inner button:hover:not(.secondary){background-color:#e0e0e0}.color_picker_inner button.sp-cancel{background:0}.settings-subsection{margin:30px 0}.settings-subsection:first-child{margin-top:0}.button-container{margin:10px 0}.button-container:first-child{margin-top:0}.settings-subsection h3:first-child{margin-top:0}.settings-subsection h4:first-child{margin-top:0}.hue-container{margin:20px 0}.hue-container:first-child{margin-top:0}.hue-container h4{margin-bottom:10px}.button>svg{width:20px;height:20px;margin-right:5px}#image-upload{display:none}.color-block{display:flex;align-items:center;justify-content:space-between;width:120px}.color-block>div{display:flex;align-items:center}.color-block-preview{width:20px;height:20px;border:1px solid #fff}.color-block-preview input[type="color"]{display:none}.color-block-name{margin-left:5px}button.color-block-remove{background:0;border:0;padding:2px;display:flex;color:#fff;opacity:.7;transition:opacity 100ms ease-in-out}button.color-block-remove:hover{opacity:1}button.color-block-remove>svg{width:20px;height:20px}input[type="range"]{width:100%;margin:0}.icon-button{border-radius:0;color:#fff;background:#000}.icon-button:hover{background:#000;color:#fff}.icon-button>svg{width:24px;height:24px;margin:0}label{display:revert}#color_picker_container{position:fixed;display:none;width:100%;height:100%;left:0;top:0;justify-content:center;align-items:center;z-index:20}.color_picker_inner{background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,0.35);padding:10px}.color_picker_header{padding:10px 0;font-weight:bold;display:flex;align-items:center;justify-content:center}.color_picker_pick_color_container{display:flex;justify-content:center}h4{display:flex;align-items:center}h4>*:not(:last-child){margin-right:10px}.color-block-preview[disabled]{opacity:.6}.overlay{background-color:rgba(0,0,0,0.75);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%}.overlay.hidden{display:none}@media(max-width:1439px){.settings-container{flex-basis:260px}.logo-container,.result-container{padding:20px}}@media(max-width:1023px){div#monochrome-logos{flex-direction:column;overflow:hidden}.settings-container{order:2;width:100%;flex-grow:1}.logos-container{width:100%;height:80vw;flex-grow:0}.logo-container,.result-container{width:100%;padding:20px}.logos-switcher{display:block;position:absolute;right:0;top:0}.settings-mode{display:block;position:absolute;left:0;top:0}}