/* =========================================================
   0) TOKENS & GLOBALS
   ========================================================= */
:root {
    /* Brand */
    --jd-brand: #FF7043; /* primary */
    --jd-brand-soft: #fff3e0; /* light brand tint */
      --jd-brand-alertborder: var(--jd-brand);
    /* Layout */
    --jd-drawer-bg: #f6f6f6;
    /* Editor */
    --editor-radius: 8px;
    --jd-hover: #fff3e0;
    --jd-hover-border: rgba(0,0,0,0.12);
    --jd-tooltip-bg: #E0F7FA; /* light cyan (muted) */
    --jd-tooltip-text: #1f1f1f;
    --jd-tooltip-border: rgba(0,0,0,0.12);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Small helpers */
.mr-1 {
    margin-right: .25rem;
}

.text-strong {
    font-weight: 800 !important;
    letter-spacing: .2px;
}

.text-brand {
    color: var(--jd-brand) !important;
}

.text-brand-weak {
    color: color-mix(in srgb, var(--jd-brand) 70%, #0000) !important;
}

.text-brand-strong {
    color: color-mix(in srgb, var(--jd-brand) 100%, #000) !important;
}

.bg-muted {
    background: #f7f7f7;
}

/* =========================================================
   PRINT: PHONE SCREEN PACK
   ========================================================= */
@media print {
    /* Hide everything by default to keep print output focused. */
    body * {
        visibility: hidden !important;
    }

    /* Only show the phone screen pack content. */
    .phone-pack-print-area,
    .phone-pack-print-area * {
        visibility: visible !important;
    }

    /* Ensure the pack content prints full-width at the top-left. */
    .phone-pack-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0.5rem;
        box-sizing: border-box;
    }
}


/* =========================================================
   1) PAGE SHELL (layout containers)
   ========================================================= */
.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: auto;
}

.body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}


/* =========================================================
   2) TOP NAV / HEADER
   ========================================================= */
.top-nav {
    background: var(--jd-brand);
    color: #fff;
    padding: .5rem 1.5rem;
    position: relative;
}

    /* Center everything inside the top bar, including MudGrid rows/items */
    .top-nav .mud-grid {
        align-items: center !important;
    }



.logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 70px;
}

.top-banner-text {
    color: var(--jd-contrast);
    font-size: 1.35rem;
    margin-left: .75rem;
    font-weight: 700;
    align-self: center;
    line-height: 1.2;
}


/* Header links – identical weight/hover as footer links */
.jd-menu-link,
.jd-menu-link:visited,
.jd-menu-link:active {
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700 !important;
    padding: 5px;
    line-height: 1;
    border-radius: 6px;
}


    .jd-menu-link:hover,
    .jd-menu-link.active,
    .jd-menu-link:focus {
        background: #fff;
        color: var(--jd-brand) !important;
        transition: background-color .2s, color .2s;
    }



/* --- Shared numbers so it's easy to tune once --- */
:root {
    --nav-pill-h: 30px; /* set to 28–30px to match what you see on MudLink */
    --nav-pill-px: 10px;
    --nav-pill-radius: 8px;
}

/* NavLink in the header */
.jd-nav-link,
.jd-nav-link:visited,
.jd-nav-link:active {
    display: inline-flex; /* match MudLink */
    align-items: center; /* center text vertically */
    height: var(--nav-pill-h); /* give it the same height as the MudLink pill */
    padding: 0 var(--nav-pill-px); /* horizontal space only */
    border-radius: var(--nav-pill-radius);
    border: 1px solid transparent; /* avoid jump when active adds a border */
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700 !important;
    line-height: 1; /* let height control the box, not text line-height */
    vertical-align: middle;
    transition: background-color .2s, color .2s, border-color .2s;
}

    /* Hover + current route (active) look exactly like your MudLink pill */
    .jd-nav-link:hover,
    .jd-nav-link:focus,
    .jd-nav-link.active {
        background: #fff;
        color: var(--jd-brand) !important;
        border-color: var(--jd-brand);
    }


/* Country pill next to links */
.country-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    margin-right: 50px;
}

    .country-pill .mud-icon-root {
        width: 16px !important;
        height: 16px !important;
        font-size: 18px !important;
        opacity: .95;
    }


/* Account trigger (avatar button) */
.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 9999px;
    color: #fff !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    .account-trigger .mud-avatar-content {
        color: inherit !important;
    }

    .account-trigger:hover {
        background: var(--jd-brand-soft) !important;
        border-color: var(--jd-brand);
        color: var(--jd-brand) !important;
    }

/* Account popover placement (below avatar) */
.account-popover {
    margin-top: 60px;
    margin-right: 0;
}

/* Large avatar used inside the card */
.account-avatar-lg {
    width: 56px;
    height: 56px;
    font-weight: 800;
}

/* Header drawer toggle (keeps the light gutter feel) */
.drawer-toggle {
    margin: 4px;
    background: var(--jd-drawer-bg);
    border-radius: 8px;
}


/* =========================
   Account menu (popover + card)
   ===========https://localhost:7015/users============== */

/* Popover offset under the avatar */
.account-popover {
    margin-top: 60px;
    margin-right: 0;
}

/* The card container */
.account-card {
    min-width: 300px;
    max-width: 360px;
    border-radius: 12px;
    box-shadow: none;
    border: 0;
    background: #fff; /* keep the content area crisp */
}

