body #app-joinportal-website {
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    letter-spacing: 0.24px !important;
}
#member-portal-main-div {
    position: relative;
}
#member-portal-main-div #app-joinportal-website .neutral-2 {
    color: var(--Neutral-2) !important;
}
#member-portal-main-div #app-joinportal-website form .mb-3 {
    margin-bottom: 1.5rem !important;
}
#member-portal-main-div #powered-by-txt:hover {
    text-decoration: underline;
}
#member-portal-main-div #div-bg-disable {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 15000;
    display: none;
}
#member-portal-main-div #preloader {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0;
    margin: 0;
    height: 100%;
    position: fixed;
    z-index: 99999;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#member-portal-main-div *::placeholder {
    color: var(--Neutral-3) !important;
}
#member-portal-main-div *::-ms-input-placeholder {
    color: var(--Neutral-3) !important;
}
#member-portal-main-div [data-form-render] *::placeholder {
    color: transparent !important;
}
#member-portal-main-div [data-form-render] *::-ms-input-placeholder {
    color: transparent !important;
}
/* #member-portal-main-div .row {
    width: 100%;
} */
#member-portal-main-div svg {
    display: inline-block;
}
#member-portal-main-div #app-joinportal-website .cursor-pointer {
    cursor: pointer;
}
#member-portal-main-div #app-joinportal-website .parsley-errors-list {
    padding: 0;
    margin: 0;
}
#member-portal-main-div #app-joinportal-website .parsley-errors-list li {
    color: red;
    list-style: none;
}
#member-portal-main-div #app-joinportal-website .selectize-input.focus,
#member-portal-main-div #app-joinportal-website .selectize-input {
    border-radius: 16px;
    border: 1px solid var(--Neutral-4) !important;
    background: none !important;
    box-shadow: none !important;
    font-weight: 500;
}
#member-portal-main-div #app-joinportal-website .selectize-dropdown,
#member-portal-main-div #app-joinportal-website .selectize-input,
#member-portal-main-div #app-joinportal-website .selectize-input input {
    font-size: 15px;
}
#member-portal-main-div #app-joinportal-website .selectize-input input {
    padding-right: 20px !important;
}
#member-portal-main-div #app-joinportal-website .selectize-dropdown {
    border: 1px solid var(--Neutral-4) !important;
}
#member-portal-main-div #app-joinportal-website .masked {
    -webkit-text-security: disc;
    text-security: disc;
}
#member-portal-main-div #app-joinportal-website .list-group-item .list-group-item .menu-link{
    font-size: 14px;
}
#member-portal-main-div #app-joinportal-website .list-group-item .list-group-item{
    border: none;
}
#member-portal-main-div #app-joinportal-website .menu-link {
    font-size: 15px;
    font-weight: 700;
    /* padding: 16px 0px; */
    line-height: 50px; /* 133.333% */
    letter-spacing: 0.3px;
    cursor: pointer;
    color: var(--Neutral-1);
    text-decoration: none;
    font-family: "Red Hat Display";
}
#member-portal-main-div #app-joinportal-website .menu-link.menu-active,
#member-portal-main-div #app-joinportal-website .menu-link:hover {
    color: var(--Primary-3);
}
#member-portal-main-div #app-joinportal-website #member-portal-section {
    padding: 16px 0px;
}
#member-portal-main-div #app-joinportal-website #member-portal-section table {
    margin: 0;
    color: var(--Neutral-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.28px;
    border: none;
}
#member-portal-main-div #app-joinportal-website #member-portal-section table th,
#member-portal-main-div
    #app-joinportal-website
    #member-portal-section
    table
    td {
    padding: 4px;
    border: none;
}
#member-portal-main-div
    #app-joinportal-website
    #member-portal-section
    table
    th {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: 0.24px;
}
#member-portal-main-div
    #app-joinportal-website
    table.table.dataTable
    > :not(caption)
    > *
    > * {
    padding: 16px;
    font-weight: 600;
}

#member-portal-main-div #app-joinportal-website .avatar-circle {
    width: 70px;
    height: 70px;
    background-color: var(--Neutral-1);
    border-radius: 50%;
    font-size: 18px;
    position: relative;
}

#member-portal-main-div #app-joinportal-website .avatar-square {
    width: 50px;
    height: 50px;
    background-color: #f5f5f5;
    border-radius: 20%;
    font-size: 18px;
    position: relative;
}

#member-portal-main-div #app-joinportal-website .avatar-border {
    position: absolute;
    left: -5px;
    top: -5px;
    background-image: url(../svg/prof_border.svg);
    width: 92px;
    height: 92px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
#member-portal-main-div #app-joinportal-website .avatar-cat-icon {
    position: absolute;
    bottom: 2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#member-portal-main-div #app-joinportal-website .result-count {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px; /* 133.333% */
    letter-spacing: 0.3px;
    color: var(--Neutral-2);
}
/* .card::before {
    position: absolute;
    top: 8px;
    left: -3.5px;
    content: "";
    background: #253142;
    height: 24px;
    width: 17px;
    transform: rotate(45deg);
    z-index: -1;
} */

#member-portal-main-div #app-joinportal-website .card .sticky-left {
    position: absolute;
    top: 0;
    padding: 3px;
    left: -10px;
    width: 4rem;
    background: #253142;
    color: white;
    text-align: center;
    font-size: 11px;
    font-family: "Roboto", sans-serif;
    box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}

#member-portal-main-div #app-joinportal-website .twitter-typeahead {
    display: block !important;
    flex: 1 1 auto;
}
#member-portal-main-div #app-joinportal-website .tt-dropdown-menu {
    border: 1px solid var(--Neutral-4) !important;
    width: 100%;
    background-color: #fff;
}
#member-portal-main-div #app-joinportal-website .tt-hint {
    display: none;
}
#member-portal-main-div #app-joinportal-website .tt-suggestion:hover {
    background-color: #efefef;
}
#member-portal-main-div #app-joinportal-website .tt-suggestion {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 5px;
    border-bottom: 1px solid #efefef;
}

#member-portal-main-div #app-joinportal-website .multiple-list {
    display: flex;
    gap: 16px;
    position: absolute;
    flex-wrap: wrap;
    padding: 15px 15px;
    background: #fff;
    z-index: 999;
}
#member-portal-main-div #app-joinportal-website .pf-organization-list,
#member-portal-main-div #app-joinportal-website .pf-affiliate-list {
    display: flex;
    flex-direction: column;
    padding: 13px;
    background-color: var(--Neutral-4);
    border-radius: 5px;
    border: 2px solid var(--Primary-3);
    position: relative;
}
#member-portal-main-div
    #app-joinportal-website
    .pf-organization-list
    .pf-close-btn,
