<div class="animate-fadeInUpBounce">

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.extras}">Extras
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.extras-descripcion}">Seleccione los extras
                que desea añadir a su presupuesto.</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div id="div-extras" class="hstack gap-2 justify-content-center flex-wrap" th:data-currency="#{app.currency-symbol}">
            </div>
        </div>
    </div>
    <!-- End Ribbon Shape -->

    <div class="d-flex justify-content-between align-items-center mt-4 w-100">
        <button id="btn-prev-extras" type="button"
            class="btn btn-light d-flex align-items-center btn-change-tab-extras">
            <i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
            <span th:text="#{presupuesto.volver-seleccion-tirada}">Volver a selección de tirada</span>
        </button>
        <button id="btn-next-extras" type="button"
            class="btn btn-secondary d-flex align-items-center btn-change-tab-extras">
            <span><b th:text="#{presupuesto.resumen}">Resumen</b></span>
            <i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
        </button>
    </div>
</div>