/* Brand mark in header */
.account-logo {
    height: 42px;
    object-fit: contain;
    display: block;
}

/* Large avatar in the identity row */
.account-avatar-lg {
    width: 56px;
    height: 56px;
    font-weight: 800;
}



/* =========================================================
   3) LEFT DRAWER / NAV MENU
   ========================================================= */
.jd-drawer-container {
    background: var(--jd-drawer-bg);
}

/* Paint the drawer and remove shadows */
.jd-drawer, .jd-drawer .mud-drawer-paper {
    background: var(--jd-drawer-bg) !important;
    box-shadow: none !important;
    padding: 6px 0 0 6px;
    display: flex;
    flex-direction: column;
}

    /* Make the MudDrawer’s inner content a full-height flex column */
    .jd-drawer .mud-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

/* Push the bottom block to the bottom of the drawer */
.jd-nav-bottom {
    margin-top: auto;
    padding: .5rem; /* optional: match your drawer padding */
}

/* (Optional) ensure drawer itself stretches in its container */
.jd-drawer {
    height: 100%;
}

/* clamp long titles to 2 lines */
.jd-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Title grows, can wrap; keeps badge on the right */
.jd-job-link {
    flex: 1 1 auto;
    min-width: 0;
}



/* =========================================================
   4) FOOTER
   ========================================================= */
.jd-footer {
    background: var(--jd-brand);
    color: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
}

.jd-footer__container {
    padding: 12px clamp(24px, 6vw, 64px);
}

.jd-footer__copy {
    font-size: .875rem;
    font-weight: 700 !important;
    line-height: 1.1;
    color: #fff;
}

/* Footer links (and hover) */
.jd-footer a,
.jd-footer__link,
.jd-footer__link:visited,
.jd-footer__link:active {
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700;
    padding: 5px;
}

    .jd-footer__link:hover, .jd-footer__link:focus {
        background: #fff;
        color: var(--jd-brand) !important;
        border-radius: 6px;
        transition: background-color .2s, color .2s;
    }


/* =========================================================
   5) BUTTONS (shared)
   ========================================================= */
.jd-btn, .jd-btn.mud-button-root {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    line-height: 1 !important;
    background-color: var(--jd-brand);
    color: #fff;
    border-radius: 6px;
    border: 1px solid #f58025;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    transition: background-color .2s, color .2s;
    text-transform: none !important;
}

.jd-btn-inline {
    width: auto !important;
    display: inline-flex !important;
    align-self: flex-start;
}

    .jd-btn .mud-icon-root {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .jd-btn.jd-btn-save {
        background: var(--jd-brand);
        color: #fff;
        white-space: nowrap;
    }

        .jd-btn.jd-btn-save:hover {
            background: var(--jd-hover);
            color: var(--jd-brand);
            box-shadow: 0 2px 6px rgba(255,112,67,.35);
        }

    .jd-btn.jd-btn-discard {
        background: transparent;
        color: var(--jd-brand);
        border: 1px solid var(--jd-brand);
    }

        .jd-btn.jd-btn-discard:hover {
            background: var(--jd-hover);
            color: var(--jd-brand);
        }

    .jd-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
        background: #f5f5f5 !important;
        color: #999 !important;
        border-color: #ddd !important;
    }


.refresh-btn {
    color: #FF7043;
    transition: background-color 0.2s, color 0.2s;
}

    .refresh-btn:hover {
        background-color: #fff3e0; /* soft orange background */
        color: #FF7043;
        border-radius: 4px;
    }
/* base style for the icon button */
button.refresh-btn.mud-button-root.mud-icon-button {
    color: #FF7043;
    border-radius: 6px !important; /* override Mud's 50% circle */
    transition: background-color .15s ease, color .15s ease;
}

    /* hover / focus */
    button.refresh-btn.mud-button-root.mud-icon-button:hover,
    button.refresh-btn.mud-button-root.mud-icon-button:focus-visible {
        background-color: #fff3e0 !important; /* the light orange you want */
        color: #FF7043;
    }



/* Big CTA used in pricing cards */
.start-trial-btn,
.mud-button-root.start-trial-btn {
    background: var(--jd-brand);
    color: #fff;
    height: 44px;
    width: 100%;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    border-radius: 6px;
    border: none;
    box-shadow: none;
    transition: background-color .2s, box-shadow .2s, color .2s;
    text-transform: none !important;
}

    .start-trial-btn:hover, .mud-button-root.start-trial-btn:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }

/* Small toggle pair in pricing */
.term-switch-btn.mud-button-root {
    text-transform: none !important;
    border-radius: 6px;
    border-color: var(--jd-brand);
    color: var(--jd-brand);
    box-shadow: none;
    transition: background-color .2s, box-shadow .2s, color .2s, border-color .2s;
}

    .term-switch-btn.mud-button-root:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        border-color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }

.term-switch-btn--active.mud-button-root {
    background: var(--jd-brand);
    color: #fff;
    border: none;
}

    .term-switch-btn--active.mud-button-root:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }


/* =========================================================
   6) TABLES / LISTS / HOVER
   ========================================================= */
.custom-hover-table.mud-table-row:hover,
.custom-hover-table.selected {
    background: var(--jd-brand-soft) !important;
}