#member-portal-main-div
    #app-joinportal-website
    .pf-affiliate-list
    .pf-close-btn {
    /* position: absolute;
    right: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: red; */
    color: red;
    cursor: pointer;
}
#member-portal-main-div
    #app-joinportal-website
    .selectize-control.multi
    .selectize-input
    [data-value],
#member-portal-main-div
    #app-joinportal-website
    .selectize-control.multi
    .selectize-input
    [data-value].active {
    background-color: var(--Neutral-4) !important;
    color: #333;
    border-color: var(--Primary-3);
    background-image: linear-gradient(
        to bottom,
        var(--Neutral-4),
        var(--Neutral-4)
    ) !important;
}

#member-portal-main-div
    #app-joinportal-website
    .list-group-flush
    > .list-group-item {
    margin: 0;
}
#member-portal-main-div #app-joinportal-website a img {
    display: inline-block;
}
#member-portal-main-div #app-joinportal-website .fr-view a img {
    display: block;
}

/*Calendar Design*/
#member-portal-main-div
    #app-joinportal-website
    .meetings-controls
    .meetings-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--Neutral-4);
    border-radius: 8px;
    background-color: var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    .meetings-controls
    .meetings-toggle-switch
    > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
}
#member-portal-main-div
    #app-joinportal-website
    .meetings-controls
    .meetings-toggle-switch
    > button.active {
    background-color: var(--Neutral-1) !important;
    color: #fff !important;
}
#member-portal-main-div
    #app-joinportal-website
    .meetings-controls
    .meetings-toggle-switch
    > button:not(.active):hover {
    background-color: var(--Neutral-4) !important;
}
#member-portal-main-div
    #app-joinportal-website
    #loadMoreMeetingsBtn {
    min-width: 165px;
}
#member-portal-main-div
    #app-joinportal-website
    .meetings-calendar-wrap {
    position: relative;
    min-height: 360px;
}
#member-portal-main-div
    #app-joinportal-website
    .meeting-calendar-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.82);
}
#member-portal-main-div
    #app-joinportal-website
    .meeting-calendar-loader.is-active {
    display: flex;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc
    .fc-toolbar-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0.48px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list-table
    .fc-event
    > td {
    display: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 12px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-direction-ltr
    .fc-toolbar-chunk
    > :not(:first-child) {
    margin-left: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-direction-rtl
    .fc-toolbar-chunk
    > :not(:first-child) {
    margin-right: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-toolbar-chunk:first-child
    > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    min-width: 41px;
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-toolbar-chunk:first-child
    .fc-toolbar-title {
    display: flex;
    align-items: center;
    height: 41px;
    margin: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .meetings-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--Neutral-4);
    border-radius: 8px;
    background-color: var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .meetings-toggle-switch > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-customButton-button::before,
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-dayGridMonth-button::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    line-height: 1;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-customButton-button::before {
    content: "\f478";
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .fc-dayGridMonth-button::before {
    content: "\f214";
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .meetings-toggle-switch > button.active {
    background-color: var(--Neutral-1) !important;
    color: #fff !important;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .meetings-toggle-switch > button:not(.active):hover {
    background-color: var(--Neutral-4) !important;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-scroller::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-scroller::-webkit-scrollbar-thumb {
    background-color: var(--Neutral-2);
    border: solid 3px #ffffff;
    border-radius: 15px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-scroller::-webkit-scrollbar-track-piece {
    background-color: transparent;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-scroller::-webkit-scrollbar-button:start:decrement,
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-scroller::-webkit-scrollbar-button:end:increment {
    height: 0px;
    width: 0px;
    display: none;
}

#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list
    th,
#member-portal-main-div #app-joinportal-website .calendar-container .fc-list {
    border: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-dayGridMonth-view {
    overflow: hidden;
    border: 1px solid var(--Neutral-4);
    border-radius: 12px;
    background-color: var(--Neutral-6);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-theme-bootstrap5
    .fc-scrollgrid {
    border: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-theme-bootstrap5
    .fc-scrollgrid
    th,
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-theme-bootstrap5
    .fc-scrollgrid
    td {
    border-color: var(--Neutral-4);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-col-header-cell {
    background-color: var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-col-header-cell-cushion {
    display: block;
    padding: 12px 8px;
    color: var(--Neutral-1);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-col-header-cell-cushion:hover {
    color: var(--Neutral-1);
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-day {
    background-color: var(--Neutral-6);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-day-frame {
    min-height: 100px;
    padding: 4px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 2px;
    border-radius: 6px;
    color: var(--Neutral-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-day-number:hover {
    color: var(--Neutral-1);
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-day-other {
    background-color: var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-day-other
    .fc-daygrid-day-top {
    opacity: 1;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-day-other
    .fc-daygrid-day-number {
    color: var(--Neutral-3);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-day-today {
    background-color: var(--Neutral-5) !important;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-day-today
    .fc-daygrid-day-number {
    background-color: var(--Primary-3);
    color: #fff;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-day-events {
    margin: 0 2px 4px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-event {
    overflow: hidden;
    min-height: 25px;
    margin-top: 4px;
    border: 1px solid var(--Neutral-4);
    border-radius: 6px;
    background-color: var(--Neutral-5);
    padding: 3px 6px;
    color: var(--Neutral-1) !important;
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-dot-event {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-event:hover {
    border-color: var(--Neutral-3);
    background-color: var(--Neutral-4);
    color: var(--Neutral-1) !important;
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-event-dot {
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    border-color: var(--Primary-3) !important;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-block-event
    .fc-event-main-frame::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    align-self: center;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--Primary-3);
    content: "";
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-event
    .fc-event-time {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--Neutral-2);
    font-weight: 500;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-event
    .fc-event-title {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: visible;
    padding-left: 15px;
    color: var(--Neutral-1);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-dot-event:not(:has(.fc-event-time))
    .fc-event-title {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-more-link {
    display: inline-flex;
    margin-top: 3px;
    border-radius: 6px;
    background-color: var(--Neutral-4);
    padding: 3px 8px;
    color: var(--Neutral-2);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-daygrid-more-link:hover {
    background-color: var(--Neutral-3);
    color: var(--Neutral-1);
}
@media (max-width: 767.98px) {
    #member-portal-main-div
        #app-joinportal-website
        .calendar-container
        .fc-daygrid-day-frame {
        min-height: 80px;
    }

    #member-portal-main-div
        #app-joinportal-website
        .calendar-container
        .fc-daygrid-event {
        padding-right: 4px;
        padding-left: 4px;
        font-size: 12px;
    }
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list-day-text:after {
    border: 1px solid var(--Neutral-5);
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    width: 42%;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list-day-text:before {
    border: 1px solid var(--Neutral-5);
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 42%;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list-day-text {
    background-color: var(--Neutral-4);
    color: var(--Neutral-2) !important;
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 20px;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-list-day-side-text {
    display: none;
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-theme-bootstrap5-shaded {
    background: none;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 16px;
}
#member-portal-main-div [data-module="joyn-portal-pay-dues"] .card-body,
#member-portal-main-div [data-module="joyn-portal-job-portal"] .card-body {
    display: block;
}
#member-portal-main-div [data-module="joyn-portal-job-portal"] ul:not(.nav):not(.dropdown-menu) {
    list-style: disc;
}
#member-portal-main-div #app-joinportal-website .calendar-container .fc-event {
    border-bottom: 1px solid var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-event:not(:has(+ .fc-event)) {
    border-bottom: none;
}
#member-portal-main-div .datepicker-dropdown {
    width: 300px;
}
#member-portal-main-div .datepicker td,
#member-portal-main-div .datepicker th {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
}
#member-portal-main-div
    #app-joinportal-website
    #meetings-list-view
    .meeting-item {
    border-bottom: none;
}
#member-portal-main-div
    #app-joinportal-website
    #meetings-list-view
    .meeting-item:hover {
    background: var(--Neutral-5);
}
#member-portal-main-div
    #app-joinportal-website
    #meetings-list-view
    .meeting-meta-icon {
    width: 14px;
    color: var(--Neutral-2);
    font-size: 14px;
    line-height: 1;
    text-align: center;
}
#member-portal-main-div
    #app-joinportal-website
    #meetings-list-view
    .meeting-item:not(:has(+ .meeting-month-title)):not(:has(+ h4)) {
    border-bottom: 1px solid var(--Neutral-5);
}

/* Join now design */
#member-portal-main-div #app-joinportal-website .membership-item .card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 1.5rem 1rem;
    color: #fff !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.36px;
    background-color: var(--Neutral-1);
}
#member-portal-main-div #app-joinportal-website .membership-item .card-body {
    background-color: var(--Neutral-5);
}
#member-portal-main-div #app-joinportal-website .membership-item .card-footer {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-width: 0;
    background-color: var(--Neutral-5);
}
#member-portal-main-div #app-joinportal-website .membership-item p {
    margin-bottom: 0;
}

/* Tab design start */
#member-portal-main-div #app-joinportal-website .tab-content > .active {
    display: flex !important;
    opacity: 1 !important;
}
#member-portal-main-div #app-joinportal-website .nav-tabs .nav-item {
    margin-bottom: 0;
}
#member-portal-main-div #app-joinportal-website .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    font-family: "Red Hat Display";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.28px;
    color: var(--Neutral-2, #4c6282);
}
#member-portal-main-div
    #app-joinportal-website
    .nav-tabs
    .nav-item.show
    .nav-link,
#member-portal-main-div #app-joinportal-website .nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--Primary-3, #3f66fb);
    background: var(--Neutral-5, #f6faff);
}

/* my-activities card body */
#member-portal-main-div #app-joinportal-website .myActivitiesCard-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#member-portal-main-div #app-joinportal-website .my-activites-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#member-portal-main-div #app-joinportal-website .my-activities-img-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e4eaff;
}
#member-portal-main-div #app-joinportal-website .highlight {
    background-color: var(--Neutral-4);
}
#member-portal-main-div #app-joinportal-website .change-password-icon {
    position: absolute;
    right: 0px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    color: var(--Neutral-3);
}
#member-portal-main-div #app-joinportal-website .change-password-icon:hover i {
    color: var(--Neutral-1);
}
#member-portal-main-div #app-joinportal-website .ccfee-row th,
#member-portal-main-div #app-joinportal-website .ccfee-row td,
#member-portal-main-div #app-joinportal-website .discount-row th,
#member-portal-main-div #app-joinportal-website .discount-row td {
    background-color: transparent;
    color: var(--Neutral-2);
}

#member-portal-main-div .selectize-dropdown-content .opttoplistinggroup {
    border-bottom: 1px solid var(--Neutral-3);
}


#member-portal-main-div .member-only-content {
    text-align: center;
    margin-top: 10.8125rem;
    font-size: 18px;
    font-weight: 600;
}
#member-portal-main-div .readonly-mask {
    position: relative;
    z-index: 9;
    user-select: none;
}
#member-portal-main-div .readonly-mask:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
}
#member-portal-main-div .custom-caret {
    transition: transform 0.3s ease;
}
#member-portal-main-div .collapsed .custom-caret {
    transform: rotate(180deg);
}
/* #member-portal-main-div #filter-fielder-render-area .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -10px;
    right: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #999 transparent;
} */
#member-portal-main-div #filter-fielder-render-area .dropdown-menu {
    position: absolute;
    right: 0; /* Align to the right */
    top: 100%;
    margin-top: 5px; /* Adjust spacing */
    z-index: 9999;
    overflow: visible;
}

#member-portal-main-div #member-directory-search-result .new-search-result {
    width: 30%;
    border: solid 1px var(--Neutral-3);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 0px;
    margin-right: 20px;
}

#member-portal-main-div #member-directory-search-result .new-search-result .result-section-one {
    display: flex;
    gap: 10px;
    padding-left: 20px;
    min-height: 90px;
}

#member-portal-main-div #member-directory-search-result .new-search-result .result-section-two {
    width: 100%;
    background: var(--Neutral-5);
    padding: 17px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 13px;
    padding: 8px 20px;
    flex-grow: 1;
    min-height: 125px;
}

/* Custom field values such as website and social URLs have no break opportunity
   after "/" or ".", so the auto-layout table grew to fit the whole string and
   pushed the content outside the card border. */
#member-portal-main-div #member-directory-search-result .new-search-result .result-section-two table {
    width: 100%;
}

#member-portal-main-div #member-directory-search-result .new-search-result .result-section-two td {
    word-break: break-word; /* fallback for Safari below 15.4 */
    overflow-wrap: anywhere; /* also lets the table shrink back to the card width */
}

#member-portal-main-div #member-directory-search-result .new-search-result .search-highlight {
    background-color: #d7d7d7;
}

#member-portal-main-div #member-directory-search-result .new-search-result .highlight {
    background-color: #d7d7d7 !important;
}

#member-portal-main-div #member-directory-search-result .two-col-search-result {
   width: 45%;
}

#member-portal-main-div #mem-dir-filters-area .filters-selected-count {
    font-size: 15px !important;
}

#member-portal-main-div #portal-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--Neutral-0, #1a212b);
}

#member-portal-main-div #portal-page-members-only {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #ccd7fe;
    border-radius: 999px;
    background-color: #eef2ff;
    color: var(--Primary-3, #3f66fb);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

#member-portal-main-div #portal-page-members-only .bi {
    font-size: 12px;
    line-height: 1;
}

#member-portal-main-div #portal-page-header hr {
    margin: 16px 0 24px 0;
    border-top: 1px solid var(--Neutral-4, #e8f2fa);
    opacity: 1;
}

#member-portal-main-div #custom-directory-instruction {
    text-align: left;
    font-size: 14px;
    padding: 20px 5px 25px 5px;
}

#member-portal-main-div #pay-dues-table tr.dt-hasChild td {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

#member-portal-main-div #app-joinportal-website .file-upload-comp .file-upload-delete,
#member-portal-main-div #app-joinportal-website .file-upload-comp .file-preview-link {
    display: inline-block;
    line-height: 1;
}

#member-portal-main-div #app-joinportal-website .file-image-upload-comp .upload-photo-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #0d6efd;
    background-color: #fff;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem 0.375rem 2rem !important;
    cursor: pointer;
    font-size: 13px;
    max-width: 130px;
    margin-bottom: 0;
}

