#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: 10px;
    font-weight: 600;
    border: 1px solid;
    padding: 0 56px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}

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

.porjectmgt {
    position: absolute;
    left: 157px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 324px;
    font-weight: 600;
    border: 1px solid;
    padding: 0px 58px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}
.accountingtitle {
    position: absolute;
    left: 817px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 324px;
    font-weight: 600;
    border: 1px solid;
    padding: 0px 58px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}
.inventorytitle {
    position: absolute;
    right: 188px;
    font-size: 14px;
    background: #304967;
    color: #fff;
    top: 519px;
    font-weight: 600;
    border: 1px solid;
    padding: 0px 58px;
    border-radius: 4px;
    font-family: cursive;
    letter-spacing: 0.04em;
}


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

#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;
    }
}

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

.img_line_side_djust {
    border: 1px solid rgb(182 200 218);
    width: 123px;
    position: absolute;
}

.img_line_straight_djust {
    border: 1px solid rgb(182 200 218);
    height: 76px;
    position: absolute;
}

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

.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;
}

.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;
}

/*** line sales ***/

#img_line_01 {
    top: 122px;
    left: 111px;
}

#img_line_02 {
    top: 206px;
    left: 111px;
}

#img_line_03 {
    top: 231px;
    left: 150px;
    transform: rotate( 343deg);
    background: rgb(182 200 218);
    width: 196px;
}


#img_line_04 {
    top: 259px;
    left: 284px;
}

#img_line_05 {
    top: 206px;
    left: 358px;
}

#img_line_06 {
    top: 122px;
    left: 358px;
}

#img_line_07 {
    top: 174px;
    left: 408px;
}

/*** line sales ***/

#img_line_08 {
    top: 91px;
    left: 760px;
}

#img_line_09 {
    top: 122px;
    left: 834px;
}

#img_line_10 {
    top: 177px;
    right: 242px;
}

#img_line_11 {
    top: 175px;
    right: 118px;
    width: 198px;
}

#img_line_12 {
    top: 175px;
    right: 416px;
}

#img_line_13 {
    top: 429px;
    right: 192px;
}

#img_line_14 {
    top: 392px;
    right: 192px;
}

#img_line_15 {
    top: 259px;
    right: 145px;
}

#img_line_16 {
    top: 429px;
    right: 415px;
}

#img_line_17 {
    top: 390px;
    right: 178px;
}

#img_line_18 {
    top: 512px;
    right: 424px;
}

#img_line_19 {
    top: 253px;
    right: 290px;
    transform: rotate( 41deg);
    -webkit-transform: rotate( 41deg);
    height: 57px;
}
#img_line_20 {
    top: 177px;
    right: 118px;
}
#img_line_21 {
    top: 466px;
    right: 178px;
}
#img_line_22 {
    top: 192px;
    right: 453px;
    transform: rotate( 142deg);
    -webkit-transform: rotate( 142deg);
    height: 128px;
}
#img_line_23 {
    top: 460px;
    right: 486px;
}
#img_line_24 {
    top: 428px;
    left: 160px;
}
#img_line_25 {
    top: 428px;
    left: 284px;
}
    /*** arrow sales ***/
    .arrow-salesorder_down, .arrow-salesorder_down-blink {
        top: 138px;
        left: 107px;
    }

.arrow-salesorderverification_down, .arrow-salesorderverification_down-blink {
    top: 222px;
    left: 107px;
}

.arrow-salesorderapp_side, .arrow-salesorderapp_side-blink {
    top: 201px;
    left: 329px;
    transform: rotate( 333deg);
}

.arrow-deliverystatus_side, .arrow-deliverystatus_side-blink {
    top: 255px;
    left: 300px;
}

.arrow-preparedinvoice_down, .arrow-preparedinvoice_down-blink {
    top: 222px;
    left: 354px;
}

.arrow-payment_down, .arrow-payment_down-blink {
    top: 138px;
    left: 354px;
}

