@charset "UTF-8";.control{margin-top:2rem;padding-left:20px;padding-right:20px}@media screen and (min-width:1000px){.control{position:fixed;top:0;bottom:0;right:0;width:400px}}.control__title{font-size:2.5rem;text-align:center}.amount{margin-top:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.amount__item{margin-left:2rem;margin-right:2rem;margin-top:0.75rem;margin-bottom:0.75rem;width:100%;max-width:300px}.amount__item label{display:block;text-align:center;font-size:1.75rem}.amount__range{width:100%;max-width:300px;margin-top:0.5rem}.hslCode{margin-top:2rem;font-size:1.75rem;text-align:center}.hslCode span{font-weight:bold}.divid{margin-top:3rem;text-align:center}.divid label{font-size:1.75rem;margin-right:0.5em;vertical-align:middle}.divid label__select{width:100px}.colorBar{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-left:3px;margin-right:3px;height:60px;width:calc(100% - 6px)}.colorBar__item{width:calc(100% / 361);height:100%}.colorBar__item:hover{cursor:pointer;cursor:url(../images/dropper.svg),auto}.colorTile{margin-top:3rem}.colorTile__title{text-align:center;font-size:2rem}.colorList{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0;margin-top:4rem}.colorList__item{margin-left:3px;margin-right:3px;margin-bottom:10px}.colorList__tile{display:block;width:50px;height:50px}.colorList__tile:hover{cursor:pointer;cursor:url(../images/dropper.svg),auto}.modal--open{overflow:scroll;-ms-overflow-style:none;scrollbar-width:none}.modal--open::-webkit-scrollbar{display:none}.selectedColor--close{display:none}.selectedColor{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;background-color:#fff;padding:20px 20px 80px 20px;overflow:auto}.selectedColor__title{text-align:center;font-size:3em}.selectedColor__wrapper{margin-top:2em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.selectedColor__close{position:fixed;top:20px;right:40px;padding:10px;font-size:1.5em;cursor:pointer}.selectedColor__close:before{content:"";display:inline-block;width:1em;height:1em;margin-right:0.25em;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.7929%207.49998L1.14645%201.85353L1.85356%201.14642L7.50001%206.79287L13.1465%201.14642L13.8536%201.85353L8.20711%207.49998L13.8536%2013.1464L13.1465%2013.8535L7.50001%208.20708L1.85356%2013.8535L1.14645%2013.1464L6.7929%207.49998Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:1em;vertical-align:middle;position:relative;top:-0.1em}.selectedColor__close:hover:before{width:1.2em;height:1.2em;background-size:1.2em}.selectedColor .code:before{content:"";display:inline-block;width:1em;height:1em;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M9%209H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h9a2%202%200%200%200%202-2v-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");background-size:contain;margin-right:0.5em}.selectedColor .code:hover{text-decoration:underline;cursor:pointer}.selectedColor__datas{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.colorCode{margin-left:1rem;margin-right:1rem;margin-top:1rem}.colorCode__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.colorCode__item .label{display:inline-block;width:2.5em}.colorProperty{margin-left:1rem;margin-right:1rem;margin-top:1rem}.colorProperty__item .label{display:inline-block;width:7em}.selectedColor__tile{width:120px;height:120px;margin-top:1rem;margin-left:1rem;border:1px dotted #999}.reference{margin-top:5rem}.reference__title{font-size:2em;text-align:center}.reference ._title{font-size:1.5em;text-align:center}.reference ._wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-top:1.5rem;margin-left:1.5rem;margin-right:1.5rem}.reference ._tile{width:80px;height:80px;border:1px dotted #aaa;margin-top:0.5rem}.reference .datas{margin-left:1rem;font-size:0.875rem}.reference .datas .label{display:inline-block;width:2.5em}.convert{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.complement,.grayscale,.invert{margin-left:1.5rem;margin-left:1.5rem;margin-top:1.5rem}.tetrad,.triad{margin-top:2rem}.tetrad__wrapper,.triad__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.copyMessage{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;line-height:60px;text-align:center;background-color:#666;color:#fff;font-size:24px}.copyMessage.copyMessage--open{display:block}