#member-portal-main-div #app-joinportal-website .file-image-upload-comp .upload-photo-btn::before {
    content: "\f4fe"; /* plus-lg from bootstrap-icons */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0.75rem;
    color: #0d6efd;
    font-size: 14px;
}

#member-portal-main-div #app-joinportal-website .file-image-upload-comp .upload-photo-btn .upload-photo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
#member-portal-main-div #profile-form-accordion:has(> .accordion-item:only-child) .accordion-header {
    display: none;
}
#member-portal-main-div #profile-form-accordion:has(> .accordion-item:only-child) .accordion-item {
    border: 0;
}
/* Phone country-code dropdown */
.phone-number-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}
.input-group.phone-number-group {
    flex-wrap: wrap;       /* allows Parsley error list to wrap to a new row below */
    flex-direction: row;   /* explicit LTR — prevents any inherited row-reverse */
    direction: ltr;        /* force left-to-right regardless of page direction  */
}
.input-group.phone-number-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.phone-code-prefix {
    cursor: pointer;
    border-right: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    flex: 0 0 auto;
    order: -1;             /* guarantee badge is always first in flex row       */
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}
.phone-code-prefix::after {
    content: ' \25BE';
    font-size: 10px;
}
/* Phone extension, docked to the right of a phone input by JoynPhoneExt.bindExtField.
   Sizing and the border seam are !important because the portal theme targets
   `#member-portal-main-div #app-joinportal-website .input-group .form-control`
   (bootstrap-overright.css) - two ID selectors outrank any class-only rule here,
   which is why an earlier class-only version silently lost its width and seam. */