.jobs-table .mud-table-cell {
    vertical-align: middle;
}

.jd-field-strong .mud-input-label {
    color: var(--mud-palette-text-primary);
}

.no-hover-list .mud-list-item:hover,
.no-hover-list .mud-list-item:focus,
.no-hover-list .mud-selected-item {
    background-color: transparent !important;
    box-shadow: none !important;
}

.no-hover-list .mud-list-item {
    cursor: default;
}


/* =========================================================
   7) BRAND HELPERS & LINKS
   ========================================================= */
.brand-primary {
    --mud-palette-primary: var(--jd-brand);
}

.brand-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.brand-link {
    color: inherit !important;
    text-decoration: none !important;
}

    .brand-link:hover {
        text-decoration: underline !important;
        color: var(--jd-brand) !important;
    }

.brand-link-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

    .brand-link-strong:hover {
        text-decoration: underline !important;
    }


a.brand-link-strong,
a.brand-link-strong:link,
a.brand-link-strong:visited,
.jd-nudge__text a.brand-link-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

    a.brand-link-strong:hover,
    a.brand-link-strong:focus {
        color: var(--jd-brand) !important;
        text-decoration: underline !important;
    }

.plan-accent {
    color: var(--jd-brand);
    font-weight: 600;
}

.help-breadcrumbs a,
.help-breadcrumbs .mud-link-root {
    color: inherit;
    text-decoration: none;
}

    .help-breadcrumbs a:hover,
    .help-breadcrumbs .mud-link-root:hover {
        text-decoration: underline;
        color: var(--jd-brand);
    }

/* Horizontal divider */
.mud-divider.brand {
    height: 1px; /* a touch thicker */
    background-color: var(--jd-brand) !important;
    border: 0 !important; /* ensure color comes from background */
    opacity: 1 !important; /* cancel Mud’s “light” look */
}

/* (optional) vertical divider support */
.mud-divider-vertical.brand {
    width: 2px;
    background-color: var(--jd-brand) !important;
    opacity: 1 !important;
}


/* optional: align icon+link nicely */
.menu-line {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}




/* Make MudTable's built-in loader use brand color on all states */
.mud-table .mud-progress-linear {
    height: 1px;
    background: transparent;
}

    /* Bars inside the loader */
    .mud-table .mud-progress-linear .mud-progress-linear-bar,
    .mud-table .mud-progress-linear .mud-progress-linear-bar1,
    .mud-table .mud-progress-linear .mud-progress-linear-bar2 {
        background-color: var(--jd-brand) !important; /* e.g. #FF7043 */
    }

    /* Also catch Mud's color modifier classes used before .mud-table-loading toggles */
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar,
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar1,
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar2 {
        background-color: var(--jd-brand) !important;
    }



/* =========================================================
   8) EDITOR (Quill) & PREVIEW
   ========================================================= */
.blazored-text-editor,
.blazored-text-editor .ql-toolbar,
.blazored-text-editor .ql-container,
.blazored-text-editor .ql-tooltip,
.blazored-text-editor .ql-picker-options {
    position: relative;
    z-index: 0 !important;
}

    .blazored-text-editor .ql-toolbar.ql-snow,
    .blazored-text-editor .ql-container.ql-snow {
        border: 0 !important;
        box-shadow: none !important;
    }

.jd-editor.ql-toolbar {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-bottom: 0;
    border-top-left-radius: var(--editor-radius);
    border-top-right-radius: var(--editor-radius);
    overflow-x: auto;
    overflow-y: hidden;
}

