body {
    padding-top: 90px;
}

.dashboard-learner-wallet {
    --navy: #0c2a7a;
    --navy2: #071c5e;
    --blue: #1e63ef;
    --ink: #12205c;
    --muted: #5f6f9a;
    --line: #dbe5f6;
    --white: #fff;
    --green: #10a56f;
    --shadow: 0 10px 28px rgba(13, 41, 113, .08);

    margin: 0;
    padding: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--ink);
    background: transparent;
    font-size: 14px;
}

.dashboard-learner-wallet *,
.dashboard-learner-wallet *::before,
.dashboard-learner-wallet *::after {
    box-sizing: border-box;
}

.dashboard-learner-wallet a {
    text-decoration: none;
    color: inherit;
}

.dashboard-learner-wallet button,
.dashboard-learner-wallet input,
.dashboard-learner-wallet select,
.dashboard-learner-wallet textarea {
    font: inherit;
}

.dashboard-learner-wallet .icon {
    width: 22px;
    height: 22px;
    display: block;
}


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

.dashboard-learner-wallet .content {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 0 18px 28px;
}


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

.dashboard-learner-wallet .wallet-head {
    display: grid;

    /*
     * Keep text and artwork side-by-side.
     */
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);

    gap: 20px;

    align-items: center;

    width: 100%;

    margin: 0 0 12px;
    padding: 0;
}

.dashboard-learner-wallet .wallet-head > div:first-child {
    min-width: 0;
}

.dashboard-learner-wallet .wallet-head h1 {
    font-size: 42px;
    line-height: 1.15;

    margin: 0 0 6px;
    padding: 0;

    color: #12205c;
}

.dashboard-learner-wallet .wallet-head p {
    font-size: 16px;
    line-height: 1.5;

    max-width: 740px;

    margin: 0;
    padding: 0;

    color: #5d6e98;
}


/* =========================================================
   WALLET ART
   ========================================================= */