.input-group.phone-number-group > input.phone-ext-input {
    flex: 0 0 84px !important;
    width: 84px !important;
    min-width: 0;
    /* No border-left override: the theme's own 1px border, pulled back by
       Bootstrap's margin-left:-1px, lands exactly on the phone's right border
       and reads as a single divider. Removing it made the two fields look like
       one undivided box. */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Portal theme: the ext is the right end of one rounded control - same border
   colour as the phone, one shared divider, only its right corners rounded. */
@media (min-width: 421px) {
    #member-portal-main-div #app-joinportal-website .input-group.phone-number-group > input.phone-ext-input {
        margin-left: -1px !important;
        border: 1px solid var(--Neutral-4) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }
}
/* "Ext" caption over the docked ext box, added beside the phone label by form_creation.
   ID-scoped: combined.css sets `#member-portal-main-div label {display:inline-block}`. */
.form-label.has-phone-ext-label,
#member-portal-main-div .form-label.has-phone-ext-label {
    display: flex;
    align-items: baseline;
    column-gap: 4px; /* flex drops the space before the required "*" */
}
/* Same width as the ext box, indented like its text so "Ext" sits over the value. */
.phone-ext-label {
    flex: 0 0 84px;
    width: 84px;
    margin-left: auto;
    padding-left: 0.75rem;
    box-sizing: border-box;
}
/* Let the pair fill its column; a shrink-to-fit group truncates the number. */
.input-group.phone-number-group.phone-group-has-ext {
    width: 100%;
}
/* Scoped to the wide layout only: below 420px the ext wraps to its own line and
   the phone must get its right-hand radius back, which happens automatically
   when this rule simply stops applying - no theme radius hardcoded anywhere. */
@media (min-width: 421px) {
    .input-group.phone-number-group > input.phone-has-ext {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}
/* Standalone (no country badge, e.g. Membership Join v2): an ordinary box that
   keeps all four corners and its own left border. */
.phone-ext-input {
    display: inline-block;
    vertical-align: top;
    width: 84px;
    min-width: 0;
}
.phone-ext-input:disabled {
    background: #f8fafb;
    cursor: not-allowed;
}
/* One disabled look for every field in the portal and login. ID-scoped to outrank
   combined.css, which paints these #e9ecef (inputs/selects) and a faded #fafafa (selectize). */
#member-portal-main-div .form-control:disabled,
#member-portal-main-div .form-select:disabled,
#member-portal-main-div .selectize-control .selectize-input.disabled {
    background-color: #f8fafb;
    opacity: 1;
    cursor: not-allowed;
}
/* The theme rule near the top of this file sets `background: none !important` on every selectize. */
#member-portal-main-div #app-joinportal-website .selectize-control .selectize-input.disabled {
    background: #f8fafb !important;
}
.phone-ext-error {
    font-size: 12px;
    margin-top: 2px;
    flex: 1 0 100%;
}
/* Below ~420px the ext drops to its own line rather than squeezing the number. */
@media (max-width: 420px) {
    .input-group.phone-number-group > input.phone-ext-input,
    .phone-ext-input {
        flex: 1 0 100% !important;
        width: 100% !important;
        margin-top: 4px;
        border-left: 1px solid #ced4da !important;
        border-radius: 4px !important;
    }
    /* the ext sits on its own line here, so the caption above the phone would mislead */
    .phone-ext-label {
        display: none;
    }
}
.phone-code-menu {
    display: none;
    position: fixed;
    z-index: 10000;
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
    font-size: 13px;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.phone-code-menu--open {
    display: block;
}
.phone-code-item {
    padding: 6px 14px;
    cursor: pointer;
}
.phone-code-item:hover {
    background: #f0f4ff;
}
/* Prevent the Bootstrap col containing a phone field from overflowing its row.
   .row-cols-sm-2 gives cols "flex: 0 0 auto; width: 50%" but no min-width: 0,
   so adding it here keeps the flex item from expanding past its allocated width. */
.col:has(.phone-number-wrapper),
[class*="col-"]:has(.phone-number-wrapper) {
    min-width: 0;
}
/* Parsley error messages for phone fields: push to full-width row below badge + input */
.input-group.phone-number-group .parsley-errors-list {
    flex: 0 0 100%;
    width: 100%;
    order: 99;
    margin: 4px 0 0;
    padding: 0;
}
.input-group.phone-number-group .parsley-errors-list li,
.phone-parsley-errors .parsley-errors-list li {
    list-style: none;
    color: #dc3545;
    font-size: 0.875em;
}
.phone-parsley-errors .parsley-errors-list {
    margin: 4px 0 0;
    padding: 0;
}

/* Switch profile — profile card list (matches signin module design) */
#member-portal-main-div #list-multi-profile-login {
    text-align: center;
    max-height: 390px;
    padding: 15px 1px 15px 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
}

