/*==================================================
  LATEST NOTIFICATIONS
==================================================*/

.gjp-latest-notifications{

    width:100%;

}

.gjp-ln-card{

    display:flex;

    flex-direction:column;

    height:100%;

    min-height:340px;

    background:#ffffff;

    border:1px solid #e8edf7;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(18,52,103,.06);

}

/*=========================================
Header
=========================================*/

.gjp-ln-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 22px 18px;

    border-bottom:1px solid #eef2f8;

}

.gjp-ln-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    color:#12245f;

    font-size:24px;

    font-weight:700;

    line-height:1;

}

.gjp-ln-icon{

    font-size:20px;

}

.gjp-ln-view-all{

    color:#0d5bd7;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.30s ease;

}

.gjp-ln-view-all:hover{

    color:#083baf;

}

/*=========================================
Notification List
=========================================*/

.gjp-ln-list{

    display:flex;

    flex-direction:column;

    flex:1;

}

/*=========================================
Notification Item
=========================================*/

.gjp-ln-item{

    display:grid;

    grid-template-columns:72px 1fr auto;

    align-items:center;

    gap:14px;

    padding:16px 22px;

    text-decoration:none;

    border-bottom:1px solid #eef2f8;

    transition:.30s ease;

}

.gjp-ln-item:last-child{

    border-bottom:none;

}

/*=========================================
Content
=========================================*/

.gjp-ln-content{

    min-width:0;

}

.gjp-ln-content h4{

    margin:0;

    color:#16213d;

    font-size:15px;

    font-weight:600;

    line-height:1.45;

}

.gjp-ln-date{

    white-space:nowrap;

    color:#7a859d;

    font-size:13px;

    font-weight:500;

}
/*=========================================
Notification Badges
=========================================*/

.gjp-ln-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:26px;

    border-radius:6px;

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    flex-shrink:0;

}

/* Badge Colors */

.gjp-ln-badge.tspsc{

    background:#e91e63;

}

.gjp-ln-badge.appsc{

    background:#009688;

}

.gjp-ln-badge.ssc{

    background:#6a1b9a;

}

.gjp-ln-badge.rrb{

    background:#1e40af;

}

.gjp-ln-badge.police{

    background:#f57c00;

}

/*=========================================
Hover Effects
=========================================*/

.gjp-ln-item{

    position:relative;

    background:#ffffff;

}

.gjp-ln-item:hover{

    background:#f8fbff;

    transform:translateX(4px);

}

.gjp-ln-item:hover .gjp-ln-content h4{

    color:#0d5bd7;

}

.gjp-ln-item:hover .gjp-ln-date{

    color:#0d5bd7;

}

/*=========================================
Typography Fine Tuning
=========================================*/

.gjp-ln-content h4{

    transition:.30s ease;

}

.gjp-ln-date{

    transition:.30s ease;

}

/*=========================================
View All Hover
=========================================*/

.gjp-ln-view-all{

    display:inline-flex;

    align-items:center;

    gap:5px;

}

.gjp-ln-view-all:hover{

    transform:translateX(3px);

}

/*=========================================
Card Hover
=========================================*/

.gjp-ln-card{

    transition:.35s ease;

}

.gjp-ln-card:hover{

    box-shadow:
        0 16px 40px rgba(18,52,103,.10);

}

/*=========================================
Scrollbar Safety
=========================================*/

.gjp-ln-list{

    overflow:hidden;

}

/*=========================================
Hero Height Match
=========================================*/

.gjp-home-hero-grid .gjp-latest-notifications{

    display:flex;

}

.gjp-home-hero-grid .gjp-ln-card{

    flex:1;

}
/*==================================================
  LATEST NOTIFICATIONS RESPONSIVE
==================================================*/

/* Large Desktop */
@media (max-width:1400px){

    .gjp-ln-header{

        padding:20px;

    }

    .gjp-ln-title{

        font-size:22px;

    }

    .gjp-ln-item{

        grid-template-columns:68px 1fr auto;

        padding:15px 20px;

    }

}


/* Laptop */
@media (max-width:1200px){

    .gjp-ln-header{

        padding:18px;

    }

    .gjp-ln-title{

        font-size:20px;

    }

    .gjp-ln-item{

        grid-template-columns:65px 1fr;

        row-gap:8px;

        padding:15px 18px;

    }

    .gjp-ln-date{

        grid-column:2;

        justify-self:start;

        font-size:12px;

    }

}


/* Tablet */
@media (max-width:992px){

    .gjp-ln-card{

        min-height:auto;

        margin-top:20px;

    }

    .gjp-ln-header{

        padding:18px 20px;

    }

    .gjp-ln-title{

        font-size:20px;

    }

    .gjp-ln-item{

        grid-template-columns:65px 1fr;

        align-items:flex-start;

        gap:12px;

        padding:16px 20px;

    }

    .gjp-ln-date{

        grid-column:2;

        margin-top:2px;

        font-size:12px;

    }

}


/* Mobile */
@media (max-width:768px){

    .gjp-ln-card{

        border-radius:14px;

    }

    .gjp-ln-header{

        padding:16px;

    }

    .gjp-ln-title{

        font-size:18px;

    }

    .gjp-ln-icon{

        font-size:18px;

    }

    .gjp-ln-view-all{

        font-size:13px;

    }

    .gjp-ln-item{

        grid-template-columns:58px 1fr;

        gap:10px;

        padding:14px 16px;

    }

    .gjp-ln-badge{

        width:54px;

        height:24px;

        font-size:10px;

    }

    .gjp-ln-content h4{

        font-size:14px;

        line-height:1.5;

    }

    .gjp-ln-date{

        grid-column:2;

        font-size:11px;

    }

}


/* Small Mobile */
@media (max-width:480px){

    .gjp-ln-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .gjp-ln-title{

        font-size:17px;

    }

    .gjp-ln-item{

        grid-template-columns:1fr;

        gap:10px;

    }

    .gjp-ln-badge{

        width:60px;

    }

    .gjp-ln-date{

        grid-column:auto;

    }

}