/* ========================================
   VIEW LETTERS PAGE - MOBILE OPTIMIZATION
   Mobile responsive styling for /hhc/Household/ViewLetter page only
   Following industry best practices for mobile UI/UX
   ======================================== */

/* Mobile: Stack filter controls vertically */
@media (max-width: 767px) {
    .card .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    /* Filter section - make it full width */
    .card .d-flex.align-items-center {
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    /* Filter buttons container */
    .card .d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px !important;
    }
    
    /* Make filter buttons full width on mobile */
    .filter-btn {
        flex: 1 1 auto;
        min-width: 100px;
        font-size: 13px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    
    /* Record count label */
    #recordCountLabel {
        font-size: 14px;
        width: 100%;
        margin-bottom: 5px;
    }
}

/* Mobile: Vertical stacked tabs for View Letters page */
@media (max-width: 767px) {
    /* Make tabs stack vertically */
    #myTab.nav-tabs {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        border-bottom: none !important;
        border: none !important;
        gap: 0;
    }
    
    #myTab.nav-tabs .nav-item {
        width: 100%;
        border-bottom: 1px solid #dee2e6;
    }
    
    #myTab.nav-tabs .nav-link {
        white-space: normal;
        font-size: 14px !important;
        padding: 12px 15px !important;
        font-weight: 500 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #333 !important;
        text-align: left;
        border-left: 3px solid transparent !important;
    }
    
    /* Active tab - blue left border */
    #myTab.nav-tabs .nav-link.active {
        background: #f8f9fa !important;
        color: #0d6efd !important;
        font-weight: 600 !important;
        border-left: 3px solid #0d6efd !important;
        border-top: none !important;
    }
    
    /* Hover state */
    #myTab.nav-tabs .nav-link:hover:not(.active) {
        background: #f8f9fa !important;
        color: #0d6efd !important;
    }
    
    /* Badge styling - perfect circle */
    #myTab.nav-tabs .nav-link .badge {
        font-size: 10px !important;
        padding: 0 !important;
        min-width: 20px !important;
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 8px;
        vertical-align: middle;
    }
}

