/* CARD PAGE TITLE */
.card{
    background-color: var(--color-two);
    border: 1px solid var(--color-two-border) !important;
}
.card-page-title{
    background-color: var(--color-two);
    color: var(--card-color-one);
    margin-bottom: 20px;
}
.card-page-title h6{
    margin-bottom: 0px;
    font-weight: 600;
}
.card-page-title small{
    display: block; 
}
.card-footer{
    border-color: var(--card-border-one) !important;
}

/*CARD PLANOS PREMIUM*/
.premium-box{
    display: inline-grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    gap: 20px;
}
.premium-item{
    background-color: var(--color-two);
    border: 1px solid var(--color-two-border);
    border-radius: 20px;
}
.premium-item .top-circle{
    width: 100px;
    height: 100px;
    margin: 20px auto 10px auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color-one);
    border: 5px solid var(--color-three);
    padding: 20px;
}
.premium-item .top-circle h4{
    margin-bottom: 0px;
    font-size: 20px;
}
.premium-item .tela{
    text-align: center;
    font-weight: 600;
    color: var(--text-color-white);
}
.premium-item .list-group .list-group-item{
    border: none;
    border-radius: 0px;
    text-align: center;
    background-color: transparent;
    color: var(--text-color);
    border-bottom: 1px solid var(--card-one-border);
}
.premium-item .footer{
    padding: 1rem;
}
.premium-item .footer .btn{
    width: 100%;
    margin-bottom: 10px;
} 

/* CARD DASHBOARD */
.card-dashboard-box{
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding-bottom: 40px;
}
.card-dashboard-item{
    border-radius: 10px;
    padding: 12px;
} 
.card-dashboard-item .card-body{
    display: flex;
    width: 100%;
    height: 75px;
}
.card-dashboard-item  .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-right: 15px;
}
.card-dashboard-item  .icon p{
    margin-bottom: 0px;
}
.card-dashboard-item .icon i{
    font-size: 25px;
    color: var(--color-one);
    margin-bottom: 5px;
    margin-top: 5px;
}
.card-dashboard-item .info{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}
.card-dashboard-item .info p{ 
    margin-bottom: 0px;
}
@media screen and (max-width: 767px){
    .card-dashboard-box{
        grid-template-columns: repeat(1, 1fr);
    }
}