.arrow-preparedinvoice_side, .arrow-preparedinvoice_side-blink {
    top: 170px;
    left: 424px;
}
/*** arrow purchase ***/
.arrow-purchaserequest_side, .arrow-purchaserequest_side-blink {
    top: 87px;
    left: 776px;
}

.arrow-prforpo_down, .arrow-prforpo_down-blink {
    top: 138px;
    right: 360px;
}

.arrow-purchaseorder_down, .arrow-purchaseorder_down-blink {
    top: 193px;
    right: 238px;
}

.arrow-purchaseorderapp_side, .arrow-purchaseorderapp_side-blink {
    top: 300px;
    right: 309px;
    transform: rotate( 138deg);
    -webkit-transform: rotate( 138deg);
}

.arrow-purchaseor_lside, .arrow-purchaseor_lside-blink {
    top: 171px;
    right: 432px;
}

.arrow-requestforpayment_sideup, .arrow-requestforpayment_sideup-blink {
    top: 386px;
    right: 171px;
}

.arrow-requestforpayment_down, .arrow-requestforpayment_down-blink {
    top: 425px;
    right: 431px;
}

.arrow-requestforpayment_sidedown, .arrow-requestforpayment_sidedown-blink {
    top: 462px;
    right: 171px;
}

.arrow-financialapp_down, .arrow-financialapp_down-blink {
    top: 508px;
    right: 417px;
}

.arrow-tradepurchase_down, .arrow-tradepurchase_down-blink {
    top: 301px;
    right: 411px;
    transform: rotate( -41deg);
    -webkit-transform: rotate( -41deg);
}
.arrow-purchaseorderapp_down, .arrow-purchaseorderapp_down-blink {
    top: 193px;
    right: 114px;
}
.arrow-financialapp2_down, .arrow-financialapp2_down-blink {
    top: 476px;
    right: 482px;
}
/*** arrow inventory ***/

.arrow-stocktransferorder_side, .arrow-stocktransferorder_side-blink {
    top: 424px;
    left: 176px;
}
.arrow-stocktransferdelivery_side, .arrow-stocktransferdelivery_side-blink {
    top: 424px;
    left: 300px;
}
/** Sales action **/
a#SalesOrder {
    top: 62px;
    left: 60px;
}

a#SOApproved1 {
    top: 146px;
    left: 60px;
}

a#SOApproved2 {
    top: 230px;
    left: 60px;
}

a#DeliveryReceipt {
    top: 230px;
    left: 184px;
}

a#DeliveryStatus {
    top: 230px;
    left: 308px;
}

a#Payment {
    top: 62px;
    left: 308px;
}

a#PreparedInvoice {
    top: 146px;
    left: 308px;
}

a#CreditDebitMemo {
    top: 146px;
    left: 432px;
}

a#StockReturn {
    top: 62px;
    left: 432px;
}
/** Purchase action **/
a#Purchaserequest {
    top: 62px;
    right: 440px;
}

a#PurchaseOrder {
    top: 62px;
    right: 316px;
}

a#ApprovedPO {
    top: 146px;
    right: 316px;
}

a#createRR {
    top: 201px;
    right: 192px;
}

a#TradePurchasing {
    top: 201px;
    right: 68px;
}

a#RequestForPayment {
    top: 400px;
    right: 315px;
}

a#CreditDebitMemoPurchase {
    top: 360px;
    right: 68px;
}

a#ApprAccountingRFP {
    top: 400px;
    right: 440px;
}

a#StockReturnPurchase {
    top: 437px;
    right: 68px;
}

a#CheckVoucher {
    top: 484px;
    right: 316px;
}

a#NonTradePurchasing {
    top: 146px;
    right: 440px;
}
a#ApprManagementRFP {
    top: 484px;
    right: 440px;
}
a#journal_voucher {
    top: 484px;
    right: 191px;
}
/** production action **/
a#stocktransferorder {
    top: 400px;
    left: 60px;
}

a#stocktransferdelivery {
    top: 400px;
    left: 184px;
}

a#stocktransferreceiving {
    top: 400px;
    left: 308px;
}