.cluster-builder{
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgb(245,246,247) 0%,rgb(228,229,230) 100%);
  user-select: none;
}
.cluster-builder > *{
  margin-left: 5px;
  margin-right: 5px;
}
.cluster-builder > *:first-child{
  margin-left: 0;
}
.cluster-builder > *:last-child{
  margin-right: 0;
}
.cluster-builder select.hidden{
  display: none;
}
.actives-wrap.empty:before{
  content: 'Todos os itens';
}
.actives-wrap.empty:before,
.cluster-builder .active-type{
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  margin: 5px;
  border-radius: 999px;
  background-color: #bbb;
  color: #333;
  line-height: 120%;
}
.active-type .type-delete{
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
.active-type .type-delete:before{
  font-family: 'icons';
  content: '\E838';
}
.active-type .type-delete:hover:before{
  color: red;
}
.cluster-builder .input-wrap{
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.cluster-builder .input-wrap:before{
  content: 'Limite de itens: ';
  display: inline-block;
  margin-right: 10px;
}

.cluster-wrap{
  position: relative;
  width: 100%;
  height: 700px;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin: 1em 0;
  background-color: transparent;
  transition: background-color .75s ease;
}

.opaque{opacity: 1; transition: opacity .5s ease-in-out;}
.less.opaque{opacity: .2;}
.not.opaque{opacity: 0;}

line{
  stroke: black;
  transition: stroke .5s ease-in-out;
}
line.hidden{opacity: 0 !important;}
line.opaque{opacity: 1;}
line.less.opaque{opacity: .25;}

a.node[href]:hover{
    opacity: 1;
}

.node,
.node foreignObject{
  position: relative;
  pointer-events: all;
}

.node circle{
  fill: #2da4a8;
}
.node foreignObject{
  pointer-events: none;
}

.node foreignObject div{
    display: inline;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,.5),
                  0 0 5px rgba(0,0,0,.5),
                  0 0 5px rgba(0,0,0,.5);

    text-align: center;
    font-family: sans-serif;
    font-size: 11px;
    letter-spacing: .5px;
    color: white;

    cursor: pointer;
    pointer-events: all;
    user-select: none;
}
.node foreignObject.not.opaque div{
  pointer-events: none;
}
.node foreignObject.not.opaque:hover div{
  pointer-events: all;
}

.control-bttns{
  position: absolute;
  right: 10px;
  bottom: 10px;
  
  display: inline-flex;
}
.control-bttns > *:last-child{
  margin-right: 0;
}
.zoom{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
  margin: 0 5px;
  font-family: 'icons';
  cursor: pointer;
  background-color: transparent;
  color: #2da4a8;
  transition: background-color .15s ease,
              color .15s ease;
}
.zoom:hover{
  background-color: #2da4a8;
  color: white;
}
.zoom.plus:before{
  content: '\E81C';
}
.zoom.minus:before{
  content: '\E81D';
}

.loading .cluster-builder{
  pointer-events: none;
  opacity: .5;
}

.loading .cluster-wrap{
  background-color: #ddd;
}
.loading .cluster-wrap:before{
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #444 transparent #444 transparent;
  margin: -25px 0 0 -25px;
  animation: lds-dual-ring 1.2s linear infinite;
}