/* On html as well: overscroll-behavior on body does not propagate to the viewport the way overflow
   does, so on body alone this never stopped the document itself from rubber-banding. */
html,
body {
    overscroll-behavior-y: none;
}

@media (min-width: 768px) {
    body.override {
        -webkit-user-select: unset;
        -moz-user-select: unset;
        -ms-user-select: unset;
        user-select: unset;
    }
}

.display-none {
    display: none;
}

.display-flex {
    display: flex;
}

.overflow-hidden {
    overflow: hidden;
}

.visibility-hidden {
    visibility: hidden;
}

.text-error {
    color: #ff784e;
}

.text-black {
    color: black;
}

.text-align-center {
    text-align: center;
}

.text-underline {
    text-decoration: underline;
}

.fw-bold {
    font-weight: bold;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.cursor-pointer {
    cursor: pointer;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.m-auto {
    margin: auto;
}

.inline_block_d {
    display: inline-block;
}

.c-black {
    color: black;
}

.c-gray {
    color: gray;
}

.link {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

.transactions-table .adjustment, .dashboard-block__last .table-tbody .adjustment {
    background: #ececec;
}

.transactions-table .adjustment, .dashboard-block__last .table-tbody .adjustment {
    background: #ececec;
}

    .transactions-table .adjustment:hover, .dashboard-block__last .table-tbody .adjustment:hover {
        background: #ececec;
    }

.mobile-table .adjustment {
    background: #ececec;
}

.mobile-table__row.opened.adjustment .main-row {
    background: #d4d4d4;
}

.modal-block {
    max-height: 100dvh;
}

/* Guest donation page — a standalone page that reuses the modal card styles.
   It is NOT inside a real .modal, so the global max-height cap above would clip
   the white card and let the lower fields spill onto the page background. */
.donate-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100dvh;
    padding: 32px 16px 64px;
    box-sizing: border-box;
}

.donate-page .donate-card {
    max-height: none; /* override the cap so the card grows to fit all content */
    width: 600px;
    max-width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}

.donate-page .donate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

/* Even spacing between every field/section of the form */
.donate-page .add-credit-card__wrapper {
    margin-bottom: 20px;
}

/* Stripe Payment Element + Turnstile: give them room and align the widget */
.donate-page #donate-payment-element {
    margin-top: 10px;
}

.donate-page #donate-turnstile {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.donate-page .modal-form__buttons {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .donate-page {
        padding: 16px 12px 48px;
    }

    .donate-page .donate-card {
        padding: 24px 20px;
    }
}

.modal.adjustment .modal-block {
    background: #ececec;
}

@media (min-width: 551px) {
    .log-donation .default-tabs__container,
    .deposit .default-tabs__container,
    .income .default-tabs__container,
    .hafrasha .default-tabs__container {
        max-height: calc(100dvh - 175px);
        overflow: auto;
    }
}

.dashboard-skeleton {
    background: lightgray;
    border-radius: 15px;
}

    .dashboard-skeleton.box-1 {
        grid-column-start: 1;
        grid-column-end: 3;
        background: lightgray;
    }

    .dashboard-skeleton.box-2 {
    }

    .dashboard-skeleton.box-3 {
        grid-column-start: 4;
        grid-column-end: 6;
        background: lightgray;
    }

    .dashboard-skeleton.box-4 {
        grid-column-start: 1;
        grid-column-end: 4;
        background: lightgray;
    }

    .dashboard-skeleton.box-5 {
        grid-column-start: 4;
        grid-column-end: 6;
    }


.schedule-status {
    border-radius: 6px;
    margin-top: 4px;
    text-align: center;
    width: 65px;
}

    .schedule-status.active {
        color: rgba(2, 73, 35, 0.7);
        border: rgba(2, 73, 35, 0.7) 1px solid;
    }

    .schedule-status.completed {
        color: rgba(45, 105, 247, 0.7);
        border: rgba(45, 105, 247, 0.7) 1px solid;
    }

    .schedule-status.canceled {
        color: #ed9d0a;
        border: #ed9d0a 1px solid;
    }

    .schedule-status.deleted {
        color: #ff784e;
        border: #ff784e 1px solid;
    }


/* override designer code */

