body{width: 100% !important;;margin: 0 !important;;padding: 0 !important;  overflow: hidden !important;} 
body{
 padding:0px;margin:0px;
}
.container{

 width: 100%;;margin: 0 !important;padding: 0 !important;
}
canvas {
 position:absolute;
 border: 1px solid black;
 left:0px;
  z-index:1;
   }
  
.left{
 position:absolute;
 width:140px;height:180px;
 border-right:1px solid #000;
 z-index:2;
}
.notes {
 position: absolute;
 top: 0;
 left: 0px;
 width: 60px;
 height: 100%;
 display:inline-flex;
 flex-direction: column;
 justify-content:flex-start;
 align-items: center;
 font-size: 16px;
 color: #333;

 padding:0x;
 z-index:2; 
}

.note {
 width: 100%; margin:0px;padding:0px;
 display:inline-flex;
 height:30px;line-height:30px;
 margin:0px; padding:0px;
 justify-content: center;
 background-color: #000;
 align-items: center !important;
 border-top:1px solid #ccc;font-size:13px;color:#ffffff;
}

.cust-bottom{

 display:inline-flex;justify-content:flex-start;
}
.samplebnt{
 background-color: red;
 width:40px;height:40px;justify-content: center;align-items: center;padding:0px;margin:0px;

}
.samplebnt i{font-size:40px;color:#e6e6e6;opacity:0.8;}