.dashboard-learner-wallet .wallet-art {
    width: 100%;
    height: 165px;

    min-width: 0;

    margin: 0;
    padding: 0;

    background-image: url('/assets/dashboard-assets/wallet-art.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* =========================================================
   GRID
   ========================================================= */

.dashboard-learner-wallet .grid {
    display: grid;

    width: 100%;

    gap: 14px;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .g2 {
    grid-template-columns: 1.9fr 1fr;
}

.dashboard-learner-wallet .g3 {
    grid-template-columns: repeat(3, 1fr);
}

.dashboard-learner-wallet .g4 {
    grid-template-columns: repeat(4, 1fr);
}


/* =========================================================
   CARDS
   ========================================================= */

.dashboard-learner-wallet .card {
    background: #fff;

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

    box-shadow: 0 7px 20px rgba(14, 41, 114, .045);

    margin: 0;
}

.dashboard-learner-wallet .panel {
    padding: 16px;
    margin: 0;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.dashboard-learner-wallet .section-title {
    display: flex;

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

    gap: 12px;

    margin: 0 0 10px;
    padding: 0;
}

.dashboard-learner-wallet .section-title .left {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .section-title h2 {
    font-size: 21px;
    line-height: 1.25;

    margin: 0;
    padding: 0;

    color: #112668;
}

.dashboard-learner-wallet .section-title p {
    font-size: 12px;
    line-height: 1.4;

    color: #6879a0;

    margin: 3px 0 0;
    padding: 0;
}


/* =========================================================
   ICONS
   ========================================================= */

.dashboard-learner-wallet .tile-icon {
    height: 44px;
    width: 44px;

    border-radius: 12px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .blue {
    background: #e9f1ff;
    color: #1f65ef;
}


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

.dashboard-learner-wallet .balance-card {
    background: linear-gradient(135deg, #0c2d8c, #2359ed);

    color: #fff;

    padding: 24px 26px;

    min-height: 205px;

    position: relative;
    overflow: hidden;

    margin: 0;
}

.dashboard-learner-wallet .balance-card .amount {
    font-size: 58px;
    font-weight: 850;
    line-height: 1.05;

    margin: 10px 0;
    padding: 0;
}

.dashboard-learner-wallet .balance-card .small {
    font-size: 16px;
    line-height: 1.4;

    margin: 0;
    padding: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.dashboard-learner-wallet .btn {
    height: 42px;

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

    background: #fff;
    color: #0e4bdc;

    padding: 0 22px;

    font-weight: 750;

    display: inline-flex;

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

    gap: 10px;

    cursor: pointer;

    margin: 0;
}

.dashboard-learner-wallet .btn.primary {
    background: linear-gradient(135deg, #0a2577, #071c61);

    border-color: #0a2577;

    color: #fff;
}

.dashboard-learner-wallet .btn.soft {
    border-color: #d6e1f5;

    background: #eff5ff;

    color: #174fc5;
}


/* =========================================================
   SELECT
   ========================================================= */

.dashboard-learner-wallet .select {
    width: 100%;
    height: 42px;

    border: 1px solid #dbe5f6;
    border-radius: 10px;

    padding: 0 14px;

    background: #fff;
    color: #25366d;

    font-weight: 600;

    margin: 0;
}


/* =========================================================
   PILLS
   ========================================================= */

.dashboard-learner-wallet .pill {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 12px;

    border-radius: 999px;

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

    margin: 0;
}

.dashboard-learner-wallet .paid {
    background: #e2f8ed;
    color: #0b8b60;
}

.dashboard-learner-wallet .refunded {
    background: #ffe7ef;
    color: #c12655;
}


/* =========================================================
   WALLET INFO
   ========================================================= */

.dashboard-learner-wallet .notification-list {
    display: grid;

    gap: 10px;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .verified {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;
    color: #40527f;

    margin: 0;
    padding: 0;
}


/* =========================================================
   LINKS
   ========================================================= */

.dashboard-learner-wallet .link {
    color: #0f54e8;

    font-weight: 750;

    font-size: 12px;
}


/* =========================================================
   META TEXT
   ========================================================= */

.dashboard-learner-wallet .meta {
    font-size: 12px;
    line-height: 1.4;

    color: #6878a0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   TABLE
   ========================================================= */

.dashboard-learner-wallet .table-wrap {
    width: 100%;

    overflow: auto;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .table {
    width: 100%;

    border-collapse: collapse;

    margin: 0;
    padding: 0;
}

.dashboard-learner-wallet .table th,
.dashboard-learner-wallet .table td {
    padding: 12px 13px;

    border-bottom: 1px solid #e3eaf6;

    text-align: left;

    font-size: 12px;
}

.dashboard-learner-wallet .table th {
    background: #f4f7fc;
    color: #314374;
}


/* =========================================================
   PREVENT PARENT DASHBOARD SPACING
   ========================================================= */

.dashboard-learner-wallet > * {
    margin-top: 0;
}

.dashboard-learner-wallet .content > * {
    margin-top: 0;
}

.dashboard-learner-wallet .wallet-head > * {
    margin-top: 0;
}


/* =========================================================
   LARGE DESKTOP / LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .dashboard-learner-wallet .wallet-head {
        /*
         * IMPORTANT:
         * Still side-by-side.
         */
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(220px, .7fr);

        gap: 16px;
    }

    .dashboard-learner-wallet .wallet-head h1 {
        font-size: 38px;
    }

    .dashboard-learner-wallet .wallet-head p {
        font-size: 15px;
    }

    .dashboard-learner-wallet .wallet-art {
        height: 145px;
    }

    .dashboard-learner-wallet .g2 {
        grid-template-columns: 1.5fr 1fr;
    }

    .dashboard-learner-wallet .g4 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .dashboard-learner-wallet .content {
        padding: 0 16px 20px;
    }

    /*
     * Keep the wallet heading and artwork
     * beside each other on tablet.
     */
    .dashboard-learner-wallet .wallet-head {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(180px, .75fr);

        gap: 14px;

        align-items: center;
    }

    .dashboard-learner-wallet .wallet-head h1 {
        font-size: 32px;
    }

    .dashboard-learner-wallet .wallet-head p {
        font-size: 15px;
    }

    .dashboard-learner-wallet .wallet-art {
        height: 120px;
    }

    .dashboard-learner-wallet .g2,
    .dashboard-learner-wallet .g3 {
        grid-template-columns: 1fr;
    }

    .dashboard-learner-wallet .g4 {
        grid-template-columns: 1fr;
    }

    .dashboard-learner-wallet .balance-card {
        padding: 22px;

        min-height: 190px;
    }

    .dashboard-learner-wallet .balance-card .amount {
        font-size: 42px;
    }
}


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

@media (max-width: 640px) {

    /*
     * Only on genuinely narrow mobile screens
     * do we stack the artwork below the text.
     */
    .dashboard-learner-wallet .wallet-head {
        grid-template-columns: 1fr;

        gap: 8px;

        text-align: left;
    }

    .dashboard-learner-wallet .wallet-head h1 {
        font-size: 30px;
    }

    .dashboard-learner-wallet .wallet-head p {
        font-size: 14px;

        max-width: 100%;
    }

    .dashboard-learner-wallet .wallet-art {
        height: 130px;

        width: 100%;

        background-position: center;
    }
}