body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*,:after,:before{box-sizing:border-box}.App{width:400px;height:400px;position:relative;margin:40px auto 0;border:1px dashed #ccc}@media (max-width:480px){.App{width:300px;height:300px}}h1,h2{font-size:20px;color:#3023ae;text-align:center;margin:0 0 15px;padding:0}.selectArea{text-align:center;padding:20px 5px}.selectArea label{color:#3023ae}.selectArea select{background-color:#3023ae;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHBAMAAADOnLEXAAAAJFBMVEUAAAD///////////////////////////////////////////+0CY3pAAAADHRSTlMAYBDPMMfDr61WKA3yNRQHAAAAMElEQVQI12OoYgCC5QyuCgwMTCEMLEkMDGoODAyTFZgsgeKM1psFQPISjUACyAVyAJbiBUAiJnptAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:92% 50%;background-size:10px;color:#fff;-webkit-appearance:none;-moz-appearance:none;border:0;height:34px;padding:0 25px 0 15px}.selectArea select option,.selectArea select option:hover{background-color:#f09;color:#fff;-webkit-appearance:none;-moz-appearance:none}.resultBox{text-align:center;margin-top:30px}.resultBox .row{padding:10px 0}.resultBox input{display:inline-block;margin:0 auto;line-height:35px;border:1px solid #aaa;padding:0;width:100%;max-width:380px}.resultBox button,.resultBox input{-webkit-appearance:none;-moz-appearance:none}.resultBox button{width:auto;padding:13px 12px;background-color:#3023ae;border:0;color:#fff;cursor:pointer}.resultBox button:focus,.resultBox button:hover{background-color:#f09}.App .border{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient(-225deg,#fff,hsla(0,0%,100%,0) 40%,rgba(0,255,255,0) 60%,#0ff),linear-gradient(45deg,#3023ae,#f09)}.App .topLeft{left:0}.App .topLeft,.App .topRight{position:absolute;top:-11px;z-index:10;width:50%}.App .topRight{right:0;transform:rotate(180deg)}.App .bottomLeft{left:0}.App .bottomLeft,.App .bottomRight{position:absolute;bottom:-12px;z-index:10;width:50%}.App .bottomRight{right:0;transform:rotate(180deg)}.App .leftLeft{top:calc(25% - 11px);transform:rotate(90deg)}.App .leftLeft,.App .leftRight{position:absolute;left:calc(-25% - 2px);bottom:auto;z-index:10;width:50%;height:22px}.App .leftRight{top:calc(75% - 11px);transform:rotate(270deg)}.App .rightLeft{top:calc(25% - 11px);transform:rotate(90deg)}.App .rightLeft,.App .rightRight{position:absolute;right:calc(-25% - 2px);bottom:auto;z-index:10;width:50%;height:22px}.App .rightRight{top:calc(75% - 11px);transform:rotate(270deg)}.App .top{top:-11px}.App .bottom,.App .top{position:absolute;left:0;right:0;z-index:10;width:100%}.App .bottom{bottom:-12px}.App .left{left:calc(-50% - 2px);transform:rotate(90deg)}.App .left,.App .right{position:absolute;top:calc(50% - 11px);bottom:auto;z-index:10;width:100%;height:22px}.App .right{right:calc(-50% - 2px);transform:rotate(270deg)}.out{padding:25px 0;text-align:center;margin-top:20px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-moz-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid #f09;width:15px;height:15px;border-radius:3px;background:#fff;cursor:pointer}input[type=range].bottomLeft::-webkit-slider-thumb,input[type=range].topLeft::-webkit-slider-thumb,input[type=range].topRight::-webkit-slider-thumb{margin-top:2px}input[type=range].bottomRight::-webkit-slider-thumb{margin-top:2px}input[type=range]::-moz-range-thumb{border:3px solid #f09;box-shadow:0;height:15px;width:15px;border-radius:3px;background:#fff;cursor:pointer}input[type=range]::-ms-thumb{border:3px solid #f09;height:15px;width:15px;border-radius:3px;background:#fff;cursor:pointer}
/*# sourceMappingURL=main.5df9886c.chunk.css.map */