@keyframes blink {
    50% {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 5px solid #6e7cde;
    }

}

@keyframes rightArrow {
    0% {
        border-top: 3px solid transparent;
        border-left: 5px solid #7a8eb5;
        border-bottom: 4px solid transparent;
    }

    49% {
        border-top: 3px solid transparent;
        border-left: 5px solid #7a8eb5;
        border-bottom: 4px solid transparent;
    }

    60% {
        border-top: 3px solid transparent;
        border-left: 5px solid #b8c7e4;
        border-bottom: 4px solid transparent;
    }

    99% {
        border-top: 3px solid transparent;
        border-left: 5px solid #b8c7e4;
        border-bottom: 4px solid transparent;
    }

    100% {
        border-top: 3px solid transparent;
        border-left: 5px solid #212529;
        border-bottom: 4px solid transparent;
    }
}

@keyframes leftArrow {
    0% {
        border-top: 3px solid transparent;
        border-right: 5px solid #7a8eb5;
        border-bottom: 4px solid transparent;
    }

    49% {
        border-top: 3px solid transparent;
        border-right: 5px solid #7a8eb5;
        border-bottom: 4px solid transparent;
    }

    60% {
        border-top: 3px solid transparent;
        border-right: 5px solid #b8c7e4;
        border-bottom: 4px solid transparent;
    }

    99% {
        border-top: 3px solid transparent;
        border-right: 5px solid #b8c7e4;
        border-bottom: 4px solid transparent;
    }

    100% {
        border-top: 3px solid transparent;
        border-right: 5px solid #212529;
        border-bottom: 4px solid transparent;
    }
}
#img-purchase {
    background-image: url(/Content/Images/General-NavigationNew22.png);
    background-size: 1082px 645px;
    background-repeat: no-repeat;
    width: 1082px;
    height: 645px;
    position: relative;
    /*box-shadow: 0px 2px 5px 0 rgb(0 0 0 / 20%);
    border-top-left-radius: 16px;
    border-bottom-right-radius: 16px;*/
}

    #img-purchase a {
        display: block;
        position: absolute;
        border: 2px solid #7185cc;
        top: 649px;
    }

            #img-purchase a:hover {
                border: 0px solid #7185cc;
            }

.bacTransparent {
    opacity: 0.5 !important;
    background-color: #ffff !important;
    cursor: default;
}

/*** PURCHASING NAVIGATION ***/

a#PurchaseOrder {
    width: 97px;
    height: 59.5px;
    left: 59.8%;
    top: 11%;
}

a#ApprovedPO {
    width: 98px;
    height: 59px;
    left: 59.8%;
    top: 19.5%;
}

a#NonTradePurchasing {
    width: 97px;
    height: 59px;
    left: 49.5%;
    top: 32%;
}

a#ApprovedNonTradePurchasing {
    width: 107px;
    height: 63px;
    left: 13.5%;
    top: 38.4%;
}

a#TradePurchasing {
    width: 97.45px;
    height: 58.5px;
    left: 85.3%;
    top: 34%;
}

a#RequestForPayment {
    width: 97.5px;
    height: 58px;
    left: 77.9%;
    top: 55.4%;
}

a#ApprAccountingRFP {
    width: 97.5px;
    height: 60px;
    left: 77.9%;
    top: 470%;
}


a#ApprManagementRFP {
    width: 97.9px;
    height: 60px;
    left: 78%;
    top: 541%;
}

a#CheckVoucher {
    width: 97px;
    height: 61px;
    left: 88.9%;
    top: 540%;
}

a#CreditDebitMemoPurchase {
    width: 97.5px;
    height: 58.8px;
    left: 82.8%;
    top: 45.9%;
}

a#StockReturnPurchase {
    width: 97px;
    height: 58.5px;
    left: 72.95%;
    top: 46%;
}

a#purchasebarcode {
    width: 97.4px;
    height: 59px;
    left: 70.4%;
    top: 34%;
}
a#createRR {
    width: 98px;
    height: 60px;
    left: 59.8%;
    top: 38%;
}
a#nonserial {
    width: 98px;
    height: 60px;
    left: 49.55%;
    top: 42%;
}

a#AccountingApproval {
    width: 97.9px;
    height: 56px;
    left: 78%;
    top: 578px;
}

a#OperationManagerApproval {
    width: 97.9px;
    height: 56px;
    left: 89%;
    top: 578px;
}

a#PrepareItemsWithdrawal {
    width: 97.9px;
    height: 56px;
    left: 67%;
    top: 649px;
}

.arrow-down-blink {
    animation: blink .5s step-end infinite alternate;
}

.arrow-right-blink {
    animation: rightArrow .5s step-end infinite alternate;
}

.arrow-left-blink {
    animation: leftArrow .5s step-end infinite alternate;
}

.triangle-down-nontrade {
    position: absolute;
    top: 30.95%;
    left: 53.71%;
}

