@media screen and (max-width: 767px) {
    #back_link {
        display: block;
    }

    .main-content-wrapper {
        flex-direction: column;
    }

    .greeting-head {
        font-size: var(--fontsize-heading-h6, 20px) !important;
        font-weight: 600 !important;
        line-height: var(--line-height-heading-h6, 24px) !important; /* 120% */
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
    }

    #login_section .panel {
        width: 100%;
        border-radius: 0px;
        background: none;
        padding: 12px;
        margin-top: 50px;
    }

    .form-container .form-field {
        font-size: 16px;
    }

    .form-container .form-select {
        font-size: 16px;
    }

    .select-options {
        background: #F7F9FC;
        border-radius: 28px;
        background: #F7F9FC;
        display: none;
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
        color: #131F3B;
        font-size: var(--fontsize-body-md, 14px);
        font-style: normal;
        font-weight: 500;
        line-height: var(--line-height-body-sm, 20px); /* 142.857% */
        margin-top: -5px;
    }

    .select-options .select-option {
        margin-bottom: 10px;
    }

    #select_unit_section .white-panel {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #select_unit_section .white-panel .submit-btn {
        width: 100%;
        font-size: var(--fontsize-body-lg, 16px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--line-height-body-lg, 24px); /* 150% */
    }

    #select_unit_section .white-panel .header-headline {
        margin-top: 90px;
        font-size: var(--fontsize-heading-h5, 24px);
        font-weight: 600;
        line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
    }

    #select_unit_section .white-panel .header-subtext {
        margin-top: 10px;
    }

    #overview_section .section-panel {
        margin-top: 10px;
    }

    #overview_section .section-sub-panel {
        padding-right: 7px;
        padding-left: 7px;
    }

    #overview_section #mobile_menu_panel {
        display: flex;
        margin-top: 50px;
        justify-content: space-between;
    }

    #overview_section #good_morning_panel {
        display: none;
    }

    #overview_section #mobile_settings_btn {
        border-radius: 22px;
        background: #E1E8F5;
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    #overview_section #mobile_settings_btn svg {
        display: inline-block;
        width: 20px;
        height: 20px;
    }

    #overview_section #unit_panel {
        height: 50px;
    }

    #overview_section #gate_code_panel {
        padding: 8px 20px;
        height: 50px;
    }

    #overview_section #gate_code_panel .title-label {
        padding: 0px;
    }

    #overview_section #gate_code_panel .sub-panel-text {
        padding: 0px;
        font-size: var(--fontsize-body-md, 14px);
        line-height: var(--line-height-body-sm, 20px);
    }

    #overview_section  .unit-gatecode-group {
        justify-content: space-between;
        gap: 30px;
        display: flex;
        padding: 4px;
    }

    #overview_section .balance-due-group .title-label {
        font-size: var(--fontsize-body-md, 14px);
    }

    #overview_section .title-label {
        font-size: var(--fontsize-body-md, 12px);
        line-height: var(--line-height-body-sm, 12px);
    }

    #overview_section #unit_select {
        font-size: var(--fontsize-body-lg, 14px);
        line-height: var(--line-height-body-lg, 20px);
    }

    #overview_section .balance-group {
        margin-top: 65px;
    }

    #overview_section .emphasize {
        font-weight: 900;
    }

    #overview_section .autopay-btn { 
        font-size: var(--fontsize-body-sm, 12px);
        font-weight: 500;
    }

    #overview_section .payment-btn { 
        font-size: var(--fontsize-body-sm, 12px);
        font-weight: 500;
    }

    #payment_history_section .date-card .date {
        font-size: var(--fontsize-body-sm, 12px);
    }

    #payment_history_section .date-card .card {
        font-size: var(--fontsize-body-sm, 12px);
    }
    #payment_history_section .price-icon .price {
        font-size: var(--fontsize-body-md, 14px);
        line-height: var(--line-height-body-sm, 20px); /* 142.857% */
    }

    #payment_history_container .payment-history-item-details .title-label {
        color: var(--nautral-600, #393D43);
        font-size: var(--fontsize-body-sm, 12px) !important;
        font-style: normal;
        font-weight: 500;
        line-height: var(--line-height-body-sm, 20px); /* 166.667% */
    }

    #payment_history_container .payment-history-item-details .sub-panel-text {
        color: var(--nautral-600, #393D43);
        font-size: var(--fontsize-body-md, 14px) !important;
        font-style: normal;
        font-weight: 600;
        line-height: var(--line-height-body-sm, 20px); /* 142.857% */
    }

    .content-wrapper {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #payment_history_view #desktop_header {
        display: none;
    }

    #payment_history_view #mobile_header {
        display: block;
    }

    #payment_history_view .print-btn {
        border-radius: 22px;
        background: var(--surface-action, #2258DA);
        width: 44px;
        height: 44px;
        padding: 13px;
        gap: 10px;
        flex: 0 0 0;
        margin-top: -8px;
    }

    #payment_history_view .time-group {
        width:100%; 
        overflow-x: auto; 
        display: flex;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none; 
        scrollbar-width: none;
        padding-left: 5px;
        padding-right: 5px;
    }

    #payment_history_view .greeting-head {
        width: 100%;
    }

    .time-group-wrapper {
        min-width: 400px;
        gap: 16px;
        display: flex;
    }

    #payment_history_view .time-option {
        display: inline-block; 
        width: 20%;
        font-size: var(--fontsize-body-md, 14px);
        line-height: var(--line-height-body-sm, 20px);
        white-space: nowrap; 
    }

    #make_payment_view #pay_select_section .colored-panel {
        background: #EDF1F9 !important;
        margin-top: 5px;
    }

    #make_payment_view #pay_balance_plus_next {
        display: none;
    }

    #make_payment_view #pay_select_section {
        margin-top: 30px;
    }

    #make_payment_view #pay_balance_next {
        margin-top: 20px !important;
    }

    #make_payment_view #pay_balance_custom {
        margin-top: 20px !important;
    }

    #make_payment_view #pay_details_section  {
        margin-top: 30px;
    }

    #make_payment_view #form_container {
        flex-direction: column;
        gap: 0px;
        background: white;
        margin-top: 0px;
        padding: 0px;
    }

    #make_payment_view #second_form_container {
        flex-direction: column;
        gap: 0px;
        background: white;
        margin-top: 0px;
        padding: 0px;
    }

    #make_payment_view .form-container .form-field {
        background: white;
    }

    #make_payment_view .form-container .form-select {
        background: white;
    }

    #make_payment_view .submit-btn {
        width: 100%;
    }

    #make_payment_view .form-row {
        gap: 15px;
    }

    #make_payment_view #make_payment_left {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #make_payment_view #make_payment_left .form-row {
        width: 100%;
        display: flex;
    }

    #make_payment_view #make_payment_right {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #make_payment_view #make_payment_right .form-row {
        width: 100%;
        display: flex;
    }

    #make_payment_view #state_select {
        min-width: 0px;
    }

    #make_payment_view .colored-panel {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
        padding-bottom: 5px;
    }

    #make_payment_view .button-container .enabled-active-btn {
        background: var(--primary-default, #2258DA) !important;
    }   

    #login_section .header-headline {
        color: #131F3B;
        text-align: center;
        font-size: var(--fontsize-heading-h5, 24px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
        margin-top: 35px;
    }

    #login_section .header-subtext {
        color: var(--nautral-600, #393D43);
        text-align: center;
        font-size: var(--fontsize-body-md, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--line-height-body-sm, 20px); /* 142.857% */
        letter-spacing: 0.28px;
        margin-top: 10px;
    }   

    #login_section #find_tenant_container {
        margin-top: 35px;
    }

    #login_section .form-container .form-field {
       background: #ffffff;
    }

    #login_section .form-container .form-select {
       background: #ffffff;
    }

    #login_section .form-container {
        margin-top: 33px;
    }

    #login_section .form-container .submit-btn {
        margin-top: 20px;
        width: 100%;
    }

    #login_section .aux-links-container {
        margin-top: 20px;
    }

    #login_section .form-set {
        margin-top: -8px;
    }

    .reset-signup-section .aux-links-container {
        margin-top: 5px !important;
    }

    #account_settings_view .as-form-container .text-label {
        color: var(--nautral-700, #1D1E22);
        font-size: var(--fontsize-body-sm, 12px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--line-height-body-sm, 20px); /* 166.667% */
    }

    #account_settings_view .as-form-container .text-info {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        border-radius: 32px;
        border: 1px solid rgba(199, 215, 255, 0.60);
        color: var(--nautral-700, #1D1E22) !important;
        font-size: var(--fontsize-body-md, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--line-height-body-sm, 20px); /* 142.857% */
        letter-spacing: 0.28px;
    }
}

