p {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    font-weight: 600;
    position: absolute;
    z-index: 2;
    color: #000000;
    text-transform: capitalize;
}

#img-purchase {
    background-size: 1200px 800px;
    background-repeat: no-repeat;
    width: 1200px;
    height: 800px;
    position: relative;
}

    #img-purchase img {
        z-index: 1;
    }

    #img-purchase a {
        display: block;
        position: absolute;
        border: 1px solid #84899845;
        border-radius: 8px;
        background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
        display: inline-block;
        padding: 0px 0px;
        text-align: center;
        width: 100px;
        height: 60px;
        text-decoration: none;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0px 0px 4px 0px #eee;
        border-radius: 6px;
    }

        #img-purchase a:hover {
            border: 1px solid #c8d5f5;
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
        }

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

.purchasetitle {
    position: absolute;
    left: 174px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 44px;
    font-weight: 600;
    border: 1px solid;
    padding: 0 56px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}

.salestitle {
    position: absolute;
    right: 169px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 44px;
    font-weight: 600;
    border: 1px solid;
    padding: 0px 72px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}

.inventorytitle {
    position: absolute;
    left: 160px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 454px;
    font-weight: 600;
    border: 1px solid;
    padding: 0 56px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}

#IMG_BOXLAYOUT {
    margin: 3px 0px -4px;
}

    #IMG_BOXLAYOUT img {
        width: 40px;
        height: 32px;
    }

.text_title {
    text-transform: capitalize;
    color: #333;
    font-weight: 600;
    font-size: 10px;
    line-height: 10px;
    margin-top: 5px;
}

.arrow_line {
    position: absolute;
    border: solid #a1b7ce;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
}

@keyframes blink {
    50% {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid rgb(149 169 189);
    }
}

@keyframes rightArrow {
    50% {
        border-top: 5px solid transparent;
        border-left: 7px solid rgb(149 169 189);
        border-bottom: 5px solid transparent;
    }
}

@keyframes leftArrow {
    50% {
        border-top: 5px solid transparent;
        border-right: 7px solid rgb(149 169 189);
        border-bottom: 5px solid transparent;
    }
}

/************************************************/
/************* T R I A N G L E ******************/
/************************************************/

.triangle-down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgb(182 200 218);
    position: absolute;
    z-index: 0;
}

.triangle-right {
    border-top: 5px solid transparent;
    border-left: 7px solid rgb(182 200 218);
    border-bottom: 5px solid transparent;
    position: absolute;
    z-index: 0;
}

.triangle-left {
    border-top: 5px solid transparent;
    border-right: 7px solid rgb(182 200 218);
    border-bottom: 5px solid transparent;
    position: absolute;
    z-index: 0;
}

/************************************************/

/*************** L I N E C O N ******************/

.img_line_straight {
    border: 1px solid rgb(182 200 218);
    height: 12px;
    position: absolute;
}
.img_line_side {
    border: 1px solid rgb(182 200 218);
    width: 12px;
    position: absolute;
}

/************************************************/

/***************** A R R O W ********************/

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

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

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

/************************************************/

/***************** S A L E S ********************/

/***************** A C T I O N ******************/

a#CUSTOMERWALLET {
    left: 10px;
    top: 112px;
}
a#SALESORDER {
    left: 10px;
    top: 192px;
}
a#PACKINGLISTAPPROVAL {
    left: 10px;
    top: 272px;
}
/*a#RELEASE {
    top: 192px;
    left: 130px;
}*/
a#PAYMENT {
    left: 250px;
    top: 272px;
}
a#STOCKRETURN {
    top: 192px;
    left: 370px;
}
a#SALESCREDITDEBITMEMO {
    top: 272px;
    left: 370px;
}
a#SALESWITHDRAWAL {
    left: 130px;
    top: 353px;
}