/* Mobile: Card-style table layout (Industry best practice) */
@media (max-width: 767px) {
    /* Hide table header on mobile */
    .table thead {
        display: none;
    }
    
    /* VIEW LETTERS PAGE ONLY: Remove green border from TABLE */
    #myTab ~ .tab-content .table,
    #myTab ~ .tab-content .table.table-striped,
    #myTab ~ .tab-content .table.table-hover {
        border: none !important;
        border-left: none !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Remove green from tbody */
    #myTab ~ .tab-content .table tbody {
        border: none !important;
        border-left: none !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Kill any green bar below the table */
    #myTab ~ .tab-content .table::after,
    #myTab ~ .tab-content .table tbody::after {
        display: none !important;
        content: none !important;
    }
    
    /* Make each row a card with flexbox layout */
    .table tbody tr,
    .table-striped tbody tr,
    .table-hover tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 5px 15px;
        margin-bottom: 15px;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px;
        padding: 15px;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        position: relative;
        overflow: hidden !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Remove green borders */
    #myTab ~ .tab-content .table tbody tr,
    #myTab ~ .tab-content .table-striped tbody tr,
    #myTab ~ .tab-content .table-hover tbody tr {
        border: 1px solid #dee2e6 !important;
        border-left: 1px solid #dee2e6 !important;
        outline: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Gray borders on containers */
    #lettersContainer_all,
    #lettersContainer_ms,
    #lettersContainer_aps,
    #lettersContainer_all *,
    #lettersContainer_ms *,
    #lettersContainer_aps * {
        --bs-border-color: #dee2e6 !important;
    }
    
    /* Remove ALL child element borders and backgrounds - but preserve text and links */
    .table tbody tr *:not(a):not(.badge),
    .table-striped tbody tr *:not(a):not(.badge),
    .table-hover tbody tr *:not(a):not(.badge) {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
    
    /* Specifically target and remove any green/colored bottom borders */
    .table tbody tr,
    .table tbody tr::after,
    .table tbody tr > *::after {
        border-bottom: 1px solid #dee2e6 !important;
        background: none !important;
    }
    
    /* Remove Bootstrap success/info/primary border colors */
    .table tbody tr.border-success,
    .table tbody tr.border-primary,
    .table tbody tr.border-info,
    .table tbody tr[class*="border-"] {
        border-bottom-color: #dee2e6 !important;
    }
    
    /* Override any inline styles that add green borders */
    .table tbody tr[style*="border"],
    .table tbody tr td[style*="border"] {
        border-bottom: 1px solid #dee2e6 !important;
        border-color: #dee2e6 !important;
    }
    
    /* Hide any progress bars or indicators */
    .table tbody tr .progress,
    .table tbody tr .progress-bar,
    .table tbody tr [class*="bg-success"],
    .table tbody tr [class*="bg-primary"] {
        display: none !important;
    }
    
    /* Force ALL borders in the card to be gray */
    .table tbody tr,
    .table tbody tr * {
        border-color: #dee2e6 !important;
    }
    
    /* Nuclear option: Remove ANY element with green/success colors */
    .table tbody tr [style*="green"],
    .table tbody tr [style*="#28a745"],
    .table tbody tr [style*="#00"],
    .table tbody tr [class*="success"],
    .table tbody tr [class*="green"] {
        background: transparent !important;
        border-color: #dee2e6 !important;
        box-shadow: none !important;
    }
    
    /* Remove box-shadow with green tint */
    .table tbody tr {
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }
    
    /* Target the card container itself */
    .card .table tbody tr,
    .tab-content .table tbody tr,
    #lettersContainer_all .table tbody tr,
    #lettersContainer_ms .table tbody tr,
    #lettersContainer_aps .table tbody tr {
        border-bottom: 1px solid #dee2e6 !important;
        margin-bottom: 15px;
    }
    
    /* Remove any green indicator bars from parent containers */
    .card, .tab-content, [id*="lettersContainer"] {
        border-bottom: none !important;
    }
    
    /* Remove striping background on mobile - force pure white */
    .table tbody tr:nth-of-type(odd),
    .table tbody tr:nth-of-type(even),
    .table-striped tbody tr:nth-of-type(odd),
    .table-striped tbody tr:nth-of-type(even) {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: none !important;
    }
    
    /* Remove the #EFF6FF light blue background specifically */
    .table tbody tr:nth-of-type(odd) > td,
    .table tbody tr:nth-of-type(odd) > th,
    .table-striped tbody tr:nth-of-type(odd) > td,
    .table-striped tbody tr:nth-of-type(odd) > th {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Remove any additional borders or backgrounds - but allow tr::after for our fix */
    .table tbody tr::before,
    .table tbody td::after,
    .table tbody td::before {
        display: none !important;
        content: none !important;
        background: none !important;
        border: none !important;
    }
    
    /* Remove any success/colored indicators */
    .table tbody tr.table-success,
    .table tbody tr[class*="success"],
    .table tbody tr[class*="primary"],
    .table tbody tr[class*="info"] {
        background: #ffffff !important;
        border-color: #dee2e6 !important;
    }
    
    /* Content cells - take full width to stack vertically */
    .table tbody td {
        display: block;
        padding: 4px 0 !important;
        border: none !important;
        background: transparent !important;
        flex: 1 1 calc(100% - 40px);
        min-width: calc(100% - 40px);
    }
    
    /* Last cell - no bottom padding */
    .table tbody td:last-child {
        padding-bottom: 0 !important;
    }
    
    /* Override any table-striped specific styling */
    .table-striped tbody tr {
        background: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .table-striped tbody tr:nth-of-type(odd) > *,
    .table-striped tbody tr:nth-of-type(even) > * {
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
    }
    
    /* Remove table-hover effects on mobile */
    .table-hover tbody tr:hover,
    .table-hover tbody tr:hover > * {
        background: #ffffff !important;
    }
    
    /* Remove any green or colored borders/backgrounds */
    .table tbody tr,
    .table tbody tr > *,
    .table-striped tbody tr,
    .table-striped tbody tr > *,
    .table-hover tbody tr,
    .table-hover tbody tr > * {
        border-bottom: none !important;
    }
    
    /* Ensure card-like appearance */
    .table tbody tr {
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
    }
    
    /* Add labels before each cell using data attributes */
    .table tbody td:nth-child(2)::before {
        content: "Scheme:";
        font-weight: 700;
        margin-right: 10px;
        color: #495057;
        min-width: 70px;
        flex-shrink: 0;
    }
    
    .table tbody td:nth-child(3)::before {
        content: "Letter:";
        font-weight: 700;
        margin-right: 10px;
        color: #495057;
        min-width: 70px;
        flex-shrink: 0;
    }
    
    .table tbody td:nth-child(4)::before {
        content: "Date:";
        font-weight: 700;
        margin-right: 10px;
        color: #495057;
        min-width: 70px;
        flex-shrink: 0;
    }
    
    /* Content wrapper for alignment */
    .table tbody td:nth-child(2),
    .table tbody td:nth-child(4) {
        align-items: center;
    }
    
    /* Checkbox column - fixed width, doesn't wrap */
    .table tbody td:nth-child(1) {
        flex: 0 0 24px !important;
        min-width: 24px !important;
        width: 24px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: stretch;
    }
    
    .table tbody td:nth-child(1) input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin: 0;
        cursor: pointer;
    }
    
    /* Letter name and badge - wrap properly */
    .table tbody td:nth-child(3) {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        flex-wrap: wrap;
    }
    
    .table tbody td:nth-child(3) a {
        word-break: break-word;
        max-width: calc(100% - 80px);
        line-height: 1.5;
        flex: 1;
    }
    
    .table tbody td:nth-child(3) .badge {
        margin-left: 8px;
        flex-shrink: 0;
    }
}

