﻿.ati-dashboard {
    width:100%;
    height:100%;
    padding:1rem;
}

.ati-dashboard-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ati-dashboard-header-user {

}

    .ati-dashboard-header-user h5 {
        font-size: 2.25rem;
        font-weight: 300;
    }

.ati-dashboard-header-date {

}

    .ati-dashboard-header-date h6 {
        font-size: 1rem;
        font-weight: 300;
    }

.ati-dashboard-block {
    display:flex;
    flex-direction:column;   
    gap: 1rem;
}

    .ati-dashboard-block h5 {
        font-size: 1.5rem;
        font-weight: 300;
        margin: 0;
        letter-spacing: -0.06rem;
    }

.ati-dashboard-data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    gap: 1rem;
    overflow-y: auto;
}

.ati-dashboard-block-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

    .ati-dashboard-block-title i {
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        font-size:1.5rem;
    }

    .ati-dashboard-block-title h5 {
        font-size: 1.5rem;
        font-weight: 300;
        margin: 0;
        letter-spacing: -0.06rem;
    }


.ati-dashboard-block-data {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.ati-dashboard-data-counters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ati-dashboard-data-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    height: calc(100vh - 50px - 5rem);
}

.ati-dashboard-data-metric {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    padding: 1rem;
}


.ati-dashboard-data-card {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.ati-dashboard-data-card-data {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items:center;
    justify-content:space-between;
}

    .ati-dashboard-data-card-data div {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;       
    }

    .ati-dashboard-data-card-data i {
        font-size: 0.875rem
    }

    .ati-dashboard-data-card-data p {
        font-size: 0.775rem;
        margin: 0rem;
    }

.ati-dashboard-table {
    border-radius: 1rem;
    width: 100%;
    background-color: #f4f7f8;
    overflow-y: auto;
}

.ati-dashboard-table thead {  
   
    width: 100%;
    background-color: #f4f7f8;
    overflow-y: auto;
}

    .ati-dashboard-table tr:first-child {
       
    }

    .ati-dashboard-table td:first-child {
        margin: 0;
        font-size: .8rem;
        letter-spacing: normal;
        padding: 0.5rem 0.5rem 0.5rem 1rem;
    }

    .ati-dashboard-table  td {
        margin: 0;
        font-size: .8rem;
        letter-spacing: normal;
        padding: 0.5rem;
        vertical-align:middle;
    }

    .ati-dashboard-table td p{
        margin: 0;       
    }

@media (max-width: 1245px) {

    .ati-dashboard-table-responsive {
        display: none !important;
    }
}

@media (max-width: 1160px) {
    .ati-dashboard-data {
        flex-direction:column;
    }
}

@media (max-width: 768px) {

    .ati-dashboard-data-card-data div p {
        display:none;
    }

    .ati-dashboard-data-metric{
            width:100%;
            min-width:auto;
            gap:0.5rem;
    }

        .ati-dashboard-data-metric h6 {
            font-size: .8rem;
            margin:0;
        }   
}

@media (max-width: 580px)
{
    .breakpoint-sm {
        display:none;
    }

    .ati-dashboard-header-user h5 {
        font-size: 1.65rem;
        white-space: nowrap; /* Prevents text from wrapping */
        overflow: hidden; /* Hides overflow text */
        text-overflow: ellipsis; /* Adds "..." at the end */
        width: 174px;
    }

    .ati-dashboard-header-date h6 {
        font-size: 0.8rem;
    }

    .ati-dashboard-block-title {
        gap: 0.5rem;
    }

    .ati-dashboard-block-title i {
        font-size: 1rem;
    }

    .ati-dashboard-block-title h5 {
        font-size: 1rem;
    }

    .ati-dashboard-table {
        padding: 0rem 0rem 1rem 0rem;
    }
}


    .breakpoint-sm {
    }



