.menuPane{min-width:250px;max-width:30%;height:100%;background:#fff;color:var(--text-accent-highlight);font-weight:700;box-shadow:5px 0 5px grey}.menuItem{margin:5px;padding:5px;padding-left:15px;transition:background .1s,color .1s;border-radius:5px}.menuItem:hover{background:var(--main-accent-highlight);color:var(--text-accent-highlight)}.menuHeader{background:var(--main-accent);color:var(--text-accent)}.menuHeader *{vertical-align:middle}.menuHeader div{font-size:130%;width:0;display:inline-block}.toolicon{height:50px;width:50px;margin:7px;min-width:0;font-size:0;padding:5px;overflow:hidden}.toolicon img{height:100%;width:100%}.toolSelected{box-shadow:0 0 0 2px var(--main-accent-highlight),inset 0 0 0 2px var(--main-accent-highlight)}.toolSelected:hover{box-shadow:0 0 0 5px var(--main-accent),inset 0 0 0 2px var(--main-accent)}.coloricon{height:50px;width:50px;font-size:0;border-radius:50%;padding:0;min-width:0;transition:all .2s;margin:7px}.coloricon:hover{-box-shadow:0 0 0 6px var(--main-accent);transform:scale(1.3)}.description{margin:5px}.colorSelected{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--main-accent-highlight)}.colorSelected:hover{box-shadow:0 0 0 4px #fff,0 0 0 8px hsla(0,0%,100%,0)}.stitchGroup{margin-bottom:7px;--transition-time:0.5s;--transition-delay:0.6s}.groupHeader{background:var(--main-accent);color:var(--text-accent);font-weight:700;padding:5px;border-radius:5px;display:flex;justify-content:space-between;align-items:center;transition:max-height var(--transition-time),background .2s;transition:color .2s;transition-delay:height 0s}.groupHeader:hover{background:var(--main-accent-highlight);color:var(--text-accent-highlight)}.groupHighlighted .groupHeader{box-shadow:0 0 0 2px var(--main-accent-highlight),inset 0 0 0 2px var(--main-accent-highlight)}.groupHighlighted .groupHeader:hover{box-shadow:0 0 0 5px var(--main-accent),inset 0 0 0 2px var(--main-accent)}.groupArrow{border:solid transparent;border-left-color:var(--text-accent);border-width:7px 0 7px 11px;margin:0;width:0;height:0;transition:transform var(--transition-time),border-left-color .2s;transition-delay:0s;border-left-color:var(--text-accent-highlighted)}.groupSelected .groupHeader .groupArrow{transform:rotate(90deg)}.groupList{overflow:hidden;transition:all var(--transition-time) ease-in;transition-delay:0s;max-height:0}.groupSelected .groupList{transition:all var(--transition-time) ease-out;transition-delay:var(--transition-delay);max-height:500px}.stitchIcon{height:30px;min-width:30px;width:30px}.listItem{display:flex;align-items:center;justify-content:left}.listItem:hover .stitchIcon{background:var(--main-accent-highlight)}.stitchLabel{transition:all .2s}.listItem.stitchSelected .stitchLabel,.listItem:hover .stitchLabel{color:var(--main-accent-highlight)}.listItem.stitchSelected .stitchIcon{box-shadow:0 0 0 2px var(--main-accent-highlight),inset 0 0 0 2px var(--main-accent-highlight)}.listItem.stitchSelected:hover .stitchIcon{box-shadow:0 0 0 5px var(--main-accent),inset 0 0 0 2px var(--main-accent)}.modalWindow{min-width:300px;max-width:80%;max-height:80%;display:flex;flex-direction:column;background:#fff;color:var(--text-accent-highlight);font-weight:400;border-radius:10px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:5px 5px 5px grey}.windowTitle{font-weight:700;text-align:center;padding:10px;background:var(--main-accent);border-radius:10px 10px 0 0;color:var(--text-accent);min-height:10px}.windowMessage{text-align:center}.windowContent,.windowMessage{display:flex;flex-direction:column}.windowContent{padding:10px;min-height:180px;overflow:scroll}.windowContent::-webkit-scrollbar{width:8px}.windowContent::-webkit-scrollbar-corner{visibility:hidden}.windowContent::-webkit-scrollbar-thumb{border-radius:4px;background:#d3d3d3}.windowButtons{text-align:center;min-height:10px;width:100%;padding:0}.stitch circle:hover{fill:gold}.stitch line:hover{stroke:#0f0}#loop_selection_layer circle{fill:#ff0;opacity:.1}#loop_selection_layer circle.isSelected{fill:#0f0;opacity:.7}#loop_selection_layer circle:hover{opacity:1}#graph,#graph_div{outline:1px solid red;outline-offset:-1px;width:100%;height:100%;position:absolute;touch-action:none;_visibility:hidden}#graph text{font:700 10px sans-serif;font-family:courier;fill:grey;stroke-width:0px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#app{outline-offset:-1px;padding:0}#app,body,html{margin:0;height:100%}body,html{font-family:sans-serif;--main-accent:orange;--main-accent-highlight:gold;--text-accent:#fff;--text-accent-highlight:#b8860b}button{background:var(--main-accent);border:none;padding:5px 5px;margin:10px;border-radius:5px;color:var(--text-accent);font-weight:700;outline:none;min-width:50px;transition:background .2s,color .2s,box-shadow .2s}button.active,button:hover{color:var(--text-highlight-accent);background:var(--main-accent-highlight)}button.img{font-size:0;min-width:0}#wrapper{position:relative;outline-offset:-1px;height:100%}#wrapper .layer{outline-offset:-5px;width:100%;height:100%;background:rgba(0,0,0,.3333333333333333)}#openMenu,#wrapper .layer{position:absolute;top:0;left:0}#selectTool{position:absolute;top:0;right:0}#selectStitchType{position:absolute;bottom:60px;left:0}#selectColor{position:absolute;bottom:60px;left:50px}#testGraph{left:100px}#selectCH,#testGraph{position:absolute;bottom:0}#selectCH{left:10px;width:40px;height:40px}#selectDC{left:70px}#selectDC,#selectSL{position:absolute;bottom:0;width:40px;height:40px}#selectSL{left:130px}#makeStitch{left:210px}#makeStitch,#unmakeStitch{position:absolute;bottom:0;width:40px;height:40px}#unmakeStitch{left:270px}.shadow5px{box-shadow:5px 5px 5px grey}.shadow2px{box-shadow:2px 2px 5px grey}.fade-enter-active{transition:all .2s ease 0s}.fade-leave-active{transition:all .2s ease .1s}.fade-enter-from,.fade-leave-to{opacity:0}#menuWrapper.fade-enter-from>*,#menuWrapper.fade-leave-to>*{transform:translateX(-300px)}#menuWrapper.fade-enter-active>*{transition:all .2s ease 0s}#menuWrapper.fade-leave-active>*{transition:all .2s ease .1s}#modalWrapper.fade-enter-from>*,#modalWrapper.fade-leave-to>*{transform:translate(-50%,-50%) scale(.5)}#modalWrapper.fade-enter-active>*{transition:all .2s ease 0s}#modalWrapper.fade-leave-active>*{transition:all .2s ease .1s}