.edge-workflow{
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: container; */
    font-family: "Inter", sans-serif;
    /* background-color: #F7FDE1; */
    height: 700px;
    width: 100%;
}

.edge-workflow .container{
    max-width: 1452px;
}

.edge-workflow-step {
    padding: 0 !important;
}

.edge-workflow-step{
    border-width: 1px;
    box-shadow: 0px 6px 35px 0px #00000012;
    position: absolute;
    border-radius: 10px !important;

}
.edge-workflow-step.wrong-cross{
    width: 484px;
    top: 78px;
    margin: 0;
    position: relative;
    
}
.wrong-cross:after{
    background-image: url(../img/workflow-bg-1.png);
    position: absolute;
    content: "";
    width: 660px;
    height: 187px;
    left: 123px;
    top: 31px;
    z-index: 1;
}


.edge-workflow-step.b-warning{
    width: 610px;
    opacity: 1;
    margin: 0;
    top: 220px;
    left: -127px;
    position: relative;
}

.b-warning::after{
    background-image: url(../img/workflow-bg-n.png);
    position: absolute;
    content: "";
    width: 495px;
    height: 155px;
    background-repeat: no-repeat;
    top: 52px;
    left: -265px;
    z-index: 1;
}

.edge-workflow-step-inner {
    /* background: #F8F0E3; */
    position: relative;
    z-index: 9;
    padding: 16px 22px !important;
    border-radius: 10px !important;
  }

  .inner-cross{
    border: 1px solid #FF9C00;
    background-color: #F8F0E3;
  }
  .inner-warning{
    border: 1px solid #3A9FFF;
    background-color: #E2F1FF;
  }
  .inner-red{
    border: 1px solid #FF4FFB;
    background-color: #FFE5FE;
  }
  .inner-yellow{
    background: #F7FDE1;
    border: 1px solid #C8FF00;
  }
  .inner-green{
    background: #EBFFFF;
    border: 1px solid #00FFFF;
  }

.edge-workflow-step p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 2.3; /* 46px / 20px */
    margin-bottom: 0px;
}
.edge-workflow-step.wrong-red{
    margin: 0;
    position: relative;
    width: 327px;
    opacity: 1;
    top: 277px;
    left: 13px;
    
}

.wrong-red::after{
    position: absolute;
    content: "";
    width: 201px;
    height: 164px;
    left: 138px;
    background-image: url(../img/workflow-bg-4.png);
    background-repeat: no-repeat;
    top: 69px;
    z-index: 1;
}
.edge-workflow-step.wrong-yellow{
    width: 328px;
    opacity: 1;
    margin: 0;
    position: relative;
    top: 369px;
    left: 20px;
    
    
}
.wrong-yellow::after{
    position: absolute;
    content: "";
    width: 119px;
    height: 221px;
    left: 170px;
    background-image: url(../img/workflow-bg-nn.png);
    bottom : 51px; 
    z-index: 1;
    background-repeat: no-repeat;
}

.edge-workflow-step.right-green{
    margin: 0;
    position: relative;
    top: 413px;
    right: -126px;
    width: 521px;

}
.right-green:after{
    position: absolute;
    content: "";
    width: 122px;
    height: 118px;
    background-image: url(../img/workflow-bg-5.png);
    z-index: 1;
    top: -70px;
    right: -107px;
    background-repeat: no-repeat;
} 