#member-portal-main-div label.aff-asst-list-item {
    display: flex;
    border-radius: 8px;
    border: solid 1px #89a4ba;
    margin-bottom: 15px;
    font-size: 1.2rem;
    width: 100%;
}

#member-portal-main-div .login-asst-aff-item {
    padding: 15px 0px 15px 0px;
    border-radius: 5px;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    position: relative;
}

#member-portal-main-div label.aff-asst-list-item:hover {
    background: #f6fbff;
}

#member-portal-main-div label.aff-asst-list-item svg {
    display: none;
}

#member-portal-main-div label.aff-asst-list-item:hover svg {
    display: block;
}

#member-portal-main-div #list-multi-profile-login input[type="radio"] {
    display: block !important;
}

#member-portal-main-div .login-asst-aff-name {
    font-weight: 800;
}

#member-portal-main-div .login-asst-aff-email {
    font-weight: 300;
}

#member-portal-main-div .arrow-container {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
    margin-right: 2rem;
}

/* Member portal notifications (jquery-toast-plugin overrides) */
.jq-toast-wrap {
    width: min(410px, calc(100vw - 48px)) !important;
    z-index: 16000 !important;
    font-family: "Red Hat Display", "Poppins", sans-serif;
}

.jq-toast-wrap.top-right {
    top: 24px;
    right: 24px;
}

.jq-toast-wrap .jq-toast-single {
    --toast-accent: #1570ef;
    --toast-background: #eff8ff;
    --toast-border: #84caff;
    --toast-text: #175cd3;
    --toast-shadow: rgba(21, 112, 239, 0.2);

    box-sizing: border-box;
    min-height: 78px;
    margin: 0 0 12px;
    padding: 16px 48px 18px 64px;
    overflow: hidden;
    border: 1px solid var(--toast-border);
    border-left: 6px solid var(--toast-accent);
    border-radius: 12px;
    background-color: var(--toast-background) !important;
    background-image: none !important;
    box-shadow:
        0 12px 28px var(--toast-shadow),
        0 3px 8px rgba(15, 23, 42, 0.1);
    color: var(--toast-text) !important;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.45;
    letter-spacing: 0.1px;
}

.jq-toast-wrap .jq-toast-single::before {
    content: "\0069";
    position: absolute;
    top: 17px;
    left: 17px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    background: var(--toast-accent);
    box-shadow: 0 4px 8px var(--toast-shadow);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.jq-toast-wrap .jq-toast-heading {
    margin: 0 0 3px;
    color: var(--toast-text) !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.jq-toast-wrap .jq-icon-success {
    --toast-accent: #039855;
    --toast-background: #ecfdf3;
    --toast-border: #6ce9a6;
    --toast-text: #05603a;
    --toast-shadow: rgba(3, 152, 85, 0.2);
}

.jq-toast-wrap .jq-icon-success::before {
    content: "\2713";
}

.jq-toast-wrap .jq-icon-error {
    --toast-accent: #d92d20;
    --toast-background: #fef3f2;
    --toast-border: #fda29b;
    --toast-text: #912018;
    --toast-shadow: rgba(217, 45, 32, 0.22);
}

.jq-toast-wrap .jq-icon-error::before {
    content: "\00d7";
    font-size: 24px;
}

.jq-toast-wrap .jq-icon-warning {
    --toast-accent: #dc6803;
    --toast-background: #fffaeb;
    --toast-border: #fec84b;
    --toast-text: #93370d;
    --toast-shadow: rgba(220, 104, 3, 0.2);
}

.jq-toast-wrap .jq-icon-warning::before {
    content: "\0021";
}

.jq-toast-wrap .jq-icon-info {
    --toast-accent: #1570ef;
    --toast-background: #eff8ff;
    --toast-border: #84caff;
    --toast-text: #175cd3;
    --toast-shadow: rgba(21, 112, 239, 0.2);
}

.jq-toast-wrap .close-jq-toast-single {
    top: 11px;
    right: 11px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 7px;
    color: var(--toast-text);
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.7;
    transition:
        background-color 160ms ease,
        opacity 160ms ease;
}

.jq-toast-wrap .close-jq-toast-single:hover {
    background: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

.jq-toast-wrap .close-jq-toast-single:focus-visible {
    outline: 2px solid var(--toast-accent);
    outline-offset: 2px;
}

.jq-toast-wrap .jq-toast-single a {
    border-bottom: 1px solid currentColor;
    color: var(--toast-text);
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
}

.jq-toast-wrap .jq-toast-single ul {
    margin: 5px 0 0 18px;
}

.jq-toast-wrap .jq-toast-single ul li {
    line-height: 1.45;
}

.jq-toast-wrap .jq-toast-progress,
.jq-toast-wrap .jq-toast-loader {
    position: absolute;
    top: auto !important;
    bottom: 0;
    left: 0;
    height: 4px !important;
    border-radius: 0;
    background: var(--toast-accent) !important;
    opacity: 1;
}

.jq-toast-wrap .jq-toast-progress {
    width: 100%;
    transition: width 100ms linear;
}

@media (max-width: 576px) {
    .jq-toast-wrap {
        top: 12px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
    }

    .jq-toast-wrap .jq-toast-single {
        min-height: 72px;
        padding: 14px 44px 16px 58px;
        border-left-width: 5px;
        border-radius: 10px;
    }

    .jq-toast-wrap .jq-toast-single::before {
        top: 15px;
        left: 14px;
        width: 29px;
        height: 29px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jq-toast-wrap .close-jq-toast-single,
    .jq-toast-wrap .jq-toast-progress,
    .jq-toast-wrap .jq-toast-loader {
        transition: none !important;
    }
}

/* Donation page — split layout with gift rail */
#member-portal-main-div #app-joinportal-website .donation-layout {
    display: block;
}
#member-portal-main-div #app-joinportal-website .donation-rail-col {
    margin-top: 1.5rem;
}

/* Two columns once there is room. The cut-off is higher when the portal sidebar
   is on screen, because the router shrinks the page area to col-lg-8. */
@media (min-width: 1024px) {
    #member-portal-main-div #app-joinportal-website .donation-layout:not(.has-sidebar) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 1.5rem;
        align-items: start;
    }
    #member-portal-main-div
        #app-joinportal-website
        .donation-layout:not(.has-sidebar)
        .donation-rail-col {
        margin-top: 0;
        position: sticky;
        top: 1rem;
        align-self: start;
    }
    /* A rail taller than the window cannot stick: it would either carry its own
       scrollbar or leave the Continue button off screen. updateRailSticky measures the
       card and adds this class, which hands the rail back to the page's own scroll. */
    #member-portal-main-div
        #app-joinportal-website
        .donation-layout:not(.has-sidebar)
        .donation-rail-col.is-tall {
        position: static;
    }
}
@media (min-width: 1300px) {
    #member-portal-main-div #app-joinportal-website .donation-layout.has-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 1.5rem;
        align-items: start;
    }
    #member-portal-main-div
        #app-joinportal-website
        .donation-layout.has-sidebar
        .donation-rail-col {
        margin-top: 0;
        position: sticky;
        top: 1rem;
        align-self: start;
    }
    /* A rail taller than the window cannot stick: it would either carry its own
       scrollbar or leave the Continue button off screen. updateRailSticky measures the
       card and adds this class, which hands the rail back to the page's own scroll. */
    #member-portal-main-div
        #app-joinportal-website
        .donation-layout.has-sidebar
        .donation-rail-col.is-tall {
        position: static;
    }
}

