.draw2d_HybridPort {
    border: 10px solid red !important;
    background-color: red !important;
    outline: none !important;

}

.schemaConnection {
    stroke-dasharray: none;
}

.deleteConnection {
  color: red;
}

.context-menu-item .color {
  height:2mm;
  padding-right:20px;
}
.groundingConnection {
    stroke: rgb(0, 150, 33);
    /* stroke-width: 10px !important; */
    /* color: rgb(255, 255, 0); */
    /* stroke-dasharray: 20, 15;  */
}

#colors {
    margin: 50px 0 0 10px;
}

#toolbar { 
    margin-left: 10px !important;
}

#colors ul{
    margin: 0;
    padding: 0;
}

#schemaContainer {
    top: 0;
    left: 0;
    /* background-color: thistle; */
    position: relative;
    z-index: 1;
    
}

button.generatePdfSchema {
  margin-bottom:10px;
}


#printBox {
  /* display: flex; */
  position:absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 80px 150px 80px 150px;
  /* right: calc(0%);
  left: calc(0%); */
  /* background-color: aqua;    */
  transform-origin: left top;
  z-index: -1;
}

#canvas {   
    /* background-color: yellow; */
    top: 0;
    position: absolute;
    z-index: 100;
    /* width: 1000px;
    height: 1000px; */
    /* min-height:  1000px;
    min-width:  2000px; */
    /* width: 90%;
    height: 90%;  */
    /* background-color: red; */
    /* margin-top: 99px !important; */
    /* border: 1px solid red; */
}
/* 
#schemaBox{
    transform-origin: left top;
transform: scale(0.5);
} */

#settings-collapse {
  margin-bottom: 15px;
}

#portContextMenu {
  width:155px;
}

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

div.schemaSettings {
  width: 400px;  
  text-align: left !important;
}

.schemaSettings .btn-link {
  margin-bottom: 6px;
}
.schemaRealativeBoxContainer {
  position: relative;
  /* background-color: tomato; */
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  /* padding-top: 150px;; */
}

#topLevelShema {
  margin-top:20px;
}

/* Remove grid background on schema page (override .paperCells from print.css) */
#topLevelShema.paperCells, 
#topLevelShema .paperCells, 
#topLevelShema .schemaPaper.paperCells {
  background-image: none !important;
  background: transparent !important;
}

/* Zoom badge */
#schemaZoomBadge {
  position:absolute;
  top:8px;
  right:8px;
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border:1px solid #d0d7de;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
  font-size:12px;
  font-weight:600;
  border-radius:20px;
  padding:4px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  user-select:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
  z-index:1200;
}
#schemaZoomBadge .zoomIcon {font-size:14px;line-height:1;}
#schemaZoomBadge:hover {background:#fff;}
#schemaZoomBadge.active {background:#0d6efd;color:#fff;border-color:#0d6efd;box-shadow:0 2px 6px rgba(13,110,253,.4);} 

/* Active schema zoom button */
.schemaZoomBtn.active {box-shadow:0 0 0 0.2rem rgba(13,110,253,.25);}