<div class="row justify-content-center">
    @foreach( $graficos as $key => $value )
        <div class='col-12 col-md-12 col-lg-12 col-xl-6 col-xxl-6 col-xxxl-4 p-2 chart-columns' id="ver-grafico-{{$value->clave_indicador}}">
            {{--@if( $value->clave_indicador != 'GRAFICO_FIDECHECK' )--}}
            <div tabindex="0" style="box-shadow: 1px 1px 5px 2px gray" class='card grafico-dashboard' @if( isset($value->datos->lista) ) data-lista='{{$value->datos->lista}}' @endif id="grafico-{{ $value->clave_indicador }}" data-indicador="{{ $value->clave_indicador }}">
                <input type="hidden" id="datos-grafico-{{ $value->clave_indicador }}" value="{{ json_encode($value->datos) }}">
                <!-- -->
                <div class='card-body card-cuerpo pt-0 @if (Session::get("modo") == 1) text-white bg-dark @else text-secondary @endif'>
                    <div class="d-flex" id="titulo-{{ $value->clave_indicador }}">
                        <h6 class="text-start fw-bold">{{ $value->titulo_grafico }}</h6>
                    </div>
                    <!-- -->
                    <div class="d-flex align-items-center justify-content-center py-3" id="loading-{{ $value->clave_indicador }}">
                        <div class="spinner-border text-fidelitas" style="width: 3rem; height: 3rem;"></div>
                    </div>
                    <!-- -->
                    <div class="d-flex align-items-center justify-content-center my-3 d-none" id="sin-datos-{{ $value->clave_indicador }}">
                        <h6 class="text-center lead fw-light" style="font-size:15px;">@traducir('Sin datos aún', 'Sin datos aún')</h6>
                    </div>
                    <!-- -->
                    <div id='chart_{{ $value->clave_indicador }}' class="charts-dashboard"></div>
                </div>
            </div>
            {{--@elseif ( $value->clave_indicador == 'GRAPH_COMPLIANCE' )
                <!-- COMPLIANCE -->
                <div tabindex="0" class='card grafico-compliance' style="box-shadow: 1px 1px 5px 2px gray" id="grafico-compliance">
                    <!-- -->
                    <input type="hidden" id="datos-graficos-compliance" value="{{ json_encode($value->datos) }}">
                    <!-- -->
                    <div class='card-body pt-0 @if (Session::get("modo") == 1) text-white bg-dark @endif'>
                        <div class="d-flex py-2" id="titulo-{{ $value->clave_indicador }}">
                            <h6 class="text-start text-secondary fw-bold">{{ $value->titulo_grafico }}</h6>
                        </div>
                        <!-- -->
                        @if( !empty( $value->datos ))
                        <div class="row justify-content-center">
                            @foreach( $value->datos as $gf)
                            <div class="col-md-4 text-center">
                                <i class="fas fa-male personas-compliance FI{{ $gf->valor_texto }}" data-claveIndicador="{{ $gf->valor_texto }}" data-compliance="{{$gf->valor_texto}}" style="color:#{{$gf->color}};cursor:pointer;font-size:18rem;" @if( empty($gf->total) ) data-sin-filtrar="1" @endif></i>
                                <div class="text-fidecheck" style="font-size: 70%;">{{ $gf->etiqueta }} <br><span class="NFI{{ $gf->valor_texto }}">{{ $gf->total }}</span></div>
                            </div>
                            @endforeach						
                        </div>
                        @else
                            <span class="texto-caja">@traducir('Sin datos aún', 'Sin datos aún')</span>
                        @endif
                    </div>
                </div>--}}
            {{--@else
                <!-- FIDECHECK -->
                <div tabindex="0" class='card grafico-fidecheck' style="box-shadow: 1px 1px 5px 2px gray" id="grafico-fidecheck">
                    <!-- -->
                    <div class='card-body pt-0 @if (Session::get("modo") == 1) text-white bg-dark @endif'>
                        <div class="d-flex py-2" id="titulo-{{$key}}">
                            <h6 class="text-start text-secondary fw-bold">{{ $value->titulo_grafico }}</h6>
                        </div>
                        <!-- -->
                        @if( !empty($value->datos) )
                        <div class="row justify-content-center py-4">
                            @foreach( $value->datos as $gf)
                            <div class="col-md-3 text-center">
                                <i class="fas fa-10x fa-male personas-fidecheck F{{$gf->valor_texto}}" data-claveIndicador="{{ $gf->valor_texto }}" style="color:#{{$gf->color}};cursor:pointer;" @if( empty($gf->total) ) data-sin-filtrar="1" @endif></i>
                                <div class="text-fidecheck" style="font-size: 70%;">{{$gf->etiqueta}} <br><span class="NF{{$gf->valor_texto}}" >{{ $gf->total }}</span></div>
                            </div>
                            @endforeach						
                        </div>
                        @else
                            <span class="texto-caja">@traducir('Sin datos aún', 'Sin datos aún')</span>
                        @endif
                    </div>
                </div>
            @endif--}}
        </div>
    @endforeach
</div>

<style>
    @media screen and (min-width:720px) and (max-width:1400px){  
        .card.grafico-dashboard{
            transform:translateY(-20px);
            margin-left:-2%;
        }
    }
</style>