/* Fund group accordion. Each group is one object: a dark title bar with its funds
   directly beneath it, inside a single rounded block. That containment is what tells the
   donor which funds belong to which group - a quiet label floating above a separate block
   does not. The bar uses --Neutral-0 against the rows' --Neutral-1 so the hierarchy reads
   without leaving the mockup palette. Scoped to the donation list, so no other accordion
   in the portal changes. */
#member-portal-main-div #app-joinportal-website #donation-list .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.85rem;
    --bs-accordion-btn-bg: var(--Neutral-0);
    --bs-accordion-btn-color: var(--Neutral-6);
    --bs-accordion-active-bg: var(--Neutral-0);
    --bs-accordion-active-color: var(--Neutral-6);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-icon-width: 0.9rem;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* The item is the block: it owns the rounded corners and clips the rows inside. */
#member-portal-main-div #app-joinportal-website #donation-list .accordion-item {
    background-color: var(--Neutral-1);
    border-radius: 16px;
    overflow: hidden;
}
#member-portal-main-div
    #app-joinportal-website
    #donation-list
    .accordion-item
    + .accordion-item {
    margin-top: 1rem;
}
#member-portal-main-div #app-joinportal-website #donation-list .accordion-button {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.02em;
    box-shadow: none;
}
#member-portal-main-div #app-joinportal-website #donation-list .accordion-button:hover {
    background-color: #131a24;
}
/* Bootstrap's focus ring is switched off above, so keyboard focus needs its own mark. */
#member-portal-main-div #app-joinportal-website #donation-list .accordion-button:focus-visible {
    outline: 2px solid var(--Primary-3);
    outline-offset: -2px;
}
/* A thin divider between the title bar and the first fund row. */
#member-portal-main-div #app-joinportal-website #donation-list .accordion-button:not(.collapsed) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fund list. The rounded corners live on the accordion item above, which clips these
   rows, so the list itself only needs the background for the single-group case where
   the title bar is hidden. */
#member-portal-main-div #app-joinportal-website .donation-fund-list {
    background-color: var(--Neutral-1);
}
#member-portal-main-div
    #app-joinportal-website
    .donation-fund
    + .donation-fund
    .donation-fund-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#member-portal-main-div #app-joinportal-website .donation-fund-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background-color: var(--Neutral-1);
    color: var(--Neutral-6);
    cursor: pointer;
}
#member-portal-main-div #app-joinportal-website .donation-fund-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    min-width: 0;
    padding-left: 0;
}
#member-portal-main-div #app-joinportal-website .donation-fund-check .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-color: var(--Neutral-3);
    cursor: pointer;
}
#member-portal-main-div
    #app-joinportal-website
    .donation-fund-check
    .form-check-input:checked {
    background-color: var(--Primary-3);
    border-color: var(--Primary-3);
}
/* Smaller and lighter than the join-now cards: a donation list runs to a dozen or more
   funds with long names, and 18px bold on every row wraps and reads as a wall. */
#member-portal-main-div #app-joinportal-website .donation-fund-check .form-check-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--Neutral-6);
    cursor: pointer;
}
#member-portal-main-div #app-joinportal-website .donation-fund-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--Neutral-6);
    font-size: 14px;
    text-decoration: none;
    /* Constant width so the right edge lines up down the list, including on the
       rows where a name wraps to two lines. */
    min-width: 118px;
    justify-content: flex-end;
}
#member-portal-main-div #app-joinportal-website .donation-fund-toggle:focus-visible {
    outline: 2px solid var(--Neutral-3);
    outline-offset: 3px;
}
#member-portal-main-div #app-joinportal-website .donation-fund-desc {
    /* Extra left inset lines the description up with the fund name above it. */
    padding: 0.875rem 1rem 0.875rem 1.75rem;
    background-color: var(--Neutral-6);
    color: var(--Neutral-2);
    font-size: 14px;
}
#member-portal-main-div
    #app-joinportal-website
    .donation-fund-desc-item
    + .donation-fund-desc-item {
    margin-top: 0.75rem;
}

