.reports-tab__wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;

    padding: 20px;
}

.reports-tab__item{
    cursor: pointer;
    position: relative;
    z-index: 3;

    /* max-width: 500px;
    width: 100%; */
    height: 160px;
    
    border-radius: 10px;

    overflow: hidden;
}

.reports-tab__item:hover.reports-tab__item::after{
    opacity: .5;
}

.reports-tab__item::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 10px;
    background-color: var(--text-primary);

    opacity: 0.8;

    transition: opacity .3s ease-in-out;
}

.reports-tab__item-bg{
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: -1;

    object-fit: cover;
    object-position: top;
}

.reports-tab__item-wrapper{
    height: 100%;
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 20px 16px 20px;
}

.reports-tab__item-icon{ 
    width: 36px;
    height: 36px;
}

.reports-tab__item-title{
    color: var(--white);
    font-size: 15px;
    font-weight: 600;

    margin-bottom: 4px;
}

.reports-tab__item-value{
    font-size: 13px;
    font-weight: 400;
    color: var(--white);

    opacity: .5;
}

.reports-tab__route{
    display: flex;
    align-items: center;
    gap: 4px;

    border-bottom: .5px solid var(--border-primary);
    padding: 9px 26px;
}

.reports-tab__route span{
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
}

.reports-tab__route-prev{
    cursor: pointer;
    opacity: .7;

    transition: color .3s ease-in-out;
}

.reports-tab__route-prev:hover{
    color: var(--icon-primary);
}

.reports-tab__route-current{
    font-weight: 500;
}

.reports-tab__route-icon{
    flex-shrink: 0;
}

.reports-tab__container{
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 20px;
}

.reports-tab__content{
    flex: 0 0 65%;
}

.reports-tab__content.full{
    flex: 0 0 100%;
}

.reports-tab__custom-table{
    margin-top: 14px;
}

.reports-tab__location-column{
    grid-template-columns: 1fr 2fr;
}

.reports-tab__location-column.active{
    border-left: 3px solid var(--temp-accent);
}

.reports-tab__alerts-column{
    grid-template-columns: 1fr 1.2fr .6fr 1fr 1.5fr ;
}
.reports-tab__movements-column{
    grid-template-columns: 1fr 1fr .7fr 1fr 1fr;
}

.reports-tab__violation-column{
    grid-template-columns: 1fr 1.4fr 1fr 1.4fr .8fr .5fr 1fr;
}

@media (max-width:1360px){
    .reports-tab__container{
        flex-direction: column;
    }

    .reports-tab__content{
        flex:0 0 100%
    }
}

@media (max-width:600px){
    .reports-tab__wrapper{
        grid-template-columns: auto;
    }
}