/* Mobile: Bottom action bar improvements */
@media (max-width: 767px) {
    .card > .d-flex.justify-content-between.align-items-center:last-child {
        flex-direction: column !important;
        gap: 15px;
        padding-top: 15px;
        border-top: 1px solid #dee2e6;
        margin-top: 15px;
    }
    
    #selectedCountLabel {
        width: 100%;
        text-align: center;
        font-size: 14px;
    }
    
    #Download {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 600;
    }
}

/* Mobile: Pagination improvements */
/* Mobile: Pagination improvements */
@media (max-width: 767px) {
    /* Center the pagination nav container */
    nav[aria-label="Letter pagination"] {
        display: flex !important;
        justify-content: center !important;
        width: 100%;
    }
    
    .pagination {
        display: flex !important;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center !important;
        width: auto;
        margin: 0 auto;
    }
    
    .pagination .page-item {
        margin: 2px;
    }
    
    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 14px;
        min-width: 44px;
        text-align: center;
    }
    
    /* Show fewer page numbers on mobile */
    .pagination .page-item:not(:first-child):not(:last-child):not(.active) {
        display: none;
    }
    
    /* Always show first, last, previous, next, and active */
    .pagination .page-item:first-child,
    .pagination .page-item:last-child,
    .pagination .page-item:nth-child(2),
    .pagination .page-item:nth-last-child(2),
    .pagination .page-item.active,
    .pagination .page-item.active + .page-item,
    .page-item.active + .page-item + .page-item {
        display: block;
    }
}

/* Tablet: Improved layout (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .filter-btn {
        min-width: 120px;
    }
    
    /* Show table on tablet but make it more compact */
    .table thead {
        display: table-header-group;
    }
    
    .table tbody tr {
        display: table-row;
        margin: 0;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    
    .table tbody td {
        display: table-cell;
        padding: 12px 8px !important;
    }
    
    .table tbody td::before {
        content: none;
    }
    
    .table tbody tr {
        padding-right: 0 !important;
    }
    
    .table tbody td:nth-child(1) {
        position: static;
        width: auto;
    }
    
    .table tbody td:nth-child(1) input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    
    /* Make table scrollable on tablet */
    .table-responsive {
        overflow-x: auto;
    }
}