/* Gift rail */
#member-portal-main-div #app-joinportal-website .donation-rail-card {
    border: 1px solid var(--Neutral-4);
    border-radius: 16px;
}
#member-portal-main-div #app-joinportal-website .donation-rail-title {
    margin: 0 0 0.75rem;
    font-size: 20px;
    font-weight: 700;
    color: var(--Neutral-0);
}
#member-portal-main-div #app-joinportal-website .donation-rail-subtitle {
    margin: 0 0 0.5rem;
    font-size: 16px;
    font-weight: 700;
    color: var(--Neutral-0);
}
#member-portal-main-div #app-joinportal-website .donation-rail-fund {
    margin-bottom: 0.5rem;
    color: var(--Neutral-2);
}
#member-portal-main-div #app-joinportal-website .donation-rail-label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    color: var(--Neutral-2);
}
#member-portal-main-div #app-joinportal-website .donation-rail-help {
    margin-top: 0.35rem;
    color: var(--Neutral-2);
    font-size: 13px;
}
#member-portal-main-div #app-joinportal-website .donation-rail-muted {
    color: var(--Neutral-2);
}
#member-portal-main-div #app-joinportal-website .donation-rail-rule {
    margin: 1rem 0;
    border-top: 1px solid var(--Neutral-4);
    opacity: 1;
}
#member-portal-main-div #app-joinportal-website .donation-rail-btn {
    margin-top: 1rem;
    border-radius: 12px;
    padding: 0.65rem 1rem;
}
#member-portal-main-div #app-joinportal-website .donation-rail-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--Primary-3);
}
#member-portal-main-div #app-joinportal-website .donation-logout-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    color: var(--Neutral-2);
    font-size: 13px;
}
#member-portal-main-div #app-joinportal-website .donation-rail-logout {
    color: var(--Primary-3);
    text-decoration: underline;
}
#member-portal-main-div #app-joinportal-website .donation-amount-group {
    max-width: 300px;
}
#member-portal-main-div #app-joinportal-website .donation-amount-group .input-group-text {
    background-color: var(--Neutral-5);
    border-color: var(--Neutral-4);
    color: var(--Neutral-2);
}
#member-portal-main-div #app-joinportal-website .donation-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
#member-portal-main-div #app-joinportal-website .donation-save-check {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    padding-left: 0;
}
#member-portal-main-div #app-joinportal-website .donation-save-check .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
#member-portal-main-div #app-joinportal-website .donation-save-check .form-check-label {
    flex: 1 1 auto;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.25rem;
    cursor: pointer;
}
#member-portal-main-div #app-joinportal-website .donation-req {
    color: var(--System-Urgency);
}
#member-portal-main-div #app-joinportal-website .donation-field-error {
    min-height: 0;
}
#member-portal-main-div
    #app-joinportal-website
    .donation-field-error
    .parsley-errors-list {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--System-Urgency);
    font-size: 13px;
}
#member-portal-main-div
    #app-joinportal-website
    .donation-field-error
    .parsley-errors-list
    li::before {
    content: "! ";
    font-weight: 700;
}
#member-portal-main-div #app-joinportal-website .donation-notice {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 14px;
}
#member-portal-main-div #app-joinportal-website .donation-notice-warning {
    border: 1px solid var(--System-Warning);
    background-color: var(--System-Warning-soft);
    color: var(--Neutral-0);
}
#member-portal-main-div #app-joinportal-website .donation-notice-error {
    border: 1px solid var(--System-Urgency);
    background-color: var(--System-Urgency-soft);
    color: #a4262c;
}

/* Logged-in summary */
#member-portal-main-div #app-joinportal-website .donation-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    background-color: var(--Neutral-5);
}
#member-portal-main-div #app-joinportal-website .donation-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--Neutral-4);
    color: var(--Primary-3);
    font-size: 13px;
    font-weight: 700;
}
#member-portal-main-div #app-joinportal-website .donation-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#member-portal-main-div #app-joinportal-website .donation-profile-text {
    flex: 1 1 auto;
    min-width: 0;
}
/* Sizes measured off the mockups: name 15, email 13, Edit 12, log out 13. */
#member-portal-main-div #app-joinportal-website .donation-profile-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--Neutral-0);
}
#member-portal-main-div #app-joinportal-website .donation-profile-email {
    color: var(--Neutral-2);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}
#member-portal-main-div #app-joinportal-website .donation-profile-edit {
    flex: 0 0 auto;
    color: var(--Primary-3);
    font-size: 12px;
}

/* A disabled primary button in the rail reads grey, not faded blue.
   Both values are sampled from the mockups. */
#member-portal-main-div #app-joinportal-website .donation-rail-card .btn-primary:disabled,
#member-portal-main-div #app-joinportal-website .donation-rail-card .btn-primary.disabled {
    background-color: #e3e1da;
    border-color: #e3e1da;
    color: #747370;
    opacity: 1;
}

/* Rail links read as plain text links, not underlined ones */
#member-portal-main-div #app-joinportal-website .donation-rail-card a {
    text-decoration: none;
}
#member-portal-main-div #app-joinportal-website .donation-rail-card a:hover {
    text-decoration: underline;
}

/* A field that failed validation, matching the error styling in the mockups */
#member-portal-main-div #app-joinportal-website .donation-rail-card .form-control.parsley-error,
#member-portal-main-div #app-joinportal-website .donation-rail-card .form-select.parsley-error {
    border-color: var(--System-Urgency);
    background-color: var(--System-Urgency-soft);
}
#member-portal-main-div
    #app-joinportal-website
    .donation-amount-group:has(.parsley-error)
    .input-group-text {
    border-color: var(--System-Urgency);
    background-color: var(--System-Urgency-soft);
}

/* Member portal confirmation dialogs (jquery-confirm overrides).
   Sibling to the toast rules above: same semantic ramps, same radius family and
   layered shadows, so the dialog that asks and the toast that answers read as
   one system. Reds match the toast reds rather than --System-Urgency (#ff5a64),
   which fails AA for white button text. */

#member-portal-main-div .jconfirm.jconfirm-bootstrap {
    --jc-accent: #3f66fb;
    --jc-soft: #eef2ff;
    --jc-hairline: #c7d3fe;
    --jc-ink: #2545c9;
    --jc-shadow: rgba(63, 102, 251, 0.22);
    --jc-glyph: "?";

    font-family: "Red Hat Display", "Poppins", sans-serif;
    letter-spacing: 0.24px;
}