.default-input {
    display: block; /*needed for error text positioning*/
}

.transactions .insidePage-main:after {
    height: 20px !important;
}

.reconcile__item.trans-description {
    min-width: 374px;
}

@media (max-width: 1024px) {
    .payment__item .default-checkbox.override-show .default-checkbox__block {
        display: inline-block;
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 7px;
    }

    .payment__item .default-checkbox.override-show:last-child {
        display: block;
        margin-left: 15px;
    }

    .payment__item.payment__item-5 {
        margin-top: 25px;
    }

    .account-page .transactions__row .transactions__item:nth-child(4) .default-button.override-show {
        background-image: none;
    }

    .reconcile__item.trans-description {
        min-width: unset;
    }
}

.default-button.refrash-trans-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
}

    .default-button.refrash-trans-btn.whiteThird:hover {
        border-color: unset;
    }

@media (max-width: 374px) {
    .default-button.refrash-trans-btn {
        position: relative;
        bottom: 45px;
        left: 120px;
    }
}

@media (min-width: 374px) and (max-width: 425px) {
    .default-button.refrash-trans-btn {
        position: relative;
        bottom: 45px;
        left: 140px;
    }
}

@media (min-width: 425px) and (max-width: 480px) {
    .default-button.refrash-trans-btn {
        position: relative;
        bottom: 45px;
        left: 160px;
    }
}

@media (min-width: 480px) and (max-width: 980px) {
    .default-button.refrash-trans-btn {
        position: relative;
        bottom: 45px;
        left: 325px;
    }
}

@media (min-width: 980px) {
    .default-button.refrash-trans-btn {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }
}

.icon-spinner {
    animation: spin-animation 1s linear infinite;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.default-button.borderSecond.danger {
    border: 1px solid #ff784e;
}

    .default-button.borderSecond.danger .text {
        color: #ff784e;
    }


.default-button.borderSecond.danger {
    border: 1px solid #ff784e;
}

    .default-button.borderSecond.danger .text {
        color: #ff784e;
    }

    .default-button.borderSecond.danger .icon path {
        stroke: #ff784e;
    }

    .default-button.borderSecond.danger .back:after {
        background: #ff784e;
    }

    .default-button.borderSecond.danger:hover {
        border-color: #ff784e;
    }

        .default-button.borderSecond.danger:hover .text {
            color: #fff;
        }

        .default-button.borderSecond.danger:hover .icon path {
            stroke: #fff;
        }

.dashboard-block__total .money.year-total-donations {
    font-size: 32px;
}

@media (max-width: 480px) {
    .dashboard-block__total .money.year-total-donations {
        font-size: 24px;
    }
}

/* Donations period picker (donor dashboard, "Total Donations" card): a quiet pill in the card header that
   opens a short menu. The card becomes a stacking context while the menu is open, so the menu's own
   z-index only counts inside it: the CARD's z-index is what has to beat everything else on the page -
   the refresh button (2), the Log Income button's layers, the phone bottom nav (10) - while staying under
   DialogBox (111), so an error from a failed save still shows on top. Lifted only while open, so nothing
   else's stacking changes. */
.dashboard-block__total:has(.donations-period__menu) {
    position: relative;
    z-index: 100;
}

.donations-period {
    position: relative;
    flex-shrink: 0;
}

.donations-period__button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 5px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: -0.3px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease-in, color 0.2s ease-in;
}

    .donations-period__button:hover:not(:disabled),
    .donations-period__button[aria-expanded="true"] {
        border-color: #24843e;
        color: #000;
    }

    .donations-period__button:disabled {
        cursor: default;
        opacity: 0.6;
    }

    .donations-period__button svg {
        opacity: 0.6;
    }

/* closes the menu on any click outside it */
.donations-period__backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.donations-period__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 21;
    width: 250px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

/* only the phone bottom sheet needs a heading; the pill sits right above the dropdown */
.donations-period__heading {
    display: none;
}

.donations-period__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    text-align: left;
    cursor: pointer;
}

    .donations-period__option:hover:not(:disabled) {
        background: #f4f4f2;
    }

    .donations-period__option.selected {
        color: #24843e;
        font-weight: 500;
    }

        .donations-period__option.selected::after {
            content: "";
            width: 12px;
            height: 7px;
            margin: -3px 2px 0 0;
            border-left: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(-45deg);
        }

