*{
     font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
   }
   
   body{
     background:white;
     color: black;
   }
   
   .audioNode {
	   fill:#BBB;
     stroke-width:1px;
	   stroke:black;
	   color:black;
   }
   .audioNode:hover {
	   stroke:red;
   }

   .play{
	   fill:#f99;
   }

   .audioNodeDrag {
     cursor: move;
     opacity:0.25;
	   fill:#BBB;
     stroke-width:1px;
	   stroke:black;
	   color:black;
   }
   
   .param {
     fill:red;
   }
   .param:hover{
     fill:orange
   }
   
   .label {
     stroke:black;
     font-size:8px;
     user-select: none;
     -moz-user-select: none; /* Firefox */
      -webkit-user-select: none; /* Safari、Chromeなど */
      -ms-user-select: none; /* IE10かららしい */
   }
   
   .input {
     fill:red;
   }
   .input:hover{
     fill:orange
   }
 
   .output{
     fill:blue;
   }
   .output:hover{
     fill:lightblue
   }
   
   .line {
     stroke: black;
     stroke-width: 4px;
     stroke-linecap: round;
     fill:none;
   }
   .line:hover{
     stroke:red;
   }
   
   .line-drag {
     opacity: 0.25;
     stroke: black;
     stroke-width: 4px;
     stroke-linecap: round;
     fill:none;
     cursor:crosshair;
   }
   
   .tip {
     opacity:0.5;
     font-size:10pt;
     stroke:red;
   }
   
   #content {
     margin:0;
     padding: 0;
     position: relative;
     z-index: 0;
   }
   
   .prop-panel{
     opacity: 0.85;
     position: absolute;
     visibility: hidden;
     display:block;
     background:#eee;
     color:black;
     left:100px;
     top:100px;
     width:300px;
     min-height:300px;
     overflow-y:none;
     overflow-x:none;
     box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
     border-radius:4px 4px 4px 4px;
   }
   
   .prop-dummy{
     visibility: visible;
     opacity: 0.5;
     z-index: 0;
   }
   
   #panel-header {
     text-align:center;
     background:gray;
   }
   
   #panel-content table {
     width:95%;
     margin:auto;
     overflow-y:auto;
     overflow-x:none;
     border-collapse: collapse;
   }
   #panel-content  table td,#panel-content table th {
     border-bottom:1px solid black;
     font-size: 10px;
   }
   
   #panel-content  table td:hover {
     background: lightcoral;
     cursor: pointer;
   }
   
   #panel-content table td input[type="text"]{
     border:none;
     background: #333;
     color:white;
     width:90%;
     height:85%;
     padding:2px;
   }
   
   #panel-content table td input[type="text"][readonly="readonly"]{
     background:none;
     color:black;
   }
   
   #panel-content  table th {
    background:darkgray;  
   }
   
   .panel-close {
     display:block;
     position:absolute;
     top:0px;
     padding:0px;
     margin:0px;
     right:5px;
     width:15px;
     height:20px;
     text-align: center;
   }
   .panel-close:hover{
     color:red;
     cursor:default;
   }
   
   svg {
     z-index: 10;
   }