#pwChangeModal .modal-header {
    border-bottom: none;
}

#pwChangeModal .pw-form-field {
    background: #ffffff;
}
#pwChangeModal input[type="password"] {
    width: 100%;
    padding: 10px;
}

#pwChangeModal #change_pw_form {
    width: 100%;
    margin-left: 0;
}

#pwChangeModal #submit_change_pw_btn {
    width: 100%;
    margin-left: 0;
}

#pwChangeModal #submit_change_pw_btn {
    border-radius: 999px;
    background: var(--primary-default, #2258DA);
    display: flex;
    height: 52px;
    padding: 13px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: var(--text-on-action, #FFF);
    font-size: var(--fontsize-body-lg, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--line-height-body-lg, 24px);
    margin-top: 20px;
}

#pwChangeModal .modal-title {
    color: #131F3B;
    font-size: var(--fontsize-body-lg, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--line-height-body-lg, 24px); /* 150% */
}

#pwChangeModal .modal-content {
    border-radius: 28px 28px 0 0;
}

#pwChangeModal .btn-close {
    --bs-btn-close-bg: none; 
    opacity: 1;
}

#pwChangeModal .modal-dialog {
    width: 100%;
    margin-left: 0;
}


#pwChangeModal .toggle-password-icon {
    color: var(--primary-500, #1949BF);
}