//*****************************************************************************
//*****************************************************************************
// Dashboard Styles
//*****************************************************************************
//*****************************************************************************
.dashboard {

    .card-btn {
        font-size: 11px;
        padding: 0px 10px;
        border-radius: 5px;
        line-height: 1.5rem;
        font-weight: bold;
    }

    .q-card {
        background: #fff;
        border: 1px solid #e5e5e5;
    }

    .dash-block {
        margin-bottom: 2rem;

        .dash-widget {
            padding: 15px;

            .dash-widget-title {
                display: flex;

                .q-icon {
                    margin-top: 10px;
                    margin-right: 8px;
                }

                span {
                    float: left;

                    &:after {
                        content: "";
                        display : block;
                        background: #78a5dd;
                        height: 2px;
                        float: left;
                        width: 100%;
                        clear: both;
                        margin-top: 5px;
                        margin-left: -2px;
                    }
                }
            }
        }

        .q-card__section.dashboard-jobs-list {
            padding: 0;

            .fa {
                margin-right: 5px;
            }
        }

    }

    //=========================================================================
    // Active Jobs
    //=========================================================================
    .active-jobs {

        .active-item {
            margin-bottom: 10px;

            &:first-child {
                margin-top: 5px;
            }

            .item-count {
                display: inline-block;
                width: 75px;
                font-size: 16px;
                font-weight: 600;
            }

            small {
                display: inline-block;
                font-size: 14px;
            }
        }

        .chart {
            padding: 20px;
            padding-bottom: 50px;

            @media (max-width: 575px) {
                padding: 5px;
            }
        }

    }

    //=========================================================================
    // Recent Jobs
    //=========================================================================
    .recent-jobs {
        .dashboard-jobs-list {
            .fa {
                margin-right: 5px;
            }
        }
    }

    //*************************************************************************
    //*************************************************************************
    // Responsive CSS Styles
    //*************************************************************************
    //*************************************************************************

    //=========================================================================
    // Large desktop
    //=========================================================================
    @media (min-width: 1200px) {

    }

    //=========================================================================
    // Small Desktop
    //=========================================================================
    @media (min-width: 980px) {

    }

    //=========================================================================
    // Portrait tablet to landscape and Desktop
    //=========================================================================
    @media (min-width: 768px) and (max-width: 979px) {

    }

    //=========================================================================
    // Tablet
    //=========================================================================
    @media (max-width: 1024px) {

    }

    //=========================================================================
    // Landscape phone to portrait tablet
    //=========================================================================
    @media (max-width: 767px) {

    }

    //=========================================================================
    // 575px is a change point
    //=========================================================================
    @media (max-width: 575px) {
        .active-jobs2,
        .recent-jobs {
            .q-card {
                background: transparent;
                border: 0;
            }
            .q-card-separator {
                background: transparent;
            }
        }
    }

    //=========================================================================
    // Landscape phones
    //=========================================================================
    @media (max-width: 480px) {

    }

    //=========================================================================
    // Portrait phones and down
    //=========================================================================
    @media (max-width: 320px) {

    }

}