/* Extra small phones (< 360px) */
@media (max-width: 359px) {
    .nav-tabs .nav-link {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    .filter-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    h5 {
        font-size: 18px !important;
    }
}

/* Card shadow on mobile - subtle depth (View Letters page only) */
@media (max-width: 767px) {
    /* Only target cards that contain the letters tab */
    .card:has(#myTab) {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        border: 1px solid #e9ecef;
        background: #ffffff !important;
        background-color: #ffffff !important;
        padding: 15px !important;
        overflow: hidden !important;
    }
}

/* ===========================================
   REMOVE GREEN COLORS ON MOBILE
   (Scoped to View Letters page only using #myTab)
   =========================================== */
@media (max-width: 767px) {
    /* Override green footer - change from rgb(0,112,74) to dark gray */
    .foot-inner-box {
        background-color: #343a40 !important;
        background: #343a40 !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Remove green from table area */
    #myTab ~ .tab-content .table,
    #myTab ~ .tab-content .table-striped,
    #myTab ~ .tab-content .table-hover {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: none !important;
        margin-bottom: 0 !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Remove ANY green from tab-content area */
    #myTab ~ .tab-content,
    #myTab ~ .tab-content .tab-pane,
    #lettersContainer_all,
    #lettersContainer_ms,
    #lettersContainer_aps {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: none !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Override inline styles from ViewLetter.cshtml */
    #myTab ~ .tab-content .table.table-striped tbody tr:nth-of-type(odd) > td,
    #myTab ~ .tab-content .table.table-striped tbody tr:nth-of-type(odd) > th,
    #myTab ~ .tab-content .table.table-striped tbody tr:nth-of-type(even) > td,
    #myTab ~ .tab-content .table.table-striped tbody tr:nth-of-type(even) > th {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Override table-hover Bootstrap class */
    #myTab ~ .tab-content .table.table-hover tbody tr:hover,
    #myTab ~ .tab-content .table.table-hover tbody tr:hover > td {
        background: #ffffff !important;
        background-color: #ffffff !important;
        --bs-table-hover-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Override Bootstrap table CSS variables */
    #myTab ~ .tab-content .table {
        --bs-table-bg: #ffffff !important;
        --bs-table-striped-bg: transparent !important;
        --bs-table-hover-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Letter table rows - white background, gray borders */
    #myTab ~ .tab-content .table tbody tr,
    #lettersTableContainer ~ .table tbody tr {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-color: #dee2e6 !important;
    }
    
    /* VIEW LETTERS PAGE ONLY: Table cells - transparent background */
    #myTab ~ .tab-content .table tbody tr td {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
    }
}

