html{
    height:100%;
}

body{
    height:100%;
}

div#app{
    height:100%;
}

.header {
    height:60px;
    background-color: rgb(0, 130, 255);
    margin-bottom: 5px;
}


div#content{
    height:calc(100% - 40px - 5px);
}



/*メニュー開閉フラグ*/
#menu-checkbox{
    display:none;
}

#menu-checkbox:checked ~ #canvas-wrapper {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

#menu-wrapper {
    vertical-align:top;
    overflow: auto;
    display: inline-block;
    /* z-index: 9999; */
    width: 300px;
    height: 100%;
    background: #eee;
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

#menu-header {
    width: 100%;
    height: 33px;
    padding: 8px;
    text-align: right;
    background-color: rgb(0, 130, 255);
}

/*ハンバーガーアイコンのラッパー*/
#menu-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}
  
/*ハンバーガーアイコン*/
#menu-open span, #menu-open span:before, #menu-open span:after {
    position: absolute;
    height: 3px; /*線の太さ*/
    width: 25px; /*長さ*/
    border-radius: 3px;
    background: #FFF;
    display: block;
    content: '';
    cursor: pointer;
}
#menu-open span:before { bottom: -8px; }
#menu-open span:after { bottom: -16px; }


#ribbon-wrapper {
    vertical-align:top;
    overflow: auto;
    display: inline-block;
    /* z-index: 9999; */
    width: 100%;
    height: 100px;
    background: #eee;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.15);
}


#canvas-wrapper{
    width: calc(100% + 250px);
    height: 2000px;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
    transition: .2s ease-in-out;
}

#canvas-content{
    display: inline-block;
    width: calc(100% - 300px);
    height: 100%;
}


#svg{
    width: 100%;
    height: 100%;
}

g{
    cursor:pointer;
}

.contextmenu{
    display:block;
    position:fixed;
    width:200px;
    margin: 0px;
    padding: 0px;
    /* border:1px solid #999; */
    z-index: 9999;
}
.contextmenu li{
    cursor:pointer;
    border:1px solid #CCC;
    background-color:#fff;
    list-style: none;
    margin-left: -20px;
    padding: 2px;
}


.symbolSelected rect, .symbolSelected circle{
    stroke: red;
    stroke-width: 4;
}