.jd-editor.ql-container {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-top: 0;
    border-bottom-left-radius: var(--editor-radius);
    border-bottom-right-radius: var(--editor-radius);
    overflow: hidden;
}

    .jd-editor.ql-container .ql-editor {
        min-height: 420px;
        outline: none;
        padding-bottom: 0 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

        .jd-editor.ql-container .ql-editor > *:last-child {
            margin-bottom: 0 !important;
        }

.jd-preview {
    isolation: isolate;
    contain: layout paint style;
    overflow: auto;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--mud-palette-surface);
}

    .jd-preview * {
        pointer-events: none !important;
    }

    .jd-preview [style*="position:fixed"], .jd-preview [style*="position:absolute"] {
        position: static !important;
    }

    .jd-preview img {
        max-width: 100%;
        height: auto;
    }

    .jd-preview,
    .jd-preview * {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

.jd-bottom-spacer {
    height: 10px;
}

.jd-page {
    box-shadow: none !important;
}


/* =========================================================
   9) SNACKBARS (on-brand, readable)
   ========================================================= */
.mud-snackbar.mud-snackbar-success {
    background: #eaf6ee !important;
    color: #1e4620 !important;
    border: 1px solid #cfe9dc !important;
}

    .mud-snackbar.mud-snackbar-success .mud-snackbar-icon {
        color: #2e7d32 !important;
    }

.mud-snackbar.mud-snackbar-info {
    background: #e8f4fd !important;
    color: #0b3d5c !important;
    border: 1px solid #cfe8ff !important;
}

    .mud-snackbar.mud-snackbar-info .mud-snackbar-icon {
        color: #1976d2 !important;
    }

.mud-snackbar.mud-snackbar-warning {
    background: #fff4e5 !important;
    color: #7a3e00 !important;
    border: 1px solid #ffe0b2 !important;
}

    .mud-snackbar.mud-snackbar-warning .mud-snackbar-icon {
        color: #ed6c02 !important;
    }

.mud-snackbar.mud-snackbar-error {
    background: #fdecea !important;
    color: #5f2120 !important;
    border: 1px solid #f5c6cb !important;
}

    .mud-snackbar.mud-snackbar-error .mud-snackbar-icon {
        color: #d32f2f !important;
    }

.mud-snackbar.mud-snackbar-normal {
    background: #f5f5f7 !important;
    color: #222 !important;
    border: 1px solid #e5e5ea !important;
}

    .mud-snackbar.mud-snackbar-normal .mud-snackbar-icon {
        color: #6b6b6b !important;
    }


/* =========================================================
   10) PRICING CARDS / PLANS
   ========================================================= */
.plan-grid .mud-grid-item {
    display: flex;
    color: var(--jd-brand);
}

.plan-item {
    width: 300px;
}

.mud-card.plan-card, .plan-card.mud-paper {
    border-radius: 14px !important;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.plan-features {
    margin-top: 1rem;
}

.plan-header {
    text-align: center;
    margin-bottom: 8px;
}

.plan-cta {
    text-align: center;
    margin: 6px 0 4px;
}

.plan-title {
    color: var(--jd-brand) !important;
}

.plan-title-row {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
}

.plan-title-row .plan-title {
        white-space: nowrap;
    }

.pricing-subtitle {
    opacity: 0.85;
    line-height: 1.2;
    margin-top: -2px;
    font-weight: 600
}

.pricing-card-copy {
    min-height: 188px;
}

.pricing-price-meta {
    min-height: 22px;
}

.term-chip {
    background: var(--jd-brand) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0 .5rem;
    height: 22px;
    line-height: 22px;
    border-radius: 9999px;
    text-transform: capitalize;
}
/* Misc plan layout */
.plan-summary {
    width: 30px;
    min-width: 320px;
    border-right: 1px solid #ddd;
    padding-right: 3rem;
}

.plan-details {
    border-top: 1px solid #eee;
    padding-top: 1rem;
    font-size: 1.2rem;
}

    .plan-details .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: .5rem;
    }

    .plan-details .total {
        font-weight: 700;
        margin-top: 1rem;
    }

.plan-header {
    min-height: 120px;
}

.plan-card .mud-card-header.pb-0 {
    padding-bottom: 0 !important;
}

.plan-card .mud-card-content.pt-0 {
    padding-top: 0 !important;
}

.plan-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.price-line {
    display: inline-flex;
    gap: .25rem;
    align-items: baseline;
}

    .price-line .price-currency {
        font-weight: 600;
        margin-right: 2px;
    }



.amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .amount-row.total {
        font-weight: 600;
    }

.plan-features-panel {
    border: 1px solid #eee;
    background: #fafafa;
    border-radius: 8px;
    padding: .75rem .9rem;
}

.plan-features-list {
    margin: 0;
    padding-left: 1.1rem;
}

    .plan-features-list li {
        margin-bottom: .25rem;
        line-height: 1.35;
    }


/* subtle emphasis for compact numbers (no chip) */
.usage-num {
    font-weight: 800; /* heavier bold */
    font-size: 1rem; /* slightly larger than body text */
    color: var(--jd-brand); /* give it your brand orange */
    margin-left: .35rem; /* bit more spacing from label */
    line-height: 1; /* keep tight alignment */
}

/* =========================================================
   11) BILLING / SUBSCRIPTIONS
   ========================================================= */
.billing-card {
    max-width: 760px;
}

.billing-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-label {
    width: 160px;
    min-width: 160px;
    color: var(--mud-palette-text-secondary);
}

.billing-field {
    max-width: 420px;
}

    .billing-field .mud-input-root {
        height: 36px;
    }

.subscription-card {
    background: transparent;
    box-shadow: none;
    width: 50%;
}

.subscription-table .mud-table {
    table-layout: auto;
}

.subscription-table .mud-table-container {
    overflow-x: visible;
}

.subscription-table .mud-table-cell:first-child {
    width: 50%;
}

.subscription-table .mud-table-cell:nth-child(2) {
    width: 30%;
}

.subscription-table .mud-table-cell:last-child {
    width: 20%;
}

.form-section {
    width: 300px;
    min-width: 300px;
    padding-left: 0rem;
}

/* One-off payment page desktop layout:
   keep right columns stable, let left description column shrink first. */
@media (min-width: 960px) {
    .oneoff-payment-grid {
        /* Keep all three columns on the same row.
           If viewport is narrower than total width, page can scroll horizontally. */
        flex-wrap: nowrap !important;
        align-items: flex-start;
    }

    .oneoff-payment-grid .oneoff-main-col {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 420px;
    }

    .oneoff-payment-grid .oneoff-setup-col {
        flex: 0 0 320px !important;
        max-width: 320px !important;
    }

    .oneoff-payment-grid .oneoff-summary-col {
        flex: 0 0 360px !important;
        max-width: 360px !important;
    }
}

/* One-off payment readability:
   helper captions in setup/summary should not look muted. */
.oneoff-payment-grid .oneoff-setup-col .text-secondary,
.oneoff-payment-grid .oneoff-summary-col .text-secondary,
.oneoff-payment-grid .oneoff-summary-col .text-muted {
    color: var(--mud-palette-text-primary) !important;
    opacity: 0.92;
}

/* =========================================================
   12) CHIPS / STATUS
   ========================================================= */
.status-chip {
    border-radius: 9999px;
    font-weight: 600;
    padding: 0 10px;
    line-height: 22px;
}

    .status-chip.chip--active {
        background: #E8F5E9 !important;
        color: #1B5E20 !important;
        border: 1px solid #C8E6C9 !important;
    }

    .status-chip.chip--inactive {
        background: #F5F5F5 !important;
        color: #616161 !important;
        border: 1px solid #E0E0E0 !important;
    }

.mud-chip.chip--active {
    background: #E8F5E9;
    border-color: #C8E6C9;
    color: #1B5E20;
}

.mud-chip.chip--trial {
    background: #E3F2FD;
    border-color: #BBDEFB;
    color: #0D47A1;
}

.mud-chip.chip--warning {
    background: #FFF8E1;
    border-color: #FFE0B2;
    color: #E65100;
}

.mud-chip.chip--error {
    background: #FFEBEE;
    border-color: #FFCDD2;
    color: #B71C1C;
}

.mud-chip.chip--default {
    background: #F5F5F5;
    border-color: #E0E0E0;
    color: #424242;
}

.chip {
    font-size: .75rem;
    height: 22px;
    line-height: 22px;
    padding: 0 8px;
}

/* =========================================================
   13) HELP PAGES
   ========================================================= */
.help-static-list .mud-list-item {
    cursor: default !important;
}

    .help-static-list .mud-list-item:hover {
        background-color: transparent !important;
    }

    .help-static-list .mud-list-item button,
    .help-static-list .mud-list-item a {
        pointer-events: none !important;
    }
/* width knobs */
.help-page {
    --narrow-width: 640px;
    --key-col-width: 240px;
}

    .help-page .content-narrow {
        width: 100%;
        max-width: var(--narrow-width);
        margin: 0 auto;
    }

    .help-page .details-table {
        width: 100%;
    }

    .help-page .key-col {
        width: var(--key-col-width);
    }

.help-page .key-cell {
    white-space: nowrap;
    font-weight: 600;
}

.help-doc-page {
    align-items: flex-start;
}

.help-doc-toc,
.help-doc-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.help-doc-toc__list .mud-list-item {
    align-items: flex-start;
}

.help-doc-toc__list .mud-link {
    display: inline-block;
    line-height: 1.45;
}

/* Help docs rendered from markdown */
.help-doc-content h1,
.help-doc-content h2,
.help-doc-content h3 {
    margin-top: 20px;
    margin-bottom: 8px;
}

.help-doc-content p {
    margin: 6px 0 10px;
}

.help-doc-content ul,
.help-doc-content ol {
    padding-left: 20px;
    margin: 6px 0 12px;
}

.help-doc-content code {
    background: #fff5ee;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.95em;
}

.help-doc-content pre {
    background: #fff5ee;
    padding: 12px;
    border-radius: 8px;
    overflow: auto;
}

/* Help tabs: keep original casing */
.help-tabs .mud-tab {
    text-transform: none !important;
}

.help-tabs .mud-tabs-tabbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.help-tabs .mud-tabs-toolbar {
    flex-wrap: nowrap !important;
    min-width: max-content;
}

.help-tabs .mud-tab {
    white-space: nowrap;
}

.help-mobile-tabs {
    margin-bottom: 1rem;
}

.help-mobile-tab {
    text-transform: none !important;
    border-radius: 999px !important;
}

/* Support assistant drawer */
.assistant-fab-container {
    position: fixed;
    right: 24px;
    left: auto;
    bottom: 96px;
    z-index: 1200;
}

.assistant-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    background: #ff7a41;
    color: #fff;
}