.triangle-down-approvepurchaseorder {
    position: absolute;
    top: 24.56%;
    left: 64.1%;
}

.triangle-down-tradepurchase {
    position: absolute;
    top: 32.1%;
    left: 74.4%;
}

.triangle-down-approvetradepurchase {

    position: absolute;
    top: 16.3%;
    left: 40%;
}

.triangle-down-approvenontrade {

    position: absolute;
    top: 37.3%;
    left: 18.55%;
}

.triangle-right-purchaseorder {
    position: absolute;
    left: 87.1%;
    top: 61.6%;
}

.triangle-right-requestforpayment {
    position: absolute;
    left: 64.1%;
    top: 38.25%;
}

.triangle-left-ApprovedTradePurchasingleft {

    position: absolute;
    left: 43.89%;
    top: 51.87%;
}

.triangle-down-approverfpaccounting {
    position: absolute;
    top: 69.6%;
    left: 82.32%;
}

.triangle-down-approverfpmanagement {
    position: absolute;
    top: 81.95%;
    left: 82.35%;
}

.triangle-right-checkvoucher {
    position: absolute;
    left: 88.3%;
    top: 86.85%;
}

.triangle-right-cmdm {
    position: absolute;
    left: 79.6%;
    top: 57.2%;
}

.triangle-right-stockreturn {
    position: absolute;
    left: 77.25%;
    top: 61.6%;
}

.triangle-down-approvecmdm {
    position: absolute;
    top: 32.1%;
    left: 89.45%;
}

.triangle-down-approvestockreturn {
    position: absolute;
    top: 57.2%;
    left: 84.65%;
}

/*** SALES NAVIGATION ***/


a#ConsignmentApp {
    width: 97.5px;
    height: 62px;
    left: 13.3%;
    top: 75%
}
a#SalesOrder {
    width: 97.58px;
    height: 52.5px;
    left: 2.1%;
    top: 10.3%;
}

a#SOApproved1 {
    width: 97.58px;
    height: 55.5px;
    left: 2.1%;
    top: 19.6%;
}

a#SOApproved2 {
    width: 97.58px;
    height: 60.5px;
    left: 2.1%;
    top: 29%;
}
a#BarcodeScanCons {
    width: 97.58px;
    height: 60.5px;
    left: 2.1%;
    top: 50.28%;
}
a#BarcodeSanning {
    width: 97.58px;
    height: 61px;
    left: 2.1%;
    top: 75.2%;
}

a#DeliveryReceipt {
    width: 97.58px;
    height: 60.5px;
    left: 13.2%;
    top: 50.3%;
}

a#DeliveryStatus {
    width: 97.58px;
    height: 60.5px;
    left: 24.2%;
    top: 50.3%;
}

a#Payment {
    width: 97.58px;
    height: 55.5px;
    left: 24.2%;
    top: 19.6%;
}

a#PreparedInvoice {
    width: 97.58px;
    height: 60.5px;
    left: 24.2%;
    top: 29%;
}

a#ConsignDelivery {
    width: 98.2px;
    height: 61px;
    left: 24.2%;
    top: 75.2%;
}

a#ConsignmentInvoice {
    width: 98px;
    height: 61.2px;
    left: 35.32%;
    top: 75.2%;
}

a#salesonhold {
    width: 97.58px;
    height: 60.5px;
    left: 13.2%;
    top: 29%;
}

a#StockReturn {
    width: 97.58px;
    height: 54.5px;
    left: 35.32%;
    top: 19.6%;
}

a#CreditDebitMemo {
    width: 97.58px;
    height: 60.5px;
    left: 35.32%;
    top: 29%;
}
.triangle-down-soapproved3 {
    position: absolute;
    top: 61.85%;
    left: 6.45%;
}
.triangle-down-soapproved2 {
    position: absolute;
    top: 49.4%;
    left: 6.45%;
}
.triangle-right-deliverystatus2 {
    position: absolute;
    left: 23.6%;
    top: 79.25%;
}
.triangle-right-deliverystatus3 {
    position: absolute;
    left: 12.7%;
    top: 79.25%;
}

.triangle-down-salesorder {
    position: absolute;
    top: 24.6%;
    left: 6.4%;
}

.triangle-down-soapproved1 {
    position: absolute;
    top: 37%;
    left: 6.4%;
}

.triangle-right-barcodescanning {
    position: absolute;
    left: 12.65%;
    top: 40%;
}

.triangle-right-deliveryreceipt {
    position: absolute;
    left: 23.6%;
    top: 54.4%;
}

.triangle-right-deliverystatus {
    position: absolute;
    left: 34.7%;
    top: 79.25%;
}

.triangle-down-payment {
    position: absolute;
    top: 37.2%;
    left: 28.5%;
}

.triangle-down-preparedinvoice {
    position: absolute;
    top: 49.4%;
    left: 28.55%;
}

.triangle-right-creditdebitmemo {
    position: absolute;
    left: 34.7%;
    top: 42%;
}