{{-- Mixed Widget 1 --}}
<div class="card card-custom bg-white {{ @$class }} border-10 ff-montserrat shadow">
    {{-- Body --}}
    <div class="card-body d-flex align-items-center p-6">
        <div class="d-flex align-items-center justify-content-between flex-grow-1">
            <span class="symbol symbol-50 mr-4">
                <span class="symbol-label border-10" style="background-color: #D4F4E8">
                    <span class="svg-icon svg-icon-xl svg-icon-info">
                        <!--begin::Svg Icon | path:/metronic/theme/html/demo1/dist/assets/media/svg/icons/Shopping/Cart3.svg-->
                        <svg xmlns="http://www.w3.org/2000/svg" width="25.652" height="28" viewBox="0 0 25.652 28">
                            <path id="Caminho_348" data-name="Caminho 348" d="M502.346,256.5a1.6,1.6,0,0,1-.459-1.206c.019-3.254.01-6.508.009-9.763a2.6,2.6,0,0,0-2.937-2.942c-.948,0-1.9,0-2.9,0a2.067,2.067,0,0,0-1.365-2.355h-8.96a2.032,2.032,0,0,0-1.322,2.308c-.219.017-.394.044-.57.045-.932,0-1.865-.011-2.8.007a2.469,2.469,0,0,0-2.447,2.266,7.929,7.929,0,0,0-.025.808q0,9.7,0,19.393c0,1.875.386,2.468,2.06,3.172h17.422a16.606,16.606,0,0,0,2.908-1.134A6.9,6.9,0,0,0,502.346,256.5Zm-15.57-13.9h6.9v2.267h-6.9Zm5.138,23.239a4.056,4.056,0,0,1-.458.055c-3.318,0-6.636-.006-9.952.013-.49,0-.633-.136-.632-.632q.024-9.89,0-19.779c0-.44.1-.642.586-.628.951.027,1.9.007,2.9.007.036.363.045.632.092.895a1.661,1.661,0,0,0,1.683,1.442q4.073.015,8.147,0a1.745,1.745,0,0,0,1.775-1.644c.02-.2,0-.41,0-.689,1.075,0,2.107,0,3.137,0,.424,0,.355.315.355.577q0,3.078,0,6.157v2.966c-3.661-.87-6.64.056-8.485,3.412C489.578,260.7,490.06,263.34,491.914,265.835Zm5.357.057a4.618,4.618,0,0,1-4.707-4.661,4.673,4.673,0,0,1,4.643-4.683,4.732,4.732,0,0,1,4.7,4.654A4.665,4.665,0,0,1,497.271,265.893Z" transform="translate(-478.571 -240.232)" fill="#02bc77"/>
                            <path id="Caminho_350" data-name="Caminho 350" d="M506.8,301.712a1.117,1.117,0,0,1-1.218,1.185q-2.83.017-5.661,0a1.144,1.144,0,1,1-.011-2.28c.954-.012,1.908,0,2.862,0,.933,0,1.866-.007,2.8,0C506.342,300.626,506.783,301.029,506.8,301.712Z" transform="translate(-494.005 -286.585)" fill="#02bc77"/>
                            <path id="Caminho_351" data-name="Caminho 351" d="M535.738,281.548c.007.727-.459,1.159-1.3,1.175-.724.014-1.45,0-2.174,0s-1.45.01-2.175,0a1.173,1.173,0,1,1,.029-2.323q2.145-.013,4.288,0C535.234,280.4,535.729,280.845,535.738,281.548Z" transform="translate(-517.106 -271.064)" fill="#02bc77"/>
                            <path id="Caminho_352" data-name="Caminho 352" d="M500.677,321.753a1.2,1.2,0,0,1-1.348,1.145c-.725.007-1.451,0-2.175,0s-1.451.01-2.175,0a1.131,1.131,0,0,1-1.268-1.141,1.156,1.156,0,0,1,1.3-1.18q2.175-.015,4.35,0A1.192,1.192,0,0,1,500.677,321.753Z" transform="translate(-490.193 -301.906)" fill="#02bc77"/>
                            <path id="Caminho_353" data-name="Caminho 353" d="M503.3,281.505a1.1,1.1,0,0,1-1.094,1.181c-.154.012-.309.016-.464.016q-.153,0-.306,0h-.068c-.08,0-.158,0-.238,0h-.347l-.272,0c-.167,0-.332.005-.5,0-.076,0-.152-.006-.228-.012a1.137,1.137,0,0,1-1.107-1.181,1.122,1.122,0,0,1,1.105-1.121c.805-.037,1.615-.036,2.422,0A1.106,1.106,0,0,1,503.3,281.505Z" transform="translate(-494.009 -271.036)" fill="#02bc77"/>
                            <path id="Caminho_354" data-name="Caminho 354" d="M554.314,322.648q-1.083,1.113-2.2,2.2a1.152,1.152,0,0,1-1.752-.015c-.346-.328-.681-.668-1.009-1.012a1.18,1.18,0,0,1-.095-1.71,1.208,1.208,0,0,1,1.72.069c.077.067.151.138.3.28.485-.5.935-.987,1.407-1.451a1.13,1.13,0,0,1,1.7-.07A1.176,1.176,0,0,1,554.314,322.648Z" transform="translate(-532.592 -301.916)" fill="#02bc77"/>
                        </svg>
                        <!--end::Svg Icon-->
                    </span>
                </span>
            </span>
            <div class="d-flex flex-column text-left flex-fill font-size-h6">
                <small class="font-weight-normal text-muted">Tempo em Atendimento</small>
                <span class="font-weight-bold text-dark-75 font-size-h3" id="durationAtend">
                    <div class="spinner py-4"></div>
                </span>
            </div>
            <div class="d-flex flex-column text-right">
                <small class="font-weight-bold">TMA</small>
                <small class="font-weight-normal" id="tma">
                    <div class="spinner py-4"></div>
                </small>
            </div>
        </div>
    </div>
</div>