.addHook {
    width: fit-content;
    height: 26px;
    border-radius: 3px;
    border: 2px solid #b7b7b7;
    /* background: #E37014; */
    color: #fafafa;
    font-size: 9px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 2px 5px;
    margin: 2px 0px;
    display: flex;
    align-items: center;
    position: relative;
}

.connectionLine {
    position: absolute;
    width: 5px;
    height: 1px;
    inset-inline-start: 0px;
    top: 50%;
    z-index: 999;
}



    .connectionLine.redLine {
        background: red;
    }



    .connectionLine.blueLine {
        background: blue;
    }

.addHook img {
    padding-inline-end: 4px;
}

.planned-stop-node {
    background: #D3F4FF;
}

.driveAway,
.Leave,
.connect,
.onTheWay {
    background: #007BFF !important;
}
.arrived {
    background-color: rgba(119, 36, 36, 1) !important;
}

.inexecution {
    background: rgba(80, 0, 172, 1) !important;
}

.wait,
    .Rest,
    .Park {
        background: #1a7fd5;
    }

.Disconnect,
.Traffic,
.Accident {
    background: #ff0000;
}

.starting,
.ending {
    margin: 2px 0px;
}
.starting {
    /*background: #E37014;
    border: 1px solid #E37014;*/
    transform: translateX(-100%);
}
.ending, .starting {
    background: #964B00;
    border: 1px solid #964B00;
}
.visited {
    background: #8C8C8C !important;
}

.dispatched {
    background: #00FFFF !important;
}

/* nodeContainer */
.nodeContainer {
    display: flex;
    align-items: center;
}