/* Improve touch feedback for interactive elements */
@media (max-width: 767px) {
    .filter-btn:active,
    .nav-link:active,
    .btn:active,
    .page-link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Better checkbox styling for touch */
    input[type="checkbox"].letter-checkbox {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
    
    input[type="checkbox"].checkAll {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
}

/* No records found message */
@media (max-width: 767px) {
    .table tbody tr td[colspan] {
        display: table-cell !important;
        text-align: center;
        padding: 40px 20px !important;
        border: none !important;
    }
    
    .table tbody tr:has(td[colspan]) {
        display: table-row;
        border: none;
        padding: 0;
        box-shadow: none;
    }
}

/* Loading states and transitions */
@media (max-width: 767px) {
    .tab-content {
        min-height: 200px;
        transition: opacity 0.2s ease;
    }
    
    /* Smooth tab transitions */
    .tab-pane {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ========================================
   MY HOUSEHOLD UPDATE PAGE - MOBILE OPTIMIZATION
   Mobile responsive styling for /hhc/household/update page
   Keeping native desktop style, just fixing alignment
   ======================================== */

/* Mobile: Fix household member list alignment */
@media (max-width: 767px) {
    /* Household members container */
    .viewhhc ul.members {
        margin: 0 15px;
    }
    
    /* Member list items - keep native icons */
    .viewhhc .members li {
        padding: 10px 20px 10px 40px !important;
        margin: 10px 0;
        min-height: auto !important;
    }
    
    /* Member info container - stack vertically */
    .viewhhc .members li div {
        display: block;
        overflow: visible !important;
    }
    
    /* Member name - full width, wrap properly */
    .viewhhc .members li span.name {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 5px;
        word-wrap: break-word;
    }
    
    /* Member ID - keep hidden for black and blue members (like desktop) */
    .viewhhc .members li.black span.id,
    .viewhhc .members li.blue span.id {
        display: none !important;
    }
    
    /* Show ID for newly added red members (like desktop) */
    .viewhhc .members li.red span.id {
        display: block !important;
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Relationship - full width on new line */
    .viewhhc .members li span.relationship {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 8px;
        padding: 5px 0 !important;
    }
    
    /* Edit/Remove link - position below, still native style */
    .viewhhc .members li a.edit {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        display: block !important;
        width: auto !important;
        text-align: left;
        margin: 5px 0 0 0 !important;
        padding: 8px 0 !important;
    }
    
    /* Undo link - same treatment */
    .viewhhc .members li a.undo {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        display: block !important;
        width: auto !important;
        text-align: left;
        margin: 5px 0 0 0 !important;
        padding: 8px 0 !important;
    }
    
    /* Add Member button */
    .viewhhc .addnew {
        margin: 20px 15px;
    }
    
    /* Proceed button */
    .viewhhc .proceed {
        margin: 30px 15px;
        float: none !important;
        text-align: left;
    }
}

/* ========================================
   HHC HOME PAGE (/hhc) - MOBILE OPTIMIZATION
   Fix button alignment for household and means sections
   ======================================== */

/* Mobile: Fix "My Household" and "Latest Means Information" button alignment */
@media (max-width: 767px) {
    /* Container for household review section - use flexbox to reorder */
    .panel-hhc .hhc-list:not(.row),
    .panel .hhc-list:not(.row) {
        display: flex !important;
        flex-direction: column !important;
        clear: both;
        overflow: visible;
        margin-bottom: 15px;
    }
    
    /* Button container - force to bottom */
    .panel-hhc .hhc-list:not(.row) > div[style*="float"],
    .panel .hhc-list:not(.row) > div[style*="float"] {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        text-align: center;
        padding: 0 !important;
        margin: 15px 0 0 0 !important;
        display: block !important;
        order: 2 !important;
    }
    
    .panel-hhc .hhc-list:not(.row) > .float-end,
    .panel .hhc-list:not(.row) > .float-end {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        text-align: center;
        padding: 0 !important;
        margin: 15px 0 0 0 !important;
        display: block !important;
        order: 2 !important;
    }
    
    /* Italic text - appears first */
    .panel-hhc .hhc-list:not(.row) > div[style*="font-style"],
    .panel-hhc .hhc-list:not(.row) > p[style*="font-style"],
    .panel .hhc-list:not(.row) > div[style*="font-style"],
    .panel .hhc-list:not(.row) > p[style*="font-style"] {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        display: block !important;
        order: 1 !important;
    }
    
    /* Review buttons - make them full width on mobile */
    .panel-hhc .opt-out-button,
    #lnk-Update,
    #lnk-Review {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        display: block !important;
        float: none !important;
    }
    
    /* Panel cards - better mobile padding and centering */
    .panel-hhc.card,
    .panel.card,
    .panel-default.card,
    .panel-box.card {
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        width: calc(100% - 20px) !important;
        max-width: 100%;
    }
    
    .panel-hhc .card-body,
    .panel .card-body,
    .panel-body {
        padding: 15px !important;
    }
    
    /* Household member rows - better spacing on mobile */
    .panel-hhc .hhc-list.row {
        margin: 0 0 10px 0 !important;
        padding: 8px 0 !important;
    }
}

/* Tablet: Adjust for medium screens (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .panel-hhc .opt-out-button,
    #lnk-Update,
    #lnk-Review {
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }
}

/* ========================================
   PAGE HEADING SPACING - MOBILE
   Increase spacing between elements
   ======================================== */

/* Mobile: Increase spacing for main page heading */
@media (max-width: 767px) {
    /* Household and Means Information title */
    .body-content > h1:first-of-type,
    .body-content h1 {
        margin-top: 25px !important;
        margin-bottom: 20px !important;
    }
    
    /* Mailbox button container */
    .body-content > div:first-child,
    .body-content > a:first-child {
        margin-bottom: 15px;
    }
}