.edge-workflow-step.wrong-cross::before {
    content: "✕";
    position: absolute;
    top: -10px;
    right: -10px;
    background: #FF4444;
    color: white;
    width: clamp(18px, 1.65vw, 24px);
    height: clamp(18px, 1.65vw, 24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: bold;
    z-index: 11;
}

.edge-workflow-step.b-warning::before {
    content: "⚠";
    position: absolute;
    top: -10px;
    right: -10px;
    background: #FFA500;
    color: white;
    width: clamp(18px, 1.65vw, 24px);
    height: clamp(18px, 1.65vw, 24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: bold;
    z-index: 10;
}


.edge-workflow-step.wrong-red::before {
    content: "!";
    position: absolute;
    top: -10px;
    right: -10px;
    background: #FF4444;
    color: white;
    width: clamp(18px, 1.65vw, 24px);
    height: clamp(18px, 1.65vw, 24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: bold;
    z-index: 10;
}


.edge-workflow-step.wrong-yellow::before {
    content: "✕";
    position: absolute;
    top: -10px;
    left: -10px;
    background: #FF4444;
    color: white;
    width: clamp(18px, 1.65vw, 24px);
    height: clamp(18px, 1.65vw, 24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: bold;
    z-index: 10;
}

.edge-workflow-step.right-green::before {
    content: "⚠";
    position: absolute;
    top: -10px;
    left: -10px;
    background: #FFA500;
    color: white;
    width: clamp(18px, 1.65vw, 24px);
    height: clamp(18px, 1.65vw, 24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: bold;
    z-index: 10;
}

/* Responsive Styles */

@media (max-width: 1145px){
    .edge-workflow-step.b-warning {
        left: -198px;
    }    


}

@media (max-width: 1145px){
    .b-warning::after  {
        left: -197px;
    }}
    
@media (max-width: 970px){
    .wrong-cross:after {
        left: 70px;
    }
    .edge-workflow-step.b-warning {
        left: -257px;
    }
    .b-warning::after {
        left: -100px;
    }
} 
@media (max-width: 875px) {  
    .edge-workflow {
        height: 780px;
    }  
    .edge-workflow-step p {
        font-size: 16px;
    }
    .wrong-cross:after{
        background-image: url(../img/responsive-1.png);
        position: absolute;
        content: "";
        width: 203px;
        height: 112px;
        left: 348px;
        top: 31px;
        z-index: 1;
        background-repeat: no-repeat;
    }
    .edge-workflow-step.b-warning {
        left: -214px;
        width: 482px;

    }   

    .b-warning::after {
        background-image: url(../img/workflow-bg-4.png);
        position: absolute;
        content: "";
        width: 201px;
        height: 164px;
        background-repeat: no-repeat;
        top: 54px;
        left: 163px;
        z-index: 1;

    }
.edge-workflow-step.wrong-red {
    top: 312px;
    left: 147px;
}
.edge-workflow-step.wrong-yellow {
    top: 463px;
    left: -65px;

}
.wrong-yellow::after {
    position: absolute;
    content: "";
    width: 122px;
    height: 118px;
    background-image: url(../img/workflow-bg-5.png);
    z-index: 1;
    top: -111px;
    left: 49px;
    background-repeat: no-repeat;
}
.wrong-red::after {
   display: none;
}
.edge-workflow-step.right-green {
    margin: 0;
    position: relative;
    top: 481px;
    right: -49px;
    width: 431px;
}
.edge-workflow-step.wrong-cross {
    width: 388px;
}

}
@media (max-width: 767px) {  
    .edge-workflow {
        height: 700px;
    }
    .edge-workflow-step {
        width: 223px;
    }
    .edge-workflow-step.b-warning {
        left: -8px;
        top: 126px;
    }
    .edge-workflow-step.wrong-red {
        top: 203px;
        left: 86px;
    }    
    .b-warning::after {

        top: 10px;
    }
    .edge-workflow-step.wrong-yellow {
        top: 263px;
        left: 70px;
    }
    .edge-workflow-step.right-green {
        top: 307px;
    }
    .right-green:after {

        right: 159px;
    }
    .wrong-cross:after {
        left: 148px;
        top: 75px;
        /* top: 16px; */
    }
}
@media (max-width: 540px) {
    .edge-workflow {
        height: 660px;
    }
    .edge-workflow-step p {
        font-size: 12px;
    }
    .edge-workflow-step.wrong-cross,
    .edge-workflow-step.wrong-red,
    .edge-workflow-step.b-warning,
    .edge-workflow-step.wrong-yellow,
    .edge-workflow-step.right-green
    {
        width: 300px;
    }
    .edge-workflow-step.b-warning {
        left: 19px;
    }
    .b-warning::after {
        left: 88px;
    }
    .edge-workflow-step.wrong-red {
        top: 170px;
        left: 17px;
    }
    .edge-workflow-step.wrong-yellow {
        top: 208px;
        left: 14px;
    }
    .edge-workflow-step.right-green {
        top: 252px;
    }
    .wrong-cross:after {
        left: 71px;
        top: 75px;
    }
} 
@media screen and (max-width: 445px) {
  .edge-workflow-step.right-green {
        right: -22px;
    }
    
}

@media screen and (max-width: 404px) {

        .edge-workflow-step.wrong-cross, .edge-workflow-step.wrong-red, .edge-workflow-step.b-warning, .edge-workflow-step.wrong-yellow, .edge-workflow-step.right-green {
            width: 255px;
        }
        .wrong-cross:after {
            left: 12px;
            top: 53px;
        }
        .b-warning::after {
            top: 22px;
            left: 45px;
        }
        .wrong-yellow::after {
            top: -104px;
            left: 97px;
        }
        .right-green:after {
            right: 58px;
        }
      
  }

/* ute */