svg {
  background-color: #FFF;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

path.link {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  cursor: default;
}

path.ON {
    stroke: #007700;
}

.legend-on {
    background: #007700;
}

path.OFF, .legend-off {
    stroke: #cc0000;
}

.legend-off {
    background: #cc0000;
}

path.OUT_OF_SYNC {
    stroke: #ccbb00;
}

.legend-outofsync {
    background: #ccbb00;
}

path.OUT_OF_SYNC_FORCED {
    stroke: #ccbb00;
    stroke-dasharray: 5,3;
}

.legend-outofsync-forced {
    background: repeating-linear-gradient(
        to right,
        #ccbb00 0px,
        #ccbb00 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -moz-repeating-linear-gradient(
        to right,
        #ccbb00 0px,
        #ccbb00 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -webkit-repeating-linear-gradient(
        to right,
        #ccbb00 0px,
        #ccbb00 5px,
        #ffffff 0px,
        #ffffff 8px
    );
}


path.WRITING {
    stroke: #a37acc;
}

.legend-writing {
    background: #a37acc;
}

path.WRITING_COPY {
    stroke: #a37acc;
    stroke-dasharray: 2,1;
}

.legend-writing-copy {
    background: repeating-linear-gradient(
            to right,
            #a37acc 0px,
            #a37acc 2px,
            #ffffff 0px,
            #ffffff 3px
    );
    background: -moz-repeating-linear-gradient(
            to right,
            #a37acc 0px,
            #a37acc 5px,
            #ffffff 0px,
            #ffffff 8px
    );
    background: -webkit-repeating-linear-gradient(
            to right,
            #a37acc 0px,
            #a37acc 5px,
            #ffffff 0px,
            #ffffff 8px
    );
}

path.WAITING_WRITE {
    stroke: #a37acc;
    stroke-dasharray: 5,3;
}

.legend-waiting-write {
    background: repeating-linear-gradient(
        to right,
        #a37acc 0px,
        #a37acc 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -moz-repeating-linear-gradient(
        to right,
        #a37acc 0px,
        #a37acc 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -webkit-repeating-linear-gradient(
        to right,
        #a37acc 0px,
        #a37acc 5px,
        #ffffff 0px,
        #ffffff 8px
    );
}

path.REPLICATION_SERVER {
    stroke: #1E90FF;
}

.legend-replication-server {
    background: #1E90FF;
}

path.REPLICATION_CLIENT {
    stroke: #1E90FF;
    stroke-dasharray: 5,3;
}

.legend-replication-client {
    background: repeating-linear-gradient(
        to right,
        #1E90FF 0px,
        #1E90FF 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -moz-repeating-linear-gradient(
        to right,
        #1E90FF 0px,
        #1E90FF 5px,
        #ffffff 0px,
        #ffffff 8px
    );
    background: -webkit-repeating-linear-gradient(
        to right,
        #1E90FF 0px,
        #1E90FF 5px,
        #ffffff 0px,
        #ffffff 8px
    );
}

.legend-unknown {
    background: #000000;
}

svg:not(.active):not(.ctrl) path.link {
    cursor: url(images/remove-16x16.svg) 8 8, crosshair;
    /* workaround for webkit bug on retina displays */
    cursor: -webkit-image-set(
            url(images/remove-16x16.svg) 1x,
            url(images/remove-32x32.svg) 2x
    ) 8 8, crosshair;
}

svg:not(.active):not(.ctrl) path.link:hover {
    stroke-width: 5px;
}

path.dragline {
  pointer-events: none;
  stroke: #999;
}

#cloneButton {
    margin-top: 5px;
}

line.link {
  pointer-events: none;
}

.node {
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
  fill: white;
}

.node.dragged {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
  fill: #DDD;
}

.node circle {
  fill-opacity: 0;
}

.node.dragged circle {
  fill-opacity: 1;
}

.node.reflexive {
  stroke: #000 !important;
  stroke-width: 2.5px;
}

text {
  font-family: 'RubikWeb', -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial',sans-serif !important;
  font-size: 12px;
  pointer-events: none;
}

text.id {
  text-anchor: middle;
  font-weight: 500;
}

text.id-host {
    font-weight: 400;
}

text.icon-any {
    font-size: 56px;
}

div.nodetooltip {
    z-index: 1000;
    position: absolute;
    padding: 10px;
    padding-left: 30px;
    font-size: 90%;
    text-align: left;
    background: rgba(235, 235, 235, 0.9);
    width: 40%;
    max-width: 400px;
}

.fingerprint {
    font-size: 90%;
    padding: 5px;
}

.nodes {
    position: relative;
}

.short-help {
    position: absolute;
    padding: 3px 8px;
    left: 0;
    top: 0;
}

.node-tip {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: none;
    color: #0a6d63;
    background: rgba(45, 186, 171, 0.15);
    padding: 3px 8px;
    max-width: 60%;
    font-weight: 400;
}

.node-warning-tip {
    background-color: #fcf8e3;
    color: #C4781E;
}

.legend-container {
    position: fixed;
    bottom: 20px;
    left: 260px;
    width: inherit;
    max-width: inherit;
    display: inline-block;
    background: rgba(235, 235, 235, 0.9);
}

@media screen and (max-height: 400px) {
    .legend-container {
        display: none;
    }
}

.main-menu.collapsed ~ div .legend-container {
    left: 90px;
}

.legend {
    height: 3px;
    margin-top: 7px;
    margin-left: 10px;
    float: left;
    width: 45px;
}

.legend-text {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

.link-warning {
    visibility: hidden;
}

.link-warning-visible {
    visibility: visible;
}

.link-warning text {
    font-size: 24px !important;
    fill: #C4781E;
}

.cluster-loader {
    position: relative;
    z-index: 100000;
}

.cluster-loader .ot-loader-new-content {
    position: absolute;
    z-index: 100000;
    width: 100%;
    height: calc(100vh - 120px);
    padding-top: calc((100vh - 300px) / 2);
    background-color: rgba(255,255,255,0.66);
}