/*=========================================================
                NOTIFICATION SECTION
=========================================================*/

.notification-section{
    padding:20px 0;
    background:#dfe8f3;
}

/*=========================================================
                CARD
=========================================================*/

.notification-card{
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/*=========================================================
                TABS
=========================================================*/

.notification-tabs{

    padding:0px 8px;
    background:#fff;
    border-bottom:1px solid #dcdcdc;
}

.notification-tabs .nav-link{
    border:none;

    border-radius:8px 8px 0 0;
    padding:8px 22px;
    font-size:14px;
    font-weight:600;
    color:#003F7D;
}

.notification-tabs .nav-link.active{
    background:#ACACAC;
    color:#00274F;
	font-weight:700;
}

.notification-tabs .nav-link:hover{
    color:#004b98;
	background:#E4E4E4;
}

/*=========================================================
            LIST AREA
=========================================================*/

.notification-list{

    height:300px;

    overflow-y:auto;

    overflow-x:hidden;

}

/*=========================================================
            SCROLLBAR
=========================================================*/

.notification-list::-webkit-scrollbar{

    width:6px;

}

.notification-list::-webkit-scrollbar-track{

    background:#f2f2f2;

}

.notification-list::-webkit-scrollbar-thumb{

    background:#6d6d6d;

    border-radius:20px;

}

/*=========================================================
            ITEM
=========================================================*/

.notice-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:12px 18px;

    border-bottom:1px solid #ededed;

    transition:.25s;

}

.notice-item:hover{

    background:#fafafa;

}

/*=========================================================
            CONTENT
=========================================================*/

.notice-content{

    flex:1;

    padding-right:20px;

}

.notice-content h6{

    margin:0;

    font-size:13px;

    font-weight:600;

    line-height:1.55;

    color:#000;

    text-transform:uppercase;

}

.notice-content p{

    margin-top:4px;

    margin-bottom:0;

    font-size:12px;

    color:#222;

}

.notice-content i{

    margin:0 3px;

}

/*=========================================================
            NEW BADGE
=========================================================*/

.notice-content .badge{

    font-size:9px;

    padding:3px 5px;

    margin-left:5px;

}

/*=========================================================
            VIEW BUTTON
=========================================================*/

.btn-view{

    min-width:90px;

    height:30px;

    border:1px solid #004b98;

    background:#fff;

    color:#004b98;

    font-size:14px;

    font-weight:600;

    border-radius:0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.25s;

}

.btn-view:hover{

    background:#004b98;

    color:#fff;

}

/*=========================================================
            FOOTER
=========================================================*/

.notification-footer{

    padding:10px 15px;

    border-top:1px solid #ececec;

    text-align:right;

}

.notification-footer .btn{

    background:#ffc107;

    border:none;

    color:#000;

    font-size:14px;

    font-weight:600;

    padding:5px 18px;

    border-radius:2px;

}

.notification-footer .btn:hover{

    background:#ffb300;

}

/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:991px){

.notice-item{

    flex-direction:column;

}

.btn-view{

    margin-top:10px;

}

}

@media(max-width:768px){

.notification-tabs{

    overflow-x:auto;

    flex-wrap:nowrap;

}

.notification-tabs .nav-link{

    white-space:nowrap;

    font-size:13px;

    padding:8px 14px;

}

.notice-content h6{

    font-size:12px;

}

.notice-content p{

    font-size:11px;

}

.notification-list{

    height:300px;

}

}






/*=========================================================
            ONLINE SERVICES
=========================================================*/

.online-service-card{

    background:#fff;
    border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    overflow:hidden;
}

/* Header */

.service-header{
    background:#004b98;
    color:#fff;
    padding:11px 18px;
}

.service-header h5{
    margin:0;
    font-size:18px;
    font-weight:600;
}

.service-header i{

    margin-right:8px;

}

/* List */

.service-list{
    height:350px;
    overflow-y:auto;

}

/* Scrollbar */

.service-list::-webkit-scrollbar{
    width:6px;
}

.service-list::-webkit-scrollbar-thumb{
    background:#999;
    border-radius:20px;
}

.service-list::-webkit-scrollbar-track{
    background:#f5f5f5;
}

/* Item */

.service-item{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 18px;
    color:#222;
    text-decoration:none;
    border-bottom:2px solid #ececec;
    transition:.25s;
}

.service-item:last-child{

    border-bottom:none;

}

.service-item:hover{
    background:#ffc107;
    color:#004b98;

}

/* Left */

.service-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.service-left i{

    width:30px;

    height:30px;

    border-radius:50%;

    background:#edf3fb;

    color:#004b98;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

}

.service-left span{

    font-size:14px;

    font-weight:500;

}

/* Arrow */

.service-arrow{

    font-size:14px;

    color:#999;

}

.service-item:hover .service-arrow{

    color:#004b98;

}

/* Footer */

.service-footer{

    padding:10px 15px;

    text-align:right;

    border-top:1px solid #ececec;

}