a#DELIVERYRECEIPT {
    left: 70px;
    top: 366px;
}
a#CREATEINVOICE {
    top: 272px;
    left: 130px;
}
/***************** L I N E ***********************/
#SALESORDER_LINE {
    top: 252px;
    left: 60px;
}
#PACKINGLISTAPP_LINE {
    top: 301px;
    left: 110px;
}
#RELEASE_LINE {
    top: 301px;
    left: 230px;
}
#RELEASEDOWN_LINE {
    top: 332px;
    left: 180px;
    height: 12px;
}
#RELEASELONG_LINE {
    top: 344px;
    left: 120px;
    width: 122px;
}
#RELEASEDOWNLEFT_LINE {
    top: 346px;
    left: 120px;
    height: 12px;
}
#RELEASEDOWNRIGHT_LINE {
    top: 345px;
    left: 240px;
    height: 12px;
}
#STOCKRETURN_LINE {
    top: 383px;
    right: 208px;
}
#CREDITDEBITMEMO_LINE {
    top: 383px;
    right: 148px;
}
/***************** A R R O W ********************/
.arrow-packinglist_down, .arrow-packinglist_down-blink {
    top: 264px;
    left: 56px;
}
.arrow-packinglistapp_side, .arrow-packinglistapp_side-blink {
    top: 297px;
    left: 122px;
}
.arrow-release_side, .arrow-release_side-blink {
    top: 297px;
    left: 242px;
}
.arrow-releasedownleft_side, .arrow-releasedownleft_side-blink {
    top: 358px;
    left: 116px;
}
.arrow-releasedownright_side, .arrow-releasedownright_side-blink {
    top: 344px;
    left: 176px;
}
.arrow-stockreturn_down, .arrow-stockreturn_down-blink {
    top: 395px;
    right: 204px;
}
.arrow-creditdebitmemopurchase_down, .arrow-creditdebitmemopurchase_down-blink {
    top: 395px;
    right: 144px;
}
/************************************************/
/*************** P U R C H A S E ****************/
/***************** A C T I O N ******************/
a#POFORCETOSERVE {
    right: 448px;
    top: 112px;
}
a#PURCHASEORDER {
    top: 112px;
    right: 328px;
}
a#REORDERINGAPP {
    right: 208px;
    top: 112px;
}
a#REORDERING {
    right: 88px;
    top: 112px;
}
a#APPROVEDPO {
    top: 192px;
    right: 328px;
}
a#NONTRADEPURCHASING {
    top: 192px;
    right: 448px;
}
a#TRADEPURCHASING {
    right: 52px;
    top: 243px;
}
a#PURCHASEBARCODESCANNING {
    right: 208px;
    top: 243px;
}
a#STOCKRETURNPURCHASE {
    right: 186px;
    top: 323px;
}
a#CREDITDEBITMEMOPURCHASE {
    right: 71px;
    top: 323px;
}
a#REQUESTFORPAYMENT {
    top: 404px;
    right: 128px;
}
a#FINANCEAPPROVAL {
    top: 485px;
    right: 128px;
}
a#REQUESTFORPAYMENTAPPROVAL {
    top: 566px;
    right: 128px;
}
a#CHECKVOUCHER {
    top: 566px;
    right: 7px;
}
/***************** L I N E **********************/
#PURCHASEORDER_LINE {
    top: 140px;
    right: 316px;
}
#PURCHASEORDERDOWN_LINE {
    top: 172px;
    left: 822px;
}
#PURCHASEORDERAPPROVAL_LINE {
    top: 221px;
    right: 428px;
}
#PURCHASEORDERAPPROVALRIGHT01_LINE {
    top: 221px;
    right: 102px;
    width: 226px;
}
#PURCHASEORDERAPPROVALRIGHTDOWN_LINE {
    top: 222px;
    right: 102px;
}
#PURCHASEORDERAPPROVALRIGHT02_LINE {
    top: 222px;
    right: 258px;
}
#REQUESTFORPAYMENT_LINE {
    top: 464px;
    right: 175px;
}
#FINANCEAPPROVAL_LINE {
    top: 545px;
    right: 175px;
}
#RFPAPPROVAL_LINE {
    top: 594px;
    right: 116px;
}
/***************** A R R O W ********************/
.arrow-purchaseorder_side, .arrow-purchaseorder_side-blink {
    top: 136px;
    right: 309px;
}
.arrow-purchaseorder_down, .arrow-purchaseorder_down-blink {
    top: 184px;
    right: 372px;
}
.arrow-purchaseorederapp_side, .arrow-purchaseorederapp_side-blink {
    top: 217px;
    right: 439px;
}
.arrow-purchaseorderapprovalright01_down, .arrow-purchaseorderapprovalright01_down-blink {
    top: 234px;
    right: 98px;
}
.arrow-purchaseorderapprovalright02_down, .arrow-purchaseorderapprovalright02_down-blink {
    top: 234px;
    right: 254px;
}
.arrow-requestforpayment_down, .arrow-requestforpayment_down-blink {
    top: 476px;
    right: 171px;
}
.arrow-financeapproval_down, .arrow-financeapproval_down-blink {
    top: 557px;
    right: 171px;
}
.arrow-rfpapproval_side, .arrow-rfpapproval_side-blink {
    top: 590px;
    right: 109px;
}
/*************** I N V E N T O R Y ****************/
/***************** A C T I O N ******************/

a#STOCKTRANSFERDELIVERY {
    left: 130px;
    top: 523px;
}
a#STOCKTRANSFERRECEIVING {
    left: 250px;
    top: 523px;
}