<style>

    .small-box {

        border-radius: .25rem;

        box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);

        display: block;

        margin-bottom: 20px;

        position: relative

    }



    .small-box>.inner {

        padding: 10px

    }



    .small-box>.small-box-footer {

        background-color: rgba(0, 0, 0, .1);

        color: rgba(255, 255, 255, .8);

        display: block;

        padding: 3px 0;

        position: relative;

        text-align: center;

        text-decoration: none;

        z-index: 10

    }



    .small-box>.small-box-footer:hover {

        background-color: rgba(0, 0, 0, .15);

        color: #fff

    }



    .small-box h3 {

        font-size: 2.2rem;

        font-weight: 700;

        margin: 0 0 10px;

        padding: 0;

        white-space: nowrap

    }



    @media (min-width: 992px) {



        .col-lg-2 .small-box h3,

        .col-md-2 .small-box h3,

        .col-xl-2 .small-box h3 {

            font-size: 1.6rem

        }



        .col-lg-3 .small-box h3,

        .col-md-3 .small-box h3,

        .col-xl-3 .small-box h3 {

            font-size: 1.6rem

        }

    }



    @media (min-width: 1200px) {



        .col-lg-2 .small-box h3,

        .col-md-2 .small-box h3,

        .col-xl-2 .small-box h3 {

            font-size: 2.2rem

        }



        .col-lg-3 .small-box h3,

        .col-md-3 .small-box h3,

        .col-xl-3 .small-box h3 {

            font-size: 2.2rem

        }

    }



    .small-box p {

        font-size: 1rem

    }



    .small-box p>small {

        color: #f8f9fa;

        display: block;

        font-size: .9rem;

        margin-top: 5px

    }



    .small-box h3,

    .small-box p {

        z-index: 5

    }



    .small-box .icon {

        color: rgba(0, 0, 0, .15);

        z-index: 0

    }



    .small-box .icon>i {

        font-size: 90px;

        position: absolute;

        right: 15px;

        top: 15px;

        transition: -webkit-transform .3s linear;

        transition: transform .3s linear;

        transition: transform .3s linear, -webkit-transform .3s linear

    }



    .small-box .icon>i.fa,

    .small-box .icon>i.fab,

    .small-box .icon>i.fad,

    .small-box .icon>i.fal,

    .small-box .icon>i.far,

    .small-box .icon>i.fas,

    .small-box .icon>i.ion {

        font-size: 70px;

        top: 20px

    }



    .small-box .icon svg {

        font-size: 70px;

        position: absolute;

        right: 15px;

        top: 15px;

        transition: -webkit-transform .3s linear;

        transition: transform .3s linear;

        transition: transform .3s linear, -webkit-transform .3s linear

    }



    .small-box:hover {

        text-decoration: none

    }



    .small-box:hover .icon>i,

    .small-box:hover .icon>i.fa,

    .small-box:hover .icon>i.fab,

    .small-box:hover .icon>i.fad,

    .small-box:hover .icon>i.fal,

    .small-box:hover .icon>i.far,

    .small-box:hover .icon>i.fas,

    .small-box:hover .icon>i.ion {

        -webkit-transform: scale(1.1);

        transform: scale(1.1)

    }



    .small-box:hover .icon>svg {

        -webkit-transform: scale(1.1);

        transform: scale(1.1)

    }



    @media (max-width: 767.98px) {

        .small-box {

            text-align: center

        }



        .small-box .icon {

            display: none

        }



        .small-box p {

            font-size: 12px

        }

    }

</style>



<div class="row">

    <div class="col-lg-3 col-6">

        <!-- small box -->

        <div class="small-box bg-info">

            <div class="inner">

                <h3><?= number_format($alumno ? $alumno->alumnos : 0, 0) ?></h3>

                <p class="text-white">Total de Alumnos</p>

            </div>

            <div class="icon">

                <i class="ion ion-md-body"></i>

            </div>

            <!-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->

        </div>

    </div>

    <!-- ./col -->

    <div class="col-lg-3 col-6">

        <!-- small box -->

        <div class="small-box bg-purple">

            <div class="inner">

                <h3><?= number_format($alumno ? $pronoei->total : 0, 0) ?></h3>

                <p class="text-white">Total de PRONOEI</p>

            </div>

            <div class="icon">

                <i class="ion ion-md-body"></i>

            </div>

            <!-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->

        </div>

    </div>

    <!-- ./col -->

    <div class="col-lg-3 col-6">

        <!-- small box -->

        <div class="small-box bg-success">

            <div class="inner">

                <h3><?= number_format($alumno ? $alumno->sanemicos : 0, 0) ?></h3>

                <p class="text-white">Alumnos con Anemia</p>

            </div>

            <div class="icon">

                <i class="ion ion-md-body"></i>

            </div>

            <!-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->

        </div>

    </div>

    <!-- ./col -->

    <div class="col-lg-3 col-6">

        <!-- small box -->

        <div class="small-box bg-danger">

            <div class="inner">

                <h3><?= number_format($alumno ? $alumno->nanemicos : 0, 0) ?></h3>

                <p class="text-white">Alumnos sin Anemia</p>

            </div>

            <div class="icon">

                <i class="ion ion-md-body"></i>

            </div>

            <!-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->

        </div>

    </div>

    <!-- ./col -->

</div>