
    .notifications-page{
        width:100%;
        min-height:calc(100vh - 70px);
        background:#f5f8fc;
        padding:22px;
        box-sizing:border-box;
    }

    .notifications-wrap{
        width:100%;
        max-width:760px;
        margin:0 auto;
    }


    /* =========================
       HEADER
    ========================= */

    .notifications-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-bottom:16px;
    }

    .notifications-title{
        min-width:0;
    }

    .notifications-title h1{
        margin:0;
        color:#203750;
        font-size:20px;
        line-height:1.3;
        font-weight:900;
    }

    .notifications-title p{
        margin:5px 0 0;
        color:#8a98a9;
        font-size:10px;
        line-height:1.4;
        font-weight:600;
    }


    /* =========================
       MARK ALL BUTTON
    ========================= */

    .mark-all-btn{
        flex:none;

        min-height:36px;

        padding:0 13px;

        border:1px solid #dfe6ee;
        border-radius:9px;

        background:#fff;
        color:#53667d;

        font-size:9px;
        font-weight:800;

        cursor:pointer;

        white-space:nowrap;

        transition:
            background .2s ease,
            color .2s ease,
            border-color .2s ease;
    }

    .mark-all-btn:hover{
        background:#f1f6ff;
        color:#1769e0;
        border-color:#cfe0fa;
    }


    /* =========================
       NOTIFICATION LIST
    ========================= */

    .notification-list{
        display:flex;
        flex-direction:column;
        gap:9px;
        width:100%;
    }


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

    .notification-card{
        width:100%;

        display:flex;
        align-items:flex-start;

        gap:11px;

        padding:14px;

        background:#fff;

        border:1px solid #e2e9f1;
        border-radius:13px;

        text-decoration:none;

        box-shadow:0 2px 8px rgba(31,41,55,.025);

        box-sizing:border-box;
    }

    .notification-card.unread{
        border-color:#cfe0fa;
        background:#fafdff;
    }


    /* =========================
       NOTIFICATION DOT
    ========================= */

    .notification-dot{
        width:9px;
        height:9px;

        margin-top:5px;

        border-radius:50%;

        background:#1769e0;

        flex:none;
    }

    .notification-card.read .notification-dot{
        background:#d6dee8;
    }


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

    .notification-content{
        min-width:0;
        flex:1;
    }


    /* =========================
       TITLE ROW
    ========================= */

    .notification-title-row{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:10px;

        min-width:0;
    }


    /* =========================
       NOTIFICATION TITLE
    ========================= */

    .notification-title{
        min-width:0;

        color:#263d58;

        font-size:12px;
        line-height:1.45;

        font-weight:900;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /* =========================
       NOTIFICATION LEVEL
    ========================= */

    .notification-level{
        flex:none;

        padding:4px 7px;

        border-radius:20px;

        font-size:7px;
        line-height:1;

        font-weight:900;

        text-transform:uppercase;

        white-space:nowrap;
    }

    .level-success{
        background:#eaf8f0;
        color:#198754;
    }

    .level-warning{
        background:#fff7e8;
        color:#b36b00;
    }

    .level-error{
        background:#fff0f1;
        color:#be123c;
    }

    .level-info{
        background:#eaf2ff;
        color:#1769e0;
    }


    /* =========================
       NOTIFICATION MESSAGE
    ========================= */

    .notification-message{
        margin-top:5px;

        color:#687b90;

        font-size:10px;
        line-height:1.55;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /* =========================
       NOTIFICATION META
    ========================= */

    .notification-meta{
        margin-top:7px;

        color:#9aa7b6;

        font-size:8px;
        line-height:1.4;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /* =========================
       ACTION
    ========================= */

    .notification-action{
        flex:none;
    }

    .notification-action button{
        min-width:52px;
        min-height:32px;

        padding:0 10px;

        border:0;
        border-radius:8px;

        background:#edf5ff;
        color:#1769e0;

        font-size:8px;
        font-weight:800;

        cursor:pointer;

        white-space:nowrap;

        transition:
            background .2s ease,
            color .2s ease,
            border-color .2s ease;
    }

    .notification-action button:hover{
        background:#dfeeff;
        color:#0d5dcc;
    }

    .notification-card.read .notification-action button{
        border:1px solid #e1e8f1;

        background:#fff;
        color:#66798f;
    }

    .notification-card.read .notification-action button:hover{
        background:#f5f8fc;
        color:#1769e0;
    }


    /* =========================
       EMPTY NOTIFICATIONS
    ========================= */

    .empty-notifications{
        padding:45px 20px;

        text-align:center;

        background:#fff;

        border:1px solid #e2e9f1;
        border-radius:14px;

        color:#8998a9;

        font-size:10px;
        line-height:1.5;

        box-sizing:border-box;
    }

    .empty-notifications strong{
        display:block;

        margin-bottom:6px;

        color:#40566e;

        font-size:14px;
        line-height:1.3;
    }


    /* =========================
       PAGINATION
    ========================= */

    .pagination{
        width:100%;

        margin-top:18px;

        box-sizing:border-box;
    }

    .pagination nav{
        width:100%;
    }

    .pagination nav > div{
        width:100%;
        box-sizing:border-box;
    }


    /* Showing text */

    .pagination nav p{
        margin:0;

        color:#53667d;

        font-size:9px;
        line-height:1.5;
    }

    .pagination nav p span{
        font-size:9px;
    }


    /* Pagination buttons */

    .pagination nav a,
    .pagination nav span[aria-current="page"],
    .pagination nav span[aria-disabled="true"]{
        min-width:32px;
        height:32px;

        padding:0 9px;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        box-sizing:border-box;

        border:1px solid #e1e8f0;
        border-radius:7px;

        background:#fff;
        color:#53667d;

        font-size:9px;
        font-weight:700;

        line-height:1;

        text-decoration:none;

        white-space:nowrap;
    }


    /* Pagination hover */

    .pagination nav a:hover{
        background:#f1f6ff;
        border-color:#cfe0fa;
        color:#1769e0;
    }


    /* Active page */

    .pagination nav span[aria-current="page"]{
        background:#1769e0;
        border-color:#1769e0;

        color:#fff;

        font-weight:800;
    }


    /* Disabled */

    .pagination nav span[aria-disabled="true"]{
        background:#f7f9fb;
        border-color:#e5ebf2;

        color:#b5c0cc;

        cursor:not-allowed;
    }


    /* Pagination icons */

    .pagination nav svg{
        width:14px;
        height:14px;
    }


    /* =========================
       DESKTOP PAGINATION
    ========================= */

    @media(min-width:640px){

        /*
         * Laravel desktop pagination
         * Keep Showing text on left
         * and page buttons on right.
         */

        .pagination nav > div.hidden.sm\:flex-1{
            display:flex !important;

            align-items:center;
            justify-content:space-between;

            width:100%;

            gap:20px;
        }

        .pagination nav > div.hidden.sm\:flex-1 > div{
            display:flex;

            align-items:center;
        }

        .pagination nav > div.hidden.sm\:flex-1 > div:last-child{
            justify-content:flex-end;
        }

        .pagination nav > div.hidden.sm\:flex-1 p{
            white-space:nowrap;
        }

        .pagination nav > div.hidden.sm\:flex-1 a,
        .pagination nav > div.hidden.sm\:flex-1 span{
            margin-left:2px;
            margin-right:2px;
        }


        /* Hide mobile Previous / Next */

        .pagination nav > div.flex.justify-between{
            display:none !important;
        }
    }


    /* =========================
       MOBILE
    ========================= */

    @media(max-width:639px){

        .notifications-page{
            min-height:calc(100vh - 62px);

            padding:14px 10px 78px;
        }

        .notifications-wrap{
            max-width:100%;
        }


        /* Header */

        .notifications-head{
            margin-bottom:13px;
            gap:9px;
        }

        .notifications-title h1{
            font-size:19px;
        }

        .notifications-title p{
            margin-top:4px;
            font-size:9px;
        }


        /* Mark all */

        .mark-all-btn{
            min-height:34px;

            padding:0 11px;

            font-size:8px;

            border-radius:8px;
        }


        /* List */

        .notification-list{
            gap:8px;
        }


        /* Card */

        .notification-card{
            padding:12px;

            border-radius:11px;

            gap:9px;
        }


        /* Title */

        .notification-title-row{
            display:block;
        }

        .notification-title{
            font-size:12px;
            line-height:1.45;
        }


        /* Level */

        .notification-level{
            display:inline-flex;

            margin-top:6px;

            padding:4px 7px;

            font-size:7px;
        }


        /* Message */

        .notification-message{
            margin-top:5px;

            font-size:10px;
            line-height:1.5;
        }


        /* Meta */

        .notification-meta{
            margin-top:7px;

            font-size:8px;
        }


        /* Action */

        .notification-action{
            margin-top:2px;
        }

        .notification-action button{
            min-width:52px;
            min-height:32px;

            padding:0 9px;

            font-size:8px;

            border-radius:8px;
        }


        /* =========================
           MOBILE PAGINATION
        ========================= */

        .pagination{
            margin-top:15px;

            overflow-x:auto;
            overflow-y:hidden;

            scrollbar-width:none;
        }

        .pagination::-webkit-scrollbar{
            display:none;
        }


        /*
         * Hide desktop pagination
         * on mobile.
         */

        .pagination nav > div.hidden.sm\:flex-1{
            display:none !important;
        }


        /*
         * Show only mobile
         * Previous / Next.
         */

        .pagination nav > div.flex.justify-between{
            display:flex !important;

            align-items:center;
            justify-content:space-between;

            width:100%;

            gap:10px;
        }


        .pagination nav > div.flex.justify-between a,
        .pagination nav > div.flex.justify-between span{
            min-width:80px;
            height:34px;

            padding:0 12px;

            display:inline-flex;
            align-items:center;
            justify-content:center;

            box-sizing:border-box;

            border:1px solid #e1e8f0;
            border-radius:8px;

            background:#fff;
            color:#53667d;

            font-size:8px;
            font-weight:700;

            white-space:nowrap;
        }

        .pagination nav > div.flex.justify-between a:hover{
            background:#f1f6ff;
            color:#1769e0;
        }

        .pagination nav > div.flex.justify-between svg{
            width:13px;
            height:13px;
        }
    }


    /* =========================
       SMALL PHONES
    ========================= */

    @media(max-width:380px){

        .notifications-page{
            padding-left:8px;
            padding-right:8px;
        }


        /* Header */

        .notifications-head{
            align-items:flex-start;
        }

        .notifications-title h1{
            font-size:18px;
        }

        .notifications-title p{
            font-size:8px;
        }


        /* Mark all */

        .mark-all-btn{
            max-width:100px;

            min-height:34px;

            white-space:normal;

            line-height:1.2;

            padding:5px 8px;

            font-size:8px;
        }


        /* Notification card */

        .notification-card{
            display:grid;

            grid-template-columns:8px minmax(0,1fr);

            gap:9px;

            padding:11px;
        }


        /* Text */

        .notification-title{
            font-size:12px;
            line-height:1.45;
        }

        .notification-message{
            font-size:10px;
            line-height:1.5;
        }

        .notification-meta{
            font-size:8px;
        }


        /* Action */

        .notification-action{
            grid-column:2;

            justify-self:start;

            margin-top:2px;
        }

        .notification-action button{
            min-width:52px;
            min-height:32px;

            font-size:8px;
        }


        /* Dot */

        .notification-dot{
            width:8px;
            height:8px;
        }


        /* Small phone pagination */

        .pagination{
            margin-top:14px;
        }

        .pagination nav > div.flex.justify-between{
            gap:8px;
        }

        .pagination nav > div.flex.justify-between a,
        .pagination nav > div.flex.justify-between span{
            min-width:75px;
            height:32px;

            padding:0 10px;

            font-size:8px;
        }

        .pagination nav > div.flex.justify-between svg{
            width:12px;
            height:12px;
        }
    }
