.ptnew_helpdesk_helpine_contact_wrapper {
    background-color: #E6EFFF;
    border: 1px solid #8CB0FF;
    border-radius: 30px;
    padding: 15px 12px 15px 20px;
}

.ptnew_helpdesk_block_head {
    color: var(--ux4g-color-neutral-900, #171717);
}

.ptnew_helpdesk_block_subhead {
    color: var(--ux4g-color-neutral-700);
    margin-bottom: 10px;
}

.ptnew_helpdesk_helpine_contact_innerwrapper {
    margin-top: 15px;
    margin-bottom: 25px;
}

.ptnew_helpdesk_helpine_contact_head {
    color: var(--ux4g-color-neutral-500);
    margin-bottom: 10px;
}

.ptnew_helpdesk_helpine_contact_content {
    color: var(--ux4g-color-neutral-900, #171717);
    word-break: break-all;
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

.ptnew_helpdesk_helpine_contact_content a{
    color: var(--ux4g-color-neutral-900, #171717);
}

.ptnew_helpdesk_helpine_contact_content i {
    color: #AE5502;
    margin-right: 6px;
}

.ux4g_wizard_section {
    background: #FAFAFA;
}

/* ---------- Header ---------- */
.ux4g_wizard_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.ux4g_wizard_pill {
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

/* ---------- Stepper ---------- */
.ux4g_stepper {
    display: flex;
    align-items: center;
    margin: 28px 0 24px;
}

.ux4g_step {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    flex-shrink: 0;
}

.ux4g_step_dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    border: 2px solid #d8dce3;
    color: #9aa1ac;
    background: #fff;
    flex-shrink: 0;
}

.ux4g_step--active .ux4g_step_dot {
    border-color: #1660f0;
    color: #1660f0;
    box-shadow: 0 0 0 4px rgba(22, 96, 240, 0.12);
}

.ux4g_step--done .ux4g_step_dot {
    background: #1660f0;
    border-color: #1660f0;
    color: #fff;
}

.ux4g_step_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.ux4g_step_label {
    font-size: 14px;
    color: #14171f;
}

.ux4g_step_status {
    font-size: 12px;
    color: #9aa1ac;
}

.ux4g_step--active .ux4g_step_status {
    color: #1660f0;
}

.ux4g_step--done .ux4g_step_status {
    color: #00522C;
}

.ux4g_step--pending .ux4g_step_label {
    color: #9aa1ac;
}

.ux4g_step_connector {
    flex: 1;
    height: 2px;
    background: #e3e6eb;
    margin: 0 16px;
}

.ux4g_step_connector--done {
    background: #1660f0;
}

/* ---------- Card ---------- */
.ux4g_wizard_card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #edeff3;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    padding: 28px 28px 24px;
}

.ux4g_card_title {
    color: var(--ux4g-color-neutral-900, #171717);
    margin-bottom: 4px;
}

.ux4g_card_subtitle {
    color: var(--ux4g-color-neutral-900, #171717);
}

.ux4g_divider {
    border: none;
    border-top: 1px solid #D9D9D9;
    margin: 18px 0 22px;
}

/* ---------- Form grid ---------- */
.ux4g_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}

.ux4g_row--three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {

    .ux4g_row,
    .ux4g_row--three {
        grid-template-columns: 1fr;
    }
}

.ux4g_field {
    display: flex;
    flex-direction: column;
}

.ux4g_field--full {
    margin-bottom: 18px;
}

.ux4g_label {
    color: var(--ux4g-color-neutral-700);
    margin-bottom: 8px;
}

.mandatory_astrix {
    color: #e0483f;
    margin-left: 2px;
}

.ux4g_select,
.ux4g_input,
.ux4g_textarea {
    color: var(--ux4g-color-neutral-900);
    background: var(--ux4g-color-neutral-0);
    border: 1px solid var(--ux4g-color-neutral-200);
    border-radius: 8px;
    padding: 11px 14px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ux4g_select::placeholder,
.ux4g_input::placeholder,
.ux4g_textarea::placeholder {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ux4g-color-neutral-500);
}

/* .ux4g_select:focus,
.ux4g_input:focus,
.ux4g_textarea:focus {
    border-color: #1660f0;
    box-shadow: 0 0 0 3px rgba(22, 96, 240, 0.12);
} */

.ux4g_textarea {
    resize: vertical;
    min-height: 100px;
}

.ux4g_char_count {
    text-align: right;
    font-size: 11px;
    color: #9aa1ac;
    margin-top: 4px;
}

.showErrormsg {
    font-size: 12px;
    color: #e0483f;
    margin-top: 6px;
}

/* ---------- Upload box ---------- */
.ux4g_upload_box {
    border: 2px dashed #D9D9D9;
    border-radius: 8px;
    /* background: #fafbfc; */
    padding: 36px 20px;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ux4g_upload_box--active {
    border-color: #1660f0;
    background: #eef4ff;
}

.ux4g_upload_label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.ux4g_upload_icon {
    font-size: 26px;
    color: #1660f0;
    margin-bottom: 10px;
}

.ux4g_upload_text {

    font-size: 14px;
    color: #14171f;
    margin-bottom: 4px;
}

.ux4g_upload_hint {
    font-size: 12px;
    color: #9aa1ac;
}

.ux4g_upload_or {
    font-size: 12px;
    color: #9aa1ac;
    margin: 10px 0;
}

.ux4g_upload_browse_btn {
    font-size: 13px;
    color: #1660f0;
    border: 1px solid #1660f0;
    border-radius: 8px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ux4g_selected_file {
    margin-top: 12px;
    font-size: 13px;
    color: #14171f;
}

.ux4g_upload_success {
    font-size: 12px;
    color: #1a9c5b;
    margin-top: 8px;
}

.ux4g_upload_progress {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

/* ---------- Footer nav ---------- */
.ux4g_card_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edeff3;
}

.ux4g_spinner {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

/* ---------- Sidebar ---------- */
.ux4g_sidebar {
    background: #eaf1ff;
    border-radius: 14px;
    padding: 24px;
}

.ux4g_sidebar_title {
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 16px;
    color: #14171f;
    margin-bottom: 20px;
    line-height: 1.4;
}

.ux4g_sidebar_row {
    margin-bottom: 16px;
}

.ux4g_sidebar_row:last-child {
    margin-bottom: 0;
}

.ux4g_sidebar_label {
    display: block;

    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.ux4g_sidebar_value {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    color: #1660f0;
    text-decoration: underline;
}

.ux4g_ticket_status_text {
    font-size: 16px;
    color: #14171f;
    margin: 0;
}

.check_ticket_status_text_btn_bg {
    background: linear-gradient(270deg, rgba(255, 124, 28, 0.2) 0%, rgba(136, 173, 255, 0.2) 100%);
}
.check_ticket_text_btn_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.check_ticket_text {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #2661E0;
}

.ptnew_web_common_secondary_btn a {
    text-decoration: none;
    color: #2661E0;
}

.arrow_icon_left_space {
    padding-left: 6px;
}

.ptnew_helpdesk_thankyou_details_wrapper {
    background-color: #FFFFFF;
    border: 1px solid #F6F6F6;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 20px 40px;
    margin-top: 15px;
    margin-bottom: 30px;
    position: relative;
}

.ptnew_helpdesk_thankyou_details_inner_wrapper {
    /* border-bottom: 1px solid #D7D7D7; */
}

.ptnew_helpdesk_thankyou_details_heading {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #747474;
    margin-bottom: 5px;
}

.ptnew_helpdesk_thankyou_details_desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ptnew_helpdesk_pending_tickets_label {
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #E47624;
    border-radius: 4px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 2px 10px;
    width: auto;
    margin-bottom: 0;
}

.ptnew_helpdesk_complete_tickets_label {
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #28854C;
    border-radius: 4px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 2px 10px;
    width: auto;
    margin-bottom: 0;
}

.ptnew_helpdesk_under_review_tickets_label {
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    color: #CA4D00;
    background-color: #FEF3C6;
    border-radius: 4px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 2px 10px;
    width: auto;
    margin-bottom: 0;
}


/* =====================================================================
   Create a New Ticket (Beneficiary Redressal) — responsive
   mobile / iPad. Scoped to the ux4g_wizard / helpdesk classes.
   ===================================================================== */

/* ---- Tablet / iPad (<= 991px) ---- */
@media (max-width: 991px) {
  .ux4g_wizard_section {
    padding-top: var(--ux4g-space-7, 20px) !important;
  }

  /* header: title block and the "Quick Response" pill stack */
  .ux4g_wizard_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ux4g_wizard_pill {
    align-self: flex-start;
  }

  /* stepper: allow horizontal scroll so the 3 steps never squeeze/overflow */
  .ux4g_stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    margin: 20px 0 18px;
    padding-bottom: 4px;
  }

  .ux4g_step {
    flex-shrink: 0;
  }

  .ux4g_step_connector {
    min-width: 24px;
    margin: 0 8px;
  }

  /* sidebar sits below the form once the Bootstrap columns stack */
  .ptnew_helpdesk_helpine_contact_wrapper {
    margin-top: var(--ux4g-space-7, 20px);
  }
}

/* ---- Phones (<= 767px) ---- */
@media (max-width: 767px) {
  .ux4g_wizard_card {
    padding: 20px 16px 18px;
  }

  .ux4g_upload_box {
    padding: 24px 14px;
  }

  /* footer buttons go full width and stack */
  .ux4g_card_footer {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .ux4g_card_footer .ux4g-btn-primary-cust,
  .ux4g_card_footer .ux4g-btn-secondary-cust {
    width: 100%;
  }

  /* hide the hard <br> line breaks effect by letting the subhead wrap freely */
  .ux4g_wizard_header .pt_pages_display_subhead_para br {
    display: none;
  }

  /* "Looking for update..." banner: heading + button stack and go full width */
  .check_ticket_text_btn_wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .check_ticket_text {
    font-size: 20px;
    line-height: 26px;
  }

  .check_ticket_text_btn_wrapper .ptnew_web_common_secondary_btn {
    width: 100%;
    text-align: center;
  }
}

/* ---- Small phones (<= 480px): compact stepper labels ---- */
@media (max-width: 480px) {
  .ux4g_wizard_header .ux4g-display-l-default {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .ux4g_step_label {
    font-size: 13px;
  }

  .ux4g_step_status {
    font-size: 11px;
  }

  .ux4g_step_dot {
    width: 26px;
    height: 26px;
  }
}