:root {
    /* Background Colours for the Tools */
    --t10-blue:   #4e79a7;
    --t10-orange: #f28e2c;
    --t10-red:    #e15759;
    --t10-aqua:   #76b7b2;  
    --t10-green:  #59a14f;
    --t10-yellow: #edc949;
    --t10-purple: #af7aa1;
    --t10-pink:   #ff9da7;
    --t10-brown:  #9c755f;
    --t10-grey:   #bab0ab;
}

.DataCanvas {
    background-color: white;
    height: 5000px;
    width: 5000px;
}

area {
    cursor: pointer;
}

.lm_content {
    overflow: auto;
}

.connector-line {
    stroke: black;
    stroke-width: 5px;
    fill: black;
}

svg {
    position: absolute;
    /* will-change: transform; */
    fill: black;
    display: inline-block;
}


.ToolBoxContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* margin-inline-start: 15px; */
    /* overflow: scroll; */
    /* width: 2000px; */
    height: 100%;
}

.tool-box-title {
    /* float: left; */
    position: relative;
    /* left: 3px; */
    font-family: 'Segoe UI';
    text-align: center;
    /* width: 100%; */
    /* writing-mode: vertical-rl;
    text-orientation: upright; */
}

.tools {
    position: relative;
    /* top: 16px; */
}

.tool {
    cursor: grab;
    object-fit: cover;
    width: 75px;
    height: 85px;
}

.tool-box {
    height: 100%;
    width: 100%;
    background-color: white;
    overflow: auto;
}


.input-tool {
    fill: var(--t10-grey);
}

.join-tool {
    /* fill: #f08080; */
    fill: var(--t10-pink);
    stroke: black;
    stroke-width: 0.5px;    
}

.output-tool {
    fill: var(--t10-blue);
}


.join-path {
    stroke: black;
    stroke-width: 0.5px;
    fill: black;
}
.join-circle {
    stroke: black;
    stroke-width: 0.5px;
    fill: white;
    z-index: 0;
}
.top-line {
    stroke: black;
    stroke-width: 1px;
}
.line {
    stroke: black;
    stroke-width: 0.5px;
}
.text {
    stroke: black;
    stroke-width: 0.35px;
    font-size: 13px;
    font-family: 'Segoe UI';
}
.connector-in {
    stroke: black;
    stroke-width: 1.3px;
    fill: rgba(255,255,255,0);
    cursor: copy;
}

.connector-in:hover {
    stroke-width: 3px;
}

.connector-out {
    stroke: black;
    stroke-width: 1.3px;
    fill: rgba(255,255,255,0);
    cursor: pointer;
    z-index: 2;
}
.selected-tool {
    border: black;
    border-style:  dashed;
}