phpvms/public/assets/frontend/sass/now-ui-kit/_pills.scss

.nav-pills{

    .nav-item {
        .nav-link{
            padding: 0 15.5px;
            text-align: center;
            height: 60px;
            width: 60px;
            font-weight: $font-weight-normal;
            color: $dark-gray;
            margin-right: 19px;
            background-color: $opacity-gray-3;
            border-radius: $btn-round-radius;

            &:hover{
                background-color: $opacity-gray-3;
            }

            &.active{
                &,
                &:focus,
                &:hover{
                    background-color: $dark-gray;
                    color: $white-color;
                    box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
                }
            }

            &.disabled,
            &:disabled,
            &[disabled]{
                opacity: .5;
            }
        }

        i{
            display: block;
            font-size: 20px;
            line-height: 60px;
        }
    }

    &.nav-pills-neutral{
        .nav-item {
            .nav-link{
                background-color: $opacity-2;
                color: $white-color;

                &.active{
                    &,
                    &:focus,
                    &:hover{
                        background-color: $white-color;
                        color: $primary-color;
                    }
                }
            }
        }
    }

    &.nav-pills-primary{
        .nav-item {
            .nav-link.active{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-primary;
                }
            }
        }
    }

    &.nav-pills-info{
        .nav-item {
            .nav-link.active{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-info;
                }
            }
        }
    }

    &.nav-pills-success{
        .nav-item {
            .nav-link.active{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-success;
                }
            }
        }
    }

    &.nav-pills-warning{
        .nav-item {
            .nav-link.active{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-warning;
                }
            }
        }
    }

    &.nav-pills-danger{
        .nav-item {
            .nav-link.active{
                &,
                &:focus,
                &:hover{
                    background-color: $brand-danger;
                }
            }
        }
    }
}
.tab-space{
    padding: 20px 0 50px 0px;
}

.nav-align-center{
    text-align: center;

    .nav-pills{
        display: inline-flex;
    }
}