/* //
// Component: Small Box
// */

.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

/*   // content wrapper */
.small-box > .inner {
    padding: 10px;
  }

.small-box > .small-box-footer {
    background: 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: rgba(0,0,0,.15);
    color: #fff;
}

.small-box:hover {
    text-decoration: none;
}

.small-box  h3 {
    font-size : 2.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
    white-space: nowrap;
}

.small-box h3, .small-box p {
    z-index: 5;
}
 
.small-box .icon {
    color: rgba(0,0,0,.15);
    z-index: 0;
}

.small-box p {
    font-size: 1rem;
}
.small-box p > small {
    color: rgba(0,0,0,.15);
    display: block;
    font-size: 0.9rem;
    margin-top: 5px;
}

/*   // the icon */
.small-box .icon>i {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all .3s linear;
}

.small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.glyphicon, .small-box .icon>i.ion {
    font-size: 45px;
    top: 35px;
}

@media (min-width: 1200px){
    .col-lg-3 .small-box h3, .col-md-3 .small-box h3, .col-xl-3 .small-box h3 {
        font-size: 2.2rem;
    }
}

@media (min-width: 992px){
    .col-lg-3 .small-box h3, .col-md-3 .small-box h3, .col-xl-3 .small-box h3 {
        font-size: 1.6rem;
    }
}