.big-box {
    padding: 10px;
    background-color: var(--light);
    border-top-style: solid;
    border-top-width: 5px;
    border-top-color: var(--gray);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {

    .big-box {
        padding: 5px;
    }

    .small-box {
        margin-left: 7px;
        margin-right: 7px;
    }

        .small-box .icon {
            display: block;
        }

    .content-wrapper {
        padding: 3px !important;
    }

    .container-fluid {
        padding: 1px !important;
    }
}

.small-box {
    min-height: 120px;
    background-color: var(--light);
    border-top-style: solid;
    border-top-width: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-color: var(--gray);
}

    .small-box a {
        color: var(--gray-dark);
    }


    .small-box .icon > i {
        right: 20px;
    }

    .small-box div.inner > h4 {
        margin-bottom: 0;
    }

.box-color-light1 {
    border-top-color: var(--color-light1);
}

    .box-color-light1 a {
        color: var(--color-light1);
    }

        .box-color-light1 a p {
            color: var(--gray);
        }


.box-color-light2 {
    border-top-color: var(--color-light2);
}

    .box-color-light2 a {
        color: var(--color-light2);
    }

        .box-color-light2 a p {
            color: var(--gray);
        }

.box-color-active {
    border-top-color: var(--color-active);
}

    .box-color-active a {
        color: var(--color-active);
    }

        .box-color-active a p {
            color: var(--gray);
        }

.box-color-dark1 {
    border-top-color: var(--color-dark1);
}

    .box-color-dark1 a {
        color: var(--color-dark1);
    }

        .box-color-dark1 a p {
            color: var(--gray);
        }

.box-color-dark2 {
    border-top-color: var(--color-dark2);
}

    .box-color-dark2 a {
        color: var(--color-dark2);
    }

        .box-color-dark2 a p {
            color: var(--gray);
        }

.box-raspberry {
    border-top-color: var(--raspberry);
}

    .box-raspberry a {
        color: var(--raspberry);
    }

        .box-raspberry a p {
            color: var(--anthracite);
        }

.box-azure-blue {
    border-top-color: var(--azure-blue);
}

    .box-azure-blue a {
        color: var(--azure-blue);
    }

        .box-azure-blue a p {
            color: var(--azure-blue);
        }

.box-orange-brown {
    border-top-color: var(--orange-brown);
}

    .box-orange-brown a {
        color: var(--anthracite);
    }

        .box-orange-brown a p {
            color: var(--dark);
        }