.assistant-panel {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 82vh;
    background: #fff;
    z-index: 1300;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

.assistant-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: move;
    user-select: none;
}

.assistant-logo {
    height: 28px;
    width: auto;
    display: block;
}

.assistant-panel-body {
    padding: 16px;
    overflow-y: auto;
}

/* Allow multi-line input to wrap long questions inside the assistant card. */
.assistant-input textarea {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.assistant-messages {
    max-height: 46vh;
    overflow-y: auto;
    padding: 12px;
    background: #fff;
}

.assistant-message {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
}

.assistant-user {
    background: #fff7f2;
    border-color: #ffd8c2;
}

.assistant-bot {
    background: #f7f9ff;
    border-color: #dbe3ff;
}

.assistant-role {
    color: #ff7a41;
    margin-bottom: 4px;
}

.assistant-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width:640px) {
    .help-page {
        --narrow-width: 100%;
        --key-col-width: 42%;
    }

    .help-tabs {
        margin-top: .75rem !important;
    }

    .help-mobile-tabs {
        gap: .5rem !important;
    }

    .help-mobile-tab {
        flex: 0 1 auto;
        min-width: 0;
        padding-left: .9rem;
        padding-right: .9rem;
        font-size: .9rem;
    }

    .help-doc-toc,
    .help-doc-content {
        padding: 1rem !important;
    }

    .help-doc-toc__title {
        font-size: 1.25rem !important;
        margin-bottom: .75rem !important;
    }

    .help-doc-toc__list .mud-list-item {
        padding-top: .15rem;
        padding-bottom: .15rem;
    }

    .help-doc-content h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .help-doc-content h2 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .help-doc-content h3 {
        font-size: 1.2rem;
        line-height: 1.25;
    }
}


