.diagramModal{
   width: 96%;
   margin: auto -48%;
   top: 2%;
}

.diagramModal .modal-body{
   min-height: 480px;
   text-align: center;
   padding: 5px;
}

.diagramModal .btn-group{
   padding-bottom: 1%;
   width: 100%;
}

.diagramModal .shape-btn{
   min-width: 60px;
   min-height: 60px;
}

.diagramContainer{
   border: 1px solid gray;
   display: inline-block;
   background: transparent;
   margin-left: 10%;
   position: relative;
   float: left;
   overflow: hidden;
}

.diagramContainer:not(.component){
   float: none;
   margin-left: 0%;
}

.diagramContainer svg .link {
   z-index: 2;
}

.diagramContainer .html-element {
   position: absolute;
   pointer-events: none;
   -webkit-user-select: none;
   box-sizing: border-box;
   z-index: 2;
}

.diagramContainer .html-element button, .diagramContainer .html-element div {
   /* Enable interacting with inputs only. */
   pointer-events: auto;   
}

.diagramContainer .html-element div.linker {
   top: -25px;
   left: calc(50% - 12px);
   position: absolute;
   font-size: 25px;
   cursor: pointer;
}

.diagramContainer .html-element button.delete {
   color: white;
   border: none;
   background-color: #C0392B;
   border-radius: 20px;
   width: 15px;
   height: 15px;
   line-height: 15px;
   text-align: middle;
   position: absolute;
   top: -15px;
   left: -15px;
   padding: 0;
   margin: 0;
   font-weight: bold;
   cursor: default;
}

.diagramContainer .html-element button.delete:hover {
   width: 20px;
   height: 20px;
   line-height: 20px;
}

.diagramContainer .selected-shape{
   outline: 2px dashed #000;
}

.diagramContainer .connection-wrap:hover{
   opacity: 0;
   stroke-opacity: 0;
}

.diagramModal .propertiesContainer{
   float: left;
   width: 30%;
   margin-left: 10%;
   position: relative;
}

.diagramModal .shape-btn[data-shape="circle"]{
   background: url('img/circle.png') center center no-repeat;
   background-size: 80% 80%;
}
.diagramModal .shape-btn[data-shape="ellipse"]{
   background: url('img/ellipse.png') center center no-repeat;
   background-size: 80% 50%;
}
.diagramModal .shape-btn[data-shape="square"]{
   background: url('img/square.png') center center no-repeat;
   background-size: 80% 80%;
}
.diagramModal .shape-btn[data-shape="rect"]{
   background: url('img/rect.png') center center no-repeat;
   background-size: 80% 50%;
}
.diagramModal .shape-btn[data-shape="rhombus"]{
   background: url('img/rhombus.png') center center no-repeat;
   background-size: 80% 50%;
}

.componentContainer .diagramContainer{
   border: none;
}

.componentContainer .diagramContainer * {
   pointer-events: none;
}