.donations-period__custom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 10px 10px;
}

    .donations-period__custom label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }

    .donations-period__custom select {
        width: 100%;
        padding: 7px 6px;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        background: #fff;
        font-family: inherit;
        font-size: 14px;
        color: #000;
    }

.donations-period__error {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 16px;
    color: #d93025;
}

.donations-period__apply {
    grid-column: 1 / -1;
    padding: 9px;
    border: none;
    border-radius: 8px;
    background: #24843e;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

    .donations-period__apply:disabled {
        opacity: 0.4;
        cursor: default;
    }

.donations-period__outside {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 10px 6px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    line-height: 17px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

    .donations-period__outside input {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #24843e;
        cursor: pointer;
    }

/* phones: the card is ~200px tall, too short to hang a menu from - use a bottom sheet instead */
@media (max-width: 580px) {
    .donations-period__button {
        padding: 3px 8px 3px 10px;
        font-size: 12px;
    }

    .donations-period__backdrop {
        z-index: 1000;
        background: rgba(0, 0, 0, 0.4);
        touch-action: none; /* nothing to scroll here: keep iOS from dragging the page underneath */
    }

    .donations-period__menu {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        width: auto;
        max-height: 85dvh;
        overflow-y: auto;
        overscroll-behavior: contain; /* scrolling the sheet stops at its end instead of moving the page */
        padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        touch-action: pan-y;
    }

    .donations-period__heading {
        display: block;
        padding: 0 10px 8px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.5);
    }

    .donations-period__option {
        padding: 12px 10px;
        font-size: 16px;
    }

    .donations-period__custom select {
        font-size: 16px; /* under 16px iOS zooms the page when the select is focused */
    }

    .donations-period__outside {
        font-size: 14px;
        padding-top: 14px;
    }
}

/*.dashboard-block__daf .money {
    font-size: 46px;
}*/

@media (max-width: 580px) {
    .dashboard-block__daf .money.daf-available {
        font-size: 42px;
    }
}

@media (max-width: 480px) {
    .dashboard-block__daf .money.daf-available {
        font-size: 38px;
    }
}

.main-wrapper.override {
    min-height: 100dvh;
}

/* .app-shell deliberately has NO rules at desktop width: only the bottom bar moved out of
   .main-wrapper, and the bar is display: none above 834px, so the desktop box model is untouched.
   (An earlier revision moved the top header out too, which made the desktop dashboard scroll by
   exactly the header's height - the wrapper's min-height: 100dvh no longer contained it.) */

@media (max-width: 834px) {
    /* At this width nothing scrolls the document - .main-wrapper and the modals do - but iOS still
       lets a drag that none of them can take scroll and bounce the document underneath. On a modal
       (.main-wrapper is locked while one is open) and on the My Account pages (about one screen tall,
       so .main-wrapper has nothing to scroll) that is every drag: the whole page slides, the beige
       background shows, and the fixed bottom nav is left offset from the bottom with a gap under it.
       That is handled by overscroll-behavior on html (top of this file) and the touchmove guard in
       app.js - NOT by "html { overflow: hidden }". Pinning the root that way made WebKit stop treating
       the page as scrollable, and the iOS app's WebView (drawn under the home indicator, MainPage.xaml
       IgnoreSafeArea) then placed position: fixed elements inside the safe area instead of against the
       full frame: the bottom nav sat a home-indicator height above the screen edge, beige showing under
       it, on every page. Android has no safe-area inset, so it never showed there. */
    body.override {
        overflow: hidden;
    }

    /* THE APP SHELL: a box exactly one viewport tall that never scrolls. .main-wrapper is the single
       scrolling pane inside it, and the bottom bar is the row below that pane - in normal flow, not
       position: fixed. The bar is therefore welded to the bottom of a box the page controls, so no
       viewport change iOS makes (keyboard, rubber-band, safe-area insets) can leave a gap under it.
       DonorNav renders the top header and the bottom bar as siblings, so `order` rather than DOM order
       decides which is the last row. Donor portal only, and only at this width: above 834px .app-shell
       has no rules at all and the document keeps scrolling exactly as it did. */
    .app-shell {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    .app-shell > .main-wrapper.override {
        flex: 1 1 auto;
        min-height: 0; /* load-bearing: without it a flex item refuses to shrink below its content */
        max-height: none;
    }

    .app-shell > .header__vertical.override {
        flex: 0 0 auto;
        position: static;
    }

    /* The fixed bar used to sit on top of the content, so pages reserved 97px at the bottom to clear
       it. A row in the shell takes its own space, so that reservation is now just dead background. */
    .app-shell .page-with-fixed-header {
        padding-bottom: 0;
    }

    /* Chrome - the bottom bar, a modal's title bar and its CTA row, the backdrop - has nothing to
       scroll, so a drag starting there is handed straight to the WebView's scroll view, which
       rubber-bands and shows the gap. touch-action: none says there is no panning gesture to make here
       at all, which iOS honours without needing a cancelable touchmove. Taps are unaffected.
       (App.razor sets `* { touch-action: pan-x pan-y }` below 600px; these class selectors beat it.) */
    .header__vertical.override,
    .fancy-modal .modal-block-top,
    .fancy-modal .nd-footer,
    .fancy-modal .modal-back {
        touch-action: none;
    }

    /* a drag that reaches the end of one of these stops there instead of carrying on to the document */
    .main-wrapper.override,
    .fancy-modal .modal-block-wrap,
    .fancy-modal .modal-scroll-content {
        overscroll-behavior-y: contain;
    }

    .main-wrapper.override {
        max-height: 100dvh;
        overflow: auto;
    }

        .main-wrapper.override:has(.sign-up) {
            overflow: hidden;
        }

    /* (The pair of body.ios padding-bottom rules that used to sit here - 20px of clearance above the
       fixed bar, then a second rule cancelling it on My Account pages where it only painted a strip of
       beige - are gone: the bar is a row of the shell now, so there is nothing to clear.) */

    body.override .transactions-main {
        overflow: unset;
        min-height: unset;
    }

    body.ios {
        background: #f6f2e5;
    }

    /* equal top/bottom so the icons sit centred in the bar */
    .header__vertical.override {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* The iOS app's WebView draws under the home indicator (MainPage.xaml IgnoreSafeArea), so the bar
       needs room below it there. A fixed 28px rather than env(safe-area-inset-bottom) because the
       viewport meta has no viewport-fit=cover, which would make env() resolve to 0 (see App.razor for
       why cover is not set). Only in the app: iPhone Safari keeps the page clear of the indicator
       itself, and "ios" alone also covers Macs and the emulator, where this is just dead space. */
    body.ios-app .header__vertical.override {
        padding-bottom: 28px;
    }

    body.ios .modal-form__bottom {
        padding-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .override .account-content .imaaser-daf .account-content__middle-1 {
        min-height: calc(100dvh - (91px + 140px));
    }

    .override .account-content .settings .account-content__middle {
        min-height: calc(100dvh - (99px + 90px));
    }
}

.search-orgs-page {
    margin: 25px auto;
    width: 97dvw;
    max-width: 900px;
}

    .search-orgs-page .organizations-list .item {
        cursor: default;
    }

    .search-orgs-page .organizations-list .item-line2 {
        padding-left: unset;
    }

    .search-orgs-page .organizations-list {
        min-height: calc(100dvh - 250px);
        max-height: calc(100dvh - 250px);
        overflow: auto;
    }

@media (max-width: 550px) {
    .search-orgs-page .search-orgs-top {
        padding: 0 10px;
    }

    .search-orgs-page .organizations-list .item {
        margin-bottom: 0;
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        padding: 15px;
    }
}

/*.onboarding-progress {
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .onboarding-progress[data-complete="1"] .inner-line {
        width: 25%;
    }

    .onboarding-progress[data-complete="1"] .onboarding-progress__item:nth-child(1) .circle {
        border-color: #28853f;
        background-color: #28853f;
    }

    .onboarding-progress[data-complete="1"] .onboarding-progress__item:nth-child(1) .text {
        opacity: 1;
    }

    .onboarding-progress[data-complete="2"] .inner-line {
        width: 75%;
    }

    .onboarding-progress[data-complete="2"] .onboarding-progress__item:nth-child(1) .circle,
    .onboarding-progress[data-complete="2"] .onboarding-progress__item:nth-child(2) .circle {
        border-color: #28853f;
        background-color: #28853f;
    }

    .onboarding-progress[data-complete="2"] .onboarding-progress__item:nth-child(1) .text,
    .onboarding-progress[data-complete="2"] .onboarding-progress__item:nth-child(2) .text {
        opacity: 1;
    }

    .onboarding-progress[data-complete="3"] .inner-line {
        width: 100%;
    }

    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(1) .circle,
    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(2) .circle,
    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(3) .circle {
        border-color: #28853f;
        background-color: #28853f;
    }

    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(1) .text,
    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(2) .text,
    .onboarding-progress[data-complete="3"] .onboarding-progress__item:nth-child(3) .text {
        opacity: 1;
    }

.onboarding-progress__line {
    position: absolute;
    width: calc(100% - 50px);
    height: 1.5px;
    background-color: #ece8db;
    z-index: 1;
    top: 9.25px;
    left: 25px;
}

    .onboarding-progress__line .inner-line {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #28853f;
    }

.onboarding-progress__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.onboarding-progress__item {
    width: 50px;
    margin: 0 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 3;
}

    .onboarding-progress__item:first-child {
        margin-left: 0;
    }

    .onboarding-progress__item:last-child {
        margin-right: 0;
    }

    .onboarding-progress__item .circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1.5px solid #ece8db;
        background-color: #fff;
        margin-bottom: 1px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("../img/icons/check.svg");
        background-size: 20px 20px;
    }

    .onboarding-progress__item .text {
        font-size: 17px;
        line-height: 1.4;
        color: #000;
        opacity: 0.4;
        font-weight: 500;
        letter-spacing: -0.5px;
    }

@media (max-width: 540px) {
    .onboarding-progress__item .text {
        font-size: 14px;
    }

    .onboarding-progress__item {
        margin: 0 10px;
    }
}*/

div.organizations-list {
    min-height: 500px;
}

@media (max-width: 600px) {
    div.organizations-list {
        min-height: unset;
        max-height: unset;
    }
}

.default-input.withIcon .amount {
    background-image: unset;
    padding-left: 20px;
}

.starting-balance-div {
    display: flex;
    width: 33%;
}

    .starting-balance-div .prefix-label {
        width: 100px;
    }

    .starting-balance-div .prefix-title {
        margin-top: 20px;
    }

@media (max-width: 768px) {
    .starting-balance-div {
        width: 100%;
    }

        .starting-balance-div .prefix-label {
            width: 75px;
        }

        .starting-balance-div .prefix-title {
            margin-top: 30px;
        }

    .account .fancy-modal.donation .default-tabs {
        height: 44px;
    }
}

.dashboard-block__income .blocks:not(.hafrosha):after {
    opacity: 0;
}

.transactions-table__row:nth-last-child(-n+2):nth-child(n+6) .default-more .default-more__container {
    bottom: 30px;
}

div.organizations-list div.item:hover {
    background-color: unset;
    border-color: unset;
}

.override .divide-form__input.default-input:after {
    content: 'Months';
}

.override .fancy-modal {
    display: block;
    height: 100dvh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    /*center*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.fancy-modal .modal-scroll-content {
    max-height: calc(100vh - 225px);
    overflow: auto;
}

@media (max-width: 550px) {
    .override .modal-block {
        border-radius: unset;
    }

    .fancy-modal .modal-scroll-content {
        max-height: unset;
        height: calc(100vh - 150px);
    }
}

.override .sign-up__right-white {
    height: calc(100dvh - 20px);
    overflow: auto;
}

.override .hav-account-login {
    text-align: center;
    margin-top: 40px;
}

@media (max-width: 550px) {
    .override .sign-up {
        min-height: 100dvh;
    }

    .override .sign-up__right-white {
        height: calc(100dvh - 30px);
    }

    .override .sign-up:not(.login) .sign-up__right-block {
        padding: 25px 25px 15px 25px;
    }

    .override .sign-up:not(.login) .sign-up__form-wrap .ttl {
        font-size: 22px;
    }

    .override .hav-account-login {
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

.default-input.withIcon.rightIcon.default-datepicker__end input,
.default-input.withIcon.rightIcon.default-datepicker__start input {
    padding-right: 14px;
}

.override .default-input.inputPassword .hide-icon {
    top: 0px;
    right: 0px;
}

@media (max-width: 720px) {
    body.override .transactions .mobile-table__row .main-row .col:nth-child(5) {
        width: 10%;
    }
}

@media (max-width: 768px) {
    .override .default-tabs__content.imaaser-daf .daf-page-title {
        align-self: start;
        margin-left: 60px;
    }

    .override .default-tabs__content.imaaser-daf .order-booklets-btn {
        width: unset;
        aspect-ratio: unset;
    }

        .override .default-tabs__content.imaaser-daf .order-booklets-btn .icon {
            margin-right: 5px;
        }

        .override .default-tabs__content.imaaser-daf .order-booklets-btn .text {
            display: unset;
        }
}

.default-more.donation-org-info .default-more__container {
    width: 185px;
}

.default-more.donation-org-info {
    margin-right: 16px;
    margin-left: 5px;
}

    .default-more.donation-org-info .default-more__menu:before {
        right: 20px;
    }

@media (max-width: 550px) {
    .override.account .modal-tabs.default-tabs .default-tab {
        justify-content: center;
    }
}

/* end override designer code */
/* list of tag types may be adjusted */
button, a, input, textarea, select, label, div, p {
    -webkit-tap-highlight-color: transparent;
}

#stripe-payment-request .__PrivateStripeElement iframe {
    border-radius: 20px;
}

.barcode {
    font-family: "Libre Barcode 39", system-ui;
    font-weight: 400;
    font-style: normal;
}

/* ---- TransactionsSkeleton: placeholder rows with a soft shimmer while a transaction list loads ---- */
.tx-skeleton { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.tx-skeleton__row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px; border-radius: 12px; background: #f7f6f2; }
.tx-skeleton__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; }
.tx-skeleton__main { flex: 1; min-width: 0; }
.tx-skeleton__side { display: flex; flex-direction: column; align-items: flex-end; width: 76px; flex-shrink: 0; }
.tx-skeleton__side .tx-skeleton__bar { width: 64px; }
.tx-skeleton__side .tx-skeleton__bar--sm { width: 76px; }
.tx-skeleton__bar { height: 11px; border-radius: 6px; }
.tx-skeleton__bar--sm { height: 9px; margin-top: 8px; }
.tx-skeleton__icon, .tx-skeleton__bar { background: linear-gradient(90deg, #e4e1d8 0%, #f1efe9 45%, #e4e1d8 90%); background-size: 220% 100%; animation: tx-shimmer 1.4s ease-in-out infinite; }
@keyframes tx-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .tx-skeleton__icon, .tx-skeleton__bar { animation: none; } }

/* ---- SettingsSkeleton: a My Account page waiting for its data ----
   The rows fade in after a short pause, so a load that finishes quickly never flashes them at all;
   the page's own entrance (DonorSettingsLayout) then plays when the real content replaces them. */
.acct-sk .tx-skeleton { animation: acct-sk-in .2s ease-out .15s backwards; }
@keyframes acct-sk-in { from { opacity: 0; } }
.account-content .acct-sk { padding-top: 8px; padding-bottom: 24px; }
@media (max-width: 768px) {
    /* the same centred title the real pages draw, level with the back button (25px + 40px / 2).
       Centred as a column on purpose, and one class stronger than the pages' own header rules:
       style.css lays Payment Accounts' header out as a left-aligned column (loaded after this file,
       so at equal specificity it won), which drew the placeholder title on the left and then
       snapped it to the centre when the real header replaced it. */
    .account-content .account-content__top.acct-sk__top { flex-direction: column; align-items: center; justify-content: center; padding: 33px 64px 18px; }
    .account-content .acct-sk__top h2 { margin: 0; text-align: center; }
    .account-content .acct-sk .tx-skeleton__row { background: #fff; border: 1px solid var(--Primary-40, #ece8db); border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .acct-sk .tx-skeleton { animation: none; } }