.page-wrapper {
    position: relative;
}

.ActiveCompliance:after,
.page-wrapper.ActiveEndPoint:after,
.ActiveComplianceInsOuter:after,
.ActiveDeviceInsOuter:after,
.ActiveWorkInsOuter:after,
.ActiveWalkThrough:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(110 110 115 / 42%);
    top: 0;
    left: 0;
    z-index: 9999;
}

.ActiveCompliance .compliance-gap-box,
.ActiveEndPoint .EndPoint,
.ActiveComplianceInsOuter .ComplianceInsOuter,
.ActiveDeviceInsOuter .DeviceInsOuter,
.ActiveWorkInsOuter .WorkInsOuter,
.ActiveWalkThrough .sid-box-data ul li i {
    position: relative;
    z-index: 99999;
}

.ActiveWalkThrough .sid-box-data ul li i.fa-info-circle {
    position: absolute;
    background: #fff;
    width: 35px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    margin-left: 0;
    margin-top: -5px;
    transition: 0.5s;
}

.ActiveCompliance .compliance-gap-box:after {
    position: absolute;
    content: "";
    background: #fff;
    width: 104%;
    height: 120%;
    z-index: -1;
    left: -2%;
    top: -9%;
    border-radius: 10px;
}

/*=== card design ===*/
.InstructionCardInner h4 {
    font-size: 1.0000em;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.14px;
    color: #2a2a2a;
}

.InstructionCardInner p {
    margin: 15px 0 15px 0.1px;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.5px;
    color: #2a2a2a;
}

.NextPreviewTabs button.btn.btn-secondary {
    background-color: #5c3ba8 !important;
    width: 43px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    outline: none !important;
}

.NextPreviewTabs button.btn.btn-secondary:hover {
    opacity: 1;
}

.PreviousButton {
    opacity: 0.16;
    border-radius: 3.3px;
}

.NextPreviewTabs button.btn.btn-secondary.active {
    border-radius: 3.3px;
    opacity: 1;
    border: solid 1px var(--primary);
}

button.btn.btn-secondary.PreviousButton.active {
    margin-right: 2px;
}

.NextPreviewTabs button.btn.btn-secondary i {
    font-size: 0.8750em;
    color: #fff;
}

.InstructionCard {
    padding: 24px;
    border-radius: 7px;
    margin-top: 40px;
    box-shadow: 2px 2px 20px 0 rgb(214 187 252 / 24%);
    border: solid 1px #ede4fb;
    background-color: #fff;
    position: relative;
    display: none;
}

.InstructionCard:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    background: #fff;
    top: -13px;
    right: 0;
    box-shadow: -44px 2px 20px 0 rgb(214 187 252 / 24%);
    left: 0;
    margin: auto;
    border-color: #ede4fb;
    border-radius: 7px 0px 0px 0px;
    transform: rotate(46deg);
    border-width: 1px 0px 0px 1px;
    border-style: solid;
}

.ActiveCompliance .compliance-gap-box .InstructionCard,
.ActiveEndPoint .InstructionCard.EndPointIns,
.ActiveComplianceInsOuter .InstructionCard.ComplianceIns,
.ActiveDeviceInsOuter .InstructionCard.DeviceIns,
.ActiveWorkInsOuter .InstructionCard.WorkIns,
.ActiveWalkThrough .InstructionCard.WalkThrough {
    position: absolute;
    max-width: 344px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    transition: 0.5s;
    display: block;
}

/*==== End Points =====*/
.sid-box-data ul li.EndPoint {
    padding-bottom: 20px;
    padding-top: 20px;
    display: inline-block;
}

.ActiveEndPoint .EndPoint {
    background: #fff;
    padding-right: 15px;
    border-radius: 0 7px 7px 0;
    transition: 0.5s;
    border-left: 3px solid #5c3ba8;
}

.ActiveEndPoint .InstructionCard.EndPointIns,
.ActiveComplianceInsOuter .InstructionCard.ComplianceIns,
.ActiveDeviceInsOuter .InstructionCard.DeviceIns,
.ActiveWorkInsOuter .InstructionCard.WorkIns,
.ActiveWalkThrough .InstructionCard.WalkThrough {
    position: absolute;
    z-index: 99999;
    left: 153px;
    right: auto;
    top: 15px;
    margin-top: 0;
}

.ActiveEndPoint .InstructionCard.EndPointIns::after,
.ActiveComplianceInsOuter .InstructionCard.ComplianceIns::after,
.ActiveDeviceInsOuter .InstructionCard.DeviceIns:after,
.ActiveWorkInsOuter .InstructionCard.WorkIns:after {
    right: auto;
    top: 31%;
    bottom: auto;
    margin: auto;
    transform: rotate(-45deg);
    left: -13px;
}

.ActiveWalkThrough .InstructionCard.WalkThrough:after {
    display: none;
}

.ActiveComplianceInsOuter .ComplianceInsOuter h6,
.ActiveComplianceInsOuter .ComplianceInsOuter a,
.ActiveDeviceInsOuter .DeviceInsOuter h6,
.ActiveDeviceInsOuter .DeviceInsOuter a,
.ActiveWorkInsOuter .WorkInsOuter h6,
.ActiveWorkInsOuter .WorkInsOuter a {
    z-index: 99999;
    position: relative;
}

.ActiveComplianceInsOuter .ComplianceInsOuter:after,
.ActiveDeviceInsOuter .DeviceInsOuter:after,
.ActiveWorkInsOuter .WorkInsOuter:after {
    position: absolute;
    content: "";
    width: 125px;
    height: 79px;
    left: 0;
    transition: 0.5s;
    background: #fff;
    top: -15px;
    border-radius: 0 7px 7px 0;
    border-left: 2px solid #5c3ba8;
}

.ActiveDeviceInsOuter .DeviceInsOuter:after,
.ActiveWorkInsOuter .WorkInsOuter:after {
    top: -20px;
}

.ActiveComplianceInsOuter .InstructionCard.ComplianceIns {
    top: 375px;
}

.ActiveDeviceInsOuter .InstructionCard.DeviceIns {
    top: 430px;
    transition: 0.5s;
}

.ActiveWorkInsOuter .InstructionCard.WorkIns,
.ActiveWalkThrough .InstructionCard.WalkThrough {
    top: 520px;
    transition: 0.5s;
}

.NextPreviewTabs button.btn.btn-secondary.EndInst.active {
    width: 90px;
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.5px;
    color: #fff;
}