html, body {
  border: 0;
  min-height:300px;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  scroll:true;
}
#blocklyArea {
  border: 0;
  min-height:200px;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}


.mygrid {
  border: 0;
  height: 99%;
  margin: 0;
  padding: 0;
  width: 100%;
}
.expand {
  height: 100%;
  width: 100%;
}


#.ui.sidebar {
  border: 0;
  height: 75%;
  margin: 0;
  padding: 0;
  width: 100%;
}


#blocklyDiv {
  border: 0;
  height: 99%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#codeArea {
  border: 0;
  height: 15%;
  margin: 0;
  padding: 0;
  width: 100%;
}


#pyCodeWrapper {
	border: 0;
	height: 30%;
	margin: 0;
	padding: 10px;
	width: 100%;
}

#pyCodeArea {
	border: 0;
	height: 100%;
	margin: 0;
	margin-top:20px;
	padding: 0;
	width: 100%;
}
.topbar{
	padding:5px;
}

.edittext {
width:100%;
height:90%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.ui.secondary.menu .item{
padding-left : 0px !important;
padding-right : 0px !important;
padding-buttom : 10px !important;
padding-top : 10px !important;
}

#toolbar{
height: 20px;
margin:5px !important;
}
/* -------------- MODAL POPUP ------------------*/

.ui.results.sidebar{
height:75% ! important;
background: #fffe;
}
#resultplots{
  display:none;
	background: #ffffffcc;
	border-radius:10px;
  position: absolute;
  top: 50%;
  bottom:1%;
  left: 3%;
  right:3%;
  color: white;
  /*transform: translate(-90%,-50%);
  -ms-transform: translate(-90%,-50%);*/
}


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

.visible{
display:block !important;
}



svg {
  position: absolute;
}




/*---------PIANO ----------*/


.nowplaying {
      font-size: 30px;
      line-height: 1;
      color: #eee;
      text-shadow: 0 0 5rem #028ae9;
      transition: all .07s ease;
      min-height: 20px;
    }

.keys {
      display: block;
      width: 100%;
      height: 150px;
      max-width: 880px;
      position: relative;
      margin: 40px auto 0;
      cursor: none;
    }

.key {
      position: relative;
      border: 4px solid black;
      border-radius: .5rem;
      transition: all .07s ease;
      display: block;
      box-sizing: border-box;
      z-index: 2;
    }

.key:not(.sharp) {
      float: left;
      width: 10%;
      height: 100%;
      background: rgba(255, 255, 255, .8);    
    }

.key.sharp {
      position: absolute;
      width: 6%;
      height: 60%;
      background: #000;
      color: #cee;
      top: 0;
      z-index: 3;
    }

.key[data-note="C#"] {
      left: 7%;
    }

.key[data-note="D#"] {
      left: 17%;
    }

.key[data-note="F#"]  {
      left: 37%;
    }

.key[data-note="G#"] {
      left: 47%;
    }

.key[data-note="A#"] {
      left: 57%;    
    }

.key[data-note="2C#"] {
      left: 77%;    
    }

.key[data-note="2D#"] {
      left: 87%;    
    }

.playing {
      transform: scale(.95);
      border-color: #028ae9;
      box-shadow: 0 0 1rem #028ae9;
    }

.hints {
      display: block;
      width: 100%;
      opacity: 0.5;
      position: absolute;
      bottom: 7px;
      font-size: 11px;
    }

