#root{font-family:Arial,Helvetica,sans-serif;height:100%;margin:0;overflow:hidden;overscroll-behavior:contain;padding:0}#root,nav{display:flex;left:0;position:absolute;top:0;width:100%}nav{align-items:center;background:#fff;box-sizing:border-box;height:50px;justify-content:space-between;z-index:2;& h1{align-items:center;border:2px solid #000;border-radius:15px;box-sizing:border-box;font-size:24px;height:auto;justify-content:center;margin-left:10px;padding:5px 10px;transform:skewX(-10deg);width:auto}& div{flex-direction:row;justify-content:right;& h2{border-radius:0;font-size:18px;margin-right:5px;padding:6px;&:hover{cursor:pointer;text-decoration:underline}&.selectedMenu{text-decoration:underline}}}}input:hover{cursor:pointer}input[type=checkbox]{height:0;opacity:0;width:0}.switch{border:2px solid gray;border-radius:12px;box-sizing:border-box;display:block;height:20px;transition:.5s;width:40px;&:hover{cursor:pointer}&>.switchButton{background:red;border:2px solid dimgray;border-radius:50%;height:16px;margin:-2px 0 0 10px;position:absolute;transition:.5s;width:16px}&>.switchButtonOn{background:#32cd32;margin-left:-10px}}#scenario{height:calc(100vh - 50px);left:0;top:50px;width:100%}#scenario,ul{position:absolute}ul{border-top:1px solid gray;box-sizing:border-box;display:flex;flex-direction:column;height:calc(100vh - 25px);list-style:none;margin:0;overflow-x:hidden;overflow-y:scroll;padding:0;right:-200px;top:25px;transition:.3s;width:200px;z-index:1}.expandMenu{right:0;transition-delay:.3s;visibility:visible}.collapsedMenu{right:-200px;transition-delay:.3s;visibility:hidden}li{align-items:center;background:#fff;border-bottom:1px solid gray;box-sizing:border-box;display:flex;font-size:14px;justify-content:space-between;padding:5px;width:100%;&.spacer{background:repeating-linear-gradient(45deg,#d3d3d3,#d3d3d3 4px,gray 6px,gray 10px,#d3d3d3 12px);min-height:25px}& a{align-items:center;color:#000;display:flex;font-weight:600;text-decoration:none;transition:.1s ease-in-out;width:100%;&:visited{color:#000}&:active,&:hover{cursor:pointer;text-decoration:underline}&:active{transform:scale(90%)}& span>svg{height:25px;padding-left:5px;padding-right:10px;width:25px}&#share-link>span{color:#1da1f2}&#share-facebook>span{color:#3b5998}&#share-twitter>span{color:#1da1f2}&#share-linkedin>span{color:#0077b5}&#share-telegram>span{color:#08c}&#share-whatsapp>span{color:#25d366}&#share-reddit>span{color:#ff5700}}& div{display:flex;flex-direction:row;padding-left:2px;padding-right:2px;& button,& div{margin-right:3px}& button{align-items:center;background:#fff;border:1px outset gray;border-radius:8px;box-sizing:border-box;display:flex;font-size:12px;justify-content:center;width:26px;& svg{filter:drop-shadow(0 0 3px white)}}}&:hover{background:#87cefa;cursor:pointer}}#copyLinkButton{background:#fff;border:1px outset gray;border-radius:12px;box-sizing:border-box;cursor:pointer;font-size:15px;margin:5px;width:100%;&:hover{text-decoration:underline}}#linkBox{background:#fff;border:1px solid gray;box-sizing:border-box;height:200px;resize:none;width:100%}#selector{background:#fff;border:1px solid gray;border-radius:0 0 25px 25px;box-sizing:border-box;height:25px;left:50%;padding-left:14px;padding-right:14px;position:absolute;text-align:center;top:50px;transform:translateX(-50%);width:280px;z-index:1}#selector,#selector>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between}#selector>div{width:60px}#selector>div>button{align-items:center;background:#d3d3d3;border:2px outset silver;border-radius:10px;box-sizing:border-box;cursor:pointer;display:flex;font-size:12px;height:18px;justify-content:center;width:28px}#selector>div>button.active,#selector>div>button:active{border:2px inset silver}#openColors{background:conic-gradient(in hsl longer hue,red,red)!important;filter:grayscale(0);transition:.3s ease-in-out}#openColors:disabled{cursor:not-allowed;filter:grayscale(75%)}#visibility{background-color:#fff;border:1px solid gray;border-radius:0 0 25px 25px;flex-direction:row;height:25px;left:50%;top:49px;transform:translateX(-50%);width:80px;z-index:1}#colorSwatch,#visibility{align-items:center;display:flex;justify-content:center;position:absolute;transition:.3s ease-in-out}#colorSwatch{background:#fff;border-radius:0 25px 0 0;border-right:1px solid gray;border-top:1px solid gray;bottom:0;flex-direction:column;height:275px;left:0;width:190px}#colorSliders{display:flex;flex-direction:row}#colorSliders,#colorValues{margin-bottom:5px;padding-left:15px;padding-right:15px}#colorValues{height:53px;margin-top:5px;width:100%}#colorValues,#colorValues>div{align-items:center;box-sizing:border-box}#colorValues>div{display:flex;flex-direction:row;font-size:12px;justify-content:space-between;margin:2px}#colorValues>div>input[type=number]{border:1px solid gray;border-radius:4px;box-sizing:border-box;height:16px;text-align:center;width:50px}#colorValues>div>input[type=text]{font-size:12px;height:12px;width:100%}#colorValues>div>button{font-size:12px;height:18px;text-align:center}.colorButtons{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;justify-content:stretch;margin-bottom:2px;margin-top:2px;padding-left:15px;padding-right:15px;width:100%}.colorButtons>button{background:#d3d3d3;border-bottom:2px outset gray;border-top:2px outset gray;box-sizing:border-box;cursor:pointer;font-size:10px;height:18px;text-shadow:0 0 2px #fff;width:50%}.colorButtons>button:hover{background:#add8e6}.colorButtons>button:active{background:#87cefa}.colorButtons>button.active{background:#87cefa;border-bottom:2px inset gray;border-top:2px inset gray}.colorButtons>button:first-child{border-left:2px outset gray;border-radius:12px 0 0 12px}.colorButtons>button:first-child.active{border-left:2px inset gray}.colorButtons>button:last-child{border-radius:0 12px 12px 0;border-right:2px outset gray}.colorButtons>button:last-child.active{border-right:2px inset gray}slider-thumb{border:2px solid silver;border-radius:50%;box-shadow:0 0 2px 1px #000;box-sizing:border-box;cursor:pointer;height:15px;position:absolute;width:15px}hue-light-map{border:1px solid #000;box-sizing:border-box;display:block;height:141px;margin:5px;padding:0;position:relative;width:142px}hue-light-map>canvas{height:100%;left:0;position:relative;top:0;width:100%}hue-light-map>slider-thumb{transform:translate(-9px,-9px)}saturation-slider{height:140px;position:relative;width:12px}saturation-slider>div{border:1px solid #000;border-radius:12px;box-sizing:border-box;height:100%;margin-left:6px;margin-top:5px;width:100%}saturation-slider>slider-thumb{transform:translate(4px,-1px)}@media screen and (max-width:700px){nav{& h1{font-size:3.5vw;width:15vw}& div{& h2{font-size:4vw}}}ul{height:calc(100vh - 50px);right:-35vw;top:50px;width:35vw;& li{font-size:3vw;padding-left:1vw;padding-right:1vw;& div{& button{font-size:4.5vw;height:4.5vw;min-width:4.5vw;width:4.5vw}}}}slider-thumb{height:19px;width:19px}saturation-slider>slider-thumb{transform:translate(2px,-1px)}}
/*# sourceMappingURL=main.e462123d.css.map*/