/*  BLUE */
.dashboard.blue {
    background-color: #c8e6fa;
    border-bottom-color: #0e62d6;
}

.dashboard.blue i  {
    color: #0e62d6;
}

.dashboard.blue .dashboard-icon i {
    background-color: #0e62d6;
    color: white;
}

/*  VIOLET */
.dashboard.violet {
    background-color: #c9d4fe;
    border-bottom-color: #4f46e5;
}

.dashboard.violet i  {
    color: #4f46e5;
}

.dashboard.violet .dashboard-icon i {
    background-color: #4f46e5;
    color: white;
}

/*  GRAY */
.dashboard.gray {
    background-color: #dbdbdb;
    border-bottom-color: #afafaf;
}

.dashboard.gray i  {
    color: #afafaf;
}

.dashboard.gray .dashboard-icon i {
    background-color: #afafaf;
    color: white;
}

/*  LIGHTRED */
.dashboard.lightred {
    background-color: #fed4d4;
    border-bottom-color: #dc2626;
}

.dashboard.lightred i {
    color: #dc2626;
}

.dashboard.lightred .dashboard-icon i {
    background-color: #dc2626;
    color: white;
}

/*  RED */
.dashboard.red {
    background-color: #ff8b9f;
    border-bottom-color: #dc2626;
}

.dashboard.red i {
    color: #d3bdbd;
}

.dashboard.red .dashboard-icon i {
    background-color: #d3bdbd;
    color: white;
}

/*  GREEN */
.dashboard.green {
    background-color: #b8f5d8;
    border-bottom-color: #059669;
}

.dashboard.green i {
    color: #059669;
}

.dashboard.green .dashboard-icon i {
    background-color: #059669;
    color: white;
}

/*  ORANGE */
.dashboard.orange {
    background-color: #fdeca9;
    border-bottom-color: #d97706;
}

.dashboard.orange i {
    color: #d97706;
}

.dashboard.orange .dashboard-icon i {
    background-color: #d97706;
    color: white;
}