Backend-Api/ServiceHost/wwwroot/AssetsAdminNew/Tasks/css/DiagramTaskModal.css

.boxShadowDiagram {
    background-color: #eef3f3;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e8eef0' fill-opacity='0.67' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    border-radius: 10px;
    border: 1px solid #cccccc;
    max-height: 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.infoTxt1,
.infoTxt2,
.infoTxt3,
.infoTxt4 {
    font-size: 10px;
    color: #2E2E2E;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: end;
}

.infoSection {
    position: absolute;
    left: 10px;
    top: 5px;
}

.infoSection .infoColorDiagram1 {
    border-radius: 50%;
    border: 2px solid #D3D3D3;
    background-color: #F07979;
    width: 10px;
    height: 10px;
    display: inline-flex;
}

.infoSection .infoColorDiagram2 {
    border-radius: 50%;
    border: 2px solid #D3D3D3;
    background-color: #F3E38B;
    width: 10px;
    height: 10px;
}

.infoSection .infoColorDiagram3 {
    border-radius: 50%;
    border: 2px solid #D3D3D3;
    background-color: #B3B3B3;
    width: 10px;
    height: 10px;
}

.infoSection .infoColorDiagram4 {
    border-radius: 50%;
    border: 2px solid #D3D3D3;
    background-color: #D5F69A;
    width: 10px;
    height: 10px;
}


.entry.no-line:last-child:after {
    height: 10px;
    border-top: none;
    transition: border 0.5s;
    border-bottom: 0;
    border-radius: 0 0 10px 0;
    margin-top: -9px;
}

.tree-section {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto; /* Ensures overflow is scrollable if content is too wide */
    max-width: 100%; /* Prevents horizontal overflow */
    max-height: 100%; /* Prevents vertical overflow */
}

#canvas-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent overflowing */
    position: relative;
    cursor: grab;
}

#tree {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Center and default scale */
    transform-origin: center center; /* Ensure scaling happens from the center */
    transition: transform 0.3s ease; /* Smooth transitions for zooming */
}

#tree * {
    box-sizing: border-box;
}

#tree .branch {
    padding: 5px 20px 5px 0;
}

#tree .branch:not(:first-child) {
    margin-right: 170px;
}


#tree-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#tree .branch:not(:first-child):after {
    content: "";
    width: 20px;
    border-top: 1px solid #ccc;
    position: absolute;
    right: 150px;
    top: 50%;
    margin-top: 1px;
}

.entry {
    position: relative;
    min-height: 42px;
    display: block;
}

.entry:before {
    content: "";
    height: 100%;
    border-right: 1px solid #ccc;
    position: absolute;
    right: -20px;
}

.entry:first-child:after {
    height: 10px;
    border-radius: 0 10px 0 0;
}

.entry:first-child:before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 1px;
    border-radius: 0 10px 0 0;
}

.entry:after {
    content: "";
    width: 20px;
    transition: border 0.5s;
    border-top: 1px solid #ccc;
    position: absolute;
    right: -20px;
    top: 50%;
    margin-top: 1px;
}

.entry:last-child:before {
    width: 10px;
    height: 50%;
    border-radius: 0 0 10px 0;
}

.entry:last-child:after {
    height: 10px;
    border-top: none;
    transition: border 0.5s;
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 10px 0;
    margin-top: -9px;
}

.entry:only-child:after {
    width: 10px;
    height: 0px;
    margin-top: 1px;
    border-radius: 0px;
}

.entry:only-child:before {
    display: none;
}

.entry span {
    border: 1px solid #A9A9A9;
    display: block;
    min-width: 150px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -15px;
    color: #666;
    font-size: 14px;
    display: inline-block;
    border-radius: 10px;
    transition: all 0.5s;
    background: #fff;
}

#tree .entry span:hover,
#tree .entry span:hover + .branch .entry span {
    background: #e6e6e6;
    color: #000;
    border-color: #a6a6a6;
}

#tree .entry span:hover + .branch .entry::after,
#tree .entry span:hover + .branch .entry::before,
#tree .entry span:hover + .branch::before,
#tree .entry span:hover + .branch .branch::before {
    border-color: #a6a6a6;
}


/* Disable selection during drag */
#canvas-wrapper.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Responsive scaling */
@media screen and (max-width: 1200px) {
    #tree {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media screen and (max-width: 900px) {
    #tree {
        transform: translate(-50%, -50%) scale(0.6);
    }
}

@media screen and (max-width: 600px) {
    #tree {
        transform: translate(-50%, -50%) scale(0.5);
    }
}