<style>
    @keyframes placeHolderShimmer {
        0% {
            background-position: -800px 0
        }

        100% {
            background-position: 800px 0
        }
    }

    .animated-background {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 70px;
        position: relative;
    }

    .animated-background-pax {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 50px;
        position: relative;
    }

    .main-item {
        padding: 2px;
    }
</style>
<div class="fare-summay-block">
    <div class="head-element">Fare Summary</div>

    <div class="summary-grid" ng-if="loadingHotel">
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
    </div>
    <div class="summary-grid" style="display: none;" id="summary-grid">
        <div class="summary-block">
            <div class="fare-head">
                <div>Base Fare</div>
                <div>{{fare.Currncy}} {{fare.BaseFare | number:2}}</div>
            </div>
            <div class="fare-desc" ng-repeat="(keys, items) in fare.BaseFareArray">
                <div>{{items.name}}</div>
                <div>{{fare.Currncy}} {{items.BaseFare | number:2}}</div>
            </div>
        </div>
        <div class="summary-block">
            <div class="fare-head">
                <div>Convenience Surcharge</div>
                <div>{{fare.Currncy}} {{((fare.TaxesandFee + fare.FixedMarkUp + fare.GSTOnMarkUp) - fare.Discount) | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>Taxes & Fees</div>
                <div>{{fare.Currncy}} {{(fare.TaxesandFee + fare.FixedMarkUp) | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>GST</div>
                <div>{{fare.Currncy}} {{fare.GSTOnMarkUp | number:2}}</div>
            </div>

            <div class="fare-desc">
                <div>Discount Applied</div>
                <div>
                    - {{fare.Currncy}} {{fare.Discount}}
                </div>
            </div>
        </div>
        <div class="summary-block">
            <div class="fare-head">
                <div>Total Payable</div>
                <div>{{fare.Currncy}} {{fare.GrandTotal | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>Gross Price</div>
                <div>{{fare.Currncy}} {{fare.GrandTotal | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>Net Price</div>
                <div>{{fare.Currncy}} {{fare.GrandTotal | number:2}}</div>
            </div>
        </div>
    </div>

</div>