/* The dialog asks a question, so a destructive one warns rather than reports a
   failure: "!" here, the check mark on the toast that follows. */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box.jconfirm-type-red {
    --jc-accent: #d92d20;
    --jc-soft: #fef3f2;
    --jc-hairline: #fda29b;
    --jc-ink: #912018;
    --jc-shadow: rgba(217, 45, 32, 0.22);
    --jc-glyph: "!";
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box.jconfirm-type-orange {
    --jc-accent: #dc6803;
    --jc-soft: #fffaeb;
    --jc-hairline: #fec84b;
    --jc-ink: #93370d;
    --jc-shadow: rgba(220, 104, 3, 0.22);
    --jc-glyph: "!";
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box.jconfirm-type-green {
    --jc-accent: #039855;
    --jc-soft: #ecfdf3;
    --jc-hairline: #6ce9a6;
    --jc-ink: #05603a;
    --jc-shadow: rgba(3, 152, 85, 0.22);
    --jc-glyph: "\2713";
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-bg {
    background-color: rgba(26, 33, 43, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box-container {
    width: 100%;
    max-width: 540px;
    float: none;
    margin-right: auto;
    margin-left: auto;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background-color: var(--Neutral-6);
    box-shadow:
        0 0 0 1px var(--Neutral-4),
        0 24px 48px -12px rgba(15, 23, 42, 0.28),
        0 4px 10px rgba(15, 23, 42, 0.08);
    color: var(--Neutral-2);
    text-align: left;
}

/* jquery-confirm pulses the 7px type border forever. Kill it: the header band
   carries the semantic colour now. */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box.jconfirm-type-animated {
    -webkit-animation: none;
    animation: none;
}

/* Header band */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--jc-hairline);
    background-color: var(--jc-soft);
    color: var(--jc-ink);
    font-size: 17px;
    line-height: 1.35;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c::before {
    content: var(--jc-glyph);
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--jc-accent);
    box-shadow: 0 3px 8px var(--jc-shadow);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    color: var(--jc-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: 0.2px;
}

/* Body */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content-pane {
    margin-bottom: 0;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content {
    padding: 22px 24px;
    color: var(--Neutral-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content strong,
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content b {
    color: var(--Neutral-0);
    font-weight: 750;
}

/* Footer. Buttons render in the order the call site declares them, so the
   dismiss key is declared first and the committing action last. */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--Neutral-4);
    border-radius: 0;
    background-color: var(--Neutral-6);
    text-align: right;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons > button {
    margin: 0;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button {
    min-width: 104px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.24px;
    text-transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button:focus-visible {
    outline: 2px solid var(--jc-accent);
    outline-offset: 2px;
}

/* Dismiss. jquery-confirm falls back to btn-default, a Bootstrap 3 class that
   Bootstrap 5 dropped, so it has to be styled here or it renders bare. */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button,
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-default,
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-secondary {
    border-color: var(--Neutral-4);
    background-color: var(--Neutral-5);
    color: var(--Neutral-1);
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button:hover,
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-default:hover,
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-secondary:hover {
    border-color: var(--Neutral-3);
    background-color: var(--Neutral-4);
    color: var(--Neutral-0);
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-primary {
    border-color: var(--Primary-3);
    background-color: var(--Primary-3);
    color: #ffffff;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-primary:hover {
    border-color: #2a4fdc;
    background-color: #2a4fdc;
    color: #ffffff;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-danger {
    border-color: #d92d20;
    background-color: #d92d20;
    color: #ffffff;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-danger:hover {
    border-color: #b42318;
    background-color: #b42318;
    color: #ffffff;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-closeIcon {
    top: 22px;
    right: 20px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    opacity: 1;
    color: var(--jc-ink);
    font-size: 22px !important;
    line-height: 24px !important;
}

#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-closeIcon:hover {
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--jc-accent);
}

@media (max-width: 576px) {
    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c {
        gap: 10px;
        padding: 14px 18px;
        font-size: 16px;
    }

    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c::before {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }

    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c .jconfirm-title {
        font-size: 16px;
    }

    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content {
        padding: 18px;
    }

    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons {
        padding: 14px 18px;
    }

    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box,
    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box-container,
    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-bg,
    #member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button {
        -webkit-animation: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Phone extension shown beside a number in read-only lists (member directory,
   committee roster). Kept out of the tel: link so dialling stays clean.
   Match the Bootstrap phone link color used by the member portal. */
.phone-ext-disp {
    color: var(--bs-link-color);
}

/* Profile Form Accordion */
#member-portal-main-div #profile-form-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#member-portal-main-div #profile-form-accordion .accordion-item {
    border: 1px solid var(--Neutral-4);
    border-radius: 12px !important;
    overflow: hidden;
    background-color: var(--Neutral-6);
    box-shadow: 0 2px 8px rgba(63, 102, 251, 0.06);
}
#member-portal-main-div #profile-form-accordion .accordion-button {
    background-color: var(--Neutral-5);
    color: var(--Neutral-1);
    font-weight: 700;
    font-size: 15px;
    gap: 10px;
    box-shadow: none;
    border-left: 4px solid transparent;
    padding-left: 20px;
    letter-spacing: 0.2px;
}
#member-portal-main-div #profile-form-accordion .accordion-button:hover {
    background-color: var(--Neutral-4);
}
#member-portal-main-div #profile-form-accordion .accordion-button:not(.collapsed) {
    background-color: var(--Neutral-4);
    color: var(--Primary-3);
    box-shadow: none;
    border-left: 4px solid var(--Primary-3);
}
#member-portal-main-div #profile-form-accordion .accordion-button::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234c6282'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#member-portal-main-div #profile-form-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233f66fb'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#member-portal-main-div #profile-form-accordion .accordion-collapse {
    border-top: 1px solid var(--Neutral-4);
}
#member-portal-main-div #mcatAccordion .accordion-item {
    border: 1px solid var(--Neutral-4);
    border-radius: 12px !important;
    overflow: hidden;
    background-color: var(--Neutral-6);
    box-shadow: 0 2px 8px rgba(63, 102, 251, 0.06);
}
#member-portal-main-div #mcatAccordion .accordion-button {
    background-color: var(--Neutral-5);
    color: var(--Neutral-1);
    font-weight: 700;
    font-size: 17px;
    gap: 10px;
    box-shadow: none;
    border-left: 4px solid transparent;
    letter-spacing: 0.2px;
    padding: 1.6rem 20px !important;
}
#member-portal-main-div #mcatAccordion .accordion-button:hover {
    background-color: var(--Neutral-4);
}
#member-portal-main-div #mcatAccordion .accordion-button:not(.collapsed) {
    background-color: var(--Neutral-5);
    color: var(--Primary-3);
    box-shadow: none;
    border-left: 4px solid var(--Primary-3);
}
#member-portal-main-div #mcatAccordion .accordion-button::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234c6282'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#member-portal-main-div #mcatAccordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233f66fb'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#member-portal-main-div #mcatAccordion .accordion-collapse {
    border-top: 1px solid var(--Neutral-4);
}