/* =========================================================
   14) MISC UI BITS (icons, pills, actions, sections)
   ========================================================= */
.edit-icon {
    font-size: 18px;
    color: var(--jd-brand);
    cursor: pointer;
    transition: transform .1s;
}

    .edit-icon:hover {
        transform: scale(1.2);
    }

/* brand-colored underline on hover for job titles */
.mud-link.jd-job-link:hover {
    text-decoration-color: var(--jd-brand) !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}


.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--jd-brand);
    font-weight: 600;
    line-height: 1;
    user-select: none;
    cursor: default;
}

    .pill .mud-icon-root {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        height: 1em;
        width: 1em;
    }

    .pill .pill-icon {
        transform: translateY(-.5px);
    }

.jd-hint__icon {
    color: #fff;
    background: var(--jd-brand);
    border-radius: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.jd-action {
    width: 220px;
    justify-content: center;
}

.home-hero-cta {
    margin-bottom: 0.5rem;
}

.home-hero-cta-copy {
    text-align: right;
}

.home-hero-start-free {
    border-color: #2fbf71 !important;
    box-shadow: 0 0 0 3px rgba(47,191,113,.18), 0 2px 4px rgba(0,0,0,.1) !important;
}

.home-hero-start-free:hover {
    box-shadow: 0 0 0 4px rgba(47,191,113,.22), 0 2px 6px rgba(255,112,67,.35) !important;
}

@media (max-width:600px) {
    .jd-action {
        width: 100%;
    }

    .home-hero-cta-copy {
        width: 100%;
        text-align: center;
    }
}

/* Brand lockup (© JD Align™) */
.jd-brand-mark {
    color: var(--jd-brand) !important;
    font-weight: 700;
}

    .jd-brand-mark sup {
        position: relative;
        top: -.45em;
        font-size: .6em;
        margin-left: .15em;
    }

/* About page */
.about-hero {
    background: linear-gradient(180deg, #fff7f2 0%, #fff 80%);
    border-radius: 12px;
}

    .about-hero .text-muted {
        color: #7a7a7a;
    }

.about-hero-card {
    border-radius: 14px;
}

.section-alt {
    background: #fafafa;
    border-radius: 12px;
}

.brand-icon {
    color: var(--jd-brand);
    margin-right: .4rem;
    vertical-align: -2px;
}

.brand-icon-sm {
    color: var(--jd-brand);
    margin-right: .4rem;
    vertical-align: -2px;
}

/* Numbered step chip */
.step-chip {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: .5rem;
}

/* File upload overlay */
.file-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
}

/* Candidate inline pairs */
.candidate-inline .pair {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    margin-right: 1.25rem;
    margin-bottom: .25rem;
}

.candidate-inline .label {
    font-weight: 600;
}

/* Upgrade cards */
.upgrade-grid__item {
    display: flex;
}

.upgrade-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.upgrade-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.upgrade-card__spacer {
    flex: 1 1 auto;
}



/* Make MudAlert use brand color (not blue),
   keep text black, and style the icon + border */
.jd-nudge {
    /* kill Mud's info-blue background/tint */
    background-color: #fff !important;
    /* full border for a clean box look */
    border: 1px solid var(--jd-brand) !important;
    border-left-width: 3px !important; /* subtle accent */
    color: #000 !important; /* body text black */
}

    .jd-nudge.mud-alert-outlined {
        /* ensure outlined variant doesn't bring its own tint */
        background-color: transparent !important;
    }

    /* Icon in brand */
    .jd-nudge .mud-alert-icon,
    .jd-nudge__icon {
        color: var(--jd-brand) !important;
    }

    /* Text stays black (Mud can inject severity color) */
    .jd-nudge .mud-alert-message,
    .jd-nudge__text {
        color: #000 !important;
    }

    /* Links: inherit (black), brand on hover — matches your .brand-link */
    .jd-nudge a {
        color: inherit !important;
        text-decoration: none !important;
    }

        .jd-nudge a:hover {
            color: var(--jd-brand) !important;
            text-decoration: underline !important;
        }
    .jd-nudge .mud-alert-icon,
    .jd-nudge__icon {
        color: var(--jd-brand) !important;
    }

    .jd-nudge .mud-alert-message,
    .jd-nudge__text {
        color: #000 !important;
    }





/* Promo line sits at bottom-right of the orange banner */
.signup-freebar {
    position: absolute;
    right: 16px; /* tuck under the right-side menu */
    bottom: 6px; /* close to the bottom of the banner */
    pointer-events: none; /* never blocks clicks on nav items */
}

/* Light green text, slightly emphasized */
.signup-freebar__text {
    color: white; /* light green; tweak if you prefer */
    font-weight: 600;
    line-height: 1.1;
}

@media (max-width: 900px) {
    .top-nav {
        padding: .75rem 1rem 1rem;
    }

    .top-nav .mud-grid {
        row-gap: .75rem;
    }

    .top-brand-stack {
        row-gap: .5rem;
    }

    .logo-img {
        height: 56px;
    }

    .top-banner-text {
        font-size: 1rem;
        margin-left: .5rem;
    }

    .top-public-nav {
        row-gap: .5rem;
    }

    .jd-footer__container {
        padding: 12px 16px;
    }

    .jd-footer__links {
        row-gap: .5rem;
    }
}

/* Hide on small screens to avoid overlap */
@media (max-width: 768px) {
    .body {
        overflow: visible;
    }

    .auth-shell {
        overflow: visible !important;
    }

    .jd-drawer-container {
        position: relative;
    }

    .drawer-toggle-wrap {
        position: absolute;
        left: 6px;
        top: 8px;
        z-index: 20;
    }

    .drawer-toggle {
        background: rgba(246, 246, 246, 0.96) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
    }

    .content {
        padding: 1rem;
        overflow-y: visible;
    }

    .top-banner-text {
        font-size: .95rem;
        line-height: 1.25;
        margin-left: 0;
        max-width: 100%;
    }

    .top-public-nav {
        justify-content: center !important;
    }

    .jd-nav-link {
        font-size: .8rem;
    }

    .jd-footer__copy {
        width: 100%;
        text-align: center;
    }

    .jd-footer__links {
        width: 100%;
        justify-content: center !important;
    }

    .jobs-toolbar-row {
        align-items: stretch !important;
        gap: .75rem !important;
    }

    .jobs-toolbar-row .mud-input-control,
    .jobs-toolbar-row .mud-select,
    .jobs-toolbar-row .mud-button-root {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .jobs-page-filters {
        margin-bottom: 1rem !important;
    }

    .jobs-addon-note {
        text-align: left !important;
    }

    .jobs-title-cell {
        gap: .5rem !important;
    }

    .jobs-metadata-chips {
        margin-left: 0 !important;
    }

    .candidate-table-toolbar {
        gap: .5rem !important;
    }

    .candidate-table-search {
        width: 100%;
    }

    .subscribe-page-grid {
        row-gap: 1rem;
    }

    .subscribe-plan-col,
    .subscribe-form-col {
        display: block;
    }

    .plan-summary,
    .subscribe-form-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .plan-summary {
        border-right: 0;
        padding-right: 0;
    }

    .form-section {
        width: 100%;
        min-width: 0;
    }

    .plan-title-row {
        flex-wrap: wrap;
        align-items: center;
    }

    .plan-title-row .plan-title {
        white-space: normal;
    }

    .price-line {
        flex-wrap: wrap;
    }

    .subscribe-promo-actions {
        justify-content: stretch !important;
        gap: .75rem !important;
    }

    .subscribe-promo-actions .mud-button-root {
        flex: 1 1 140px;
    }

    .pipeline-summary,
    .pipeline-public-link {
        align-items: flex-start !important;
    }

    .job-listing-page {
        padding: 1rem !important;
    }

    .job-listing-header,
    .job-listing-titlebar,
    .job-listing-public-link,
    .job-listing-public-link__content,
    .job-listing-preview-header,
    .job-listing-editor-actions,
    .job-listing-editor-toolbar {
        gap: .75rem !important;
    }

    .job-listing-header,
    .job-listing-public-link,
    .job-listing-preview-header {
        align-items: flex-start !important;
    }

    .job-listing-public-link,
    .job-listing-public-link__content {
        width: 100%;
    }

    .job-listing-public-link__content .mud-typography,
    .job-listing-public-link__content .mud-link,
    .job-listing-public-link__content .mud-icon-button-root {
        max-width: 100%;
    }

    .job-listing-helper ul {
        padding-left: 1.25rem;
    }

    .job-listing-editor-actions .mud-button-root {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .job-listing-editor-toolbar {
        align-items: center !important;
    }

    .job-listing-editor-toolbar .ql-formats {
        margin-right: 0 !important;
    }

    .home-hero-title {
        font-size: clamp(2rem, 9vw, 2.6rem);
        line-height: 1.1;
    }

    .home-hero-pills {
        gap: .5rem !important;
    }

    .home-hero-cta {
        gap: .75rem !important;
    }

    .home-hero-cta-copy {
        width: 100%;
        text-align: center;
    }

    .signup-freebar {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-nav {
        padding: .75rem .75rem 1rem;
    }

    .logo-img {
        height: 48px;
    }

    .top-banner-text {
        font-size: .85rem;
    }

    .content {
        padding: .75rem;
    }

    .jd-nav-link {
        font-size: .76rem;
        padding: 0 8px;
    }

    .jobs-table .mud-table-cell,
    .custom-hover-table .mud-table-cell {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .job-listing-page {
        padding: .75rem !important;
    }

    .plan-summary .mud-card-content,
    .subscribe-form-card .mud-card-content {
        padding: 1rem !important;
    }

    .plan-summary .account-logo {
        height: 34px;
        width: auto;
        max-width: 160px;
    }

    .plan-title-row {
        gap: .4rem;
    }

    .term-chip {
        align-self: flex-start;
    }

    .price-line {
        gap: .15rem;
    }

    .price-line .fs-2 {
        font-size: 2rem !important;
        line-height: 1.1;
    }

    .amount-row {
        gap: .75rem;
    }

    .agreement-box {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .subscribe-promo-actions .mud-button-root,
    .start-trial-btn {
        width: 100%;
    }

    .job-listing-titlebar .mud-typography-h6 {
        font-size: 1.2rem;
        line-height: 1.35;
    }

    .job-listing-editor-toolbar {
        gap: .35rem !important;
    }

    .job-listing-editor-toolbar .mud-icon-button-root {
        width: 32px;
        height: 32px;
    }

    .home-hero-title {
        font-size: clamp(1.8rem, 10vw, 2.2rem);
    }
}


/* Thank-you note styling */
.brand-note {
    border-color: var(--jd-brand-alertborder) !important;
}

    .brand-note .mud-alert-icon {
        color: var(--jd-brand) !important;
    }

    .brand-note .mud-alert-message {
        color: #000; /* keep body text black for clarity */
    }
    .brand-note .mud-alert-icon {
        color: var(--jd-brand) !important;
    }

/* brand color for the leading phrase */
.brand-accent {
    color: var(--jd-brand) !important;
}
.brand-border{
    color: lightskyblue
}

.reprocess-box {
    align-self: flex-end;
}

.stage-chip.mud-chip:hover {
    background-color: var(--jd-hover) !important;
    color: var(--jd-brand) !important;
    border-color: var(--jd-brand) !important;
}

.stage-chip--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.stage-select .mud-input-slot {
    min-width: 180px;
}

.stage-select .mud-select-input {
    white-space: normal;
}

.stage-select-item .mud-list-item-text,
.stage-select .mud-list-item-text {
    white-space: normal;
    max-width: none;
}

.env-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 1.0rem; /* ⬅ bigger */
    font-weight: 600;
    letter-spacing: 0.04em;

    background-color: rgba(255, 255, 255, 0.2);
    color: greenyellow;
    line-height: 1.2;
    white-space: nowrap;
}

.version-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}






/* =========================
   Toggle group container
   ========================= */
.jd-toggle-btn-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================
   Toggle buttons (base)
   ========================= */
.jd-toggle-btn.mud-toggle-item.mud-button-root {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    /* kill Mud’s default button height/padding */
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid var(--jd-brand) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    background-color: transparent !important;
    color: var(--jd-brand) !important;
    white-space: nowrap;
}

    /* Inner label: same vertical padding as jd-btn, a bit more on right */
    .jd-toggle-btn.mud-toggle-item.mud-button-root .mud-button-label {
        padding: 6px 18px !important;
        line-height: 1 !important;
        text-transform: none !important;
    }

    /* =========================
   Selected state
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root.mud-toggle-item-selected {
        background-color: var(--jd-brand) !important;
        color: #fff !important;
        border-color: var(--jd-brand) !important;
    }

    /* =========================
   Hover state
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root:hover {
        background-color: var(--jd-brand-soft) !important;
        color: var(--jd-brand) !important;
        border-color: var(--jd-brand) !important;
    }

    /* keep hover on selected the same as your jd-btn-save:hover */
    .jd-toggle-btn.mud-toggle-item.mud-button-root.mud-toggle-item-selected:hover {
        background-color: var(--jd-brand-soft) !important;
        color: var(--jd-brand) !important;
    }

    /* =========================
   Focus ring (no blue outline)
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(255,112,67,.35) !important;
    }
/* Extra spacing on the right of the text */
.jd-toggle-btn .mud-toggle-item-content {
    padding-right: 10px !important; /* adjust 8–12px to taste */
}

/* Make the tick icon match your normal button icon size */
.jd-toggle-btn .mud-icon-root.mud-toggle-item-check-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important; /* small gap between tick and text */
}

/* Billing page specific refinement:
   Keep FY toggle buttons on one row with stable auto width,
   while giving a bit more right-side text space to avoid clipping. */
.billing-year-toggle-group {
    display: inline-flex !important;
    width: auto !important;
}

.billing-year-toggle.mud-toggle-item.mud-button-root {
    width: auto !important;
    flex: 0 0 auto !important;
}

.billing-year-toggle.mud-toggle-item.mud-button-root .mud-button-label {
    padding-right: 22px !important;
}


/* Brand-soft tooltips (scoped via MudTooltip Class=) */
.mud-tooltip {
    background-color: var(--jd-tooltip-bg) !important;
    color: var(--jd-tooltip-text) !important;
    border: 1px solid var(--jd-tooltip-border) !important;
}

.mud-tooltip-arrow::before,
.mud-tooltip-arrow:before {
    background-color: var(--jd-tooltip-bg) !important;
}
.collapsible-section .mud-expansion-panel,
.collapsible-section .mud-expansion-panel-content,
.collapsible-section .mud-expansion-panel-header {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.collapsible-section .mud-expand-panel-text {
    padding-left: 0 !important;
}

.collapsible-section .mud-expansion-panel-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.promo-code {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f46f43;
}

.plan-promo {
    margin-bottom: 0.75rem;
    text-align: left;
    width: 100%;
}

.plan-promo .mud-alert-icon {
    margin-top: 0.1rem;
}

/* Candidate Pipeline applications trend: improve axis readability and width usage. */
.applications-trend-chart {
    width: 100% !important;
}

.applications-trend-chart svg {
    width: 100% !important;
}

.applications-trend-chart svg text {
    font-size: 10px !important;
    fill: #9e9e9e !important;
}