.row {
  display: flex;
}
#canvasSideTools{
  height: 80vh;
}

#canvasDiv{
  height: 97vh;
}



.animate {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px
  transition-duration: .6s;
}





.btn-scale {
  position:absolute !important;
  right : 30px;
  top: 50px;
  width : 50px;
}   

.btn-undo {
  position:absolute !important;
  right : 30px;
  top : 100px;
  width : 50px;

}
.btn-showGrid {
  position:absolute !important;
  right : 30px;
  top:  150px;
  width : 50px;

}
.btn-magneticGrid {
  position:absolute !important;
  right : 30px;
  top: 200px;
  width : 50px;

}

.mif-undoPoint {
  content: url(/static/undo.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}
.mif-unlock {
  content: url(/static/unlock.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}
.mif-scale {
  content: url(/static/scale.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}
.mif-grid {
  content: url(/static/grid.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}







.fit-img{
  height: 100%; 
  width: 100%; 
  object-fit: contain;
}




#compassDiv {
  position:absolute !important;
  left : 25px;
  top : 20px;
  width : 60px;
  height: 60px;
}

.btn-audioSource {
  position:absolute !important;
  left : 30px;
  top : 100px;
  width : 50px;

}

.btn-listener {
  position:absolute !important;
  left : 30px;
  top:  150px;
  width : 50px;

}

.btn-editor {
  position:absolute !important;
  left : 30px;
  top: 200px;
  width : 50px;
}

.mif-listener {
  content: url(/static/listener.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}
.mif-selectTool {
  content: url(/static/selectTool.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}
.mif-audioSource {
  content: url(/static/audioSource.svg);
  width: 24px; 
  height: 24px;
  margin-top: 5px;
}



.custom-overlay {
  position:absolute; 
  bottom:0; 
  left:0; 
  right:0; 
  top:0;
  background-color: rgba(255, 255, 255, 0.4);
}

#editorDivMessage {
  position:absolute;
  left:0; 
  right:0; 
  top:0;
  opacity: 0.0;
  z-index: 10;
  display: none;
}